/* notre-cabinet.css — styles spécifiques à la page "Notre cabinet" */

.section-intro-cabinet {
  max-width: 900px;
  margin: 0 auto;
  padding: 64px 24px 32px;
  text-align: center;
}

.section-intro-cabinet .sous-titre {
  font-size: 1.15rem;
  color: var(--gris-texte);
  margin-top: 12px;
}

.titre-ville {
  white-space: nowrap;
}

.section-galerie,
.section-equipe {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px;
}

.section-qui-sommes-nous {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 24px 72px;
}

.section-galerie h2,
.section-equipe h2,
.section-qui-sommes-nous h2 {
  margin-bottom: 24px;
}

.section-qui-sommes-nous p {
  margin-bottom: 16px;
  font-size: 1.05rem;
  line-height: 1.7;
}

.section-qui-sommes-nous p:last-child {
  margin-bottom: 0;
}

.tel-inline {
  color: var(--bleu-fonce);
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
}

/* ==========================================================================
   Galerie de photos du cabinet
   ========================================================================== */

.galerie-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.galerie-item {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--ombre-douce);
  cursor: pointer;
  margin: 0;
}

.galerie-item .galerie-media {
  width: 100%;
  height: 100%;
}

.galerie-item .placeholder-photo {
  min-height: 0;
  height: 100%;
  border-radius: 0;
}

.galerie-item img.galerie-media {
  display: block;
  object-fit: cover;
}

.galerie-legende {
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(20, 24, 29, 0) 0%, rgba(20, 24, 29, 0.72) 100%);
  color: var(--blanc);
  font-family: var(--font-titres);
  font-weight: 600;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.galerie-item:hover .galerie-legende,
.galerie-item:focus-visible .galerie-legende {
  opacity: 1;
  transform: translateY(0);
}

.galerie-item:focus-visible {
  outline: 3px solid var(--bleu-moyen);
  outline-offset: 3px;
}

/* ==========================================================================
   Galerie de l'équipe
   ========================================================================== */

.equipe-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}

.equipe-item {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--ombre-douce);
  cursor: pointer;
  margin: 0;
}

.equipe-item .equipe-media {
  width: 100%;
  height: 100%;
}

.equipe-item .placeholder-photo {
  min-height: 0;
  height: 100%;
  border-radius: 0;
}

.equipe-item img.equipe-media {
  display: block;
  object-fit: cover;
}

.equipe-legende {
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: linear-gradient(180deg, rgba(20, 24, 29, 0) 0%, rgba(20, 24, 29, 0.75) 100%);
  color: var(--blanc);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.equipe-legende strong {
  font-family: var(--font-titres);
  font-weight: 700;
}

.equipe-legende small {
  color: var(--bleu-pastel);
  font-size: 0.85rem;
}

.equipe-item:hover .equipe-legende,
.equipe-item:focus-visible .equipe-legende {
  opacity: 1;
  transform: translateY(0);
}

.equipe-item:focus-visible {
  outline: 3px solid var(--bleu-moyen);
  outline-offset: 3px;
}

/* ==========================================================================
   Lightbox (photos du cabinet + équipe)
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(20, 24, 29, 0.9);
  cursor: zoom-out;
}

.lightbox:not([hidden]) {
  display: flex;
}

body.lightbox-ouvert {
  overflow: hidden;
}

.lightbox-contenu {
  max-width: min(900px, 90vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.lightbox-media {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-media .galerie-media,
.lightbox-media .equipe-media {
  width: auto;
  height: auto;
  max-width: 100%;
}

.lightbox-media img {
  max-height: 70vh;
  border-radius: var(--radius-m);
  display: block;
  object-fit: contain;
}

.lightbox-media .placeholder-photo {
  width: 100%;
  min-height: 320px;
  border-radius: var(--radius-m);
}

.lightbox-texte {
  align-self: flex-start;
  text-align: left;
  color: var(--blanc);
  max-width: 100%;
}

.lightbox-nom {
  font-family: var(--font-titres);
  font-weight: 700;
  font-size: 1.3rem;
  margin-bottom: 4px;
}

.lightbox-specialite {
  color: var(--bleu-pastel);
  font-weight: 600;
  margin-bottom: 12px;
}

.lightbox-presentation {
  line-height: 1.6;
}

@media (max-width: 640px) {
  .section-intro-cabinet {
    padding: 48px 20px 24px;
  }

  .section-intro-cabinet h1 {
    font-size: 1.6rem;
  }

  .section-intro-cabinet .sous-titre {
    font-size: 1rem;
  }

  .section-galerie,
  .section-equipe {
    padding: 32px 20px;
  }

  .section-qui-sommes-nous {
    padding: 32px 20px 56px;
  }

  .lightbox {
    padding: 24px;
  }
}