/* ============================================================
   Solution Appartement - feuille de style
   Palette : ivoire #F6F1E8, indigo #16233F, laterite #C1502E,
             or discret #B98B2A, charbon #241F1C, emeraude #1F5C4A
   Typo : Fraunces (display) + Inter (texte)
   ============================================================ */
:root{
  --ivoire:#F6F1E8;
  --ivoire-fonce:#ECE4D4;
  --indigo:#16233F;
  --indigo-clair:#233657;
  --laterite:#C1502E;
  --laterite-fonce:#A5401F;
  --bordeaux:#6E1423;
  --or:#B98B2A;
  --charbon:#241F1C;
  --emeraude:#1F5C4A;
  --blanc:#FFFFFF;
  --radius:14px;
  --ombre: 0 12px 32px rgba(22,35,63,0.14);
  --ombre-legere: 0 4px 14px rgba(22,35,63,0.08);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
/* ---------- Filet de securite anti-debordement horizontal (mobile) ----------
   Empeche la page entiere de pouvoir defiler/se decaler horizontalement si un
   element venait a deborder de la largeur de l'ecran (ex : header trop
   charge sur tres petit ecran, voir .logo plus bas). Sans ca, un debordement,
   meme minime, elargit tout le document et decale visuellement le contenu
   centre (.container, margin:0 auto) vers la droite - symptome observe sur
   Samsung A14 (et autres petits ecrans) sur index.php/suivi.php/appartement.php. */
html, body{max-width:100%;overflow-x:hidden;}

/* ---------- Barre de defilement (meme couleur que le sidebar admin/indigo) ---------- */
html{scrollbar-width:thin;scrollbar-color:var(--indigo) var(--ivoire-fonce);}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-track{background:var(--ivoire-fonce);}
::-webkit-scrollbar-thumb{background:var(--indigo);border-radius:10px;border:2px solid var(--ivoire-fonce);}
::-webkit-scrollbar-thumb:hover{background:var(--indigo-clair);}
@media (max-width:640px){
  ::-webkit-scrollbar{width:6px;height:6px;}
  ::-webkit-scrollbar-thumb{border:none;}
}
body{
  margin:0;
  background:var(--ivoire);
  color:var(--charbon);
  font-family:'Inter',system-ui,sans-serif;
  line-height:1.6;
}
h1,h2,h3,h4{
  font-family:'Fraunces',Georgia,serif;
  color:var(--indigo);
  margin:0 0 0.5em;
  line-height:1.15;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.container{max-width:1180px;margin:0 auto;padding:0 24px;}

/* Signature : soulignement laterite en trait de pinceau */
.trait-signature{
  display:inline-block;
  width:64px;height:5px;
  background:linear-gradient(90deg,var(--laterite),var(--or));
  border-radius:6px;
  margin-top:10px;
}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;width:100%;z-index:50;
  background:rgba(246,241,232,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(22,35,63,0.07);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;gap:28px;}
.logo{font-family:'Fraunces',serif;font-weight:600;font-size:21px;color:var(--indigo);letter-spacing:0.2px;flex-shrink:0;display:flex;align-items:center;gap:10px;}
/* Nom du site masque dans la navbar (desktop ET mobile) : seul le pictogramme
   (.logo-icone) reste visible. Le texte reste dans le HTML (utile pour le
   lien/accessibilite) mais n'est plus affiche visuellement. */
.logo-texte{display:none;}
.logo-icone{width:52px;height:52px;border-radius:10px;object-fit:contain;flex-shrink:0;background:#000;}
.logo span{color:var(--laterite);}
.logo .logo-suffixe{color:var(--indigo);opacity:0.55;font-weight:500;}

.nav-links{display:flex;align-items:center;gap:38px;list-style:none;margin:0;padding:0;}
.nav-links a{
  font-size:14.5px;font-weight:700;color:#0D0B08;position:relative;padding:6px 0;
  text-transform:uppercase;letter-spacing:.4px;
  transition:color .2s;
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--laterite);
  transition:width .25s;
}
.nav-links a:hover{color:var(--indigo);}
.nav-links a:hover::after{width:100%;}

.btn-connexion-nav{
  background:var(--indigo);color:var(--ivoire)!important;
  padding:9px 20px!important;border-radius:999px;
  text-transform:uppercase;letter-spacing:.5px;font-size:13px!important;
  margin-left:56px;
  transition:background .2s, transform .2s;
}
.btn-connexion-nav::after{display:none;}
.btn-connexion-nav:hover{background:var(--laterite);color:var(--ivoire)!important;transform:translateY(-1px);}

.btn-gestion-nav{
  background:rgba(31,92,74,0.08);color:var(--emeraude)!important;
  padding:9px 18px!important;border-radius:999px;
  border:1.5px solid rgba(31,92,74,0.5);
  text-transform:uppercase;letter-spacing:.5px;font-size:13px!important;
  display:inline-flex!important;align-items:center;gap:7px;
  margin-left:56px;
  transition:background .2s, color .2s, border-color .2s, transform .2s;
}
.btn-gestion-nav::after{display:none;}
.btn-gestion-nav:hover{background:var(--emeraude);color:var(--ivoire)!important;border-color:var(--emeraude);transform:translateY(-1px);}
.btn-gestion-fleche{flex-shrink:0;transition:transform .25s ease;}
.btn-gestion-nav:hover .btn-gestion-fleche,
.btn-gestion-nav:active .btn-gestion-fleche{transform:translateX(3px);}

.header-actions{display:flex;align-items:center;gap:20px;flex-shrink:0;}

/* ---------- Bouton WhatsApp flottant ---------- */
.btn-whatsapp-flottant{
  position:fixed;right:22px;bottom:22px;z-index:999;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  transition:transform .2s, box-shadow .2s;
}
.btn-whatsapp-flottant:hover{transform:scale(1.08);box-shadow:0 8px 22px rgba(0,0,0,.34);}

/* Infobulle "Réservez par WhatsApp" au survol du bouton flottant, en
   desktop uniquement (hover:hover exclut les ecrans tactiles, min-width
   exclut le mobile meme sur les rares appareils tactiles a large ecran). */
@media (hover:hover) and (min-width:601px){
  .btn-whatsapp-flottant::before,
  .btn-whatsapp-flottant::after{
    opacity:0;pointer-events:none;position:absolute;top:50%;
    transition:opacity .22s ease, transform .22s ease;
  }
  .btn-whatsapp-flottant::before{
    content:attr(data-tooltip);
    right:calc(100% + 14px);transform:translateY(-50%) translateX(6px);
    background:var(--indigo);color:#fff;font-family:'Inter',sans-serif;
    font-size:13.5px;font-weight:600;white-space:nowrap;
    padding:9px 16px;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.18);
  }
  .btn-whatsapp-flottant::after{
    content:'';right:calc(100% + 6px);transform:translateY(-50%);
    border:6px solid transparent;border-left-color:var(--indigo);
  }
  .btn-whatsapp-flottant:hover::before{opacity:1;transform:translateY(-50%) translateX(0);}
  .btn-whatsapp-flottant:hover::after{opacity:1;}
}

/* ---------- Bouton d'appel telephonique flottant (mobile uniquement) ----------
   Place au-dessus du bouton WhatsApp, meme logique de bouton rond flottant,
   mais vert elegant (dégradé sur --emeraude) et reserve au mobile : masque
   par defaut, affiche uniquement sous 600px, juste au-dessus du WhatsApp. */
.btn-appel-flottant{
  display:none;position:fixed;z-index:999;border-radius:50%;
  background:linear-gradient(135deg,var(--emeraude),#153F33);
  align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(31,92,74,0.4);
  transition:transform .2s, box-shadow .2s;
}
.btn-appel-flottant:hover{transform:scale(1.08);box-shadow:0 8px 22px rgba(31,92,74,0.5);}
@media(max-width:600px){
  .btn-whatsapp-flottant{width:52px;height:52px;right:16px;bottom:16px;}
  .btn-appel-flottant{display:flex;width:46px;height:46px;right:19px;bottom:78px;}
}

.burger{
  display:none;background:none;border:none;cursor:pointer;padding:4px;
  flex-direction:column;justify-content:center;gap:6px;width:34px;
}
.burger span{display:block;height:3px;width:100%;background:var(--indigo);border-radius:2px;transition:.25s;}
.burger.ouvert span:nth-child(1){transform:translateY(9px) rotate(45deg);}
.burger.ouvert span:nth-child(2){opacity:0;}
.burger.ouvert span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}

/* ---------- Fond flou derriere le menu burger mobile ----------
   Meme principe que .admin-side-backdrop (menu admin) : un calque fixe,
   flouté, sous le panneau de nav mais au-dessus du reste de la page,
   qui assombrit/floute l'arriere-plan et sert aussi de zone cliquable
   pour fermer le menu. Le header (z-index:50) reste net et au-dessus. */
.nav-backdrop{
  display:none;position:fixed;inset:0;
  background:rgba(22,35,63,0.32);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  z-index:39;opacity:0;transition:opacity .25s;
}
.nav-backdrop.visible{display:block;opacity:1;}

/* Changement de langue FR/EN sans rechargement de page (voir
   initChangementLangueSansRechargement dans main.js) : leger fondu pendant
   la recuperation du contenu en arriere-plan, pour eviter une impression de
   clic sans effet le temps du fetch. */
html.changement-langue-en-cours body{opacity:.55;transition:opacity .15s;}

/* ---------- Hero ---------- */
.hero{
  /* padding-top compense la hauteur du header fixe (.site-header, ~85px)
     pour que le titre ne demarre pas sous la navbar. */
  position:relative;min-height:240px;display:flex;align-items:center;
  padding-top:100px;
  /* Image de secours si aucune image n'est configuree depuis /admin/image_principale.php */
  background:url('https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=1800&q=80&auto=format&fit=crop') center/cover no-repeat;
  color:var(--ivoire);
  box-sizing:border-box;
  overflow:hidden;
}
/* Voile sombre au-dessus des photos pour garder le texte lisible, quel que soit le nombre d'images du slider */
.hero::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(22,35,63,0.55), rgba(22,35,63,0.72));
}
/* Slider de fond : gere depuis /admin/image_principale.php, chaque .hero-slide
   se superpose en fondu enchaine (voir le script dans index.php) */
