/* =============================================================================
   O'Sesame — Page « Services Traiteur » (refonte design 2026-07-09)
   Restyle des 4 modules custom (hero, prestations, process, CTA) pour les
   aligner sur le système de design du site (crème, serif, brun, cartes).
   Les widgets impriment leur CSS en inline → on rehausse la spécificité
   et on force les propriétés visuelles avec !important.
   Réversible : retirer l'enqueue « OSESAME CATERING PAGE » dans functions.php.
   ============================================================================= */
:root {
  --ct-ink: #3a2a20;
  --ct-brown: #8a615d;
  --ct-brown-deep: #6d4b47;
  --ct-caramel: #b0895e;
  --ct-muted: #8a7b6e;
  --ct-line: #e7ddd2;
  --ct-cream: #f7f2ec;
  --ct-cream2: #fbf8f4;
  --ct-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --ct-sans: "Montserrat", "Inter", system-ui, sans-serif;
}

/* =========================== HERO ========================================= */
.sesame-hero-section {
  background: linear-gradient(180deg, var(--ct-cream) 0%, var(--ct-cream2) 100%) !important;
  padding: 72px 0 !important;
}
.sesame-hero-container {
  display: flex !important;
  align-items: center !important;
  gap: 48px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  flex-wrap: wrap;
}
.sesame-hero-content { flex: 1 1 0 !important; min-width: 300px !important; padding: 0 !important; }

/* Sur-titre injecté au-dessus du titre */
.sesame-hero-title::before {
  content: "Traiteur d'exception";
  display: block;
  font-family: var(--ct-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ct-caramel);
  margin-bottom: 16px;
}
.sesame-hero-title {
  font-family: var(--ct-serif) !important;
  font-size: clamp(2.6rem, 5.2vw, 4.2rem) !important;
  font-weight: 600 !important;
  line-height: 1.02 !important;
  color: var(--ct-ink) !important;
  margin: 0 0 20px !important;
}
.sesame-hero-description {
  font-family: var(--ct-sans) !important;
  font-size: 16.5px !important;
  line-height: 1.75 !important;
  color: var(--ct-muted) !important;
  max-width: 46ch;
  margin-bottom: 32px !important;
}
.sesame-hero-button {
  display: inline-flex !important;
  align-items: center;
  background: var(--ct-brown) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 16px 30px !important;
  font-family: var(--ct-sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: 0 16px 30px -14px rgba(138, 97, 93, .75);
  transition: background .25s ease, transform .15s ease, box-shadow .25s ease;
}
.sesame-hero-button:hover {
  background: var(--ct-brown-deep) !important;
  transform: translateY(-2px);
}
/* L'image est une div `position:absolute; right:0` (bloc décoratif de la
   section), pas une colonne de la grille. On en fait un panneau plein-cadre
   à droite, arrondi côté gauche. */
.sesame-hero-image {
  position: absolute !important;
  top: 28px !important;
  right: 0 !important;
  bottom: 28px !important;
  width: 47% !important;
  height: auto !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: 0 44px 80px -46px rgba(58, 42, 32, .7) !important;
}
.sesame-hero-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}
/* Le texte ne doit jamais passer sous l'image */
.sesame-hero-container { position: relative; z-index: 1; }
.sesame-hero-content { max-width: 560px; }

/* ================ EN-TÊTES DE SECTION (partagés) ========================== */
.sesame-badge {
  display: inline-block !important;
  background: var(--ct-cream) !important;
  border: 1px solid var(--ct-line) !important;
  color: var(--ct-caramel) !important;
  border-radius: 999px !important;
  padding: 7px 16px !important;
  font-family: var(--ct-sans) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}
.sesame-catering-title,
.sesame-cta-title {
  font-family: var(--ct-serif) !important;
  font-weight: 600 !important;
  color: var(--ct-ink) !important;
  line-height: 1.08 !important;
  letter-spacing: .005em;
}
.sesame-catering-title { font-size: clamp(2.1rem, 4vw, 3.1rem) !important; margin: 18px 0 14px !important; }
.sesame-catering-description {
  font-family: var(--ct-sans) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: var(--ct-muted) !important;
  max-width: 62ch;
  margin: 0 auto !important;
}

/* Alternance de fonds pour le rythme */
.sesame-catering-section { background: #fff !important; padding: 84px 0 !important; }
.sesame-catering-section + .sesame-catering-section { background: var(--ct-cream2) !important; }

/* ==================== CARTES PRESTATIONS ================================== */
.sesame-catering-grid { gap: 30px !important; }

.sesame-catering-section .sesame-catering-service {
  background: #fff !important;
  border: 1px solid var(--ct-line) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 16px 34px -26px rgba(58, 42, 32, .5) !important;
  display: flex;
  flex-direction: column;
  transition: transform .35s cubic-bezier(.2, .6, .2, 1), box-shadow .35s ease, border-color .35s ease;
}
.sesame-catering-section .sesame-catering-service:hover {
  transform: translateY(-6px);
  border-color: var(--ct-caramel) !important;
  box-shadow: 0 30px 50px -28px rgba(58, 42, 32, .5) !important;
}
.sesame-catering-service-image {
  height: 240px !important;
  overflow: hidden !important;
  position: relative;
}
.sesame-catering-service-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .6s cubic-bezier(.2, .6, .2, 1);
}
.sesame-catering-service:hover .sesame-catering-service-image img { transform: scale(1.06); }

