/* #L3C-BRANDING P2 LOT2 (2026-07-08, qa6 §42) : valeurs MATÉRIALISÉES depuis la SOURCE UNIQUE
   /etc/koaee/branding.php (CSS statique, pas de PHP) — si la teinte hotellerie change dans la
   source, RÉGÉNÉRER ces littéraux (light=#7d60ca dark=#a78bfa). */
/* ============================================================
   EMERALD-HOTEL.CSS — composants propres hôtellerie (token-drivés)
   ------------------------------------------------------------
   Complément de :
       <link href="/shared/css/base.css">       (structure)
       <link href="/shared/themes/emerald.css">  (valeurs light+dark)
       <link href="/demo-hotellerie/css/emerald-hotel.css">  (ce fichier)
   ------------------------------------------------------------
   Migration emerald-noir.css → socle (2026-06-14, GO Erwan « ISO-RENDU »).
   Source des règles : demo-hotellerie/css/emerald-noir.css (verbatim, remappé
   sur les tokens socle). 0 hex en dur hors ombres neutres + 1 override dark
   iso-rendu (--accent-light). Contraste AA ≥4,5:1 light+dark mesuré.

   SECTION 1 — COMPAT TOKENS : le bot (chat_script_demo.php, SURVEILLÉ, non
   éditable) et les pages consomment des tokens privés emerald-noir
   (--en-*, --accent-dark, --accent-light) qu'emerald.css ne fournit pas.
   On les ré-expose en ALIAS des tokens socle → bascule iso-rendu garantie.
   (--en-accent reste volontairement NON défini = comportement live actuel,
    bug latent emerald-noir sans fallback, tracké R25 — ne pas « corriger » ici.)
   ============================================================ */

:root {
  --en-bg:              var(--bg);
  --en-surface-low:     var(--surface-1);
  --en-surface-mid:     var(--surface-2);
  --en-surface-high:    var(--surface-3);
  --en-surface-highest: var(--surface-4);
  --en-surface-darkest: var(--surface-deep);
  --en-surface-hover:   var(--surface-hover);
  --en-mint:            var(--accent);
  --en-emerald:         var(--accent-strong);
  --en-text:            var(--text);
  --en-text-muted:      var(--text-muted);
  --en-text-faint:      var(--text-faint);
  --en-text-faintest:   var(--text-faintest);
  --en-text-action:     var(--text-on-accent);
  --en-outline:         var(--border);
  --en-badge-bg:        var(--accent-soft);
  --en-badge-text:      var(--accent-soft-text);
  --en-nav-bg:          var(--nav-bg);
  --en-nav-link-muted:  var(--nav-link);
  --en-day-disabled:    var(--ui-day-disabled);
  --en-day-booked-text: var(--ui-day-booked);
  --en-error:           var(--error);
  --en-error-bg:        var(--error-bg);
  --en-error-border:    var(--error-border);
  --en-serif:           var(--font-serif);
  --en-body:            var(--font-body);

  /* tokens privés consommés par le BOT (backgrounds / primary-hover) */
  --accent-dark:        var(--accent-strong);  /* light #6748af / dark #a78bfa */
  --accent-light:       var(--accent-soft);    /* light #c3b4fd = socle ; dark → override */
}
[data-theme="dark"] {
  --accent-light:       #6748af;  /* iso-rendu : valeur emerald-noir dark (≠ --accent-soft #c3b4fd) */
}

/* ============================================================
   SECTION 2 — Composants hôtel-propres absents de base.css
   ============================================================ */

/* ---- 2a) Cartes prestation — variantes média (spa / restaurant) ---- */
.en-prestation-card.has-photo { padding:0; overflow:hidden; display:flex; flex-direction:column; }
.en-prestation-img-wrap { position:relative; width:100%; height:200px; overflow:hidden; background:var(--surface-1); }
.en-prestation-img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s; }
.en-prestation-card.has-photo:hover .en-prestation-img { transform:scale(1.04); }
.en-prestation-body { padding:1.5rem 1.75rem 1.75rem; display:flex; flex-direction:column; flex:1; }
.en-prestation-cat { font-family:var(--font-serif); font-size:1.5rem; margin:3rem 0 1.25rem; display:flex; align-items:center; gap:.6rem; }
.en-prestation-cat:first-of-type { margin-top:0; }
.en-prestation-cat i { color:var(--accent); font-size:1.1rem; }
@media (max-width:600px){ .en-prestation-img-wrap { height:170px; } }

