/* ===== BASE — Bois de bouleau (Canvas) ===== */
body {
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  background-color: #0f0f27;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.04); }
::-webkit-scrollbar-thumb { background-color: rgba(26,91,168,0.25); border-radius: 20px; }

/* ===== MOBILE : éviter le zoom iOS sur les inputs (font-size ≥ 16px) ===== */
@media (max-width: 767px) {
  input, select, textarea {
    font-size: 16px !important;
  }
  /* Réduire la taille des labels uniquement */
  label.text-xs { font-size: 11px !important; }
}

/* ===== MOBILE NAV MENU ===== */
#mobile-nav-menu {
  display: none;
  flex-direction: column;
  gap: 0;
  background: rgba(8, 8, 22, 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 0.5rem 0 1rem;
}
#mobile-nav-menu.open {
  display: flex;
}
#mobile-nav-menu a, #mobile-nav-menu .mobile-cta {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: background 0.15s;
}
#mobile-nav-menu a:hover {
  background: rgba(255,255,255,0.07);
  color: #ffffff;
}
#mobile-nav-menu .mobile-cta {
  margin: 0.5rem 1.5rem 0;
  padding: 0.75rem 1.5rem;
  background: #1b5ba8;
  color: white;
  border-radius: 0.75rem;
  justify-content: center;
  font-weight: 600;
  gap: 0.5rem;
}

/* ===== WIZARD PILLS MOBILE ===== */
.wizard-pills-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
@media (max-width: 480px) {
  .wizard-pill {
    font-size: 10px !important;
    padding: 0.25rem 0.5rem !important;
  }
}

/* ===== PHOTO SLOTS MOBILE ===== */
.slot-card-inner {
  min-height: 90px;
}
@media (max-width: 480px) {
  .slot-card-inner { min-height: 80px; }
}

/* ===== FORM CONTAINER MOBILE ===== */
@media (max-width: 1023px) {
  #form-height-container {
    height: auto !important;
    min-height: 0 !important;
  }
}

/* ===== GALLERY SECTION MOBILE ===== */
@media (max-width: 767px) {
  .gallery-grid {
    height: auto !important;
    grid-template-columns: 1fr !important;
  }
  .gallery-main-img {
    height: 260px !important;
  }
  .gallery-sub-col {
    height: auto !important;
  }
  .gallery-sub-img {
    height: 180px !important;
  }
  .gallery-sub-info {
    height: auto !important;
    padding: 1rem !important;
  }
}

/* ===== RECAP GRID MOBILE ===== */
@media (max-width: 479px) {
  #recap4-photos-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ===== TOUCH FEEDBACK ===== */
.choc-card, .btn-primary, button, a {
  -webkit-tap-highlight-color: rgba(27,91,168,0.1);
}

/* ===== SERVICES BENTO MOBILE ===== */
@media (max-width: 767px) {
  #savoir-faire {
    grid-template-columns: 1fr !important;
  }
  #savoir-faire > div {
    min-height: 150px;
  }
}

/* ===== GALLERY DESKTOP ===== */
@media (min-width: 768px) {
  .gallery-main-img {
    height: 100% !important;
    min-height: 400px !important;
  }
  .gallery-sub-col {
    height: 400px !important;
  }
  .gallery-sub-img {
    flex: 1 1 0% !important;
    height: auto !important;
  }
  .gallery-sub-info {
    flex-shrink: 0 !important;
  }
}

/* ===== COOKIE BANNER MOBILE ===== */
@media (max-width: 767px) {
  #cookie-banner {
    padding: 1rem !important;
    gap: 1rem !important;
  }
}

/* ===== HERO MOBILE ===== */
@media (max-width: 480px) {
  .hero-badge {
    font-size: 10px;
  }
}

/* ===== FLOATING CARDS ===== */
.floating-card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px) saturate(1.15);
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
  border-radius: 1.5rem;
  box-shadow:
    0 2px  8px  rgba(0, 0, 0, 0.10),
    0 8px  28px rgba(0, 0, 0, 0.12),
    0 28px 60px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.55);
}

