/* ============================================================
   MOA Properties, portail voyageur
   Identité reprise directement de moa-properties.com (12/09) : forêt
   profonde, crème chaud, accent sauge/teal, Fraunces + Inter, boutons en
   pilule. Une seule police web (Google Fonts, comme le site principal),
   avec repli système immédiat pendant le chargement pour que la page
   reste lisible dès la première peinture depuis le chat Airbnb.
   ============================================================ */

:root {
    --forest:      #012820;
    --forest-2:    #073b31;
    --forest-3:    #054e3f;
    --forest-deep: #011611;
    --cream:       #f3efe6;
    --cream-2:     #ebe5d6;
    --cream-3:     #f9f6ef;
    --gold:        #055c4a;   /* accent teal, utilisé sur fond clair */
    --gold-soft:   #7cbea6;   /* accent sauge, utilisé sur fond sombre */
    --ink:         #12241d;
    --muted:       #5b6b63;
    --muted-2:     #7c8a82;
    --line:        rgba(124, 190, 166, 0.28);
    --line-soft:   rgba(18, 36, 29, 0.1);
    --danger:      #9c4238;
    --danger-bg:   #f5e8e4;

    --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
    --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --radius: 18px;
    --radius-sm: 12px;
    --pill: 100px;
    --shell: 34rem;
}

/* Toujours en clair (10/11) : voir <meta name="color-scheme"> dans base.html. */
:root { color-scheme: light only; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Charpente ---------- */

.shell {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 0 1.25rem 3rem;
}

.masthead {
    background: var(--forest);
    color: var(--cream);
    padding: 2.25rem 1.25rem 1.85rem;
    text-align: center;
}

.wordmark {
    display: inline-block;
    text-decoration: none;
    color: inherit;
}

.wordmark__name {
    display: block;
    font-family: var(--serif);
    font-size: 2.1rem;
    line-height: 1;
    letter-spacing: 0.2em;
    /* Le letter-spacing ajoute un espace après la dernière lettre, ce qui
       décale visuellement le mot vers la gauche quand il est centré. */
    text-indent: 0.2em;
    font-weight: 500;
}

.wordmark__suffix {
    display: block;
    margin-top: 0.55rem;
    font-family: var(--sans);
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.42em;
    text-indent: 0.42em;
    text-transform: uppercase;
    color: var(--gold-soft);
}

.masthead__rule {
    width: 2.25rem;
    height: 1px;
    margin: 1.2rem auto 0;
    background: rgba(124, 190, 166, 0.4);
}

.masthead__tagline {
    margin: 0.9rem 0 0;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    color: rgba(243, 239, 230, 0.72);
}

.langbar {
    display: flex;
    justify-content: flex-end;
    padding: 0.9rem 0 0;
}

/* Sélecteur à 3 langues (es/en/fr), repensé le 03/10 en petit bouton
   pilule + menu déroulant (plutôt que les 3 noms de langue toujours
   visibles côte à côte, jugé peu pro) : <details>/<summary> natif, même
   convention que les cartes .extra ci-dessous, donc aucun JS requis. */
.langswitch { position: relative; }

.langswitch__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--pill);
    background: var(--cream-3);
    color: var(--forest);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    cursor: pointer;
    list-style: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.langswitch__trigger::-webkit-details-marker { display: none; }
.langswitch__trigger::marker { content: ""; }
.langswitch__trigger:hover { border-color: var(--forest); background: var(--cream-2); }

.langswitch__chevron { color: var(--muted-2); transition: transform 0.15s ease; }
.langswitch[open] .langswitch__chevron { transform: rotate(180deg); }

.langswitch__menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    min-width: 8rem;
    padding: 0.4rem;
    background: var(--cream-3);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(1, 40, 32, 0.12);
}

.langswitch__item {
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    font-size: 0.78rem;
    color: var(--ink);
    text-decoration: none;
    transition: background 0.15s ease;
}

