/* =========================================================================
   REFONTE 2026 — COMPOSANTS (chargé sur TOUTES les pages, après socle.css)
   Promotion du système validé sur la home (home-commun.css) vers des
   composants réutilisables par tous les gabarits. Opt-in strict : chaque
   règle est ancrée sur un contexte précis (.post_content, .rpost, classes
   .cta-*) — JAMAIS de sélecteur nu (h1, a, .btn seuls), pour ne toucher
   aucune zone non prévue. Ne JAMAIS ancrer sur #contenu (id partagé avec
   une section différente sur la home).
   Lois du système (audit UX, P1-P13) : p22-underground pour ce qui nomme,
   brandon-grotesque pour ce qui explique ; un seul dispositif graphique
   répété (le filet-seuil, socle.css §S2) ; UN SEUL bouton noir plein par
   page (la réservation là où elle est, le CTA principal sinon).
   ========================================================================= */

/* =========================================================================
   §C1 — PROSE ÉDITORIALE (le contenu saisi, the_content)
   ========================================================================= */

.post_content p,
.post_content li{
  font-family:'brandon-grotesque',Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.7;color:var(--encre-douce);
}
/* mesure de confort : ~62-72 signes (borne px : la mesure en ch dépend du
   chasse réel de la police, cf. correctif du tour d'horizon home) */
.post_content > p{max-width:640px}
.post_content p{margin:0 0 var(--dans-bloc)}

/* =========================================================================
   §C2 — TITRES DE BLOC (ce qui nomme, dans le contenu)
   Le thème injecte en JavaScript un ornement span.bulle dans chaque h2 de
   .post_content (mojoplug) : masqué, le dispositif de section est le
   filet-seuil, pas la bulle.
   ========================================================================= */

.post_content h2,
.post_content h3,
.post_content h4{
  font-family:'p22-underground',sans-serif;font-weight:400;
  color:var(--encre);letter-spacing:0;text-align:left;
  margin:var(--dans-sujet) 0 var(--dans-bloc);
}
.post_content h2{font-size:24px;line-height:1.2}
.post_content h3{font-size:20px;line-height:1.25}
.post_content h4{font-size:17px;line-height:1.3}
.post_content h2 .bulle,
.post_content h3 .bulle{display:none !important}

/* =========================================================================
   §C3 — HIÉRARCHIE D'ACTIONS (P11)
   Trois niveaux, trois classes réutilisables + le mapping des classes
   héritées du thème, contexte par contexte.
   ========================================================================= */

/* niveau 1 — l'action principale : noir plein. UNE occurrence par page. */
.cta-plein,
.post_content input.wpcf7-submit{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--encre) !important;color:var(--blanc) !important;
  border:1px solid var(--encre) !important;border-radius:0;
  height:var(--cta-hauteur);padding:0 28px !important;
  font-family:'brandon-grotesque',Helvetica,Arial,sans-serif !important;
  font-size:13px !important;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
.cta-plein:hover,
.post_content input.wpcf7-submit:hover{background:transparent !important;color:var(--encre) !important}

/* niveau 2 — l'action secondaire : contour. */
.cta-contour,
.post_content a.btn.btn-primary,
.reservit-contact{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:transparent !important;color:var(--encre) !important;
  border:1px solid var(--encre) !important;border-radius:0;
  padding:12px 26px !important;height:auto;line-height:1.2 !important;
  font-family:'brandon-grotesque',Helvetica,Arial,sans-serif !important;
  font-size:13px !important;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;text-shadow:none !important;
}
.cta-contour:hover,
.post_content a.btn.btn-primary:hover,
.reservit-contact:hover{background:var(--encre) !important;color:var(--blanc) !important}

/* R106 (08/10/2026, demande de l'opérateur) : groupe « action principale + deux actions secondaires » d'un même
   paragraphe (accueil : Réserver, Tarifs hiver, Tarifs été), sur téléphone. Le bouton plein prend toute la
   largeur ; les deux boutons à contour se partagent la ligne suivante, moitié chacun, à la hauteur du bouton
   plein. Si un libellé ne tient pas dans sa moitié (min-width:max-content), la ligne déborde et chaque bouton
   passe sur sa propre ligne, pleine largeur. Ordinateur et tablette : inchangés. */
@media (max-width:767px){
  p:has(> a.cta-plein + a.cta-contour + a.cta-contour:last-child){
    display:flex;flex-wrap:wrap;gap:calc(var(--dans-bloc) / 4);
  }
  p:has(> a.cta-plein + a.cta-contour + a.cta-contour:last-child) > a.cta-plein{flex:1 1 100%;margin:0}
  p:has(> a.cta-plein + a.cta-contour + a.cta-contour:last-child) > a.cta-contour{
    flex:1 1 calc(50% - var(--dans-bloc) / 8);min-width:max-content;box-sizing:border-box;margin:0;
    height:var(--cta-hauteur);padding-top:0 !important;padding-bottom:0 !important;
  }
}

