/* ============================================
   STUDIO LUMIERE - Responsive Styles
   Mobile First Approach
   ============================================ */

/* ============================================
   MOBILE (Default - up to 575px)
   ============================================ */

/* Show Mobile Elements */
.sticky-cta {
  display: block;
}

/* Reserve la place du sticky CTA + du bandeau maquette */
body {
  padding-bottom: calc(var(--sticky-cta-height) + var(--demo-banner-height));
}

/* Tres petits ecrans : le bouton du sticky CTA passe sur deux lignes */
@media (max-width: 359px) {
  :root {
    --sticky-cta-height: 112px;
  }
}

/* Hero adjustments */
.hero {
  min-height: 100vh;
  padding-top: 80px;
}

.hero-content h1 {
  font-size: 2.25rem;
}

.hero-buttons {
  flex-direction: column;
  width: 100%;
  padding: 0 var(--spacing-sm);
}

.hero-buttons .btn {
  width: 100%;
}

/* Section padding reduced */
section {
  padding: var(--spacing-xl) 0;
}

/* Cards */
.service-card {
  padding: var(--spacing-lg) var(--spacing-md);
}

/* Footer */
.footer-grid {
  text-align: center;
}

.footer-brand p {
  margin: 0 auto;
}

.social-links {
  justify-content: center;
}

/* Testimonials */
.testimonial-text {
  font-size: 1.125rem;
}

/* ============================================
   SMALL TABLETS (576px and up)
   ============================================ */

@media (min-width: 576px) {
  .hero-buttons {
    flex-direction: row;
    width: auto;
    padding: 0;
  }

  .hero-buttons .btn {
    width: auto;
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   TABLETS (768px and up)
   ============================================ */

@media (min-width: 768px) {
  /* Le bandeau maquette tient sur une seule ligne */
  :root {
    --demo-banner-height: 36px;
  }

  /* Hide sticky CTA on tablet/desktop */
  .sticky-cta {
    display: none;
  }

  body {
    padding-bottom: var(--demo-banner-height);
  }

  /* Navigation */
  .menu-toggle {
    display: none;
  }

  .nav-mobile {
    display: none;
  }

  .nav-desktop {
    display: block;
  }

  /* Hero */
  .hero-content h1 {
    font-size: 3rem;
  }

  .hero-content p {
    font-size: 1.25rem;
  }

  /* Section */
  section {
    padding: var(--spacing-xxl) 0;
  }

  /* About Grid */
  .about-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xxl);
  }

  /* Footer Grid */
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
    text-align: left;
  }

  .social-links {
    justify-content: flex-start;
  }
}

/* ============================================
   SMALL DESKTOPS (992px and up)
   ============================================ */

@media (min-width: 992px) {
  /* Typography */
  h1 {
    font-size: 3.5rem;
  }

  h2 {
    font-size: 2.75rem;
  }

  /* Hero */
  .hero-content h1 {
    font-size: 3.75rem;
  }

  /* Services */
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* About - Image can be larger */
  .about-image {
    aspect-ratio: 3/4;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
  }
}

/* ============================================
   LARGE DESKTOPS (1200px and up)
   ============================================ */

@media (min-width: 1200px) {
  /* Container */
  .container {
    padding: 0 var(--spacing-lg);
  }

  /* Hero */
  .hero-content {
    max-width: 900px;
  }

  .hero-content h1 {
    font-size: 4rem;
  }
}

/* ============================================
   EXTRA LARGE (1400px and up)
   ============================================ */

@media (min-width: 1400px) {
  :root {
    --container-max: 1320px;
  }
}

/* ============================================
   TARIFS PAGE SPECIFIC
   ============================================ */

.tarifs-section {
  padding-top: 120px;
}

