/* VIVANTE — accueil et page ménopause : la palette vive de DÉNOUER (corail, pêche, menthe, mauve, sapin).
   Versionnée car /assets/* est servi en cache immuable : pour modifier, créer vivante-peps-v2.css
   et changer les <link> d'index.html et menopause.html. */
.vivante-peps{--pine:#125b51;--ink:#173f36;--line:#f0cdbd;background:#fffaf5}

/* Haut de page : crème, anneau corail, photo décalée */
.vivante-peps .hero{background:#fffaf5;border-bottom:8px solid #ed7950;position:relative;overflow:hidden;padding:70px 0 85px}
.vivante-peps .hero:before{content:'';position:absolute;width:360px;height:360px;right:-160px;top:-170px;border:45px solid #ed7950;border-radius:50%;pointer-events:none}
.vivante-peps .hero-grid{position:relative}
.vivante-peps .hero .eyebrow{display:inline-block;background:#fbe4d1;color:#9a3525;padding:8px 16px;border-radius:24px;letter-spacing:.1em}
.vivante-peps .hero-photo>img{border:8px solid #fffaf5;box-shadow:16px 16px 0 #ed7950;transform:rotate(2deg);border-radius:6px}
.vivante-peps .photo-note{background:#125b51;color:#fff;border:0;transform:rotate(-2deg);margin-top:-48px}
.vivante-peps .photo-note strong{color:#ffc9ae;display:block}

/* Boutons : corail plein, relief ; secondaire en contour sapin */
.vivante-peps .btn{background:#ed7950;border-color:#ed7950;color:#173f36;box-shadow:0 5px 0 #c75430;border-radius:50px}
.vivante-peps .btn:hover{background:#f48a60}
.vivante-peps .btn.secondary{background:#fff;border-color:#125b51;color:#125b51;box-shadow:0 5px 0 #125b5133}
.vivante-peps .btn.secondary:hover{background:#e3f4ee}

/* Bandeau sous le haut de page : trois pastilles colorées */
.vivante-peps .benefits{border:0;justify-content:center;gap:12px;padding:26px 0}
.vivante-peps .benefits span{padding:9px 18px;border-radius:30px;background:#ffc9ae;color:#173f36}
.vivante-peps .benefits span:nth-child(2){background:#a9e2ce}
.vivante-peps .benefits span:nth-child(3){background:#eee0e8}

/* Sections, chacune sa couleur */
.vivante-peps .s-peche{background:#fbe4d1}
.vivante-peps .s-menthe{background:#e3f4ee}
.vivante-peps .s-mauve{background:#f6ecf1}
.vivante-peps .s-sapin{background:#125b51;color:#fffaf5}
.vivante-peps .s-sapin h2,.vivante-peps .s-sapin h3{color:#fff}
.vivante-peps .s-sapin .eyebrow{color:#ffc9ae}
.vivante-peps .s-sapin a:not(.btn){color:#ffc9ae}
.vivante-peps .s-sapin .small{color:#d7ebe5}
.vivante-peps .s-sapin img{box-shadow:14px 14px 0 #ed7950;border-radius:6px}
.vivante-peps .s-sapin .btn.secondary{background:#fffaf5;border-color:#fffaf5}

/* Cartes : liseré de couleur en haut */
.vivante-peps .grid3 .card{background:#fffaf5;border:0;border-top:8px solid #ed7950;box-shadow:0 3px 0 #173f3612}
.vivante-peps .grid3 .card:nth-child(2){border-top-color:#be8299}
.vivante-peps .grid3 .card:nth-child(3){border-top-color:#72c8b0}
.vivante-peps .card .number{color:#9a3525}

/* Étapes : tuiles pêche / menthe / crème */
.vivante-peps .steps{gap:20px}
.vivante-peps .steps li{border:0;border-radius:24px;padding:28px}
.vivante-peps .steps li:nth-child(3n+1){background:#ffc9ae}
.vivante-peps .steps li:nth-child(3n+2){background:#a9e2ce}
.vivante-peps .steps li:nth-child(3n){background:#fffaf5;border:2px solid #ed7950}
.vivante-peps .steps .number{color:#173f36;background:#ffffffb0;display:inline-block;border-radius:20px;padding:5px 12px;margin-bottom:8px}

/* FAQ en cartes, encadrés colorés */
.vivante-peps .faq details{background:#fff;border:1px solid #f0cdbd;padding:18px 22px;border-radius:16px;margin:12px 0}
.vivante-peps .faq summary{color:#125b51}
.vivante-peps .encadre{border:0;border-radius:24px;box-shadow:10px 10px 0 #125b51;background:#fff}
.vivante-peps .grid2 .encadre:nth-child(2){box-shadow:10px 10px 0 #ed7950}
.vivante-peps .crumbs a{color:#9a3525}

.vivante-peps .footer{background:#fbe4d1}

@media(max-width:760px){
  .vivante-peps .hero{padding:36px 0 52px}
  .vivante-peps .hero:before{width:200px;height:200px;border-width:26px;right:-110px;top:-110px}
  .vivante-peps .hero-photo{padding-right:12px}
  .vivante-peps .hero-photo>img{box-shadow:10px 10px 0 #ed7950}
  .vivante-peps .s-sapin img{box-shadow:8px 8px 0 #ed7950}
  .vivante-peps .encadre{box-shadow:6px 6px 0 #125b51}
  .vivante-peps .grid2 .encadre:nth-child(2){box-shadow:6px 6px 0 #ed7950}
}