/* MSG Céramique — index.css (accueil uniquement, chargé après main.css) */

/* ---------- Hero ---------- */
.hero{display:flex;flex-wrap:wrap;background:var(--blue)}
.hero-copy{flex:1 1 460px;min-width:300px;position:relative;z-index:2;color:var(--cream);padding:clamp(48px,6vw,92px) clamp(24px,4vw,72px);display:flex;flex-direction:column;justify-content:center}
.hero-label{margin-bottom:clamp(24px,3vw,34px)}
.hero-title{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(46px,7vw,86px);line-height:.98;letter-spacing:-.02em;margin:0 0 clamp(22px,3vw,30px);color:var(--cream)}
.hero-title em{font-style:italic;color:#fff}
.hero-lead{font:400 clamp(16px,1.6vw,18.5px)/1.66 'Hanken Grotesk';color:rgba(244,241,234,.9);max-width:452px;margin:0 0 clamp(30px,4vw,40px)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px}
.hero-media{flex:1 1 440px;min-width:300px;position:relative;z-index:2;min-height:clamp(360px,52vw,640px)}
.hero-media > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-caption{position:absolute;left:clamp(18px,2vw,28px);bottom:clamp(18px,2vw,28px);background:rgba(251,250,247,.94);padding:11px 16px;display:flex;flex-direction:column;gap:3px}
.hero-caption .num{font:700 10px 'Space Mono',monospace;letter-spacing:.12em;color:var(--blue)}
.hero-caption .cap{font:400 12.5px 'Hanken Grotesk';color:var(--ink)}

/* ---------- Pièces signature ---------- */
.prods{padding-top:clamp(56px,7vw,104px);padding-bottom:clamp(56px,7vw,104px)}
.prods-head{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:flex-end;margin-bottom:clamp(38px,4.5vw,58px)}
.prods-label{margin-bottom:18px}
.prods-title{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(32px,5vw,58px);line-height:1.0;letter-spacing:-.018em;margin:0;color:var(--ink)}
.prods-intro{font:400 15.5px/1.66 'Hanken Grotesk';color:var(--muted);max-width:360px;margin:0}
.prods-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:clamp(30px,3.4vw,52px) clamp(24px,2.6vw,38px)}
.prod-img{aspect-ratio:4/5;overflow:hidden;background:var(--beige);border:1px solid rgba(32,28,22,.1)}
.prod-img img{width:100%;height:100%;object-fit:cover;display:block}
.prod-meta{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-top:1px solid rgba(32,28,22,.2);padding-top:15px;margin-top:17px}
.prod-name{font-family:'Fraunces',serif;font-size:clamp(20px,2.1vw,24px);color:var(--ink)}
.prod-price{font:500 16px 'Hanken Grotesk';color:var(--blue)}
.prod-cap{font-family:'Fraunces',serif;font-style:italic;font-size:14px;color:var(--muted-2);margin-top:5px}
.prods-more{margin-top:clamp(40px,4.5vw,60px);text-align:center}

/* ---------- L'atelier — Maureen ---------- */
.atelier{background:var(--beige)}
.atelier-inner{position:relative;padding-top:clamp(52px,6vw,96px);padding-bottom:clamp(52px,6vw,96px);display:flex;flex-wrap:wrap;gap:clamp(34px,4.5vw,76px);align-items:center}
.atelier-copy{flex:1 1 360px;min-width:300px;order:2}
.atelier-label{margin-bottom:24px}
.atelier-title{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(30px,4.4vw,50px);line-height:1.06;letter-spacing:-.015em;margin:0 0 28px;color:var(--ink)}
.atelier-text{font:400 17px/1.74 'Hanken Grotesk';color:var(--muted-3);margin:0 0 20px;max-width:520px}
.atelier-text--last{margin-bottom:30px}
.atelier-quote{font-family:'Fraunces',serif;font-style:italic;font-weight:400;font-size:clamp(21px,2.4vw,26px);line-height:1.4;color:var(--blue);margin:0 0 8px;max-width:500px}
.atelier-sign{font-family:'Fraunces',serif;font-size:24px;color:var(--ink)}
.atelier-photo{flex:1 1 340px;min-width:300px;order:1;position:relative}
.atelier-square{position:absolute;left:-16px;top:-16px;width:clamp(120px,18vw,180px);height:clamp(120px,18vw,180px);background:var(--blue);z-index:0}
.atelier-frame{position:relative;z-index:1;background:var(--bg);padding:clamp(12px,1.4vw,16px);border:1px solid rgba(32,28,22,.22);box-shadow:0 26px 60px -30px rgba(32,28,22,.5)}
.atelier-ratio{aspect-ratio:4/5;overflow:hidden;background:var(--beige)}
.atelier-tag{position:absolute;right:-8px;bottom:-16px;z-index:2}

/* ---------- Bande citation bleue ---------- */
.quote{background:var(--blue);color:var(--cream)}
.quote-inner{position:relative;max-width:1040px;margin:0 auto;padding:clamp(64px,8vw,124px) clamp(20px,4vw,50px);text-align:center}
.quote-eyebrow{font:700 12px 'Hanken Grotesk';letter-spacing:.24em;text-transform:uppercase;color:rgba(244,241,234,.6);margin-bottom:clamp(28px,3.5vw,40px)}
.quote-text{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(28px,4.2vw,48px);line-height:1.28;letter-spacing:-.005em;margin:0 auto clamp(36px,4.5vw,50px);max-width:920px;color:var(--cream)}
.quote-text em{font-style:italic}