/* niveau 3 — le lien d'action : texte souligné, pas de boîte. */
.cta-lien,
.archive-basic .links a.btn.btn-primary{
  display:inline-flex;align-items:center;
  background:transparent !important;border:0 !important;padding:0 !important;
  color:var(--encre) !important;font-size:14px !important;
  letter-spacing:.04em;text-transform:none;
  border-bottom:1px solid var(--encre) !important;border-radius:0;
  text-decoration:none;box-shadow:none !important;
}
.cta-lien:hover,
.archive-basic .links a.btn.btn-primary:hover{color:var(--encre-douce) !important;border-bottom-color:var(--filet) !important}

@media (pointer:coarse){
  .cta-lien,
  .archive-basic .links a.btn.btn-primary{min-height:44px !important}
}

/* =========================================================================
   §C4 — LIENS DE CONTENU (dans la prose uniquement)
   ========================================================================= */

.post_content p a:not(.btn):not([class*="cta-"]):not(.reservit-contact),
.post_content li a:not(.btn):not([class*="cta-"]){
  color:var(--encre);text-decoration:none;
  border-bottom:1px solid var(--filet);
}
.post_content p a:not(.btn):not([class*="cta-"]):not(.reservit-contact):hover,
.post_content li a:not(.btn):not([class*="cta-"]):hover{border-bottom-color:var(--encre)}

/* =========================================================================
   §C5 — CARTE MÉDIA .rpost (composant neuf)
   Le legacy ne stylait ces cartes que par la grille Bootstrap ; le bloc
   #roomCat n'avait AUCUN CSS. Servira : liste des chambres, « autres
   chambres » (related), galerie vidéos.
   Markup existant conservé : a > .rpost > .rpost-thumb (background) +
   .rpost-title h4 + .mask > ul.descriptif.
   ========================================================================= */

.rpost{
  background:var(--blanc);border:1px solid var(--filet);
  margin:0 0 var(--dans-bloc);overflow:hidden;
}
.rpost .rpost-thumb{
  display:block;aspect-ratio:3/2;width:100%;
  background-size:cover;background-position:center;
  transition:opacity .25s ease;
}
a:hover .rpost .rpost-thumb{opacity:.92}
/* le legacy posait titre et descriptif EN ABSOLU par-dessus la vignette
   (apparition au survol) : tout repasse en flux sous l'image */
.rpost .rpost-title{
  position:static !important;padding:16px 18px 6px !important;
  background:transparent !important;transform:none !important;
  top:auto !important;bottom:auto !important;left:auto !important;right:auto !important;
  width:auto !important;height:auto !important;text-align:left !important;
}
.rpost .rpost-title h4{
  font-family:'p22-underground',sans-serif !important;font-weight:400 !important;
  font-size:19px !important;line-height:1.25 !important;color:var(--encre) !important;
  margin:0 !important;text-transform:none !important;letter-spacing:0 !important;
  text-shadow:none !important;
}
.rpost .mask{
  position:static !important;opacity:1 !important;background:transparent !important;
  transform:none !important;height:auto !important;width:auto !important;
  visibility:visible !important;display:block !important;
}
.rpost ul.descriptif{
  list-style:none;margin:0;padding:6px 18px 16px;
}
.rpost ul.descriptif li{
  font-family:'brandon-grotesque',Helvetica,Arial,sans-serif;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--encre-douce);line-height:1.9;
}
.rpost ul.descriptif li i{color:var(--encre-douce);margin-right:6px;background:transparent}

/* =========================================================================
   §C6 — BLOC ACTUALITÉS (shortcode [crychar_actus], functions.php)
   Grille propre au bloc : le .row Bootstrap du thème porte des marges
   négatives qui déborderaient de la gouttière de .contenu-single.
   ========================================================================= */

.post_content .actus-bloc{margin:var(--dans-sujet) 0 0}
.post_content .actus-grille{
  display:grid;gap:var(--dans-bloc);
  /* minmax(0,1fr) et non 1fr : un titre d'article long impose sinon sa largeur
     minimale à la colonne, qui déborde de la grille (mesuré : cartes de 452px
     au lieu de 352, 3e carte 300px hors cadre) */
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:768px){
  /* minmax(0,1fr) ici aussi : avec 1fr, la colonne prenait 452px dans une grille
     de 280px sur iPhone (mesuré le 01/10), les cartes débordaient de 172px */
  .post_content .actus-grille{grid-template-columns:minmax(0,1fr)}
}
/* la carte porte le lien : ni soulignement ni filet hérités de §C4 */
.post_content .actus-grille a{
  display:block;text-decoration:none;border:0 !important;
}
.post_content .actus-grille .rpost{margin:0;height:100%}