/* ---- 2b) Sélecteur langue MOBILE natif (drapeau seul, <select> superposé a11y) ---- */
.en-lang-compact { position:relative; display:inline-flex; align-items:center; margin-inline-end:0; }
.en-lang-compact__display { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0; line-height:1; pointer-events:none; }
.en-lang-compact__flag { font-size:1.25rem; line-height:1; font-family:"Segoe UI Emoji","Noto Color Emoji","Apple Color Emoji",sans-serif; }
.en-lang-compact__select { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; opacity:0; cursor:pointer; border:0; color:transparent; background:transparent; -webkit-appearance:none; -moz-appearance:none; appearance:none; }
.en-lang-compact__select::-ms-expand { display:none; }
.en-lang-compact:hover .en-lang-compact__flag { filter:brightness(0.85); }
.en-lang-compact:focus-within .en-lang-compact__display { outline:2px solid var(--accent); outline-offset:2px; border-radius:8px; }

/* ---- 2c) Sélecteur langue DESKTOP custom (listbox WAI-ARIA) + bascule responsive ---- */
.en-lang-desktop { display:none; }
@media (pointer:fine),(min-width:1025px) and (hover:hover){
  .en-lang-compact { display:none; }
  .en-lang-desktop { position:relative; display:inline-flex; align-items:center; }
}
.en-lang-desktop__btn { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0 6px; background:transparent; border:0; cursor:pointer; line-height:0; }
.en-lang-desktop__flag { width:24px; height:18px; display:block; object-fit:cover; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.15); }
.en-lang-desktop:hover .en-lang-desktop__btn .en-lang-desktop__flag { filter:brightness(0.9); }
.en-lang-desktop__btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
.en-lang-desktop__menu {
  position:absolute; top:calc(100% + 6px); inset-inline-end:0;
  margin:0; padding:4px; list-style:none;
  min-width:200px; max-height:60vh; overflow-y:auto;
  background:var(--surface-3); color:var(--text);
  border:1px solid var(--surface-hover); border-radius:8px;
  box-shadow:0 8px 28px rgba(0,0,0,.22); z-index:1200; display:none;
  scrollbar-width:thin; scrollbar-color:var(--text-faint) transparent;
}
.en-lang-desktop__menu::-webkit-scrollbar { width:8px; }
.en-lang-desktop__menu::-webkit-scrollbar-track { background:transparent; }
.en-lang-desktop__menu::-webkit-scrollbar-thumb { background:var(--text-faint); border-radius:8px; border:2px solid transparent; background-clip:padding-box; }
.en-lang-desktop__menu::-webkit-scrollbar-thumb:hover { background:var(--accent); border:2px solid transparent; background-clip:padding-box; }
.en-lang-desktop__menu.is-open { display:block; }
.en-lang-desktop__menu:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.en-lang-desktop__opt { display:flex; align-items:center; gap:10px; min-height:40px; padding:8px 12px; cursor:pointer; border-radius:6px; white-space:nowrap; }
.en-lang-desktop__opt .en-lang-desktop__name { font-size:0.95rem; }
.en-lang-desktop__opt.is-active,
.en-lang-desktop__opt:hover { background:var(--surface-hover); }
.en-lang-desktop__opt.is-selected { font-weight:600; }
.en-lang-desktop__opt.is-selected::after { content:'✓'; margin-inline-start:auto; color:var(--accent-strong); font-weight:700; }

/* ---- 2d) Groupe langue + thème accolé (nav, demande Erwan 2026-06-09) ---- */
.en-nav-langtheme { display:flex; align-items:center; gap:0.25rem; }

