/* ═══════════════════════════════════════════════════════════════════
   home-fixes.css — J.art Photographe V7
   Corrections visuelles ciblees pour la page d'accueil :
   - sidebar reseaux sociaux (SVG propres)
   - header (logo + menu : alignement et lisibilite)
   - oiseaux discrets et professionnels
   - chatbot vs citation (anti-chevauchement)
   - citation hero (taille et lisibilite)
   - overlay sombre allege
   - polish mobile
   Tout est local, ne touche pas tarifs/devis/contenu metier.
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   1. SIDEBAR RESEAUX SOCIAUX — bouton circulaire premium noir/or
   ───────────────────────────────────────────────────────────────── */
.social-sidebar {
  position: fixed;
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: .9rem;
  z-index: 600;
  pointer-events: none;
}

.social-sidebar a {
  pointer-events: auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(8, 6, 4, .65);
  border: 1px solid rgba(201, 169, 110, .28);
  color: rgba(232, 224, 208, .8);
  text-decoration: none;
  transition:
    background .35s ease,
    border-color .35s ease,
    color .35s ease,
    transform .35s ease,
    box-shadow .35s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* On masque le texte fallback "Ig Fb Pt" au cas ou */
  font-size: 0;
}

.social-sidebar a:hover,
.social-sidebar a:focus-visible {
  background: rgba(12, 9, 6, .92);
  border-color: var(--or, #c9a96e);
  color: var(--or-clair, #e8c46c);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(201, 169, 110, .25),
              0 0 0 1px rgba(201, 169, 110, .15);
  outline: none;
}

.social-sidebar a svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  display: block;
}

/* ─────────────────────────────────────────────────────────────────
   2. HEADER — logo mieux integre, menu plus aere
   ───────────────────────────────────────────────────────────────── */

/* Header un peu plus grand et plus respirant */
.header {
  height: 78px;
}
.header.scrolled {
  background: rgba(6, 5, 4, .94);
  border-bottom: 1px solid rgba(201, 169, 110, .12);
}

/* Logo : alignement vertical et image arrondie */
.logo {
  display: inline-flex !important;
  align-items: center;
  gap: .55rem;
  font-family: var(--serif);
  letter-spacing: .12em;
  line-height: 1;
}
.logo img {
  height: 34px !important;
  width: 34px !important;
  object-fit: cover;
  border-radius: 50% !important;
  border: 1px solid rgba(201, 169, 110, .35);
  margin-right: 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
  flex-shrink: 0;
  display: block;
}
.logo .j {
  font-size: 1.4rem;
  line-height: 1;
}
.logo .art {
  line-height: 1;
}

/* Menu : un peu plus d'air, plus lisible */
.nav {
  gap: 2.4rem;
}
.nav-liens {
  gap: 2.1rem;
}
.nav-liens a {
  font-size: .76rem;
  letter-spacing: .16em;
  color: rgba(232, 224, 208, .82);
  padding: .25rem 0;
}
.nav-liens a:hover,
.nav-liens a.active {
  color: var(--or-clair, #e8c46c);
}
.nav-liens a::after {
  bottom: -6px;
  height: 1.5px;
  background: var(--or-clair, #e8c46c);
}

/* CTA reservation : plus visible sans etre agressif */
.nav-cta {
  font-size: .7rem;
  padding: .55rem 1.3rem;
  background: rgba(201, 169, 110, .08);
}
.nav-cta:hover {
  background: rgba(201, 169, 110, .18);
  border-color: var(--or-clair, #e8c46c);
}

/* ─────────────────────────────────────────────────────────────────
   3. OISEAUX — plus discrets et plus pro
   On reduit l'opacite, on adoucit la couleur, on ralentit le
   battement d'ailes pour un rendu cinematographique.
   ───────────────────────────────────────────────────────────────── */
.jart-bird {
  opacity: .42;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25));
  color: rgba(232, 224, 208, .55);
}
.jart-bird svg {
  width: 100%;
  height: 100%;
}
.jart-bird-wing--up,
.jart-bird-wing--down {
  animation-duration: .85s !important;
}
/* Trait plus fin pour eviter qu'ils ressemblent a de gros traits */
.jart-bird svg path {
  stroke-width: 1 !important;
}

/* ─────────────────────────────────────────────────────────────────
   4. CHATBOT vs CITATION — anti-chevauchement
   La chat-bulle occupe bottom=2rem, hauteur ~76px (avec ring).
   La citation hero etait a bottom=80px : ca chevauche. On la
   remonte au-dessus du chatbot et on l'agrandit legerement.
   ───────────────────────────────────────────────────────────────── */
.hero-citation {
  bottom: 140px !important;
  right: 2.4rem !important;
  max-width: 320px !important;
  z-index: 3 !important;
}
.hero-citation p {
  font-size: 1rem !important;
  line-height: 1.7 !important;
  color: rgba(232, 224, 208, .92) !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}
.hero-citation span {
  font-size: .7rem !important;
  letter-spacing: .2em !important;
  color: rgba(201, 169, 110, .75) !important;
  margin-top: .65rem !important;
}

/* ─────────────────────────────────────────────────────────────────
   5. OVERLAY SOMBRE GAUCHE — un peu plus leger
   On reduit l'intensite du voile sur la zone de texte tout en
   gardant la lisibilite (le texte a deja text-shadow).
   ───────────────────────────────────────────────────────────────── */
.hero-bg {
  background:
    radial-gradient(ellipse at 70% 40%, rgba(55, 32, 8, .26) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 85%, rgba(20, 10, 4, .68) 0%, transparent 50%),
    linear-gradient(135deg, rgba(6, 6, 8, .68) 0%, rgba(6, 6, 8, .14) 55%, rgba(6, 6, 8, .38) 100%) !important;
}

/* On donne au texte un peu plus d'aide pour rester premium et lisible */
.hero-contenu h1 {
  text-shadow: 0 2px 24px rgba(0, 0, 0, .55), 0 0 8px rgba(0, 0, 0, .3);
}
.hero-contenu .hero-desc,
.hero-contenu .hero-sous-desc {
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}

/* ─────────────────────────────────────────────────────────────────
   6. PETITE LANTERNE BAS-GAUCHE — qu'elle ne flotte pas dans le
   menu. Sur certains ecrans elle apparaissait haute (bottom:60px
   alors que le hero peut etre tres long). On la garde discrete
   et on s'assure qu'elle reste sous le header.
   ───────────────────────────────────────────────────────────────── */
.lanterne-deco {
  bottom: 90px !important;
  left: 18px !important;
  opacity: .35 !important;
  z-index: 1 !important;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────
   7. MOBILE — tout reste lisible et propre
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .social-sidebar {
    left: 12px;
    gap: .7rem;
  }
  .social-sidebar a {
    width: 34px;
    height: 34px;
  }
  .social-sidebar a svg {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 720px) {
  /* Header plus compact */
  .header { height: 68px; }
  .logo img { height: 30px !important; width: 30px !important; }
  .logo { font-size: 1rem; }

  /* On masque la sidebar sociale en mobile pour eviter de manger
     l'espace tactile. Les liens sociaux sont dans le footer. */
  .social-sidebar { display: none; }

  /* Citation deja masquee a 600px par index.html. On s'assure
     qu'elle ne reapparait pas mal placee a 720px. */
  .hero-citation {
    bottom: 110px !important;
    right: 1rem !important;
    max-width: 240px !important;
  }
  .hero-citation p { font-size: .9rem !important; }

  /* Lanterne plus petite et plus discrete sur mobile */
  .lanterne-deco {
    bottom: 110px !important;
    left: 8px !important;
    transform: scale(.7);
    transform-origin: bottom left;
  }

  /* Oiseaux encore plus discrets sur petit ecran */
  .jart-bird { opacity: .28; }
}

@media (max-width: 600px) {
  .lanterne-deco { display: none; }
}

/* ─────────────────────────────────────────────────────────────────
   8. ACCESSIBILITE
   ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .social-sidebar a { transition: none; }
}