/* ================================================================
   Studio Naelis — Sections  v2.0
   Un seul fichier, zéro doublon.
   Ordre : tokens → base → composants → galerie → animations → mq
   ================================================================ */

/* ── 0. Tokens ─────────────────────────────────────────────────── */
:root {
  --sn-bg:      #F8F3EC;
  --sn-paper:   #FFFDF9;
  --sn-text:    #1D1D1D;
  --sn-muted:   #6F675F;
  --sn-border:  #E7DED3;
  --sn-blue:    #8EA7B8;
  --sn-violet:  #B8AECF;
  --sn-sand:    #C8A27A;
  --sn-accent:  #C8A27A;
}

/* ── 1. Reset boîte ────────────────────────────────────────────── */
.sn-hero-gradient,
.sn-hero-simple,
.sn-section,
.sn-final-cta,
.sn-home-page,
.sn-home-page * { box-sizing: border-box; }

.sn-home-page a { text-decoration: none; }

/* ── 2. Héros dégradé ──────────────────────────────────────────── */
.sn-hero-gradient {
  margin: 0 auto clamp(48px, 6vw, 80px);
  padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 72px);
  border-radius: 0 0 42px 42px;
  background:
    radial-gradient(circle at 84% 16%, rgba(184,174,207,.45), transparent 34%),
    radial-gradient(circle at 14% 88%, rgba(200,162,122,.18), transparent 30%),
    linear-gradient(135deg, #F8F3EC 0%, #FFFDF9 48%, #ECE5F4 100%);
  overflow: hidden;
}

/* ── 3. Héros simple ───────────────────────────────────────────── */
.sn-hero-simple {
  margin: 0 auto clamp(40px, 5vw, 64px);
  padding: clamp(48px, 8vw, 104px) clamp(20px, 5vw, 72px) clamp(32px, 5vw, 64px);
  background: var(--sn-bg);
  border-radius: 0 0 36px 36px;
}

/* ── 4. Typographie ────────────────────────────────────────────── */
.sn-display-title,
.sn-section-title,
.sn-cta-title,
.sn-mini-service h3,
.sn-details summary,
.sn-card-content h3,
.sn-process-card h3 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  color: var(--sn-text);
}

.sn-display-title {
  max-width: 920px;
  margin: 0 0 22px;
  font-size: clamp(48px, 7.2vw, 92px);
  line-height: .94;
  letter-spacing: -.035em;
}

.sn-display-title em,
.sn-section-title em,
.sn-cta-title em { font-style: italic; color: var(--sn-sand); }

.sn-section-title {
  max-width: 920px;
  margin: 0 0 26px;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -.025em;
}

.sn-left-title  { text-align: left !important; margin-left: 0 !important; }

.sn-cta-title {
  font-size: clamp(46px, 8vw, 92px);
  line-height: .95;
  letter-spacing: -.03em;
  margin: 0 auto 18px;
  max-width: 900px;
}