.hero-slides{position:absolute;inset:0;z-index:0;}
.hero-slide{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.8s ease-in-out;
}
.hero-slide.active{opacity:1;}
.hero-content{position:relative;z-index:2;max-width:640px;padding:36px 24px;}
.hero h1{color:var(--blanc);font-size:clamp(26px,3.6vw,42px);}
.hero p{font-size:18px;color:#E7E1D3;max-width:520px;margin-top:16px;}
.hero-actions{display:flex;gap:16px;margin-top:24px;flex-wrap:wrap;}

/* ---------- Scintillement du bouton "Suivre ma reservation" (hero) ----------
   Declenche depuis index.php (voir le <script> juste apres le hero) quand le
   client est redirige ici depuis confirmation.php, apres avoir choisi l'une
   des 3 options (payer l'acompte, payer le total, ou payer sur place) : 3
   pulsations douces (dore, sur la couleur --or) qui attirent naturellement
   l'oeil vers le bouton, sans etre criardes - le bouton revient ensuite a
   son etat normal, sans que rien ne clignote indefiniment. */
@keyframes scintillementSuivi{
  0%, 100%{
    box-shadow:0 0 0 0 rgba(185,139,42,0);
    border-color:rgba(255,255,255,0.6);
    background:rgba(255,255,255,0);
  }
  50%{
    box-shadow:0 0 18px 4px rgba(185,139,42,0.65);
    border-color:var(--or);
    background:rgba(185,139,42,0.22);
  }
}
.scintille-suivi{
  animation:scintillementSuivi 1s ease-in-out 3;
}

.btn{
  display:inline-block;padding:14px 30px;border-radius:30px;font-weight:600;
  font-size:15px;cursor:pointer;border:none;transition:.25s;
  box-sizing:border-box;line-height:1.2;font-family:inherit;vertical-align:middle;
}
.btn:active,.chip:active,.pill:active,.btn-connexion-nav:active,.btn-gestion-nav:active,
.carte-logement:active,.option-paiement:active{
  filter:brightness(0.92);
}
.btn-primary{background:var(--laterite);color:var(--blanc);}
.btn-primary:hover{background:var(--laterite-fonce);transform:translateY(-2px);}
.btn-outline{background:transparent;color:var(--blanc);border:1.5px solid rgba(255,255,255,0.6);}
.btn-outline:hover{background:rgba(255,255,255,0.12);}
/* ---------- Boutons ".btn-outline" a l'interieur d'une modale (fond clair) ----------
   La couleur blanche par defaut de .btn-outline est pensee pour le hero (fond
   sombre) : dans une modale (fond blanc), un bouton "Annuler" ainsi herite
   devenait invisible (blanc sur blanc). Les boutons qui definissent deja une
   couleur en inline (style="color:...") restent inchanges (l'inline est
   prioritaire) ; ceci ne corrige que ceux qui n'en avaient pas, comme les
   boutons "Annuler" des modales de confirmation par mot de passe. */
.resa-modal .btn-outline{color:var(--indigo);border-color:rgba(22,35,63,0.45);}
.resa-modal .btn-outline:hover{background:rgba(22,35,63,0.07);border-color:var(--indigo);}
.btn-indigo{background:var(--indigo);color:var(--ivoire);}
.btn-indigo:hover{background:var(--indigo-clair);}
.btn-block{width:100%;text-align:center;}
.btn-consulter{background:transparent;color:var(--charbon);border:1.5px solid var(--charbon);}
.btn-consulter:hover{background:var(--charbon);color:var(--blanc);}

/* ---------- Sections generales ---------- */
.section{padding:88px 0;}
/* Quand .section est combinee avec .container sur le meme element (ex: pages
   suivi/paiement/confirmation), le padding horizontal de .container ("0 24px")
   se fait ecraser par le padding de .section ("88px 0") car les deux regles
   ont la meme specificite et .section est declaree plus loin dans ce fichier.
   Sur desktop ca ne se voit pas (la largeur max + marges auto centrent deja
   le bloc), mais sur mobile le contenu se retrouve colle aux bords de l'ecran.
   On restaure explicitement le padding horizontal ici avec un selecteur plus
   specifique. */
/* padding-top renforce (au lieu des 88px herites de .section) : la marge de
   quelques px entre la hauteur reelle du header fixe et 88px etait trop
   juste et laissait le haut du contenu se faire rogner (pages suivi/
   paiement/confirmation). */
.container.section{padding-left:24px;padding-right:24px;padding-top:110px;}
.section-head{max-width:640px;margin:0 auto 48px;text-align:center;}
.section-head p{color:#4A463F;font-size:16px;margin-top:14px;}
.eyebrow{
  text-transform:uppercase;letter-spacing:2px;font-size:12.5px;font-weight:700;color:var(--emeraude);
}

/* ---------- Filtres quartier (chips) ---------- */
.chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:44px;}
.chip{
  padding:9px 18px;border-radius:30px;border:1.5px solid var(--indigo);
  font-size:13.5px;font-weight:600;color:var(--indigo);background:transparent;cursor:pointer;
  position:relative;
}
.chip.active,.chip:hover{background:var(--indigo);color:var(--ivoire);}
/* Sauteur de ligne invisible entre le 3e et le 4e chip (voir
   reservations.php) : force les 3 premiers filtres a rester sur la meme
   ligne et le 4e ("Archivees") a passer seul sur la ligne suivante, centre
   (grace a justify-content:center herite de .chips). Neutre sur desktop
   (display:none) ou les 4 chips tiennent deja sur une seule ligne. */
.chips-saut-ligne{display:none;}
.chip-badge-neuf{
  position:absolute;top:-8px;right:-8px;
  min-width:20px;height:20px;padding:0 5px;
  background:var(--laterite);color:#fff;
  font-size:11px;font-weight:800;line-height:20px;text-align:center;
  border-radius:999px;box-shadow:0 0 0 2px var(--ivoire);
  animation:badgeNotifPop .25s ease;
}

/* ---------- Grille de logements ---------- */
.grid-logements{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.carte-logement{
  background:var(--blanc);border-radius:var(--radius);overflow:hidden;box-shadow:var(--ombre-legere);
  transition:.3s;display:flex;flex-direction:column;
}
.carte-logement:hover{transform:translateY(-6px);box-shadow:var(--ombre);}
.carte-img{position:relative;height:210px;overflow:hidden;}
.carte-img img{width:100%;height:100%;object-fit:cover;}
.badge-ville{
  position:absolute;top:14px;left:14px;padding:6px 14px;border-radius:20px;
  font-size:11.5px;font-weight:700;letter-spacing:.5px;color:var(--blanc);
}
.badge-dakar{background:var(--indigo);}
.badge-thies{background:var(--indigo);}
.carte-body{padding:20px 22px 24px;flex:1;display:flex;flex-direction:column;}
.carte-quartier{font-size:12.5px;color:var(--emeraude);font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.carte-body h3{font-size:19px;margin:6px 0 10px;}
.carte-infos{display:flex;gap:14px;font-size:13px;color:#5B564C;margin-bottom:14px;flex-wrap:wrap;}
.carte-footer{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid #ECE6D8;}
.carte-prix{font-family:'Fraunces',serif;font-weight:600;color:var(--indigo);font-size:19px;}
.carte-prix small{font-size:12px;font-weight:400;color:#847F73;}

/* ---------- Fiches logement plus compactes en desktop uniquement ----------
   Reduit la taille des fiches (.grid-logements / .carte-logement) au-dela de
   980px : 4 colonnes au lieu de 3, image et paddings reduits, typo un peu
   plus petite. Le tablette/mobile (media queries plus bas) ne sont pas
   affectes, ils gardent les valeurs de base ci-dessus. */
@media (min-width: 981px){
  .grid-logements{grid-template-columns:repeat(4,1fr);gap:20px;}
  .carte-img{height:160px;}
  .carte-body{padding:14px 16px 18px;}
  .carte-quartier{font-size:11px;}
  .carte-body h3{font-size:16px;margin:4px 0 8px;}
  .carte-infos{gap:10px;font-size:12px;margin-bottom:10px;}
  .carte-footer{padding-top:10px;}
  .carte-prix{font-size:16px;}
}

/* ---------- Pourquoi nous / Confiance ----------
   Section rendue plus compacte en hauteur (padding de section, entete et
   cartes reduits) : le contenu (4 avantages courts) n'a pas besoin d'autant
   d'air que les autres sections (grille de logements, etc.). */
.section-alt{background:var(--ivoire-fonce);padding:26px 0;}
.section-alt .section-head{margin-bottom:16px;}
.atouts{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.atout{text-align:center;padding:14px 18px;}
.atout-icone{
  width:56px;height:56px;border-radius:50%;background:var(--indigo);color:var(--ivoire);
  display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-size:22px;
}
.atout h4{font-size:16px;margin-bottom:8px;}
.atout p{font-size:14px;color:#5B564C;margin:0;}

/* ---------- Villes ---------- */
.villes-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:56px;}
.ville-carte{
  position:relative;border-radius:var(--radius);overflow:hidden;height:340px;
  display:flex;align-items:flex-end;padding:30px;color:var(--blanc);
}
.ville-carte::before{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(22,35,63,0.15),rgba(22,35,63,0.82));z-index:0;}
.ville-carte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;}
.ville-carte-content{position:relative;z-index:1;}
.ville-carte h3{color:var(--blanc);font-size:26px;}
.ville-carte p{color:#E7E1D3;margin:6px 0 16px;}

/* ---------- Footer ---------- */
.site-footer{background:var(--indigo);color:#D7DAE4;padding:64px 0 28px;margin-top:60px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:40px;margin-bottom:40px;}
.footer-logo{font-family:'Fraunces',serif;font-size:22px;color:var(--blanc);margin-bottom:14px;}
.footer-logo span{color:var(--or);}
/* ---------- Reseaux sociaux (footer) ---------- */
.footer-social{display:flex;gap:12px;margin-top:2px;}
.footer-social-btn{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.16);
  color:var(--ivoire);
  display:flex;align-items:center;justify-content:center;
  transition:background .22s, border-color .22s, color .22s, transform .22s;
}
.footer-social-btn:hover{
  background:var(--or);border-color:var(--or);
  transform:translateY(-3px);
}
/* Priorite sur la regle generale ".site-footer a:hover{color:var(--or);}"
   (plus specifique a cause du selecteur "a" + 2 classes) qui sinon rendrait
   l'icone (currentColor) doree sur un fond dore au survol, donc invisible. */
.site-footer .footer-social-btn:hover{color:var(--indigo);}
.site-footer h5{color:var(--blanc);font-size:14px;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px;}
.site-footer ul{list-style:none;padding:0;margin:0;}
.site-footer li{margin-bottom:10px;font-size:14px;}
.site-footer a:hover{color:var(--or);}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.12);padding-top:22px;font-size:13px;
  display:flex;justify-content:center;text-align:center;color:#9AA1B8;flex-wrap:wrap;gap:10px;}

/* ---------- Page detail appartement ---------- */
/* ---------- Galerie photo mosaique ----------
   Disposition "hero + grille 2x2", comme sur les meilleures plateformes de
   location (Airbnb, Booking...) : grande photo principale a gauche (colonne
   1, sur toute la hauteur), 4 vignettes en grille 2x2 a droite (colonnes 2-3,
   2 lignes) - au lieu d'un simple empilement vertical, qui donnait des
   vignettes trop etroites et un rendu moins qualitatif. */
.galerie-photos{
  /* margin-top compense le header fixe (.site-header, ~85px) : la galerie
     est desormais le tout premier element de la page (fil d'ariane retire). */
  margin-top:100px;
  display:grid;grid-template-columns:1.6fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:6px;
  height:460px;border-radius:var(--radius);overflow:hidden;
  position:relative;margin-bottom:36px;background:#E7E1D3;
}
/* Quand il n'y a qu'une seule photo (data-count="1"), la grille passe aussi
   en 1 seule ligne (et pas seulement 1 seule colonne) : sinon la 2e ligne
   (héritée de grid-template-rows:1fr 1fr) restait vide et affichait la
   couleur de fond du cadre sous la photo au lieu d'etre occupee par elle. */
.galerie-photos[data-count="1"]{grid-template-columns:1fr;grid-template-rows:1fr;}
/* Cas "2 photos" : avec la disposition standard (pensee pour 5 photos), la
   seule vignette restante se retrouvait minuscule dans un coin, entouree de
   3 cases vides (fond beige visible). On bascule alors sur 2 colonnes egales
   pleine hauteur : chaque photo occupe la moitie du cadre, sans case vide. */
.galerie-photos[data-count="2"]{grid-template-columns:1fr 1fr;grid-template-rows:1fr;}
.galerie-photos[data-count="2"] .galerie-principale{grid-column:1;grid-row:1;}
.galerie-principale{grid-column:1;grid-row:1/3;padding:0;border:none;cursor:pointer;overflow:hidden;background:none;display:block;min-width:0;min-height:0;}
.galerie-photos[data-count="1"] .galerie-principale{grid-column:1;grid-row:1;}
.galerie-principale img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1);display:block;}
.galerie-principale:hover img{transform:scale(1.045);}
/* Les 4 vignettes deviennent des enfants directs de la grille parente
   (display:contents neutralise .galerie-side comme conteneur de mise en
   page) : le placement automatique de la grille les range alors dans les
   2 colonnes x 2 lignes restantes, dans l'ordre naturel du DOM. */
.galerie-side{display:contents;}
.galerie-mini{padding:0;border:none;cursor:pointer;overflow:hidden;position:relative;background:none;
  display:block;min-height:0;min-width:0;}
.galerie-mini img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1);display:block;}
.galerie-mini::after{content:'';position:absolute;inset:0;background:rgba(22,35,63,0);transition:background .25s;}
.galerie-mini:hover::after{background:rgba(22,35,63,0.07);}
.galerie-mini:hover img{transform:scale(1.06);}
.galerie-plus{
  position:absolute;inset:0;background:rgba(22,35,63,0.62);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-weight:600;font-size:18px;
}
.galerie-voir-tout{
  position:absolute;right:16px;bottom:16px;background:var(--blanc);color:var(--indigo);border:none;
  padding:10px 18px;border-radius:30px;font-weight:600;font-size:13.5px;
  display:flex;align-items:center;gap:8px;cursor:pointer;transition:.2s;
  box-shadow:0 6px 18px rgba(22,35,63,0.22);
}
.galerie-voir-tout:hover{background:var(--indigo);color:var(--blanc);transform:translateY(-1px);}

/* ---------- Mosaique photo plus compacte en desktop uniquement ----------
   Reduit a la fois la hauteur et la largeur du cadre (.galerie-photos) au-dela
   de 980px, en le centrant (au lieu de prendre toute la largeur du container).
   Mobile/tablette (media queries plus bas) ne sont pas affectes. */
@media (min-width: 981px){
  .galerie-photos{height:340px;max-width:760px;margin-left:auto;margin-right:auto;}
}

/* ---------- Lightbox plein ecran ---------- */
.lightbox{
  position:fixed;inset:0;background:rgba(15,17,26,0.95);z-index:200;
  display:none;align-items:center;justify-content:center;padding:32px;
}
.lightbox.ouvert{display:flex;}
.lightbox img{max-width:88vw;max-height:82vh;object-fit:contain;border-radius:10px;
  box-shadow:0 24px 60px rgba(0,0,0,0.55);}
/* Zoom au clic (desktop) / au tap (mobile) sur la photo en plein ecran :
   un clic zoome (centre sur le point clique), un second clic dezoome.
   Zoomee, l'image se deplace (pan) au clic-glisse / au doigt. */
#lightboxImg{
  cursor:zoom-in;
  -webkit-user-drag:none;user-select:none;-webkit-user-select:none;
  touch-action:none;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
#lightboxImg.zoome{cursor:zoom-out;}
#lightboxImg.zoome.deplacement{cursor:grabbing;transition:none;}
.lightbox-fermer{
  position:absolute;top:22px;right:26px;background:rgba(255,255,255,0.1);border:none;color:#fff;
  font-size:22px;width:44px;height:44px;border-radius:50%;cursor:pointer;line-height:1;transition:.2s;
}
.lightbox-fermer:hover{background:rgba(255,255,255,0.22);}
.lightbox-prec,.lightbox-suiv{
  position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.1);
  border:none;color:#fff;font-size:26px;width:50px;height:50px;border-radius:50%;cursor:pointer;
  transition:.2s;display:flex;align-items:center;justify-content:center;
}
.lightbox-prec:hover,.lightbox-suiv:hover{background:rgba(255,255,255,0.22);}
.lightbox-prec{left:20px;}
.lightbox-suiv{right:20px;}
.lightbox-compteur{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:#fff;
  font-size:13px;background:rgba(255,255,255,0.12);padding:6px 16px;border-radius:20px;letter-spacing:.3px;
}

