/* Page Packs Maison Effard (maison-effard.eleromclub.com) : DA inspirée de Maison Effard, luxe chaleureux et touches de Noël */
/* Noir et blanc, comme le site Maison Effard (décision Daren 06/11) : le doré reste seulement dans le visuel de la soirée */
body.me{--bg:#fff;--soft:#f6f6f6;--ink:#111;--muted:#666;--line:rgba(0,0,0,.14);--gold:#111;--champ:#cfcfcf;background:#fff}
body.me header.top{background:#fff;border-bottom:1px solid var(--line)}
.me-top__logo{display:block;color:var(--ink)}
.me-top__logo .me-logo{height:34px;width:auto}
body.me .ev b{font-family:var(--serif);font-size:.95rem;font-weight:400;letter-spacing:.02em}

main.wrap{max-width:1100px}
@media(min-width:900px){
  body.me .me-hero{padding-top:40px}
  .me-media{display:grid;grid-template-columns:1fr 260px;gap:44px;align-items:center;margin:22px 0 4px}
  .me-media .me-topvid{margin:0}
  .me-hero .me-lede,.me-hero h1{max-width:760px}
}
.me-banner{width:100%;height:auto;margin:0 0 26px;border:1px solid var(--line)}
.me-kicker{margin:26px 0 10px;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:600}
body.me h1{font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.05}
body.me h1 em{font-style:italic;color:var(--gold)}
.me-lede{font-family:var(--serif);font-size:clamp(1.1rem,2vw,1.3rem);line-height:1.45;margin:16px 0 0;max-width:40em}
.me-lede b{font-weight:400;font-style:italic}
.me-icons{list-style:none;margin:24px 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px}
.me-icons li{display:flex;align-items:center;gap:10px;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.me-icons svg{width:34px;height:34px;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linejoin:round;flex:none}
.me-visual img{width:100%;max-width:260px;height:auto;margin:0 auto;box-shadow:0 18px 40px rgba(0,0,0,.25);border:6px solid #fff}
@media(max-width:899px){.me-visual img{max-width:220px}}

/* Packs */
.me-grid{display:block}
@media(min-width:900px){.me-grid:has(.me-aside:not([hidden])){display:grid;grid-template-columns:1fr 300px;gap:44px;align-items:start}}
.me-aside{position:sticky;top:20px;margin:0 0 18px}
@media(max-width:899px){.me-aside{position:static;margin:0 0 18px}}
.me-video{position:relative;aspect-ratio:9/16;background:#111;border:1px solid var(--line);overflow:hidden}
@media(max-width:899px){.me-video{aspect-ratio:16/9}}
.me-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.me-aside__t{font-size:.75rem;color:var(--muted);text-align:center;margin:8px 0 0;letter-spacing:.04em}
body.me .cat{background:#fff;border-color:var(--line)}
body.me .cat.pack{background:#fff;border:1px solid var(--champ);box-shadow:0 10px 28px rgba(0,0,0,.08)}
body.me .cat.pack h3{font-size:1.3rem}
body.me .cat.pack .price{color:var(--gold)}
body.me .steps span.on{border-color:var(--gold)}
body.me .btn,body.me button.btn{background:var(--ink);border-color:var(--ink)}
@media(max-width:899px){
  .me-kicker{letter-spacing:.18em;margin-top:18px}
  .me-lede{font-size:1.05rem}
  .me-icons{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin-top:18px}
  .me-icons li{font-size:.68rem;gap:8px}
  .me-icons svg{width:26px;height:26px}
  .me-media .me-visual{display:none}
}

/* Vidéos (06/11) : témoignage en haut de page (16/9), vidéos verticales à côté des packs Prestige et Alopécie */
.me-topvid{position:relative;aspect-ratio:16/9;margin:22px 0 4px;background:#111;border:1px solid var(--line);box-shadow:0 14px 34px rgba(0,0,0,.18)}
.me-topvid iframe,.pk-vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pk-row{margin:0 0 12px}
.pk-row .cat{margin:0;height:100%}
.pk-vid{position:relative;aspect-ratio:9/16;background:#111;border:1px solid var(--champ);overflow:hidden}
@media(min-width:760px){.pk-row.has-vid{display:grid;grid-template-columns:1fr 210px;gap:12px;align-items:stretch}.pk-row.has-vid .pk-vid{aspect-ratio:auto;min-height:373px}}
@media(max-width:759px){.pk-row.has-vid .pk-vid{width:min(240px,70%);margin:10px auto 0}}

body.me .cat.pack .price,body.me .cat.pack li::before,body.me .cat li::before{color:#111}
body.me .me-kicker{color:#111}
body.me h1 em{color:#111}

/* Retours Florent 06/11 soir : en-tête centré, affiche V1 au-dessus de la vidéo témoignage, alignement des listes */
body.me .me-hero{text-align:center}
body.me .me-hero h1,body.me .me-lede{margin-left:auto;margin-right:auto}
body.me .me-lede{max-width:40em}
.me-icons{justify-content:center}
body.me .me-hero .lede{text-align:center}
.me-visual{margin:26px auto 0}
.me-visual img{display:block;max-width:340px}
.me-topvid{max-width:760px;margin:22px auto 4px}
@media(min-width:900px){body.me h1{white-space:nowrap;font-size:clamp(2.2rem,3.6vw,3.2rem);max-width:none}}
@media(max-width:899px){.me-visual img{max-width:260px}.me-icons{justify-items:start;max-width:340px;margin-left:auto;margin-right:auto}}
.me-icons li{text-align:left}