/* site-chrome.css — chrome partagé des landings (header.site, nav, hamburger, footer.site, contact, widgets).
   Extrait du style métiers (menuiserie.html). Body/html exclus : la base vient de css/legal.css. */
.contacts {display:flex;flex-direction:column;align-items:flex-end;gap:clamp(6px,1vh,14px)}
@keyframes bounce{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(8px)}}
@keyframes svc-kenburns{0%{transform:scale(1) translate(0)}to{transform:scale(1.08) translate(-1.5%,-1%)}}
@keyframes svc-enter{0%{opacity:0;transform:translateY(40px) scale(.96);filter:blur(8px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
section.contact {position:relative;min-height:100vh;background:var(--green);color:#000;padding:clamp(60px,8vw,120px) clamp(24px,5vw,80px);display:flex;flex-direction:column;justify-content:center;gap:40px;overflow:hidden}
section.contact:before {content:"MI";position:absolute;top:-40px;right:-60px;font-family:var(--font-cap);font-weight:900;font-style:italic;font-size:clamp(280px,40vw,600px);color:#00000014;transform:skew(-15deg);pointer-events:none;line-height:1}
.contact-grid {align-items:start;position:relative;z-index:2}
.contact-kicker {font-family:var(--font-cap);font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.35em;font-size:11px;margin-bottom:16px;color:#000000b3}
.contact h2 {font-family:var(--font-cap);font-weight:900;font-style:italic;font-size:clamp(44px,7vw,100px);line-height:.9;text-transform:uppercase;letter-spacing:-.03em;margin-bottom:30px}
.contact-intro {font-family:var(--font-body);font-size:16px;line-height:1.6;color:#000000b3;max-width:420px;margin-bottom:28px}
.contact .big-phone {display:block;font-family:var(--font-cap);font-weight:900;font-style:italic;font-size:clamp(28px,4.5vw,64px);line-height:1;color:#000;margin-bottom:20px;transition:transform .3s var(--ease-sprint)}
.contact .big-phone:hover {transform:translate(8px) skew(-6deg)}
.contact .email {display:inline-block;font-family:var(--font-cap);font-weight:800;font-style:italic;font-size:18px;letter-spacing:.05em;color:#000;border-bottom:2px solid #000;padding-bottom:2px;transition:transform .3s var(--ease-sprint)}
.contact .email:hover {transform:translate(4px)}
.contact-form {display:flex;flex-direction:column;gap:16px;background:#000000eb;padding:clamp(24px,3vw,40px);color:#fff;transform:skew(-3deg)}
.contact-form>* {transform:skew(3deg)}
.contact-form h3 {font-family:var(--font-cap);font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.02em;font-size:22px;margin-bottom:8px}
.contact-form .row {display:grid;gap:12px}
.contact-form label {display:flex;flex-direction:column;gap:6px;font-family:var(--font-cap);font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.2em;font-size:10px;color:#ffffffa6}
.contact-form input,.contact-form textarea,.contact-form select {background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.3);color:#fff;padding:10px 0;font-family:var(--font-body);font-size:14px;transition:border-color .2s}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus {outline:none;border-bottom-color:var(--green)}
.contact-form textarea {resize:vertical;min-height:80px}
.contact-form select {cursor:pointer}
.contact-form select option {background:#111;color:#fff}
.contact-form .submit {margin-top:10px;background:var(--green);color:#fff;border:0;font-family:var(--font-cap);font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:.18em;font-size:13px;padding:16px 22px;cursor:pointer;transition:transform .2s var(--ease-sprint),background .2s}
.contact-form .submit:hover {transform:translateY(-2px);background:#fff;color:var(--green)}
.form-feedback {font-family:var(--font-cap);font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.15em;font-size:11px;color:var(--green);margin-top:6px;min-height:14px}
footer.site {background:#000;color:#f4f1eab3;padding:40px clamp(24px,5vw,80px) 24px;border-top:1px solid rgba(255,255,255,.08);position:relative}
.footer-grid {display:grid;gap:40px;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:20px}
.footer-logo-img {height:clamp(36px,4vw,48px);width:auto;display:block;margin-bottom:12px}
.footer-grid .brand .logo {color:#fff;margin-bottom:12px}
.footer-grid .brand .slogan {font-family:var(--font-cap);font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:#f4f1ea80;max-width:320px;line-height:1.5}
.footer-col h4 {font-family:var(--font-cap);font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.25em;font-size:11px;color:#fff;margin-bottom:14px}
.footer-col a {display:block;font-size:13px;padding:6px 0;min-height:24px;color:#f4f1ea99;transition:color .2s,transform .2s}
.footer-col a:hover {color:var(--green);transform:translate(4px)}
.footer-bottom {display:flex;flex-direction:column;align-items:center;gap:14px;font-size:12px;color:#f4f1ea99;font-family:var(--font-cap);font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.2em;text-align:center;padding-top:26px;margin-top:28px;border-top:1px solid rgba(255,255,255,.08)}
.footer-line {display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}
.footer-line-l1 {font-size:13px;color:#f4f1eac7;letter-spacing:.28em}
.footer-line-l2 {gap:16px}
.footer-line-l3 {gap:12px}
.footer-sep {display:inline-block;width:4px;height:4px;border-radius:50%;background:#f4f1ea4d;flex-shrink:0}
.swiss-cross {width:18px;height:18px;border-radius:3px;filter:drop-shadow(0 0 6px rgba(213,43,30,.6));animation:swiss-pulse 3.2s ease-in-out infinite}
@keyframes sig-glow-pulse{0%,to{box-shadow:0 14px 40px #00000080,0 0 16px #3cb37159,inset 0 0 0 1px #ffffff1f}50%{box-shadow:0 14px 40px #00000080,0 0 36px #3cb371d9,inset 0 0 0 1px #fff3}}
@keyframes swiss-pulse{0%,to{filter:drop-shadow(0 0 6px rgba(213,43,30,.5))}50%{filter:drop-shadow(0 0 14px rgba(213,43,30,.95))}}
@media(max-width:1024px){.swiss-cross{width:16px;height:16px}}
@media(max-width:768px){.footer-bottom{gap:12px;padding-top:22px;margin-top:24px}.footer-line-l2{gap:10px}}
header.site {position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:14px clamp(16px,4vw,48px);background:#0a0a0aeb;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06);transform:translateY(-100%);transition:transform .4s var(--ease-sprint)}
header.site.visible {transform:translateY(0)}
.logo {display:flex;align-items:center}
.logo-img {height:clamp(40px,5vw,56px);width:auto;transform:skewX(-15deg)}
.main-nav,.hamburger {opacity:0;visibility:hidden;transition:opacity .3s var(--ease-sprint)}
header.site.visible .main-nav,header.site.visible .hamburger {opacity:1;visibility:visible}
.lang-switch {display:inline-flex;gap:2px;background:#0000004d;backdrop-filter:blur(4px);border-radius:4px;align-items:center;position:relative;max-width:96px;overflow:hidden;transition:max-width .35s var(--ease-sprint)}
.lang-switch:hover,.lang-switch:focus-within,.lang-switch.expanded {max-width:280px}
.lang-switch:after {content:"\25be";margin:0 6px 0 2px;color:#ffffff80;font-size:9px;transition:opacity .2s;flex-shrink:0}
.lang-switch:hover:after,.lang-switch:focus-within:after,.lang-switch.expanded:after {opacity:0;margin:0}
.lang-switch button {font-family:var(--font-cap);font-weight:800;font-style:italic;font-size:10px;letter-spacing:.1em;padding:6px 10px;border:none;cursor:pointer;background:transparent;color:#ffffffd9;transition:all .2s var(--ease-sprint);text-transform:uppercase;white-space:nowrap;flex-shrink:0}
.lang-switch button:hover {color:#ffffffb3;background:#ffffff14}
.lang-switch button.active {color:#fff;background:#0a3d24;order:-1}
.lang-switch:not(:hover):not(:focus-within):not(.expanded) button:not(.active) {display:none}
.lang-switch:not(:hover):not(:focus-within):not(.expanded):has(button[data-lang=fr].active) button[data-lang=de] {display:block}
.lang-switch:not(:hover):not(:focus-within):not(.expanded):not(:has(button[data-lang=fr].active)) button[data-lang=fr] {display:block}
.main-nav {display:flex;align-items:center;justify-content:center;gap:2px;flex:1;min-width:0;flex-wrap:nowrap;overflow:hidden}
.main-nav a {font-family:var(--font-cap);font-weight:800;font-style:italic;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#ffffffb3;padding:8px 10px;transition:color .3s var(--ease-sprint);position:relative;white-space:nowrap}
.main-nav a:hover,.main-nav a.active {color:#fff}
.main-nav a.active:after {content:"";position:absolute;bottom:2px;left:14px;right:14px;height:2px;background:var(--green)}
.nav-cta {font-family:var(--font-cap);font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--green);background:transparent;border:2px solid var(--green);border-radius:999px;padding:8px 16px;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;transition:background .25s,color .25s,transform .25s}
.nav-cta:hover {background:var(--green);color:#fff;transform:translate(2px)}
.nav-cta:after {content:"\2192";font-style:normal}
.hamburger {display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:8px;pointer-events:auto;z-index:1001}
.hamburger span {display:block;width:22px;height:2px;background:#fff;border-radius:1px;transition:all .3s var(--ease-sprint);transform-origin:center}
.hamburger.active span:nth-child(1) {transform:rotate(45deg) translate(5px,5px)}
.hamburger.active span:nth-child(2) {opacity:0}
.hamburger.active span:nth-child(3) {transform:rotate(-45deg) translate(5px,-5px)}
.mobile-overlay {display:none;position:fixed;inset:0;z-index:999;background:#000000f2;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);flex-direction:column;align-items:center;justify-content:center;gap:4px;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s ease}
.mobile-overlay.open {display:flex!important;opacity:1;visibility:visible}
.mobile-overlay a {font-family:var(--font-cap);font-weight:900;font-style:italic;font-size:clamp(28px,8vw,48px);text-transform:uppercase;letter-spacing:-.02em;color:#ffffff80;padding:10px 24px;text-align:center;transition:all .3s var(--ease-sprint)}
.mobile-overlay a:hover {color:#fff;transform:translate(6px)}
.mobile-overlay a.active {color:#fff}
@media(max-width:768px){header.site.logo-hidden .logo{opacity:0;pointer-events:none;transition:opacity .5s cubic-bezier(.2,.9,.3,1.1)}}
@keyframes cta-pulse-glow{0%,to{box-shadow:0 10px 36px #3cb37166,0 0 #3cb37180,inset 0 0 0 1px #ffffff1f}50%{box-shadow:0 14px 44px #3cb37199,0 0 0 14px #3cb37100,inset 0 0 0 1px #fff3}}
@media(max-width:768px){header.site{padding:14px 16px}.lang-switch button{padding:6px 7px;font-size:10px}.main-nav{display:none!important}header.site{padding:6px 12px;max-height:44px}.nav-cta{font-size:10px;padding:6px 10px}.lang-switch button{padding:4px 6px;font-size:9px}.hamburger{display:flex!important}.contact-grid{grid-template-columns:1fr;gap:32px}.contact-form .row{grid-template-columns:1fr}section.contact:before{font-size:clamp(180px,35vw,400px);top:-20px;right:-30px}.footer-grid{grid-template-columns:1fr 1fr;gap:20px 16px}.footer-grid .brand{grid-column:1 / -1;text-align:center;margin-bottom:8px}.footer-grid .brand .footer-logo-img{margin:0 auto 10px}.footer-grid .brand .slogan{margin:0 auto;max-width:100%}.footer-col{text-align:left}.footer-col h4{margin-bottom:10px;font-size:10px}.footer-col a{font-size:12px;padding:3px 0}.footer-col a:hover{transform:translate(2px)}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr 1fr;gap:18px 12px}.footer-col h4{font-size:9px;letter-spacing:.2em}.footer-col a{font-size:11px}}
section.realisations-metier,section.faq,section.contact {contain:layout style paint}

/* ---- Configurateur teaser (landings services spécialisés) ---- */
.config-teaser {padding:clamp(60px,8vw,110px) clamp(24px,5vw,80px);background:linear-gradient(135deg,#f2f4f3 0%,#e7eee8 55%,#f2f4f3 100%);position:relative;overflow:hidden}
.config-teaser::before {content:'MI';position:absolute;top:40%;right:-2vw;transform:translateY(-50%) skewX(-15deg);font-family:var(--font-cap);font-weight:900;font-style:italic;font-size:clamp(200px,26vw,420px);line-height:.8;color:rgba(10,10,10,.04);letter-spacing:-.06em;pointer-events:none}
.config-teaser-inner {max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(32px,5vw,80px);align-items:center;position:relative;z-index:2}
.config-teaser-text h2 {font-family:var(--font-cap);font-weight:900;font-style:italic;font-size:clamp(28px,4vw,44px);line-height:1;text-transform:uppercase;letter-spacing:-.02em;margin:0 0 16px;color:var(--dark)}
.config-teaser-text h2 span {color:var(--accent,var(--green))}
.config-teaser-text p {margin:0;font-size:clamp(15px,1.6vw,18px);line-height:1.6;color:rgba(10,10,10,.72)}
.config-teaser .config-widget {min-width:0}
@media(max-width:900px){.config-teaser-inner{grid-template-columns:1fr;gap:40px}}