/* ------------------------------------------------------------------
   Symptome : cette grille restait sur une seule colonne (deux pour la
   galerie) a TOUTES les largeurs, y compris en 1400px, alors que des
   media queries prevoyaient bien 2, 3, 4 puis 5 colonnes. Cause : ces
   media queries etaient ecrites plus haut dans le fichier que la regle
   de base ci-dessous. Une media query n'ajoute aucune specificite : a
   specificite egale, c'est la derniere declaration qui gagne, et la
   regle de base ecrasait donc systematiquement ses propres variantes.
   Les paliers sont ramenes ici, apres la regle de base.
   ------------------------------------------------------------------ */
.tarifs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

@media (min-width: 768px) {
  .tarifs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .tarifs-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tarif-category {
  padding: var(--spacing-lg);
}

.tarif-category h3 {
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid rgba(184, 115, 51, 0.2);
  color: var(--copper-light);
}

.tarif-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--spacing-xs) 0;
  gap: var(--spacing-sm);
}

.tarif-name {
  color: var(--text-primary);
  font-size: 0.9375rem;
  /* min-width: 0 leve le plancher min-content des elements flex : sans lui le
     nom refuse de descendre sous la largeur de son mot le plus long et pousse
     le prix hors de la carte. Voir le bloc "lignes de tarif" plus bas. */
  min-width: 0;
  overflow-wrap: break-word;
}

/* Leaders (dots) between service and price */
.tarif-dots {
  flex: 1;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.2);
  margin: 0 var(--spacing-xs);
  /* min-width: 0 et non 30px : le filet occupe l'espace restant quand il y en
     a, et se resorbe au lieu de pousser le prix dehors quand il n'y en a plus. */
  min-width: 0;
}

.tarif-price {
  color: var(--cream-accent);
  font-weight: 600;
  white-space: nowrap;
}

.tarif-note {
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: var(--spacing-xs);
}

/* ------------------------------------------------------------------
   Symptome, sur telephone : le prix des prestations etait coupe net.
   Une ligne comme "Couleur + Meches + Coupe + Brushing" suivie de
   "a partir de 95 €" reclame environ 400px : le nom ne peut pas se
   reduire sous son mot le plus long, .tarif-price est en
   white-space: nowrap et .tarif-dots avait un min-width de 30px.
   Or la carte n'offre que ~263px utiles a 375px (24px de marge de
   conteneur + 32px de rembourrage de chaque cote). La ligne sortait
   donc de la carte, et .mirror-card etant en overflow: hidden, le
   prix disparaissait purement et simplement au lieu de provoquer un
   defilement visible.
   On desserre les trois contraintes : rembourrage et interstices
   reduits, filet de pointilles qui se resorbe, nom autorise a passer
   a la ligne. Le prix, lui, reste insecable et entier.
   Le meme calcul vaut de 768 a 991px, ou la grille passe a deux
   colonnes et n'offre pas plus de place qu'un telephone : min-width: 0
   est donc pose sans condition sur .tarif-name et .tarif-dots, et le
   desserrement s'applique aux deux paliers.
   ------------------------------------------------------------------ */
@media (max-width: 575px), (min-width: 768px) and (max-width: 991px) {
  .tarif-category {
    padding: var(--spacing-md);
  }

  .tarif-item {
    gap: var(--spacing-xs);
  }

  .tarif-dots {
    margin: 0 4px;
  }

  .tarif-price {
    font-size: 0.9375rem;
  }
}

/* ============================================
   GALLERY PAGE SPECIFIC
   ============================================ */

.gallery-section {
  padding-top: 120px;
}