.floating-card-dark {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px) saturate(1.15);
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
  border-radius: 1.5rem;
  box-shadow:
    0 2px  8px  rgba(0, 0, 0, 0.10),
    0 8px  28px rgba(0, 0, 0, 0.12),
    0 28px 60px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.55);
}

/* ===== LISIBILITÉ — textes dans les cartes ===== */
.floating-card .text-slate-500,
.floating-card-dark .text-slate-500 { color: #475569 !important; }

.floating-card .text-slate-400,
.floating-card-dark .text-slate-400 { color: #64748b !important; }

.floating-card h1, .floating-card h2, .floating-card h3,
.floating-card-dark h1, .floating-card-dark h2, .floating-card-dark h3 { color: #0f172a; }

.floating-card p,
.floating-card-dark p { color: #334155; }

/* ===== SELECTION CARDS ===== */
.selection-card:checked + label {
  background-color: #f0f7ff;
  border-color: #1b5ba8;
  color: #1b5ba8;
  box-shadow: 0 4px 6px -1px rgba(27, 91, 168, 0.15);
}
.selection-card:checked + label .check-indicator {
  opacity: 1;
  transform: scale(1);
}
.option-check:checked + label {
  background-color: #eff6ff;
  border-color: #1b5ba8;
  color: #1b5ba8;
}
.option-check:checked + label .option-icon { color: #1b5ba8; }

.zone-btn.active {
  background-color: #1b5ba8;
  color: white;
  border-color: #1b5ba8;
}

/* ===== CHOC CARDS ===== */
.choc-card.border-slate-900 {
  border-color: #1b5ba8 !important;
  background-color: #f0f7ff !important;
}
.choc-dot { background-color: #1b5ba8 !important; }

/* ===== WIZARD PILLS & PROGRESS ===== */
.wizard-pill.bg-slate-900 { background-color: #1b5ba8 !important; }
#wizard-progress-bar { background-color: #1b5ba8 !important; }

/* ===== BUTTON PRIMARY ===== */
.btn-primary {
  background-color: #1b5ba8;
  color: white;
  transition: background-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.btn-primary:hover {
  background-color: #154e92;
  box-shadow: 0 8px 20px -4px rgba(27, 91, 168, 0.40);
  transform: translateY(-1px);
}

/* ===== LOGO — non sélectionnable ===== */
.logo-img {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  draggable: false;
}

/* ===== NAV ===== */
.nav-glass {
  background: rgba(8, 8, 22, 0.80);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 1px 28px rgba(0,0,0,0.40);
}

/* ===== MODAL ===== */
.modal-open { overflow: hidden; }
.modal-backdrop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}
.modal-content {
  transform: translateY(20px) scale(0.98);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-backdrop.active .modal-content {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* ===== FADE IN ANIMATION (hero) ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.delay-100  { animation-delay: 0.1s; }
.delay-200  { animation-delay: 0.2s; }
.delay-300  { animation-delay: 0.3s; }

/* ===== SCROLL REVEAL ===== */
/*
  État initial : carte légèrement abaissée, invisible, très légèrement réduite.
  L'entrée simule un objet posé doucement sur la surface en bois.
*/
.reveal {
  opacity: 0;
  transform: translateY(36px) scale(0.985);
  transition:
    opacity  0.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Décalages en cascade pour les éléments enfants */
.reveal-child {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity  0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible .reveal-child:nth-child(1) { opacity:1; transform:none; transition-delay: 0.08s; }
.reveal.visible .reveal-child:nth-child(2) { opacity:1; transform:none; transition-delay: 0.16s; }
.reveal.visible .reveal-child:nth-child(3) { opacity:1; transform:none; transition-delay: 0.24s; }
.reveal.visible .reveal-child:nth-child(4) { opacity:1; transform:none; transition-delay: 0.32s; }
.reveal.visible .reveal-child:nth-child(5) { opacity:1; transform:none; transition-delay: 0.40s; }
.reveal.visible .reveal-child:nth-child(6) { opacity:1; transform:none; transition-delay: 0.48s; }