.langswitch__item:hover { background: var(--cream-2); }
.langswitch__item--active { color: var(--forest); font-weight: 600; }

/* ---------- Titres ---------- */

h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 500;
    color: var(--forest);
    letter-spacing: 0.005em;
    text-wrap: balance;
}

h1 { font-size: 1.7rem; line-height: 1.2; margin: 1.85rem 0 0.5rem; }
h2 { font-size: 1.2rem; margin: 2rem 0 0.75rem; }
h3 { font-size: 1.05rem; margin: 0 0 0.3rem; }

.lede {
    margin: 0 0 1.5rem;
    color: var(--muted);
    font-size: 0.95rem;
}

.section-label {
    margin: 2rem 0 0.85rem;
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
}

/* ---------- Résumé du séjour ---------- */

.stay {
    background: var(--forest);
    color: var(--cream);
    border-radius: var(--radius);
    padding: 1.35rem 1.4rem;
    margin: 1.4rem 0 0;
}

.stay__apt {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.3rem;
    margin: 0 0 0.85rem;
}

.stay__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    border-top: 1px solid rgba(124, 190, 166, 0.25);
    padding-top: 0.9rem;
}

.stay__key {
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-soft);
    margin-bottom: 0.2rem;
}

.stay__val { font-size: 0.92rem; font-variant-numeric: tabular-nums; }

.stay__hour {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.7rem;
    color: rgba(243, 239, 230, 0.65);
}

.stay__hour--confirmed {
    color: var(--gold-soft);
    font-weight: 600;
}

/* ---------- Cartes ---------- */

.card {
    background: var(--cream-3);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: 1.25rem 1.35rem;
    margin-bottom: 0.85rem;
}

.card--quiet {
    background: var(--cream-2);
    border-color: transparent;
}

.card p { margin: 0.3rem 0 0; color: var(--muted); font-size: 0.9rem; }

.card__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
}

.price {
    /* flex (pas un simple span en ligne) : un span inline avec
       white-space:nowrap et un enfant display:block (.price__unit,
       "por día"/"per day") calcule mal sa hauteur sur mobile (confirmé le
       04/10 : "estacionamiento", seul extra avec un unit_label, débordait
       sur la ligne suivante). En conteneur flex, les deux lignes sont de
       vrais items flex, leur hauteur totale est toujours comptée
       correctement, quelle que soit la largeur de l'écran. */
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--gold);
    white-space: nowrap;
}

.price__unit {
    font-family: var(--sans);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-2);
    text-align: right;
    white-space: normal;
}

.price--quote {
    font-family: var(--sans);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
}

.note {
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--line-soft);
    font-size: 0.8rem;
    color: var(--muted);
}

/* ---------- Boutons (pilule, comme sur moa-properties.com) ---------- */

.btn {
    display: inline-block;
    width: 100%;
    padding: 0.9rem 1.5rem;
    border: 1px solid var(--forest);
    border-radius: var(--pill);
    background: var(--forest);
    color: var(--cream);
    font-family: var(--sans);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:hover { background: var(--forest-2); border-color: var(--forest-2); }

.btn--ghost {
    background: transparent;
    color: var(--forest);
}

.btn--ghost:hover { background: var(--forest); color: var(--cream); }

.btn--inline { width: auto; margin-top: 1rem; padding-left: 1.75rem; padding-right: 1.75rem; }

/* ---------- Formulaires ---------- */

.field { margin-bottom: 1.35rem; }

label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-bottom: 0.4rem;
    color: var(--forest);
}

.optional {
    font-weight: 400;
    text-transform: lowercase;
    color: var(--muted-2);
    letter-spacing: 0.06em;
    font-size: 0.72rem;
}

input[type="text"],
input[type="time"],
input[type="number"],
input[type="tel"],
input[type="email"],
select,
textarea {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--cream-3);
    color: var(--ink);
    font-family: var(--sans);
    /* 16px minimum : en dessous, Safari iOS zoome automatiquement sur le
       champ au focus et casse la mise en page. */
    font-size: 16px;
    line-height: 1.4;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(5, 92, 74, 0.14);
}

