/* Surcharge des couleurs/polices Renvia avec l'identité DZ Location.
   Chargé APRÈS assets/css/renvia/style.css sur chaque page. */
:root {
  --primary-color: #1D5CFF;
  --primary-color-dark: #123FBF;
  --heading-color: #0B1E3C;
  --primary-black-color: #0B1E3C;
  --gray-color: #F4F6FB;
  --color-gold: #C9A227;
  --heading-font: "Barlow Condensed", sans-serif;
  --body-font: "Inter", sans-serif;
  /* --text-color d'origine (#797E88) ne tient que ~4.08:1 sur fond blanc,
     sous le minimum WCAG AA de 4.5:1 pour le texte courant. Assombri pour
     ~4.8:1 tout en restant visuellement un gris neutre. */
  --text-color: #6E727C;
}

.theme-btn.style-one,
.theme-btn.style-one:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.theme-btn.style-one:hover {
  background-color: var(--primary-color-dark);
  border-color: var(--primary-color-dark);
}

.badge-gold {
  background-color: var(--color-gold);
  color: #ffffff;
}

.badge-blue {
  background-color: var(--primary-color);
  color: #ffffff;
}

.best-price {
  color: var(--color-gold);
  font-weight: 700;
}

.pricing-table.table th,
.pricing-table.table td {
  text-align: center;
  vertical-align: middle;
}

/* Les fiches DZ Location comptent 6 caractéristiques (le template Renvia est
   pensé pour 5, cf. repeat(5, 1fr)) : sur grand écran ce 6e item forçait le
   dernier item à déborder de la grille grise, par-dessus le bloc Tarifs.
   Le thème de base bascule sur repeat(4, 1fr) entre 992px et 1199.98px, ce
   qui donne un déséquilibre 4+2 pour nos 6 items : min-width: 992px unifie
   avec le repeat(3, 1fr) déjà correct en dessous de 992px. */
@media screen and (min-width: 992px) {
  .project-details-wrapper .project-content .content-box .features-amenities-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Bouton menu mobile (hamburger) : le thème de base le rend ~44px de
   large mais seulement ~38px de haut, sous le minimum 44x44px recommandé
   pour les cibles tactiles. Zone cliquable agrandie sans changer l'icône.
   Repris dans le même media query que le thème (display: block y est
   défini) pour ne pas rendre le bouton visible sur desktop.
   flex-direction: column est OBLIGATOIRE : les 3 <span> de l'icône sont
   empilés verticalement par défaut (display:block + margin-top), display:
   flex seul les repasse en ligne (flex-direction:row par défaut) et fait
   apparaître l'icône comme un seul long trait au lieu de 3 barres
   empilées — régression constatée en prod le 2026-08-03. */
@media screen and (max-width: 1199.98px) {
  .header-navigation .navbar-toggler {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

/* Header flottant (.header-four) : theme.js ajoute .sticky au scroll
   (assets/js/theme.js, initStickyHeader) et .sticky bascule le header en
   position: fixed (assets/css/renvia/style.css) — mais rien ne réserve
   l'espace qu'il occupait dans le flux normal. Résultat sur mobile :
   dès que .sticky est actif, le header fixe recouvre le contenu qui se
   trouve sous lui (titres H1 tronqués, boutons "Voir tout..." chevauchant
   le paragraphe précédent), constaté en prod le 2026-08-03. :has() permet
   de réserver dynamiquement l'espace nécessaire côté contenu dès que le
   header devient sticky, sans toucher au JS ni à la mécanique GSAP
   ScrollSmoother (#smooth-wrapper/#smooth-content) qui impose de garder
   le header en position: fixed plutôt que sticky (voir feedback mémoire). */
body:has(header.sticky) #smooth-content {
  padding-top: 90px;
}
@media screen and (max-width: 767.98px) {
  body:has(header.sticky) #smooth-content {
    padding-top: 74px;
  }
}

/* Le thème retire l'outline de focus clavier (a/input/textarea/button)
   sans le remplacer : rend le site impraticable au clavier. On restitue
   un anneau visible, uniquement pour la navigation clavier (:focus-visible
   ne s'affiche pas lors d'un simple clic souris). */
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Cartes véhicules/appartements : chaque photo gardait son ratio naturel
   (paysage large, portrait, carré...), donnant des hauteurs de carte
   différentes dans une même rangée de la grille. Ratio fixe + object-fit
   pour un alignement propre quelles que soient les dimensions d'origine. */
.renvia-project-item.style-four .project-thumbnail img,
.renvia-project-item.style-one .project-thumbnail img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Cartes véhicules/appartements (grilles listing, style-four) : le thème
   ne révèle la légende (.hover-content, nom + bouton) qu'au survol
   souris (:hover). Sur mobile/tablette il n'y a pas de souris : le
   navigateur simule :hover au premier tap et le garde actif jusqu'au tap
   suivant ailleurs sur la page, ce qui affichait la légende figée
   n'importe quand plutôt que jamais ou toujours — constaté en prod le
   2026-08-03 (légende "Renault Clio V Grise" incrustée sur la photo).
   En dessous du breakpoint où le survol souris n'existe plus (992px,
   cf. la nav qui bascule aussi en menu mobile à ce seuil), la légende
   reste affichée en permanence : comportement voulu du thème, juste
   rendu permanent au lieu d'être conditionné à un :hover impossible. */
