/* =========================================================================
   Fiche d'un logement — ordinateur
   -------------------------------------------------------------------------
   Mosaïque de photos en tête, contenu à gauche, panneau de réservation collant
   à droite. Même palette que la liste et que la version téléphone : bleu du
   logo, marine pour les valeurs, rouge pour le cœur.

   Chargée par la seule vue reservation/locationsAppDetails.php.
   ========================================================================= */

:root {
  --fid-blue: var(--yb-blue, #0d65c9);
  --fid-navy: var(--yb-navy, #0d233e);
  --fid-red:  var(--yb-red, #ce130d);
  --fid-ink:  #101828;
  --fid-body: #667085;
  --fid-line: #e7eaf0;
  --fid-page: #f6f8fb;
}

.fid { background: var(--fid-page); padding: 22px 0 70px; }

/* ---------- Mosaïque de photos ------------------------------------------- */

/* La disposition suit le nombre de tuiles, jusqu'à quatre. Au-delà, la dernière
   porte un « +N » qui ouvre la galerie complète. */
.fid-mosaique {
  display: grid; gap: 8px; margin-bottom: 26px;
  border-radius: 18px; overflow: hidden; position: relative;
}
.fid-mosaique--n1 { grid-template-columns: 1fr; }
.fid-mosaique--n2 { grid-template-columns: 1fr 1fr; }
/* Trois : une grande à gauche sur deux rangées, deux vignettes à droite. */
.fid-mosaique--n3 { grid-template-columns: 2fr 1fr; }
.fid-mosaique--n3 > a:first-child { grid-row: span 2; }
/* Quatre : un carré régulier, plus lisible qu'une grande et trois vignettes
   écrasées en colonne. */
.fid-mosaique--n4 { grid-template-columns: 1fr 1fr; }

.fid-mosaique > a { position: relative; display: block; overflow: hidden; background: #e8eaf6; }
/* style.css impose « .d-block img { min-height:260px; max-height:260px } » :
   on reprend la main pour que la mosaïque garde ses proportions. */
.fid-mosaique img {
  width: 100%; height: 100%; min-height: 0 !important; max-height: none !important;
  object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.6,.2,1);
}
.fid-mosaique > a:hover img { transform: scale(1.05); }
/* Les hauteurs sont portées par la TUILE, pas par l'image : la règle générale
   « .fid-mosaique img { height: 100% } » l'emporterait sinon. */
.fid-mosaique--n1 > a { height: 420px; }
.fid-mosaique--n2 > a { height: 320px; }
.fid-mosaique--n3 > a:first-child { height: 420px; }
.fid-mosaique--n3 > a:not(:first-child) { height: 206px; }
.fid-mosaique--n4 > a { height: 206px; }

/* Les photos au-delà de la quatrième : présentes pour la visionneuse, hors flux. */
.fid-cachee { display: none !important; }

/* Voile « +N » sur la dernière tuile. */
.fid-plus {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: rgba(16,24,40,.52);
  color: #fff; font-size: 30px; font-weight: 800; letter-spacing: -.5px;
  transition: background .15s ease;
}
.fid-tuile--plus:hover .fid-plus { background: rgba(16,24,40,.62); }

.fid-coeur {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.94); color: #98a2b3; font-size: 21px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 2px 10px rgba(16,24,40,.20);
}
.fid-coeur.is-on { color: var(--fid-red); }

/* ---------- Blocs de contenu --------------------------------------------- */

.fid-bloc {
  padding: 24px; border-radius: 16px; background: #fff;
  border: 1px solid var(--fid-line); box-shadow: 0 4px 16px rgba(16,24,40,.06);
  margin-bottom: 20px;
}
.fid-bloc__titre { margin: 0 0 16px; font-size: 19px; font-weight: 800; color: var(--fid-ink); }

.fid-puces { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.fid-puce {
  padding: 6px 14px; border-radius: 999px; background: #eef4ff;
  font-size: 12.5px; font-weight: 700; color: var(--fid-navy);
}
.fid-puce--ok { background: #ecfdf3; color: #067647; }

.fid-titre { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.6px; color: var(--fid-ink); }
.fid-lieu { margin: 8px 0 0; display: flex; align-items: center; gap: 7px; font-size: 15px; color: var(--fid-body); }

.fid-reperes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px;
  margin: 20px 0 0; padding: 0; list-style: none;
}
.fid-reperes li {
  display: flex; align-items: center; gap: 11px;
  padding: 14px; border-radius: 12px; background: #f7f9fc;
}
.fid-reperes i { font-size: 22px; color: var(--fid-blue); }
.fid-reperes strong { display: block; font-size: 18px; font-weight: 800; color: var(--fid-ink); line-height: 1.1; }
.fid-reperes span { font-size: 12px; color: var(--fid-body); }

.fid-texte { margin: 0; font-size: 15px; line-height: 1.65; color: var(--fid-body); }
.fid-alerte {
  margin: 0; padding: 13px 15px; border-radius: 11px;
  background: #fff7ed; color: #b45309; font-size: 14px; font-weight: 600;
}

.fid-equips { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.fid-equips li {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 15px; border-radius: 12px; background: #f7f9fc;
  font-size: 14px; font-weight: 600; color: var(--fid-ink);
}
.fid-equips i { font-size: 19px; color: var(--fid-blue); }

.fid-conditions { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.fid-conditions dt { font-size: 11.5px; font-weight: 700; color: var(--fid-body); }
.fid-conditions dd { margin: 3px 0 0; font-size: 15px; font-weight: 700; color: var(--fid-ink); }

/* ---------- Pièces sélectionnables --------------------------------------- */

.fid-pieces { display: grid; gap: 12px; }
.fid-piece { margin: 0; }
/* Seule la case de sélection est masquée — pas le champ de quantité, qui vit
   maintenant dans la même ligne. */
.fid-piece > input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.fid-piece__boite {
  cursor: pointer;
  display: flex; align-items: center; gap: 16px;
  padding: 12px; border-radius: 14px; border: 2px solid var(--fid-line); background: #fff;
  transition: border-color .15s ease, background .15s ease;
}
.fid-piece__img {
  flex: 0 0 118px; width: 118px; height: 92px;
  min-height: 0 !important; max-height: none !important;
  object-fit: cover; border-radius: 11px; display: block;
}
.fid-piece__txt { min-width: 0; flex: 1 1 auto; }
.fid-piece__txt strong { display: block; font-size: 16px; font-weight: 800; color: var(--fid-ink); }
.fid-piece__txt em { display: block; margin-top: 3px; font-size: 13px; font-style: normal; color: var(--fid-body); }
.fid-piece__prix { flex: 0 0 auto; text-align: right; }
.fid-piece__prix b { display: block; font-size: 19px; font-weight: 800; color: var(--fid-blue); }
.fid-piece__prix span { font-size: 12px; color: var(--fid-body); }
/* La sélection se lit au cadre ET à la pastille : la couleur seule ne suffit
   pas pour qui distingue mal les teintes. */
.fid-piece__coche {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--fid-line); background: #fff;
  display: flex; align-items: center; justify-content: center;
  color: transparent; font-size: 14px;
}
.fid-piece > input:checked + .fid-piece__boite { border-color: var(--fid-blue); background: #f7faff; }
.fid-piece > input:checked + .fid-piece__boite .fid-piece__coche {
  border-color: var(--fid-blue); background: var(--fid-blue); color: #fff;
}
.fid-piece > input:focus-visible + .fid-piece__boite { outline: 2px solid var(--fid-blue); outline-offset: 2px; }

/* Quantité, rattachée visuellement à sa ligne. */
.fid-qte {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: -2px 12px 0; padding: 11px 15px;
  border: 2px solid var(--fid-line); border-top: 0;
  border-radius: 0 0 14px 14px; background: #fbfcfe;
}
.fid-piece > input:checked ~ .fid-qte { border-color: var(--fid-blue); background: #f7faff; }
.fid-qte label { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--fid-body); }
.fid-qte input {
  flex: 0 0 88px; height: 40px; padding: 0 10px; text-align: center;
  border: 1px solid var(--fid-line); border-radius: 10px; background: #fff;
  font-size: 15.5px; font-weight: 700; color: var(--fid-ink); outline: none;
}
.fid-qte input:focus { border-color: var(--fid-blue); }
.fid-qte input:disabled { background: #f2f4f7; color: #b6bacb; }

/* ---------- Panneau de réservation --------------------------------------- */

.fid-reserv {
  position: sticky; top: 18px;
  padding: 22px; border-radius: 16px; background: #fff;
  border: 1px solid var(--fid-line); box-shadow: 0 10px 30px rgba(16,24,40,.10);
}
.fid-reserv__prix { margin: 0 0 4px; }
.fid-reserv__prix strong { font-size: 30px; font-weight: 800; color: var(--fid-blue); }
.fid-reserv__prix span { font-size: 14px; color: var(--fid-body); margin-left: 5px; }
.fid-reserv__note { margin: 0 0 18px; font-size: 13px; color: var(--fid-body); }

.fid-champ { margin-bottom: 13px; }
.fid-champ > label, .fid-duo label {
  display: block; margin: 0 0 5px; font-size: 11.5px; font-weight: 700; color: var(--fid-body);
}
.fid-champ input {
  width: 100%; height: 44px; padding: 0 12px;
  border: 1px solid var(--fid-line); border-radius: 11px; background: #fff;
  font-size: 14.5px; color: var(--fid-ink); outline: none;
}
.fid-champ input:focus { border-color: var(--fid-blue); }
.fid-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.fid-recap {
  margin: 16px 0 14px; padding: 13px 15px; border-radius: 12px; background: #f7f9fc;
  font-size: 13.5px; color: var(--fid-body);
}
.fid-recap strong { color: var(--fid-ink); }

.fid-btn {
  width: 100%; border: 0; border-radius: 12px;
  background: var(--fid-blue); color: #fff; font-size: 15.5px; font-weight: 700;
  padding: 15px 20px; cursor: pointer;
  box-shadow: 0 5px 16px rgba(37,99,235,.30);
}
.fid-btn:disabled { background: #cbd5e6; box-shadow: none; cursor: not-allowed; }

@media (max-width: 991.98px) {
  .fid-reserv { position: static; margin-top: 20px; }
  /* La mosaïque se resserre sur deux colonnes au lieu de masquer les tuiles :
     la règle précédente cachait tout sauf la première photo, y compris la tuile
     « +N », qui devenait donc inatteignable sous 992 px. */
  .fid-mosaique--n3,
  .fid-mosaique--n4 { grid-template-columns: 1fr 1fr; }
  .fid-mosaique--n3 > a:first-child { grid-row: auto; grid-column: span 2; }
  .fid-mosaique--n1 > a { height: 280px; }
  .fid-mosaique--n2 > a { height: 180px; }
  .fid-mosaique--n3 > a:first-child { height: 240px; }
  .fid-mosaique--n3 > a:not(:first-child) { height: 150px; }
  .fid-mosaique--n4 > a { height: 160px; }
}