/* ==================== COMPOSANTS (ovale, features, disques, diagonales, atouts, détente) ==================== */

/* Zigzag / variantes */
.zigzag-section{ position:relative; overflow:hidden; }
.section-alt{ background:var(--beige); }
.icon-leaf{
  width:26px; height:26px; display:inline-block;
  background: radial-gradient(circle at 30% 30%, var(--sage) 40%, transparent 41%) top left/60% 60% no-repeat,
              radial-gradient(circle at 70% 30%, var(--sage) 40%, transparent 41%) top right/60% 60% no-repeat;
  opacity:.85; margin-top:.35rem;
}

/* Ovale */
.oval{
  width:min(100%, 520px);
  aspect-ratio:3/4;
  border-radius:30%/50% !important;
  overflow:hidden;
  border:6px solid var(--sage);
  box-shadow:0 6px 14px rgba(0,0,0,.10);
  background:#fff;
  position:relative;
  z-index:3;
}
.oval img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:brightness(95%);
  transition:transform .5s ease;
  border-radius:0 !important;
}
.feature__media img{ border-radius:0 !important; }
@media (hover:hover){ .oval:hover img{ transform:scale(1.02); } }
.oval--gold{ border-color:var(--gold); }

/* Feature (texte + visuel) */
.feature{ padding: 2.5rem 0; position: relative; }
.feature__inner{ display:grid; grid-template-columns: 1.05fr .95fr; align-items:center; gap:3rem; }
.feature--left .feature__inner{ grid-template-columns: .95fr 1.05fr; }
.feature--left .feature__text{ order:2; } .feature--left .feature__media{ order:1; }
.feature__title{ color:var(--taupe); font-family:"Alex Brush",cursive; font-size:2rem; margin:.25rem 0 1rem; }
.feature__text p{ color:var(--ink); margin:0 0 1rem; }
.feature__media .oval{ margin:0 auto; }
@media (max-width: 992px){
  .feature__inner{ grid-template-columns:1fr; gap:1.75rem; }
  .feature--left .feature__text{ order:1; }
  .feature--left .feature__media{ order:2; }
}

/* ==================== DISQUES ==================== */
.discs .section-title{
  text-align:center;
  margin-bottom:1.25rem;
}

/* grille centrée */
.discs__grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:2rem;
  justify-items:center;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.disc{
  width:160px;
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  position:relative;
  text-decoration:none;
  outline:4px solid var(--beige);
  background:#fff;
  transition: transform .25s ease, outline-color .25s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,.08), inset 0 0 0 3px rgba(255,255,255,.7);
}
.disc img{
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(1.02);
  display:block;
}
.disc span{
  position:absolute;
  left:50%;
  bottom:.5rem;
  transform:translateX(-50%);
  background: rgba(255,255,255,.9);
  color:#3b3b3b !important;
  padding:.25rem .5rem;
  border-radius:999px;
  font-weight:700;
  font-size:.92rem;
}
.disc:hover{
  outline-color: var(--gold);
  transform: translateY(-3px);
}

@media (max-width: 992px){
  .discs__grid{
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}
@media (max-width: 600px){
  .disc{ width:140px; }
}

/* ==================== SÉPARATEURS TRIANGULAIRES ==================== */
.cut{
  height: clamp(110px, 13vw, 220px);
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  background: var(--c-bottom, var(--paper));
  overflow: visible;
}
.cut--right::before, .cut--left::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--c-top, var(--beige));
}
.cut--right::before{ clip-path: polygon(0 0, 100% 0, 100% 42%, 0 100%); }
.cut--left::before { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 58%); }
.cut--paper-to-beige{ --c-top: var(--paper); --c-bottom: var(--beige); }
.cut--beige-to-paper{ --c-top: var(--beige); --c-bottom: var(--paper); }
@media (max-width: 768px){ .cut{ height: clamp(80px, 16vw, 140px); } }

/* ==================== DIAGONALES FULL-BLEED ==================== */
.diag-bg{ position: relative; z-index: 0; padding: clamp(1.6rem, 4vw, 3.6rem) 0; }
.diag-bg::before{
  content:""; position:absolute; inset:0; left:50%; width:100vw; margin-left:-50vw; z-index:-1; pointer-events:none;
  --diag-angle: 165deg; --diag-split: 52%; --diag-top: var(--paper); --diag-bottom: var(--beige);
  background: linear-gradient(var(--diag-angle), var(--diag-top) 0 var(--diag-split), var(--diag-bottom) var(--diag-split));
}
.diag--paper-to-beige{ --diag-top: var(--paper); --diag-bottom: var(--beige); }
.diag--beige-to-paper{ --diag-top: var(--beige); --diag-bottom: var(--paper); }
.diag--invert{ --diag-angle: -165deg; }