/* ============================================================
   SECTION 3 — BOUTONS HÔTEL : iso-rendu emerald-noir (override fix8 base.css)
   ------------------------------------------------------------
   base.css L1316+ (« SYSTÈME DE BOUTONS UNIQUE » fix8/fix9, pilote RESTO) impose
   en !important un look OUTLINE + label ORANGE (#C2410C / #FF6B35) sur
   .en-btn-primary/.en-btn-ghost/.en-filter-btn/.en-nav-cta--order/.en-philosophy-cta/.en-btn-direct.
   L'hôtel (emerald-noir) n'a JAMAIS adopté fix8 : ses boutons sont des PILULES
   pleines (mint/emerald) + un bouton démo NEUTRE (gris/crème inversant).
   On RESTAURE ce rendu (règles emerald-noir verbatim, remappées sur les tokens
   socle/compat --en-*), en battant fix8 par spécificité égale + !important +
   ordre de cascade (ce fichier charge APRÈS base.css). 0 touche base.css.
   Cause racine = orange hardcodé dans base.css SURVEILLÉ → dette R25 transverse.
   GO Erwan 2026-06-14 : Reco (A) + logo 20px socle conservé (aucune règle logo ici).
   Valeurs cibles = mesure runtime gate-OFF emerald-noir (R32).
   ============================================================ */

