:root{--guide-deep:#032a26;--guide-gold:#a9874d;--guide-text:#17312d;--guide-muted:#53615a;--guide-line:rgba(16,42,39,.18)}
body:has(.index-main){background:linear-gradient(rgba(246,242,233,.91),rgba(246,242,233,.91)),url('hero-ivory-marble.webp') center top/cover fixed;color:var(--guide-text)}
.index-main{max-width:1240px!important;padding:38px 28px 76px!important}.index-hero{position:relative;isolation:isolate;overflow:hidden;max-width:none!important;min-height:205px;margin:0 0 30px!important;padding:30px 34px;border:1px solid var(--guide-line);background:linear-gradient(90deg,rgba(255,253,248,.98),rgba(255,253,248,.84)),url('hero-ivory-marble.webp') center/cover}.index-hero:after{content:'';position:absolute;z-index:-1;right:-7%;bottom:-70%;width:40%;height:180%;background:url('intro-agate-corner.png') right bottom/contain no-repeat;opacity:.62;mask-image:linear-gradient(90deg,transparent,#000 42%)}
.index-hero>span{font-size:9px!important;letter-spacing:.23em!important;color:var(--guide-gold)!important}.index-hero h1{max-width:720px;margin:10px 0 12px!important;font-size:clamp(34px,4.6vw,54px)!important;line-height:.98!important;color:var(--guide-text)}.index-hero p{max-width:620px!important;margin:0;color:var(--guide-muted)!important;font:16px/1.55 Georgia,serif!important}
.article-index-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:13px!important}.article-index-card{position:relative;isolation:isolate;overflow:hidden;min-height:285px!important;padding:24px!important;border:1px solid var(--guide-line)!important;background:linear-gradient(145deg,rgba(255,253,248,.98),rgba(242,238,229,.94)),url('hero-ivory-marble.webp') center/cover!important;box-shadow:0 12px 30px rgba(7,60,53,.045)!important}.article-index-card:hover{border-color:var(--guide-gold)!important;transform:translateY(-2px)!important}.article-index-card>span{font-size:23px!important;color:var(--guide-gold)!important}.article-index-card small{font-size:9px!important;letter-spacing:.18em!important}.article-index-card h2{color:var(--guide-text);font-size:25px!important}.article-index-card p{color:var(--guide-muted)!important}.article-index-card b{color:var(--guide-text)}
.article-index-card.introduction-card{color:#fff;background:linear-gradient(90deg,rgba(3,42,38,.96),rgba(3,42,38,.68)),url('guides-introduction-hero.png') center/cover!important}.article-index-card.introduction-card h2,.article-index-card.introduction-card b{color:#fff}.article-index-card.introduction-card p{color:#d7e0dc!important}.article-index-card.premium-card{background:linear-gradient(135deg,var(--guide-deep),#0c4b42)!important;color:#fff;border-color:rgba(169,135,77,.7)!important}.article-index-card.premium-card h2,.article-index-card.premium-card b{color:#fff}.article-index-card.premium-card p{color:#cad7d2!important}
@media(max-width:900px){.article-index-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}@media(max-width:620px){.index-main{padding:22px 16px 48px!important}.index-hero{min-height:0;padding:25px 21px 85px}.index-hero h1{font-size:38px!important}.index-hero:after{width:72%;height:72%;right:-27%;bottom:-18%}.article-index-grid{grid-template-columns:1fr!important}}

/* Shared guide structure: aligned with Guide 01. */
body:not(.articles-index) .article-hero{min-height:300px!important;padding:42px 38px 34px!important;border:1px solid rgba(16,42,39,.19)!important;background:linear-gradient(90deg,rgba(255,253,248,.98) 0 59%,rgba(255,253,248,.84) 72%,rgba(255,253,248,.28)),url('hero-ivory-marble.webp') center/cover!important;position:relative;isolation:isolate;overflow:hidden}
body:not(.articles-index) .article-hero:after{content:''!important;position:absolute!important;z-index:-1!important;right:-8%!important;bottom:-31%!important;top:auto!important;width:49%!important;height:130%!important;border:0!important;border-radius:0!important;background:url('intro-agate-corner.png') right bottom/contain no-repeat!important;opacity:.82;pointer-events:none;mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.15) 14%,#000 36%)}
body:not(.articles-index) .article-hero h1{max-width:57%!important;margin:17px 0 24px!important}.article-hero-actions{position:relative;z-index:2}
.summary-jump{display:inline-flex;align-items:center;padding:13px 19px;border:1px solid #b5965d;background:linear-gradient(rgba(13,52,47,.9),rgba(13,52,47,.9)),url('hero-ivory-marble.webp') center/cover;color:#fff;text-decoration:none;font-weight:800;letter-spacing:.04em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.guide-summary{scroll-margin-top:24px;position:relative;overflow:hidden;margin-top:52px;padding:34px 36px;border:1px solid #a9874d;background:#123b35;color:#fff}.guide-summary:after{content:'';position:absolute;right:0;top:0;bottom:0;width:clamp(120px,31%,270px);height:100%;background:url('summary-agate-right.png') right center/100% 100% no-repeat;opacity:.78;pointer-events:none}.guide-summary>span{position:relative;z-index:1;color:#d6b46c;font-size:10px;font-weight:900;letter-spacing:.2em;text-transform:uppercase}.guide-summary h2{position:relative;z-index:1;margin:8px 0 18px;font:400 34px/1.1 Georgia,serif}.guide-summary ul{position:relative;z-index:1;margin:0;padding-left:20px;max-width:650px}.guide-summary li{margin:8px 0;color:#e4ebe7}
@media(max-width:650px){body:not(.articles-index) .article-hero{min-height:0!important;padding:28px 24px 112px!important}body:not(.articles-index) .article-hero h1{max-width:100%!important}body:not(.articles-index) .article-hero:after{width:72%!important;height:55%!important;right:-20%!important;bottom:-16%!important;opacity:.55}.guide-summary{padding:27px 24px}}

/* The guide index keeps its compact editorial hero. Its navigation matches the homepage. */
.articles-index .article-header{width:100%;max-width:none;min-height:72px;margin:0;padding:0 max(24px,calc((100vw - 1320px)/2));background:rgba(255,253,248,.91);border-bottom:1px solid rgba(16,42,39,.18);display:flex;align-items:center;justify-content:space-between;gap:28px}
.articles-index .article-brand{display:flex;align-items:center;gap:11px;color:#102a27;font:700 18px Georgia,'Times New Roman',serif;letter-spacing:.15em;white-space:nowrap;text-decoration:none}
.articles-index .article-brand img{width:31px;height:31px;object-fit:contain;filter:sepia(.18) saturate(.7)}
.articles-index .article-header nav{display:flex;align-items:center;justify-content:flex-end;gap:clamp(16px,2vw,34px);margin-left:auto}
.articles-index .article-header nav a{position:relative;padding:27px 0 25px;color:#102a27;font:700 9px/1.4 Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;text-decoration:none}
.articles-index .article-header nav a:after{content:'';position:absolute;left:0;right:100%;bottom:23px;height:1px;background:#a9874d;transition:right .22s}.articles-index .article-header nav a:hover:after{right:0}
.article-index-card.weight-card{background:linear-gradient(90deg,rgba(255,253,248,.77),rgba(255,253,248,.9)),url('home-weight-guide-bg-mirrored.png') center/cover!important}
.article-index-card.hair-card{background:linear-gradient(90deg,rgba(255,253,248,.91),rgba(255,253,248,.68)),url('guide-cheveux-hero.png') center/cover!important}.article-index-card.hair-card h2,.article-index-card.hair-card p{max-width:73%}
@media(max-width:700px){.articles-index .article-header{padding:14px 24px;flex-wrap:wrap;gap:12px}.articles-index .article-brand{font-size:14px}.articles-index .article-header nav{width:100%;margin:0;justify-content:flex-start;flex-wrap:wrap;gap:12px 22px}.articles-index .article-header nav a{padding:8px 0;font-size:10px}.articles-index .article-header nav a:after{bottom:5px}.article-index-card.hair-card h2,.article-index-card.hair-card p{max-width:85%}}

body.hair-guide .article-hero{background:linear-gradient(90deg,rgba(255,253,248,.98) 0 52%,rgba(255,253,248,.72) 73%,rgba(255,253,248,.18)),url('guide-cheveux-hero.png') center/cover!important}

.article-index-card.beard-card{background:linear-gradient(90deg,rgba(255,253,248,.92),rgba(255,253,248,.68)),url('guide-barbe-hero.png') center/cover!important}.article-index-card.beard-card h2,.article-index-card.beard-card p{max-width:73%}body.beard-guide .article-hero{background:linear-gradient(90deg,rgba(255,253,248,.98) 0 52%,rgba(255,253,248,.72) 73%,rgba(255,253,248,.18)),url('guide-barbe-hero.png') center/cover!important}@media(max-width:700px){.article-index-card.beard-card h2,.article-index-card.beard-card p{max-width:85%}}

.guide-product{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:24px;align-items:center;margin:40px 0;padding:22px;border:1px solid #a9874d;background:#fffdf8}.guide-product img{width:100%;aspect-ratio:4/3;object-fit:cover}.guide-product small{color:#8d703d;text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:.12em}.guide-product h2{font:400 29px/1.15 Georgia,serif;margin:10px 0}.guide-product p{font-size:16px;line-height:1.6;color:#45564f}.guide-product a{display:inline-block;padding:12px 18px;background:#032a26;color:#fff;text-decoration:none;font-size:14px;font-weight:700}@media(max-width:650px){.guide-product{grid-template-columns:1fr}}
.hair-dryer-inline{display:grid;grid-template-columns:minmax(0,160px) 1fr;gap:16px;align-items:center;margin:24px 0;padding:14px;border:1px solid #c5ae7e;background:#fffdf8}.hair-dryer-inline img{display:block;width:100%;height:auto;aspect-ratio:1.1;object-fit:cover}.hair-dryer-inline strong{font:600 19px Georgia,serif;color:#173b35}.hair-dryer-inline p{margin:7px 0;font-size:15px}.hair-dryer-inline small,.product-affiliate-note{display:block;color:#59665f;font-size:12px;line-height:1.5;margin:8px 0}.hair-dryer-inline a{display:inline-block;margin-top:8px;padding:10px 15px;background:#063b34;color:#fff;text-decoration:none;border:1px solid #a9874d;font-size:14px;font-weight:700}@media(max-width:550px){.hair-dryer-inline{grid-template-columns:1fr}.hair-dryer-inline img{max-height:240px;object-fit:contain}}
.hair-guide .guide-product img{display:block;width:100%;height:270px;aspect-ratio:4/3;object-fit:contain;background:#f8f6f0}

body.eye-guide .article-hero{background:linear-gradient(90deg,rgba(255,253,248,.98) 0 43%,rgba(255,253,248,.76) 63%,rgba(255,253,248,.12)),url('guide-sourcils-hero.png') center/cover!important}
.article-index-card.eye-card{background:linear-gradient(90deg,rgba(255,253,248,.94),rgba(255,253,248,.66)),url('guide-sourcils-hero.png') center/cover!important}

/* Les bannières cheveux et barbe comportent déjà leur décor complet. */
body:is(.hair-guide,.beard-guide) .article-hero:after{display:none!important}
body.hair-guide .article-hero{background:linear-gradient(90deg,rgba(255,253,248,.14),rgba(255,253,248,0) 68%),url('hair-guide-banner-marble.png') center/cover no-repeat!important}
body.beard-guide .article-hero{background:linear-gradient(90deg,rgba(255,253,248,.14),rgba(255,253,248,0) 68%),url('beard-guide-banner-marble.png') center/cover no-repeat!important}
body.hair-guide .article-hero h1{max-width:70%!important;font-size:clamp(36px,4.8vw,60px)!important;overflow-wrap:normal;hyphens:none}
.article-hero .unbroken-title{white-space:nowrap}
@media(max-width:650px){body:is(.hair-guide,.beard-guide) .article-hero{background-position:62% center!important}body:is(.hair-guide,.beard-guide) .article-hero:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(255,253,248,.96),rgba(255,253,248,.63));pointer-events:none}body.hair-guide .article-hero h1{max-width:100%!important;font-size:clamp(33px,8vw,48px)!important}}
body.eye-guide .article-hero{background:url('eye-guide-banner-marble.png') center/cover no-repeat!important}
body.eye-guide .article-hero:after{display:none!important}
.guide-summary p{color:#e4ebe7;line-height:1.6}
@media(max-width:650px){body.eye-guide .article-hero{background:linear-gradient(90deg,rgba(255,253,248,.94),rgba(255,253,248,.57)),url('eye-guide-banner-marble.png') 62% center/cover no-repeat!important}}

.hair-premium-link{display:inline-block;margin:4px 0 32px;padding:14px 20px;background:#063c34;color:#fff!important;text-decoration:none;font:700 14px/1.4 Inter,ui-sans-serif,system-ui,sans-serif;border:1px solid #a9874d}.hair-premium-link:hover,.hair-premium-link:focus-visible{background:#052b26;outline:2px solid #a9874d;outline-offset:2px}

.article-index-card.premium-card[href*="chirurgie-esthetique-premium"]{background:linear-gradient(90deg,rgba(3,42,38,.92),rgba(3,42,38,.55)),url('surgery-premium-card.webp') 65% center/cover!important}

body.skin-guide .article-hero{background:linear-gradient(90deg,rgba(255,253,248,.92) 0 38%,rgba(255,253,248,.55) 58%,rgba(255,253,248,.05) 78%),url('skin-guide-banner.webp') center/cover no-repeat!important}
body.skin-guide .article-hero:after{display:none!important}
.article-index-card.skin-card{background:linear-gradient(90deg,rgba(255,253,248,.96) 0 39%,rgba(255,253,248,.72) 61%,rgba(255,253,248,.14)),url('skin-guide-card.webp') 70% 35%/cover!important}
.article-index-card.skin-card h2,.article-index-card.skin-card p{max-width:78%}
.skin-product-recommendations{margin:42px 0}.skin-product-recommendations>h2{font:400 clamp(26px,3vw,34px)/1.2 Georgia,serif;color:#173b35;margin:0 0 18px}.skin-product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.skin-product{border:1px solid #bca477;background:#fffdf8;overflow:hidden}.skin-product img{display:block;width:100%;height:210px;object-fit:contain;background:#f8f6f0}.skin-product>div{padding:18px}.skin-product h3{font:400 23px/1.2 Georgia,serif;color:#173b35;margin:0 0 8px}.skin-product p{font-size:15px;line-height:1.5;margin:0 0 16px}.skin-product a{display:inline-block;padding:12px 17px;background:#063b34;color:#fff;text-decoration:none;font:700 14px/1.4 Arial,sans-serif;border:1px solid #a9874d}
.facial-thirds-figure{max-width:450px;margin:24px auto 28px;text-align:center}.facial-thirds-figure img{display:block;width:100%;height:auto;border:1px solid #c3aa78}.facial-thirds-figure figcaption{margin-top:10px;color:#46564f;font:italic 14px/1.5 Georgia,serif}
@media(max-width:650px){body.skin-guide .article-hero{background:linear-gradient(90deg,rgba(255,253,248,.95),rgba(255,253,248,.64)),url('skin-guide-banner.webp') 65% center/cover no-repeat!important}.article-index-card.skin-card h2,.article-index-card.skin-card p{max-width:90%}.skin-product-grid{grid-template-columns:1fr}}

/* Réserver la partie droite au décor du résumé, sans comprimer le texte. */
.hair-style-comparison{margin:22px 0 30px;padding:20px 22px;border:1px solid #c9bd9e;background:linear-gradient(135deg,#fffdf8,#f3f5ef);box-shadow:0 9px 28px rgba(14,55,48,.06)}
.hair-style-comparison figcaption{font:600 18px/1.35 Georgia,serif;color:#16443c;margin:0 0 15px}
.hair-style-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.hair-style-columns>div{padding:15px 18px;background:rgba(255,255,255,.74);border-left:3px solid #a88a54}
.hair-style-columns>div:last-child{border-left-color:#1c6a60}
.hair-style-label{display:block;font:700 12px/1.3 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#21695d}
.hair-style-columns ul{margin:11px 0 0;padding-left:20px;color:#263d38;line-height:1.65}
@media(max-width:600px){.hair-style-comparison{padding:16px}.hair-style-columns{grid-template-columns:1fr;gap:10px}}
.guide-summary{padding-right:clamp(145px,34%,290px)}
@media(max-width:650px){.guide-summary{padding-right:clamp(108px,32%,180px)}.guide-summary:after{width:clamp(100px,32%,180px)}}

.facial-thirds-figure img{border:0!important;background:transparent;max-width:100%}

.facial-thirds-figure{max-width:290px!important;margin:20px auto 25px!important}
@media(max-width:650px){.facial-thirds-figure{max-width:240px!important}}

/* Two product cards follow the same editorial layout as the weight-loss guide. */
.hair-product-recommendations{margin:58px 0 42px}.hair-products-kicker{color:#8d703d;text-transform:uppercase;font:800 12px/1.5 Arial,sans-serif;letter-spacing:.18em}.hair-product-recommendations>h2{font:400 clamp(30px,4vw,42px)/1.15 Georgia,serif;color:#173b35;margin:8px 0 10px}.hair-product-recommendations>p{font:16px/1.7 Arial,sans-serif;color:#56645d;margin:0 0 24px}.hair-product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.hair-product-pick{display:flex;flex-direction:column;min-width:0;border:1px solid #d8d1c5;background:#fffdf9;overflow:hidden}.hair-product-pick>img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:center}.hair-product-copy{display:flex;flex:1;flex-direction:column;padding:28px}.hair-product-copy h3{font:400 28px/1.18 Georgia,serif;color:#173b35;margin:8px 0 10px}.hair-product-copy p{font:15px/1.6 Arial,sans-serif;color:#56645d;margin:0 0 22px}.hair-product-copy a{align-self:flex-start;margin-top:auto;padding:13px 18px;background:#063b34;color:#fff;text-decoration:none;font:800 14px/1.5 Arial,sans-serif;border:1px solid #a9874d}@media(max-width:650px){.hair-product-grid{grid-template-columns:1fr}.hair-product-copy{padding:22px}}

.hair-guide .article-hero-actions{display:flex;flex-wrap:wrap;gap:12px}

body.face-fat-guide .article-hero{background:linear-gradient(90deg,rgba(255,253,248,.94),rgba(255,253,248,.70) 45%,rgba(255,253,248,.08) 80%),url('face-fat-hero.webp') center/cover no-repeat!important}
body.face-fat-guide .article-hero:after{display:none!important}
body.face-fat-guide .article-hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.article-index-card.face-fat-card{background:linear-gradient(90deg,rgba(255,253,248,.97),rgba(255,253,248,.84) 48%,rgba(255,253,248,.12)),url('face-fat-illustration.webp') 68% center/cover!important}
.face-fat-figure{margin:26px 0 32px}.face-fat-figure img{display:block;width:100%;height:auto;border-radius:2px}.face-fat-figure figcaption{font-size:.82rem;color:#67736e;padding-top:8px}
@media(max-width:650px){body.face-fat-guide .article-hero{background:linear-gradient(90deg,rgba(255,253,248,.96),rgba(255,253,248,.69)),url('face-fat-hero.webp') 65% center/cover no-repeat!important}}
/* Compact Apple-style guide actions */
.article-index-card b{ text-decoration:none!important; }
.guides-page-title{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.article-index-card>b{display:inline-flex!important;align-items:center;width:max-content;max-width:100%;padding:10px 16px!important;border-radius:999px!important;background:#173f39!important;color:#fffdf8!important;border:1px solid rgba(184,148,78,.65)!important;font:600 13px/1.2 Arial,sans-serif!important;box-shadow:0 6px 18px rgba(18,63,57,.14)!important;transition:transform .2s ease,box-shadow .2s ease!important}
.article-index-card>b:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(18,63,57,.2)!important}
/* Guide product CTAs: lighter, more compact proportions */
.guide-product .product-cta,.guide-product .article-cta,.product-recommendations .product-cta,.hair-dryer-inline a{padding:9px 14px!important;font-size:13px!important;line-height:1.25!important;min-height:0!important;width:max-content;max-width:100%;border-radius:999px!important}

/* Background photo for the hair-loss guide in both language versions of the guide index. */
.article-index-card.hair-loss-card{background:linear-gradient(90deg,rgba(255,253,248,.97) 0%,rgba(255,253,248,.91) 40%,rgba(255,253,248,.42) 100%),url('hair-loss-marble-hero.webp') 68% center/cover!important}
.article-index-card.hair-loss-card h2,.article-index-card.hair-loss-card p{max-width:73%}
@media(max-width:700px){.article-index-card.hair-loss-card{background-image:linear-gradient(90deg,rgba(255,253,248,.96),rgba(255,253,248,.82) 58%,rgba(255,253,248,.38)),url('hair-loss-marble-hero.webp')!important;background-position:center,72% center!important}.article-index-card.hair-loss-card h2,.article-index-card.hair-loss-card p{max-width:86%}}
