/* ============================================================
   PRÉFÉRENCES VISITEUR — langue, devise, thème clair / sombre
   Ajout additif : ne modifie aucune règle existante.
   1. Thème sombre (surcharge des rôles sémantiques + patchs)
   2. Cluster de préférences (nav + menu plein écran)
   3. Traduction automatique (barre de progression, badge)
   4. Prix convertis
   ============================================================ */

/* ============================================================
   1. THÈME SOMBRE — "Béthania, la nuit"
   Le bleu Atlantide devient la nuit ; l'ivoire devient la lueur.
   ============================================================ */
:root[data-theme="dark"] {
  /* fonds : déclinaisons nocturnes du bleu Atlantide */
  --ivoire:          #0C1D26;
  --ivoire-2:        #0F232D;
  --blanc:           #122A35;
  --sable:           #1B3743;
  --sable-2:         #20404E;
  --parchment:       #0F232D;
  --parchment-2:     #142A35;

  /* texte */
  --ink:             #E9E4D8;
  --on-light:        #E9E4D8;
  --on-light-soft:   #A2B5BD;

  /* rôles */
  --bg:              #0A1820;
  --bg-alt:          #0F232D;
  --surface:         #122A35;
  --bark:            #06131A;
  --canopy:          #06131A;
  --canopy-800:      #06131A;
  --canopy-700:      #122A35;

  /* Sur fond sombre, l'ocre de la charte est parfaitement lisible (5,16:1) :
     c'est l'ambre du mode clair qui deviendrait trop sombre ici. */
  --star:            var(--ocre);

  /* filets & profondeur */
  --line:            rgba(233,228,216,.16);
  --line-dark:       rgba(233,228,216,.13);
  --shadow-soft:     0 24px 60px -28px rgba(0,0,0,.72);
  --shadow-lift:     0 40px 90px -40px rgba(0,0,0,.88);

  /* accents : on remonte la luminance pour rester lisible sur la nuit */
  --accent-lit:      #E0A15E;
  --heartwood-lit:   #EBBC7C;
  --heartwood-deep:  #E0A15E;
  --atlantide-pale:  #7FB2CC;
  --atlantide-pale-2:#4E7F97;
  --foret-pale:      #7FA893;
  --foliage-lit:     #8FBBA1;
  --sand:            #E9B978;
}

/* --- patchs : règles historiques écrites en dur pour le mode clair --- */
:root[data-theme="dark"] .booking-bar,
:root[data-theme="dark"] .booking-result-item,
:root[data-theme="dark"] .pkg-toggle,
:root[data-theme="dark"] .package,
:root[data-theme="dark"] .event-item { background: var(--surface); }

:root[data-theme="dark"] .booking-results {
  background: rgba(18,42,53,.92);
  border-color: var(--line-dark);
}
:root[data-theme="dark"] .booking-result-item { border-color: var(--line-dark); }
:root[data-theme="dark"] .booking-result-pill { background: rgba(127,178,204,.16); color: var(--atlantide-pale); }