/* ------------------------------------------------------------------
   Symptome : cette grille restait sur une seule colonne (deux pour la
   galerie) a TOUTES les largeurs, y compris en 1400px, alors que des
   media queries prevoyaient bien 2, 3, 4 puis 5 colonnes. Cause : ces
   media queries etaient ecrites plus haut dans le fichier que la regle
   de base ci-dessous. Une media query n'ajoute aucune specificite : a
   specificite egale, c'est la derniere declaration qui gagne, et la
   regle de base ecrasait donc systematiquement ses propres variantes.
   Les paliers sont ramenes ici, apres la regle de base.
   ------------------------------------------------------------------ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 1000px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}

@media (min-width: 992px) {
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
}

@media (min-width: 1200px) {
  .gallery-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
  }
}

.gallery-item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(184, 115, 51, 0.15);
  cursor: pointer;
  transition: all var(--transition-smooth);
  max-width: 100%;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.gallery-item:hover {
  border-color: var(--copper-primary);
  box-shadow: var(--shadow-glow);
  z-index: 2;
}

.gallery-item:hover img {
  transform: scale(1.08);
}

.gallery-item-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--spacing-sm);
  background: linear-gradient(transparent, rgba(18, 18, 18, 0.9));
  opacity: 0;
  transform: translateY(10px);
  transition: all var(--transition-smooth);
}

.gallery-item:hover .gallery-item-overlay {
  opacity: 1;
  transform: translateY(0);
}

/* Symptome : la legende de chaque vignette ("Balayage Lumineux", etc.) n'etait
   revelee qu'au survol. Sur un ecran tactile le survol n'existe pas : les onze
   legendes de la galerie n'etaient jamais affichees, et le seul effet d'un
   appui etait l'ouverture de la lightbox. On les montre en permanence des que
   le pointeur est grossier. */
@media (hover: none) and (pointer: coarse) {
  .gallery-item-overlay {
    opacity: 1;
    transform: translateY(0);
  }
}

.gallery-item-title {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--text-primary);
}

/* Masonry-like varied sizes */
.gallery-item:nth-child(5n+1) {
  grid-row: span 1;
}

.gallery-item.featured {
  grid-column: span 2;
  grid-row: span 2;
}

/* Filter Buttons */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: center;
  margin-bottom: var(--spacing-xl);
}

/* Symptome : 13px de texte et 8px de rembourrage vertical donnaient un bouton
   de 37px de haut, sous les 44px recommandes au doigt, alors que ce sont les
   seules commandes de la page galerie. Hauteur minimale portee a 44px, le
   rembourrage horizontal et le dessin sont inchanges. */
.filter-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--bg-glass);
  border: var(--glass-border);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--copper-primary);
  border-color: var(--copper-primary);
  color: var(--bg-primary);
}

/* ============================================
   CONTACT PAGE SPECIFIC
   ============================================ */

.contact-section {
  padding-top: 120px;
}

/* ------------------------------------------------------------------
   Symptome : cette grille restait sur une seule colonne (deux pour la
   galerie) a TOUTES les largeurs, y compris en 1400px, alors que des
   media queries prevoyaient bien 2, 3, 4 puis 5 colonnes. Cause : ces
   media queries etaient ecrites plus haut dans le fichier que la regle
   de base ci-dessous. Une media query n'ajoute aucune specificite : a
   specificite egale, c'est la derniere declaration qui gagne, et la
   regle de base ecrasait donc systematiquement ses propres variantes.
   Les paliers sont ramenes ici, apres la regle de base.
   ------------------------------------------------------------------ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}

@media (min-width: 992px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-info {
  padding: var(--spacing-lg);
}

.contact-info-item {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.contact-info-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-copper);
  border-radius: var(--radius-circle);
}

.contact-info-icon svg {
  width: 24px;
  height: 24px;
  color: var(--bg-primary);
}

.contact-info-content h4 {
  margin-bottom: var(--spacing-xs);
  color: var(--text-primary);
}

.contact-info-content p,
.contact-info-content a {
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

/* Horaires */
.horaires-list {
  margin-top: var(--spacing-sm);
}

