/*
 * FICHIER   : assets/css/modals.css
 * RÔLE      : Styles de tous les overlays et panneaux modaux.
 *             Lightbox photos, page détail service (SPA),
 *             modal devis + écran succès.
 *
 * STRUCTURE
 *   ══ LIGHTBOX        → galerie photos plein écran
 *   ══ SERVICE PAGE    → panneau SPA slide depuis la droite
 *   ══ DEVIS MODAL     → formulaire de demande de devis
 *   ══ FORM SUCCESS    → écran de confirmation après envoi
 *
 * OÙ MODIFIER QUOI
 *   Lightbox (fond, boutons, taille image)
 *     → bloc /* ══ LIGHTBOX ══ *\/
 *
 *   Page service (animation slide, héro, stats, galerie)
 *     → bloc /* ══ SERVICE PAGE ══ *\/
 *     Structure HTML générée dynamiquement
 *     → assets/js/service_page.js openSrvPage()
 *
 *   Modal devis (fond, box, formulaire, inputs)
 *     → bloc /* ══ DEVIS MODAL ══ *\/
 *     Champs du formulaire → templates/modals/devis.php
 *
 *   Écran succès après envoi
 *     → bloc /* ══ FORM SUCCESS ══ *\/
 *
 * DÉPENDANCES
 *   base.css → variables, .btn-gold, @keyframes fadeIn
 *   lightbox.js     → openLb(), closeLb(), lbNav()
 *   service_page.js → openSrvPage(), closeSrvPage()
 *   devis.js        → openDevis(), closeDevis(), submitDevis()
 */


/* ══════════════════════════════════════════════════════════════
   LIGHTBOX
   Galerie photos plein écran, ouverte depuis realisations.php.
   Navigation clavier → assets/js/lightbox.js
   Données images → js_data.php (lbData)
   Modifier le fond → background sur #lightbox
   Modifier la taille max de l'image → .lb-img max-width/max-height
══════════════════════════════════════════════════════════════ */
#lightbox {
  position:        fixed;
  inset:           0;
  z-index:         9500;
  background:      rgba(0,0,0,.95);
  display:         none;
  align-items:     center;
  justify-content: center;
}
#lightbox.open { display: flex; }

/* Image principale */
.lb-img {
  max-width:  90vw;
  max-height: 85vh;
  object-fit: contain;
}

/* Bouton fermer */
.lb-close {
  position:   absolute;
  top:        1.5rem;
  right:      1.5rem;
  background: none;
  border:     none;
  color:      rgba(255,255,255,.6);
  font-size:  1.8rem;
  cursor:     pointer;
  transition: color .2s;
}
.lb-close:hover { color: white; }

/* Boutons navigation précédent / suivant */
.lb-prev,
.lb-next {
  position:        absolute;
  top:             50%;
  transform:       translateY(-50%);
  background:      rgba(255,255,255,.08);
  border:          1px solid rgba(255,255,255,.12);
  color:           rgba(255,255,255,.7);
  font-size:       1.5rem;
  width:           50px;
  height:          50px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  transition:      all .2s;
}
.lb-prev { left: 1.5rem; }
.lb-next { right: 1.5rem; }
.lb-prev:hover,
.lb-next:hover { background: rgba(57,181,74,.2); border-color: var(--g4); color: white; }

/* Légende bas (catégorie + titre)
   Contenu injecté par lightbox.js */
.lb-caption {
  position:   absolute;
  bottom:     2rem;
  left:       50%;
  transform:  translateX(-50%);
  text-align: center;
}
.lb-cap-cat   { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--g4); margin-bottom: .3rem; }
.lb-cap-title { font-size: .9rem; color: rgba(255,255,255,.7); }

/* Compteur (ex: "3 / 12")
   Contenu injecté par lightbox.js */
.lb-counter {
  position:   absolute;
  top:        1.5rem;
  left:       50%;
  transform:  translateX(-50%);
  font-size:  .7rem;
  letter-spacing: .1em;
  color:      rgba(255,255,255,.3);
}


/* ══════════════════════════════════════════════════════════════
   SERVICE PAGE (SPA)
   Panneau plein écran qui slide depuis la droite.
   Ouvert par service_page.js openSrvPage(slug)
   Fermé par closeSrvPage() ou swipe mobile
   Structure HTML → templates/modals/service_page.php
   Contenu dynamique → assets/js/service_page.js
══════════════════════════════════════════════════════════════ */

