/*
Theme Name: NovaShift Vitrine
Theme URI: https://example.com/novashift-vitrine
Author: You
Author URI: https://example.com
Description: Thème WordPress vitrine inspiré d'un style B2B moderne (héros clair, preuves sociales, services, tarifs, FAQ, contact). Léger, sans builder.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: novashift-vitrine
Tags: landing, one-page, business, responsive
*/
:root { --brand:#4F46E5; --brand-2:#22D3EE; }
html { scroll-behavior: smooth; }
body { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; }
.glass { background: rgba(255,255,255,.6); backdrop-filter: blur(10px); }
details[open] summary svg { transform: rotate(180deg); }



/* --- Fix Responsive Hero --- */
.hero-container {
  display: flex;
  flex-direction: row;
}
@media (max-width: 768px) {
  .hero-container {
    flex-direction: column-reverse;
  }
}


/* --- Reception page enhancements --- */
.card {
  border: 1px solid #e5e7eb; border-radius: 1rem; background:#fff; padding:1.25rem;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,23,42,.08); }
.badge { display:inline-flex; align-items:center; gap:.5rem; font-weight:600; border-radius:9999px; padding:.25rem .625rem; background:#fff; color:#4338ca; border:1px solid #e0e7ff; }
.sticky-safe { padding-bottom: env(safe-area-inset-bottom); }
details summary { list-style: none; }
details summary::-webkit-details-marker { display:none; }


/* Placeholder square for service cards */
.placeholder-square{background:#f1f5f9;border:2px dashed #cbd5e1}


/* === Scroll reveal animations === */
.js [data-reveal], .js .reveal { opacity:0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.in-view { opacity:1 !important; transform: translateY(0) !important; }

/* === Hero slider === */
#hero-slider { position: relative; }
#hero-slider .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; }
#hero-slider .hero-slide.active { position: relative; opacity: 1; }


/* --- Slider priority fix --- */
#hero-slider .hero-slide{ position:absolute; inset:0; opacity:0 !important; transition: opacity .9s ease; z-index:1; width:100%; height:100%; object-fit:cover; }
#hero-slider .hero-slide.active{ position:relative; opacity:1 !important; z-index:2; }
#hero-slider{ position:relative; aspect-ratio:16/9; }


/* === Slider: slide + zoom === */
#hero-slider{ position:relative; aspect-ratio:16/9; overflow:hidden; }
#hero-slider .hero-slide{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0 !important; transform:translateX(100%); 
  transition: transform .9s ease, opacity .9s ease;
}
#hero-slider .hero-slide.active{ opacity:1 !important; transform:translateX(0); z-index:2; }
#hero-slider .hero-slide.prev{ opacity:0 !important; transform:translateX(-100%); z-index:1; }

@keyframes hero-zoom-in {
  0% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
#hero-slider .hero-slide.zooming{
  animation: hero-zoom-in 5s ease both;
}


/* === Scroll reveal zoom for images === */
.reveal-img { opacity:0; transform: scale(1.05); transition: opacity 1s ease, transform 1s ease; }
.reveal-img.in-view { opacity:1; transform: scale(1); }


/* === Scroll zoom for section images === */
.js .reveal-img { opacity: 0; transform: scale(1.05); transition: opacity 1s ease, transform 1s ease; }
.reveal-img.in-view { opacity: 1; transform: scale(1); }


/* === Ultra-wide centered slab (excludes header, footer, hero) === */
.xl-slab{ /* no effect by default */ }

@media (min-width: 1600px){
  .xl-slab{ max-width: 1240px; margin-left:auto; margin-right:auto; }
  /* Reduce inner container width and add gentle side paddings */
  .xl-slab .mx-auto{ max-width: 1240px !important; }
  .xl-slab .px-4{ padding-left: clamp(16px, 2vw, 40px) !important; padding-right: clamp(16px, 2vw, 40px) !important; }
  .xl-slab .lg\:px-8{ padding-left: clamp(20px, 2.5vw, 48px) !important; padding-right: clamp(20px, 2.5vw, 48px) !important; }
}

@media (min-width: 1920px){
  .xl-slab{ max-width: 1320px; }
  .xl-slab .mx-auto{ max-width: 1320px !important; }
}

@media (min-width: 2560px){
  .xl-slab{ max-width: 1440px; }
  .xl-slab .mx-auto{ max-width: 1440px !important; }
}


/* === Ultra-wide hero centering & reduction === */
@media (min-width: 1600px){ .hero-slab{ max-width: 1120px !important; margin-left:auto; margin-right:auto; } }
@media (min-width: 1920px){ .hero-slab{ max-width: 1200px !important; } }
@media (min-width: 2560px){ .hero-slab{ max-width: 1280px !important; } }


/* === Service cards media sizing & spacing === */
.service-card .service-media{
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 0.5rem !important; /* tighten space image -> title */
}
.service-card .service-media > img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Fallback for older browsers without aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  .service-card .service-media{ position:relative; }
  .service-card .service-media::before{ content:""; display:block; padding-top:100%; }
  .service-card .service-media > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
}

/* Optional: tighten title spacing a bit more */
.service-card h3, .service-card .card-title{
  margin-top: 0.25rem !important;
}


/* === Brand palette & components (site theme) === */
:root{
  --brand-600:#2563eb; /* indigo-600 */
  --brand-700:#1d4ed8; /* indigo-700 */
  --brand-50:#eef2ff;  /* indigo-50 */
}
.text-brand{ color: var(--brand-700); }
.bg-brand-50{ background: var(--brand-50); }
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--brand-600); color:#fff; font-weight:700;
  padding:.75rem 1rem; border-radius: .75rem; text-decoration:none;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 8px 20px rgba(37,99,235,.15);
}
.btn-primary:hover{ background:var(--brand-700); transform: translateY(-1px); box-shadow:0 10px 24px rgba(29,78,216,.18); }
.btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  border:2px solid var(--brand-600); color:var(--brand-700); font-weight:700;
  padding:.65rem 1rem; border-radius:.75rem; text-decoration:none;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-outline:hover{ background:var(--brand-50); border-color:var(--brand-700); color:var(--brand-700); transform: translateY(-1px); }
/* Accents */
.section-accent{ background: linear-gradient(180deg, rgba(238,242,255,.7), rgba(255,255,255,1)); }
.badge-brand{ background:var(--brand-50); color:var(--brand-700); font-weight:600; padding:.25rem .5rem; border-radius:.5rem; }



/* Minimal reveal animation */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; }
.reveal.reveal-in { opacity: 1; transform: translateY(0); }


/* Micro interaction for CTA buttons */
.btn-anim { transition: transform .15s ease, box-shadow .15s ease; will-change: transform; }
.btn-anim:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -12px rgba(15,23,42,.25); }
.btn-anim:active { transform: translateY(0); box-shadow: none; }