:root[data-theme="dark"] .spaces-carousel .package {
  background: linear-gradient(145deg, rgba(20,45,57,.985), rgba(12,29,38,.96));
  border-color: rgba(233,228,216,.14);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
:root[data-theme="dark"] .spaces-carousel .package-price { border-top-color: rgba(233,228,216,.14); }
:root[data-theme="dark"] .spaces-carousel .pkg-nav {
  background: rgba(18,42,53,.95);
  box-shadow: 0 10px 24px rgba(0,0,0,.5);
}

/* le bouton de réservation garde un survol plus sombre, pas plus clair */
:root[data-theme="dark"] .booking-submit:hover { background: var(--sienne-deep); }

/* skip-link : --ink est devenu clair, on repasse sur des valeurs explicites */
:root[data-theme="dark"] .skip { background: var(--surface); color: var(--ink); }

/* champs de formulaire : le sélecteur natif hérite d'un fond système clair */
:root[data-theme="dark"] .booking-field select,
:root[data-theme="dark"] .booking-field option,
:root[data-theme="dark"] .field select,
:root[data-theme="dark"] .field option { color-scheme: dark; background-color: var(--surface); }
:root[data-theme="dark"] .booking-field input[type="date"] { color-scheme: dark; }

/* photographies : on baisse d'un cran la lumière pour la nuit */
:root[data-theme="dark"] .hero-media img,
:root[data-theme="dark"] .page-hero .media img,
:root[data-theme="dark"] .exp .media img,
:root[data-theme="dark"] .cta-band .media img,
:root[data-theme="dark"] .room-row .media img,
:root[data-theme="dark"] .package .media img,
:root[data-theme="dark"] .tour-card .media img,
:root[data-theme="dark"] .gallery img,
:root[data-theme="dark"] .figure img,
:root[data-theme="dark"] .detail-gallery img,
:root[data-theme="dark"] .event-item .media img {
  filter: saturate(1.02) contrast(1.04) brightness(.86) sepia(.04);
}
:root[data-theme="dark"] body::after { mix-blend-mode: soft-light; opacity: .05; }

/* bascule de thème : transition douce, jamais pendant le chargement */
:root.theme-anim body,
:root.theme-anim .section,
:root.theme-anim .footer,
:root.theme-anim .review,
:root.theme-anim .package,
:root.theme-anim .event-item,
:root.theme-anim .booking-bar,
:root.theme-anim .booking-widget,
:root.theme-anim .booking-aside,
:root.theme-anim .field input,
:root.theme-anim .field textarea,
:root.theme-anim .field select {
  transition: background-color .55s var(--ease-out), color .55s var(--ease-out),
              border-color .55s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) { :root.theme-anim * { transition-duration: .01ms !important; } }

/* ============================================================
   2. CLUSTER DE PRÉFÉRENCES
   Verre fumé sur la nav (identique dans les deux thèmes : la nav
   flotte toujours au-dessus d'une photographie sombre).
   ============================================================ */
.prefs {
  --prefs-fg: #FBF8F0;
  --prefs-fg-soft: rgba(251,248,240,.62);
  --prefs-panel: rgba(9,24,32,.92);
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgba(251,248,240,.2);
  border-radius: var(--radius-pill);
  background: rgba(251,248,240,.07);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  color: var(--prefs-fg);
  transition: border-color .5s var(--ease-out), background .5s var(--ease-out);
}
/* pas d'overflow:hidden ici — il rognerait les panneaux déroulants ;
   les extrémités sont arrondies pièce par pièce. */
.prefs > .prefs-item:first-child .prefs-trigger { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.prefs > .prefs-item:last-child  .prefs-theme   { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.prefs:hover { border-color: rgba(251,248,240,.34); background: rgba(251,248,240,.11); }

.prefs-item { position: relative; display: flex; }
.prefs-item + .prefs-item::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%;
  width: 1px; background: rgba(251,248,240,.18);
}

.prefs-trigger {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .62em 1em;
  font-family: var(--font-body); font-size: var(--step--1);
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--prefs-fg); opacity: .88;
  transition: opacity .35s var(--ease-out), background .35s var(--ease-out);
  white-space: nowrap;
}
.prefs-trigger:hover, .prefs-trigger[aria-expanded="true"] { opacity: 1; background: rgba(251,248,240,.09); }
.prefs-trigger .ic { width: 15px; height: 15px; flex: none; opacity: .8; }
.prefs-trigger .chev { width: 9px; height: 9px; flex: none; opacity: .55; transition: transform .45s var(--ease-out); }
.prefs-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* --- bascule clair / sombre : le soleil devient croissant --- */
.prefs-theme {
  display: inline-grid; place-items: center;
  width: 2.6rem; padding: 0;
  color: var(--prefs-fg); opacity: .88;
  transition: opacity .35s var(--ease-out), background .35s var(--ease-out);
}
.prefs-theme:hover { opacity: 1; background: rgba(251,248,240,.09); }
.prefs-theme svg { width: 17px; height: 17px; overflow: visible; }
.prefs-theme .orb {
  transform-origin: center;
  transition: transform .8s var(--ease-inout), r .8s var(--ease-inout);
}
.prefs-theme .rays {
  transform-origin: center;
  transition: transform .8s var(--ease-inout), opacity .5s var(--ease-out);
}
.prefs-theme .mask-orb {
  transform: translate(14px, -6px);
  transition: transform .8s var(--ease-inout);
}
:root[data-theme="dark"] .prefs-theme .rays { opacity: 0; transform: rotate(70deg) scale(.55); }
:root[data-theme="dark"] .prefs-theme .orb { transform: scale(1.18); }
:root[data-theme="dark"] .prefs-theme .mask-orb { transform: translate(5px, -4.5px); }

/* --- panneau déroulant --- */
.prefs-panel {
  position: absolute; top: calc(100% + .8rem); right: 0;
  z-index: 5;
  min-width: 15rem;
  padding: .55rem;
  border-radius: 16px;
  background: var(--prefs-panel);
  border: 1px solid rgba(251,248,240,.14);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.85);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  opacity: 0; visibility: hidden;
  transform: translateY(-10px) scale(.97);
  transform-origin: top right;
  transition: opacity .4s var(--ease-out), transform .5s var(--ease-out), visibility .4s;
}
.prefs-item.is-open .prefs-panel { opacity: 1; visibility: visible; transform: none; }

