/* ===== Section Loi Lemoine (fond décoratif premium) ===== */
.lemoine{
  position: relative;
  background: #fff;
  color: var(--ink);
  padding: 80px 0;
  overflow: hidden;
}

/* Décor : lignes courbes + taches douces (non linéaires) */
.lemoine::before,
.lemoine::after{
  content:"";
  position:absolute; inset:auto -10% 0 -10%;
  height: 58%;
  pointer-events:none;
}
.lemoine::before{
  top:-8%;
  background:
    radial-gradient(700px 280px at 12% -10%, rgba(4,33,73,.06), transparent 60%),
    radial-gradient(520px 220px at 92% 0%, rgba(255,116,62,.08), transparent 70%);
}
/* fines lignes courbes en data-URI (SVG) */
.lemoine::after{
  top:0;
  background-image:
    url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none'>\
      <path d='M0,260 C200,180 380,340 600,260 C820,180 1000,320 1200,240' fill='none' stroke='rgba(4,33,73,0.10)' stroke-width='2'/>\
      <path d='M0,120 C240,40 360,200 600,140 C840,80 980,200 1200,120' fill='none' stroke='rgba(255,116,62,0.15)' stroke-width='2'/>\
    </svg>");
  background-repeat: no-repeat;
  background-size: 120% 100%;
  opacity: .8;
}

/* Grille : photo réduite */
.lemoine-grid{
  display:grid;
  grid-template-columns: .85fr 1.15fr; /* image + étroite */
  gap: 40px;
  align-items: center;
}

/* Photo */
.lemoine-visual{ max-width: 520px; }
.lemoine-visual figure{ margin:0; }
.lemoine-visual img{
  width:100%; height:auto; display:block; object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 16px 34px rgba(0,0,0,.12);
}

/* Titre/lead */
.lemoine-text h2{
  font-family: "Playfair Display", serif;
  font-size: clamp(26px, 4vw, 38px);
  margin: 0 0 12px;
}
.lemoine-text h2 span{ color: var(--orange); }
.lemoine-text .lead{
  font-size: 1.12rem; color: var(--blue); margin: 0 0 16px;
}