/* Panneau principal
   transform: translateX(100%) = hors écran à droite (fermé)
   transform: translateX(0)    = visible (ouvert via .open)
   Modifier la durée d'animation → transition */
#srvPage {
  position:   fixed;
  inset:      0;
  z-index:    950;
  background: var(--g1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  transform:  translateX(100%);
  transition: transform .55s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
#srvPage.open { transform: translateX(0); }

/* Bouton retour (positionné dans layout.php, hors du panneau)
   Modifier le style → ici
   Modifier le comportement → service_page.js closeSrvPage() */
.sp-back {
  position:       fixed;
  top:            1.2rem;
  left:           5vw;
  z-index:        1000;
  display:        none; /* affiché via .visible par service_page.js */
  align-items:    center;
  gap:            .6rem;
  background:     rgba(6,13,10,.85);
  backdrop-filter: blur(12px);
  border:         1px solid rgba(57,181,74,.2);
  color:          rgba(255,255,255,.8);
  font-size:      .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding:        .6rem 1.2rem;
  cursor:         pointer;
  font-family:    'Jost', sans-serif;
  font-weight:    500;
  transition:     border-color .2s, color .2s;
}
.sp-back.visible { display: flex; }
.sp-back:hover   { border-color: var(--g4); color: var(--g4); }

/* Indication swipe mobile (disparaît après 2.5s)
   Visible uniquement sur mobile → display:none desktop via responsive.css */
.sp-swipe-hint {
  display:         none; /* activé en responsive.css pour mobile */
  position:        fixed;
  bottom:          5rem;
  left:            50%;
  transform:       translateX(-50%);
  z-index:         960;
  background:      rgba(0,0,0,.55);
  color:           #fff;
  font-size:       .68rem;
  letter-spacing:  .1em;
  padding:         .45rem 1rem;
  border-radius:   50px;
  pointer-events:  none;
  animation:       hintFade 2.5s ease forwards 1s;
  opacity:         0;
}
@keyframes hintFade {
  0%   { opacity: 0; transform: translateX(-50%) translateY(6px); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Héro de la page service ──────────────────────────────── */
.sp-hero {
  position:   relative;
  height:     60vh;
  min-height: 380px;
  overflow:   hidden;
}
.sp-hero-img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  filter:     brightness(.45);
  transform:  scale(1.03);
  transition: transform 6s ease;
}
#srvPage.open .sp-hero-img { transform: scale(1); }

.sp-hero-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(to bottom, rgba(6,13,10,.3) 0%, var(--g1) 100%);
}
.sp-hero-content {
  position: absolute;
  bottom:   0;
  left:     0;
  right:    0;
  padding:  3rem 5vw 2.5rem;
}
.sp-hero-tag {
  font-size:      .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color:          var(--g4);
  margin-bottom:  .8rem;
  font-weight:    500;
  display:        flex;
  align-items:    center;
  gap:            .6rem;
}
.sp-hero-tag::before {
  content:    '';
  display:    inline-block;
  width:      28px;
  height:     1px;
  background: var(--g4);
}
.sp-hero-title {
  font-family: 'Playfair Display', serif;
  font-size:   clamp(2.2rem, 5vw, 4rem);
  font-weight: 400;
  color:       white;
  line-height: 1.1;
}
.sp-hero-title em { font-style: italic; color: var(--g4); }

/* ── Corps de la page service ─────────────────────────────── */
.sp-body {
  max-width: 880px;
  margin:    0 auto;
  padding:   3rem 5vw 6rem;
}

/* Titres de sections internes */
.sp-section          { margin-bottom: 3.5rem; }
.sp-section-title {
  font-family:   'Playfair Display', serif;
  font-size:     1.5rem;
  color:         var(--cream);
  font-weight:   400;
  margin-bottom: 1.2rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--line);
  position:      relative;
}
.sp-section-title::after {
  content:    '';
  position:   absolute;
  bottom:     -1px;
  left:       0;
  width:      48px;
  height:     2px;
  background: var(--g4);
}
.sp-section p { font-size: .95rem; line-height: 1.95; color: var(--muted); margin-bottom: .9rem; font-weight: 300; }

/* Liste des prestations */
.sp-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1rem; }
.sp-list li {
  font-size:   .88rem;
  color:       var(--muted);
  padding:     .65rem 1rem;
  background:  var(--dark-card2);
  border:      1px solid var(--line);
  display:     flex;
  align-items: center;
  gap:         .7rem;
  transition:  border-color .25s, background .25s;
}
.sp-list li:hover { border-color: rgba(57,181,74,.3); background: rgba(57,181,74,.05); }
.sp-list li::before { content: '✓'; color: var(--g4); font-weight: 700; flex-shrink: 0; }