textarea { min-height: 5.5rem; resize: vertical; }

.help {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: var(--muted-2);
}

.field--invalid input,
.field--invalid select,
.field--invalid textarea { border-color: var(--danger); }

.field-error {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: var(--danger);
}

.alert {
    background: var(--danger-bg);
    border-left: 3px solid var(--danger);
    border-radius: var(--radius-sm);
    padding: 0.75rem 0.9rem;
    margin-bottom: 1.25rem;
    font-size: 0.87rem;
    color: var(--danger);
}

.alert--success {
    background: var(--cream-2);
    border-left: 3px solid var(--gold-soft);
    border-radius: var(--radius-sm);
    padding: 0.75rem 0.9rem;
    margin-bottom: 1.25rem;
    font-size: 0.87rem;
    color: var(--forest);
}

.alert--notice {
    background: var(--cream-3);
    border-left: 3px solid var(--muted-2);
    border-radius: var(--radius-sm);
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.6rem;
    font-size: 0.87rem;
    color: var(--muted);
}

/* ---------- Statuts ---------- */

.tag {
    display: inline-block;
    padding: 0.22rem 0.6rem;
    border-radius: var(--pill);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tag--pending   { background: var(--cream-2); color: var(--muted); }
.tag--confirmed { background: rgba(5, 92, 74, 0.12); color: var(--gold); }
.tag--declined  { background: var(--danger-bg); color: var(--danger); }
.tag--cart      { background: var(--forest); color: var(--cream); }

.request-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 0.88rem;
}

.request-row:last-child { border-bottom: none; }

/* Panier live (portal.js) : ligne ajoutée quand une case est cochée, pas
   encore soumise au serveur. Retirée si la case est décochée. Un 3e enfant
   (le bouton "−", ajouté le 03/10) rendrait `space-between` bancal avec
   seulement 2 enfants côté droit qui se dispersent ; on repasse donc en
   flex-start et on laisse le nom seul grandir/tronquer, pour que tag et
   bouton restent collés à droite. */
.request-row--live {
    font-weight: 600;
    justify-content: flex-start;
}