.detail-layout{display:grid;grid-template-columns:1.7fr 1fr;gap:48px;align-items:start;}
.detail-titre-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px;flex-wrap:wrap;gap:10px;}
.detail-quartier{color:var(--emeraude);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.5px;}
.detail-carac{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:32px;row-gap:22px;margin:22px 0 30px;padding:24px 0;
  border-top:1px solid #ECE6D8;border-bottom:1px solid #ECE6D8;}
.detail-carac div{font-size:14px;color:#4A463F;}
.detail-carac strong{display:block;color:var(--indigo);font-family:'Fraunces',serif;font-size:20px;}
.equip-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;margin-top:18px;}
.equip-item{font-size:14.5px;color:#4A463F;display:flex;align-items:center;gap:10px;}
.equip-item::before{content:'✓';color:var(--emeraude);font-weight:700;}

/* ---------- Localisation GPS (fiche appartement) ---------- */
.equip-grid + h3{margin-top:40px;}
.loc-carte-wrap{margin-top:18px;}
.loc-carte{
  position:relative;z-index:0;isolation:isolate;
  width:100%;height:320px;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--ombre-legere);background:var(--ivoire-fonce);
  border:1px solid #ECE6D8;
}
.loc-carte .leaflet-container{font-family:'Inter',system-ui,sans-serif;border-radius:var(--radius);}
.loc-marqueur{
  width:34px;height:34px;border-radius:50% 50% 50% 0;background:var(--laterite);
  transform:rotate(-45deg);box-shadow:0 4px 12px rgba(193,80,46,0.45);
  display:flex;align-items:center;justify-content:center;border:2px solid var(--blanc);
}
.loc-marqueur svg{transform:rotate(45deg);}
.loc-popup{font-family:'Inter',system-ui,sans-serif;font-weight:600;color:var(--indigo);font-size:13.5px;}
/* Etiquette permanente des lieux celebres (voir LIEUX_CONNUS dans main.js) :
   garde le style Leaflet par defaut (boite blanche + petite fleche), avec un
   liseret dore pour la distinguer visuellement du popup de l'appartement. */
.leaflet-tooltip.loc-tooltip-lieu{
  font-family:'Inter',system-ui,sans-serif;font-size:11px;font-weight:600;
  color:var(--indigo);border:1.5px solid #B98B2A;padding:2px 7px;
}
.loc-info{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:16px;
}
.loc-adresse{display:flex;align-items:center;gap:10px;color:#4A463F;font-size:14px;}
.loc-adresse svg{color:var(--laterite);flex-shrink:0;}
.loc-btn-itineraire{display:inline-flex;align-items:center;gap:9px;padding:11px 22px;font-size:14px;white-space:nowrap;}

@media (max-width: 640px){
  .loc-carte{height:240px;}
  .loc-info{flex-direction:column;align-items:flex-start;}
  .loc-btn-itineraire{width:100%;text-align:center;justify-content:center;}
}

/* ---------- Carte reservation (sticky) ---------- */
.carte-resa{
  position:sticky;top:110px;background:var(--blanc);border-radius:var(--radius);
  box-shadow:var(--ombre);padding:28px;
}
.carte-resa .carte-prix{font-size:24px;}
.carte-resa hr{border:none;border-top:1px solid #ECE6D8;margin:18px 0;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;}
.form-row-4{grid-template-columns:repeat(4,1fr);}
.form-row-3{grid-template-columns:repeat(3,1fr);}
.form-group{margin-bottom:14px;}
.form-group label{display:block;font-size:12.5px;font-weight:700;color:var(--indigo);
  margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px;}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:11px 13px;border:1px solid #DCD5C4;border-radius:8px;
  font-family:inherit;font-size:14.5px;background:var(--ivoire);
}
.form-group textarea{resize:vertical;min-height:90px;}
/* ---------- Conditions generales (fiche appartement, formulaire de reservation) ---------- */
.cgv-box{
  background:var(--ivoire);border:1px solid #DCD5C4;border-radius:10px;
  padding:14px 16px;max-height:170px;overflow-y:auto;
  font-size:12.5px;line-height:1.6;color:#5B564C;
  scrollbar-width:thin;scrollbar-color:var(--indigo) transparent;
}
.cgv-box p{margin:0 0 10px;}
.cgv-box p:last-child{margin-bottom:0;}
.cgv-box strong{color:var(--indigo);}
.cgv-box::-webkit-scrollbar{width:7px;}
.cgv-box::-webkit-scrollbar-track{background:transparent;}
.cgv-box::-webkit-scrollbar-thumb{background:var(--indigo);border-radius:10px;}
label.cgv-checkbox{
  display:flex;align-items:flex-start;gap:10px;margin-top:12px;cursor:pointer;
  font-size:13px;font-weight:500;color:var(--charbon);text-transform:none;letter-spacing:normal;
}
.cgv-checkbox input{
  width:18px;height:18px;margin-top:1px;flex-shrink:0;cursor:pointer;accent-color:var(--emeraude);
}
.recap-ligne{display:flex;justify-content:space-between;font-size:14px;color:#4A463F;margin-bottom:8px;}
.recap-ligne-bordeaux{color:var(--bordeaux);font-weight:700;font-size:15px;}
.recap-ligne-vert{color:var(--emeraude);font-weight:700;font-size:15px;}
.recap-ligne-bleu{color:var(--indigo);font-weight:700;font-size:15px;}
.recap-ligne-blanc{background:var(--indigo);color:var(--blanc);font-weight:700;font-size:15px;padding:10px 14px;border-radius:8px;}
.recap-total{display:flex;justify-content:space-between;font-family:'Fraunces',serif;
  font-size:19px;color:var(--indigo);font-weight:600;margin-top:12px;padding-top:12px;border-top:1px solid #ECE6D8;}

/* ---------- Paiement ---------- */
.options-paiement{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0;}
.option-paiement{
  border:2px solid #DCD5C4;border-radius:var(--radius);padding:22px 16px;text-align:center;
  cursor:pointer;transition:.2s;background:var(--blanc);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
}
.option-paiement:hover{border-color:var(--or);}
.option-paiement.selected{border-color:var(--laterite);background:#FBF1EC;}
.option-paiement img{height:76px;width:auto;max-width:100%;margin:0;object-fit:contain;border-radius:8px;}
.option-paiement span{font-weight:600;font-size:14px;color:var(--indigo);white-space:nowrap;}
.alert-info{background:#EAF3EF;border-left:4px solid var(--emeraude);padding:16px 20px;
  border-radius:8px;font-size:14px;color:#1F4235;margin-bottom:22px;}
.alert-success{background:#EAF3EF;border-left:4px solid var(--emeraude);padding:22px 26px;
  border-radius:10px;}

/* Badge "code de reservation" cliquable (confirmation.php) : mis en relief
   (fond blanc, bordure en pointilles, police monospace) pour bien le
   distinguer du reste du texte et signaler qu'il est copiable au clic. */
.code-reservation{
  display:inline-flex;align-items:center;gap:8px;vertical-align:middle;
  background:var(--blanc);border:1.5px dashed var(--emeraude);border-radius:8px;
  padding:6px 12px;margin:0 2px;cursor:pointer;
  font-family:'Inter',monospace;font-size:15px;font-weight:700;letter-spacing:.5px;
  color:var(--emeraude);transition:background .18s,transform .12s,border-color .18s;
}
.code-reservation:hover{background:#EAF3EF;border-style:solid;}
.code-reservation:active,
.code-reservation.copie{transform:scale(.96);background:#DCEEE6;}
.code-reservation svg{flex:0 0 auto;opacity:.75;}

/* Toast generique (afficherToast() dans main.js), reutilisable pour tout
   message de confirmation ephemere ailleurs sur le site. */
.toast-confirmation{
  position:fixed;left:50%;bottom:28px;z-index:1200;
  transform:translate(-50%,14px);opacity:0;
  background:var(--indigo);color:#fff;font-family:'Inter',sans-serif;
  font-size:14px;font-weight:600;white-space:nowrap;
  padding:12px 22px;border-radius:30px;box-shadow:0 8px 24px rgba(0,0,0,.22);
  transition:opacity .25s ease,transform .25s ease;
  pointer-events:none;
}
.toast-confirmation.visible{opacity:1;transform:translate(-50%,0);}
@media (max-width:520px){
  .toast-confirmation{white-space:normal;text-align:center;max-width:86vw;bottom:20px;}
}
.page-etroite{max-width:640px;margin:0 auto;}
.page-etroite .section-head{text-align:left;margin-bottom:28px;}
.actions-boutons{display:flex;gap:16px;flex-wrap:wrap;}

/* ---------- Boite generique / formulaires pleine page ---------- */
.boite{background:var(--blanc);border-radius:var(--radius);box-shadow:var(--ombre-legere);padding:36px;}

/* ---------- Admin ---------- */
.admin-shell{display:flex;min-height:100vh;}
/* Sidebar admin en position:fixed (vraie navbar fixe, pas juste sticky) :
   reste clouee a l'ecran quel que soit le defilement de .admin-main. */
.admin-side{width:230px;background:var(--indigo);color:var(--ivoire);padding:26px 20px;flex-shrink:0;position:fixed;top:0;left:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;z-index:60;}
.admin-side .logo{color:var(--ivoire);}
.admin-side .admin-logo{
  font-size:13px;letter-spacing:-0.2px;white-space:nowrap;
  display:flex;align-items:center;gap:7px;
  margin-bottom:0;overflow:hidden;
}
.admin-logo-icone{width:22px;height:22px;border-radius:6px;object-fit:contain;flex-shrink:0;background:#000;}
.admin-side-backdrop{
  display:none;position:fixed;inset:0;background:rgba(22,35,63,0.45);z-index:75;
  opacity:0;transition:opacity .25s;
}
.admin-side-backdrop.visible{display:block;opacity:1;}
.admin-side nav{margin-top:36px;display:flex;flex-direction:column;gap:6px;flex:1;}
.admin-side nav a{padding:10px 12px;border-radius:8px;font-size:14.5px;font-weight:500;display:flex;align-items:center;gap:8px;}
.admin-side nav a:hover, .admin-side nav a.active{background:rgba(255,255,255,0.1);}
/* Lien "Voir le site" mis en avant en vert elegant (sur la base de
   --emeraude), meme logique visuelle que .admin-side-actualiser : se
   distingue nettement des autres liens de nav (Tableau de bord,
   Reservations, etc.) qui restent neutres/blancs. */
.admin-side-voir-site{
  background:rgba(41,163,120,0.16);color:#6FE3B9!important;
  border:1px solid rgba(111,227,185,0.35);
  font-weight:600!important;letter-spacing:.1px;
  transition:background .2s, border-color .2s, color .2s, transform .2s;
}
.admin-side-voir-site svg{flex-shrink:0;}
.admin-side-voir-site:hover{
  background:rgba(41,163,120,0.3);border-color:rgba(111,227,185,0.55);
  color:#8CF0CB!important;transform:translateX(2px);
}
.admin-side-actualiser{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:10px 12px;margin-top:2px;border-radius:8px;
  font-family:inherit;font-size:14.5px;font-weight:600;letter-spacing:.1px;
  background:rgba(41,163,120,0.16);color:#6FE3B9;
  border:1px solid rgba(111,227,185,0.3);
  cursor:pointer;transition:background .2s, border-color .2s, transform .2s;
}
.admin-side-actualiser svg{flex-shrink:0;transition:transform .4s;}
.admin-side-actualiser:hover{background:rgba(41,163,120,0.28);border-color:rgba(111,227,185,0.5);}
.admin-side-actualiser:active svg{transform:rotate(180deg);}
.admin-side nav a.admin-side-deconnexion{
  margin-top:auto;
  display:flex;align-items:center;gap:9px;
  padding:10px 12px;border-radius:8px;
  font-size:14.5px;font-weight:600;letter-spacing:.1px;
  background:rgba(193,80,46,0.14);color:#E8967B;
  border:1px solid rgba(193,80,46,0.3);
  transition:background .2s, border-color .2s, color .2s;
}
.admin-side nav a.admin-side-deconnexion:hover{
  background:rgba(193,80,46,0.26);border-color:rgba(193,80,46,0.5);color:#F2AF9A;
}
.badge-notif{
  margin-left:auto;
  min-width:18px;height:18px;padding:0 5px;
  background:var(--laterite);color:#fff;
  font-size:11px;font-weight:700;line-height:18px;text-align:center;
  border-radius:999px;
  animation:badgeNotifPop .25s ease;
  flex-shrink:0;
}
@keyframes badgeNotifPop{from{transform:scale(0.4);opacity:0;}to{transform:scale(1);opacity:1;}}
/* padding-top = 36px (espacement d'origine) + hauteur reelle du topbar
   desormais fixed (variable --admin-topbar-h calculee par le JS
   initOmbreTopbarAdmin, avec une valeur de secours avant son 1er calcul). */
.admin-main{flex:1;padding:calc(36px + var(--admin-topbar-h, 130px)) 40px 36px;background:var(--ivoire);min-width:0;margin-left:230px;}
.admin-topbar{display:flex;flex-direction:column;gap:16px;margin-bottom:30px;padding:16px 0;}
.admin-topbar-ligne{display:flex;justify-content:space-between;align-items:center;}
.section-toolbar{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  margin:8px 0 18px;
}
.section-toolbar .btn{flex-shrink:0;width:auto;}
.admin-topbar-sousligne{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  padding-top:16px;border-top:1px solid rgba(255,255,255,0.15);
}
.admin-main > .admin-topbar:first-child{
  position:fixed;top:0;left:230px;right:0;z-index:40;background:var(--indigo);
  padding-top:20px;padding-bottom:16px;
  padding-left:40px;padding-right:40px;
  margin:0;
  transition:box-shadow .2s, left .25s;
}
.admin-main > .admin-topbar:first-child.admin-topbar-colle{
  box-shadow:0 6px 14px -6px rgba(22,35,63,0.4);
}
.admin-topbar-titre{font-family:'Fraunces',serif;font-size:24px;color:var(--ivoire);margin:0;}
.admin-topbar-salutation{font-size:14px;color:rgba(246,241,232,0.72);}
.salutation-nom{color:var(--ivoire);font-weight:600;letter-spacing:.2px;}
#adminBurger{color:var(--or);font-size:26px;line-height:1;}
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin-bottom:32px;}
.stat-card{background:var(--blanc);border-radius:12px;padding:16px;box-shadow:var(--ombre-legere);}
.stat-card .val{font-family:'Fraunces',serif;font-size:22px;color:var(--indigo);font-weight:600;}
.stat-card .lab{font-size:11.5px;color:#6B665A;margin-top:4px;}
.stat-card-confirmee{background:#E1F0E9;border:1px solid rgba(31,92,74,0.22);box-shadow:none;}
.stat-card-confirmee .val{color:var(--emeraude);}
.stat-card-annulee{background:#FBE3DD;border:1px solid rgba(165,64,31,0.22);box-shadow:none;}
.stat-card-annulee .val{color:var(--laterite-fonce);}
.stat-card-archivee{background:#E9EAEE;border:1px solid rgba(35,54,87,0.18);box-shadow:none;}
.stat-card-archivee .val{color:var(--indigo-clair);}
table.tbl{width:100%;border-collapse:collapse;background:var(--blanc);border-radius:12px;overflow:hidden;box-shadow:var(--ombre-legere);}
table.tbl th{background:var(--ivoire-fonce);text-align:center;padding:12px 16px;font-size:12.5px;
  text-transform:uppercase;letter-spacing:.5px;color:var(--indigo);}
table.tbl td{padding:13px 16px;font-size:14px;border-top:1px solid #ECE6D8;text-align:center;}
/* Titre/Client/Logement : le nom du logement ou du client peut etre plus
   long qu'un statut ou un prix - centre, un texte de 2-3 lignes devient
   difficile a lire (chaque ligne recentree independamment). On le garde
   aligne a gauche, comme un intitule de fiche, tout en gardant les colonnes
   courtes (statut, prix, code, boutons) centrees comme le reste. */
table.tbl th.col-texte-long,
table.tbl td.col-texte-long{text-align:left;}
.pill{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:700;white-space:nowrap;display:inline-block;}
.pill-attente{background:#FCEFD9;color:#9A6A00;}
.pill-bleu{background:#E4E8F2;color:var(--indigo);}
.pill-confirmee{background:#E1F0E9;color:var(--emeraude);}
.pill-annulee{background:#FBE3DD;color:var(--laterite-fonce);}
.pill-archivee{background:#E9EAEE;color:var(--indigo-clair);}
.boite-annulee{opacity:0.55;filter:grayscale(70%);}
.boite-annulee .pill{opacity:1;filter:none;}

/* ---------- Pulsation douce du badge de statut sur suivi.php ----------
   Sur la page de suivi client, le badge "en attente" ou "confirmee" grossit
   tres legerement (scale 1 -> 1.06) pour attirer l'oeil sans etre agressif,
   en boucle continue tant que la reservation reste dans cet etat. */
@keyframes pulsationBadgeSuivi{
  0%, 100%{ transform:scale(1); }
  50%{ transform:scale(1.06); }
}
.pill-oscillant{
  animation:pulsationBadgeSuivi 1.8s ease-in-out infinite;
  transform-origin:center;
}
table.tbl tbody tr{transition:background-color 0.6s ease;}
table.tbl tbody tr.ligne-nouvelle{background-color:#D9F0E0;}
table.tbl tbody tr.ligne-nouvelle td{border-top-color:#BEE3CB;}

/* ---------- Scintillement vert d'une ligne de tableau admin (ex : logement
   qui vient d'etre enregistre - voir admin/appartements.php) ----------
   Meme principe que .scintille-suivi (hero public), decline en vert clair
   sur --emeraude pour un contexte "succes" admin : 3 pulsations douces de
   fond sur la ligne concernee, qui retrouve son etat normal ensuite sans
   rien laisser clignoter indefiniment. */
@keyframes scintillementLigneVerte{
  0%, 100%{ background-color:transparent; }
  50%{ background-color:#B9E3CC; }
}
table.tbl tbody tr.ligne-scintille-verte{
  animation:scintillementLigneVerte 1s ease-in-out 3;
}
table.tbl tbody tr.ligne-scintille-verte td{
  border-top-color:#8FD1AC;
}

/* ---------- Tableaux admin responsive (colonnes cachees + bouton Voir) ----------
   Sur les tableaux marques .tbl-responsive, certaines colonnes secondaires
   (classe .col-hide-mobile) disparaissent sous 640px et une colonne "Voir"
   (.col-voir-mobile, masquee par defaut) apparait a la place, avec un bouton
   qui ouvre un modal recapitulant le detail complet de la ligne. */
table.tbl .col-voir-mobile{display:none;}

/* ---------- Filet de securite anti-debordement pour les tableaux admin ----------
   Le systeme de colonnes cachees (.tbl-responsive / .col-hide-mobile /
   .col-voir-mobile ci-dessus) ne s'active qu'en dessous de 640px. Entre 640px
   et 980px (tablette, telephone en paysage, fenetre de navigateur redimensionnee
   a la main), le tableau garde toutes ses colonnes et peut deborder du cadre
   (.admin-main), ce qui pousse toute la page en scroll horizontal - visible et
   genant, notamment sur "Appartements" ou la colonne Actions (2 boutons) et
   plusieurs colonnes texte s'additionnent. On enveloppe donc le tableau dans un
   conteneur qui absorbe lui-meme le depassement (scroll horizontal localise au
   tableau) au lieu de laisser deborder toute la page, quelle que soit la largeur
   d'ecran ou le contenu. */
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table-scroll table.tbl{margin:0;}

/* ---------- Variante "texte reduit" pour un tableau admin donne ----------
   Ajoutee sur admin/appartements.php (table.tbl.tbl-responsive.tbl-compact) :
   la fiche logement affiche pas mal de contenu par ligne (reference, titre,
   ville/quartier, prix, statut, boutons Modifier/Desactiver), donc on reduit
   un peu la taille de tous les textes de ce tableau specifiquement, sans
   toucher aux autres tableaux admin (dashboard, reservations) qui gardent
   leurs tailles habituelles. */
table.tbl.tbl-compact th{font-size:11.5px;}
table.tbl.tbl-compact td{font-size:12.5px;}
table.tbl.tbl-compact .pill{font-size:11px;padding:3px 10px;}
table.tbl.tbl-compact .btn{font-size:11px;}
@media (max-width:640px){
  table.tbl.tbl-responsive.tbl-compact th,
  table.tbl.tbl-responsive.tbl-compact td{font-size:10.5px;}
  table.tbl.tbl-compact .pill{font-size:10px;padding:2px 9px;}
  table.tbl.tbl-compact .btn{font-size:10px;padding:5px 10px;}
}

/* ---------- Fiche reservation (modale) ---------- */
.resa-modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(22,35,63,0.55);
  align-items:center;justify-content:center;padding:24px;z-index:200;
}
.resa-modal-overlay.open{display:flex;}
.resa-modal{
  background:var(--blanc);border-radius:var(--radius);box-shadow:var(--ombre);
  width:100%;max-width:460px;position:relative;
  max-height:90vh;display:flex;flex-direction:column;overflow:hidden;
}
.resa-modal-header-sticky{
  flex:0 0 auto;background:var(--blanc);
  padding:28px 34px 14px;
  border-bottom:1px solid #ECE6D8;
}
.resa-modal-header-sticky .resa-modal-top{margin-bottom:10px;}
.resa-modal-header-sticky h3,
.resa-modal-header-sticky #mLogementDetail{margin-bottom:0 !important;}
.resa-modal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.resa-modal-code{font-family:'Fraunces',serif;font-weight:600;font-size:15px;color:var(--indigo);letter-spacing:.3px;}
.resa-modal-body{
  flex:1 1 auto;overflow-y:auto;padding:20px 34px;
  scrollbar-width:thin;scrollbar-color:var(--indigo) transparent;
}
.resa-modal-body::-webkit-scrollbar{width:7px;}
.resa-modal-body::-webkit-scrollbar-track{background:transparent;}
.resa-modal-body::-webkit-scrollbar-thumb{background:var(--indigo);border-radius:10px;}
.resa-modal-body::-webkit-scrollbar-thumb:hover{background:var(--indigo-clair);}
.resa-modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 14px;}
.resa-modal-field{
  background:#F6F6F4;border:1px solid #E8E7E3;border-radius:10px;
  padding:12px 14px;transition:box-shadow .2s;
}
.resa-modal-field:hover{box-shadow:var(--ombre-legere);}
.resa-modal-field div{font-size:14.5px;color:var(--charbon);}
.resa-modal-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--indigo-clair);font-weight:600;margin-bottom:6px;}
/* Champ "Contact" de la modale reservation (admin/reservations.php) :
   numero/email a gauche, bouton d'appel telephonique circulaire a droite. */
.resa-modal-contact-ligne{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.btn-appel-modal{
  flex:0 0 auto;width:36px;height:36px;border-radius:50%;
  background:var(--indigo);display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(26,42,66,.25);
  transition:background .2s,transform .2s,box-shadow .2s;
}
.btn-appel-modal:hover{background:var(--indigo-clair);transform:scale(1.07);box-shadow:0 4px 10px rgba(26,42,66,.3);}
.btn-appel-modal:active{transform:scale(.96);}
.resa-modal-actions{
  flex:0 0 auto;display:flex;gap:10px;justify-content:flex-end;border-top:1px solid #ECE6D8;
  background:var(--blanc);padding:20px 34px 28px;
}
/* Regroupe "Modifier" + "Desactiver/Reactiver" (modal "Voir" d'un logement,
   admin/appartements.php) pour qu'ils restent toujours cote a cote, quelle
   que soit la largeur d'ecran - le detail mobile (taille, espacement) est
   affine plus bas dans le media query 520px. */
.resa-modal-actions-pair{display:flex;align-items:center;gap:14px;}
/* Regroupe "Confirmer" + "Annuler" (modal "Voir" d'une reservation,
   admin/reservations.php) pour qu'ils restent toujours cote a cote, quelle
   que soit la largeur d'ecran - l'espacement mobile est affine plus bas
   dans le media query 520px. */
.resa-modal-actions-row{display:flex;align-items:center;gap:14px;}
/* Modal "Voir" d'une reservation (admin/reservations.php) : les boutons de
   pied de modale qui n'appartiennent pas a .resa-modal-actions-row
   ("Valider le paiement restant", "Exporter", "Fermer") restaient a la
   taille .btn standard (14px/30px) des le desktop, disproportionnes par
   rapport au reste de la fiche - on les uniformise ici en plus compact
   (le media query 520px applique une reduction supplementaire par-dessus). */
#mValiderRestantForm .btn,
#mExporterBtn,
#resaModalCloseBtn{padding:10px 20px;font-size:13px;}
/* ---------- Modale "simple" (ex : confirmation par mot de passe) ----------
   Contrairement a la grande modale de detail (qui utilise des blocs
   .resa-modal-header-sticky / .resa-modal-body deja paddes), cette modale
   place son contenu (titre, texte, champ) directement dans .resa-modal, qui
   n'a lui-meme aucun padding. Le contenu se retrouvait donc colle aux bords
   arrondis de la boite - visible sur desktop mais surtout casse sur mobile
   ou la modale est etroite. On ajoute ici le padding qui manquait. */
.resa-modal-simple{padding:28px 30px 26px;}
.resa-modal-simple .resa-modal-actions{
  padding:18px 0 0;border-top:none;background:transparent;flex-wrap:wrap;
}
@media (max-width:520px){
  .resa-modal-simple{padding:22px 20px 20px;}
}
.paiement-choix{display:flex;flex-wrap:wrap;gap:14px;}
.paiement-case{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--charbon);cursor:pointer;}
.paiement-case input{width:16px;height:16px;cursor:pointer;accent-color:var(--emeraude);}
.btn:disabled{opacity:0.4;cursor:not-allowed;background:#B8B4A8;color:var(--blanc);transform:none;}
@media (max-width:520px){
  .resa-modal-header-sticky{padding:22px 22px 14px;}
  .resa-modal-body{padding:16px 22px;}
  .resa-modal-grid{grid-template-columns:1fr;}
  .resa-modal-actions{padding:16px 22px 22px;flex-direction:column;align-items:center;}
  .resa-modal-actions form, .resa-modal-actions button{width:fit-content;}
  /* Modal "Voir" d'un logement (admin/appartements.php) : "Modifier" et
     "Desactiver/Reactiver" doivent rester cote a cote sur une meme ligne
     (pas empiles comme les autres boutons de cette modale), en plus petit. */
  .resa-modal-actions-pair{display:flex;align-items:center;gap:18px;width:fit-content;}
  .resa-modal-actions-pair .btn-action-compact{padding:7px 12px;font-size:11px;}
  /* Modal "Voir" d'une reservation (admin/reservations.php) : "Confirmer" et
     "Annuler" restent sur la meme ligne mais bien ecartes l'un de l'autre
     (justify-content:space-between sur toute la largeur disponible),
     "Fermer" (en dessous) beneficie de la meme reduction de taille. */
  .resa-modal-actions-row{width:100%;justify-content:space-between;gap:24px;}
  .resa-modal-actions-row .btn-action-compact, #resaModalCloseBtn.btn-action-compact{padding:7px 12px;font-size:11px;}
  /* Modal "Voir" d'une reservation (admin/reservations.php) : le bouton
     "Archiver" (visible quand la reservation est payee integralement ou
     annulee) n'a pas la classe .btn-action-compact comme Confirmer/Annuler,
     donc il restait a sa taille desktop sur mobile - on le reduit ici,
     ainsi que son conteneur (le form autour du bouton). */
  #mArchiverForm{width:fit-content;}
  #mArchiverForm .btn{padding:7px 12px;font-size:11px;}
  /* Modal "Voir" d'une reservation confirmee avec acompte verse
     (admin/reservations.php) : le bouton "Valider le paiement restant"
     n'a pas non plus la classe .btn-action-compact, meme souci que
     "Archiver" ci-dessus - on le reduit ici. */
  #mValiderRestantForm{width:fit-content;}
  #mValiderRestantForm .btn{padding:7px 12px;font-size:11px;}
  /* Modal "Voir" d'une reservation annulee ou archivee
     (admin/reservations.php) : le bouton "Supprimer" n'a pas non plus la
     classe .btn-action-compact, meme souci que les boutons ci-dessus. */
  #mSupprimerForm{width:fit-content;}
  #mSupprimerForm .btn{padding:7px 12px;font-size:11px;}
}

/* ============================================================
   RESPONSIVE - tablette et mobile
   ============================================================ */
@media (max-width: 980px){
  .grid-logements{grid-template-columns:repeat(2,1fr);}
  .villes-grid{grid-template-columns:1fr;}
  .atouts{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .detail-layout{grid-template-columns:1fr;}
  .carte-resa{position:static;}
  .admin-side{left:-230px;top:0;bottom:0;height:auto;transition:.25s;z-index:80;box-shadow:0 0 0 rgba(0,0,0,0);overflow:hidden;}
  .admin-side.ouvert{left:0;box-shadow:12px 0 32px rgba(22,35,63,0.28);}
  .admin-main{margin-left:0;}
  /* Sidebar hors-ecran sous 980px : le topbar fixe reprend toute la largeur. */
  .admin-main > .admin-topbar:first-child{left:0;}
  .stats-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  /* Le menu admin passe en hors-ecran des 980px : le burger doit rester
     disponible pour le rouvrir, meme si on n'est pas encore descendu a 640px
     (regle generale .burger reservee a l'entete du site public). */
  #adminBurger{display:flex;}
  .admin-topbar-ligne{flex-wrap:wrap;row-gap:10px;}
  .admin-topbar-titre{font-size:20px;order:1;flex:1 1 auto;}
  .admin-topbar-salutation{order:2;flex:1 1 100%;text-align:right;}
}

@media (max-width: 640px){
  .nav-links{
    position:fixed;top:70px;left:14px;right:14px;background:var(--blanc);
    flex-direction:column;gap:0;padding:10px;border-radius:16px;
    box-shadow:0 16px 36px rgba(22,35,63,0.18);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:.22s;z-index:40;
  }
  .nav-links.ouvert{opacity:1;visibility:visible;transform:translateY(0);}
  .nav-links li{border-bottom:1px solid #ECE6D8;}
  .nav-links li:last-child{border-bottom:none;text-align:center;padding:6px 0 2px;}
  .nav-links a{display:block;padding:13px 10px;}
  .nav-links a::after{display:none;}
  .nav-links a.btn-connexion-nav{
    display:inline-block;
    width:fit-content;
    margin:0 auto;
    padding:9px 20px!important;
  }
  .nav-links a.btn-gestion-nav{
    display:inline-flex;
    width:fit-content;
    margin:0 auto;
  }
  .burger{display:flex;}
  .header-inner{padding:12px 16px;gap:8px;}
  /* flex-shrink:1 (au lieu de 0 herite de la regle desktop) + min-width:0 :
     permet au logo de se reduire plutot que de forcer tout le header (et donc
     toute la page) a deborder horizontalement quand l'espace manque - c'etait
     la cause du decalage vers la droite observe sur petit ecran (Samsung A14). */
  /* Le texte du logo (nom du site) est masque sur mobile, seul le pictogramme
     reste visible dans la navbar - place et taille du logo inchanges par
     ailleurs. flex-shrink:1 + min-width:0 restent utiles au cas ou d'autres
     elements du header s'allongent (ex : traduction plus longue). */
  .logo{gap:8px;font-size:16.5px;flex-shrink:1;min-width:0;}
  .logo-icone{width:38px;height:38px;}
  .logo-texte{display:none;}
  /* Ne doit jamais se comprimer (switch FR/EN + bouton burger doivent rester
     pleinement lisibles/cliquables) : c'est le logo qui absorbe le manque
     de place, pas ce bloc. */
  .header-actions{gap:10px;flex-shrink:0;}
  .hero-content{padding:28px 20px;}
  .hero h1{font-size:24px;}
  .hero-actions .btn{width:100%;text-align:center;}
  .grid-logements{grid-template-columns:1fr;}
  .atouts{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;gap:28px;}
  .footer-bottom{flex-direction:column;text-align:center;}
  .section{padding:56px 0;}
  .options-paiement{grid-template-columns:1fr;}
  .form-row, .form-row-4, .form-row-3{grid-template-columns:1fr;}
  /* Mosaique conservee sur mobile (comme desktop) au lieu d'une simple
     photo pleine largeur : hauteur reduite et vignettes plus etroites pour
     s'adapter a l'ecran, mais meme disposition "grande photo + 4 vignettes". */
  .galerie-photos{height:230px;gap:4px;}
  .galerie-voir-tout{padding:8px 14px;font-size:12px;right:10px;bottom:10px;gap:6px;}
  .galerie-plus{font-size:14px;}
  .detail-carac{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:16px;}
  /* Boutons "Enregistrer / Annuler / Supprimer ce logement" du formulaire
     appartement_form.php : nettement plus petits sur mobile, le conteneur
     flex passe aussi a la ligne pour eviter tout debordement. */
  .btn-action-compact{padding:8px 14px;font-size:12px;border-radius:20px;}
  .admin-main{padding:calc(24px + var(--admin-topbar-h, 150px)) 18px 24px;}
  .admin-main > .admin-topbar:first-child{left:0;padding-left:18px;padding-right:18px;padding-top:14px;}
  .stats-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  table.tbl{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;}

  /* Tableaux admin (dashboard/reservations/appartements) : plutot que de
     forcer un scroll horizontal peu confortable au pouce, on cache les
     colonnes secondaires et on affiche un bouton "Voir" ouvrant un modal
     avec le detail complet de la ligne. */
  table.tbl.tbl-responsive{display:table;overflow-x:visible;white-space:normal;}
  table.tbl.tbl-responsive .col-hide-mobile{display:none;}
  table.tbl.tbl-responsive .col-voir-mobile{display:table-cell;}
  table.tbl.tbl-responsive th, table.tbl.tbl-responsive td{padding:9px 8px;font-size:12px;}
  /* En-tetes (Code, Client, Titre, Statut, Voir...) : toujours courts, on
     les garde sur une seule ligne. Cellules de donnees : on les laisse
     s'enrouler normalement (word-break force le retour a la ligne au
     besoin), car un titre d'appartement ou un nom de client peut etre long
     - les forcer en nowrap ferait deborder tout le tableau hors de l'ecran. */
  table.tbl.tbl-responsive th{white-space:nowrap;}
  table.tbl.tbl-responsive td{white-space:normal;word-break:break-word;overflow-wrap:anywhere;}
  /* Le bouton "Voir" (colonne .col-voir-mobile) herite du white-space:normal
     ci-dessus, ce qui le faisait parfois couper "Voir" en 2 lignes ("Voi" /
     "r") quand la cellule etait etroite. Contrairement au texte des autres
     colonnes (titre, nom client...), un libelle de bouton ne doit jamais se
     couper : on force nowrap uniquement ici. */
  table.tbl.tbl-responsive .col-voir-mobile .btn{white-space:nowrap;}
  /* IMPORTANT : pas de table-layout:fixed ici. En layout fixe, les colonnes
     masquees (.col-hide-mobile, display:none) reservent quand meme leur
     largeur (calculee sur le nombre total de <th>/<td> de la premiere
     ligne, sans tenir compte du display:none) : ca laissait un grand bloc
     vide a droite du tableau et ecrasait les colonnes visibles (Code,
     Client, Actions), qui se retrouvaient trop etroites et coupaient les
     mots au milieu. En layout auto, les colonnes cachees s'effacent
     vraiment et les colonnes visibles se partagent toute la largeur. */
  table.tbl.tbl-responsive{table-layout:auto;}

  /* Villes (Dakar/Thies) : la vignette 340px de haut est pensee pour desktop,
     trop imposante sur mobile ou elle occupe tout l'ecran sans apporter
     d'information supplementaire. */
  .ville-carte{height:200px;padding:20px;}
  .ville-carte h3{font-size:21px;}

  /* Fiche appartement : equipements sur 1 colonne, plus lisible en dessous
     de 640px (2 colonnes devient serre avec des libelles longs). */
  .equip-grid{grid-template-columns:1fr;}

  /* Carte de reservation (formulaire) : moins de padding, et surtout
     font-size 16px sur les champs pour empecher Safari/iOS de zoomer
     automatiquement au focus (comportement natif en dessous de 16px). */
  .carte-resa{padding:20px;}
  .form-group input,.form-group select,.form-group textarea{font-size:16px;}

  /* Visionneuse plein ecran : boutons plus compacts pour ne pas empieter
     sur l'image et rester confortables au pouce sur petit ecran. */
  .lightbox{padding:14px;}
  .lightbox-prec,.lightbox-suiv{width:42px;height:42px;font-size:20px;}
  .lightbox-prec{left:8px;}
  .lightbox-suiv{right:8px;}
  .lightbox-fermer{top:12px;right:14px;width:38px;height:38px;font-size:18px;}

  /* Boite generique (recap paiement, confirmation...) : moins de padding
     pour ne pas grignoter la largeur utile sur petit ecran. */
  .boite{padding:22px;}

  /* Groupes de boutons d'action (confirmation, suivi) : empiler en pleine
     largeur plutot que de laisser des boutons cote a cote se comprimer. */
  .actions-boutons{flex-direction:column;}
  .actions-boutons .btn{width:100%;text-align:center;}

  /* Lignes de recap (suivi/paiement/confirmation - "Dates", "Montant total"...) :
     desktop les affiche cote a cote (justify-content:space-between, sans
     wrap). Sur petit ecran, une valeur longue (ex : "10-07-2026 -> 13-07-2026
     (3 nuit(s))") n'a plus la place de tenir a cote de l'etiquette et venait
     la toucher directement, sans aucun espace. flex-wrap:wrap fait passer la
     valeur entierement a la ligne suivante des qu'elle ne tient plus, et le
     gap garantit un espacement correct dans les 2 cas (cote a cote ou
     empile). */
  .recap-ligne{flex-wrap:wrap;row-gap:2px;column-gap:14px;}

  /* Filtres statut (chips) admin - reservations.php : "En attente / Confirmees /
     Annulees / Archivees". Les valeurs desktop (padding 9px 18px, font 13.5px)
     prennent trop de place sur petit ecran et forcent les 4 boutons a etirer
     la mise en page ; on les rend plus compacts ici, sans retour a la ligne
     du texte a l'interieur de chaque chip. */
  .chips{gap:8px;margin-bottom:22px;}
  .chip{padding:7px 13px;font-size:11.5px;white-space:nowrap;}
  .chip-badge-neuf{min-width:16px;height:16px;font-size:9.5px;line-height:16px;top:-6px;right:-6px;}
  .chips-saut-ligne{display:block;flex-basis:100%;width:100%;height:0;}
}

/* Tres petits ecrans (ex : iPhone SE, ~360px et moins) */
@media (max-width: 400px){
  .stats-row{grid-template-columns:minmax(0,1fr);}
  .detail-carac{column-gap:12px;row-gap:12px;}
  .galerie-photos{height:220px;}
  .logo-texte{font-size:15px;}
}

/* ---------- Accessibilite ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--or);outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;}
}

/* ---------- Calendrier de reservation (flatpickr) : dates deja prises ----------
   Rouge = reservation CONFIRMEE (paiement recu). Les dates simplement en
   attente de paiement restent desactivees (non cliquables) mais sans couleur
   particuliere. Le CSS de flatpickr (charge depuis le CDN, APRES ce fichier
   dans includes/header.php) definit deja un style pour .flatpickr-disabled ;
   on utilise !important pour rester prioritaire quel que soit l'ordre de
   chargement des feuilles de style. */
.flatpickr-day.fp-jour-confirmee{
  background:var(--laterite) !important;
  border-color:var(--laterite) !important;
  color:var(--blanc) !important;
  opacity:1 !important;
  text-decoration:line-through;
}
/* Calendrier "DEPART" : met en evidence en bleu la date deja choisie dans
   le champ "ARRIVEE", pour visualiser d'un coup d'oeil le point de depart
   du sejour pendant qu'on choisit la date de fin (voir colorerJourArriveeChoisie
   dans main.js). Priorite sur .fp-jour-confirmee au cas ou (peu probable en
   pratique : le jour d'arrivee choisi n'est normalement pas une date deja
   confirmee ailleurs). */
.flatpickr-day.fp-jour-arrivee-choisie{
  background:var(--indigo) !important;
  border-color:var(--indigo) !important;
  color:var(--blanc) !important;
  opacity:1 !important;
}
/* Legende sous les calendriers (fiche appartement.php) */
.legende-calendrier{
  display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:#6B665A;margin:8px 0 4px;
}
.legende-calendrier span{display:inline-flex;align-items:center;gap:6px;}
.legende-calendrier .pastille{width:11px;height:11px;border-radius:3px;display:inline-block;}
.legende-calendrier .pastille-confirmee{background:var(--laterite);}