/* Galerie photos du service */
.sp-gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-top: 1.2rem; }
.sp-gallery-item { overflow: hidden; position: relative; aspect-ratio: 4/3; cursor: pointer; }
.sp-gallery-item:first-child.featured { grid-column: span 2; aspect-ratio: 16/7; }
.sp-gallery-item img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); transition: transform .5s ease, filter .4s ease; }
.sp-gallery-item:hover img { transform: scale(1.06); filter: brightness(.9); }
.sp-gallery-item .sp-gal-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,13,10,.7) 0%, transparent 50%); opacity: 0; transition: opacity .3s; display: flex; align-items: flex-end; padding: 1rem; }
.sp-gallery-item:hover .sp-gal-overlay { opacity: 1; }
.sp-gal-label { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.85); }

/* Vidéos du service */
.sp-video-wrap {
  position:    relative;
  width:       100%;
  padding-top: 56.25%;
  overflow:    hidden;
  background:  var(--dark-card2);
  border:      1px solid var(--line);
}
.sp-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.sp-video-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; background: linear-gradient(135deg, var(--dark-card) 0%, var(--g3) 100%); }
.sp-video-placeholder .play-btn { width: 64px; height: 64px; border-radius: 50%; background: rgba(57,181,74,.9); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 8px 32px rgba(57,181,74,.35); transition: transform .3s, box-shadow .3s; cursor: pointer; }
.sp-video-placeholder .play-btn:hover { transform: scale(1.1); box-shadow: 0 12px 40px rgba(57,181,74,.5); }
.sp-video-placeholder p { font-size: .8rem; color: rgba(255,255,255,.4); letter-spacing: .1em; }

/* Stats du service (3 chiffres clés) */
.sp-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin: 1.5rem 0; }
.sp-stat  { background: var(--dark-card2); border: 1px solid var(--line); padding: 1.4rem; text-align: center; transition: border-color .3s; }
.sp-stat:hover { border-color: rgba(57,181,74,.3); }
.sp-stat-n { font-family: 'Playfair Display', serif; font-size: 2rem; color: var(--g4); line-height: 1; }
.sp-stat-l { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: .4rem; }

/* CTA bas de page service */
.sp-cta { background: var(--dark-card); border: 1px solid var(--line); padding: 2.5rem; text-align: center; margin-top: 3rem; }
.sp-cta h3 { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: var(--cream); margin-bottom: .8rem; }
.sp-cta p  { font-size: .9rem; color: var(--muted); margin-bottom: 1.8rem; }


/* ══════════════════════════════════════════════════════════════
   DEVIS MODAL
   Formulaire de demande de devis.
   Champs → templates/modals/devis.php
   Validation → assets/js/devis.js
   Envoi → api/send_devis.php
   Modifier la largeur → .modal-box { max-width }
══════════════════════════════════════════════════════════════ */
#devisModal {
  position:        fixed;
  inset:           0;
  z-index:         9000;
  display:         none;
  align-items:     center;
  justify-content: center;
  padding:         1.5rem;
}
#devisModal.open { display: flex; }

/* Fond flou
   Clic ferme le modal → onclick dans devis.php */
.modal-backdrop {
  position:        absolute;
  inset:           0;
  background:      rgba(0,0,0,.9);
  backdrop-filter: blur(12px);
}

/* Boîte du modal
   Modifier la largeur max → max-width
   Modifier la hauteur max → max-height */
.modal-box {
  position:   relative;
  z-index:    1;
  background: var(--surface);
  width:      100%;
  max-width:  620px;
  max-height: 92vh;
  overflow-y: auto;
  animation:  modalIn .45s cubic-bezier(.4,0,.2,1) forwards;
  border:     1px solid var(--line);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* En-tête sticky */
.modal-hd {
  background:  var(--g1);
  padding:     2.2rem 2.8rem;
  display:     flex;
  justify-content: space-between;
  align-items: flex-start;
  position:    sticky;
  top:         0;
  z-index:     10;
  border-bottom: 1px solid var(--line);
}
.modal-title { font-family: 'Playfair Display', serif; font-size: 1.75rem; color: white; font-weight: 400; }
.modal-sub   { font-size: .78rem; color: rgba(255,255,255,.35); margin-top: .3rem; font-weight: 300; }
.modal-close { background: none; border: none; cursor: pointer; color: rgba(255,255,255,.3); font-size: 1.4rem; line-height: 1; transition: color .2s; padding: .2rem; margin-top: .1rem; }
.modal-close:hover { color: var(--g4); }

/* Corps du formulaire */
.modal-body { padding: 2.2rem 2.8rem; }

/* Grilles de champs
   .f-row      → 2 colonnes côte à côte
   .f-row.full → 1 colonne pleine largeur */
.f-row      { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 1.2rem; }
.f-row.full { grid-template-columns: 1fr; }

.field { display: flex; flex-direction: column; gap: .4rem; }

/* Labels */
label {
  font-size:      .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--muted);
  font-weight:    500;
}