@media (max-width: 991.98px) {
  .renvia-project-item.style-four .project-thumbnail .hover-content {
    visibility: visible;
    opacity: 1;
  }
}

/* Section "Pourquoi nous faire confiance" (accueil) : le thème Renvia
   prévoit 2 photos superposées (image_one en petit + image_two en grand,
   décalée) dans un bloc de 610px de haut. DZ Location n'utilise qu'une
   seule photo : le bloc gardait une grosse zone vide (min-height/padding
   prévus pour la collage à 2 photos), corrigé ci-dessous.
   Photo : hero-maqam-echahid-poster.jpg (1280x720px réel, déjà utilisée
   comme poster de la vidéo du hero) — assez de résolution pour remplir
   toute la colonne (~500-650px) en 4:3 sans agrandissement (downscale
   uniquement, donc net). Ne PAS remettre une photo à faible résolution
   dans ce slot : object-fit:cover sur une image plus petite que la
   colonne agrandit et rend le résultat flou/pixelisé (déjà vu 2 fois). */
.renvia-about_one .renvia-image-box {
  min-height: auto;
}
.renvia-about_one .renvia-image-box .renvia-image.image_one {
  padding-top: 0;
}
.renvia-about_one .renvia-image-box .renvia-image.image_one img {
  max-width: 100%;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 20px;
}

/* Bouton "Voir nos appartements" du hero : bouton outline (bordure/texte
   blancs, fond transparent) trop peu visible sur la vidéo, surtout à côté
   du bouton bleu plein "Voir nos véhicules". Fond vitré + bordure plus
   marquée pour qu'il se voie quel que soit le plan de la vidéo derrière. */
.renvia-hero_one .btn-outline-light {
  --bs-btn-border-width: 2px;
  background-color: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.renvia-hero_one .btn-outline-light:hover {
  background-color: #ffffff;
}

/* Page d'accueil (fr/ et ar/) : 4 sections consécutives sans fond propre
   (Confiance, Véhicules, Appartements, FAQ) rendaient la page plate, tout
   en blanc entre le hero (vidéo) et le footer (fonds déjà distincts).
   Alternance blanc/gris clair pour marquer chaque section, scopée à ces
   deux pages via ".renvia-hero_one ~" (classe propre à l'accueil). */
.renvia-hero_one ~ .renvia-project_one:nth-of-type(3),
.renvia-hero_one ~ section:nth-of-type(5) {
  background-color: var(--gray-color);
}
.renvia-hero_one ~ section.gray-bg:nth-of-type(6) {
  background-color: #ffffff;
}

/* Carrousel "Nos véhicules / Nos appartements" (accueil, fr/ et ar/) :
   remplace la liste verticale de fiches par un carrousel horizontal de
   visuels en portrait (.project-slider est déjà initialisé en Slick par
   le thème, cf. assets/js/theme.js). Le thème ne fixe pas de dimensions
   pour l'image de la carte style-two : ratio portrait + recadrage ajoutés
   ici. La légende (project-content) ne s'affiche que sur la carte active
   au centre (comportement déjà prévu par le thème) ; le lien sur l'image
   garde chaque carte cliquable même hors du centre. */
.project-slider .renvia-project-item.style-two {
  width: 300px;
}
.project-slider .renvia-project-item.style-two .project-thumbnail img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 30px;
}
@media (max-width: 767.98px) {
  .project-slider .renvia-project-item.style-two {
    /* 100% de la largeur d'écran collait le carrousel bord à bord et,
       combiné au ratio 3:4, donnait une image très haute (jusqu'à ~530px
       sur 390-430px de large) qui écrasait le reste de la section —
       constaté en prod le 2026-08-03. 85% laisse un léger aperçu de la
       carte suivante (pattern carrousel mobile classique) et réduit
       d'autant la hauteur de l'image. */
    width: 85%;
  }
}