/* =========================================================================
   §C7 — LISTES À PUCES MAISON (ul.puces)
   Venue de interieur.css §I3 au lot 3 : la home en a besoin (le contenu de
   présentation y est descendu) et interieur.css n'y est pas chargé.
   117 pages publiées utilisent cette classe.
   ========================================================================= */

.post_content ul.puces{list-style:none;margin:0 0 var(--dans-bloc);padding:0}
.post_content ul.puces li{padding-left:18px;position:relative}
.post_content ul.puces li::before{
  content:"";position:absolute;left:0;
  /* le legacy impose 12px aux pseudo-éléments (police d'icônes) : sans
     font-size:inherit, le em ci-dessous se calcule sur 12px et le filet
     remonte au-dessus de la ligne (mesuré 8,6px au lieu de 14,3px).
     .85em = mi-hauteur de la première ligne (line-height 1.7 du §C1). */
  font-size:inherit;top:.85em;
  width:6px;height:1px;background:var(--encre);
}
/* le legacy pose un chevron « › » devant chaque li de contenu : il ferait
   doublon avec le filet ci-dessus */
.post_content ul.puces li::after{content:none !important}

/* =========================================================================
   §C-DISTINCTIONS — LE BLOC DES LABELS DU PIED DE PAGE
   Quatre distinctions valent comme preuve, à trois conditions : qu'elles
   partagent une même ligne de base, qu'un mot dise ce qu'elles sont, et que
   chacune mène à sa source. Aucune des trois n'était remplie.
   Les hauteurs ne sont pas égales mais optiquement équivalentes : le sceau
   circulaire d'Authentic paraît plus petit qu'un logotype horizontal de même
   hauteur, il est donc porté un cran au-dessus.
   ========================================================================= */

/* Disposition de l'ancien site (05/10/2026, demande de l'opérateur) : sceau d'Authentic centré
   au-dessus, les trois guides alignés dessous, à toutes les tailles. Couleurs inchangées : logos gris
   sur le crème du pied de page. La largeur des marques suit celle de la colonne (unités de conteneur),
   bornée pour n'être ni minuscule en tablette portrait (colonne de 200px) ni énorme sur téléphone. */
.distinctions{margin-top:6px;container-type:inline-size}
.distinctions__intitule{
  display:block;text-align:center;
  font-family:'brandon-grotesque',Helvetica,Arial,sans-serif;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--encre-douce);font-weight:600;
  margin-bottom:var(--dans-bloc);
}
.distinctions__liste{
  display:grid;grid-template-columns:repeat(3, 1fr);
  align-items:center;justify-items:center;
  gap:14px 8px;margin:0;padding:0;list-style:none;
}
.distinctions__liste > li{margin:0;padding:0}
/* le sceau d'Authentic, seul sur sa ligne, centré */
.distinctions__liste > li:first-child{grid-column:1 / -1}
.distinctions__liste a{
  display:block;
  opacity:.82;transition:opacity .2s ease;
}
.distinctions__liste a:hover,
.distinctions__liste a:focus{opacity:1}

.marque{
  display:block;
  background-repeat:no-repeat;background-position:center center;
  background-size:contain;
}
.marque--authentic{width:clamp(84px, 30cqw, 108px);aspect-ratio:1;background-image:url(../../../images/authentichotel-refonte.svg)}
.marque--gault,
.marque--michelin,
.marque--college{width:clamp(60px, 30cqw, 88px);aspect-ratio:1}
.marque--gault   {background-image:url(../../../images/GaultMillau-refonte.svg)}
/* Le logotype Michelin occupe toute la largeur de son fichier (sa réserve est en haut et en bas) :
   cadré par « contain » comme les autres, il prend la largeur entière de sa case. Agrandi au-delà,
   il était rogné sur les côtés (essai du 05/10). */
.marque--michelin{background-image:url(../../../images/Michelin-refonte.svg)}
.marque--college {background-image:url(../../../images/CollegeCulinaire-refonte.svg)}

/* Tablette portrait : la colonne tombe à 200px ; écarts resserrés pour trois guides de 60px. */
@media (min-width:768px) and (max-width:991px){
  .distinctions__liste{gap:12px 4px}
}
@media (max-width:767px){
  .distinctions{margin-top:var(--dans-sujet)}
}