/* ==================== DÉTENTE / ATOUTS / CTA ==================== */
.section-detente{ background: var(--beige); }
.detente-title{
  font-family:"Roboto",sans-serif;
  color:#0d0d0d;
  font-weight:700;
  font-size:1.8rem;
  letter-spacing:2px;
  text-transform:uppercase;
}
.detente-text{ color:#0d0d0d; font-size:1.05rem; }
@media (min-width:992px){
  .detente-title{ font-size:2.1rem; letter-spacing:3px; }
}

.atouts{ position:relative; padding:4rem 1.25rem 6.5rem; background: linear-gradient(165deg, var(--beige) 0 52%, transparent 52%), var(--paper); overflow:hidden; }
.atouts__wrap{ max-width:1100px; margin:0 auto; }
.atouts__head{ text-align:center; margin-bottom:2.5rem; }
.atouts__head h2{ font-family:"Alex Brush",cursive; color:#866A54; font-size:2.4rem; margin:0 0 .25rem; }
.atouts__head p{ color:#6b6b6b; margin:0; font-family: Georgia, serif; letter-spacing:.2px; }
.atouts__grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:2.5rem; align-items:center; }
.atouts__list{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; }
.atout{
  display:flex;
  gap:.9rem;
  align-items:flex-start;
  background:#fff;
  padding:1rem 1.1rem;
  border-radius:18px;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.atout:nth-child(odd){ transform:translateX(6px); }
.atout:nth-child(even){ transform:translateX(0); }
.atout__icon{
  flex:0 0 40px;
  height:40px;
  width:40px;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:#866A54;
  background:linear-gradient(145deg, var(--beige), #fff);
  box-shadow: inset 0 0 0 2px rgba(134,106,84,.12);
}
.atout__txt h3{
  font-size:1.02rem;
  margin:.1rem 0 .15rem;
  color:#3b3b3b;
  font-family:"Roboto", sans-serif;
  letter-spacing:.2px;
}
.atout__txt p{
  margin:0;
  color:#635a52;
  font-size:.92rem;
  line-height:1.35;
}
.atouts__visuel{ position:relative; min-height:320px; }
.visuel__blob{
  position:absolute;
  inset:auto 0 0 0;
  height:78%;
  background: radial-gradient(60% 70% at 60% 40%, #FFD270, #A4BEA2);
  filter: blur(28px);
  opacity:.22;
  border-radius:40% 60% 55% 45% / 45% 55% 45% 55%;
  transform:rotate(-6deg);
}
.visuel__img{
  position:relative;
  display:block;
  width:min(100%, 440px);
  margin:0 auto;
  border-radius:26px;
  box-shadow:0 20px 36px rgba(0,0,0,.10);
}
.atouts__cta{
  margin-top:3rem;
  background:#866A54;
  color:#fff;
  border-radius:22px;
  padding:1.2rem 1.4rem;
  display:flex;
  gap:1rem;
  align-items:center;
  justify-content:space-between;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}
.cta__text{ display:flex; flex-direction:column; gap:.2rem; }
.cta__text strong{ font-family:"Roboto", sans-serif; letter-spacing:.3px; }
.cta__text span{ opacity:.9; font-size:.95rem; }
.cta__btn{
  background:linear-gradient(180deg, #fff, #f6f0e3);
  color:#5a4a3d;
  text-decoration:none;
  font-weight:600;
  padding:.85rem 1.2rem;
  border-radius:999px;
  display:inline-block;
  box-shadow: inset 0 0 0 2px rgba(255,210,112,.75);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cta__btn:hover{
  transform:translateY(-1px);
  box-shadow: inset 0 0 0 2px #fff, 0 6px 16px rgba(0,0,0,.18);
}
@media (max-width: 940px){
  .atouts__grid{ grid-template-columns:1fr; }
  .atouts__cta{ flex-direction:column; align-items:flex-start; gap:.8rem; }
}