/* Direction éditoriale dédiée au projet L’Oréal Professionnel Paris. */
.loreal-page{--loreal-ink:#151413;--loreal-paper:#f4f0e9;--loreal-gold:#b99a67;--loreal-muted:#77716a;background:var(--loreal-paper);color:var(--loreal-ink);font-family:"DM Sans",sans-serif}
.loreal-page .topbar{background:rgba(244,240,233,.94);border-color:rgba(21,20,19,.12)}
.loreal-page .nav{max-width:1320px}
.loreal-page .brand{color:var(--loreal-ink)}
.loreal-page .brand span{color:var(--loreal-gold)}
.loreal-page .nav-links a{color:var(--loreal-ink)}
.loreal-page .nav-links .contact{background:var(--loreal-ink);color:#fff}
.loreal-hero,.loreal-film,.loreal-story,.loreal-gallery,.loreal-takeaway,.loreal-facts{width:min(1320px,calc(100% - 64px));margin-inline:auto}
.loreal-hero{padding:76px 0 96px;display:grid;grid-template-columns:.88fr 1.12fr;gap:8%;align-items:center;min-height:650px}
.loreal-hero-copy{padding:18px 0}
.loreal-page .back{color:var(--loreal-muted);font-size:.78rem;text-decoration:none;letter-spacing:.04em}
.loreal-overline{margin:48px 0 18px;color:var(--loreal-gold);font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.loreal-hero h1,.loreal-section-heading h2,.loreal-takeaway h2{font-family:"Playfair Display",serif;font-weight:500;letter-spacing:-.055em}
.loreal-hero h1{font-size:clamp(3.4rem,7vw,7.5rem);line-height:.92;margin:0}
.loreal-hero h1 em,.loreal-section-heading h2 em,.loreal-takeaway h2 em{font-weight:500;color:var(--loreal-gold)}
.loreal-deck{margin:36px 0 16px;font-size:clamp(1.3rem,2.2vw,2rem);line-height:1.25}
.loreal-intro{max-width:490px;color:#5f5b56;font-size:1rem;line-height:1.8}
.loreal-mark{margin:0;position:relative;background:var(--loreal-ink);padding:8%;}
.loreal-mark img{display:block;width:100%;height:auto;object-fit:cover}
.loreal-mark figcaption{padding-top:16px;color:#d2c7b4;font-size:.72rem;letter-spacing:.08em}
.loreal-film{padding:76px 0 96px;border-top:1px solid rgba(21,20,19,.14)}
.loreal-section-heading .loreal-overline{margin:0 0 20px}
.loreal-section-heading h2{font-size:clamp(2.8rem,5.4vw,5.6rem);line-height:.98;margin:0 0 42px}
.loreal-player{width:100%;aspect-ratio:16/9;background:#111;box-shadow:0 24px 70px rgba(21,20,19,.14)}
.loreal-player iframe{display:block;width:100%;height:100%;border:0}
.loreal-film-note{max-width:480px;margin:20px 0 0 auto;color:var(--loreal-muted);font-size:.9rem;line-height:1.7;text-align:right}
.loreal-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding:30px 0 36px;border-top:1px solid rgba(185,154,103,.58);border-bottom:1px solid rgba(185,154,103,.58)}
.loreal-facts span{display:block;margin-bottom:10px;color:var(--loreal-gold);font-size:.65rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.loreal-facts p{margin:0;font-size:.93rem;line-height:1.5}
.loreal-story{padding:120px 0 100px;display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:start}
.loreal-story .loreal-overline{margin-top:0}
.loreal-story-copy{max-width:590px;padding-top:42px;font-size:1.04rem;line-height:1.9;color:#514d48}
.loreal-story-copy p{margin:0 0 22px}
.loreal-story-copy strong{color:var(--loreal-ink);font-weight:700}
.loreal-gallery{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;padding-bottom:130px}
.loreal-gallery figure{margin:0;min-width:0}
.loreal-gallery img{display:block;width:100%;height:100%;max-height:620px;object-fit:cover;background:#e5e0d8}
.loreal-gallery figcaption{padding-top:12px;color:var(--loreal-muted);font-size:.75rem;letter-spacing:.04em}
.loreal-gallery .gallery-wide{grid-column:1/-1}
.loreal-gallery .gallery-wide img{aspect-ratio:2.18;object-fit:cover}
.loreal-gallery .gallery-half img{aspect-ratio:1.55}
.loreal-gallery .gallery-type img{aspect-ratio:1.55}
.loreal-gallery .gallery-tech img{aspect-ratio:1.55}
.loreal-gallery .gallery-people img{aspect-ratio:2.1}
.loreal-gallery-note{align-self:center;max-width:380px;padding:30px 12%;color:var(--loreal-ink)}
.loreal-gallery-note span{color:var(--loreal-gold);font-size:.7rem;letter-spacing:.2em}
.loreal-gallery-note p{font-family:"Playfair Display",serif;font-size:clamp(1.45rem,2.5vw,2.3rem);line-height:1.25}
.loreal-takeaway{padding:84px 0 110px;border-top:1px solid rgba(21,20,19,.14);text-align:center}
.loreal-takeaway .loreal-overline{margin:0 0 24px}
.loreal-takeaway h2{font-size:clamp(2.7rem,5.2vw,5.4rem);line-height:1.02;margin:0}
.loreal-takeaway>p:last-child{max-width:620px;margin:28px auto 0;color:var(--loreal-muted);line-height:1.8}
.loreal-page .loreal-cta{background:var(--loreal-ink);color:#fff;text-align:center;padding:76px 24px}
.loreal-page .loreal-cta h2{font-family:"Playfair Display",serif;font-size:clamp(2rem,4vw,3.5rem);font-weight:500}
.loreal-page .loreal-cta p{color:#d0cbc4}
.loreal-page .loreal-cta a{display:inline-block;margin-top:16px;padding:14px 24px;background:var(--loreal-gold);color:#171513;text-decoration:none;font-weight:700}
.loreal-page footer{padding:24px;text-align:center;color:var(--loreal-muted);font-size:.78rem}
.loreal-page footer a{color:inherit}
@media(max-width:760px){.loreal-hero,.loreal-film,.loreal-story,.loreal-gallery,.loreal-takeaway,.loreal-facts{width:min(100% - 36px,600px)}.loreal-hero{padding:46px 0 64px;grid-template-columns:1fr;gap:34px;min-height:0}.loreal-hero .loreal-overline{margin-top:38px}.loreal-mark{padding:6%}.loreal-film{padding:58px 0 68px}.loreal-section-heading h2{margin-bottom:26px}.loreal-facts{grid-template-columns:1fr 1fr;gap:24px 18px}.loreal-story{padding:76px 0 58px;grid-template-columns:1fr;gap:0}.loreal-story-copy{padding-top:4px}.loreal-gallery{grid-template-columns:1fr;gap:22px;padding-bottom:78px}.loreal-gallery .gallery-wide{grid-column:auto}.loreal-gallery .gallery-wide img,.loreal-gallery .gallery-half img,.loreal-gallery .gallery-type img,.loreal-gallery .gallery-tech img,.loreal-gallery .gallery-people img{aspect-ratio:1.45}.loreal-gallery-note{padding:18px 5%}.loreal-film-note{text-align:left;margin-left:0}.loreal-takeaway{padding:64px 0 76px}}