.request-row--live > span:first-child {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@keyframes cart-pop {
    0%   { transform: scale(0.85); opacity: 0; }
    60%  { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.request-row--pop { animation: cart-pop 0.35s ease-out; }

.cart-summary__submit { margin-top: 0.9rem; width: 100%; }

/* Total du panier live, par devise (demande du 04/10), affiché par
   portal.js uniquement à partir de 2 articles. */
.cart-total {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--line-soft);
    font-weight: 700;
    color: var(--forest);
    text-align: right;
}

/* ---------- Panier flottant, façon Amazon (03/10) ---------- */
/* #cart-widget vit dans _extras_list.html (donc n'existe que sur les pages
   avec des extras à proposer), mais #cart-trigger reste "position: fixed"
   pour flotter au-dessus du bandeau sombre (.masthead), toujours visible
   en haut à droite quel que soit le défilement. #cart-panel se déplie en
   dessous au clic (piloté par portal.js) ; sans JavaScript, le <noscript>
   du gabarit le rend visible en repli à la place. */
.cart-widget {
    position: fixed;
    top: 1.1rem;
    right: 1.1rem;
    z-index: 40;
}

.cart-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    border: 1px solid rgba(243, 239, 230, 0.35);
    border-radius: 50%;
    background: rgba(243, 239, 230, 0.08);
    color: var(--cream);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.cart-trigger:hover { background: rgba(243, 239, 230, 0.18); border-color: rgba(243, 239, 230, 0.55); }

.cart-trigger__icon { width: 1.3rem; height: 1.3rem; }

.cart-trigger__badge {
    position: absolute;
    top: -0.3rem;
    right: -0.3rem;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    border-radius: var(--pill);
    background: var(--gold-soft);
    color: var(--forest-deep);
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
}

.cart-panel {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    z-index: 41;
    width: 19rem;
    max-width: calc(100vw - 2.2rem);
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 14px 38px rgba(1, 22, 17, 0.28);
}

.cart-panel h3 { margin: 0 0 0.3rem; font-family: var(--serif); font-size: 1.05rem; color: var(--forest); }

/* Bouton "−" par article du panier live (portal.js::onToggle) : décoche la
   vraie case correspondante, jamais un chemin de suppression séparé. */
.request-row__remove {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--cream-3);
    color: var(--muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.request-row__remove:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }

/* Pastille volante du "+" vers #cart-trigger (portal.js uniquement, JS
   requis : sans script, aucun .cart-ghost n'est jamais créé). */
.cart-ghost {
    position: absolute;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    margin: -0.8rem;
    border-radius: 50%;
    background: var(--forest);
    color: var(--cream);
    font-size: 0.85rem;
    font-weight: 700;
    pointer-events: none;
}

/* ---------- Extras : cartes déroulantes avec photo ---------- */

/* Panier (17/09) : le "+"/"✓" (.cart-toggle) et la carte .extra vivent
   côte à côte dans .extra-row plutôt que d'empiler leur propre marge. */
.extra-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
}

.extra-row .extra { flex: 1; margin-bottom: 0; min-width: 0; }

.extra {
    background: var(--cream-3);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    margin-bottom: 0.85rem;
    overflow: hidden;
}

/* Case à cocher stylée en bouton rond +/✓ : un seul contrôle sert à la
   fois à ajouter et à retirer un article du panier (re-décocher), sans
   JavaScript, le glyphe changeant via ":checked" + sélecteur de fratrie. */
.cart-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    margin-top: 0.85rem;
    border-radius: 50%;
    border: 1.5px solid var(--forest);
    color: var(--forest);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.cart-toggle__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.cart-toggle__remove { display: none; }
.cart-toggle__input:checked ~ .cart-toggle__add { display: none; }
.cart-toggle__input:checked ~ .cart-toggle__remove { display: inline; }
.cart-toggle:has(.cart-toggle__input:checked) { background: var(--forest); color: var(--cream); }

/* Variante texte complet, utilisée dans le panneau déplié pour les
   articles à palier (quincho, tiro) : "+ Agregar al pedido" devient
   "✓ Quitar del pedido" une fois coché, jamais un glyphe seul. */
.cart-toggle--inline {
    width: auto;
    height: auto;
    margin-top: 1rem;
    padding: 0.6rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.cart-toggle--inline .cart-toggle__input { inset: 0; }

/* Extra bloqué par un conflit d'horaire avec la réservation voisine
   (ajouté le 20/09, voir portal/repo.py::schedule_conflicts) : reste
   visible mais visuellement neutralisé, jamais juste masqué. */
.cart-toggle--disabled {
    border-color: var(--line-soft);
    color: var(--muted);
    cursor: default;
}

.extra-row--blocked .extra { opacity: 0.65; }

/* "+" des articles à palier (10/11, voir _extras_list.html) : même look
   que les autres, ouvre la carte ; ✓ une fois l'option cochée dedans. */
.cart-toggle--opener { background: none; padding: 0; font-family: inherit; }
.extra-row:has(.extra .cart-toggle__input:checked) > .cart-toggle--opener { background: var(--forest); color: var(--cream); }
.extra-row:has(.extra .cart-toggle__input:checked) > .cart-toggle--opener .cart-toggle__add { display: none; }
.extra-row:has(.extra .cart-toggle__input:checked) > .cart-toggle--opener .cart-toggle__remove { display: inline; }

.note--blocked {
    color: var(--danger);
    border-top-color: var(--danger-bg);
}

.extra__summary {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1.1rem;
    cursor: pointer;
    list-style: none;
}

.extra__summary::-webkit-details-marker { display: none; }
.extra__summary::marker { content: ""; }

.extra__media {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: linear-gradient(155deg, var(--forest-3), var(--forest));
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.extra__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.extra__media-placeholder {
    font-family: var(--serif);
    font-size: 1.5rem;
    color: var(--gold-soft);
}

.extra__head { min-width: 0; }

.extra__head h3 { margin: 0 0 0.2rem; line-height: 1.25; overflow-wrap: normal; }

/* Unité du prix ("1 persona · 60 min", "por día") : déplacée le 10/11 sous
   le titre plutôt que sous le prix. Sous le prix, dans la colonne étroite
   de droite, elle débordait à gauche par-dessus le titre sur mobile. */
.extra__unit {
    margin: 0 0 0.2rem;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-2);
}

/* Icône de la tuile (10/11, voir _icons.html) : remplace la lettre seule
   quand l'extra n'a pas de photo. */
.extra__icon {
    width: 2rem;
    height: 2rem;
    color: var(--gold-soft);
}

/* Mobile (10/11) : sur un écran de ~390px, la tuile de 4.5rem + le bouton
   "+" ne laissaient au titre qu'une colonne d'un mot de large ("Masaje /
   de / cuerpo..."). Tuile et marges réduites, le titre retrouve sa place. */
@media (max-width: 480px) {
    .extra-row { gap: 0.45rem; }
    /* :not(--inline) (11/11) : le bouton texte "Agregar al pedido" des paliers garde sa taille. */
    .cart-toggle:not(.cart-toggle--inline) { width: 2.2rem; height: 2.2rem; font-size: 1.15rem; }
    .extra__summary {
        grid-template-columns: 3rem minmax(0, 1fr) auto;
        gap: 0.65rem;
        padding: 0.75rem 0.8rem;
    }
    .extra__media { width: 3rem; height: 3rem; }
    .extra__icon { width: 1.55rem; height: 1.55rem; }
    .extra__media-placeholder { font-size: 1.2rem; }
    .extra__head h3 { font-size: 0.98rem; }
    .extra__meta { gap: 0.45rem; }
    .price { font-size: 0.98rem; }
}

.extra__summary-text {
    margin: 0;
    font-size: 0.83rem;
    color: var(--muted);
    /* Une seule ligne dans le résumé fermé : le détail complet vit dans le
       panneau déplié, sinon la carte fermée devient trop haute. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.extra__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.6rem;
    flex: 0 0 auto;
}

.extra__chevron {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 1px solid var(--line);
    flex: 0 0 auto;
    position: relative;
}

.extra__chevron::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 1.5px solid var(--forest);
    border-bottom: 1.5px solid var(--forest);
    transform: translateY(-15%) rotate(45deg);
    transition: transform 0.15s ease;
}

.extra[open] .extra__chevron::before { transform: translateY(15%) rotate(-135deg); }

.extra__panel {
    padding: 0 1.1rem 1.15rem;
    border-top: 1px solid var(--line-soft);
    margin-top: 0.1rem;
    padding-top: 1rem;
}

.extra__panel .note { border-top: none; margin-top: 0; padding-top: 0; }

/* ---------- Divers ---------- */

.tier-list { margin-bottom: 0.9rem; }

.backlink {
    display: inline-block;
    margin-top: 1.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
}

.backlink:hover { color: var(--forest); }

.done {
    text-align: center;
    padding: 2.5rem 0 1rem;
}

.done__mark {
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto 1.35rem;
    border: 1px solid var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font-size: 1.35rem;
}

.foot {
    margin-top: 2.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line-soft);
    text-align: center;
    font-size: 0.8rem;
    color: var(--muted-2);
}

@media (min-width: 40rem) {
    .masthead { padding: 3rem 1.25rem 2.25rem; }
    h1 { font-size: 2rem; }
}

/* Carte météo (ajoutée le 25/10) */
.weather__days {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    margin: 0.6rem 0 0.7rem;
    padding-bottom: 0.15rem;
}

.weather__day {
    flex: 0 0 auto;
    width: 3.6rem;
    text-align: center;
    background: var(--cream);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.2rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.weather__day-label {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--gold);
}

.weather__day-icon { font-size: 1.15rem; }

.weather__day-hi {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink);
}

.weather__day-lo {
    font-size: 0.7rem;
    color: var(--muted-2);
}

.weather__tip {
    font-size: 0.85rem;
    color: var(--muted);
    margin: 0.3rem 0 0;
}

.weather__tip + .weather__tip { margin-top: 0.3rem; }

/* ---------- Extras : 2 onglets Servicios / Experiencias (11/11) ---------- */
.xtabs__radio { position: absolute; opacity: 0; pointer-events: none; }

.xtabs__bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin: 0.4rem 0 1.4rem;
}