.horaires-item {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.horaires-item:last-child {
  border-bottom: none;
}

.horaires-day {
  color: var(--text-secondary);
}

.horaires-time {
  color: var(--copper-light);
}

.horaires-closed {
  color: var(--text-muted);
}

/* Contact Form */
.contact-form {
  padding: var(--spacing-lg);
}

.form-group {
  margin-bottom: var(--spacing-md);
}

.form-group label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-tech);
  font-size: 1rem;
  transition: all var(--transition-fast);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--copper-primary);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(184, 115, 51, 0.1);
}

.form-group textarea {
  min-height: 150px;
  resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-muted);
}

/* Map Container */
.map-container {
  margin-top: var(--spacing-xl);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(184, 115, 51, 0.2);
}

.map-container iframe {
  width: 100%;
  height: 300px;
  display: block;
  filter: grayscale(80%) contrast(1.1);
  transition: filter var(--transition-smooth);
}

.map-container:hover iframe {
  filter: grayscale(0%) contrast(1);
}

@media (min-width: 768px) {
  .map-container iframe {
    height: 400px;
  }
}

/* ============================================
   LIGHTBOX
   ============================================ */

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-smooth);
}

.lightbox.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}

.lightbox-content img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  border: 1px solid rgba(184, 115, 51, 0.3);
}

/* Symptome : 40 x 40 px, sous les 44px recommandes, pour le seul moyen de
   fermer la lightbox au doigt une fois les fleches masquees sur telephone. */
.lightbox-close {
  position: absolute;
  top: -50px;
  right: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-glass);
  border: var(--glass-border);
  border-radius: var(--radius-circle);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.lightbox-close:hover {
  background: var(--copper-primary);
  border-color: var(--copper-primary);
  color: var(--bg-primary);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-glass);
  border: var(--glass-border);
  border-radius: var(--radius-circle);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.lightbox-nav:hover {
  background: var(--copper-primary);
  border-color: var(--copper-primary);
  color: var(--bg-primary);
}

.lightbox-prev {
  left: -70px;
}

.lightbox-next {
  right: -70px;
}

@media (max-width: 767px) {
  .lightbox-nav {
    display: none;
  }

  .lightbox-close {
    top: 20px;
    right: 20px;
    position: fixed;
  }
}

/* ============================================
   PAGE HEADERS (Inner Pages)
   ============================================ */

.page-header {
  padding-top: 140px;
  padding-bottom: var(--spacing-xl);
  text-align: center;
  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
  position: relative;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(184, 115, 51, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(243, 229, 171, 0.03) 0%, transparent 50%);
  pointer-events: none;
}

.page-header .subtitle {
  margin-bottom: var(--spacing-sm);
}

.page-header h1 {
  margin-bottom: var(--spacing-sm);
}

.page-header p {
  max-width: 600px;
  margin: 0 auto;
  color: var(--text-muted);
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  justify-content: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-md);
  font-size: 0.875rem;
}

.breadcrumb a {
  color: var(--text-muted);
}

.breadcrumb a:hover {
  color: var(--copper-light);
}

.breadcrumb span {
  color: var(--text-muted);
}

.breadcrumb .current {
  color: var(--copper-light);
}

/* ============================================
   INDICATEUR DE DEFILEMENT
   Voir le commentaire sur .scroll-indicator dans css/studio.css :
   element decoratif hors du flux, integralement recouvert par le CTA
   collant (88px) et le bandeau maquette (74px) sur telephone. La regle
   sur la hauteur couvre le paysage, ou la largeur depasse souvent 768px
   alors que la hauteur utile tombe sous 450px.
   ============================================ */

@media (max-width: 767px), (max-height: 600px) {
  .scroll-indicator {
    display: none;
  }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .header,
  .sticky-cta,
  .demo-banner,
  .scroll-indicator,
  .lightbox {
    display: none !important;
  }

  body {
    background: white;
    color: black;
    padding: 0;
  }

  .hero {
    min-height: auto;
    padding: 2rem 0;
  }

  .glass-card,
  .mirror-card {
    background: white;
    border: 1px solid #ccc;
  }
}