/* =========================================================================
   chalets-public.css — page publique d'une annonce de chalet
   ========================================================================= */

/* Couleurs et polices : voir css/chalets-tokens.css (source de verite),
   a charger AVANT ce fichier. */

body { background-color: var(--ch-bg-page); }

/* Les champs de formulaire (button, input, select, textarea) n'héritent PAS de font-family :
   les navigateurs leur imposent leur police système. Sans ceci, les boutons et leurs <span>
   internes (ex. .ch-guests__summary) s'affichent hors Open Sans. */
.ch button, .ch input, .ch select, .ch textarea,
.ch-modal button, .ch-modal input, .ch-modal select, .ch-modal textarea { font-family: inherit; }

.ch { max-width: 1120px; margin: 24px auto; padding: 0 16px; }
.ch a:not([class]) { color: var(--ch-link); }   /* liens texte de la fiche */

.ch-preview-banner {
    background:#fff8e1; border:1px solid #ffe082; color:#8a6d00;
    padding:10px 14px; border-radius:10px; margin-bottom:16px; font-size:.9rem;
}

/* ---- Galerie ---- */
/* --gh = hauteur de la galerie ET largeur de la colonne vignettes
   -> 2 vignettes empilées deviennent carrées (largeur = hauteur/2). */
.ch-gallery { --gh:460px; display:grid; grid-template-columns:1fr var(--gh); gap:8px; border-radius:16px; overflow:hidden; }
.ch-gallery__main { display:block; background:#eee; height:var(--gh); cursor:pointer; overflow:hidden; }
.ch-gallery__main img { width:100%; height:100%; object-fit:cover; display:block; }   /* 460px de haut, ratio conservé (cover) */

/* Effet zoom au survol — identique à annonce-a-louer.php (scale 1.1 + brightness .9) */
.ch-gallery img { transition:transform .4s ease; }
.ch-gallery__main:hover img,
.ch-gallery__thumbs .gallery-item:hover img { transform:scale(1.1); filter:brightness(.9); }
/* height explicite : sans elle, les rangees 1fr se calent sur la hauteur intrinseque
   des images et la colonne peut depasser la photo principale (visible des 3 vignettes
   empilees), ce qui creait un vide sous celle-ci. */
.ch-gallery__thumbs { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
                      gap:8px; height:var(--gh); min-height:0; }
.ch-gallery__thumbs .gallery-item { position:relative; display:block; overflow:hidden; cursor:pointer; background:#eee; min-height:0; }
.ch-gallery__thumbs img { width:100%; height:100%; object-fit:cover; display:block; }
.ch-gallery__more { position:absolute; inset:0; background:rgba(0,0,0,.55); color:#fff;
                    display:flex; align-items:center; justify-content:center; font-size:1rem; font-weight:600; }
.ch-gallery__empty { aspect-ratio:16/6; background:#f1f3f5; color:#adb5bd; display:flex; align-items:center;
                     justify-content:center; gap:8px; border-radius:16px; font-size:1.1rem; }

/* ---- Variantes selon le nombre de photos (la grille par défaut vise 5 photos) ----
   La classe .ch-gallery--N est posée en PHP : N = min(nb photos, 5). */

/* 1 photo : pleine largeur, pas de colonne de vignettes */
.ch-gallery--1 { grid-template-columns:1fr; }

/* 2 photos : deux moitiés égales, la vignette occupe toute la hauteur */
.ch-gallery--2 { grid-template-columns:1fr 1fr; }
.ch-gallery--2 .ch-gallery__thumbs { grid-template-columns:1fr; grid-template-rows:1fr; }

/* 3 photos : principale + 2 vignettes empilées (carrées : largeur = hauteur/2) */
.ch-gallery--3 { grid-template-columns:1fr calc(var(--gh) / 2); }
.ch-gallery--3 .ch-gallery__thumbs { grid-template-columns:1fr; grid-template-rows:1fr 1fr; }

/* 4 photos : principale + 3 vignettes empilées */
.ch-gallery--4 { grid-template-columns:1fr calc(var(--gh) / 2); }
.ch-gallery--4 .ch-gallery__thumbs { grid-template-columns:1fr; grid-template-rows:repeat(3, 1fr); }

@media(max-width:1000px){ .ch-gallery { --gh:380px; } }   /* carrés plus petits sur écran moyen */
@media(max-width:720px){
    .ch-gallery { grid-template-columns:1fr; }
    .ch-gallery__main { height:56vw; max-height:460px; }
    .ch-gallery__thumbs { display:none; }
}

/* ---- Mobile : boutons ronds sur la photo (retour / partager / favori) ----
   Masqués sur grand écran ; sur mobile, ils remplacent le lien « Retour à la
   recherche » et les boutons à droite du titre (.ch--photos = l'annonce a des photos). */
.ch-photobar { display:none; }
@media(max-width:720px){
    .ch-gallery { position:relative; }
    .ch-photobar { display:flex; justify-content:space-between; align-items:center;
        position:absolute; top:12px; left:12px; right:12px; z-index:3; pointer-events:none; }
    .ch-photobar__right { display:flex; gap:10px; }
    .ch-photobar .ch-photobtn { pointer-events:auto; position:static; width:40px; height:40px; flex:none;
        display:flex; align-items:center; justify-content:center; border:0; border-radius:50%; padding:0;
        background:rgba(255,255,255,.95); color:#1a1a1a; box-shadow:0 1px 4px rgba(0,0,0,.18);
        cursor:pointer; text-decoration:none; -webkit-tap-highlight-color:transparent; }
    .ch-photobar .ch-photobtn i { font-size:.95rem; color:#1a1a1a; text-shadow:none; }
    .ch-photobar .ch-photobtn.is-on i { color:#e0203c; }
    .ch-photobar .ch-photobtn:active { transform:scale(.94); }

    .ch--photos .ch-titlerow__actions,
    .ch--photos .ch-back { display:none; }
    .ch--photos .ch-crumbs__list { margin-left:0; padding-left:0; border-left:0; }
}

/* ---- Corps : 2 colonnes ---- */
.ch-body { display:grid; grid-template-columns: 1fr 360px; gap:40px; margin-top:24px; }
@media(max-width:900px){ .ch-body { grid-template-columns:1fr; } }

/* ---- Fil d'Ariane (au-dessus du titre) : « ← Retour à la recherche | Région › Ville » ---- */
.ch-crumbs { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; font-size: .9rem; line-height: 1.3; }
.ch-back { display: inline-flex; align-items: center; gap: 8px; color: #1a1a1a; font-weight: 600; text-decoration: none; }
.ch-back:hover { text-decoration: underline; }
.ch-back i { font-size: .85rem; }
.ch-crumbs__list { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0 0 0 14px; padding: 0 0 0 14px; border-left: 1px solid #d6d6d6; }
.ch-crumbs__list li { display: inline-flex; align-items: center; }
.ch-crumbs__list li + li::before { content: "›"; margin: 0 8px; color: #9a9a9a; }
.ch-crumbs__list a { color: #6a6a6a; text-decoration: none; }
.ch-crumbs__list a:hover { color: #1a1a1a; text-decoration: underline; }

/* ---- Titre (au-dessus de la galerie) ---- */
.ch-title { 
    font-family: var(--ch-font-titre);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.2;
    margin: 8px 0 10px;
}

/* JC20261002 — Etiquettes payantes a droite du titre (annonce-chalets.php).
   Memes couleurs que les cartes de liste (.chr-tag*, css/chalets-recherche.css),
   feuille non chargee sur cette page. Classes .ch-tag* et non .tag-* : main.css
   positionne .tag-urgent / .tag-offre / .tag-vip en absolu partout sur le site. */
/* JC20261008 : etiquettes sorties du <h1> (SEO) — le bloc garde titre et
   etiquettes sur une meme ligne, comme avant. */
.ch-titlebloc { margin: 8px 0 10px; min-width: 0; }
.ch-titlebloc .ch-title { display: inline; margin: 0; }
.ch-tags { display:inline-flex; flex-wrap:wrap; gap:6px; margin-left:12px; vertical-align:middle; position:relative; top:-3px; }
.ch-tag { display:inline-block; padding:3px 8px; border-radius:.25rem; font-family:var(--ch-font-texte);
    font-size:.75rem; font-weight:600; line-height:1.4; letter-spacing:.02em; text-transform:uppercase;
    color:#fff; white-space:nowrap; }
.ch-tag--urgent { background:rgba(204, 0, 0, .85); }
.ch-tag--offre  { background:rgba(119, 71, 255, .85); }
.ch-tag--vip    { background:rgba(153, 153, 153, .9); }

/* ---- En-tête sous la galerie : Type · Ville, Région / faits ---- */
.ch-head { font-family: var(--ch-font-titre); margin-bottom:24px; }
.ch-head__line1 { font-weight:700; font-size:1.25rem; color:#1a1a1a; }
.ch-head__line2 { font-weight:500; font-size:1.15rem; color:#555; margin-top:4px; }

.ch-sec { margin-top:44px; }
.ch-sec h2 { font-size:1.25rem; margin:0 0 12px; }
.ch-desc { font-size: 1rem; color:#333; line-height:1.6; }
/* Description tronquée à ~10 lignes + bouton "Afficher plus" -> modale */
.ch-desc--clamp { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:10; line-clamp:10; overflow:hidden; }
.ch-desc[hidden] { display:none; }   /* prioritaire sur .ch-desc--clamp (display:-webkit-box) */
.ch-desc-more i { font-size:.75em; }
.ch-modal__head--plain { border-bottom:none; padding-bottom:0; }
.ch-desc-modal__title { font-family: var(--ch-font-titre); font-weight:700; font-size:1.6rem; margin:0 0 18px; color:#1a1a1a; }

/* Bascule de langue FR / EN */
.ch-lang { display:inline-flex; gap:2px; background:#ececeb; border-radius:999px; padding:3px; margin-bottom:14px; }
.ch-lang__btn { border:none; background:none; cursor:pointer; padding:5px 16px; border-radius:999px;
                font-size:.85rem; font-weight:700; color:#555; line-height:1.4; }
.ch-lang__btn.is-active { background:#fff; color:#222; box-shadow:0 1px 3px rgba(0,0,0,.12); }
.ch-lang__btn:hover:not(.is-active) { color:#222; }

/* ---- Permis CITQ ---- */
.ch-citq { display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px 22px; margin-top:20px;
           background:#f5f3ef; border:1px solid #e6e2da; border-radius:12px; padding:12px 18px;
           font-size:.95rem; color:#333; }
.ch-citq b { font-weight:700; }
.ch-citq__exp { color:#555; }

/* ---- Où vous dormirez ---- */
.ch-beds { display:flex; flex-wrap:wrap; gap:16px; }
.ch-bed-card { display:flex; align-items:center; gap:12px; border:1px solid #d7dcd2; border-radius:12px;
               padding:16px 22px; min-width:150px; font-size:1rem; color:#222; }
.ch-bed-card__icon { display:inline-flex; line-height:0; color:var(--ch-action); }
.ch-bed-card__icon svg { width:26px; height:26px; display:block; }
.ch-bed-card i { font-size:1.5rem; color:var(--ch-action); }

.ch-eq-cat { font-size:1rem; margin:20px 0 10px; }
.ch-eq-grid { list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:10px 20px; padding:0; margin:0; }
@media(max-width:520px){ .ch-eq-grid { grid-template-columns:1fr; } }
.ch-eq-grid li { display:flex; align-items:center; gap:10px; color:#333; font-size: 1rem; }
.ch-eq__icon { flex:0 0 2rem; width:2rem; height:2rem; display:inline-flex; align-items:center; justify-content:center;
               font-size:1.6rem; color:#444; line-height:0; }   /* boîte carrée fixe -> texte + lignes alignés */
.ch-eq__icon svg { width:1.75rem; height:1.75rem; display:block; }

/* ---- Bouton "Voir toutes les commodités" + modale ---- */
/* Boutons "Afficher plus" / "Voir toutes les commodités" : sans bordure, fond un peu plus foncé que le body */
.ch-eq-more, .ch-desc-more {
    margin-top:16px; background:#ececeb; border:none; border-radius:10px;
    padding:12px 22px; font-size:1rem; font-weight:600; color:#222; cursor:pointer;
    display:inline-flex; align-items:center; gap:6px; text-decoration:none;
}
.ch-eq-more:hover, .ch-desc-more:hover { background:#e2e2e0; }

.ch-modal { position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:20px; }
.ch-modal[hidden] { display:none; }
.ch-modal__overlay { position:absolute; inset:0; background:rgba(0,0,0,.5); }
.ch-modal__box { position:relative; background:#fff; border-radius:16px; width:100%; max-width:820px; max-height:86vh;
                 display:flex; flex-direction:column; box-shadow:0 12px 48px rgba(0,0,0,.25); }
.ch-modal__head { display:flex; align-items:center; justify-content:space-between; padding:18px 26px; border-bottom:1px solid #eee; }
.ch-modal__head h2 { margin:0; font-size:1.2rem; }
.ch-modal__close { background:none; border:none; font-size:1.7rem; line-height:1; cursor:pointer; color:#333; padding:2px 10px; border-radius:8px; }
.ch-modal__close:hover { background:#f0f0f0; }
.ch-modal__body { padding:6px 26px 26px; overflow-y:auto; }

/* ---- Disponibilités (calendrier 2 mois) ---- */
.ch-avail__sub { color:#555; font-size:.95rem; margin:-6px 0 20px; }
.ch-cal { position:relative; }
.ch-cal__months { display:flex; gap:48px; }
@media(max-width:760px){ .ch-cal__months { flex-direction:column; gap:30px; } }
.ch-cal__month { flex:1; min-width:0; }
.ch-cal__title { text-align:center; font-weight:600; font-size:1.05rem; margin-bottom:14px; color:#222; }
.ch-cal__grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px 0; }
.ch-cal__dow { text-align:center; font-size:.8rem; color:#717171; padding-bottom:8px; }
.ch-cal__day { aspect-ratio:1; display:flex; align-items:center; justify-content:center;
               font-size:.95rem; color:#222; border-radius:50%; }
.ch-cal__day--empty { visibility:hidden; }
.ch-cal__day--off { color:#c9c9c9; text-decoration:line-through; }
.ch-cal__arrow { position:absolute; top:-2px; width:34px; height:34px; border:none; background:none;
                 font-size:1.5rem; line-height:1; color:#222; cursor:pointer; border-radius:50%; z-index:1; }
.ch-cal__arrow:hover:not(:disabled) { background:#f0f0f0; }
.ch-cal__arrow:disabled { opacity:.3; cursor:default; }
.ch-cal__arrow[data-cal-prev] { left:0; }
.ch-cal__arrow--next { right:0; }
@media(max-width:760px){ .ch-cal__arrow { top:-4px; } }

/* ---- Destination (carte) ---- */
.ch-map-loc  { font-weight:600; font-size:1.05rem; color:#222; }
.ch-map-hint { color:#717171; font-size:.95rem; margin:4px 0 16px; }
.ch-map { height:380px; border-radius:16px; overflow:hidden; z-index:0; background:#e9eef1; }
.ch-map .leaflet-container { border-radius:16px; }

/* ---- Tarifs et règlements ---- */
.ch-tarifs { list-style:none; padding:0; margin:0; max-width:520px; }
.ch-tarifs li { display:flex; justify-content:space-between; gap:20px; align-items:baseline;
                padding:12px 0; border-bottom:1px solid #eee; font-size:1rem; color:#444; }
.ch-tarifs li:last-child { border-bottom:none; }
.ch-tarifs li b { color:#222; font-weight:700; white-space:nowrap; }
.ch-tarifs__note { margin-top:16px; font-size:.95rem; color:#555; line-height:1.6; }

/* ---- Informations additionnelles (heures + règles) ---- */
.ch-infos { display:grid; grid-template-columns:1fr 1fr; gap:14px 40px; }
@media(max-width:560px){ .ch-infos { grid-template-columns:1fr; } }
.ch-infos ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.ch-infos li { display:flex; align-items:center; gap:12px; font-size:1rem; color:#333; }
.ch-infos li i { flex:0 0 1.5rem; text-align:center; font-size:1.15rem; color:#555; }
.ch-infos__rules li.is-ok i { color:#2e945a; }
.ch-infos__rules li.is-no i { color:#b0b0b0; }
.ch-infos__rules li.is-no { color:#777; }

/* ---- Colonne latérale (prix + contact) ---- */
.ch-aside { position:relative; }
.ch-card { position:sticky; top:20px; border:1px solid #e4e7ea; border-radius:16px; padding:22px;
           box-shadow:0 6px 24px rgba(0,0,0,.06); background:#fff; }
/* Tout sur une seule ligne : « À partir de 300 $ / nuit » (alignés sur la ligne de base) */
.ch-price { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; margin-bottom:4px; }
.ch-price__from { color:#555; font-size:.85rem; }
.ch-price__big { font-size:1.6rem; font-weight:800; }
.ch-price__unit { color:#555; font-size:.85rem; margin-left:-2px; }   /* collé au prix */
.ch-price__min { color:#888; font-size:.85rem; margin-bottom:4px; }
.ch-card hr { border:none; border-top:1px solid #eee; margin:18px 0; background-color: unset; }

.ch-contact__name { font-weight:700; margin-bottom:12px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ch-btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; box-sizing:border-box;
          padding:12px; border-radius:10px; font-size:1rem; text-decoration:none; margin-bottom:10px; border:1px solid transparent; }
.ch-btn--tel  { background:#5BC582; color:#fff; }
.ch-btn--mail { background:#fff; color:#333; border-color:#ccc; }
.ch-btn--link { background:#fff; color:var(--ch-link); border-color:#cdd6ff; font-size:.9rem; }

/* ---- Formulaire de demande d'information ---- */
.ch-form { display:flex; flex-direction:column; gap:12px; }
.ch-form__title { font-weight:800; font-size:1.05rem; color:#1a1a1a; margin-bottom:2px; }
/* En-tête du bloc contact : titre + nom de l'annonceur (avec ou sans formulaire) */
.ch-contact-head { margin-bottom:14px; }
.ch-contact-head__title { font-weight:800; font-size:1.05rem; color:#1a1a1a; }
.ch-contact-head__name { font-size:.95rem; color:#444; margin-top:2px; }
.ch-hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }   /* pot de miel */
.ch-form__row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.ch-field { position:relative; display:flex; flex-direction:column; }
.ch-field input, .ch-field textarea {
    width:100%; box-sizing:border-box; padding:12px 14px; font-size:.95rem;
    border:1px solid #c9ccd1; border-radius:10px; background:#fff; color:#222; font-family:inherit;
}
.ch-field--date { padding:8px 12px; border:1px solid #c9ccd1; border-radius:10px; overflow:hidden; }
.ch-field--date .ch-field__lbl { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#555; }
.ch-field--date input { border:none; padding:2px 0 0; font-size:.95rem; width:100%; min-width:0; cursor:pointer; }
.ch-field--date input:focus { outline:none; box-shadow:none; }
/* masque l'icône calendrier native -> gagne de la largeur */
.ch-field--date input::-webkit-calendar-picker-indicator { display:none; -webkit-appearance:none; }
.ch-field--date input::-webkit-inner-spin-button { display:none; }
/* texte "mm/dd/yyyy" en gris (placeholder) tant que la date n'est pas choisie */
.ch-field--date input:invalid::-webkit-datetime-edit { color:#9aa0a6; }
.ch-field input:focus, .ch-field textarea:focus { outline:none; border-color:var(--ch-action); box-shadow:0 0 0 2px var(--ch-action-ring); }
.ch-field input::placeholder, .ch-field textarea::placeholder { color:#9aa0a6; opacity:1; }   /* harmonise tous les placeholders */

/* ---- Neutralise la validation native heritee de main.css ----------------
   main.css colore les champs selon l'etat de validation du navigateur :
       input:required:invalid, textarea:focus:invalid ...  -> fond rose #fef6f6
       input:focus:required:valid ...                      -> fond vert #efe
   Ces selecteurs pesent (0,2,1) et (0,3,1) ; `.ch-field input` ne pese que
   (0,1,1) et perd, meme si chalets-public.css est charge apres main.css.
   On repasse dessus avec une specificite superieure.

   On ne touche qu'a `background` : le halo de focus de la regle ci-dessus
   reste actif, et le retour d'erreur du volet chalet passe par
   `.ch-field.is-invalid` (bordure rouge + message), declenche a la
   soumission et non des l'affichage du formulaire.                       */
.ch-field input:required:invalid,
.ch-field textarea:required:invalid,
.ch-field select:required:invalid,
.ch-field input:focus:invalid,
.ch-field textarea:focus:invalid,
.ch-field input:focus:required:valid,
.ch-field textarea:focus:required:valid,
.ch-field select:focus:required:valid { background:#fff; }
.ch-field textarea { resize:vertical; min-height:96px; }
.ch-field__err { display:none; color:#c0392b; font-size:.78rem; margin-top:5px; align-items:center; gap:5px; }
.ch-field__err::before { content:"\26A0"; }
.ch-field.is-invalid input, .ch-field.is-invalid textarea,
.ch-field--date.is-invalid { border-color:#c0392b; }
.ch-field.is-invalid .ch-field__err { display:flex; }
.ch-field__count { font-size:.75rem; color:#888; margin-top:5px; }

/* ---- Dates : champ unique « Arrivée - Départ » + calendrier 2 mois ---- */
.ch-dates { position:relative; margin-bottom:12px; }
.ch-dates__toggle { width:100%; display:flex; align-items:center; gap:10px; box-sizing:border-box;
    padding:12px 14px; border:1px solid #c9ccd1; border-radius:10px; background:#fff; cursor:pointer;
    font-size:.95rem; color:#222; text-align:left; }
.ch-dates__toggle > i:first-child { color:var(--ch-action); }
.ch-dates__summary { flex:1; font-weight:600; color:#9aa0a6; }        /* gris tant qu'aucune date */
.ch-dates.has-value .ch-dates__summary { color:#222; }
.ch-dates__caret { color:#888; font-size:.8rem; transition:transform .2s; }
.ch-dates__toggle[aria-expanded="true"] { border-color:var(--ch-action); box-shadow:0 0 0 2px var(--ch-action-ring); }
.ch-dates__toggle[aria-expanded="true"] .ch-dates__caret { transform:rotate(180deg); }
.ch-dates.is-invalid .ch-dates__toggle { border-color:#c0392b; }
.ch-dates.is-invalid .ch-field__err { display:flex; }

/* Popover : 2 mois côte à côte, débordant à gauche (colonne étroite) */
.ch-datepop { position:absolute; z-index:30; top:calc(100% + 6px); right:0; width:620px; max-width:88vw;
    background:#fff; border:1px solid #e0e0e0; border-radius:14px; padding:18px 20px 14px;
    box-shadow:0 14px 44px rgba(0,0,0,.18); }
.ch-datepop[hidden] { display:none; }
.ch-datepop__nav { position:relative; height:0; }
.ch-datepop__arrow { position:absolute; top:-2px; left:0; background:none; border:none; cursor:pointer;
    font-size:1.5rem; line-height:1; color:#333; padding:0 8px; border-radius:8px; }
.ch-datepop__arrow--next { left:auto; right:0; }
.ch-datepop__arrow:hover:not(:disabled) { background:#f2f2f2; }
.ch-datepop__arrow:disabled { opacity:.3; cursor:default; }
.ch-datepop__months { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
@media(max-width:640px){ .ch-datepop__months { grid-template-columns:1fr; } }
.ch-dp__title { text-align:center; font-weight:700; font-size:.95rem; margin-bottom:10px; }
.ch-dp__grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px 0; }
.ch-dp__dow { text-align:center; font-size:.72rem; color:#888; padding-bottom:6px; }
.ch-dp__day { aspect-ratio:1; display:flex; align-items:center; justify-content:center;
    font-size:.85rem; color:#222; cursor:pointer; border-radius:50%; }
.ch-dp__day:hover:not(.ch-dp__day--off):not(.ch-dp__day--empty) { background:var(--ch-action-soft); }
.ch-dp__day--empty { visibility:hidden; cursor:default; }
.ch-dp__day--off { color:#c9c9c9; text-decoration:line-through; cursor:default; }
.ch-dp__day.is-inrange { background:var(--ch-action-soft); border-radius:0; color:var(--ch-action); }
.ch-dp__day.is-start, .ch-dp__day.is-end { background:var(--ch-action); color:#fff; font-weight:700; }
.ch-datepop__foot { display:flex; align-items:center; justify-content:space-between; margin-top:12px;
    padding-top:12px; border-top:1px solid #eee; }
.ch-datepop__clear { background:none; border:none; color:var(--ch-action); font-weight:700;
    text-decoration:underline; cursor:pointer; font-size:.9rem; font-family:inherit; }
.ch-datepop__apply { background:var(--ch-action); color:#fff; border:none; border-radius:8px;
    padding:9px 20px; font-size:.9rem; font-weight:600; cursor:pointer; }
.ch-datepop__apply:hover { background:var(--ch-action-hover); }

/* Invités : dropdown + steppers */
.ch-guests { position:relative; }
/* font-family:inherit -> sinon les <button> gardent la police système du navigateur (pas Open Sans) */
.ch-guests__toggle { width:100%; display:flex; align-items:center; gap:10px; box-sizing:border-box;
    padding:12px 14px; border:1px solid #c9ccd1; border-radius:10px; background:#fff; cursor:pointer;
    font-size:.95rem; color:#222; text-align:left; }
.ch-guests.is-open .ch-guests__toggle { border-color:var(--ch-action); box-shadow:0 0 0 2px var(--ch-action-ring); }
.ch-guests__toggle > i:first-child { color:var(--ch-action); }
.ch-guests__summary { flex:1; font-weight:600; }
.ch-guests__caret { color:#888; font-size:.8rem; transition:transform .2s; }
.ch-guests.is-open .ch-guests__caret { transform:rotate(180deg); }
.ch-guests__panel { position:absolute; z-index:20; left:0; right:0; top:calc(100% + 6px);
    background:#fff; border:1px solid #e0e0e0; border-radius:12px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.14); }
.ch-step { display:flex; align-items:center; justify-content:space-between; padding:8px 0; font-size:.95rem; color:#222; }
.ch-step__ctrl { display:flex; align-items:center; gap:12px; }
.ch-step__btn { width:32px; height:32px; border-radius:50%; border:1px solid var(--ch-action); background:#fff; color:var(--ch-action);
    font-size:1.05rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.ch-step__btn:hover:not(:disabled) { background:var(--ch-action-soft); }
.ch-step__btn:disabled { opacity:.3; cursor:default; border-color:#bbb; color:#bbb; }
.ch-step__val { width:44px; text-align:center; border:1px solid #d0d0d0; border-radius:6px; padding:5px 0; font-size:.9rem; background:#fff; }
.ch-guests__confirm { margin-top:10px; background:var(--ch-action); color:#fff; border:none; border-radius:8px;
    padding:9px 18px; font-size:.9rem; font-weight:600; cursor:pointer; }
.ch-guests__confirm:hover { background:var(--ch-action-hover); }

.ch-form__feedback { border-radius:10px; padding:11px 14px; font-size:.9rem; }
.ch-form__feedback.is-ok  { background:#e6f5ec; color:#1e7a45; border:1px solid #bfe3cd; }
.ch-form__feedback.is-err { background:#fdecea; color:#c0392b; border:1px solid #f5c6cb; }

.ch-form__submit { background:var(--ch-action); color:#fff; border:none; border-radius:10px; padding:14px;
    font-size:1rem; font-weight:700; cursor:pointer; }
.ch-form__submit:hover:not(:disabled) { background:var(--ch-action-hover); }
.ch-form__submit:disabled { opacity:.7; cursor:default; }

/* ---- Moyens de contact : boutons Réserver / Appeler (selon préférences du proprio) ---- */
.ch-contact-actions { display:flex; flex-direction:column; gap:10px; }
.ch-cbtn { display:flex; align-items:center; justify-content:center; gap:9px;
    padding:14px 16px; border-radius:10px; border:1px solid var(--ch-action);
    background:#fff; color:var(--ch-action); font-size:1rem; font-weight:700;
    text-decoration:none; cursor:pointer; transition:background .15s, color .15s; }
.ch-cbtn:hover { background:var(--ch-action-soft); }
.ch-cbtn i { font-size:.95rem; }
.ch-cbtn__ext { font-weight:400; font-size:.85rem; opacity:.85; }
/* Téléphone masqué : « XXX-XXX-XXXX · Cliquez pour voir » jusqu'au dévoilement */
.ch-cbtn__hint { font-weight:400; font-size:.82rem; opacity:.8; }
.ch-cbtn__hint::before { content:"·"; margin:0 5px; }
.ch-cbtn--primary { background:var(--ch-action); color:#fff; border-color:var(--ch-action); }
.ch-cbtn--primary:hover { background:var(--ch-action-hover); color:#fff; }

/* Séparateur "ou envoyez une demande" entre les boutons et le formulaire */
.ch-contact-sep { display:flex; align-items:center; gap:12px; margin:18px 0 14px; color:#888; font-size:.85rem; }
.ch-contact-sep::before, .ch-contact-sep::after { content:""; flex:1; height:1px; background:#e4e7ea; }

.ch-contact-none { color:#666; font-size:.9rem; margin:6px 0 0; }

/* Badge reCAPTCHA masqué -> mention légale obligatoire affichée dans le formulaire */
.grecaptcha-badge { visibility:hidden; }
.ch-form__recaptcha { font-size:.7rem; color:#999; line-height:1.4; margin-top:2px; }
.ch-form__recaptcha a { color:var(--ch-link); text-decoration:underline; }