/* Sections "Nos véhicules"/"Nos appartements" (accueil) : sous 1200px, la
   colonne de texte+bouton (col-xl-5) et le carrousel (col-xl-7) empilent
   en pleine largeur — Bootstrap ne met aucun espace vertical entre des
   colonnes empilées par défaut. Le bouton "Voir tout..." touchait
   directement l'image du carrousel juste en dessous, constaté en prod
   le 2026-08-03. */
@media (max-width: 1199.98px) {
  .renvia-project_one .renvia-content-box {
    margin-bottom: 40px;
  }
}

/* F3 Boudouaou (appart-chambre.jpg, 305x250px réel) et F2 Boumerdes
   (appart-salon-detail.jpg, 290x250px réel) : les seules photos dispo pour
   ces 2 biens sont trop petites pour un slide de 300px de large en 3:4
   (agrandissement x1.6 => flou visible). variableWidth (Slick) autorise
   une largeur par slide : on réduit UNIQUEMENT ces 2 cartes pour limiter
   l'agrandissement à ~x1.2, en attendant de vraies photos (comme pour F2
   Oran) — les autres slides (véhicules, F3 Boumerdes, F2 Oran) gardent
   300px car leurs photos sources le permettent sans perte de netteté. */
@media (min-width: 768px) {
  .project-slider .renvia-project-item.style-two.compact-slide {
    width: 220px;
  }
}

/* Bouton flottant WhatsApp (fr/ et ar/). inset-inline-end place le bouton
   à droite en LTR et à gauche en RTL, sans règle séparée pour ar/. */
.whatsapp-float {
  position: fixed;
  inset-block-end: 24px;
  inset-inline-end: 24px;
  z-index: 9999;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #25D366;
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}

.whatsapp-float:hover {
  transform: scale(1.05);
  color: #ffffff;
}

/* Vidéo de fond du hero d'accueil (fr/ et ar/). .image-layer garde son rôle
   (position + overlay ::after) sur le div englobant : ::after ne s'applique
   pas sur un élément remplacé comme <video>, d'où ce conteneur intermédiaire. */
.renvia-hero_one .image-layer .hero-video {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* En dessous du ::after (z-index: -1) de .image-layer, qui porte
     l'assombrissement nécessaire à la lisibilité du texte par-dessus. */
  z-index: -2;
}

/* Hero d'accueil beaucoup moins haut qu'à l'origine (235px/120px de
   padding, soit ~1.4x la hauteur d'écran) : la vidéo en fond n'a pas besoin
   d'autant d'espace qu'une image statique pour se lire correctement. */
.renvia-hero_one .single-slider {
  /* Le haut doit rester ≥ ~140px pour ne pas passer sous la barre de nav
     flottante (position: fixed, ~120px de hauteur avec sa marge). */
  padding: 145px 0 50px;
}
@media (max-width: 767.98px) {
  .renvia-hero_one .single-slider {
    padding: 130px 0 60px;
  }
}

/* Filigrane drapeau algérien, à peine visible, derrière tout le contenu
   (fr/ et ar/). position: fixed + inset:0 = taille écran, jamais celle du
   body (qui vaut la hauteur totale de la page) ; le lavis blanc au-dessus
   de l'image garde l'ensemble très discret. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(255, 255, 255, 0.975), rgba(255, 255, 255, 0.975)), url("../images/watermark-flag-algeria.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}