.elementor-27457 .elementor-element.elementor-element-097576b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-27457 .elementor-element.elementor-element-143ad47{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-8b5fd52 *//* ===== Page Noël – Thème Vert Sapin / Rouge – Scope local ===== */
:root {
  --sapin: #0f3d2e;     /* vert sapin */
  --sapin-2: #125443;   /* vert secondaire */
  --rouge: #c62828;     /* rouge Noël */
  --or: #d2b48c;        /* doré doux (ornements) */
  --blanc: #ffffff;
  --ink: #1a1a1a;
  --shadow: 0 6px 18px rgba(0,0,0,.10);
}

.page-noel-bg { background: var(--sapin); padding: 18px 0 28px; }
.page-noel { max-width: 820px; margin: 0 auto; padding: 16px; }

/* Rubans décoratifs (boules) */
.page-noel .garland { display:flex; justify-content:space-between; gap:10px; margin-bottom:12px; }
.page-noel .garland.bottom { margin-top:16px; }
.page-noel .garland .orn{
  width:14px; height:14px; border-radius:50%;
  box-shadow: 0 1px 0 rgba(0,0,0,.25), inset 0 0 0 2px rgba(255,255,255,.25);
  display:inline-block;
}
.page-noel .garland .o1{ background:var(--rouge); }
.page-noel .garland .o2{ background:#1faa00; }
.page-noel .garland .o3{ background:#ff6f00; }
.page-noel .garland .o4{ background:#00897b; }
.page-noel .garland .o5{ background:#ad1457; }
.page-noel .garland .o6{ background:#1976d2; }

/* Cartes/blocs */
.page-noel .hero,
.page-noel .benefits,
.page-noel .process,
.page-noel .pricing-faq,
.page-noel .discover,
.page-noel .booking {
  background: var(--blanc);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 20px;
  margin: 16px 0;
}

/* ==========================================================
   HERO PRINCIPAL — Bannière Noël (desktop + mobile 3:4)
   ========================================================== */
.page-noel .hero-banner {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin: 20px 0;
  box-shadow: 0 6px 18px rgba(0,0,0,.1);
  background-color: #2f3a2e; /* fond de secours uniquement */
}

/* Image desktop/tablette (on garde le <img>) */
.page-noel .hero-banner img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

/* Overlay doux desktop (inchangé) */
.page-noel .hero-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(20,35,25,0.22) 0%,
    rgba(20,35,25,0.12) 38%,
    rgba(20,35,25,0.00) 70%
  );
  pointer-events: none;
}

/* Contenu texte (inchangé) */
.page-noel .hero-banner .hero-content {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
  color: #f5f3ef;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
  max-width: 540px;
}
.page-noel .hero-banner h1 {
  font-size: 1.9rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: #fff;
}
.page-noel .hero-banner .lead {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 16px;
  color: #f8f8f8;
}
.page-noel .hero-banner .cta {
  display: inline-block;
  background: #c62828;
  color: #fff;
  padding: 12px 20px;
  border-radius: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background .25s ease;
}
.page-noel .hero-banner .cta:hover { background: #a41f1f; }
.page-noel .hero-banner .notice {
  font-size: .9rem;
  color: #e0ddd5;
  opacity: .9;
  margin-top: 8px;
}

/* ==========================================================
   MOBILE — remplace l'image par la bannière verticale 3:4
   ========================================================== */
@media (max-width: 768px) {
  .page-noel .hero-banner {
    min-height: 460px;
    background:
      url('https://www.jpbloch.fr/wp-content/uploads/2025/11/banniere_noel_mobil.webp')
      center top / cover no-repeat;
  }
  /* On cache le <img> en mobile, on garde tout le reste */
  .page-noel .hero-banner img { display: none; }

  /* Overlay mobile (inchangé) */
  .page-noel .hero-banner::after {
    background: linear-gradient(
      180deg,
      rgba(15,61,46,0) 35%,
      rgba(15,61,46,.45) 70%,
      rgba(15,61,46,.75) 100%
    );
  }

  /* Cartouche texte en bas (inchangé) */
  .page-noel .hero-banner .hero-content {
    left: 14px; right: 14px; bottom: 16px;
    top: auto; transform: none; max-width: none; text-align: center;
    padding: 12px 14px;
    background: rgba(15,61,46,.58);
    border-radius: 12px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
  }
  .page-noel .hero-banner h1 { font-size: 1.45rem; margin: 0 0 8px; }
  .page-noel .hero-banner .lead { font-size: .98rem; margin: 0 0 10px; }
  .page-noel .hero-banner .cta { margin-top: 6px; }
}
/* --- PATCH chevauchement image mobile --- */
@media (max-width:768px){
  .page-noel .hero-banner img{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}


/* Process */
.page-noel .steps { counter-reset:s; list-style:none; padding-left:0; margin:0; }
.page-noel .steps li { counter-increment:s; margin:10px 0; padding-left:28px; position:relative; }
.page-noel .steps li::before{
  content: counter(s); position:absolute; left:0; top:0;
  width:22px; height:22px; border-radius:50%;
  background: var(--sapin-2); color: var(--blanc);
  display:inline-flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700;
}
.page-noel .reassure { margin-top:8px; color:#2a2a2a; }

/* ===== PRICING + FAQ : cadres colorés, angles ciselés, FAQ plus étroite ===== */
.page-noel .pricing-faq{
  display:grid;
  grid-template-columns: 1.4fr 1fr; /* FAQ plus étroite */
  gap:16px;
}

/* Cadre générique */
.page-noel .card.is-framed{
  position:relative;
  background:#fbfaf7;            /* moins blanc */
  border-radius:16px;
  padding:20px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  isolation:isolate;
}

/* Biseau simple (angles ciselés) via pseudo-élément */
.page-noel .card.is-framed::before{
  content:"";
  position:absolute; inset:0;
  border-radius:16px;
  border:2px solid currentColor; /* hérite de is-green/is-red */
  /* petites encoches */
  --s:14px;
  -webkit-mask:
    conic-gradient(#000 0 25%,#0000 0) 0 0/var(--s) var(--s) no-repeat,
    conic-gradient(#000 0 25%,#0000 0) 100% 0/var(--s) var(--s) no-repeat,
    conic-gradient(#000 0 25%,#0000 0) 0 100%/var(--s) var(--s) no-repeat,
    conic-gradient(#000 0 25%,#0000 0) 100% 100%/var(--s) var(--s) no-repeat,
    linear-gradient(#000 0 0);
  mask: 
    conic-gradient(#000 0 25%,#0000 0) 0 0/var(--s) var(--s) no-repeat,
    conic-gradient(#000 0 25%,#0000 0) 100% 0/var(--s) var(--s) no-repeat,
    conic-gradient(#000 0 25%,#0000 0) 0 100%/var(--s) var(--s) no-repeat,
    conic-gradient(#000 0 25%,#0000 0) 100% 100%/var(--s) var(--s) no-repeat,
    linear-gradient(#000 0 0);
  pointer-events:none;
}

/* Thèmes couleur */
.page-noel .is-green{ color:#125443; } /* vert sapin secondaire pour le cadre */
.page-noel .is-red  { color:#c62828; } /* rouge pour le cadre FAQ */

/* Contenu tarif */
.page-noel .price-tag{ font-size:1.6rem; margin:.2rem 0 1rem; color:#0f3d2e; }
.page-noel .bullets{ margin:0 0 12px; }
.page-noel .opts{ margin:0 0 12px; }
.page-noel .cta.ghost{
  display:inline-block;
  margin: 4px auto 8px;
  padding:12px 18px;
  border-radius:16px;
  border:2px solid #c62828;
  color:#c62828; text-decoration:none; font-weight:700;
}

/* FAQ compacte */
.page-noel .faq{ max-width: 440px; } /* moins large */
.page-noel .faq h2{ margin-top:0; }
.page-noel .faq details{
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  background:#fff;
  padding:10px 12px;
  margin:8px 0;
}
.page-noel .faq summary{ cursor:pointer; font-weight:600; }
.page-noel .faq p{ margin:8px 0 0; font-size:.95rem; }

/* Responsive */
@media (max-width:860px){
  .page-noel .pricing-faq{ grid-template-columns:1fr; }
  .page-noel .faq{ max-width:100%; }
}
/* Remet tout à gauche par défaut dans les deux cartes */
.page-noel .pricing-faq .price,
.page-noel .pricing-faq .faq { text-align: left; }

/* Titres centrés uniquement */
.page-noel .pricing-faq .price h2,
.page-noel .pricing-faq .faq h2 { text-align: center; }

/* Centre le prix (même si c'est une "pilule") */
.page-noel .pricing-faq .price .price-tag{
  display: flex;                 /* force le centrage du contenu */
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

/* Correction centrage CTA sans élargir le bouton */
.page-noel .pricing-faq .price .cta {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 12px auto 10px;
  width: auto;           /* largeur du bouton conservée */
  max-width: fit-content; /* empêche tout étirement */
}



/* Laisse le reste aligné à gauche */
.page-noel .pricing-faq .price .bullets,
.page-noel .pricing-faq .price .opts,
.page-noel .pricing-faq .price .small,
.page-noel .pricing-faq .faq details,
.page-noel .pricing-faq .faq p { text-align: left; }


/* Découverte */
.page-noel .discover .grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.page-noel .discover .tile{ position:relative; display:block; border-radius:16px; overflow:hidden; }
.page-noel .discover .tile img{ width:100%; height:auto; display:block; }
.page-noel .discover .tile span{
  position:absolute; left:0; right:0; bottom:0; padding:10px 12px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
  color:#fff; font-weight:700;
}

/* Booking */
.page-noel .booking-note { margin-top:10px; }

/* Responsive */
@media (max-width: 860px){
  .page-noel { padding: 12px; }
  .page-noel .pricing-faq { grid-template-columns:1fr; }
  .page-noel .discover .grid { grid-template-columns:1fr 1fr; }
}
/* === HERO BANNIÈRE NOËL === */
.page-noel .hero-banner {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin: 20px 0;
  box-shadow: 0 6px 18px rgba(0,0,0,.1);
  background-color: #2f3a2e; /* vert sapin foncé en fond de secours */
}

/* image de fond */
.page-noel .hero-banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* Dégradé très léger (desktop) */
.page-noel .hero-banner::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(
    90deg,
    rgba(20,35,25,0.22) 0%,
    rgba(20,35,25,0.12) 38%,
    rgba(20,35,25,0.00) 70%
  );
  pointer-events:none;
}

/* Lisibilité texte sans assombrir l’image */
.page-noel .hero-banner .hero-content{
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}

/* Mobile : un peu plus présent mais toujours clair */
@media (max-width:768px){
  .page-noel .hero-banner::after{
    background: linear-gradient(
      180deg,
      rgba(20,35,25,0.28) 0%,
      rgba(20,35,25,0.10) 55%,
      rgba(20,35,25,0.00) 100%
    );
  }
}


/* contenu */
.page-noel .hero-banner .hero-content {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
  color: #f5f3ef; /* beige clair pour rappeler la jute */
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
  max-width: 540px;
}

.page-noel .hero-banner h1 {
  font-size: 1.9rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: #fff;
}

.page-noel .hero-banner .lead {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 16px;
  color: #f8f8f8;
}

/* bouton rouge bien visible */
.page-noel .hero-banner .cta {
  display: inline-block;
  background: #c62828;
  color: #fff;
  padding: 12px 20px;
  border-radius: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background .25s ease;
}

.page-noel .hero-banner .cta:hover {
  background: #a41f1f;
}

.page-noel .hero-banner .notice {
  font-size: .9rem;
  color: #e0ddd5;
  opacity: .9;
  margin-top: 8px;
}

/* mobile */
@media (max-width:768px) {
  .page-noel .hero-banner .hero-content {
    left: 8%;
    top: auto;
    bottom: 10%;
    transform: none;
    max-width: 85%;
  }
  .page-noel .hero-banner h1 {
    font-size: 1.4rem;
  }
  .page-noel .hero-banner::after {
    background: linear-gradient(
      180deg,
      rgba(20,35,25,0.7) 0%,
      rgba(20,35,25,0.4) 50%,
      rgba(20,35,25,0.1) 100%
    );
  }
}
/* Bloc Découverte — style LinkedIn (voile blanc bas) */
.page-noel .bloc-decouverte{ max-width:820px; margin:32px auto 0; }
.page-noel .bloc-decouverte h2{ text-align:center; margin:0 0 14px; }

/* 3 cartes desktop, 2 tablette, 1 mobile */
.page-noel .bloc-decouverte .cards{
  display:grid; gap:12px;
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:980px){ .page-noel .bloc-decouverte .cards{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .page-noel .bloc-decouverte .cards{ grid-template-columns:1fr;} }

/* Carte */
.page-noel .bloc-decouverte .card{
  position:relative; display:block; border-radius:16px; overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.08); background:#f4f4f4;
  aspect-ratio:4/5;             /* format plus compact, comme LinkedIn */
  text-decoration:none;
}
.page-noel .bloc-decouverte .card img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:center;
  transform:scale(1); transition:transform .3s ease;
}
/* recadrage vertical spécifique pour la bannière Tirages */
.page-noel .bloc-decouverte .card.is-tirages img{ object-position:center 40%; }

/* Voile blanc bas + texte sombre */
.page-noel .bloc-decouverte .card .caption{
  position:absolute; left:8px; right:8px; bottom:8px;
  padding:10px 12px; text-align:center;
  background:rgba(255,255,255,.92); color:#111;
  border-radius:12px; font-weight:700; line-height:1.22;
}
.page-noel .bloc-decouverte .card .caption small{
  display:block; font-weight:600; opacity:.95; margin-top:2px;
}

/* Hover / focus */
.page-noel .bloc-decouverte .card:hover img{ transform:scale(1.04); }
.page-noel .bloc-decouverte .card:focus-visible{ outline:3px solid #f9621d; outline-offset:3px; }
/* Titre "Découverte" — couleur adaptée au fond vert de la page Noël */
.page-noel .bloc-decouverte h2{
  color:#fff;              /* blanc lisible sur fond vert */
  text-shadow:0 1px 2px rgba(0,0,0,.25); /* lisibilité */
}
/* Réduit le grand fond vert sur la page Noël, sans toucher au HTML */
.page-noel-bg{
  position: relative;
  background: transparent; /* on retire le plein écran */
}
.page-noel-bg::before{
  content:"";
  position:absolute;
  top: 12px;               /* respiration haut */
  bottom: 16px;            /* respiration bas */
  left: 50%;
  transform: translateX(-50%);
  width: min(860px, calc(100% - 24px)); /* panneau vert centré, plus étroit */
  background: var(--sapin);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,.10);
  z-index: 0;
}
/* remet le contenu au-dessus du panneau vert */
.page-noel{ position: relative; z-index: 1; }
/* si besoin, resserre le contenu pour matcher ta charte */
.page-noel{ max-width: 820px; padding: 16px; margin: 0 auto; }
/* === HERO Noël — fix mobile : titre lisible + CTA === */
@media (max-width: 768px){
  .page-noel .hero-banner{
    position: relative;
    min-height: 460px;                 /* hauteur lisible */
    background-position: center top !important;
  }
  .page-noel .hero-banner img{
    width:100%; height:100%;
    object-fit: cover;
    object-position: 50% 18%;          /* cadre le sapin + espace pour le titre */
    display:block;
  }
  /* Renforce l’assombrissement bas pour le texte */
  .page-noel .hero-banner::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(180deg,
      rgba(15,61,46,0) 35%,
      rgba(15,61,46,.45) 70%,
      rgba(15,61,46,.75) 100%);
    pointer-events:none;
  }
  /* Bloc texte posé en bas, lisible */
  .page-noel .hero-banner .hero-content{
    position:absolute; left:14px; right:14px; bottom:16px;
    transform:none; max-width:none; text-align:center;
    padding:12px 14px;
    background: rgba(15,61,46,.58);    /* léger fond pour contraste */
    border-radius:12px;
    color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35);
  }
  .page-noel .hero-banner h1{ font-size:1.45rem; margin:0 0 8px; color:#fff; }
  .page-noel .hero-banner .lead{ font-size:.98rem; margin:0 0 10px; color:#f5f5f5; }
  .page-noel .hero-banner .cta{
    display:inline-block; width:auto;  /* bouton non étiré */
    margin-top:6px;
  }
}/* End custom CSS */