.xtab {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.95rem 0.9rem 0.9rem;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--cream-3);
    color: var(--ink);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.xtab__icon {
    display: inline-flex;
    width: 2.3rem; height: 2.3rem;
    align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(5, 92, 74, 0.08);
    color: var(--gold);
}
.xtab__icon .extra__icon { width: 1.3rem; height: 1.3rem; color: currentColor; }

.xtab__text { display: flex; flex-direction: column; gap: 0.15rem; }
.xtab__title { font-family: var(--serif); font-size: 1.08rem; font-weight: 500; line-height: 1.2; }
.xtab__sub { font-size: 0.72rem; color: var(--muted); line-height: 1.35; }

.xtab__badge {
    position: absolute; top: 0.95rem; left: 3.45rem;
    min-width: 1.35rem; height: 1.35rem; padding: 0 0.35rem;
    border-radius: var(--pill);
    background: var(--gold-soft); color: var(--forest);
    font-size: 0.72rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}

#xtab-serv:checked ~ .xtabs__bar .xtab--serv,
#xtab-xp:checked ~ .xtabs__bar .xtab--xp {
    opacity: 1;
    box-shadow: 0 0 0 3px var(--cream), 0 0 0 5px var(--forest);
}
#xtab-serv:checked ~ .xtabs__bar .xtab--serv .xtab__sub,
#xtab-xp:checked ~ .xtabs__bar .xtab--xp .xtab__sub { color: rgba(243, 239, 230, 0.7); }
#xtab-serv:checked ~ .xtabs__bar .xtab--serv .xtab__icon,
#xtab-xp:checked ~ .xtabs__bar .xtab--xp .xtab__icon { background: rgba(124, 190, 166, 0.18); color: var(--gold-soft); }