.prefs-panel-title {
  padding: .5rem .85rem .55rem;
  font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sand); opacity: .85;
}
.prefs-opt {
  display: flex; align-items: baseline; gap: .7em; width: 100%;
  padding: .62em .85em; border-radius: 10px; text-align: left;
  color: rgba(251,248,240,.78);
  font-size: var(--step--1); line-height: 1.3;
  opacity: 0; transform: translateY(6px);
  transition: background .3s var(--ease-out), color .3s var(--ease-out),
              opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.prefs-item.is-open .prefs-opt { opacity: 1; transform: none; }
.prefs-item.is-open .prefs-opt:nth-child(2)  { transition-delay: .04s; }
.prefs-item.is-open .prefs-opt:nth-child(3)  { transition-delay: .07s; }
.prefs-item.is-open .prefs-opt:nth-child(4)  { transition-delay: .10s; }
.prefs-item.is-open .prefs-opt:nth-child(5)  { transition-delay: .13s; }
.prefs-item.is-open .prefs-opt:nth-child(6)  { transition-delay: .16s; }
.prefs-item.is-open .prefs-opt:nth-child(7)  { transition-delay: .19s; }
.prefs-opt:hover { background: rgba(251,248,240,.09); color: #FBF8F0; }
.prefs-opt b { font-weight: 500; letter-spacing: .01em; }
.prefs-opt .sub {
  margin-left: auto; font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(251,248,240,.4);
}
.prefs-opt[aria-selected="true"] { color: #FBF8F0; background: rgba(224,161,94,.14); }
.prefs-opt[aria-selected="true"] .sub { color: var(--sand); }
.prefs-note {
  padding: .7rem .85rem .3rem;
  margin-top: .3rem;
  border-top: 1px solid rgba(251,248,240,.1);
  font-size: 11px; line-height: 1.45;
  color: rgba(251,248,240,.45);
}

/* --- déclinaison dans le menu plein écran (mobile) --- */
.nav-overlay .prefs-mobile {
  margin-top: var(--space-m);
  display: flex; flex-wrap: wrap; gap: .9rem;
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s var(--ease-out) .6s, transform .7s var(--ease-out) .6s;
}
body.menu-open .nav-overlay .prefs-mobile { opacity: 1; transform: none; }
.prefs-mobile .prefs { background: rgba(251,248,240,.09); }
.prefs-mobile .prefs-trigger { padding: .85em 1.2em; }
.prefs-mobile .prefs-theme { width: 3.1rem; }
.prefs-mobile .prefs-panel { right: auto; left: 0; transform-origin: top left; bottom: calc(100% + .8rem); top: auto; }

/* la nav est dense sous 1080px : le cluster passe dans le menu */
@media (max-width: 1080px) {
  .nav-actions .prefs { display: none; }
}
@media (min-width: 1081px) {
  .prefs-mobile { display: none !important; }
}

/* ============================================================
   3. TRADUCTION AUTOMATIQUE
   ============================================================ */
.trad-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 9997; pointer-events: none;
  background: linear-gradient(90deg, var(--sienne), var(--ocre), var(--sand));
  transform: scaleX(0); transform-origin: left;
  opacity: 0;
  transition: transform .6s var(--ease-out), opacity .5s var(--ease-out);
}
.trad-bar.is-on { opacity: 1; }

.trad-badge {
  position: fixed; left: var(--gutter); bottom: 1.4rem;
  z-index: 9996;
  display: inline-flex; align-items: center; gap: .7em;
  padding: .6em 1.05em;
  border-radius: var(--radius-pill);
  background: rgba(9,24,32,.9);
  border: 1px solid rgba(251,248,240,.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: rgba(251,248,240,.8);
  font-size: 11px; letter-spacing: .05em;
  box-shadow: 0 20px 44px -22px rgba(0,0,0,.8);
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-out);
  pointer-events: none;
}
.trad-badge.is-on { opacity: 1; transform: none; pointer-events: auto; }
.trad-badge .dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--sand);
}
.trad-badge.is-busy .dot { animation: tradPulse 1.3s ease-in-out infinite; }
.trad-badge button {
  color: var(--sand); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-decoration: underline; text-underline-offset: 3px;
}
@keyframes tradPulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .trad-badge .dot { animation: none; } }
@media (max-width: 620px) { .trad-badge { left: 50%; transform: translate(-50%, 14px); } .trad-badge.is-on { transform: translate(-50%, 0); } }

/* pendant la traduction, le texte remplacé ne doit pas "sauter" */
html[data-translating] .trad-badge { pointer-events: none; }

/* ============================================================
   4. PRIX CONVERTIS
   ============================================================ */
[data-money-approx] { cursor: help; }
.money-approx {
  font-size: .78em; opacity: .55; font-weight: 400;
  margin-right: .18em; vertical-align: baseline;
}

/* ============================================================
   DURCISSEMENT RESPONSIVE
   (ces règles vivent ici et non dans pages.css : prefs.css est
   chargé APRÈS, une surcharge de même spécificité y perdrait)
   ============================================================ */
@media (hover: none), (pointer: coarse) {
  /* cibles tactiles dans le panneau de préférences */
  .prefs-opt { min-height: 44px; align-items: center; }
  .prefs-trigger { min-height: 44px; }
}
/* Le panneau s'ouvre en absolu : sur un écran étroit il pouvait
   dépasser du bord droit. On le borne à la largeur utile. */
.prefs-panel { max-width: calc(100vw - 2 * var(--gutter)); }
@media (max-width: 420px) {
  .prefs-panel { min-width: 12rem; }
  .nav-overlay .prefs-mobile { gap: .6rem; }
}