/* Kastor V20 — contraste, repères de navigation et pictogrammes d'accueil.
   S'applique au site mobile pour le footer et uniquement au conteneur
   Capacitor pour la mise en page simplifiée de l'application. */
:root { --kastor-v20-red: #8f1018; --kastor-v20-ink: #171c24; }

@media screen and (max-width: 1024px) {
  /* V21 : le linteau géométrique architectural du header reste visible
     dans l’application, comme sur le site. Sa hauteur et son tracé sont
     conservés dans header.php pour éviter une seconde implémentation. */
  /* Toujours séparer visuellement la navigation fixe de l'écran. */
  body > .immotem-app-nav,
  body .immotem-app-nav {
    background: #fff !important;
    border-top: 1px solid #bb838b !important;
    box-shadow: 0 -3px 16px rgba(16, 18, 23, .16) !important;
  }
  body .immotem-app-nav :is(a, button) {
    position: relative;
    color: var(--kastor-v20-red) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 8px;
    text-decoration: none !important;
  }
  body .immotem-app-nav :is(a, button) svg {
    width: 25px;
    height: 25px;
    color: var(--kastor-v20-red) !important;
  }
  /* Page en cours : pictogramme sur fond léger ET soulignement visible
     sous le libellé, y compris quand la fenêtre de chat est ouverte. */
  body .immotem-app-nav :is(a.is-active, a[aria-current="page"], button[aria-expanded="true"]) {
    color: var(--kastor-v20-red) !important;
    background: #fbecef !important;
    font-weight: 800 !important;
  }
  body .immotem-app-nav :is(a.is-active, a[aria-current="page"], button[aria-expanded="true"]) > span {
    color: var(--kastor-v20-red) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px;
  }
  body .immotem-app-nav :is(a.is-active, a[aria-current="page"], button[aria-expanded="true"])::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(50% - 19px);
    width: 38px;
    height: 3px;
    border-radius: 3px;
    background: var(--kastor-v20-red);
    pointer-events: none;
  }
  body .immotem-app-nav :is(a, button):focus-visible {
    outline: 3px solid var(--kastor-v20-red) !important;
    outline-offset: -2px !important;
  }
  /* Raccourcis internes au compte: mettre aussi en évidence l'onglet courant. */
  body .im-client-tabbar a { font-size: 12px !important; color: var(--kastor-v20-red) !important; }
  body .im-client-tabbar a[aria-current="page"] {
    background: #fbecef !important;
    color: var(--kastor-v20-red) !important;
    font-weight: 800 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px;
  }
  body .im-client-tabbar a[aria-current="page"]::after {
    background: var(--kastor-v20-red) !important;
    width: 38px !important;
    height: 3px !important;
  }

  /* Grandes icônes rouge Kastor sur l'accueil : grille plus dense,
     moins d'espace perdu et libellés foncés sur fond blanc. */
  html.kastor-native-app main.page-home .kastor-home-quick {
    padding: 10px 10px 0 !important;
  }
  html.kastor-native-app main.page-home .kastor-home-quick__grid {
    gap: 9px 7px !important;
  }
  html.kastor-native-app main.page-home .kastor-home-quick__tile {
    padding: 7px 3px !important;
    min-height: 116px !important;
    gap: 4px !important;
    background: #fff !important;
    color: var(--kastor-v20-ink) !important;
    border: 1px solid #dec6c9 !important;
    box-shadow: 0 2px 7px rgba(17, 19, 24, .08) !important;
    border-radius: 12px !important;
    font-size: clamp(12px, 3.2vw, 14px) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere;
  }
  html.kastor-native-app main.page-home .kastor-home-quick__tile .kastor-home-quick__icon {
    width: 62px !important;
    height: 62px !important;
    flex: 0 0 62px !important;
    border-radius: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff0f2 !important;
    color: var(--kastor-v20-red) !important;
  }
  html.kastor-native-app main.page-home .kastor-home-quick__tile .kastor-home-quick__icon svg {
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    color: var(--kastor-v20-red) !important;
    fill: currentColor !important;
    flex: none !important;
  }
  html.kastor-native-app main.page-home .kastor-home-quick__tile > span:last-child {
    color: var(--kastor-v20-ink) !important;
  }
  html.kastor-native-app main.page-home .kastor-home-quick__tile:is(:active, :focus-visible, [aria-current="page"]) {
    background: #fff1f3 !important;
    border-color: var(--kastor-v20-red) !important;
  }
  html.kastor-native-app main.page-home .kastor-home-quick__tile:is(:active, :focus-visible, [aria-current="page"]) > span:last-child {
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px;
  }


  /* Surfaces blanches : jamais de libellés blancs ou gris trop pâles.
     Les sections vidéo et les bandeaux colorés ne sont pas modifiés. */
  html.kastor-native-app #main-content :is(
    .home-modele-card__body, .service-card__body, .programme-major-card__body,
    .villa-detail__info-card, .supplier-offer-card,
    .contact-simple-info, .kastor-home-quick__locations,
    .visite-distance-highlight__inner, .visite-distance-card figcaption,
    .kastor-app-native-actions
  ) {
    color: var(--kastor-v20-ink) !important;
  }
  html.kastor-native-app #main-content :is(
    .home-modele-card__body, .service-card__body, .programme-major-card__body,
    .villa-detail__info-card, .supplier-offer-card,
    .contact-simple-info, .kastor-home-quick__locations,
    .visite-distance-highlight__inner, .kastor-app-native-actions
  ) :is(p, li, small, label, figcaption) {
    color: #313944 !important;
  }
  html.kastor-native-app #main-content :is(
    .home-modele-card__body, .service-card__body, .programme-major-card__body,
    .villa-detail__info-card, .supplier-offer-card,
    .contact-simple-info, .kastor-home-quick__locations,
    .visite-distance-highlight__inner, .kastor-app-native-actions
  ) :is(h2, h3, h4, strong) {
    color: var(--kastor-v20-ink) !important;
  }
  /* Les prix et les liens d'action sur blanc conservent leur couleur rouge. */
  html.kastor-native-app #main-content :is(.bingerville-price strong,
    .kastor-home-quick__locations a, .visite-distance-card figcaption) {
    color: var(--kastor-v20-red) !important;
  }
  html.kastor-native-app #main-content :is(input:not([type="checkbox"]), textarea, select) {
    color: var(--kastor-v20-ink);
    background-color: #fff;
    border-color: #78838b;
  }
  html.kastor-native-app #main-content :is(input, textarea)::placeholder {
    color: #59616b;
    opacity: 1;
  }
  /* À l'inverse, les vrais boutons rouges doivent garder un texte blanc. */
  html.kastor-native-app #main-content :is(.btn-primary, .site-btn.btn-primary,
    .kastor-app-native-actions__links > a:first-child) {
    background: var(--kastor-v20-red) !important;
    color: #fff !important;
  }
  html.kastor-native-app #main-content :is(.btn-primary, .site-btn.btn-primary,
    .kastor-app-native-actions__links > a:first-child) :is(span, strong) {
    color: #fff !important;
  }
}

/* Le tableau de bord client est autonome: en natif, ses zones blanches
   reçoivent le même contraste, sans affecter le bandeau de progression vert. */
@media screen and (max-width: 1024px) {
  html.kastor-native-app body.has-client-nav :is(main .card, main .im-stat, main .im-profile-link) {
    color: var(--kastor-v20-ink);
  }
  html.kastor-native-app body.has-client-nav :is(main .im-stat-label, main .im-activity-row small, main .hint) {
    color: #414b56 !important;
  }
  html.kastor-native-app body.has-client-nav main .im-dashboard-feature,
  html.kastor-native-app body.has-client-nav main .im-dashboard-feature :is(h2,p,small) {
    color: #fff;
  }
}

/* Préserver les trois colonnes sur écrans de 320-350px. */
@media screen and (max-width: 350px) {
  html.kastor-native-app main.page-home .kastor-home-quick__tile .kastor-home-quick__icon {
    width: 56px !important; height: 56px !important; flex-basis: 56px !important;
  }
  html.kastor-native-app main.page-home .kastor-home-quick__tile .kastor-home-quick__icon svg {
    width: 36px !important; height: 36px !important;
  }
  html.kastor-native-app main.page-home .kastor-home-quick__tile { font-size: 12px !important; }
}