/* Liste élégante : puces premium (sans check) */
.lemoine-points{
  list-style: none; margin: 0 0 16px; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.lemoine-points li{
  position: relative; padding-left: 28px;
  color: #29324a; line-height: 1.6; font-size: 1rem;
}
.lemoine-points li::before{
  content:"";
  position:absolute; left:0; top:.6em;
  width:12px; height:12px; border-radius:50%;
  background: radial-gradient(circle at 35% 35%, #fff 0 25%, transparent 26% 100%), var(--orange);
  box-shadow: 0 0 0 2px rgba(255,116,62,.25);
}

/* Note finale + CTA */
.lemoine-text .muted{ font-size:.95rem; color: var(--muted); margin: 0 0 16px; }
.lemoine-cta .cta{
  display:inline-block; background: var(--orange); color:#fff; font-weight:700;
  padding: 14px 22px; border-radius:999px; box-shadow:0 10px 24px rgba(255,116,62,.25);
  transition: transform .15s ease; text-decoration:none;
}
.lemoine-cta .cta:hover{ transform: translateY(-2px); }

/* Responsive */
@media (max-width: 960px){
  .lemoine-grid{ grid-template-columns: 1fr; }
  .lemoine-visual{ order:-1; margin: 0 auto 18px; max-width: 420px; }
  .lemoine-points{ margin-left: 4px; }
}
/* ==================== DÉCORS PREMIUM (lignes plus nombreuses, hors contenu) ==================== */
/* On place des lignes en 4 zones qui n’empiètent pas sur le contenu :
   - bande HAUTE   (sur toute la largeur)
   - bande BASSE   (sur toute la largeur)
   - GOUTTIÈRE GAUCHE   (colonne étroite)
   - GOUTTIÈRE DROITE   (colonne étroite)
   Chaque zone utilise un SVG inline avec 5–7 courbes, opacités variées pour un aspect organique.
*/

.lemoine { position: relative; isolation: isolate; }
.lemoine::before,
.lemoine::after,
.lemoine-grid::before,
.lemoine-grid::after{
  content:"";
  position:absolute;
  z-index: 0;           /* sous le contenu */
  pointer-events:none;
  background-repeat:no-repeat;
  background-size: cover;
  opacity:.9;
  filter: blur(.1px);   /* anti-aliasing léger */
}

/* Bande HAUTE (n’empiète pas sur le contenu) */
.lemoine::before{
  inset: 0 0 auto 0;                   /* top band */
  height: 130px;
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'>\
    <g fill='none' stroke-linecap='round'>\
      <path d='M0,130 C180,80 360,180 540,120 C720,60 900,170 1200,110' stroke='rgba(4,33,73,0.10)' stroke-width='2'/>\
      <path d='M0,80 C200,40 420,110 620,70 C820,30 1000,120 1200,60' stroke='rgba(255,116,62,0.16)' stroke-width='2'/>\
      <path d='M0,150 C240,130 420,150 680,110 C920,80 1020,140 1200,120' stroke='rgba(4,33,73,0.08)' stroke-width='2'/>\
      <path d='M0,50 C160,30 380,60 580,40 C820,20 980,80 1200,50' stroke='rgba(4,33,73,0.06)' stroke-width='1.5'/>\
      <path d='M0,100 C260,60 420,140 700,90 C940,50 1080,110 1200,90' stroke='rgba(255,116,62,0.10)' stroke-width='2'/>\
      <path d='M0,30 C200,10 420,60 620,20 C880,-10 1060,60 1200,30' stroke='rgba(4,33,73,0.06)' stroke-width='1.5'/>\
    </g></svg>");
}

/* Bande BASSE (n’empiète pas sur le contenu) */
.lemoine::after{
  inset: auto 0 0 0;                  /* bottom band */
  height: 130px;
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'>\
    <g fill='none' stroke-linecap='round'>\
      <path d='M0,70 C180,120 360,20 540,80 C720,140 900,30 1200,90' stroke='rgba(4,33,73,0.10)' stroke-width='2'/>\
      <path d='M0,120 C220,160 420,70 620,110 C820,150 1000,80 1200,130' stroke='rgba(255,116,62,0.16)' stroke-width='2'/>\
      <path d='M0,40 C240,60 420,40 680,80 C920,110 1020,50 1200,70' stroke='rgba(4,33,73,0.08)' stroke-width='2'/>\
      <path d='M0,150 C160,170 380,140 580,160 C820,180 980,120 1200,150' stroke='rgba(4,33,73,0.06)' stroke-width='1.5'/>\
      <path d='M0,95 C260,135 420,55 700,110 C940,150 1080,90 1200,110' stroke='rgba(255,116,62,0.10)' stroke-width='2'/>\
      <path d='M0,180 C200,200 420,150 620,190 C880,220 1060,150 1200,180' stroke='rgba(4,33,73,0.06)' stroke-width='1.5'/>\
    </g></svg>");
}

/* GOUTTIÈRE GAUCHE (bande verticale étroite à gauche du container) */
.lemoine-grid{ position: relative; z-index: 1; } /* contenu au-dessus des décors */


/* SÉCURITÉ : on s’assure que photo + texte passent au-dessus (et sans chevauchement) */
.lemoine-visual,
.lemoine-text{ position: relative; z-index: 2; }

/* Responsive : réduire la densité sur petits écrans */
@media (max-width: 960px){
  .lemoine::before,
  .lemoine::after{ height: 120px; opacity:.85; }
  .lemoine-grid::before,
  .lemoine-grid::after{ width: 50px; opacity:.8; }
}
@media (max-width: 560px){
  .lemoine::before,
  .lemoine::after{ height: 90px; opacity:.75; }
  .lemoine-grid::before,
  .lemoine-grid::after{ display: none; } /* on épure sur mobile très étroit */
}