/* =========================================================================
   Finition. Les détails qui séparent un site correct d'un site qu'on croit
   cher : transitions entre pages, images qui se posent au lieu d'apparaître,
   matières, et un traitement particulier pour l'offre haut de gamme.
   ========================================================================= */

/* --- Transitions entre les pages ------------------------------------------ */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: fadeOutPage 90ms cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: fadeInPage 220ms cubic-bezier(0, 0, 0.2, 1) both;
}
@keyframes fadeOutPage {
  to {
    opacity: 0;
  }
}
@keyframes fadeInPage {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* L'en-tête et le pied ne doivent pas clignoter pendant la transition. */
.site-header {
  view-transition-name: entete;
}
.site-footer {
  view-transition-name: pied;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* --- Images : elles se posent, elles n'apparaissent pas -------------------- */

.card-media img,
.gallery-main img,
.city-card img,
.my-listing-media img,
.thumb-item img {
  opacity: 0;
  transition: opacity 420ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.card-media img.is-loaded,
.gallery-main img.is-loaded,
.city-card img.is-loaded,
.my-listing-media img.is-loaded,
.thumb-item img.is-loaded {
  opacity: 1;
}
/* Repli : sans JavaScript, les images restent visibles. */
.no-js .card-media img,
.no-js .gallery-main img,
.no-js .city-card img {
  opacity: 1;
}

/* --- Matières et finitions ------------------------------------------------- */

::selection {
  background: color-mix(in srgb, var(--brand) 26%, transparent);
  color: var(--ink);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 3px solid var(--bg);
  border-radius: 99px;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--ink-4);
}

/* Titres : un rendu optique plus serré aux grandes tailles. */
h1,
.hero-title,
.stat-value,
.plan-price strong,
.listing-price strong {
  font-feature-settings: 'kern' 1, 'liga' 1, 'tnum' 0;
  text-wrap: balance;
}
p,
.lead,
.card-title {
  text-wrap: pretty;
}

/* L'en-tête se dérobe quand on descend, revient quand on remonte. */
@media (max-width: 899px) {
  .site-header {
    transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
      box-shadow 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .site-header.is-hidden {
    transform: translateY(-100%);
  }
}

/* --- Traitement de l'offre haute de gamme --------------------------------- */

.plan-card#premium,
.plan-card#promoteur {
  border-color: transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(140deg, var(--accent), #f5d17a 45%, var(--brand)) border-box;
  border: 1.5px solid transparent;
}
.plan-card#premium::before,
.plan-card#promoteur::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    120% 80% at 50% -20%,
    color-mix(in srgb, var(--accent) 14%, transparent),
    transparent 62%
  );
  pointer-events: none;
}
.plan-card#premium .plan-price strong,
.plan-card#promoteur .plan-price strong {
  background: linear-gradient(120deg, var(--accent), #d4a03c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Le badge d'un bien vérifié mérite d'être remarqué. */
.badge-verified,
.status-chip.is-live {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent);
}

/* --- Micro-interactions ---------------------------------------------------- */

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--fast) var(--ease);
  pointer-events: none;
}
.btn {
  position: relative;
  overflow: hidden;
}
.btn:active::after {
  opacity: 0.08;
}

.listing-card {
  will-change: transform;
}
.listing-card:active {
  transform: translateY(-1px) scale(0.995);
}

/* La carte de contact se détache légèrement quand on y arrive. */
.contact-card {
  transition: box-shadow var(--slow) var(--ease-out);
}
.contact-card:focus-within {
  box-shadow: var(--shadow-3);
}

/* Champs : un liseré de marque discret au survol, avant même le focus. */
input:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line-strong));
}

/* --- Fil de lecture sur les fiches ---------------------------------------- */

.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  z-index: 100;
  transition: width 120ms linear;
  pointer-events: none;
}

/* --- Impression ------------------------------------------------------------ */

@media print {
  .site-header,
  .site-footer,
  .mobile-cta,
  .install-banner,
  .contact-actions,
  .listing-side,
  .toaster,
  .safety-note,
  .breadcrumb {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
  .listing-layout {
    grid-template-columns: 1fr;
  }
  .gallery-main {
    max-height: 300px;
  }
  a[href^='/']::after {
    content: ' (monbien.africa' attr(href) ')';
    font-size: 0.8em;
    color: #555;
  }
}