/* ============================================================
   LE COLOMBY — Couche d'identité, chargée après style.css
   style.css porte la structure, les composants et le responsive ;
   ce fichier ne change que ce qui fait l'identité : typographie des
   titres, logo texte, textures, et les composants propres au Colomby
   (badge de label, tarifs par saison, initiales des hôtes).
   ============================================================ */

/* ---------- Typographie : Fraunces remplace la police manuscrite ---------- */
:root{
  --fs-h1: clamp(2.4rem, 5.4vw, 4.6rem);
  --fs-h2: clamp(1.85rem, 3.5vw, 2.9rem);
}
h1, h2{
  font-weight: 500;
  letter-spacing: -.015em;
  font-variation-settings: "opsz" 96;
}
.hero__titre{ font-weight: 500; text-wrap: balance; }
h2{ text-wrap: balance; }
.surtitre{ letter-spacing: .16em; font-size: .78rem; font-weight: 600; }
.surtitre::before{
  content: ""; display: inline-block; vertical-align: middle;
  width: 1.6rem; height: 1px; margin-right: .6rem;
  background: currentColor; opacity: .7;
}
.section__entete--centre .surtitre::after{
  content: ""; display: inline-block; vertical-align: middle;
  width: 1.6rem; height: 1px; margin-left: .6rem;
  background: currentColor; opacity: .7;
}
.encadre-equipe__citation{ font-style: italic; font-weight: 400; }
::selection{ background: var(--c-rose-poudre); color: var(--c-encre); }

/* ---------- Logo texte : pictogramme montagne + nom ---------- */
.logo--texte{
  gap: .6rem;
  line-height: 1;
  color: var(--c-encre);
}
.logo__marque{ display: inline-flex; color: var(--c-corail); }
.logo__marque svg{ width: 2.1rem; height: auto; }
.logo__mots{ display: inline-flex; flex-direction: column; gap: .22rem; }
.logo__nom{
  font-family: var(--f-titre);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.logo__lieu{
  font-family: var(--f-ui);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .75;
}
.entete[data-etat="transparent"] .logo--texte{ color: var(--c-blanc); }
.entete[data-etat="transparent"] .logo__marque{ color: var(--c-abricot); }
@media (max-width: 767px){
  .entete__logo .logo__nom{ font-size: 1.2rem; }
  .entete__logo .logo__marque svg{ width: 1.7rem; }
  .entete[data-etat].entete--menu-ouvert .logo--texte{ color: var(--c-encre); }
}
.logo--grand{ color: var(--c-blanc); flex-direction: column; gap: 1rem; text-align: center; }
.logo--grand .logo__mots{ align-items: center; }
.logo--grand .logo__marque{ color: var(--c-abricot); }
.logo--grand .logo__marque svg{ width: clamp(3.5rem, 8vw, 5rem); }
.logo--grand .logo__nom{ font-size: clamp(2.6rem, 7vw, 4.4rem); }
.logo--grand .logo__lieu{ font-size: clamp(.7rem, 1.4vw, .85rem); }
.pied__logo{ color: var(--c-ivoire); }
.pied__logo .logo__marque{ color: var(--c-abricot); }

/* ---------- Textures : un lavis sable discret au lieu de l'aquarelle ---------- */
.texture-aquarelle{
  background-color: var(--c-creme);
  background-image:
    radial-gradient(60% 55% at 15% 20%, rgba(214,168,130,.22) 0%, transparent 70%),
    radial-gradient(55% 50% at 85% 85%, rgba(203,213,223,.45) 0%, transparent 72%);
}
.texture-aquarelle::after{ opacity: .08; }

/* Motif signature : le cadre glacier décalé, plus fin */
.motif-signature::before{ border-radius: 2px; }

/* ---------- Badge de label (remplace le badge d'avis) ---------- */
.label-badge__cles{ display: inline-flex; gap: 2px; color: var(--etoile); }
.label-badge__cles svg{ width: 18px; height: 18px; }
.avis-badge--clair .label-badge__cles{ color: var(--c-abricot); }

/* ---------- Initiales des hôtes (pas de portrait fourni) ---------- */
.encadre-equipe__portrait--initiales{
  display: grid; place-items: center;
  background: var(--c-encre);
  color: var(--c-ivoire);
  font-family: var(--f-titre);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: .02em;
}

/* ---------- Tarifs par saison dans les fiches logement ---------- */
.bloc-tarif__saisons{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .5rem;
}
.bloc-tarif__saisons li{
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .7rem 1rem;
  background: var(--c-blanc);
  border: 1px solid var(--bordure-douce);
  border-radius: var(--r-champ);
  font-family: var(--f-ui);
  font-size: var(--fs-petit);
}
.bloc-tarif__saisons b{ color: var(--accent); font-weight: 600; white-space: nowrap; }
.bloc-tarif .carte-contact__note{ margin-top: .5rem; }

/* ---------- Activités : lieux non cliquables (pas de galerie par lieu) ---------- */
.lieu{ cursor: default; }
.lieu__titre{ font-family: var(--f-ui); font-weight: 600; }

/* ---------- Petites finitions ---------- */
.carte-chambre__tarif b,
.modale__tarif__valeur{ font-family: var(--f-titre); font-weight: 600; }
.points__chiffre{ font-family: var(--f-titre); font-weight: 500; }

/* ---------- Logements : trois cartes sur une ligne, pleine hauteur ----------
   Le gabarit d'origine comblait l'écart entre la carte mise en avant et les
   chambres par un bloc décoratif. Ici les trois cartes tiennent sur une
   seule ligne : elles s'étirent toutes à la même hauteur. */
@media (min-width: 768px){
  .chambres__piste .chambres__cellule .chambres__comble{ display: none !important; }
  .chambres__cellule:not([data-rail-copie]){ display: flex; flex-direction: column; }
  .chambres__cellule > .carte-chambre{ flex: 1 1 auto; }
}

/* ---------- Activités : quatre catégories sur une ligne, voile sombre ---------- */
@media (min-width: 1024px){
  .carte-activite{ flex-basis: calc((100% - 3 * var(--gouttiere)) / 4); min-width: 0; }
}
.carte-activite__voile{
  background: linear-gradient(180deg,
    rgba(31,42,58,.15) 0%,
    rgba(31,42,58,.55) 50%,
    rgba(31,42,58,.88) 100%);
}
.carte-activite__corps,
.carte-activite__titre,
.carte-activite__accroche,
.carte-activite .lien-fleche{ color: var(--c-blanc); }
.carte-activite__embleme{ color: var(--c-abricot); }

/* ---------- Contact : l'adresse email est longue ---------- */
.carte-contact__valeur{ overflow-wrap: anywhere; }
a.carte-contact__valeur[href^="mailto"]{ font-size: 1rem; }
.pied__liste li{ font-size: inherit; }

/* ---------- Bande des points forts : compteurs et entrée en fondu ----------
   Piloté par js/compteurs.js. Les classes n'existent qu'avec JavaScript et
   sans « animations réduites » : sinon la bande s'affiche telle quelle. */
.compteur{
  display: inline-block;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.points__item--attente .points__icone,
.points__item--attente .points__chiffre,
.points__item--attente .points__libelle{
  opacity: 0;
  transform: translateY(14px);
}
.points__item--entre .points__icone,
.points__item--entre .points__chiffre,
.points__item--entre .points__libelle{
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--delai-point, 0ms);
}
.points__item--entre .points__chiffre{ transition-delay: calc(var(--delai-point, 0ms) + 80ms); }
.points__item--entre .points__libelle{ transition-delay: calc(var(--delai-point, 0ms) + 160ms); }