/* =====================================================================
   V2.055 — LA FICHE D'ANNONCE, PROPOSITION C (validée par le fondateur)
   =====================================================================
   La photo occupe le haut de l'écran et reste en place ; la fiche monte
   par-dessus comme une feuille, avec sa poignée. Points de la galerie sur
   la photo (ils suivent le glissement horizontal), compteur « 1 / 8 ».
   Chiffres clés en tuiles, carte Yafoye Autentik juste après, onglets en
   pastilles, réservation dans une pilule bleu marine qui flotte.

   Sélecteurs ancrés sur #app : ils passent devant les règles internes
   de la page (plus anciennes) sans surenchère. Mode nuit en fin de
   feuille. */
html body #app{--fx-fond:#eef3f7;--fx-carte:#ffffff;--fx-ligne:#e3eaf0;--fx-texte:#071a2e;--fx-doux:#56677a;--fx-encre:#071a2e}

@media(max-width:900px){
  /* 1. La photo, en place sous la feuille */
  html body #app .media-shell{position:sticky!important;top:var(--yf-global-header-h,72px);z-index:0!important;height:min(62svh,560px)!important;margin:0 -16px!important;overflow:hidden;background:#0b2a40}
  html body #app .gallery{display:flex!important;grid-template-columns:none!important;grid-template-rows:none!important;height:100%!important;margin:0!important;border-radius:0!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory;scrollbar-width:none;gap:0!important}
  html body #app .gallery::-webkit-scrollbar{display:none}
  html body #app .gallery>button{flex:0 0 100%!important;width:100%!important;height:100%!important;display:block!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;scroll-snap-align:center;position:relative;background:#0b2a40}
  html body #app .gallery>button :is(img,video){width:100%!important;height:100%!important;object-fit:cover!important;border-radius:0!important;display:block}
  html body #app .gallery .yi-media-count,html body #app .gallery .all-photos{display:none!important}
  html body #app .media-shell::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(180deg,rgba(4,16,30,.5),transparent 28%,transparent 70%,rgba(4,16,30,.35))}
  html body #app .media-overlay{z-index:9!important}
  html body #app .media-circle-btn{width:44px!important;height:44px!important;border:1px solid rgba(255,255,255,.35)!important;background:rgba(255,255,255,.16)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff!important;box-shadow:none!important}
  html body #app .media-circle-btn :is(i,svg,.yf-lucide){color:#fff!important}
  html body #app .media-circle-btn.is-favorite,html body #app .media-circle-btn[aria-pressed="true"]{background:rgba(255,255,255,.95)!important}
  html body #app .media-circle-btn.is-favorite :is(i,svg),html body #app .media-circle-btn[aria-pressed="true"] :is(i,svg){color:#e0245e!important}
  html body #app .yfx-points{position:absolute;z-index:8;left:50%;bottom:46px;transform:translateX(-50%);display:flex;gap:5px;pointer-events:none}
  html body #app .yfx-points i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.65);transition:width .25s ease,background .25s ease}
  html body #app .yfx-points i.est-actif{width:20px;background:#fff}
  html body #app .yfx-compte{position:absolute;z-index:8;left:14px;bottom:42px;height:32px;padding:0 12px;border-radius:16px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;display:flex;align-items:center;font:800 12.5px Manrope,Arial,sans-serif}

  /* 2. La feuille qui monte */
  html body #app .detail-sheet{position:relative!important;z-index:4!important;margin:-30px -16px 0!important;padding:12px 16px 4px!important;border-radius:30px 30px 0 0!important;background:var(--fx-fond)!important;box-shadow:var(--ombre-haute)!important;color:var(--fx-texte)}
  html body #app .detail-sheet::before{content:"";display:block;width:44px;height:5px;margin:0 auto 16px;border-radius:3px;background:#c7d3dd}
  html body #app .yf-detail-status{gap:6px!important;margin:0 0 10px!important}
  html body #app .yf-detail-status .pill{display:inline-flex!important;align-items:center;gap:6px;padding:5px 10px!important;border-radius:12px!important;border:0!important;background:#e3f5ec!important;color:#0f6b3e!important;font:800 12px Manrope,Arial,sans-serif!important}
  html body #app .yf-detail-status .pill.available{background:var(--fx-carte)!important}
  html body #app .yf-detail-status .pill.available::before{content:"";width:7px;height:7px;border-radius:4px;background:#1f9d5c}
  html body #app .yf-detail-status .pill.unavailable{background:#fdf1e3!important;color:#8a4b0f!important}

  /* 3. Les onglets en pastilles */
  html body #app .yf-detail-tabs{display:flex!important;gap:8px!important;margin:4px 0 14px!important;padding:0!important;border:0!important;overflow-x:auto;scrollbar-width:none}
  html body #app .yf-detail-tabs [role="tab"]{flex:none!important;height:38px!important;padding:0 15px!important;border-radius:19px!important;border:1px solid var(--fx-ligne)!important;background:var(--fx-carte)!important;background-image:none!important;color:var(--fx-doux)!important;font:700 13.5px Manrope,Arial,sans-serif!important;box-shadow:none!important}
  html body #app .yf-detail-tabs [role="tab"]::after{display:none!important}
  html body #app .yf-detail-tabs [role="tab"][aria-selected="true"]{border-radius:19px!important;background:var(--fx-encre)!important;border-color:var(--fx-encre)!important;color:#fff!important;font-weight:800!important}

  /* 4. Le contenu : titre, chiffres clés, Autentik, description */
  html body #app #yfDetailAbout:not([hidden]){display:flex!important;flex-direction:column}
  html body #app #yfDetailAbout>.hero-head{order:1}
  html body #app #yfDetailAbout>.summary{order:2}
  html body #app #yfDetailAbout>.yi-vente-vigilance{order:3}
  html body #app #yfDetailAbout>.section:not(.yi-vente-vigilance){order:4}
  html body #app .hero-head{margin:0 0 14px!important}
  html body #app .hero-head h1{margin:0 0 6px!important;font:800 25px/1.15 Sora,Manrope,Arial,sans-serif!important;color:var(--fx-texte)!important;letter-spacing:-.01em}
  html body #app .hero-head .location{color:var(--fx-doux)!important;font:600 14px Manrope,Arial,sans-serif!important}
  html body #app .summary{padding:0 0 18px!important;border:0!important}
  html body #app .summary h2{display:none!important}
  html body #app .facts{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important}
  html body #app .fact{display:flex!important;align-items:center;gap:10px;margin:0!important;padding:12px!important;border-radius:18px!important;border:1px solid var(--fx-ligne)!important;background:var(--fx-carte)!important;color:var(--fx-texte)!important;font:700 13px/1.3 Manrope,Arial,sans-serif!important}
  html body #app .fact :is(i,svg,.yf-lucide){flex:none;width:32px!important;height:32px!important;padding:7px;border-radius:10px;background:var(--fx-fond);color:#0b4f7a!important;box-sizing:border-box}
  html body #app .yi-vente-vigilance{margin:0 0 20px!important;padding:18px!important;border:0!important;border-radius:22px!important;background:linear-gradient(150deg,#0b3a63,#071a2e)!important;color:#fff!important;box-shadow:none!important}
  html body #app .yi-vente-vigilance h2{color:#e8cf8f!important;-webkit-text-fill-color:#e8cf8f!important;font:800 17px Sora,Manrope,Arial,sans-serif!important}
  html body #app .yi-vente-vigilance h2 :is(i,svg){color:#e8cf8f!important}
  html body #app .yi-vente-vigilance p{color:rgba(255,255,255,.85)!important;-webkit-text-fill-color:currentColor!important}
  html body #app .yi-vente-vigilance :is(a,button){background:linear-gradient(135deg,#e8cf8f,#c9a24a)!important;color:#071a2e!important;border:0!important;border-radius:24px!important;box-shadow:none!important}
  html body #app .yi-vente-vigilance :is(a,button) :is(i,svg){color:#071a2e!important}
  html body #app .section h2{font:800 19px Sora,Manrope,Arial,sans-serif!important;color:var(--fx-texte)!important}
  html body #app .description{color:var(--fx-texte)!important;opacity:.88;font-size:15px!important;line-height:1.7!important}

  /* 5. La réservation : une pilule bleu marine qui flotte */
  html body #app .mobile-cta{left:12px!important;right:12px!important;bottom:calc(90px + env(safe-area-inset-bottom))!important;width:auto!important;padding:10px 10px 10px 20px!important;border:0!important;border-radius:34px!important;background:rgba(7,26,46,.95)!important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:#fff!important;box-shadow:var(--ombre-haute)!important;transition:bottom .32s cubic-bezier(.2,.8,.2,1)}
  html.yfa-entete-cachee body #app .mobile-cta{bottom:calc(14px + env(safe-area-inset-bottom))!important}
  html body #app .mobile-cta .mobile-price{color:#fff!important;font:800 17px Sora,Manrope,Arial,sans-serif!important}
  html body #app .mobile-cta button{height:50px!important;min-height:50px!important;padding:0 26px!important;border-radius:25px!important;background:#fff!important;background-image:none!important;color:#071a2e!important;font:800 15px Manrope,Arial,sans-serif!important;box-shadow:none!important}
  html body #app .mobile-cta button:disabled{background:rgba(255,255,255,.3)!important;color:#fff!important}
}