.xpane { display: none; }
#xtab-serv:checked ~ .xpane--serv,
#xtab-xp:checked ~ .xpane--xp { display: block; }

/* Experiencias : grandes cartes photo */
.xp-intro { color: var(--muted); font-size: 0.92rem; margin: 0 0 1.1rem; }

.xp {
    background: var(--cream-3);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1.1rem;
    box-shadow: 0 6px 22px rgba(1, 40, 32, 0.07);
}
.xp__photo { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(155deg, var(--forest-3), var(--forest)); }
.xp__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xp__price {
    position: absolute; left: 0.85rem; bottom: 0.85rem;
    padding: 0.38rem 0.8rem;
    border-radius: var(--pill);
    background: rgba(249, 246, 239, 0.94);
    color: var(--forest);
    font-family: var(--serif); font-weight: 600; font-size: 0.95rem;
}
.xp__body { padding: 1.05rem 1.1rem 1.15rem; }
.xp__title { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; line-height: 1.2; margin: 0 0 0.3rem; }
.xp__unit { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 0.6rem; }
.xp__summary { margin: 0 0 0.7rem; color: var(--ink); font-size: 0.95rem; }
.xp__more summary { cursor: pointer; color: var(--gold); font-size: 0.85rem; font-weight: 600; list-style: none; }
.xp__more summary::-webkit-details-marker { display: none; }
.xp__more summary::after { content: " ›"; }
.xp__more[open] summary::after { content: " ‹"; }
.xp__more .note { margin-top: 0.5rem; }
.xp .tier-list { margin-top: 0.9rem; }
.xp__cta { display: flex; justify-content: center; width: 100%; margin-top: 1rem; background: var(--forest); color: var(--cream); border-color: var(--forest); }

