/* =========================================================
   SIGNATURE ÉDITORIALE — VERSION ULTRA DESIGN
   ========================================================= */

.signature-editorial-section{
  position:relative;
  padding:110px 0 120px;
  background:
    radial-gradient(circle at 20% 20%, rgba(167,132,92,0.08), transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(167,132,92,0.06), transparent 35%),
    linear-gradient(180deg, #f8f5f0 0%, #f3eee7 100%);
  overflow:hidden;
}

.signature-editorial-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,0.25), rgba(255,255,255,0.25)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='rgba(80,60,40,0.03)' stroke-width='1'%3E%3Cpath d='M0 90h180'/%3E%3Cpath d='M90 0v180'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none;
}

.signature-editorial-head{
  position:relative;
  z-index:2;
  max-width:820px;
  margin:0 auto 30px;

}

.signature-kicker{
  display:inline-block;
  margin-bottom:16px;
  padding:8px 14px;
  border:1px solid rgba(167,132,92,0.28);
  border-radius:999px;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#8f6b46;
  background:rgba(255,255,255,0.65);
  backdrop-filter:blur(6px);
}

.signature-editorial-head h2{
  margin:0 0 18px;
  font-size:clamp(34px, 5vw, 40px);
  line-height:1.02;
  letter-spacing:-0.03em;
  color:#1f1a17;
}

.signature-intro{
  max-width:700px;
  margin:0 auto;
  font-size:18px;
  line-height:1.8;
  color:#5f5449;
    text-align: center !important;
}

/* =========================================================
   STAGE
   ========================================================= */

.signature-editorial-stage{
  position:relative;
  z-index:2;
  max-width:1320px;
  min-height:860px;
  margin:0 auto;
}

/* halos */
.signature-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(40px);
  pointer-events:none;
}

.signature-glow-1{
  width:360px;
  height:360px;
  top:140px;
  left:50%;
  transform:translateX(-55%);
  background:rgba(167,132,92,0.16);
}

.signature-glow-2{
  width:240px;
  height:240px;
  top:300px;
  left:50%;
  transform:translateX(-10%);
  background:rgba(120,70,30,0.10);
}

/* image centrale */
.signature-core{
  position:absolute;
  top:150px;
  left:50%;
  transform:translateX(-50%);
  width:min(34vw, 470px);
  aspect-ratio:1 / 1.18;
}

.signature-core-image{
  position:relative;
  width:100%;
  height:100%;
  border-radius:42% 58% 54% 46% / 39% 36% 64% 61%;
  overflow:hidden;
  box-shadow:
    0 30px 80px rgba(45,30,18,0.18),
    0 8px 24px rgba(45,30,18,0.08);
  animation:signatureMorph 12s ease-in-out infinite;
}

.signature-core-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.00) 15%, rgba(0,0,0,0.12) 100%),
    radial-gradient(circle at 25% 20%, rgba(255,255,255,0.24), transparent 35%);
  pointer-events:none;
}

.signature-core-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.04);
}

.signature-core-badge{
  position:absolute;
  left:50%;
  bottom:-28px;
  transform:translateX(-50%);
  white-space:nowrap;
  padding:12px 20px;
  border-radius:999px;
  background:rgba(255,255,255,0.84);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  font-size:13px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#6f563b;
}

/* =========================================================
   CARTES
   ========================================================= */

.signature-card{
  position:absolute;
  width:min(26vw, 300px);
  padding:28px 28px 26px;
  border:1px solid rgba(167,132,92,0.16);
  border-radius:28px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(14px);
  box-shadow:
    0 18px 50px rgba(30,18,10,0.08),
    inset 0 1px 0 rgba(255,255,255,0.8);
  transition:transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}

.signature-card:hover{
  transform:translateY(-8px);
  box-shadow:
    0 26px 70px rgba(30,18,10,0.12),
    inset 0 1px 0 rgba(255,255,255,0.9);
  background:rgba(255,255,255,0.82);
}

.signature-card-number{
  display:block;
  margin-bottom:16px;
  font-size:12px;
  letter-spacing:0.20em;
  text-transform:uppercase;
  color:#aa8660;
}

.signature-card h3{
  margin:0 0 12px;
  font-size:26px;
  line-height:1.1;
  color:#211b17;
}

.signature-card p{
  margin:0;
  font-size:15px;
  line-height:1.8;
  color:#5e5348;
}

/* positions desktop */
.card-acidite{
  top:30px;
  left:70px;
}

.card-maturite{
  top:90px;
  right:70px;
}

.card-transformation{
  bottom:70px;
  left:110px;
}

.card-expression{
  bottom:40px;
  right:110px;
}

/* =========================================================
   LIGNES DE LIAISON
   ========================================================= */

.signature-line{
  position:absolute;
  display:block;
  height:1px;
  background:linear-gradient(90deg, rgba(167,132,92,0), rgba(167,132,92,0.45), rgba(167,132,92,0));
  transform-origin:left center;
  pointer-events:none;
}

.line-1{
  width:240px;
  top:250px;
  left:300px;
  transform:rotate(12deg);
}

.line-2{
  width:240px;
  top:250px;
  right:300px;
  transform:rotate(-12deg);
}

.line-3{
  width:250px;
  bottom:220px;
  left:330px;
  transform:rotate(-18deg);
}

.line-4{
  width:250px;
  bottom:220px;
  right:330px;
  transform:rotate(18deg);
}

/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes signatureMorph{
  0%{
    border-radius:42% 58% 54% 46% / 39% 36% 64% 61%;
  }
  33%{
    border-radius:50% 50% 40% 60% / 44% 58% 42% 56%;
  }
  66%{
    border-radius:58% 42% 56% 44% / 36% 42% 58% 64%;
  }
  100%{
    border-radius:42% 58% 54% 46% / 39% 36% 64% 61%;
  }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1190px){

  .signature-editorial-stage{
    min-height:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    align-items:start;
  }

  .signature-core{
    position:relative;
    top:auto;
    left:auto;
    transform:none;
    width:100%;
    max-width:420px;
    margin:0 auto 20px;
    grid-column:1 / -1;
  }

  .signature-line,
  .signature-glow-2{
    display:none;
  }

  .signature-glow-1{
    top:80px;
    left:50%;
    transform:translateX(-50%);
  }

  .signature-card{
    position:relative;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    width:100%;
  }
}

@media (max-width: 767px){

  .signature-editorial-section{
    padding:85px 0 90px;
  }

  .signature-editorial-head{
    margin-bottom:40px;
  }

  .signature-editorial-head h2{
    font-size:34px;
  }

  .signature-intro{
    font-size:16px;
    line-height:1.7;
  }

  .signature-editorial-stage{
    grid-template-columns:1fr;
    gap:18px;
  }

  .signature-core{
    max-width:100%;
  }

  .signature-core-badge{
    font-size:11px;
    letter-spacing:0.10em;
    padding:10px 16px;
  }

  .signature-card{
    padding:22px 20px;
    border-radius:22px;
  }

  .signature-card h3{
    font-size:22px;
  }

  .signature-card p{
    font-size:14px;
    line-height:1.7;
  }

  .signature-glow-1{
    width:220px;
    height:220px;
    top:40px;
  }
}










.signature-video-section {
  padding: 100px 0;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.video-item {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}

.video-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-item span {
  position: absolute;
  bottom: 10px;
  left: 15px;
  color: white;
  font-size: 14px;
}




.boxed-container-title {
  width: 100% !important;

}


.boxed-container-title p {
  text-align: center !important;
}

.boxed-container-title h4 {
  text-align: center !important;
  padding-bottom: 30px !important;
}