/* ==========================================================================
   Hotelvéa — Page de réservation publique (BLOC-05)
   Mobile-first, aux couleurs de l'hôtel (--hp / --hs injectées par le layout).
   ========================================================================== */
:root { --hp: #0a7d6b; --hs: #f6c453; --hp-ink: #0a7d6b; --txt: #20303a; --doux: #5d6f7a; --bord: #e4eaee; --fond: #f6f8f9; --fond-txt: #20303a; }
* { box-sizing: border-box; }
body.resa {
    margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--txt); background: var(--fond); line-height: 1.5;
}
img { max-width: 100%; display: block; }

.resa-entete { background: var(--entete-fond, var(--hp)); color: var(--entete-txt, var(--hp-txt, #fff)); }
.resa-entete__in { max-width: 960px; margin: 0 auto; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.resa-logo { color: var(--entete-txt, var(--hp-txt, #fff)); font-weight: 800; font-size: var(--entete-nom, 20px); text-decoration: none; }
.resa-logo img { max-height: 44px; }
/* Nom de l'hôtel + son classement (étoiles) groupés à gauche de l'entête. */
.resa-marque { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.resa-classement { color: currentColor; font-size: 15px; letter-spacing: 2px; line-height: 1; opacity: .92; white-space: nowrap; }
.resa-langues { display: flex; gap: 4px; flex-wrap: wrap; }
.resa-langues a { color: color-mix(in srgb, var(--hp-txt, #fff) 78%, transparent); text-decoration: none; padding: 4px 8px; border-radius: 6px; font-size: 13px; font-weight: 600; }
.resa-langues a.actif, .resa-langues a:hover { background: color-mix(in srgb, var(--hp-txt, #fff) 18%, transparent); color: var(--hp-txt, #fff); }

/* Entête « bandeau photo » : la photo de couverture en fond, texte sur voile sombre
   (donc toujours blanc, indépendamment de --hp-txt). Effet « grand hôtel ». */
.resa-entete--image { position: relative; background-color: var(--hp); background-size: cover; background-position: center; }
.resa-entete--image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55)); }
.resa-entete--image .resa-entete__in { position: relative; z-index: 1; min-height: var(--entete-min, 160px); align-items: flex-end; }
.resa-entete--image, .resa-entete--image .resa-logo { color: #fff; }
.resa-entete--image .resa-logo { font-size: var(--entete-nom, 26px); text-shadow: 0 1px 4px rgba(0,0,0,.45); }
.resa-entete--image .resa-logo img { max-height: 60px; filter: drop-shadow(0 1px 4px rgba(0,0,0,.45)); }
.resa-entete--image .resa-langues a { color: rgba(255,255,255,.9); }
.resa-entete--image .resa-langues a.actif, .resa-entete--image .resa-langues a:hover { background: rgba(255,255,255,.22); color: #fff; }

/* ===== Entête premium : hauteur + taille du nom EN PIXELS, couleurs sur mesure
   (fond / texte / liens) et menu — pilotés par des variables inline posées par le
   layout. Variables absentes = entête classique (aucune régression). ===== */
.resa-entete__in { min-height: var(--entete-min, 0px); flex-wrap: wrap; }

/* Cluster de droite : bouton « Réserver » (option bandeau) + sélecteur de langues. */
.resa-entete__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Bouton « Réserver » de l'entête : contour net, couleur des liens (sinon du texte). */
.resa-cta, .resa-nav__cta { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--entete-lien, currentColor); color: var(--entete-lien, currentColor); border-radius: 8px; padding: 8px 18px; font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; transition: background-color .15s ease; }
.resa-cta:hover, .resa-nav__cta:hover { background: color-mix(in srgb, var(--entete-lien, currentColor) 16%, transparent); }

/* Le menu occupe une 2e ligne (pleine largeur), posé sur la photo comme un vrai
   site d'hôtel — présent à l'IDENTIQUE sur TOUTES les pages publiques (vitrine + tunnel). */
.resa-nav { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.resa-nav__lien { color: var(--entete-lien, currentColor); text-decoration: none; font-weight: 600; font-size: 15px; padding: 7px 12px; border-radius: 999px; opacity: .92; }
.resa-nav__lien:hover { background: color-mix(in srgb, var(--entete-lien, currentColor) 14%, transparent); opacity: 1; }
.resa-nav__lien.actif { background: color-mix(in srgb, var(--entete-lien, currentColor) 18%, transparent); opacity: 1; }
.resa-nav__cta { margin-left: auto; } /* « Réserver » poussé à droite de la barre de menu */

/* Nom centré : l'entête s'empile et se centre (nom, langues, puis menu). */
.resa-entete--nom-centre .resa-entete__in { flex-direction: column; align-items: center; text-align: center; }
.resa-entete--nom-centre .resa-marque { justify-content: center; }
.resa-entete--nom-centre .resa-nav { justify-content: center; }
.resa-entete--nom-centre .resa-nav__cta { margin-left: 0; }

@media (max-width: 760px) {
    .resa-nav { gap: 2px 4px; }
    .resa-nav__lien { font-size: 14px; padding: 6px 10px; }
    .resa-cta, .resa-nav__cta { font-size: 13px; padding: 7px 14px; }
}

.resa-main { max-width: 960px; margin: 0 auto; padding: 24px 18px 50px; }
.resa-pied { max-width: 960px; margin: 0 auto; padding: 24px 18px 40px; text-align: center; color: color-mix(in srgb, var(--fond-txt, #5d6f7a) 62%, var(--fond)); font-size: 14px; }

.r-titre { font-size: 28px; margin: 6px 0 2px; color: var(--fond-txt, #20303a); }
.r-sous { color: color-mix(in srgb, var(--fond-txt, #5d6f7a) 72%, var(--fond)); margin: 0 0 22px; }

.r-carte { background: #fff; border: 1px solid var(--bord); border-radius: 16px; padding: 20px; margin-bottom: 18px; box-shadow: 0 2px 10px rgba(20,40,55,.05); }

/* Barre de recherche dates */
/* Barre de recherche : TOUT sur une seule ligne. Dates larges, Adultes/Enfants étroites,
   Rechercher à la fin. Les <input type=date> ont appearance:none (voir plus bas) → sur
   Safari ils rentrent dans leur colonne au lieu de déborder. Petit écran → 2 lignes (media). */
.r-recherche { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 110px 110px auto; gap: 12px 14px; align-items: end; }
.r-champ label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.r-champ input, .r-champ select, .r-champ textarea {
    width: 100%; min-width: 0; height: 48px; box-sizing: border-box;
    padding: 12px 13px; font-size: 16px; border: 1.5px solid var(--bord);
    border-radius: 10px; font-family: inherit; background: #fff;
}
/* Zone de commentaire : plus haute qu'un champ simple, redimensionnable vers le bas. */
.r-champ textarea { height: auto; min-height: 84px; resize: vertical; line-height: 1.45; }
.r-champ input:focus, .r-champ select:focus, .r-champ textarea:focus { outline: none; border-color: var(--hp); }

/* Safari (iOS/macOS) : le <input type=date> ignore la hauteur ET la largeur qu'on lui donne
   (il garde sa taille interne → plus haut, plus large → il déborde sur les listes). On reprend
   la main : même hauteur (48px) que les autres champs, et il rentre dans sa colonne. La valeur
   reste à gauche, l'icône calendrier à droite ; le sélecteur natif s'ouvre au tap. Chrome : RAS. */
.r-champ input[type="date"] { -webkit-appearance: none; appearance: none; }
.r-champ input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.r-champ input[type="date"]::-webkit-calendar-picker-indicator { margin-inline-start: auto; }

/* Âge des enfants : rangée sous la colonne « Enfants » de la grille de recherche. */
.r-recherche .r-ages { grid-column: 3 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.r-ages__label { font-size: 13px; font-weight: 600; }
.r-ages__liste { display: flex; flex-wrap: wrap; gap: 8px; }
.r-age { height: 48px; box-sizing: border-box; padding: 12px 13px; font-size: 16px; border: 1.5px solid var(--bord); border-radius: 10px; background: #fff; font-family: inherit; min-width: 96px; }
.r-age:focus { outline: none; border-color: var(--hp); }

/* Menus déroulants : on reprend la main sur le rendu pour une hauteur IDENTIQUE aux champs
   texte sur tous les navigateurs (Safari rend sinon les <select> plus courts). Flèche maison. */
.r-champ select, .r-age {
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235d6f7a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px;
}

.r-btn {
    background: var(--hp); color: var(--hp-txt, #fff); border: none; border-radius: 10px;
    padding: 13px 22px; font-size: 16px; font-weight: 700; cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1;
}
.r-btn:hover { filter: brightness(.93); }
.r-btn--bloc { width: 100%; }
.r-btn--grand { padding: 16px 24px; font-size: 18px; }
.r-btn--clair { background: #fff; color: var(--hp-ink, var(--hp)); border: 2px solid var(--hp-ink, var(--hp)); }

/* Carte chambre */
.r-chambre { display: grid; grid-template-columns: 230px 1fr minmax(170px, 210px); gap: 18px; align-items: center; }
.r-chambre__photo { width: 230px; height: 160px; object-fit: cover; border-radius: 12px; background: #e9eef1; }
.r-chambre__nom { font-size: 19px; font-weight: 700; margin: 0 0 4px; }
.r-chambre__desc { color: var(--doux); font-size: 14px; margin: 0 0 8px;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
    overflow: hidden; text-overflow: ellipsis; }
.r-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.r-tag { background: var(--fond); border: 1px solid var(--bord); border-radius: 999px; padding: 3px 10px; font-size: 12px; color: color-mix(in srgb, var(--fond-txt, #5d6f7a) 72%, var(--fond)); }
.r-prix { text-align: right; }
.r-prix__montant { font-size: 24px; font-weight: 800; color: var(--hp-ink, var(--hp)); white-space: nowrap; }
.r-prix__nuit { font-size: 13px; color: var(--doux); }
.r-complet { color: var(--doux); font-weight: 700; }

/* Récap + paiement */
.r-grille2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }
/* Variante page contact : la carte des coordonnées s'étire jusqu'en bas du
   formulaire (bloc de droite) ; la carte Google/OSM remplit l'espace gagné. */
.r-grille2.r-grille2--etire { align-items: stretch; }
.r-grille2--etire .site-coord { display: flex; flex-direction: column; }
.r-grille2--etire .site-map { flex: 1 1 auto; }
.r-grille2--etire .site-map iframe { height: 100%; min-height: 200px; }

/* Fiche contact : tél/e-mail aux couleurs de l'hôtel (fini le bleu souligné du navigateur). */
.site-coord a { color: var(--hp-ink, var(--hp)); font-weight: 600; text-decoration: none; }
.site-coord a:hover { text-decoration: underline; }
/* Carte OpenStreetMap : coins arrondis, remplit le vide sous les coordonnées
   pour aligner la fiche sur le formulaire de contact à droite. */
.site-map { margin-top: 16px; border-radius: 12px; overflow: hidden; border: 1px solid var(--bord); line-height: 0; }
.site-map iframe { display: block; width: 100%; height: 200px; border: 0; }
/* Repli quand le géocodage échoue : un bouton discret vers la carte, pas de cadre vide. */
.site-map__lien { display: block; margin-top: 16px; padding: 12px; text-align: center; border: 1px solid var(--bord); border-radius: 12px; background: var(--fond); }

.r-ligne { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--bord); }
.r-ligne--total { border-bottom: none; border-top: 2px solid var(--txt); margin-top: 6px; padding-top: 12px; font-size: 20px; font-weight: 800; }
.r-case { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; font-size: 14px; }
.r-case input { margin-top: 3px; }

.r-merci { text-align: center; padding: 30px 10px; }
.r-merci__ico { font-size: 64px; }
.r-ref { display: inline-block; background: var(--fond); border: 2px dashed var(--hp); border-radius: 12px; padding: 10px 22px; font-size: 22px; font-weight: 800; letter-spacing: 1px; color: var(--fond-txt, #20303a); margin: 14px 0; }

/* Signature (check-in) */
.r-signature { border: 2px dashed var(--bord); border-radius: 12px; background: #fff; touch-action: none; width: 100%; height: 180px; }

/* Écran étroit (≤900 px : téléphone, tablette portrait) : la barre passe en 2 lignes
   (dates, puis occupation) pour laisser aux champs date toute leur largeur — pas de
   chevauchement possible. Au-delà de 900 px : tout sur une seule ligne. */
@media (max-width: 900px) {
    .r-recherche { grid-template-columns: 1fr 1fr; }
    .r-recherche .r-ages { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    .r-chambre { grid-template-columns: 1fr; }
    .r-chambre__photo { width: 100%; height: 200px; }
    .r-prix { text-align: left; }
    .r-grille2 { grid-template-columns: 1fr; }
    /* Cibles tactiles confortables + champs à 16px (pas de zoom auto iOS). */
    .r-chambre__detail { padding: 8px 0; }
    .r-ajout { justify-content: flex-start; }
    .r-ajout__lien { padding: 10px 4px; }
    .r-ajout select { font-size: 16px; }
    .r-lien-discret { padding: 8px 4px; }
}

/* Note d'information (politique d'encaissement : acompte / paiement sur place). */
.r-note {
    background: color-mix(in srgb, var(--hp) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--hp) 22%, #fff);
    color: #333; border-radius: 10px; padding: 10px 13px;
    font-size: 13.5px; line-height: 1.5; margin: 12px 0 4px;
}

/* Code promo : champ + bouton « Appliquer » côte à côte, ligne de remise en vert. */
.r-promo { display: flex; gap: 8px; }
.r-promo input { flex: 1; min-width: 0; }
.r-promo .r-btn { padding: 10px 16px; white-space: nowrap; }
.r-promo__erreur { color: #b3341f; font-size: 13px; margin: 6px 0 0; }
.r-ligne--remise { color: var(--hp-ink, var(--hp)); font-weight: 700; }

/* --- Formulaire de coordonnées (étape paiement) ------------------------------ */

/* Titre + rappel « * Champs obligatoires » sur la même ligne. */
.r-coord-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.r-oblig { font-size: 12.5px; color: var(--doux); white-space: nowrap; }
.r-req { color: #d24a2e; font-weight: 700; }

/* Prénom / Nom côte à côte (restent côte à côte même sur téléphone : champs courts). */
.r-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Téléphone : indicatif (drapeau + pays) compact + numéro qui prend le reste. */
.r-tel { display: flex; gap: 8px; }
.r-tel select { flex: 0 0 128px; width: 128px; }
.r-tel input { flex: 1; min-width: 0; }

/* Bloc « Vous êtes une société ? » : replié par défaut, ouvert d'un tap.
   <details> natif = zéro script, clavier et lecteur d'écran compris. */
.r-societe summary {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    cursor: pointer; list-style: none; user-select: none; -webkit-user-select: none;
}
.r-societe summary::-webkit-details-marker { display: none; }   /* Safari : pas de triangle en double */
.r-societe__fleche { font-size: 20px; line-height: 1; color: var(--doux); transition: transform .18s ease; }
.r-societe[open] .r-societe__fleche { transform: rotate(180deg); }

/* Ligne rassurante sous le bouton de paiement (cadenas + transmission chiffrée). */
.r-securise {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    color: var(--doux); font-size: 12.5px; margin: 10px 0 0; text-align: center;
}
.r-securise svg { flex: 0 0 auto; }

/* Multi-chambres : sélection, formulaire d'ajout, occupants par chambre. */
.r-selection { border: 2px solid var(--hp); }
.r-selection__retirer { display: inline; }
.r-lien-discret { background: none; border: none; color: var(--doux); text-decoration: underline; cursor: pointer; font-size: 12px; padding: 0 4px; }
.r-ajout { display: flex; gap: 8px; margin-top: 10px; align-items: center; justify-content: flex-end; }
.r-ajout select { padding: 8px 10px; border: 1.5px solid var(--bord); border-radius: 10px; }
.r-ajout .r-btn { padding: 9px 14px; white-space: nowrap; }
/* « Ajouter à ma sélection » : lien discret plutôt qu'un 2e gros bouton (le cas normal = 1 chambre). */
.r-ajout__lien { background: none; border: none; color: var(--hp-ink, var(--hp)); text-decoration: underline; cursor: pointer; font-size: 13px; font-weight: 600; padding: 6px 2px; white-space: nowrap; }
.r-ajout__lien:hover { filter: brightness(.9); }

/* Titre + photo d'une chambre cliquables vers sa fiche vitrine (/site/…/chambres/{id}). */
.r-chambre__lienphoto { display: block; }
.r-chambre__lienphoto:hover .r-chambre__photo { filter: brightness(.96); }

/* Badge « +N de plus » : dernier tag quand la chambre a beaucoup d'équipements.
   MÊME pastille que les autres tags (fond/bord identiques, pas de couleur à part) ;
   seulement en gras + texte de la couleur primaire pour montrer qu'il est cliquable
   (mène à la fiche). Évite l'effet « badge marron perdu au milieu des bleus ». */
a.r-tag--plus { color: var(--hp-ink, var(--hp)); font-weight: 700; text-decoration: none; white-space: nowrap; }
a.r-tag--plus:hover { border-color: var(--hp-ink, var(--hp)); }

/* Mini-carrousel de photos des cartes d'hébergement (liste, vignette, recherche).
   Le cadre reprend la taille de l'image (classe .r-chambre__photo / …). Flèches et
   points superposés ; défilement piloté par booking.js. */
.r-carrousel { position: relative; overflow: hidden; background: #e9eef1; line-height: 0; }
.r-chambre .r-carrousel { border-radius: 12px; }   /* liste + recherche : vignette arrondie comme .r-chambre__photo */
.r-carrousel__piste { display: flex; transition: transform .35s ease; }
.r-carrousel__slide { flex: 0 0 100%; display: block; }
.r-carrousel__slide img { display: block; width: 100%; border-radius: 0; }
.r-carrousel__fleche { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; padding: 0;
    border: none; border-radius: 50%; background: rgba(255,255,255,.9); color: #1a2b33;
    font-size: 22px; line-height: 0; cursor: pointer; box-shadow: 0 1px 5px rgba(0,0,0,.28);
    opacity: 0; transition: opacity .15s ease, background .15s ease; }
.r-carrousel:hover .r-carrousel__fleche { opacity: 1; }
.r-carrousel__fleche:hover { background: #fff; }
.r-carrousel__fleche--prev { left: 8px; }
.r-carrousel__fleche--next { right: 8px; }
.r-carrousel__points { position: absolute; left: 0; right: 0; bottom: 8px; z-index: 2;
    display: flex; justify-content: center; gap: 6px; line-height: 0; }
.r-carrousel__point { width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%; cursor: pointer;
    background: rgba(255,255,255,.6); box-shadow: 0 0 2px rgba(0,0,0,.45); transition: background .15s ease, transform .15s ease; }
.r-carrousel__point--actif { background: #fff; transform: scale(1.3); }
/* Sur écran tactile (pas de survol), les flèches restent visibles. */
@media (hover: none) { .r-carrousel__fleche { opacity: .92; } }
a.r-chambre__lien { color: inherit; text-decoration: none; }
a.r-chambre__lien:hover { color: var(--hp-ink, var(--hp)); text-decoration: underline; }
.r-chambre__detail { display: inline-block; margin-top: 8px; color: var(--hp-ink, var(--hp)); font-weight: 600; font-size: 13px; text-decoration: none; }
.r-chambre__detail:hover { text-decoration: underline; }
.r-ligne--chambre { align-items: flex-start; }
.r-occupants { display: inline-flex; gap: 10px; margin-top: 4px; }
.r-occupants select { padding: 4px 6px; border: 1.5px solid var(--bord); border-radius: 8px; margin-left: 4px; }

/* Offres & packages sur le moteur de réservation. */
.r-offre { border: 2px solid var(--hs); background: color-mix(in srgb, var(--hs) 6%, #fff); }
.r-tag--remise { background: var(--hp); color: var(--hp-txt, #fff); font-weight: 700; }

/* Réassurance + avantages « réservation directe » (tunnel de vente).
   Barre de confiance sobre sous la recherche + carte des avantages exclusifs
   (accent --hs, comme les offres). Rassure au moment de comparer les prix. */
.r-confiance { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: -6px 0 18px; padding: 0; }
.r-confiance li { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: color-mix(in srgb, var(--fond-txt, #5d6f7a) 80%, var(--fond)); }
.r-avantages { border: 2px solid var(--hs); background: color-mix(in srgb, var(--hs) 8%, #fff); }
.r-avantages__titre { font-size: 18px; font-weight: 800; margin: 0 0 12px; color: var(--fond-txt, #20303a); }
.r-avantages__liste { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 20px; }
.r-avantages__liste li { position: relative; padding-left: 27px; font-size: 15px; line-height: 1.4; }
.r-avantages__liste li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 19px; height: 19px; border-radius: 50%; background: var(--hp); color: var(--hp-txt, #fff); font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 760px) { .r-avantages__liste { grid-template-columns: 1fr; } }

/* Offrir un séjour (carte cadeau) : encart secondaire, même ton « accent doux »
   que les avantages ; titre + phrase à gauche, bouton à droite (empilé sur mobile). */
.r-gift { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
          border: 2px solid var(--hs); background: color-mix(in srgb, var(--hs) 8%, #fff); }
.r-gift__txt { min-width: 220px; flex: 1 1 240px; }
.r-gift__titre { font-size: 18px; font-weight: 800; margin: 0 0 4px; color: var(--fond-txt, #20303a); }
.r-gift__sous { margin: 0; font-size: 14.5px; color: color-mix(in srgb, var(--fond-txt, #5d6f7a) 78%, var(--fond)); }
.r-gift__btn { white-space: nowrap; flex: none; }
@media (max-width: 760px) { .r-gift__btn { width: 100%; text-align: center; } }

/* Lien « offrir une carte cadeau » du pied de page public */
.resa-pied__gift { color: var(--hp-ink, var(--hp)); font-weight: 700; text-decoration: none; }
.resa-pied__gift:hover { text-decoration: underline; }

/* ================= Boutique carte cadeau (refonte UX) ================= */
.gc-head { text-align: center; margin: 2px 0 20px; }
.gc-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 880px) {
  .gc-grid { grid-template-columns: 1.3fr 0.9fr; align-items: start; }
  .gc-aside { position: sticky; top: 20px; }
}

/* La carte cadeau « vivante » (aperçu qui se met à jour en direct) */
.gc-card { position: relative; overflow: hidden; border-radius: 22px; padding: 24px; color: #fff;
  background: linear-gradient(140deg, var(--hp), color-mix(in srgb, var(--hp) 55%, #101820));
  box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--hp) 55%, transparent);
  min-height: 210px; display: flex; flex-direction: column; }
.gc-card__shine { position: absolute; top: -70px; right: -50px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.25), transparent 68%); pointer-events: none; }
.gc-card__row { display: flex; align-items: center; justify-content: space-between; position: relative; }
.gc-card__tag { font-size: 11.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; opacity: .82; }
.gc-card__gift { font-size: 26px; line-height: 1; }
.gc-card__hotel { margin-top: 6px; font-size: 15px; font-weight: 700; opacity: .92; position: relative; }
.gc-card__value { margin-top: auto; font-size: 42px; font-weight: 800; letter-spacing: -1.5px; line-height: 1.02; position: relative; }
.gc-card__note { margin-top: 3px; font-size: 14px; font-weight: 600; opacity: .9; position: relative; }
.gc-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px;
  padding-top: 13px; border-top: 1px solid rgba(255,255,255,.22); font-size: 12.5px; font-weight: 600; opacity: .88; position: relative; }

.gc-resa { list-style: none; margin: 14px 4px 0; padding: 0; display: grid; gap: 9px; }
.gc-resa li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600;
  color: color-mix(in srgb, var(--fond-txt) 82%, var(--fond)); }

/* Formulaire */
.gc-form { margin: 0; }
.gc-field { margin-bottom: 17px; }
.gc-label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; color: var(--fond-txt); }
/* Aide des petits plus : rappel que leur valeur s'ajoute au crédit de la carte. */
.gc-options-aide { color: var(--doux); font-size: 13px; margin: -4px 0 6px; }
.gc-form select, .gc-form input[type=email], .gc-form input[type=text], .gc-form textarea {
  width: 100%; padding: 13px 14px; font-size: 16px; border: 1.5px solid var(--bord); border-radius: 12px;
  background: #fff; color: var(--txt); font-family: inherit; }
.gc-form select:focus, .gc-form input:focus, .gc-form textarea:focus {
  outline: none; border-color: var(--hp); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hp) 18%, transparent); }
.gc-form textarea { resize: vertical; min-height: 82px; }

/* Choix séjour / montant (segmenté) */
.gc-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.gc-seg__opt { position: relative; cursor: pointer; }
.gc-seg__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.gc-seg__box { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 10px;
  border: 1.5px solid var(--bord); border-radius: 14px; font-weight: 700; font-size: 15px; color: var(--fond-txt); transition: .15s; }
.gc-seg__opt input:checked + .gc-seg__box { border-color: var(--hp); background: color-mix(in srgb, var(--hp) 10%, #fff);
  color: var(--hp-ink); box-shadow: inset 0 0 0 1px var(--hp); }
.gc-seg__opt input:focus-visible + .gc-seg__box { box-shadow: 0 0 0 3px color-mix(in srgb, var(--hp) 22%, transparent); }

/* Sélecteur de nuits (± stepper) */
.gc-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--bord); border-radius: 12px; overflow: hidden; background: #fff; }
.gc-step { width: 50px; height: 50px; border: 0; background: transparent; font-size: 24px; font-weight: 700; line-height: 1;
  color: var(--hp-ink); cursor: pointer; transition: .12s; }
.gc-step:hover { background: color-mix(in srgb, var(--hp) 9%, #fff); }
.gc-stepper input { width: 64px; height: 50px; text-align: center; border: 0; border-inline: 1.5px solid var(--bord);
  font-size: 18px; font-weight: 800; color: var(--txt); border-radius: 0; -moz-appearance: textfield; }
.gc-stepper input::-webkit-outer-spin-button, .gc-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Montant : pastilles + saisie libre */
.gc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 11px; }
.gc-chip { padding: 10px 16px; border: 1.5px solid var(--bord); border-radius: 999px; background: #fff;
  font-weight: 700; font-size: 15px; color: var(--fond-txt); cursor: pointer; transition: .12s; }
.gc-chip:hover { border-color: var(--hp); }
.gc-chip.actif { border-color: var(--hp); background: color-mix(in srgb, var(--hp) 12%, #fff); color: var(--hp-ink); }
.gc-euro { position: relative; }
.gc-euro input { padding-right: 36px; }
.gc-euro__sign { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 16px; font-weight: 700;
  color: color-mix(in srgb, var(--fond-txt) 52%, var(--fond)); pointer-events: none; }

.gc-submit { margin-top: 6px; }
.gc-flash { border-color: #e0b4b4 !important; background: #fcf3f3; }
.gc-flash p { margin: 0; }

/* Page de remerciement : la carte cadeau avec son code, prête à offrir */
.gc-merci { max-width: 460px; margin: 0 auto; }
.gc-merci__hero { text-align: center; margin-bottom: 20px; }
.gc-merci__ico { font-size: 46px; line-height: 1; margin-bottom: 4px; }
.gc-card--ticket { min-height: 0; }
.gc-card--ticket .gc-card__value { margin-top: 12px; }
.gc-card__code { margin-top: 18px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.30);
  border-radius: 13px; padding: 13px 14px; text-align: center; position: relative; }
.gc-card__code-label { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; opacity: .82; }
.gc-card__code-val { display: block; margin-top: 5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 27px; font-weight: 800; letter-spacing: 4px; }
.gc-merci__sent { text-align: center; margin: 16px 4px; font-size: 14.5px;
  color: color-mix(in srgb, var(--fond-txt) 82%, var(--fond)); }
.gc-merci__actions { display: grid; gap: 10px; }
@media print {
  .resa-entete, .resa-pied, .gc-merci__hero, .gc-merci__sent, .gc-merci__actions { display: none !important; }
  .gc-card--ticket { box-shadow: none; }
}

/* ===== Options du séjour (petits plus proposés dès la réservation) =====
   Interrupteur cochable + libellés ; le total du récap se met à jour en direct. */
.r-options { margin-top: 4px; }
.r-opt { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--bord); }
.r-opt:first-child { border-top: none; }
.r-opt__txt { flex: 1 1 auto; min-width: 0; }
.r-opt__nom { font-weight: 700; font-size: 15px; }
.r-opt__det { color: var(--doux); font-size: 13px; margin-top: 1px; }
.r-opt__prix { text-align: right; white-space: nowrap; font-weight: 700; font-size: 14.5px; }
.r-opt__unite { color: var(--doux); font-weight: 500; font-size: 12px; }
.r-opt__inclus { display: inline-block; margin-left: 6px; background: color-mix(in srgb, var(--hp) 12%, #fff);
  color: var(--hp-ink, var(--hp)); font-weight: 700; font-size: 11.5px; padding: 2px 9px; border-radius: 999px; vertical-align: middle; }
.r-switch { position: relative; width: 46px; height: 28px; flex: 0 0 46px; display: inline-block; cursor: pointer; }
.r-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.r-switch__track { position: absolute; inset: 0; background: #cfd8e0; border-radius: 999px; transition: background-color .15s; }
.r-switch__dot { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: #fff; border-radius: 50%;
  transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.25); pointer-events: none; }
.r-switch input:checked + .r-switch__track { background: var(--hp); }
.r-switch input:checked ~ .r-switch__dot { left: 21px; }
.r-switch input:focus-visible + .r-switch__track { box-shadow: 0 0 0 3px color-mix(in srgb, var(--hp) 30%, transparent); }