/* Inputs, selects, textarea */
input, select, textarea {
  background:  var(--dark-card);
  border:      1px solid var(--line);
  padding:     .85rem 1rem;
  font-family: 'Jost', sans-serif;
  font-size:   .9rem;
  color:       var(--cream);
  outline:     none;
  transition:  border-color .2s, box-shadow .2s;
  width:       100%;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--g4);
  box-shadow:   0 0 0 3px rgba(57,181,74,.1);
}
textarea { resize: vertical; min-height: 90px; }
select   {
  cursor:              pointer;
  appearance:          none;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2339B54A' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 1rem center;
}

/* Checkboxes services */
.srv-checks { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1.2rem; }
.chk-item   { display: flex; align-items: center; gap: .7rem; cursor: pointer; padding: .75rem; border: 1px solid var(--line); background: var(--dark-card2); transition: border-color .2s, background .2s; }
.chk-item:hover { border-color: var(--g4); }
.chk-item input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--g4); cursor: pointer; flex-shrink: 0; }
.chk-label  { font-size: .82rem; color: var(--text); }

/* Messages d'erreur de validation */
.f-err      { font-size: .7rem; color: #e05252; margin-top: .3rem; display: none; }
.f-err.show { display: block; }
input.invalid,
select.invalid,
textarea.invalid {
  border-color: #e05252     !important;
  box-shadow:   0 0 0 2px rgba(224,82,82,.12) !important;
}

/* Bouton d'envoi avec état loading
   .sending → masque le label, affiche le spinner
   Géré par assets/js/devis.js */
.f-submit {
  width:          100%;
  padding:        1.1rem;
  background:     var(--g4);
  color:          white;
  border:         none;
  cursor:         pointer;
  font-family:    'Jost', sans-serif;
  font-size:      .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight:    600;
  transition:     background .3s;
  margin-top:     1.5rem;
  position:       relative;
  overflow:       hidden;
}
.f-submit:hover:not(:disabled) { background: var(--g5); }
.f-submit:disabled { opacity: .7; cursor: not-allowed; }

.f-btn-label { display: block; transition: opacity .2s; }
.f-btn-spin  { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; gap: .6rem; }

/* État loading */
.f-submit.sending .f-btn-label { opacity: 0; }
.f-submit.sending .f-btn-spin  { display: flex; }

.f-btn-spin-ring { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spinRing .7s linear infinite; flex-shrink: 0; }
.f-btn-spin-txt  { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }

.f-note { text-align: center; font-size: .73rem; color: var(--muted); margin-top: .8rem; }


/* ══════════════════════════════════════════════════════════════
   FORM SUCCESS — écran de confirmation
   Affiché par devis.js après envoi réussi.
   Modifier le message → templates/modals/devis.php bloc #fSuccess
══════════════════════════════════════════════════════════════ */
.form-success {
  display:    none; /* affiché par devis.js */
  text-align: center;
  padding:    3rem 1.5rem;
}

/* Anneau animé avec icône succès */
.suc-ring {
  width:           80px;
  height:          80px;
  border-radius:   50%;
  border:          2px solid rgba(57,181,74,.3);
  background:      rgba(57,181,74,.08);
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto 1.5rem;
  animation:       sucPop .55s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes sucPop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.suc-ico { font-size: 2.4rem; }

.suc-t    { font-family: 'Playfair Display', serif; font-size: 1.7rem; color: var(--cream); margin-bottom: .8rem; }
.suc-d    { font-size: .9rem; color: var(--muted); line-height: 1.75; }
.suc-badge {
  display:     inline-flex;
  align-items: center;
  gap:         .5rem;
  background:  rgba(57,181,74,.08);
  border:      1px solid rgba(57,181,74,.2);
  color:       var(--g4);
  font-size:   .75rem;
  letter-spacing: .08em;
  padding:     .45rem 1.1rem;
  margin:      1rem 0 1.4rem;
}