/* MSG Céramique — professionnels.css (chargé après main.css, uniquement par professionnels.html)
   Valeurs reprises de MSG Professionnels.dc.html — ne rien « améliorer ». */

/* ---------- Hero ---------- */
.pro-hero{display:flex;flex-wrap:wrap;gap:clamp(34px,4vw,72px);align-items:center;padding-top:clamp(40px,6vw,84px);padding-bottom:clamp(30px,4vw,56px)}
.pro-hero-copy{flex:1 1 420px;min-width:300px}
.pro-hero-copy .section-label{margin-bottom:24px}
.pro-hero h1{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(40px,6.2vw,78px);line-height:.99;letter-spacing:-.02em;margin:0 0 28px;color:var(--ink)}
.pro-hero h1 em{font-style:italic;color:var(--blue)}
.pro-hero-lede{font:400 clamp(15px,1.5vw,17.5px)/1.72 'Hanken Grotesk';color:var(--muted-3);max-width:500px;margin:0 0 18px}
.pro-hero-sub{font:400 16px/1.7 'Hanken Grotesk';color:var(--muted);max-width:500px;margin:0 0 34px}
.pro-hero-visual{flex:1 1 380px;min-width:300px}
.pro-hero-media{position:relative}
.pro-hero-frame{background:var(--bg);padding:clamp(12px,1.4vw,18px);border:1px solid rgba(32,28,22,.2);box-shadow:0 30px 70px -34px rgba(32,28,22,.45)}
.pro-hero-img{aspect-ratio:5/4;overflow:hidden;background:var(--beige)}
.pro-hero-img img{width:100%;height:100%;object-fit:cover;display:block}
.pro-hero-badge{position:absolute;top:-14px;left:-14px;background:var(--blue);color:var(--cream);padding:9px 14px;font:700 12px 'Space Mono',monospace;letter-spacing:.08em}

/* ---------- Bande 3 étapes ---------- */
.pro-steps{background:var(--beige)}
.pro-steps-inner{padding-top:clamp(34px,4vw,56px);padding-bottom:clamp(34px,4vw,56px);display:flex;flex-wrap:wrap;gap:24px}
.pro-step{flex:1 1 240px;display:flex;gap:16px;align-items:flex-start}
.pro-step .num{font:700 13px 'Space Mono',monospace;color:var(--blue)}
.pro-step .step-title{font-family:'Fraunces',serif;font-size:21px;color:var(--ink);margin-bottom:6px}
.pro-step p{font:400 14.5px/1.6 'Hanken Grotesk';color:var(--muted);margin:0}

/* ---------- Grille des projets ---------- */
.pro-projects{padding-top:clamp(52px,6vw,92px);padding-bottom:clamp(52px,6vw,92px)}
.pro-projects-head{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:flex-end;margin-bottom:clamp(34px,4vw,52px)}
.pro-count{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.pro-count .count{font:700 12px 'Space Mono',monospace;color:var(--blue)}
.pro-count .dash{width:26px;height:1.5px;background:var(--blue);display:block}
.pro-projects h2{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(30px,4vw,46px);line-height:1.02;letter-spacing:-.015em;margin:0;color:var(--ink)}
.pro-projects-intro{font:400 15px/1.6 'Hanken Grotesk';color:var(--muted);max-width:340px;margin:0}
.pro-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(30px,3vw,48px) clamp(24px,2.4vw,36px)}
.pro-grid .pj{display:flex;flex-direction:column}
.pj-media{position:relative;margin-bottom:18px}
.pj-img{aspect-ratio:4/5;overflow:hidden;background:var(--beige);border:1px solid rgba(32,28,22,.12)}
.pj-img img{width:100%;height:100%;object-fit:cover;display:block}
.pj-blue{aspect-ratio:4/5;background:var(--blue);display:flex;align-items:flex-end;padding:22px}
.pj-blue span{position:relative;font-family:'Fraunces',serif;font-style:italic;font-size:26px;color:rgba(244,241,234,.92)}
.pj-num{position:absolute;top:12px;left:12px;background:var(--bg);color:var(--blue);padding:5px 10px;font:700 11px 'Space Mono',monospace;letter-spacing:.06em}
.pj-cat{position:absolute;top:12px;right:12px;background:rgba(32,28,22,.82);color:var(--cream);padding:5px 11px;font:600 10px 'Hanken Grotesk';letter-spacing:.11em;text-transform:uppercase}
.pj h3{font-family:'Fraunces',serif;font-weight:400;font-size:22px;line-height:1.2;letter-spacing:-.008em;margin:0 0 10px;color:var(--ink)}
.pj-desc{font:400 14.5px/1.62 'Hanken Grotesk';color:var(--muted);margin:0}

/* ---------- Devis (section bleue) ---------- */
.pro-devis{background:var(--blue);color:var(--cream)}
.pro-devis-inner{position:relative;max-width:1000px;margin:0 auto;padding:clamp(56px,7vw,104px) clamp(20px,4vw,50px);text-align:center}
.pro-devis-kicker{font:700 12px 'Hanken Grotesk';letter-spacing:.22em;text-transform:uppercase;color:rgba(244,241,234,.68);margin-bottom:22px}
.pro-devis h2{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(32px,5vw,54px);line-height:1.06;letter-spacing:-.015em;margin:0 0 18px;color:var(--cream)}
.pro-devis-lede{font:400 16.5px/1.66 'Hanken Grotesk';color:rgba(244,241,234,.88);margin:0 auto 42px;max-width:520px}
.pro-form{max-width:620px;margin:0 auto;text-align:left}
.pro-form .field-project{margin-bottom:30px}
.pro-form-submit{text-align:center}
.pro-form[hidden],.pro-devis .form-success--onblue[hidden]{display:none}