.sn-kicker {
  margin: 0 0 16px;
  color: var(--sn-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.sn-lead {
  font-size: clamp(18px, 2.3vw, 23px);
  line-height: 1.45;
  color: #3c3834;
  max-width: 700px;
}
.sn-lead-small {
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.55;
  color: #3c3834;
}
.sn-text-wide {
  max-width: 860px;
  font-size: 18px;
  color: #4e4842;
}

/* ── 5. Boutons ────────────────────────────────────────────────── */
.sn-buttons { gap: 14px !important; margin-top: 28px; }

.sn-button-primary .wp-block-button__link,
.sn-button-secondary .wp-block-button__link {
  border-radius: 999px !important;
  padding: 14px 22px !important;
  font-weight: 700;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.sn-button-primary .wp-block-button__link {
  background: var(--sn-sand) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(200,162,122,.22);
}
.sn-button-secondary .wp-block-button__link {
  background: #fff !important;
  color: var(--sn-text) !important;
  border: 1px solid var(--sn-border);
}
.sn-button-primary .wp-block-button__link:hover,
.sn-button-secondary .wp-block-button__link:hover { transform: translateY(-2px); }

/* ── 6. Images communes ────────────────────────────────────────── */
.sn-hero-image img,
.sn-about-image img,
.sn-resource-image img,
.sn-service-image img {
  width: 100%;
  height: auto;
  border-radius: 32px;
  display: block;
  box-shadow: 0 22px 70px rgba(29,29,29,.12);
}

/* ── 7. Section ────────────────────────────────────────────────── */
.sn-section {
  padding: clamp(50px, 7vw, 92px) clamp(20px, 5vw, 72px);
  margin: 0 auto;
  background: var(--sn-bg);
  color: var(--sn-text);
}

/* ── 8. Hero grid ──────────────────────────────────────────────── */
.sn-hero-grid { gap: clamp(32px, 6vw, 84px) !important; }

/* ── 9. Cards réalisations ─────────────────────────────────────── */
.sn-card {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  background: #fff;
  min-height: 420px;
  box-shadow: 0 18px 54px rgba(29,29,29,.08);
  transition: transform .3s ease, box-shadow .3s ease;
}
.sn-card:hover { transform: translateY(-6px); box-shadow: 0 26px 70px rgba(29,29,29,.13); }

.sn-card-grid { gap: clamp(20px, 3vw, 28px) !important; }

.sn-card-image { height: 420px; margin: 0 !important; }
.sn-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sn-card-content {
  position: absolute;
  left: 18px; right: 18px; bottom: 18px;
  padding: 22px !important;
  border-radius: 22px;
  background: rgba(255,253,249,.9);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 32px rgba(29,29,29,.12);
}
.sn-card-content h3 { margin: 0 0 8px; font-size: 28px; }
.sn-card-content p  { margin: 0; color: #4d4741; }

/* ── 10. Mini-services ─────────────────────────────────────────── */
.sn-mini-services       { gap: 20px !important; margin-top: 34px; }
.sn-mini-services .wp-block-column { display: flex; }

.sn-mini-services-four {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.sn-mini-services-four > .wp-block-column { min-width: 0; }

.sn-mini-service {
  background: var(--sn-paper);
  border: 1px solid var(--sn-border);
  border-radius: 28px;
  padding: 28px !important;
  min-height: 220px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.sn-mini-service:hover { transform: translateY(-5px); box-shadow: 0 18px 45px rgba(29,29,29,.08); }
.sn-mini-service h3   { font-size: 30px; line-height: 1; margin: 0 0 14px; }

.sn-mini-service-accent {
  background: linear-gradient(135deg, #F8F3EC, #ECE5F4) !important;
}

/* ── 11. À propos ──────────────────────────────────────────────── */
.sn-about-soft {
  background: var(--sn-paper);
  border-radius: 40px;
  margin: 50px auto;
  padding: clamp(38px, 6vw, 76px) !important;
}
.sn-about-soft, .sn-about-soft * { color: var(--sn-text); }
.sn-about-grid { gap: clamp(32px, 6vw, 78px) !important; }

/* ── 12. Ressources ────────────────────────────────────────────── */
.sn-resource-card {
  background: linear-gradient(135deg, var(--sn-paper), #F3ECF6);
  border: 1px solid var(--sn-border);
  border-radius: 40px;
  padding: clamp(28px, 5vw, 60px);
}

/* ── 13. Newsletter ────────────────────────────────────────────── */
.sn-newsletter {
  background: var(--sn-paper);
  border-radius: 36px;
  border: 1px solid var(--sn-border);
}
.sn-form-placeholder {
  background: var(--sn-bg);
  border: 1px dashed var(--sn-sand);
  border-radius: 24px;
  padding: 24px !important;
}

/* ── 14. Articles récents ──────────────────────────────────────── */
.sn-latest-posts {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  list-style: none;
  padding: 0 !important;
}
.sn-latest-posts li { background: var(--sn-paper); border: 1px solid var(--sn-border); border-radius: 26px; padding: 18px; overflow: hidden; }
.sn-latest-posts img { border-radius: 18px; width: 100%; height: 180px; object-fit: cover; margin-bottom: 14px; }

/* ── 15. CTA final ─────────────────────────────────────────────── */
.sn-final-cta {
  position: relative;
  overflow: hidden;
  margin: clamp(48px, 7vw, 80px) auto;
  padding: clamp(56px, 8vw, 112px) clamp(22px, 6vw, 80px) !important;
  border-radius: clamp(28px, 4vw, 46px);
  background:
    radial-gradient(circle at 82% 12%, rgba(255,255,255,.34), transparent 30%),
    radial-gradient(circle at 10% 88%, rgba(200,162,122,.22), transparent 28%),
    linear-gradient(135deg, #B8AECF 0%, #A9B7D7 42%, #F8F3EC 100%);
  box-shadow: 0 26px 80px rgba(31,26,20,.10);
  text-align: center;
}
.sn-final-cta::before {
  content: '';
  position: absolute;
  width: 520px; height: 520px;
  top: -190px; right: -130px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  filter: blur(80px);
  pointer-events: none;
}
.sn-final-cta > * { position: relative; z-index: 1; }
.sn-final-cta .sn-kicker,
.sn-final-cta .sn-section-title  { text-align: center !important; }
.sn-final-cta .sn-section-title  { max-width: 820px !important; margin-left: auto !important; margin-right: auto !important; }
.sn-final-cta .wp-block-buttons  { justify-content: center; }

/* ── 16. Accordéons services ───────────────────────────────────── */
.sn-details {
  background: var(--sn-paper);
  border: 1px solid var(--sn-border);
  border-radius: 24px;
  padding: 22px 24px;
  margin: 16px 0;
  box-shadow: 0 12px 35px rgba(29,29,29,.05);
}
.sn-details summary { cursor: pointer; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.05; }
.sn-details p,
.sn-details li { font-size: 17px; color: #4d4741; }

/* ── 17. Méthode ───────────────────────────────────────────────── */
.sn-method-grid .wp-block-column,
.sn-product-card {
  background: var(--sn-paper);
  border: 1px solid var(--sn-border);
  border-radius: 28px;
  padding: 28px !important;
}
.sn-product-card-premium { background: linear-gradient(135deg, #ECE5F4, var(--sn-paper)); }

/* ── 18. Contact ───────────────────────────────────────────────── */
.sn-contact-form-section {
  background: var(--sn-paper);
  border-radius: 36px;
  border: 1px solid var(--sn-border);
}

/* ================================================================
   19. GALERIE HORIZONTALE — source unique de vérité
   Structure HTML :
     .sn-gallery-section
       .sn-gallery-shell         ← wrapper relatif pour les flèches
         .sn-gallery-prev        ← bouton flèche gauche
         .sn-horizontal-gallery  ← piste scrollable
           img × N
         .sn-gallery-next        ← bouton flèche droite
   ================================================================ */

/* Section parente */
.sn-gallery-section > .sn-kicker,
.sn-gallery-section > .sn-section-title {
  text-align: left !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Wrapper relatif — contient les flèches et la piste */
.sn-gallery-shell {
  position: relative;
  max-width: 1180px;
  margin: 28px auto 0;
}

/* Piste scrollable */
.sn-horizontal-gallery {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 8px 4px 22px;   /* espace pour l'ombre des images */
  scrollbar-width: thin;
  scrollbar-color: var(--sn-border) transparent;
  cursor: grab;
}
.sn-horizontal-gallery.sn-dragging,
.sn-horizontal-gallery:active { cursor: grabbing; }

/* Images dans la galerie */
.sn-horizontal-gallery img {
  flex: 0 0 clamp(240px, 34vw, 380px);
  width:  clamp(240px, 34vw, 380px);  /* cohérence avec flex-basis pour getStep() */
  height: clamp(320px, 46vw, 480px);
  object-fit: cover;
  border-radius: 28px;
  scroll-snap-align: start;
  box-shadow: 0 18px 50px rgba(29,29,29,.12);
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* Alternance : images paires légèrement plus étroites */
.sn-horizontal-gallery img:nth-child(even) {
  flex-basis: clamp(200px, 28vw, 320px);
  width:      clamp(200px, 28vw, 320px);
}

/* Flèches de navigation */
.sn-gallery-arrow {
  position: absolute;
  top: calc(50% - 11px);           /* centré sur la piste sans le padding-bottom */
  transform: translateY(-50%);
  z-index: 4;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(231,222,211,.92);
  border-radius: 999px;
  background: rgba(255,253,249,.88);
  color: var(--sn-text);
  box-shadow: 0 16px 40px rgba(31,26,20,.12);
  backdrop-filter: blur(10px);
  cursor: pointer;
  font-size: 2rem;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease, opacity .2s ease;
}
.sn-gallery-arrow:hover {
  transform: translateY(-50%) scale(1.07);
  background: var(--sn-paper);
  box-shadow: 0 22px 52px rgba(31,26,20,.16);
}

/* Positions gauche / droite — en dehors de la piste */
.sn-gallery-prev { left: -23px; }
.sn-gallery-next { right: -23px; }

/* ── 20. Animations ────────────────────────────────────────────── */
.sn-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.sn-animate.sn-visible,
.sn-animate.is-visible,
.editor-styles-wrapper .sn-animate {
  opacity: 1;
  transform: translateY(0);
}

/* ── 21. Blocs alignés au centre dans les sections gallery/services */
.sn-services-preview > .sn-kicker,
.sn-services-preview > .sn-section-title,
.sn-featured-work > .sn-kicker,
.sn-featured-work > .sn-section-title {
  text-align: left !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.sn-services-preview .sn-section-title {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── 22. Featured work — card fixes ─────────────────────────────── */
.sn-featured-work .sn-card {
  display: flex;
  flex-direction: column;
}
.sn-featured-work .sn-card-image {
  flex: 0 0 auto;
  height: clamp(230px, 24vw, 330px) !important;
  overflow: hidden !important;
}
.sn-featured-work .sn-card-image,
.sn-featured-work .sn-card-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.sn-featured-work .sn-card-content {
  flex: 1 1 auto;
  position: relative !important;
  z-index: 1;
  background: rgba(255,253,249,.97) !important;
  color: var(--sn-text) !important;
  transform: none !important;
}
.sn-featured-work .sn-card-content h3,
.sn-featured-work .sn-card-content p { color: var(--sn-text) !important; text-shadow: none !important; }

/* ── 23. Ressources mobile centré ──────────────────────────────── */
@media (max-width: 781px) {
  .sn-resources,
  .sn-resources .sn-kicker,
  .sn-resources .sn-section-title,
  .sn-resources p,
  .sn-resource-card,
  .sn-shop-resources .sn-kicker,
  .sn-shop-resources h2,
  .sn-shop-resources h3,
  .sn-shop-resources p { text-align: center !important; }

  .sn-resources .wp-block-buttons,
  .sn-shop-resources .wp-block-buttons,
  .sn-resource-card .wp-block-buttons { justify-content: center !important; }

  .sn-resource-image,
  .sn-resource-image img { margin-left: auto !important; margin-right: auto !important; }
}

/* ── 24. Media queries ─────────────────────────────────────────── */
@media (max-width: 999px) {
  .sn-mini-services-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sn-display-title { font-size: clamp(3rem, 10vw, 5rem); }
  .sn-hero-grid { gap: 36px !important; }
}

@media (max-width: 860px) {
  .sn-hero-gradient { padding: 40px 18px; border-radius: 0 0 28px 28px; }
  .sn-display-title { font-size: clamp(42px, 12vw, 60px); line-height: .95; }
  .sn-section-title { font-size: clamp(34px, 10vw, 48px); }
  .sn-card-grid, .sn-mini-services, .sn-method-grid { gap: 18px !important; }
  .sn-card { min-height: 360px; }
  .sn-card-image { height: 360px; }
  .sn-latest-posts { grid-template-columns: 1fr; }
  .sn-final-cta { border-radius: 28px; margin: 40px 0; padding: 44px 20px !important; }
  .sn-cta-title { font-size: clamp(44px, 13vw, 62px); }

  /* Galerie mobile : full-bleed + flèches masquées */
  .sn-gallery-shell {
    margin-left: calc(clamp(18px, 4vw, 48px) * -1);
    margin-right: calc(clamp(18px, 4vw, 48px) * -1);
  }
  .sn-horizontal-gallery {
    padding-left:  clamp(18px, 4vw, 48px);
    padding-right: clamp(18px, 4vw, 48px);
  }
  .sn-horizontal-gallery img {
    flex-basis: 76vw !important;
    width:      76vw !important;
    height: 400px;
  }
  .sn-horizontal-gallery img:nth-child(even) {
    flex-basis: 68vw !important;
    width:      68vw !important;
  }
  .sn-gallery-arrow { display: none; }
}

@media (max-width: 781px) {
  .sn-display-title  { font-size: clamp(2.72rem, 13vw, 4.4rem) !important; line-height: .93 !important; letter-spacing: -.045em !important; }
  .sn-section-title  { font-size: clamp(2rem, 10vw, 3.2rem) !important;   line-height: 1.02 !important; }
  .sn-card-grid      { display: grid !important; grid-template-columns: 1fr; }
  .sn-mini-services  { display: grid !important; grid-template-columns: 1fr; }
  .sn-mini-services-four { grid-template-columns: 1fr; }
  .sn-final-cta .sn-section-title { font-size: clamp(2.3rem, 11vw, 3.65rem) !important; }
}

@media (max-width: 480px) {
  .sn-display-title { font-size: clamp(2.45rem, 13vw, 3.65rem) !important; }
  .sn-section-title { font-size: clamp(1.9rem, 9.5vw, 2.75rem) !important; }
  .sn-buttons .wp-block-button { width: 100%; }
  .sn-buttons .wp-block-button__link { width: 100%; text-align: center; }
  .sn-horizontal-gallery img {
    flex-basis: 82vw !important;
    width:      82vw !important;
    height: 350px;
  }
}

/* ── 25. Mouvements réduits ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sn-animate,
  .sn-animate.sn-visible,
  .sn-animate.is-visible,
  .sn-card,
  .sn-button-primary .wp-block-button__link,
  .sn-button-secondary .wp-block-button__link {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}