/* ---- 3a) Bouton démo « Commander ce chatbot » = pilule NEUTRE (hors marque) ---- */
.en-nav-cta--order {
  background:#131313 !important; background-image:none !important;
  color:#eae5d8 !important;
  border:0 !important; border-radius:6px !important;
  box-shadow:0 1px 2px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06), 0 4px 8px rgba(0,0,0,.04) !important;
  transform:none !important; filter:none !important;
}
.en-nav-cta--order:hover, .en-nav-cta--order:focus-visible {
  background:#2a2a2a !important; color:#eae5d8 !important; filter:none !important;
  transform:translateY(-2px) !important;
  box-shadow:0 4px 6px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.10), 0 16px 32px rgba(0,0,0,.06) !important;
}
.en-nav-cta--order:active {
  transform:translateY(0) !important;
  box-shadow:0 1px 2px rgba(0,0,0,.10) !important;
}
.en-nav-cta--order:focus-visible { outline:3px solid #005fcc !important; outline-offset:2px !important; }
[data-theme="dark"] .en-nav-cta--order {
  background:#eae5d8 !important; color:#131313 !important;
  box-shadow:0 1px 2px rgba(255,255,255,.06), 0 2px 4px rgba(255,255,255,.04), 0 4px 8px rgba(255,255,255,.03) !important;
}
[data-theme="dark"] .en-nav-cta--order:hover, [data-theme="dark"] .en-nav-cta--order:focus-visible {
  background:#d4cfc2 !important; color:#131313 !important; transform:translateY(-2px) !important;
  box-shadow:0 4px 6px rgba(255,255,255,.10), 0 8px 16px rgba(255,255,255,.06), 0 16px 32px rgba(255,255,255,.04) !important;
}
[data-theme="dark"] .en-nav-cta--order:active { transform:translateY(0) !important; box-shadow:0 1px 2px rgba(255,255,255,.06) !important; }
/* dimensions desktop (≥769px) : emerald-noir = padding .5rem 1.5rem / font .75rem — mobile reste géré par base.css @768 */
@media (min-width:769px){
  .en-nav-cta--order { padding:.5rem 1.5rem !important; font-size:.75rem !important; letter-spacing:.1em !important; }
}

/* ---- 3b) .en-btn-primary = pilule MINT pleine ---- */
.en-btn-primary {
  background:var(--en-mint) !important; background-image:none !important;
  color:var(--en-text-action) !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  text-transform:uppercase !important;
}
.en-btn-primary:hover {
  background:var(--en-mint) !important; color:var(--en-text-action) !important;
  filter:brightness(1.1) !important; transform:scale(1.02) !important;
}
[data-theme="dark"] .en-btn-primary { color:var(--en-text-action) !important; }

/* ---- 3c) .en-btn-ghost = transparent + filet, texte courant ---- */
.en-btn-ghost {
  background:transparent !important; background-image:none !important;
  color:var(--en-text) !important;
  border:1px solid rgba(62,73,68,.4) !important; border-radius:0 !important; box-shadow:none !important;
  text-transform:uppercase !important;
}
.en-btn-ghost:hover {
  background:var(--en-surface-highest) !important; border-color:var(--en-outline) !important;
  color:var(--en-text) !important; filter:none !important; transform:none !important;
}
[data-theme="dark"] .en-btn-ghost { color:var(--en-text) !important; }
/* ghost dans le hero plein : forcé blanc (pattern emerald-noir) */
.en-hero-full .en-btn-ghost, .en-hero-full-content .en-btn-ghost {
  color:#ffffff !important; border-color:rgba(255,255,255,.4) !important;
}

/* ---- 3d) Boutons de MODALE (variantes 8px) : primary emerald 3D / ghost filet ---- */
.en-modal-actions .en-btn-primary {
  background:var(--en-emerald) !important; background-image:none !important; color:#ffffff !important;
  border:0 !important; border-radius:8px !important; text-transform:none !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 2px 4px rgba(6,95,70,.18) !important;
}
.en-modal-actions .en-btn-primary:hover {
  filter:brightness(1.08) !important; transform:translateY(-1px) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 4px 8px rgba(6,95,70,.22) !important;
}
.en-modal-actions .en-btn-ghost {
  background:transparent !important; color:var(--en-text) !important;
  border:1px solid rgba(0,0,0,.15) !important; border-radius:8px !important; box-shadow:none !important;
  text-transform:none !important;
}
[data-theme="dark"] .en-modal-actions .en-btn-ghost { border-color:rgba(255,255,255,.15) !important; color:var(--en-text) !important; }
.en-modal-actions .en-btn-ghost:hover { border-color:var(--en-text) !important; background:rgba(0,0,0,.04) !important; }
[data-theme="dark"] .en-modal-actions .en-btn-ghost:hover { background:rgba(255,255,255,.04) !important; }

/* ---- 3e) .en-filter-btn = surface + texte mint au survol/actif ---- */
.en-filter-btn {
  background:var(--en-surface-high) !important; background-image:none !important;
  color:var(--en-text-muted) !important;
  border:1px solid transparent !important; border-radius:.75rem !important; box-shadow:none !important;
  text-transform:uppercase !important;
}
.en-filter-btn:hover, .en-filter-btn.active {
  background:var(--en-surface-highest) !important; color:var(--en-mint) !important;
  border-color:rgba(143,246,208,.3) !important; filter:none !important; transform:none !important;
}
[data-theme="dark"] .en-filter-btn { color:var(--en-text-muted) !important; }
[data-theme="dark"] .en-filter-btn.active, [data-theme="dark"] .en-filter-btn:hover {
  background:var(--en-surface-highest) !important; color:var(--en-mint) !important;
}

/* ---- 3f) .en-sort-select = select natif sur surface (pas de chevron custom orange) ---- */
.en-sort-select {
  background-color:var(--en-surface-high) !important; background-image:none !important;
  border:1px solid var(--en-outline) !important; border-radius:0 !important;
  -webkit-appearance:auto !important; appearance:auto !important;
  padding:.5rem 1rem !important;
}
select.en-sort-select { color:#374151 !important; }
[data-theme="dark"] select.en-sort-select { color:#d1d5db !important; }

/* ---- 3g) .en-philosophy-cta = lien souligné mint (pas un bouton boîte) ---- */
.en-philosophy-cta {
  background:transparent !important; background-image:none !important;
  color:var(--en-mint) !important;
  border:0 !important; border-bottom:1px solid rgba(143,246,208,.3) !important;
  border-radius:0 !important; box-shadow:none !important;
  padding:0 0 .5rem !important; transform:none !important;
}
.en-philosophy-cta:hover { background:transparent !important; color:var(--en-mint) !important; gap:1rem !important; filter:none !important; }
[data-theme="dark"] .en-philosophy-cta { color:var(--en-mint) !important; }

/* ---- 3h) .en-btn-direct = pilule emerald 3D ---- */
.en-btn-direct {
  background:var(--en-emerald) !important; background-image:none !important; color:#ffffff !important;
  border:0 !important; border-radius:8px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 2px 4px rgba(6,95,70,.18), 0 4px 12px rgba(6,95,70,.24) !important;
}
.en-btn-direct:hover {
  background:var(--en-emerald) !important; color:#ffffff !important;
  filter:brightness(1.08) !important; transform:translateY(-1px) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 4px 8px rgba(6,95,70,.22), 0 8px 20px rgba(6,95,70,.32) !important;
}
[data-theme="dark"] .en-btn-direct { color:#ffffff !important; }

/* ---- 3j) Filtres galerie/catégorie : contraste AA emerald-noir (Sprint 3.1 Commit 4) ----
   fix8 écrasait ces overrides AA. On les restaure. Le bg « Tout » est porté en
   .en-filter-btn[href|onclick] (spécificité 0,2,1) pour battre mon .en-filter-btn.active. */
a[href="?cat=deluxe"], a[href="?cat=prestige"], a[href="?cat=standard"], a[href="?cat=suites"],
button[onclick="filterGallery('architecture')"], button[onclick="filterGallery('dining')"],
button[onclick="filterGallery('suites')"], button[onclick="filterGallery('wellness')"] { color:#374151 !important; }
.en-filter-btn[href="?cat=all"], a[href="?cat=all"],
.en-filter-btn[onclick="filterGallery('all')"], button[onclick="filterGallery('all')"] { background:#ffffff !important; }
[data-theme="dark"] a[href="?cat=deluxe"], [data-theme="dark"] a[href="?cat=prestige"],
[data-theme="dark"] a[href="?cat=standard"], [data-theme="dark"] a[href="?cat=suites"],
[data-theme="dark"] button[onclick="filterGallery('architecture')"], [data-theme="dark"] button[onclick="filterGallery('dining')"],
[data-theme="dark"] button[onclick="filterGallery('suites')"], [data-theme="dark"] button[onclick="filterGallery('wellness')"] { color:#d1d5db !important; }
[data-theme="dark"] .en-filter-btn[href="?cat=all"], [data-theme="dark"] a[href="?cat=all"],
[data-theme="dark"] .en-filter-btn[onclick="filterGallery('all')"], [data-theme="dark"] button[onclick="filterGallery('all')"] { background:#2a2a2a !important; }

/* ---- 3i) a11y : fix8 force outline:none — on restaure un focus clavier visible (R12 RGAA) ---- */
.en-btn-primary:focus-visible, .en-btn-ghost:focus-visible, .en-filter-btn:focus-visible,
.en-philosophy-cta:focus-visible, .en-btn-direct:focus-visible, .en-sort-select:focus-visible {
  outline:2px solid var(--accent) !important; outline-offset:2px !important;
}

/* ---- 3j) RGAA §49 (2026-07-09) : au focus LIGHT, la cascade fix8 base.css repasse le label CTA
   sur un gris (#bbbbbb mesuré R32) posé sur fond var(--accent-surface) #7d60ca = 3.48 FAIL.
   On épingle le label focus sur le token pair de la surface (blanc, 4.8 AA sur #7d60ca).
   SCOPE LIGHT SEUL (html:not([data-theme="dark"])) : en dark le CTA est INVERSÉ (texte #0f0f0f
   sur violet clair, focus 6.01 AA déjà PASS) — la 1re version bi-thème le cassait (mesuré 4.22). ---- */
html:not([data-theme="dark"]) .en-btn-primary:focus-visible,
html:not([data-theme="dark"]) .en-btn-primary:focus {
  color: var(--text-on-surface) !important;
}