/* =====================================================================
   MODE NUIT
   ===================================================================== */
html[data-theme="nuit"] body #app{--fx-fond:#06131f;--fx-carte:rgba(255,255,255,.06);--fx-ligne:rgba(255,255,255,.12);--fx-texte:#eef4f9;--fx-doux:rgba(238,244,249,.65);--fx-encre:#eef4f9}
html[data-theme="nuit"] body:has(#app .detail-sheet){background:#06131f!important}
html[data-theme="nuit"] body #app main,html[data-theme="nuit"] body #app{background:#06131f!important}
html[data-theme="nuit"] body #app :is(.section,.summary,.hero-head,.layout,.content){color:var(--fx-texte)!important}
html[data-theme="nuit"] body #app :is(.section,.summary,.hero-head,.yf-detail-panel) :is(p,li,span,dd,dt,td,th){color:inherit}
html[data-theme="nuit"] body #app .detail-sheet::before{background:rgba(255,255,255,.25)}
html[data-theme="nuit"] body #app .yf-detail-tabs [role="tab"][aria-selected="true"]{color:#071a2e!important}
html[data-theme="nuit"] body #app .fact :is(i,svg,.yf-lucide){color:#8fd3ff!important}
html[data-theme="nuit"] body #app .yf-detail-status .pill.available{color:#7fe0aa!important}
html[data-theme="nuit"] body #app .yf-detail-status .pill:not(.available):not(.unavailable){background:rgba(52,201,122,.18)!important;color:#7fe0aa!important}
html[data-theme="nuit"] body #app :is(.booking,.yf-amenity,.amenity,.yi-formule,.yf-formule,.condition-row,.conditions-grid>*){background:var(--fx-carte)!important;border-color:var(--fx-ligne)!important;color:var(--fx-texte)!important}

/* V2.060 — la note du Pass, lisible la nuit ; et la grille des conditions
   aligne ses cartes en haut (plus de carte étirée sur toute la hauteur). */
html[data-theme="nuit"] body .yf-pass-note{background:rgba(63,169,245,.1)!important;border-color:rgba(63,169,245,.25)!important;color:rgba(238,244,249,.8)!important}
html[data-theme="nuit"] body .yf-pass-note b{color:#eef4f9!important}
html[data-theme="nuit"] body .yf-pass-note :is(i,svg){color:#8fd3ff!important}
html body .yf-pass-note{align-self:start}