.xtab__badge[hidden] { display: none; }
.xtabs--single .xpane { display: block; }
.xp.extra-row { display: block; }
.xp.extra-row--blocked { opacity: 0.65; }
.xp__cta:has(.cart-toggle__input:checked) { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--forest); }

/* Photos dans les 2 boutons (11/11) : cloche de réception pour Servicios,
   coucher de soleil sur le río (flyer MOA) pour Experiencias. Texte blanc
   sur un dégradé sombre en bas pour rester lisible. Une fois un onglet
   ouvert, l'autre s'estompe. */
.xtab--serv, .xtab--xp {
    min-height: 9.5rem;
    justify-content: space-between;
    border: 0;
    overflow: hidden;
    color: var(--cream);
    background-color: var(--forest);
    background-size: cover;
}
.xtab--serv {
    background-image: linear-gradient(180deg, rgba(1, 22, 17, 0) 30%, rgba(1, 22, 17, 0.82)), url("/static/extras/tab-servicios.jpg");
    background-position: 30% 55%;
}
.xtab--xp {
    background-image: linear-gradient(180deg, rgba(1, 22, 17, 0) 30%, rgba(1, 22, 17, 0.82)), url("/static/extras/tab-experiencias.jpg");
    background-position: center;
}
.xtab--serv .xtab__sub, .xtab--xp .xtab__sub { color: rgba(243, 239, 230, 0.88); }
.xtab--serv .xtab__icon, .xtab--xp .xtab__icon { background: rgba(1, 22, 17, 0.5); color: var(--cream); }
.xtab__title, .xtab__sub { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); }
.xtabs:has(.xtabs__radio:checked) .xtab { opacity: 0.55; }

/* Carte météo personnalisée hors fenêtre de prévision (11/11) */
.weather__subtitle { margin: -0.35rem 0 0.9rem; font-size: 0.82rem; color: var(--muted); }
.weather__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin: 0 0 0.9rem; }
.weather__stat { display: flex; flex-direction: column; align-items: center; padding: 0.7rem 0.3rem; border-radius: var(--radius-sm); background: var(--cream-3); text-align: center; }
.weather__stat-value { font-family: var(--serif); font-size: 1.45rem; font-weight: 500; color: var(--forest); line-height: 1.1; }
.weather__stat-label { margin-top: 0.2rem; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); line-height: 1.3; }

/* Puces des descriptifs structurés (voir _rich_note.html, 11/11) */
.note-item { position: relative; padding-left: 1.05rem; margin-top: 0.3rem; margin-bottom: 0.3rem; }
.note-item::before { content: ""; position: absolute; left: 0.2rem; top: 0.62em; width: 0.38rem; height: 0.38rem; border-radius: 50%; background: var(--gold-soft); }
.note-item strong { color: var(--ink); font-weight: 600; }
.xp__more .note + .note-item { margin-top: 0.55rem; }
/* Descriptif des expériences : paragraphes aérés, sans filets entre eux (11/11) */
.xp__more .note { border-top: none; padding-top: 0; margin-top: 0.55rem; font-size: 0.86rem; line-height: 1.55; color: var(--muted); }
.xp__more .note:first-of-type { margin-top: 0.8rem; }
.xp__more .note-item { margin-top: 0.45rem; }
.xp__more .note + .note-item, .xp__more .note-item + .note:not(.note-item) { margin-top: 0.75rem; }