.sesame-catering-service-content {
  padding: 26px 24px 24px !important;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.sesame-catering-service-title {
  font-family: var(--ct-serif) !important;
  font-size: 1.7rem !important;
  font-weight: 600 !important;
  color: var(--ct-ink) !important;
  margin: 0 0 12px !important;
  line-height: 1.15 !important;
}
.sesame-catering-service-description {
  font-family: var(--ct-sans) !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: var(--ct-muted) !important;
  margin: 0 0 20px !important;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sesame-catering-service-link {
  margin-top: auto;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-family: var(--ct-sans) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ct-brown) !important;
  text-decoration: none !important;
  transition: gap .25s ease, color .2s ease;
}
.sesame-catering-service-link:hover { gap: 14px; color: var(--ct-brown-deep) !important; }
.sesame-catering-service-link svg { width: 16px; height: 16px; }

/* ==================== ÉTAPES « COMMENT ÇA MARCHE » ======================== */
.sesame-catering-step {
  background: #fff !important;
  border: 1px solid var(--ct-line) !important;
  border-radius: 18px !important;
  padding: 34px 26px !important;
  box-shadow: 0 16px 34px -28px rgba(58, 42, 32, .5) !important;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.sesame-catering-step:hover {
  transform: translateY(-5px);
  border-color: var(--ct-caramel) !important;
  box-shadow: 0 28px 48px -30px rgba(58, 42, 32, .5) !important;
}
.sesame-catering-step-number {
  width: 58px !important;
  height: 58px !important;
  line-height: 58px !important;
  border-radius: 50% !important;
  background: var(--ct-brown) !important;
  color: #fff !important;
  font-family: var(--ct-serif) !important;
  font-size: 1.7rem !important;
  font-weight: 600 !important;
  box-shadow: 0 12px 24px -12px rgba(138, 97, 93, .8);
  margin: 0 auto 20px !important;
}
.sesame-catering-step-title {
  font-family: var(--ct-serif) !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--ct-ink) !important;
  margin-bottom: 12px !important;
}
.sesame-catering-step-description {
  font-family: var(--ct-sans) !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  color: var(--ct-muted) !important;
}

/* ============================== CTA ====================================== */
.sesame-cta-section {
  background: transparent !important;
  padding: 20px 0 90px !important;
}
.sesame-cta-container {
  background: linear-gradient(135deg, #8a615d 0%, #6d4b47 100%) !important;
  border-radius: 26px !important;
  padding: 72px 40px !important;
  box-shadow: 0 40px 70px -40px rgba(58, 42, 32, .8);
  position: relative;
  overflow: hidden;
  max-width: 1150px !important;
  width: calc(100% - 48px) !important;
  margin: 0 auto !important;
}
/* voile lumineux discret */
.sesame-cta-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .14) 0%, transparent 60%);
  pointer-events: none;
}
.sesame-cta-title {
  color: #fff !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  margin-bottom: 16px !important;
}
.sesame-cta-description {
  font-family: var(--ct-sans) !important;
  font-size: 16.5px !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, .82) !important;
  max-width: 60ch;
  margin: 0 auto 34px !important;
}
.sesame-cta-buttons { gap: 16px !important; flex-wrap: wrap; }
.sesame-cta-button-primary {
  background: #fff !important;
  color: var(--ct-brown) !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 16px 32px !important;
  font-family: var(--ct-sans) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .5);
  transition: transform .15s ease, background .2s ease;
}
.sesame-cta-button-primary:hover { transform: translateY(-2px); background: var(--ct-cream) !important; }
.sesame-cta-button-secondary {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  border-radius: 14px !important;
  padding: 16px 32px !important;
  font-family: var(--ct-sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.sesame-cta-button-secondary:hover {
  background: rgba(255, 255, 255, .12) !important;
  border-color: #fff !important;
  transform: translateY(-2px);
}

/* ================= PARALLAX + APPARITIONS AU SCROLL ======================= */
/* Parallax = déplacement de la photo DANS le cadre (background-position),
   le cadre arrondi reste immobile. `cover` absorbe le décalage. */
.sesame-hero-image { will-change: background-position; }

.ct-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.2, .6, .2, 1), transform .7s cubic-bezier(.2, .6, .2, 1);
}
.ct-reveal.is-in {
  opacity: 1;
  transform: none;
}
/* Le hover des cartes ne doit pas se battre avec l'apparition */
.sesame-catering-service.ct-reveal:not(.is-in):hover,
.sesame-catering-step.ct-reveal:not(.is-in):hover { transform: translateY(26px); }

@media (prefers-reduced-motion: reduce) {
  .ct-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================ RESPONSIVE ================================= */
@media (max-width: 900px) {
  .sesame-hero-section { padding: 48px 0 !important; }
  .sesame-hero-container { gap: 32px !important; }
  /* Mobile : l'image repasse en bloc sous le texte */
  .sesame-hero-image {
    position: relative !important;
    width: 100% !important;
    height: 260px !important;
    border-radius: 20px !important;
    margin-top: 28px;
    box-shadow: 0 30px 50px -34px rgba(58, 42, 32, .6) !important;
  }
  .sesame-hero-content { min-width: 0 !important; max-width: none; }
  .sesame-catering-section { padding: 60px 0 !important; }
  .sesame-cta-container { padding: 52px 24px !important; border-radius: 20px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .sesame-hero-image img,
  .sesame-catering-service,
  .sesame-catering-step,
  .sesame-cta-button-primary,
  .sesame-cta-button-secondary { transition: none !important; }
}