/*
Theme Name: Christophe Moulier Ferronnerie
Theme URI: https://christophe-moulier.fr
Author: LAJ'COM
Description: Thème vitrine sur mesure pour Christophe Moulier, métallier et ferronnier d'art.
Version: 1.0.0
Text Domain: christophe-moulier
*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Playfair+Display:ital,wght@1,500&display=swap');
:root{--ink:#121310;--paper:#eeeae0;--accent:#c8663d;--line:rgba(18,19,16,.18);--serif:"Playfair Display",serif;--sans:"DM Sans",sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:var(--sans);background:var(--paper);color:var(--ink)}a{text-decoration:none;color:inherit}.site{overflow:hidden;background:var(--paper);transition:.35s}.chooser{position:fixed;z-index:50;right:18px;top:50%;transform:translateY(-50%);width:205px;padding:12px;background:rgba(15,16,15,.9);backdrop-filter:blur(16px);color:white;box-shadow:0 15px 45px #0006}.chooser p{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#aaa;margin:4px 9px 10px}.chooser button{width:100%;text-align:left;padding:11px;border:0;border-left:2px solid transparent;background:transparent;color:#999;cursor:pointer}.chooser button.on{background:#ffffff12;border-color:var(--accent);color:white}.chooser b,.chooser small{display:block}.chooser b{font-size:11px;letter-spacing:.12em;text-transform:uppercase}.chooser small{font-size:9px;margin-top:4px;opacity:.7}nav{position:absolute;z-index:5;left:0;right:0;height:90px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;color:white;border-bottom:1px solid #ffffff38}.logo{display:flex;align-items:center;gap:12px;text-transform:uppercase;font-size:11px;font-weight:600;letter-spacing:.16em}.logo i{width:40px;height:40px;border:1px solid;display:grid;place-items:center;font-family:var(--serif);font-size:16px}.logo small{display:block;font-size:8px;font-weight:400;opacity:.6;margin-top:4px}nav>div{display:flex;gap:30px;text-transform:uppercase;font-size:10px;letter-spacing:.15em}.quote{border:1px solid #ffffff88;padding:14px 17px;font-size:9px;text-transform:uppercase;letter-spacing:.12em}.hero{height:100vh;min-height:700px;position:relative;color:white;background:#111}.hero>img{width:100%;height:100%;object-fit:cover}.shade{position:absolute;inset:0;background:linear-gradient(90deg,#0b0c0bd9 0%,#0b0c0b5c 58%,#0b0c0b22),linear-gradient(0deg,#0b0c0b70,transparent 50%)}.heroText{position:absolute;left:7vw;top:50%;transform:translateY(-42%);max-width:800px}.tag{text-transform:uppercase;letter-spacing:.22em;font-size:10px}.tag:before{content:"";display:inline-block;width:32px;height:1px;background:var(--accent);vertical-align:middle;margin-right:12px}.hero h1,.intro h2,.portfolio h2,.maker h2,.contact h2{font-size:clamp(62px,9vw,135px);font-weight:300;line-height:.86;letter-spacing:-.06em;margin:40px 0}.hero em,h2 em{font-family:var(--serif);font-weight:500;color:var(--accent)}.heroText>p:last-of-type{max-width:480px;font-size:16px;line-height:1.7;color:#ffffffbd}.heroText>a{display:flex;align-items:center;justify-content:center;text-align:center;width:125px;height:125px;border:1px solid #ffffff88;border-radius:50%;margin-top:35px;text-transform:uppercase;font-size:9px;letter-spacing:.12em}.heroText>a b{margin-left:8px;font-size:18px}.intro{padding:10vw 7vw;display:grid;grid-template-columns:1.5fr 1fr;gap:10vw;align-items:end}.intro h2{font-size:clamp(45px,6vw,88px);line-height:1;margin-bottom:0}.intro>div:last-child>p{font-size:18px;line-height:1.75;font-weight:300}.intro a{display:inline-block;border-bottom:1px solid;padding:10px 0;margin-top:20px;text-transform:uppercase;font-size:10px;letter-spacing:.12em}.skills{padding:0 7vw 9vw;display:grid;grid-template-columns:repeat(4,1fr)}.skills article{padding:30px 28px 25px 0;border-top:1px solid var(--line)}.skills article+article{padding-left:28px;border-left:1px solid var(--line)}.skills span{color:var(--accent);font-size:9px}.skills h3{font-size:22px;font-weight:400;margin:35px 0 20px}.skills p{font-size:13px;line-height:1.7;color:#666}.portfolio{background:#181916;color:#f3f0e8;padding:9vw 7vw}.title{display:flex;align-items:end;justify-content:space-between}.portfolio h2{font-size:clamp(58px,7vw,100px);margin:25px 0 0}.title>p{max-width:350px;color:#aaa;line-height:1.7;font-size:13px}.grid{display:grid;grid-template-columns:1.1fr .9fr;gap:7vw 3vw;margin-top:7vw}.grid figure:nth-child(even){margin-top:10vw}.grid img{width:100%;height:48vw;max-height:670px;object-fit:cover;display:block}.grid figure:nth-child(even) img{height:35vw;max-height:490px}.grid figcaption{display:flex;align-items:center;gap:18px;border-bottom:1px solid #444;padding:18px 0}.grid figcaption>span{color:var(--accent);font-size:9px}.grid figcaption div{flex:1}.grid h3{font-size:16px;font-weight:400;margin:0 0 4px}.grid figcaption p{font-size:9px;text-transform:uppercase;letter-spacing:.13em;color:#888;margin:0}.maker{display:grid;grid-template-columns:1fr 1fr;background:#22231f;color:white;min-height:850px}.portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}.maker>div:last-child{padding:10vw 7vw}.maker h2{font-size:clamp(58px,7vw,105px)}.maker h3{color:var(--accent);text-transform:uppercase;letter-spacing:.18em;font-size:10px}.maker>div>p:last-of-type{color:#aaa;line-height:1.8;max-width:520px}.maker ul{display:flex;gap:35px;border-top:1px solid #444;padding:30px 0 0;margin-top:60px;list-style:none}.maker li{font-size:9px;color:#999;text-transform:uppercase;letter-spacing:.1em}.maker li b{display:block;color:white;font-size:23px;font-weight:300;text-transform:none;margin-bottom:8px}.contact{background:#10110f;color:white;padding:9vw 7vw 3vw}.contact h2{font-size:clamp(80px,12vw,180px);margin:35px 0 70px}.contact h2 span{color:var(--accent)}.contactGrid{display:grid;grid-template-columns:1fr 1fr;gap:12vw}.contactGrid>div>p{font-size:21px;line-height:1.55;font-weight:300}.contactGrid>div>a{display:block;border-bottom:1px solid #444;padding:18px 0;font-size:13px}.contact form{display:grid;gap:22px}.contact input,.contact textarea{background:transparent;color:white;border:0;border-bottom:1px solid #555;padding:14px 0;font:14px var(--sans);outline:none}.contact button{justify-self:start;border:0;background:var(--accent);color:white;padding:18px 23px;text-transform:uppercase;font-size:9px;letter-spacing:.14em}.contact footer{display:grid;grid-template-columns:2fr 1fr 1fr;align-items:end;border-top:1px solid #333;margin-top:9vw;padding-top:30px}.contact footer p{font-size:9px;line-height:1.8;color:#888;text-transform:uppercase;letter-spacing:.08em}
.matiere{--paper:#f6f1e7;--ink:#29241f;--accent:#a95836}.matiere .hero{height:90vh;margin:16px;background:var(--paper);color:var(--ink)}.matiere .hero>img{width:55%;margin-left:45%}.matiere .shade{background:linear-gradient(90deg,#f6f1e7 0%,#f6f1e7 42%,transparent 68%)}.matiere nav{color:var(--ink);border-color:#0002}.matiere .heroText>p:last-of-type{color:#554e47}.matiere .heroText>a{border-color:#777}.matiere .portfolio{background:#e5ddd0;color:var(--ink)}.matiere .grid figcaption{border-color:#aaa}.matiere .maker{background:#ddd4c5;color:var(--ink)}.matiere .maker h3{color:var(--accent)}.matiere .maker>div>p:last-of-type,.matiere .maker li{color:#645e56}.matiere .maker li b{color:var(--ink)}
.signature{--paper:#d9ded6;--ink:#14211d;--accent:#ef603d}.signature .hero>img{width:68%;margin-left:32%;filter:saturate(.55)}.signature .shade{background:linear-gradient(90deg,#14211d 0%,#14211d 35%,#14211d22 74%)}.signature .hero h1{font-family:var(--serif);font-style:italic}.signature .hero h1 em{font-family:var(--sans);font-style:normal;color:white;text-transform:uppercase;font-size:.72em}.signature .heroText>a{border-radius:0;width:150px;height:70px;background:var(--accent);border:0}.signature .portfolio{background:#14211d}.signature .maker{background:var(--accent)}.signature .maker h3,.signature .maker h2 em{color:#14211d}.signature .contact{background:#d9ded6;color:#14211d}.signature .contact input,.signature .contact textarea{color:#14211d;border-color:#77827d}.signature .contact button{background:#14211d}.signature .contactGrid>div>a,.signature .contact footer{border-color:#9aa59f}
@media(max-width:900px){.chooser{top:auto;bottom:10px;left:10px;right:10px;transform:none;width:auto;display:grid;grid-template-columns:repeat(3,1fr);padding:5px}.chooser>p,.chooser small{display:none}nav{height:70px;padding:0 20px}nav>div,.quote{display:none}.hero h1{font-size:18vw}.intro{grid-template-columns:1fr}.skills{grid-template-columns:1fr 1fr}.maker{grid-template-columns:1fr}.portrait{height:90vw}.contactGrid{grid-template-columns:1fr;gap:65px}.contact footer{grid-template-columns:1fr;gap:20px}.matiere .hero{margin:0;height:100vh}.matiere .hero>img,.signature .hero>img{width:100%;margin:0}.matiere .shade{background:linear-gradient(0deg,#f6f1e7 0%,#f6f1e7b8 55%,transparent)}.matiere .heroText{top:63%}.signature .shade{background:linear-gradient(0deg,#14211de8,#14211d22)}}
@media(max-width:600px){.intro,.portfolio,.contact{padding:90px 24px}.skills{padding:0 24px 90px;grid-template-columns:1fr}.skills article+article{padding-left:0;border-left:0}.grid{grid-template-columns:1fr;gap:55px}.grid figure:nth-child(even){margin-top:0}.grid img,.grid figure:nth-child(even) img{height:115vw}.maker>div:last-child{padding:90px 24px}.maker ul{flex-wrap:wrap}.title{display:block}.contact h2{font-size:22vw}}
.maker{display:flex;align-items:center;min-height:720px;padding:9vw 15vw}.maker>div{width:100%;max-width:1050px}.maker>div:last-child{padding:0}.maker h2{max-width:900px}@media(max-width:900px){.maker{padding:90px 24px;min-height:auto}}