/* ---------- Professionnels & collaborations ---------- */
.pro{padding-top:clamp(52px,6vw,96px);padding-bottom:clamp(52px,6vw,96px);display:flex;flex-wrap:wrap;gap:clamp(34px,4.5vw,72px);align-items:center}
.pro-photo{flex:1 1 380px;min-width:300px}
.pro-frame{background:var(--beige);padding:clamp(12px,1.4vw,16px);box-shadow:0 26px 60px -32px rgba(32,28,22,.45)}
.pro-ratio{aspect-ratio:5/4;overflow:hidden}
.pro-copy{flex:1 1 360px;min-width:300px}
.pro-label{margin-bottom:24px}
.pro-title{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(30px,4.4vw,48px);line-height:1.06;letter-spacing:-.015em;margin:0 0 26px;color:var(--ink)}
.pro-text{font:400 16.5px/1.7 'Hanken Grotesk';color:var(--muted-3);margin:0 0 26px;max-width:480px}
.pro-tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px;max-width:480px}
.pro-tags span{font:400 12px 'Space Mono',monospace;color:var(--muted-3);border:1px solid rgba(32,28,22,.24);padding:7px 13px}

/* ---------- Commandes personnalisées ---------- */
.custom{background:var(--beige)}
.custom-inner{position:relative;padding-top:clamp(52px,6vw,96px);padding-bottom:clamp(52px,6vw,96px);display:flex;flex-wrap:wrap;gap:clamp(34px,4.5vw,72px);align-items:center}
.custom-copy{flex:1 1 360px;min-width:300px}
.custom-label{margin-bottom:24px}
.custom-title{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(30px,4.4vw,48px);line-height:1.06;letter-spacing:-.015em;margin:0 0 26px;color:var(--ink)}
.custom-text{font:400 16.5px/1.7 'Hanken Grotesk';color:var(--muted-3);margin:0 0 32px;max-width:470px}
.custom-photo{flex:1 1 380px;min-width:300px;position:relative}
.custom-frame{background:var(--bg);padding:clamp(12px,1.4vw,16px);border:1px solid rgba(32,28,22,.22);box-shadow:0 26px 60px -30px rgba(32,28,22,.5)}
.custom-ratio{aspect-ratio:5/4;overflow:hidden;background:var(--beige)}
.custom-tag{position:absolute;left:-10px;bottom:-16px}

/* ---------- Points de vente ---------- */
.pos{padding-top:clamp(52px,6vw,96px);padding-bottom:clamp(52px,6vw,96px)}
.pos-head{max-width:640px;margin-bottom:clamp(34px,4vw,48px)}
.pos-label{margin-bottom:18px}
.pos-title{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(32px,4.6vw,52px);line-height:1.0;letter-spacing:-.018em;margin:0 0 20px;color:var(--ink)}
.pos-intro{font:400 16.5px/1.7 'Hanken Grotesk';color:var(--muted);margin:0;max-width:560px}
.pos-media{position:relative}
.pos-img{aspect-ratio:24/9;width:100%;min-height:300px;overflow:hidden}
.pos-card{position:absolute;left:0;bottom:0;background:var(--blue);color:var(--cream);padding:clamp(28px,3vw,40px) clamp(28px,3vw,46px);max-width:430px}
.pos-card-label{font:700 11px 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,241,234,.7);margin-bottom:16px}
.pos-card-addr{font-family:'Fraunces',serif;font-size:clamp(22px,2.6vw,27px);line-height:1.3;margin-bottom:14px}
.pos-card-text{font:400 14.5px/1.6 'Hanken Grotesk';color:rgba(244,241,234,.85);margin:0 0 20px}

/* ---------- Contact ---------- */
.contact{background:var(--beige)}
.contact-inner{position:relative;padding-top:clamp(52px,6vw,96px);padding-bottom:clamp(52px,6vw,96px)}
.contact-head{max-width:560px;margin-bottom:clamp(38px,4.5vw,54px)}
.contact-label{margin-bottom:18px}
.contact-title{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(32px,4.6vw,52px);line-height:1.0;letter-spacing:-.018em;margin:0 0 20px;color:var(--ink)}
.contact-intro{font:400 16.5px/1.7 'Hanken Grotesk';color:var(--muted);margin:0;max-width:520px}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(38px,5vw,78px);align-items:start}
.contact-msg{margin-bottom:30px}
.contact-info-top{display:flex;flex-direction:column;gap:22px;padding-bottom:28px;border-bottom:1px solid rgba(32,28,22,.2)}
.contact-line{font:400 16px/1.55 'Hanken Grotesk';color:var(--ink)}
.contact-row{display:flex;flex-wrap:wrap;gap:22px 56px}
.contact-link{font:400 16px 'Hanken Grotesk';color:var(--ink)}
.contact-link:hover{color:var(--blue)}
.contact-social{display:flex;align-items:center;gap:12px}
.contact-handle{font:400 14px 'Hanken Grotesk';color:var(--label);margin-left:4px}

/* Images des cadres */
.atelier-ratio img,.pro-ratio img,.custom-ratio img,.pos-img img{width:100%;height:100%;object-fit:cover;display:block}