/* ===========================
FONTS
=========================== */
@font-face{
font-family: 'Open Sans';
src: url('../css/fonts/OpenSans-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face{
font-family: 'Open Sans';
src: url('../css/fonts/OpenSans-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face{
font-family: 'Open Sans';
src: url('../css/fonts/OpenSans-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* ===========================
VARIABLES & TYPO
=========================== */
:root{
--real-accent-color:#4b55c5;
--real-light-bg:#eef2ff;
--real-border-color:#d1d5db;
--real-text-dark:#1f2937;
--real-text-muted:#6b7280;
--font-sans: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
--font-heading: var(--font-sans);
}
h1, h2, h3, h4, h5, h6{ font-family: var(--font-heading); font-weight: 700}
/* ===========================
BASE
=========================== */
html, body { height: auto; overflow-x:hidden; overflow-y: visible;}
body { font-family: var(--font-sans); font-size: 10.5pt; line-height: 1.5; margin: 0; padding-top: 80px; font-weight: 400; min-height: 100vh; display: flex; flex-direction: column; }
.page-container { display: flex; flex-direction: column; min-height: 100vh; }
.content-wrap { flex: 1 0 auto; margin: 0 6%;}
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* ===========================
HEADER / NAV / LANG / FOOTER
=========================== */
/* Header */
.site-header { position: fixed; top: 0; left: 0; right: 0; width: 100%; background: #fff; z-index: 1000; transition: transform .2s ease, box-shadow .2s ease; overflow: visible; z-index: 2000;}
.site-header.compact .navbar{ padding:8px 6%; box-shadow: 0px 3px 5px rgba(0,0,0,.15) }
.site-header.compact .logo img{ height:34px; }
.site-header.compact .nav-links li a{ font-size:14px; }
/* Navbar */
.navbar { display: flex; justify-content: space-between; align-items: center; font-size: 13px; text-transform: uppercase; background: #fff; padding: 20px 6%; width: 100%; box-sizing: border-box;}
.nav-links { display:flex; list-style:none; margin:0; padding:0;}
.nav-links li a { text-decoration:none; color:#1a1a1a; font-size:18px; font-weight:600; transition: color .3s, font-size .3s ease;}
.nav-links li a:hover { color:#0073e6; }
.nav-links li a.active { color: #0073e6; border-bottom: 2px solid #0073e6; }
.navbar-right{ display:flex; align-items:center; gap:10px; }
/* Langue */
.lang-switch { position: relative; }
#lang-btn { display:flex; align-items:center; gap:5px; background:none; border:none; cursor:pointer; padding:5px 10px; font-size:18px;}
#lang-arrow { font-size:10px; transition: transform .3s ease; }
.lang-switch.open #lang-arrow { transform: rotate(180deg); }
.lang-menu { position:absolute; top:110%; right:0; background:#fff; border:1px solid #ccc; list-style:none; padding:0; margin:0; width:80px; text-align:center; box-shadow:0 1px 2px rgba(0,0,0,.1); z-index:2000;}
.lang-menu li { padding:0; cursor:pointer; transition: background-color .2s; border-bottom:1px solid #ccc; }
.lang-menu li:last-child { border-bottom:none; }
.lang-menu li:hover { background:#f0f0f0; }
.lang-menu a { text-decoration:none; color:#000; display: block;  width: 100%; padding: 8px 0; }
.lang-menu a:hover { background: #f0f0f0; }
.lang-menu a:focus-visible { outline: 2px solid #3a54ad; outline-offset: 2px; }
/* Footer */
.site-footer { background:#3a54ad; color:#fff; padding:15px 60px; font-size:10pt;   margin-top:auto;}
.footer-content{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(12px, 2.5vw, 40px); justify-content:center; align-items:start; margin: 0 6%;}
.footer-section{ display:flex; flex-direction:column; align-items:flex-start; text-align: left; }
.footer-section.logo-section img{ height:60px; margin-bottom:5px; margin-top: 30px;}
.footer-section.logo-section .cert-wrap{ height: clamp(80px, 9vw, 120px); display:flex; align-items:center; justify-content:center; }
.footer-section:has(.iso-logo) { align-items: center; text-align: center; }
.iso-logo{ height: clamp(80px, 9vw, 120px) !important; width:auto; object-fit:contain; display:block; margin-bottom:10px; }
.footer-section h4{ margin-bottom: clamp(8px, 1.5vw, 15px); font-size: clamp(18px, 2vw, 24px); font-weight: bold; }
.footer-section ul{ list-style:none; padding:0; margin:0;}
.footer-section ul li{ margin:6px 0; font-weight:500; }
.footer-section a{ color:#fff; text-decoration:none; font-size: clamp(13px, 1.6vw, 15px); transition: color .3s ease; }
.footer-section a:hover{ color:#0073e6; }
.footer-links{ display:flex; gap:15px; flex-direction:column; align-items:center; }
.footer-bottom{ margin: 0 6%; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; border-top:1px solid #ccc; padding-top:15px;}
.footer-bottom p{ margin:0; }
.footer-bottom a{ color:#fff; text-decoration:none; transition: color .3s ease; }
.footer-bottom a:hover{ color:#0073e6; }
.footer-description{ margin-top:3pt; width:100%; }
.footer-section.explorer, .footer-section.contact-section, .footer-section.certification{ align-items: center; text-align: center;}
.footer-cert-link { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit;}
.footer-cert-link:hover, .footer-cert-link:hover * { color: inherit !important;}
/* ===========================
SECTEURS (grille interactive)
=========================== */
.secteurs-section{width: 100vw; background: #fff; padding-top: 0; overflow: hidden; margin-left: 50%; transform: translateX(-50%); position: relative; left: 0; }
.secteurs-list{ display:flex; isolation: isolate; justify-content:center; align-items:stretch; list-style:none; padding:0; margin:0; position:relative; z-index:0; }
.secteurs-list.expanded-background::before{ opacity:1; }
.secteurs-list::before, .secteurs-list::after{ content:""; position:absolute; inset:0; background-image: var(--expanded-image, none); background-size: cover; background-position: center; background-repeat: no-repeat; pointer-events: none; z-index: -1; opacity: 1; transition: opacity .22s ease; }
.secteurs-list::after{ background-image: var(--bg-next, none); opacity: 0;}
.secteur{ position:relative; flex:1; height:650px; cursor:pointer; overflow:hidden; z-index:2; transition: flex .3s ease, filter .3s ease;}
.secteur::before{ content:''; position:absolute; inset:0; background-image:var(--bg-image); background-size:cover; background-position:center; filter:brightness(.6); transition: transform .4s ease, filter .4s ease, opacity .4s ease; z-index:1;}
.secteur:hover::before{ transform: scale(1.05); filter:brightness(.9); }
.secteur.dimmed::before{ filter:brightness(.45); }
.secteur-headline, .secteur-toggler{ position:absolute; z-index:3; font-weight:bold; line-height:1; background:none; border:none; cursor:pointer;}
.secteur-headline{ top:15px; left:15px; text-transform:uppercase; color:#fff; text-shadow: 2px 2px 5px black; line-height:1.2; display:inline-block; max-width:65%; font-size: 13pt;  text-wrap: balance;}
.secteur-toggler{ top:8px; right:20px; color:#fff; font-size:24pt; text-shadow:0 0 4px rgba(0,0,0,.7); }
.secteur.expanded .secteur-toggler{ display:none; }
.secteur.expanded::before{ opacity:1; }
.secteur.expanded .secteur-headline{  background: rgba(0, 0, 0, 0.5); max-width: 100%; width: 100%; padding: 6pt 14pt; top: 0; left: 0;}
.secteur { position: relative; }
.panel-close{ position: absolute; top: 0; right: 10px; width: 36px; height: 36px; display: flex; font-size: 24pt; color: #fff; background: none; border: none; z-index: 10; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; text-shadow: 0 0 4px rgba(0,0,0,.7);}
.secteur.expanded .panel-close{ opacity: 1; pointer-events: auto;}
.secteur.hovered{ flex:1.3; }
.secteur.hover-sibling{ flex:.85; }
.secteur.expanded{ flex:1.3; }
.secteur.compressed{ flex:.85; }
.secteur.expanded, .secteur.compressed{ border-left:1px solid rgba(255,255,255,.3); border-right:1px solid rgba(255,255,255,.3); }
.secteur.compressed::before{ opacity:0; visibility:hidden; background-image:none; }
.secteur.compressed::after{ content:''; position:absolute; inset:0; background:transparent; z-index:2; }
.secteur.compressed .secteur-toggler{ color:white; }
.secteurs-list:has(.secteur.expanded) .secteur::before,
.secteurs-list:has(.secteur.expanded) .secteur:hover::before,
.secteurs-list:has(.secteur.expanded) .secteur.dimmed::before{ transform: none !important; }
/* Unifier l’image de fond sur la zone des 5 secteurs quand un secteur est ouvert */
.secteurs-list.expanded-background .secteur::before{ opacity: 0; visibility: hidden; background-image: none;}
.secteurs-list.bg-instant::after{ transition: none; opacity: 0; }
/* ===========================
RÉALISATIONS — CARROUSEL
=========================== */
.realisations-section { margin-top:60px; padding:40px 0; }
.realisations-section .carousel-container{ position: relative; overflow: hidden; }
.realisations-section .carousel{ display: flex; align-items: flex-start; will-change: transform; transition: transform .5s ease; overflow: visible !important; scroll-snap-type: none !important;}
.realisations-wrapper{ display:flex; align-items:flex-start; justify-content:space-between; max-width:1700px; margin:0 auto; padding:20px 20px;}
.realisations-intro{ flex:0 0 25%; max-width:250px; margin-right:10px; margin-left:20px; }
.realisations-intro h2{ font-size:20pt; font-weight:bold; text-align:left; color:#3a54ad; text-transform:uppercase; margin:0 0 15px; min-width: 400px;}
.realisations-intro p{ margin:0; line-height:1.5; color:var(--real-text-dark); width:450px; }
.carousel-container{ position:relative; overflow:hidden; flex:1; margin-left:55px; max-width:1000px; }
.carousel{ display:flex; align-items:flex-start; transition: transform .5s ease; will-change: transform; padding-bottom:20px; }
.slide{ position:relative; flex:0 0 350px; margin-right:24px; background:#fff; border-radius:5px; box-shadow:0 2px 6px rgba(0,0,0,.25); display:flex; flex-direction:column; overflow:hidden; transform-origin:center top; min-height: 270px; transition: transform .4s ease, filter .4s ease, min-height .3s ease; background: #e5efff;}
.slide img{ width:92%; cursor: pointer; height: 220px; object-fit:cover; margin:40px auto 6px; transition: height .3s ease;}
.slide-content{ display:flex; align-items:center; gap:10px; padding:10px 12px 0; justify-content:center; }
.slide-title{ position:absolute; top: 10px; align-items:center; height:32px; padding:0 12px; margin:0; font-size:12pt; font-weight:600; color:#3a54ad; white-space:nowrap;}
.slide footer{ border-top:1px solid var(--real-border-color); padding:8px 16px 12px; font-size:.75rem; color:var(--real-text-muted); text-align:center; }
.slide.active{ transform: scale(1); opacity:1; filter:none; }
.slide.inactive{ transform: scale(.95); filter:none; }
/* Slide "Voir toutes nos réalisations" */
.slide-redirect-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;}
.slide-redirect-title { font-size: 100pt; font-weight: 700; color: #3a54ad; margin: 0; cursor: pointer;}
.slide-redirect-btn { margin-top: -30pt; border: none; outline: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 16px 24px; border-radius: 5px; font-size: 10pt; background: #3a54ad; color: #fff; transition: background .2s ease, transform .15s ease, box-shadow .15s ease;}
.slide-redirect-btn:hover { background: #2e4490;transform: translateY(-1px); box-shadow: 0 8px 20px rgba(58,84,173,.35);}
.nav-controls{ margin-top:30px; display:flex; gap:12px; }
.nav-button{ width:50px; height:50px; border:2px solid #3a54ad; border-radius:50%; background:#fff; color:#3a54ad; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.2); transition: all .3s ease; font-size:20pt; line-height:1;}
.nav-button:hover{ background:#3a54ad; color:#fff; }
.nav-button.disabled{ opacity:.5; cursor:default; pointer-events:none; }
.nav-button.prev{ left:8px; }
.nav-button.next{ right:8px; }
/* ===========================
PAGINATION
=========================== */
#pagination a, #pagination span{ min-width:10px; height:28px; padding:0 6px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; line-height:1;}
.pagination a{ color:#4b5563; }
.pagination .current{ background:#3a54ad; color:#fff; font-weight:600; }
.pagination .ellipsis{ color:#6b7280; pointer-events:none; padding:0 2px; }
#pagination{ display:flex; justify-content:center; align-items:center; gap:6px; width:100%; margin:24px auto 0; }
#pagination .chev{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; font-size:1.6rem; line-height:1; transform: scaleY(1.6); transform-origin:center; }
/* ===========================
PAGE D’ACCUEIL — VISUELS + TEXTE
=========================== */
.about-valmeca{  margin: 60px auto; max-width: 80%;}
.about-valmeca__grid{ margin: 0 auto; padding-left:0; display:grid; grid-template-columns:1fr 1fr; gap:48px; justify-content: center;}
.about-valmeca__media{ margin:0; background:transparent; border:0; border-radius:0; overflow:visible; min-height:0; display:flex; align-items:flex-start; justify-content:flex-start; }
.about-valmeca__media img{ width:100%; max-width:650px; height:500px; display:block; object-fit:contain; padding:0; margin-left:0; }
.about-valmeca__badge{ display:none; }
.about-valmeca__content{ background:transparent; border:0; border-radius:0; box-shadow:none; padding:0; }
.about-valmeca__title{ font-size:25pt; margin-top:0; color:#3a54ad; text-transform:uppercase; }
.about-valmeca__content p{ margin:10px 0 12px; color:#1f2937; line-height:1.5; }
.about-valmeca__content strong{ color:#5b74c8; font-weight:500; }
.about-valmeca__cta{ display:inline-block; margin-top:14px; padding:10px 16px; border-radius:8px; background:#3a54ad; color:#fff; text-decoration:none; font-weight:600; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;}
.about-valmeca__cta:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(30,64,175,.25); background:#2f46a1; }
/* ===========================
CONTACT ACCUEIL — Formulaire + feedback + bouton décor
=========================== */
.contact-section{ background:#fff; padding:40px 20px 100px; margin-top:50px; }
.contact-grid{ max-width: 1700px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: clamp(200pt, 26vw, 420pt) minmax(350pt, 1fr); gap: clamp(24pt, 12vw, 250pt);}
.contact-intro{text-align:left; margin-left:0; padding-left:0;}
.contact-intro h2{ font-size:20pt; font-weight:bold; color:#3a54ad; text-transform:uppercase; margin:0 0 10px;}
.contact-intro p{ margin:0 0 12px; color:#1f2937; line-height:1.5; }
.contact-section .button-container{ grid-column:1 / -1; display:flex; align-items:center; justify-content:center; width:100%; max-width:800px; margin:20px auto; padding:0 40px;}
.contact-section .decorative-line{ flex:1; height:2px; background: linear-gradient(90deg, transparent 0%, rgba(58,84,173,.6) 20%, rgba(58,84,173,.8) 50%, rgba(58,84,173,.6) 80%, transparent 100%); position:relative;}
.contact-section .decorative-line::before{ content:''; position:absolute; top:-1px; left:0; right:0; height:4px; background: linear-gradient(90deg, transparent 0%, rgba(58,84,173,.2) 20%, rgba(58,84,173,.4) 50%, rgba(58,84,173,.2) 80%, transparent 100%); filter: blur(2px);}
.contact-section .elegant-button{ background: linear-gradient(145deg, #3a54ad, #2d4299); border:none; padding:18px 40px; margin:0 30px; border-radius:50px; font-size:14pt; font-weight:600; color:#fff; cursor:pointer; position:relative; overflow:hidden; box-shadow:0 8px 32px rgba(58,84,173,.3), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.1); transition: all .3s cubic-bezier(0.4, 0, 0.2, 1); text-transform:uppercase; min-width:200px; justify-content: center;}
.contact-section .elegant-button::before{ content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); transition:left .5s ease;}
.contact-section .elegant-button:hover{ transform: translateY(-2px); box-shadow:0 12px 40px rgba(58,84,173,.4), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.1); background: linear-gradient(145deg, #4a64bd, #3a54ad);}
.contact-section .elegant-button:hover::before{ left:100%; }
.contact-section .elegant-button:active{ transform: translateY(0); box-shadow: 0 4px 16px rgba(58,84,173,.2), inset 0 2px 4px rgba(0,0,0,.2);}
.contact-section .button-icon{ display:inline-block; margin-left:8px; transition: transform .3s ease; }
.contact-section .elegant-button:hover .button-icon{ transform: translateX(3px); }
/* Form */
.contact-form{ display:grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap:22px 26px; }
.form-field{ display:flex; flex-direction:column; }
.col-12{ grid-column: span 12; }
.col-6{ grid-column: span 6; }
.col-4{ grid-column: span 4; }
.contact-form label{ font-weight:600; color:#3a54ad; margin-bottom:8px; }
.req{ color:#c1352b; font-weight:600; }
.contact-form input, .contact-form textarea{ appearance:none; border:1px solid #d6d9e3; border-radius:10px; background:#fff; padding:10px 12px; outline:none; transition: border-color .15s ease, box-shadow .15s ease;}
.contact-form input{ height: auto; min-height: 44px; }
.contact-form input,.contact-form textarea{ box-sizing: border-box;}
.contact-form textarea{ resize:vertical; min-height:120px; max-height:300px; width: 100%; max-width: 100%; }
.contact-form input:focus, .contact-form textarea:focus{ border-color:#3a54ad; box-shadow:0 0 0 3px rgba(58,84,173,.12); }
.required-note{ grid-column:1 / -1; margin:4px 0 0; font-weight:600; color:#1b2340; }
.btn-submit{ grid-column:1 / -1; margin-top:10pt; padding: 14px 20px; height:56px; border-radius:10px; background:#3a54ad; color:#fff; font-size:22px; font-weight:400; border:none; cursor:pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;}
.btn-submit:hover{ background:#2f46a1; transform: translateY(-1px); box-shadow:0 8px 18px rgba(47,70,161,.25); }
.phone-field{ flex-direction:column; }
.phone-field input{ order:0; flex:initial; }
.half{ grid-column: span 1; }
.input-error{ border-color:#b00020; outline-color:#b00020; }
.error-msg{ color:#b00020; font-size:.9rem; margin-top:6px; }
/* Page de remerciement */
.contact-feedback{ max-width:800px; margin:80px auto; padding:40px 50px; background:#fff; border-radius:12px; box-shadow:0 4px 20px rgba(0,0,0,.08); text-align:center;}
.contact-feedback h1{ font-size:2.2rem; margin-bottom:20px; font-weight:bold; color:#3a54ad; }
.contact-feedback p{ font-size:1.2rem; line-height:1.6; color:#333; margin-bottom:25px; }
.contact-feedback .ok{ color:#3a54ad; }
.contact-feedback .err{ color:#b00020; }
.contact-feedback a.btn-primary{ display:inline-block; background:#3a54ad; color:#fff; padding:12px 24px; border-radius:8px; text-decoration:none; font-weight:600; transition: background .3s ease;}
.contact-feedback a.btn-primary:hover{ background:#2f46a1; }
/* ===========================
POPUP ACCUEILS + PRODUCTION (pm)
=========================== */
.pm.hidden{ display:none; }
.pm{ position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; }
.pm .pm-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.pm .pm-dialog{ position: relative; z-index: 1; width: clamp(320px, 80vw, 720px); max-height: clamp(360px, 92dvh, 720px);  background:#f1f6ff; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 16px; padding: 16px; overflow: auto; }
.pm .pm-close{ position:absolute; top:8px; right:10px; border:0; background:#f1f6ff; width:28px; height:28px; border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,.2); cursor:pointer; font-size:18px; line-height:1;}
.pm .pm-image{ width: 90%; height: auto; max-height: clamp(200px, 50dvh, 480px); object-fit: contain; display: block; margin: 0 auto; }
.pm .pm-nav{ position: absolute; top: 55%; transform: translateY(-50%);   width: clamp(30px, 4vw, 40px); height: clamp(45px, 6vw, 70px); font-size: clamp(18pt, 3vw, 26pt); background: rgba(58,84,173, .9); border: none; color: #fff; display:flex; align-items:center; justify-content:center; cursor: pointer; line-height: 1; z-index: 3; transition: background .2s ease; }
.pm .pm-nav.prev { left: 8px; }
.pm .pm-nav.next {right: 8px; }
.pm .pm-dots{ position: sticky; bottom: 0; display:flex; gap:8px; justify-content:center; margin: 6px auto 0; }
.pm .pm-dots button{ width:8px; height:8px; border-radius:50%; border:0; background:#cbd5e1; cursor:pointer; }
.pm .pm-dots button.active{ background:#3a54ad; }
.pm .pm-title{ margin:6px 0 10px; font-size:20px; text-align:center; font-weight:800; text-transform:uppercase; }
.pm .pm-meta{ display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 10pt; margin-bottom: 10px; padding-bottom: 12px; align-items: center; justify-content: center; border-bottom:1px solid #cbd5e1;}
.pm .pm-meta strong{ color:#1f2937; }
.pm-dialog:focus{ outline:none; }
/* ===========================
PAGE PRODUITS — hero / filtres / cartes
=========================== */
.hero-products{ position:relative; height:500px; overflow:hidden; margin-top:40px; position: relative; }
.hero-products img{ width:100%; height:100%; object-fit:cover; }
.hero-products h1{ position:absolute; left: 48px; bottom: 48px; margin: 0; color:#fff; font-size:2.3rem; font-weight:bold;}
.products-wrap{ max-width:1400px; margin:24px auto 60px; padding:0 20px; }
/* Recherche + filtres */
.searchbox{ position:relative; max-width:520px; margin:70px auto 30px; }
.searchbox input[type="search"]{ width:100%; height:46px; padding:0 50px 0 14px; border:1px solid #d7d2f0; background:#f1f6ff; border-radius:0; outline:none; font-size:11pt;}
.searchbox input::placeholder{ color:#6b608f; }
.searchbox .icon-btn{ position:absolute; top:0; right:0; bottom:0; width:46px; border:0; border-radius:0; background:#3a54ad; display:flex; align-items:center; justify-content:center; cursor:pointer;}
.searchbox .icon-btn svg{ fill:#fff; width:20px; height:20px; }
.multi-select { position: relative; cursor: pointer; }
.multi-select-display { padding: 12px; background: white; border-radius: 6px; border: 1px solid #d9dde4; height: 15px; align-items: center; display: flex;}
.multi-select-dropdown { position: absolute; left: 0; right: 0; background: white; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,0.1); padding: 10px; display: none; z-index: 15; }
.multi-select.open .multi-select-dropdown { display: block; border: 1px solid #d9dde4; }
.multi-select-dropdown label { display: block; cursor: pointer; }
#secteur-multi { position: relative; }
#secteur-multi .multi-select-display { padding-right: 106px; }
#secteur-multi .multi-select-clear { position: absolute; right: 8%; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: 0; background: transparent; cursor: pointer; display: none; line-height: 1; padding: 0; }
#secteur-multi .multi-select-clear::before { content: "✕"; font-size: 14px; color: #6b7280;}
#secteur-multi.has-value .multi-select-clear { display: inline-block; }
#secteur-multi .multi-select-clear:hover::before { color: #111827; }
#secteur-multi .multi-select-display:focus, #secteur-multi.open .multi-select-display { border-color: #3a54ad;  box-shadow: 0 0 0 2px rgba(47, 73, 167, .15);  outline: none; }
#secteur-multi.has-value .multi-select-display { border-color: #3a54ad; background-color: #dfe7ff; color: #1f2937; text-shadow: 0.03em 0 0 currentColor; }
#secteur-multi .multi-select-display:active { box-shadow: 0 0 0 2px rgba(47, 73, 167, .15); }
#secteur-multi.has-value .multi-select-dropdown { background-color: #fff; }
.multi-select-group-title{ margin: 6px 0 2px; padding-top: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; color: #6b7280;}
#secteur-multi .multi-select-dropdown .multi-select-group-title:not(:first-child){ border-top: 1px solid #e5e7eb; padding-top: 8px; margin-top: 8px; }
.multi-select-dropdown label[data-filter-type]{ padding: 4px 6px; }
.multi-select-dropdown label[data-filter-type].is-active{ background-color: #f3f4f6; text-shadow: 0.03em 0 0 currentColor; }
#secteur-multi { position: relative; }
#secteur-multi::after { content: "▾"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; color: #6b7280; pointer-events: none; transition: opacity .15s ease; }
#secteur-multi.has-value::after,
#secteur-multi.has-value.open::after { opacity: 0; visibility: hidden; }
.select-wrapper.has-value::after { opacity: 0; }
.filters-pills{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center; margin:0 0 12px; }
.filters-pills .select-wrapper{ position: relative; display: inline-block; min-width: 170px; background: #fff; border: 1px solid #d9dde4; border-radius: 6px; }
.filters-pills .select-wrapper select{ width: 100%; height: 40px; padding: 0 30px 0 12px; font-size: 10.5pt; color: #1f2328; background: transparent; border: 0; border-radius: 6px; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; }
.filters-pills .select-wrapper::after{ content:"▾"; position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:16px; color:#6b7280; pointer-events:none; transition: opacity .15s ease;}
.filters-pills .select-wrapper select:hover{ border-color:#cfd4dc; }
.filters-pills .select-wrapper:focus-within { border-color: #3a54ad; box-shadow: 0 0 0 2px rgba(47,73,167,.15); }
.filters-pills .select-wrapper select{ padding-right:34px; }
.filters-pills .clear-select{ position:absolute; right:8px; top:50%; transform:translateY(-50%); width:20px; height:20px; border:0; background:transparent; cursor:pointer; display:none; line-height:1; padding:0;}
.filters-pills .clear-select::before{ content:"✕"; font-size:14px; color:#6b7280; }
.filters-pills .select-wrapper.has-value .clear-select{ display:inline-block; }
.filters-pills .clear-select:hover::before{ color:#111827; }
.filters-pills .select-wrapper.has-value{ border-color: #3a54ad; background-color: #dfe7ff;}
.filters-pills .select-wrapper.has-value select{ text-shadow: 0.03em 0 0 currentColor; color: #1f2937;}
.filters-pills .select-wrapper select option {  background-color: #fff !important; color: #1f2937 !important;}
.btn.primary{ height:40px; padding:0 14px; border-radius:8px; border:1px solid #3a54ad; background:#3a54ad; color:#fff; font-size:13px; font-weight:500; text-decoration:none;  transition: background .15s ease, border-color .15s ease, transform .08s ease;}
.btn.primary:hover{ background:#274096; border-color:#274096; }
.btn.primary:focus{ box-shadow:0 0 0 2px rgba(47,73,167,.2); outline:none; }
.dropdown{ position:relative; }
.dropdown-panel{ position:absolute; top:calc(100% + 8px); left:0; min-width:220px; background:#fff; border:1px solid #e1e1e8; border-radius:8px; box-shadow:0 12px 30px rgba(0,0,0,.08); padding:10px; display:none; z-index:20;}
.dropdown.open .dropdown-panel{ display:block; }
.ck{ display:flex; align-items:center; gap:8px; padding:6px 4px; border-radius:6px; }
.ck input{ width:16px; height:16px; }
.ck:hover{ background:#f6f7fb; }
/* Grid cartes */
.cards-grid{ display:grid; gap:28px; margin-top:10px; justify-content: center; grid-template-columns: repeat(4, minmax(320px, 320px)); }
#results-count{ color:#70726E; }
/* Cartes */
.product-card{ background:#f1f6ff; border:1px solid #E7EAF0; border-radius:5px; overflow:hidden; display:flex; flex-direction:column; opacity:0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; width:320px;}
.product-card.reveal{ opacity:1; transform: translateY(0); transition-delay: calc(var(--i, 0) * 40ms); }
.product-card .thumb{ position:relative; width: 100%; height:200px; display:grid; place-items:center; overflow: hidden; }
.product-card .thumb img{ width:92%; height:80%; object-fit: cover; margin: 10px auto 6px; cursor: pointer; top: 10%; position: absolute; }
.product-card .body{ padding:10px 12px 12px; display:flex; flex-direction:column; gap:8px; }
.product-card h3{ font-size:15px; margin:0; line-height:1.3; }
.meta{ margin-top:6px; padding:10px 12px 12px; border-top:1px solid #E7EAF0; font-size:12px; color:#6B7280; display:flex; gap:6px; justify-content:center; flex-wrap:wrap;}
.chips{ display:flex; gap:6px; margin-left:auto; }
.chip{ font-size:11px; padding:3px 8px; border-radius:999px; border:1px solid #ddd; background:#fafafa; }
.card-actions{ display:flex; gap:8px; margin-top:auto; }
.product-card .meta.meta-inline{ display:flex; align-items:center; justify-content:center; gap:6px; font-size:.9rem; color:#6B7280; padding:10px 12px 12px;}
.product-card .meta .sep{ opacity:.85; }
/* Bandeau sous image + bouton */
.product-card .pc-controls{ display:flex; gap:8px; padding:10px 12px 0; align-items:center; justify-content:center; }
.product-card .pc-tag{ position: absolute; top: 10px; align-items: center; height: 32px; padding: 0 12px; margin: 0; font-size: 12pt; font-weight: 600; color:#3a54ad; white-space: nowrap;}
.product-card .pc-btn{ display:inline-flex; align-items:center; justify-content:center; height:32px; padding:0 12px; font-size:13px; border-radius:8px; border:1px solid #3a54ad; background:#3a54ad; color:#fff; text-decoration:none; transition: background .15s ease, border-color .15s ease, transform .08s ease;}
.product-card .pc-btn:hover{ background:#274096; border-color:#274096; }
.product-card .pc-btn:active{ transform: translateY(1px); }
.results-loading{ position:relative; }
.results-loading::after{ content:""; position:absolute; inset:0; background:rgba(255,255,255,.65); backdrop-filter: blur(2px); }
.results-spinner{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.results-spinner::before{ content:""; width:36px; height:36px; border-radius:50%; border:3px solid #c7cdd9; border-top-color:#1d4ed8; animation: spin .8s linear infinite;}
@keyframes spin{ to{ transform: rotate(360deg); } }
.empty-state{ margin: 0 auto; display:grid; gap:10px; place-items:center; border:1px dashed #cbd5e1; background:#f8fafc; padding:18px; border-radius:10px; color:#3a54ad; text-align:center;   grid-column: 1 / -1; justify-self: center;  max-width: 420px;  }
.empty-state h4{ margin:0; font-size:1.05rem; }
.empty-state p{ margin:0; color:#475569; }
.empty-actions{ margin-top:6px; }
.empty-actions .btn-reset{  display:inline-block; padding:8px 12px; border-radius:8px; font-weight:600; text-decoration:none; background:#3a54ad; color:#fff;}
.empty-actions .btn-reset:hover{ background:#274096; }
@keyframes shake{
10%,90%{ transform: translateX(-1px); }
20%,80%{ transform: translateX(2px); }
30%,50%,70%{ transform: translateX(-4px); }
40%,60%{ transform: translateX(4px); }
}
.input-shake{ animation: shake .35s ease both; }
/* ===========================
CARRIÈRES
=========================== */
.jobs-hero{ max-width:1650px; margin:10px auto 0; padding:20px 20px; }
.jobs-hero h1{ font-size:20pt; font-weight:bold; color:#3a54ad; text-transform:uppercase; }
.jobs-hero p{ margin:0 0 18px; color:#1f2937; font-size:1.05rem; }
.jobs-controls{ max-width:1650px; margin:0 auto 8px; padding:0 20px; display:grid; grid-template-columns:1fr; gap: clamp(8px, 1.2vw, 16px); }
.jobs-search{ display:flex; gap:10px; align-items:center; color:#d6d9e3; padding:0 0 16px; }
.jobs-search input{ width:500px; height:42px; background:#f1f6ff; border:1px solid #f1f6ff; border-radius:20px; padding:8px 12px; font-size:16px; color:#6c6c6c;}
.btn-primary{ fill:#fff; display:inline-flex; align-items:center; justify-content:center; }
.jobs-search input:focus{ outline:none; }
.btn-primary{height:36px; border-radius:8px; border:1px solid #3a54ad; background:#3a54ad; color:#fff; cursor:pointer; text-decoration:none; width:110px;}
.btn-primary:hover{ background:#2f46a1; border-color:#2f46a1; }
.btn-outline{ background:#3a54ad; border:1px solid #3a54ad; border-radius:10px; padding:10px 14px; cursor:pointer; color:#fff; }
.btn-outline:hover{ background:#2f46a1; border-color:#2f46a1; }
.jobs-filters{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:end; padding:0 0 12px; }
.filter{ display:flex; flex-direction:column; gap:6px; }
.filter select{ height:42px; border:1px solid #d6d9e3; border-radius:10px; padding:8px 10px; background:#fff; }
.jobs-filters .select-wrapper{ position:relative; display:inline-block; min-width:200px; }
.jobs-filters .select-wrapper select{ height:42px; padding:0 46px 0 12px; border-radius:10px; font-size:14px; cursor:pointer; }
.jobs-filters .select-wrapper::after{ content:"▾"; position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:16px; color:#6b7280; pointer-events:none; opacity:.9; transition:opacity .15s; }
.jobs-filters .select-wrapper.has-value::after{ opacity:0; }
.jobs-filters .select-wrapper .clear-select{ position:absolute; right:8%; top:50%; transform:translateY(-50%); width:20px; height:20px; border:0; background:transparent; cursor:pointer; display:none; line-height:1; padding:0; z-index:1; }
.jobs-filters .select-wrapper .clear-select::before{ content:"✕"; font-size:14px; color:#6b7280; }
.jobs-filters .select-wrapper.has-value .clear-select{ display:inline-block; }
.jobs-filters .select-wrapper .clear-select:hover::before{ color:#111827; }
.jobs-filters .select-wrapper select:focus{ border-color:#3a54ad; box-shadow:0 0 0 2px rgba(58,84,173,.15); outline:0; }
.jobs-filters .select-wrapper.has-value select{ border-color:#3a54ad; }
#filters-form .filter > label,
.filters-pills .filter > label,
.jobs-filters .filter > label { display:none !important; }
.jobs-count{ color:#6b7280; font-size:.95rem; padding:0 0 8px; }
.jobs-layout{ max-width:1650px; margin:8px auto 0; padding:0 20px; display:grid; grid-template-columns:1fr; gap:50px; align-items:start; }
.jobs-layout.with-detail{ grid-template-columns:25% 70%; }
.jobs-list{ display:flex; flex-direction:column; gap:10px; margin-bottom: 50px; }
.job-card{ background:#f1f6ff; padding:10px 12px; cursor:pointer; outline:0; }
.job-card:hover{ box-shadow:0 3px 10px rgba(58,84,173,.12); background:#e5efff; }
.job-card.active{ border:1px solid #3a54ad; background:#e5efff; }
.job-card .job-title{ transition: color .3s; font-weight:600; margin:2px 6px 20px; color:#111827; font-size:16pt; gap:30px; }
.job-card:hover .job-title, .job-card:focus .job-title, .job-card.active .job-title{ color:#3a54ad; }
.job-meta{ display: grid; grid-template-columns: 1.2fr .8fr 1fr; grid-template-areas: "loc contrat tags"; align-items: center; gap: 10px 16px; color: #6b7280; font-size: clamp(13px, 1.7vw, 15px); }
.job-meta .dot::before{ content:"• "; color:#9aa0a6; }
.job-meta .job-location{ grid-area: loc; display:flex; align-items:center; gap:8px; }
.job-meta .job-contrat { grid-area: contrat; display:flex; align-items:center; gap:8px; }
.job-meta .job-tags    { grid-area: tags; display:flex; flex-wrap: wrap; gap: 6px; margin-top:0; margin-left: 0; }
.job-tag{ font-size: clamp(12px, 1.6vw, 13px); padding: 4px 8px; color: #6b7280; }
.job-tag img{ width:16px; height:16px; margin-right:6px; vertical-align:-2px; }
.icon{ width:16px; height:16px; vertical-align:-2px; margin-right:6px; }
/* Détail */
#jobs-detail{ background:#f1f6ff; padding:18px 18px 24px; overflow-y:auto; --head-gap-x: clamp(12px, 2.2vw, 26px); --head-gap-y: clamp(8px, 1.8vw, 16px); --meta-size: clamp(.95rem, .9rem + .25vw, 1rem); --btn-h: clamp(36px, 3.8vw, 42px); --logo-w: clamp(120px, 14vw, 200px); --logo-max-h: clamp(34px, 6vw, 64px); }
#jobs-detail .detail-head{ display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto auto; grid-template-areas:   "title  logo"   "meta   logo"   "apply  logo"; align-items:start; column-gap:var(--head-gap-x); row-gap:var(--head-gap-y); position:relative; }
#jobs-detail .detail-title{  grid-area: title; margin: 5px 0 15px 0; font-size: 20pt; line-height: 1.15; color: #111; text-wrap: balance; }
#jobs-detail .detail-meta-row{  grid-area: meta; display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: var(--meta-size); color: #5a5a5a; margin: 0; }
#jobs-detail .detail-apply{ grid-area: apply; display: inline-flex; align-items: center; gap: 8px; }
#jobs-detail .detail-apply .btn-primary{ height: var(--btn-h); padding: 0 16px; border-radius: 8px; }
.detail-meta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px 30px; margin-bottom:15px; margin-left:8px; }
.meta-item{ display:flex; align-items:center; gap:6px; }
#jobs-detail .meta-item .icon{ width:16px; height:16px; vertical-align:middle; }
#jobs-detail .detail-right{ grid-area:logo; display:flex; align-items:flex-start; justify-content:flex-end; }
#jobs-detail .detail-logo{ display:block; width:auto; max-width:var(--logo-w); max-height:var(--logo-max-h); height:auto; object-fit:contain; margin:0 50px 0 0; }
#jobs-detail .detail-close{ position: absolute; top: 4px; right: 0; border: 0; background: transparent; font-size: clamp(1rem, .9rem + .6vw, 1.3rem); color: #6b7280; cursor: pointer; }
#jobs-detail .detail-close:hover{ color:#111827; }
#jobs-detail .detail-section h3{ font-size:1.4rem; color:#3a54ad; text-transform:uppercase; }
#jobs-detail .detail-section ul{ padding-left:18px; margin:6px 0 0; }
#jobs-detail .detail-section li{ margin:6px 0; }
.detail-meta-top{ display:flex; flex-wrap:wrap; gap:15px; align-items:center; font-size:.95rem; color:#444242; margin:6px 0 2px; }
.detail-meta-bottom{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:.95rem; margin:6px 0 12px; }
.detail-meta-bottom .job-tag{ background:#f1f5f9; padding:3px 8px; border-radius:12px; font-size:.85rem; color:#333; }
.job-date-under{ margin:-25px 6px 10px; color:#6b7280; font-size:.8rem; padding:0 0 12px; }
.job-line{ display:flex; flex-wrap:wrap; align-items:center; color:#6b7280; }
.job-line span{ margin-right:32px; font-size: 9.5pt;}
.job-line .job-tag{ margin-right:0; padding-left: 0;}
.detail-apply{ display:flex; gap:8px; align-items:center; }
.detail-apply .btn-primary{ height:38px; padding:0 14px; border-radius:8px; }
.detail-close{ border:0; background:transparent; font-size:1.2rem; cursor:pointer; color:#6b7280; }
.detail-section{ margin:12px 8px 0; }
.detail-section h3{ color:#3a54ad; text-transform:uppercase; font-size:1.0rem; margin:10px 0; }
.detail-section ul{ margin:6px 0 10px 18px; }
.detail-map{ margin-top:10px; overflow:hidden; }
.detail-empty{ color:#6b7280; padding:16px; }
#jobs-detail:empty{ display:none; }
/* Pagination jobs */
#jobs-pagination a, #jobs-pagination span{ min-width:10px; height:28px; padding:0 6px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; line-height:1; margin:5px 0 60px;}
#jobs-pagination a{ color:#4b5563; }
#jobs-pagination .current{ background:#3a54ad; color:#fff; font-weight:600; }
#jobs-pagination .ellipsis{ color:#6b7280; pointer-events:none; padding:0 2px; }
#jobs-pagination{ display:flex; justify-content:center; align-items:center; gap:6px; width:100%; margin:24px auto 0;}
#jobs-pagination .chev{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; font-size:1.6rem; line-height:1; transform: scaleY(1.6); transform-origin:center;}
/* ===========================
APPLY / FORM
=========================== */
.apply-wrap{ max-width:1650px; margin:120px auto 64px; padding:0 20px; }
.apply-head{ display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; column-gap:16px; row-gap:16px; justify-content:space-between; align-items:center; margin-bottom:18px;}
.apply-head > div{ grid-column:1; grid-row:1 / span 2; }
.apply-head .apply-title{ margin: 0 0 6px; font-size:20pt; font-weight:bold; margin:-75px 0 10px; color:#3a54ad; text-transform:uppercase; }
.apply-head .apply-sub{ margin-left:18px; font-size:20pt; color:black; text-transform:uppercase; white-space:nowrap; margin-bottom:-15px;}
.back-link.btn{ background:#3a54ad; border:1px solid #3a54ad; color:#fff; font-weight:600; padding:clamp(2px, 0.5vw, 4px) clamp(0px, 0.8vw, 2px); border-radius:6px; text-decoration:none; grid-column:2; grid-row:2; align-self:center; white-space:nowrap;}
.apply-head .apply-sub{ font-size: clamp(14pt, 1.9vw, 20pt);}
#apply-form {margin-bottom: 180px; }
.apply-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.apply-card{ gap:12px 20px; align-items:center; box-shadow:0 5px 10px rgba(0,0,0,.1); background:#fff; padding:16px 16px 18px; max-height:270px;}
.apply-card h3{ margin:0 0 14px; font-size:16pt; font-weight:600; }
.apply-card .field{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.field label{ font-size:12pt; font-weight:600; color:#3a54ad; margin-bottom:8px; }
.apply-page .req::after{ color:#b00020; font-weight:700; }
.input, textarea{ width:70%; min-height:48px; font-size:12pt; border:1px solid #d7dcea; border-radius:8px; padding:12px 14px; box-sizing:border-box; font-family: var(--font-sans);}
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.hint{ color:#65728c; margin-top:75px; }
.apply-actions{ margin-top:14px; display:flex; justify-content:center; padding:20px 65px; }
.apply-actions .btn-primary{ font-size:16px; }
.error-msg{ margin:6px 0 0; font-size:.9rem; color:#b00020; }
/* Form compact */
.form-compact { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 12px; align-items: start; box-shadow: 0 5px 10px rgb(0,0,0,.1); background: #fff; padding: 20px 16px 18px;  }
.form-compact .field { display: flex; flex-direction: column; margin-left: 8px; margin-right: 8px; width: auto; }
.form-compact .field--full { grid-column: 1 / -1; }
.form-compact input, .form-compact textarea, .form-compact select { width: 100%; box-sizing: border-box; min-width: 0 }
.form-compact input, .form-compact textarea { appearance: none; border: 1px solid #d6d9e3; border-radius: 10px; background: #fff; padding: 10px 12px; outline: none }
.form-compact h3{ grid-column:1 / -1; margin:0 20px 35px; font-size:16pt; font-weight:600; }
.form-compact .required-note{ grid-column:1 / -1; margin-bottom:15px; margin-left:20px; }
/* Fichiers */
.file-field{ margin-bottom:14px; }
.file-field > label{ display:block; margin:0 0 6px; font-weight:600; color:#3a54ad; }
.file-input{ display:flex; align-items:center; gap:8px; }
.file-btn{ flex:0 0 auto; background:#c6d0f2; color:#000 !important; border:none; padding:1px 24px; height:36px; font-weight:500 !important; cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:6px 0 0 6px; font-size:15px !important;}
.file-input input[type="file"]{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.file-text{ flex:1; height:36px; border:1px solid #d6d9e3; border-radius:0 6px 6px 0; display:flex; align-items:center; padding:0 10px; background:#fff; color:#111; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:14px; margin-left:-8px; margin-top:-8px;}
/* Inputs focus générique */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea{ transition: all .25s ease; }
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="number"]:focus, textarea:focus{
border-color:#3a54ad; box-shadow:0 0 8px rgba(58,84,173,.35);
}
/* ===========================
PAGE ABOUT
=========================== */
.vm-history{ max-width:1250px; margin:10px auto 90px; padding:0 20px; }
.vm-header{ text-align:center; margin-bottom:6px; }
.vm-header__title{ margin:0; font-size:20pt; font-weight:800; color:#1e293b; background:transparent; border:0; box-shadow:none; }
.vm-nav{
--dot:26px; --bw:4px; --outer: calc(var(--dot) + (2 * var(--bw))); --pad:46px; --line:4px; --line-offset:10px; --gap:18px; --count:8;
position:relative; display:grid; grid-template-columns:repeat(var(--count), 1fr); column-gap: var(--gap); align-items:start;
padding-top: calc(var(--pad) + var(--outer)); padding-bottom:22px; user-select:none; overflow:hidden;
}
.vm-nav::before{
content:""; position:absolute; left:0; right:0; top: calc(var(--pad) + (var(--outer) / 2) + var(--line-offset));
height: var(--line); background: linear-gradient(90deg,#3a54ad,#6366f1); z-index:1;
}
.vm-nav-item{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }
.vm-year{ margin-top:10px; font-size:.95rem; font-weight:700; color:#3a54ad; }
.vm-dotbtn{
width:var(--dot); height:var(--dot); background:#e2e8f0; border: var(--bw) solid #fff; border-radius:50%; box-shadow:0 2px 6px rgba(0,0,0,.2);
transform: translateY(calc(-1 * (var(--outer) / 2))); cursor:pointer; z-index:2; transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.vm-dotbtn:hover{ transform: translateY(calc(-1 * (var(--outer) / 2))) scale(1.08); }
.vm-dotbtn:focus-visible{ outline:3px solid rgba(58,84,173,.45); outline-offset:6px; }
.vm-dotbtn.active{ background:#3a54ad; box-shadow:0 6px 16px rgba(58,84,173,.4); }
.vm-tabs{ position:relative; min-height:240px; margin-top:10px; }
.vm-tab{ opacity:0; transform: translateY(6px); transition: opacity .22s ease, transform .22s ease; position:absolute; inset:0 auto auto 0; pointer-events:none; }
.vm-tab.active{ opacity:1; transform: translateY(0); position:relative; pointer-events:auto; }
.vm-card__title{ margin:0 0 14px; font-size:1.45rem; font-weight:800; color:#1e293b; text-align:center; background:transparent; border:0; box-shadow:none; }
.vm-blocks{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; align-items:stretch; max-width:1100px; margin:0 auto; }
.vm-block{
flex:1 1 320px; max-width:520px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:18px 20px; box-shadow:0 6px 24px rgba(0,0,0,.06);
display:flex; align-items:center; justify-content:center;
}
.vm-bigtext{ margin:0; font-size:12pt; line-height:1.78; color:#111827; text-align:center; }
.metric-list{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin:20px 0 26px; }
.metric-item{ text-align:center; padding:10px 0; }
.metric-value{ font-size:26px; font-weight:300; color:#3a54ad; margin-bottom:6px; }
.metric-label{ font-size:12px; color:#6b7280; text-transform:uppercase; font-weight:600; }
.section-divider{ height:1px; background:#e5e7eb; margin:28px 0; }
.timeline{ display:grid; gap:10px; }
.timeline-row{ display:flex; align-items:flex-start; gap:12px; }
.timeline-dot{ width:8px; height:8px; background:#3a54ad; border-radius:50%; margin-top:6px; flex-shrink:0; }
.achievement-text{ line-height:1.6; color:#4b5563; }
/* Hero about */
.hero-about{ width: 100vw; margin-left: 50%; transform: translateX(-50%); position: relative; height: 550px; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; background: #000; margin-top: 40px; }
.hero-about img{ position:absolute; inset:0; height:100%; min-height:100%; min-width:100%; object-fit:cover; opacity:.9; }
.hero-about__content{ position:relative; z-index:2; width:100%; max-width:1400px; padding:20px 24px 28px; text-align:center; margin:30px auto; }
.hero-about__title{ color:#fff; font-size:2.6rem; font-weight:800; text-transform:uppercase; margin:-50px 0 80px; }
.hero-about__cta{ display:flex; flex-wrap:wrap; justify-content:center; gap: clamp(10px, 2.5vw, 20px); }
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:4px 16px; border-radius:8px; text-decoration:none; font-weight:700; height:35px; width:160px; font-size:13px; transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease, border-color .12s ease; }
.btn-primary-about{ background:#3a54ad; color:#fff; border:1px solid #3a54ad; }
.btn-primary-about:hover{ background:#2e4490; transform: translateY(-1px); box-shadow:0 8px 18px rgba(47,70,161,.25); }
.btn-ghost-about{ background: rgba(255,255,255,.9); color:#3a54ad; border:1px solid #e5e7eb; }
.btn-ghost-about:hover{ background:#fff; transform: translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.15); }
/* Ateliers */
.secteurs-titre{ margin:36px auto; max-width:1100px; padding:0 20px; font-size:20pt; font-weight:800; color:#3a54ad; text-transform:uppercase; text-align:center; }
.about-intro{ max-width:1100px; margin:18px auto 50px; padding:0 20px; text-align:center; }
.about-intro p{ margin:10px auto 0; color:#1f2937; line-height:1.6; max-width:900px; }
.photo-presentation{ max-width:1100px; margin:0 auto 40px; padding:0 20px; }
.photo-presentation img{ width:100%; display:block; background:#e5e7eb; }
.ateliers{ max-width:1150px; margin:10px auto 70px; padding:0 20px; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:26px; align-items:stretch; }
.site-card{ display:flex; flex-direction:column; padding: 12pt; gap:2pt; }
.site-card h3{ margin:0; text-align:center; font-size:20pt; color:#3a54ad; text-transform:uppercase; }
.site-card .subtitle{ margin:0 0 6pt; text-align:center; color:#d1791d; font-size:1.1rem; }
.site-card .photo{ width:100%; background:#e5e7eb; overflow:hidden; }
.site-card .photo img{ width:100%; object-fit:cover; display:block; }
.site-card .content{ flex:1; display:flex; flex-direction:column; }
.site-card p{ color:#1f2937; margin: 0;}
.site-card .infos{ margin-top:auto; font-size:.95rem; color:#1f2937; line-height:1.5; }
.site-card .infos h4{ margin:10px 0 15px; font-size:14pt; color:#3a54ad; text-transform:uppercase; }
.site-card .infos a{ color:#1f2937; text-decoration:none; transition: color .2s, text-decoration .2s; }
.site-card .infos a:hover{ text-decoration:underline; }
.site-card .cta-row{ margin-top:10px; display:flex; justify-content:center; }
.btn-small{ padding:10px 12px; background:#3a54ad; color:#fff !important; border:1px solid #3a54ad; border-radius:6px; text-decoration:none !important; margin:20px 0; }
.btn-small:hover{ background:#2e4490; transform: translateY(-1px); box-shadow:0 8px 18px rgba(47,70,161,.25); }
/* ===========================
PAGE CONTACT
=========================== */
.phone-row {
align-items: center;
gap: 8px;
font-size: 10.5pt;
display: flex;
white-space: nowrap;
width: 100%;
}
.phone-row > img {
display: block;
height: 14px;
width: auto;
}
.fax-amneville { height: 12px !important;}
/* Bouton copier */
.copy-fone-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px;
margin-left: 4px;
border-radius: 999px;
border: none;
background: transparent;
cursor: pointer;
transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.copy-fone-btn:hover {
background-color: rgba(58, 84, 173, 0.08);
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
}
.copy-fone-btn:active {
transform: scale(0.96);
box-shadow: none;
}
.copy-icon {
display: block;
height: 18px;
width: 18px;
}
.copy-fone-btn:focus-visible {
outline: 2px solid #3a54ad;
outline-offset: 2px;
}
.page-title{ font-size:20pt; font-weight:bold; text-align:center; margin:40px 0 40px; color:#3a54ad; text-transform:uppercase; }
/* 2 cartes adresses */
.page-contact .sites-cards{ max-width:980px; margin:10px auto 24px; padding:0 16px; display:grid; grid-template-columns:repeat(2, minmax(280px, 360px)); gap:120px; justify-content:center; }
.page-contact .site-card{  padding:20pt; }
.page-contact .site-card h3{ margin:0; color:#3a54ad; font-size:20pt; text-transform:uppercase; text-align:left; }
.page-contact .site-card .site-badge { position: relative; top: -10px; left: 0; background: #3a54ad; color: #fff; font-size: 8pt; padding: 4px 6px; box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
/* Grille Formulaire + Carte */
.page-contact .contact-grid{ max-width:1100px; margin: 0 auto; margin-bottom: 80px; padding:0 16px; display:grid; grid-template-columns: minmax(720px, 1fr) 520px; gap: clamp(24px, 6vw, 60px); align-items:start; justify-content:center; }
/* Formulaire */
.page-contact .contactx-form{ flex: 1 1 650px; max-width:650px; display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:26px 18px; padding:18px; height:auto; }
.page-contact .cfx-col-12{ grid-column: span 12; }
.page-contact .cfx-col-6 { grid-column: span 6; }
.page-contact .cfx-col-4 { grid-column: span 4; }
.page-contact .cfx-field{ display:flex; flex-direction:column; }
.page-contact .contactx-form label{ font-size:12pt; font-weight:600; color:#3a54ad; margin:0 0 8px; }
.page-contact .cfx-req{ color:#c1352b; font-weight:700; }
.page-contact .contactx-form input,
.page-contact .contactx-form textarea{ font-size: 12pt;border:1px solid #d6d9e3; background:#fff; border-radius:10px; height:18px; padding:10px 12px; color:#1f2937; outline:none; transition:border-color .15s ease, box-shadow .15s ease; }
.page-contact .contactx-form textarea{ height:auto; min-height:120px; resize:vertical; width: 100%; max-height:300px; max-width:100%; }
.page-contact .contactx-form input:focus,
.page-contact .contactx-form textarea:focus{ border-color:#3a54ad; box-shadow:0 0 0 3px rgba(58,84,173,.12); }
.page-contact .cfx-required-note{ grid-column:1 / -1; margin:4px 0 0; font-size:12pt; font-weight:600; color:#1b2340; }
.page-contact .cfx-submit{ height:44px; border:0; border-radius:10px; background:#3a54ad; color:#fff; font-size:1rem; font-weight:600; cursor:pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.page-contact .cfx-submit:hover{ background:#2f46a1; transform:translateY(-1px); box-shadow:0 8px 18px rgba(47,70,161,.22); }
/* Carte à droite */
.page-contact .map-wrap{ overflow:visible; }
#contact-map{ width:500px; min-height:650px; position:relative; max-width:100%; }
/* Liens mail/tel neutres */
.page-contact a[href^="mailto:"],
.page-contact a[href^="tel:"]{ color:inherit; text-decoration:none; border-bottom:none; }
.page-contact a[href^="mailto:"]:hover,
.page-contact a[href^="mailto:"]:focus,
.page-contact a[href^="tel:"]:hover,
.page-contact a[href^="tel:"]:focus{ text-decoration:underline; }
/* ===========================
PAGE "NOS MOYENS" — thème + layout global
=========================== */
.page-moyens{
--vm-blue:#3a54ad;
--vm-blue-acc:#55A0DC;
--vm-border:#e5e7eb;
--vm-text:#1f2937;
--vm-muted:#6b7280;
}
/* ===== Titres / Intro ===== */
.page-moyens .moyens-title, .page-moyens .section-title{ text-align:center; color:var(--vm-blue); font-weight:800; text-transform:uppercase; }
.page-moyens .moyens-title{ margin:32px 0 18px; font-size:20pt; }
.page-moyens .section-title{ margin:28px 0 16px; font-size:20pt; }
.page-moyens .moyens-intro .moyens-grid{ max-width:1200px; margin:0 auto 24px; padding:0 16px; display:grid; grid-template-columns:520px 1fr; gap:24px 36px; align-items:start; }
.page-moyens .moyens-media{ background:#f4f6fb; border:1px solid var(--vm-border); border-radius:10px; overflow:hidden; }
.page-moyens .moyens-media img{ display:block; width:100%; height:210px; object-fit:cover; }
.page-moyens .moyens-content{ padding:16px 20px 18px; }
.page-moyens .moyens-content h2{ margin:0 0 10px; color:var(--vm-blue-acc); font-size:18pt; text-transform:uppercase; padding-left:12px; border-left:4px solid var(--vm-blue-acc); }
.page-moyens .moyens-content p{ margin:0; color:var(--vm-text); line-height:1.6;
}
/* ===== Tabs sites ===== */
.page-moyens .atelier-tabs{ display:flex; justify-content:center; gap:14px; margin:12px 0 18px; }
.page-moyens .atelier-tabs .tab{ border:1px solid var(--vm-blue); background:#fff; color:var(--vm-blue); padding:12px 28px; border-radius:8px; font-weight:700; cursor:pointer; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.page-moyens .atelier-tabs .tab:hover{ box-shadow:0 4px 14px rgba(58,84,173,.18); }
.page-moyens .atelier-tabs .tab.is-active{ background:var(--vm-blue); color:#fff; }
/* ===== Grille "Téléchargements" + Panneaux ===== */
.page-moyens .atelier-shell{ max-width: min(1200px, 88vw); margin: 0 auto; padding: 0 16px 14px; display: grid; grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); align-items: center; }
/* --- Zone Téléchargements --- */
.page-moyens .atelier-downloads{ top:90px; align-self:start; background:#fff; border-radius:8px; padding:16px 16px 36px; box-shadow:0 2px 6px rgba(0,0,0,.25); }
.page-moyens .atelier-downloads h3{ margin:0 0 18px; font-size:16pt; text-transform:uppercase; text-align: center; }
.page-moyens .downloads-list{ margin:0; padding:0; list-style:none; }
.page-moyens .downloads-list li + li{ margin-top:12px; }
.page-moyens .downloads-list a{ color:var(--vm-blue); text-decoration:none; }
.page-moyens .downloads-list a:hover{ text-decoration:underline; }
/* ===== Panneaux ===== */
.page-moyens .atelier-panels{ width:100%; height: 100%; margin-left: 10px; }
.page-moyens .atelier-panel{ display:none; }
.page-moyens .atelier-panel.is-active{ display:block; }
.page-moyens .atelier-carousel{ position:relative; overflow:hidden; padding-bottom: 42px; border-radius: 8px; background: #fff; }
/* Piste & slides */
.page-moyens .atelier-carousel .carousel-track{ display:flex; will-change:transform; transition: transform .5s ease; }
.page-moyens .atelier-carousel .carousel-slide{ flex:0 0 100%; min-height:320px; padding:6px 8px 24px; background:transparent; }
.page-moyens .atelier-panel .atelier-view,
.page-moyens .atelier-panel .atelier-carousel{ height: 100%; display: flex; flex-direction: column; }
.page-moyens .carousel-controls { position: absolute; right: 5%; bottom: 15%; display: flex; justify-content: flex-end; align-items: center; gap: 12px; z-index: 10; }
.page-moyens .atelier-carousel { position: relative; padding-bottom: 50px; }
.page-moyens .carousel-prev, .page-moyens .carousel-next { position: static; transform: none; width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--vm-blue); background: #fff; color: var(--vm-blue); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.15); transition: all .2s ease; font-size: 20pt; }
.page-moyens .carousel-prev:hover, .page-moyens .carousel-next:hover { background: var(--vm-blue); color: #fff; }
.carousel-dots { position: absolute; left: 50%; bottom: 110px; transform: translateX(-50%); margin: 0; display: flex; justify-content: center; gap: 8px;}
.page-moyens .atelier-carousel .carousel-prev:hover,.page-moyens .atelier-carousel .carousel-next:hover{ background:var(--vm-blue); color:#fff; }
.page-moyens .atelier-carousel .carousel-prev:disabled,
.page-moyens .atelier-carousel .carousel-next:disabled,
.page-moyens .atelier-carousel .carousel-prev.is-disabled,
.page-moyens .atelier-carousel .carousel-next.is-disabled,
.page-moyens .atelier-carousel .carousel-prev[aria-disabled="true"],
.page-moyens .atelier-carousel .carousel-next[aria-disabled="true"]{ opacity:.5; cursor:default; pointer-events:none; }
.dot {margin: 0; width:10px; height:10px; border-radius:50px; border: none; position:relative; cursor:pointer; transition: transform .15s ease, opacity .15s ease, background-color .15s ease, border-color .15s ease;}
.dot::after{ content:""; position:absolute;   }
.dot:hover{ background: var(--vm-blue); opacity:.95;}
.dot.is-active{ background: var(--vm-blue); opacity:1; transform: scale(1.08); width:11px; height:11px;}
.dot[aria-selected="true"]{ background: var(--vm-blue); opacity:1;}
.dot[aria-disabled="true"]{ opacity:.35; pointer-events:none; }
.dot:focus-visible{ outline:3px solid rgba(58,84,173,.35); outline-offset:2px; }
/* ===========================
Cards des machines
=========================== */
.page-moyens .machine-card { height: 65%; display: grid; grid-template-columns: 40% 55%; gap: 20px 26px; align-items: start; width: 80%; padding: 16px 20px; border-radius: 8px; box-shadow:0 2px 6px rgba(0,0,0,.25); margin: 0 auto; }
.page-moyens .machine-card .mc-title{ margin:0; font-size:14pt; font-weight:800; text-transform:uppercase; }
.page-moyens .machine-card .mc-subtitle{ margin:6px 0 4px; font-weight:800; }
.page-moyens .machine-card .mc-media{ display:flex; align-items:center; justify-content:center; padding:0; border:none; border-radius:0; background:transparent; min-height:210px; }
.page-moyens .machine-card .mc-media img{ width:90%; object-fit:cover; border-radius:6px; max-height:210px; min-height: 180px; }
.page-moyens .machine-card .mc-body{ display:grid; gap:8px; align-content:start; }
.page-moyens .machine-card .mc-desc{ margin:0; color:var(--vm-text); line-height:1.6; }
.page-moyens .machine-card .mc-list{ margin:0; padding-left:18px; color:var(--vm-text); }
/*==================================
Partie Bureau d'étude
==================================*/
.page-moyens .moyens-bureau{ margin:36px 0 48px;}
.page-moyens .bureau-grid{ max-width:1200px; margin:0 auto; padding:0 16px; display:grid; grid-template-columns:1fr 520px; gap:28px 36px; align-items:center; }
.page-moyens .bureau-content h2{ margin:0 0 12px; color:var(--vm-blue-acc); font-size:18pt; font-weight:800; text-transform:uppercase; padding-left:12px; border-left:4px solid var(--vm-blue-acc); }
.page-moyens .bureau-content p{ margin:0; color:var(--vm-text); line-height:1.65; }
.page-moyens .bureau-media{ border:1px solid var(--vm-border); border-radius:10px; background:#f4f6fb; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.page-moyens .bureau-media img{ display:block; width:100%; height:280px; object-fit:cover; }
/* ===========================
MENTIONS LEGALES
=========================== */
.mentions-legales { max-width: 1700px; background: #fff; margin: 0 6%; padding-bottom: 80px;}
.mentions-container h1 { text-align: center; font-size: 18pt; font-weight: bold; color: #3a54ad; text-transform: uppercase; margin-bottom: 40px; }
.mentions-container h2 { font-size: 16pt; font-weight: bold; text-transform: uppercase; color: #55a0dc; margin-top: 30px; margin-bottom: 10px; }
.mentions-container h3 { font-size: 17pt; font-weight: 500; color: #6f6b6b; margin-top: 30px; margin-bottom: 10px; }
.mentions-container p { margin: 0 0 15px; font-weight: 400; }
.mentions-container p:has(.copy-fone-btn) {margin-top: -10pt; margin-bottom: -15pt; height: 12pt;}
.mentions-container a { color: #1f2937; text-decoration: none; }
.mentions-container a:hover { text-decoration: underline; }
/* ===========================
HEADER / NAV — variantes fluides
=========================== */
.logo img{ height: clamp(34px, 6vw, 50px); transition: height .25s ease; }
.nav-links{ gap: clamp(50px, 6vw, 120px); }
.nav-links li a{ font-size: clamp(10pt, 12pt, 14pt); transition: font-size .25s ease; }
.site-header.compact .logo img{ height: clamp(30px, 5vw, 34px); }
.hamburger.hamburger--svg{ display:none; }
/* ===========================
======== RESPONSIVE =======
=========================== */
@media (max-width: 1750px){
.realisations-wrapper{ position: relative; }
.realisations-section .realisations-wrapper{ flex-direction: column; align-items: center; gap: 18px; }
.realisations-intro{ flex: 0 0 auto; max-width: 900px; margin: 0; text-align: center; }
.realisations-section .realisations-intro p{ max-width: 900px; margin: 0 auto; text-align: center; padding-bottom: 30pt; }
.realisations-wrapper{ flex-direction: column; align-items: center; gap: 18px; }
.realisations-intro{ flex: 0 0 auto; max-width: 900px; margin: 0; text-align: center; }
.realisations-intro h2{ text-align: center; min-width: 0}
.realisations-intro p{ width: auto; max-width: 900px; margin: 0 auto; }
.realisations-section{ --controls-gap: 12px; }
.realisations-section .carousel-container{ padding-bottom: calc(50px + var(--controls-gap)); overflow: hidden; }
.carousel-container{ position: relative; overflow: hidden; margin-left: 0; max-width: 1200px; padding-bottom: 72px; }
.carousel{ overflow: hidden; padding-bottom: 20px; }
.nav-controls{ position: absolute; left: 0; right: 50pt; bottom: var(--controls-gap); display: flex; justify-content: flex-end; gap: 12px; z-index: 2; margin-top: 0; }
}
@media (max-width: 1450px) {
.navbar{ padding:12px 6%; }
.logo img{ height:48px; }
.nav-links li a{ font-size:14px; }
.site-header.compact .navbar{ padding:6px 6%; }
.site-header.compact .logo img{ height:32px; }
}
@media (max-width: 1420px) { .cards-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width: 1305px){
.sc-realisations-wrapper{ display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sc-nav-layer{ position: static; inset: auto; z-index: auto; pointer-events: auto; display: flex; justify-content: center; align-items: center; gap: 12px; width: min(1120px, 92vw); margin: 14px auto 40px; }
.sc-nav-layer .sc-btn{ position: static; top: auto; left: auto; right: auto; bottom: auto; transform: none; width: 48px; height: 48px; font-size: 2rem; }
.sc-nav-layer .sc-btn--prev, .sc-nav-layer .sc-btn--next{ left: auto; right: auto; }
}
@media (max-width: 1200px) {
.apply-grid { display: flex; flex-direction: column; gap: 24px; }
.apply-sub {  font-size: 16pt; }
}
/* <= 1250px */
@media (max-width: 1320px){
.carousel-container{ margin-left:0 ;  max-width:100%; overflow:hidden; }
.navbar{ padding:10px 6%; }
.logo img{ height:42px; }
.nav-links li a{ font-size:13px; }
.site-header.compact .navbar{ padding:4px 6%; }
.site-header.compact .logo img{ height:28px; }
.realisations-wrapper{ flex-direction: column; gap: 18px; align-items: center; }
.carousel-container{ margin-left: 0; max-width: 90%; overflow: hidden; }
.carousel{ overflow: hidden; }
}
@media (max-width: 1250px){
#jobs-detail{ border-left:0; box-shadow:0 2px 6px rgba(0,0,0,.08); }
.job-accordion{ width:100%; max-width:100%; min-width:0; padding: 15pt; background: #f1f6ff; }
.job-accordion .detail-logo{ max-width:150px; max-height:50px; }
.detail-head{ display:grid; grid-template-columns: 1fr auto; align-items: start; gap: 8px 14px; }
.detail-title{ display:flex; align-items:center; gap: 8px; margin: 0 0 15px 0; }
.detail-right{ display:flex; align-items:flex-start; }
.detail-logo, .detail-right .detail-logo, .detail-head .detail-logo{ width: 120px; max-height: 44px; height:auto; object-fit: contain; margin-right: 15px }
.job-line{ display:flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; }
.job-tag{ display:inline-flex; align-items:center; padding: 2px 6px;  margin: 0; }
.job-line .icon{ width: 14px; height: 14px; margin-right: 4px; }
.job-card{ padding: 12px 14px; gap: 6px; }
.job-card .job-title { margin: 0 }
.job-date-under{ margin-top: -6px; margin-left: 0px; }
.detail-map iframe, .detail-section iframe, .detail-section img{ max-width:100%; height:auto; }
}
@media (max-width: 1200px) {
.footer-content {display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin: 0 6%;}
.footer-section { flex: 1 1 220px; order: 1; align-items: center; }
.footer-section.contact-section { order: 2; flex: 0 1 320px;}
.site-footer .footer-content{ justify-content: center; text-align: center; }
.site-footer .footer-section{ align-items: center; text-align: center; }
.site-footer .footer-section ul{ padding-left: 0; }
.footer-bottom a { font-size: 9pt; }
.footer-bottom p { font-size: 9pt }
}
@media (max-width: 1150px) {
.page-moyens .machine-card .mc-title { font-size: 13pt; }
.page-moyens .machine-card .mc-desc { font-size: 9.5pt; }
.page-moyens .machine-card .mc-subtitle { font-size: 9.5pt; }
.page-moyens .machine-card .mc-list {font-size: 9.5pt;}
}
@media (max-width: 1100px){
.navbar{ padding:8px 6%; }
.logo img{ height:40px; }
.nav-links li a{ font-size:10pt; }
.site-header.compact .navbar{ padding:6px 6%; }
.site-header.compact .logo img{ height:28px; }
.pm .pm-meta > *{ display: block; margin: 0; min-width: 0; }
.cards-grid{ grid-template-columns:repeat(2,1fr); }
}
/* <= 1024px (contact + moyens) */
@media (max-width: 1024px){
.secteur.expanded .secteur-toggler{ display: none; }
.contact-grid{ grid-template-columns:1fr; gap:32px; padding-left:20px; }
.contact-intro{ align-items: center; justify-content: center; text-align: center;   }
.page-moyens .moyens-intro .moyens-grid{ grid-template-columns:1fr; }
.page-moyens .atelier-shell{ grid-template-columns: 100%; justify-items: center; row-gap: 24px; }
.page-moyens .atelier-downloads{  grid-row: 1; width: 100%; max-width: 400px; text-align: center; }
.page-moyens .atelier-panels{ grid-row: 2; width: 100%; }
.page-moyens .bureau-grid{ grid-template-columns:1fr;}
.page-moyens h1, .page-moyens h2, .page-moyens h3, .page-moyens p{  text-align: center; }
.page-moyens .moyens-content h2, .page-moyens .bureau-content h2{ border-left: none; padding-left: 0; }
.page-moyens .atelier-downloads {max-width: 380px; }
.contact-form { grid-template-columns: repeat(6, 1fr); gap: 20px; }
.col-12 { grid-column: 1 / -1; }
.col-6  { grid-column: span 3; }
.col-4  { grid-column: span 3; }
.contact-form .form-field.col-4:nth-of-type(3){ grid-column: 1 / -1; }
.secteurs-list{ flex-direction:column; align-items:stretch; }
.secteur{ position: relative; height: auto; min-height: 160px; overflow: hidden; contain: layout paint; isolation: isolate; }
.secteur::before{ content: ""; position: absolute; inset: 0; background-image: var(--bg-image); background-size: cover; background-position: center; filter: brightness(.65); z-index: 1; pointer-events: none }
.secteur-headline{ top:20px; left:16px; font-size:12pt; color:#fff ; text-shadow:2px 2px 5px black; z-index: 6; }
.secteur-toggler{ top:16px; right:16px; font-size:1.8rem; color:#fff; z-index: 6; }
:root{ --secteur-band-h: clamp(180px, 28vw, 240px); --secteur-vpad: clamp(16px, 6vh, 48px); }
.secteur.expanded::before{ opacity: 1 !important; }
.secteur-panel{ position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; padding-block: 0; max-height: 0; opacity: 0; pointer-events: none; overflow: hidden; }
.secteur.expanded .secteur-panel{ padding-block: var(--secteur-vpad); max-height: 1200px; opacity: 1; pointer-events: auto; }
.secteurs-list:has(.secteur.expanded) .secteur:not(.expanded){ min-height: 60px;}
.secteur-panel-content{ position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: min(92%, 980px); margin: 0 auto; border-radius: 8px; overflow-y: auto; }
.secteur-panel-content h3{ margin: 0 0 8px; font-size: 17pt; color: #3a54ad;}
.secteur-panel-content p{ margin: 0 0 14px; font-size: 1rem; color: #1f2937; }
.secteur-panel-content .btn-primary{ position: absolute; right: clamp(12px, 2vw, 22px); bottom: clamp(12px, 2vw, 22px); z-index: 2; }
.secteur, .secteur::before{ transition: none; }
.secteur:hover::before{ transform: none; }
.secteur.hovered, .secteur.hover-sibling{ flex: 1; }
.secteur.compressed::before{ opacity: 1; visibility: visible; }
.secteur.compressed .secteur-headline{ display: block; }
.secteurs-list::before,
.secteurs-list.expanded-background::before{ content: none; }
html body div.content-wrap main.main-content section.secteurs-section ul.secteurs-list li.secteur { margin-bottom: 1px; right: 0.5%;}
.secteur.expanded::before { filter: brightness(0.9); }
}
@media (max-width: 1000px) {
.page-contact .contact-grid { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 4vw, 28px); justify-items: stretch; }
.page-contact .contactx-form { grid-column: 1 / -1; width: 90%; max-width: none; margin: 0 auto; }
.page-contact .cfx-field { width: 100%; }
.page-contact [class*="cfx-col-"] { grid-column: 1 / -1; width: 100%; }
.page-contact .map-wrap { grid-column: 1 / -1; width: 100%; max-width: none; }
#contact-map { min-height: 520px; width: 90%; margin: 0 auto; }
.nav-links li a.active { color: #0073e6; border-bottom: none; }
.copy-feedback.visible {font-size: 9.5pt;}
}
@media (max-width: 1300px) and (min-width: 1000px){
.page-contact .contact-grid{ max-width: clamp(80%, 88vw, 95%); grid-template-columns:  minmax(clamp(420px, 50vw, 650px), 1fr) clamp(360px, 35vw, 520px); gap: clamp(20px, 4vw, 60px); align-items: start; }
.page-contact .contactx-form{ width: 100%; max-width: clamp(420px, 48vw, 650px); }
#contact-map{ width: clamp(360px, 35vw, 520px); min-height: clamp(480px, 50vw, 650px); }
}
@media (max-width: 992px){
.about-valmeca__grid{ grid-template-columns:1fr; gap:24px; }
.about-valmeca__media{ justify-content:center; }
.about-valmeca__media img{ max-width:420px; }
}
@media (max-width: 980px){
.vm-bigtext{ font-size:12pt; }
.ateliers{ grid-template-columns:1fr; gap: 60px }
.hero-about{ height:320px; align-items:center; justify-content:center; }
.hero-about__title{ font-size:20pt; }
.metric-list{ grid-template-columns: repeat(2, 1fr); }
#contact-map{ min-height:350px; }
}
@media (max-width: 1250px){
body{ padding-top: 72px; }
.navbar{ position:relative; display:flex; align-items:center; justify-content:space-between; padding:10px 6%; }
.logo img{ height:38px; }
.hamburger.hamburger--svg{ display:inline-flex; --btn-size:32px; align-items:center; justify-content:center; width:var(--btn-size); height:var(--btn-size); border:1px solid #fff; border-radius:10px; background:#fff; cursor:pointer; color:#1a1a1a; }
.hamburger.hamburger--svg svg{ width:24px; height:24px; }
.hamburger.hamburger--svg .icon-close{ display:none; }
.hamburger.hamburger--svg.is-open .icon-burger{ display:none; }
.hamburger.hamburger--svg.is-open .icon-close{ display:block; }
.nav-links{  position:absolute; top:100%; left:0; right:0; background:#fff; border-top:1px solid #e5e7eb; margin:0; padding:10px 12px; list-style:none; align-items:center; display:flex; flex-direction:column; gap:6px; max-height:0; overflow:hidden; opacity:0; visibility:hidden; pointer-events:none; transform: translateY(-4px); transition: max-height .25s ease, opacity .2s ease, transform .2s ease, visibility 0s linear .2s; z-index:1000; border-radius:0; box-shadow:none; }
body.nav-open .nav-links{ max-height:60vh; opacity:1; visibility:visible; pointer-events:auto; transform:none; transition: max-height .25s ease, opacity .2s ease, transform .2s ease, visibility 0s; }
.nav-links li{ width:100%; display:flex; justify-content:center; }
.nav-links li a{ display:inline-block; text-align:center; width:auto; padding:8px 6px; font-size:16px; }
.site-header.compact .navbar{ padding:8px 6%; }
.site-header.compact .logo img{ height:34px; }
.site-header.compact .nav-links li a{ font-size:15px; }
}
@media (max-width: 900px){ .phone-row > img { font-size: 12px; } .fax-amneville {font-size: 10px !important; }}
@media (max-width: 850px){
.page-contact .sites-cards{ display: grid; grid-template-columns: 1fr; gap: 36px; justify-items: stretch; justify-items: center;}
.page-contact .site-card{
width: min(70vw, 360px);
max-width: 360px;
}
}
@media (max-width: 768px){
.contact-section .button-container{ padding:0 20px; }
.contact-section .elegant-button{ margin:0 20px; padding:16px 32px; font-size:11pt; min-width:180px; }
.contact-grid { grid-template-columns: 1fr; padding: 0; gap: 40px; }
.contact-form { grid-template-columns: 1fr; max-width: 100%; gap: 16px; }
.contact-form textarea { min-height: 120px; }
.contact-intro { text-align: center; padding: 0 10px; }
.contact-form input, .contact-form textarea{ width: 100%; min-width: 0; box-sizing: border-box; }
.contact-form .col-6, .contact-form .col-4{ grid-column: 1 / -1 !important; }
}
@media (max-width: 720px){
.jobs-hero h1{ font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.6rem); }
.jobs-hero p{  font-size: clamp(.95rem, .88rem + .3vw, 1.1rem); }
.jobs-controls{ gap: clamp(8px, 1.2vw, 16px); }
.jobs-search{ justify-content: center; padding-bottom: clamp(8px, 1.5vw, 16px); }
.jobs-search input{ width: min(100%, 680px); font-size: clamp(14px, 13px + .3vw, 16px); padding: 10px 14px; }
.jobs-filters{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px;}
.jobs-filters .select-wrapper,.jobs-filters .select-wrapper select{ min-width: 0; width: 100%;}
.jobs-filters .select-wrapper select{ height: 44px; font-size: clamp(14px, 13px + .3vw, 16px);}
.jobs-layout{ grid-template-columns: 1fr; gap: clamp(18px, 2.5vw, 28px);}
.job-card{  padding: clamp(10px, 1.2vw, 16px);}
.cards-grid{ grid-template-columns:1fr; }
.product-card{  margin-left: auto; margin-right: auto; }
}
@media (max-width: 700px) {
.page-moyens .machine-card{ grid-template-columns: 100%; justify-items: center; height: 95%; }
.page-moyens .machine-card .mc-media{ justify-content: center; }
.page-moyens .machine-card .mc-media img{  width: 100%;  max-width: 260px; }
.page-moyens .machine-card .mc-body{ width: 100%; max-width: 520px; }
.page-moyens .atelier-downloads {max-width: 350px; }
.page-moyens .atelier-carousel .carousel-slide { padding-bottom: 108px; }
}
@media (max-width: 680px) {
#apply-form { margin-bottom: 250px; }
.hint { margin-bottom: 50px; font-size: 10pt; }
}
@media (max-width: 640px){
.contact-form{ grid-template-columns:1fr; }
.col-12, .col-6, .col-4{ grid-column: span 1; }
.contact-grid{  padding-left: 0; }
.contact-section .button-container{ max-width: none; margin: 20px auto; padding: 0; display: flex; justify-content: center; align-items: center; gap: 8px; }
.hero-about__content { margin: 0 0 -10px; }
.apply-head{ grid-template-columns:1fr; grid-template-rows:auto auto auto; }
.apply-head .apply-sub { font-size: 14pt; margin-top: 45px; }
.hero-about__cta{ flex-direction: column;  align-items: center; width: min(520px, 92vw); margin: 0 auto; gap: 12px; }
.jobs-layout.with-detail{ grid-template-columns: 1fr; }
.detail-meta-grid { display: flex; flex-direction: column;}
.pm .pm-nav { top: 65%; width: 20px; }
.pm .pm-nav.next { padding-right: 2px; }
.pm .pm-nav.prev { padding-left: 2px; }
.pm .pm-meta{ display: flex; flex-direction: column; align-items: stretch; gap: 8px; text-align: center; }
.pm .pm-close{ top: 8px; right: 8px; height: 20px; width: 20px; font-size: 10pt; }
}
@media (max-width: 600px){
.form-compact{ grid-template-columns:1fr; }
.form-compact .field, .form-compact .field--full{ grid-column:1 / -1; width:100%; }
.hamburger.hamburger--svg{ --btn-size:28px; }
.hamburger.hamburger--svg svg{ width:22px; height:22px; }
#jobs-detail .detail-meta-grid{ display: flex; flex-direction: column;  gap: 8px; }
#jobs-detail .meta-item .icon{  width:16px; height:16px; margin-right:6px; }
.page-moyens .carousel-controls{ position: absolute; left: 50%; right: auto; bottom: 24px; transform: translateX(-50%); justify-content: center; }
}
@media (max-width: 520px){
.content-wrap { flex: 1; margin:0;}
.about-valmeca__media img { height: auto; }
}
@media (max-width: 500px) {
.page-moyens .machine-card{ grid-template-columns: 100%; justify-items: center; text-align: center; height: 95%; }
.page-moyens .machine-card .mc-media{ justify-content: center; }
.page-moyens .machine-card .mc-media img{text-align: center; max-width: 260px; height: 100%; }
.page-moyens .machine-card .mc-body{ width: 100%; max-width: 520px; }
.page-moyens .atelier-carousel{ padding-bottom: 90px;}
.page-moyens .atelier-carousel .carousel-slide {padding-bottom: 42px;}
.page-moyens .carousel-dots{ bottom: 68pt; }
.page-moyens .machine-card .mc-list { text-align: left; }
.page-moyens .atelier-downloads {max-width: 280px; }
}
@media (max-width: 480px){
.iso-logo{ height: clamp(70px, 16vw, 100px) !important; }
.logo img{ height:34px; }
.contact-section .elegant-button{ margin:0; width:100%; max-width:280px; }
.contact-section .elegant-button{ width: auto !important; margin: 0 auto; }
.contact-form { padding: 0 10px;}
.contact-form label { font-size: 0.95rem; }
.contact-form input, .contact-form textarea { font-size: 15px; padding: 10px 12px; }
.btn-submit { font-size: 1rem; padding: 12px;}
#jobs-list{  display:block;  grid-template-columns: 1fr;  overflow:visible;}
.job-card{ box-sizing:border-box; width:96% ; max-width:100% ; min-width:0 ; flex: 1 1 100%; grid-column:auto ;  margin:0 0 12px ; padding:10px 12px ; transform:none ; }
.job-accordion{ width:96%; max-width:100%; min-width:0; margin: 0 0 12px -15px; overflow:visible; background: #f1f6ff; }
.meta-item {font-size: 9.5pt; padding: 0;}
.detail-title {font-size: 16pt;}
.detail-logo, .detail-right .detail-logo, .detail-head .detail-logo { width: 70%; height: auto; }
.detail-close { font-size: 14pt;}
.detail-right {margin-left: 10%; margin-top: 4%;}
.detail-meta-grid{ display:flex; flex-wrap:wrap; gap:6px 8px; min-width:0; width: 130%; }
.job-title, .job-location, .job-contrat, .job-tag{ overflow-wrap:anywhere; word-break:break-word; min-width:0; }
.detail-logo{ max-width:120px; height:auto; }
.detail-map iframe{ width:100%; height:220px; }
}
@media (max-width: 450px){
.vm-nav{ --dot: 18px; --bw: 3px; --pad: 26px; --line: 3px; --gap: 12px; grid-template-columns: repeat(4, 1fr); row-gap: 42px; padding-top: calc(var(--pad) + (var(--dot) + 2*var(--bw)) + 6px); overflow: visible; }
.vm-nav::before{ content:""; position:absolute; left:0; right:0; height: var(--line); top: calc(var(--pad) + (var(--dot) + 2*var(--bw))/2 + 12px); /* +6 → +12 */ background: linear-gradient(90deg,#3a54ad,#6366f1); z-index:1; }
.vm-nav::after{ content:""; position:absolute; left:0; right:0; height: var(--line); top: calc(var(--pad) + (var(--dot) + 2*var(--bw))/2 + 92px); /* +86 → +92 */ background: linear-gradient(90deg,#3a54ad,#6366f1); z-index:1; }
.vm-nav-item{ align-items:center; }
.vm-dotbtn{ transform: translateY(calc(-1 * (var(--outer) / 2))); }
.vm-year{ margin-top: 0; transform: translateY(-6px); font-size: .8rem; font-weight: 700; color: #3a54ad; }
.copy-feedback.visible {font-size: 8pt;}
.phone-row > img {height: 11px;}
.fax-amneville {height: 9px !important;}
}
@media (max-width: 500px){
.carousel{ display: flex; align-items: flex-start; transition: transform .5s ease; will-change: transform; padding: 0 24px 20px;}
.realisations-section .realisations-wrapper{ display: flex;  flex-direction: column; align-items: center; overflow: hidden; }
.realisations-section .realisations-intro{ display: contents; }
.realisations-section .realisations-intro h2,
.realisations-section .realisations-intro p{text-align: center; }
.realisations-section .carousel-container{ position: relative; overflow: hidden; flex: 1; margin: 0 auto; max-width: 1000px; order: 1;}
.realisations-section .nav-controls{ order: 3; position: static; left: auto; right: auto; bottom: auto; display: flex; justify-content: center; align-items: center; gap: 12px; width: 100%;  margin: -30pt 0 32px; }
.realisations-section .nav-controls .nav-button{ position: static; transform: none; width: 46px; height: 46px; font-size: 1.8rem; }
.realisations-section .slide { flex: 0 0 92vw; max-width: 92vw; margin: 0 6%;  }
.realisations-wrapper {padding: 0 4%;}
.filters-pills { display: flex; flex-direction: column; align-items: center; }
.filters-pills .select-wrapper { width: 78%; }
.filters-pills .btn { width: 78%; }
.multi-select { width: 78%; }
#secteur-multi .multi-select-display { margin-right: 4px; }
.hero-about__cta .btn{ min-width: 0; font-size: 10pt; }
#apply-form { margin-bottom: 350px; }
.back-link.btn { text-align: right; width: 100%; font-size: 8pt; padding: 2px 4px }
#secteur-multi .multi-select-display { padding-right: 239px; }
}
@media (max-width: 350px) {
.pm .pm-nav { top: 70%; }
.page-moyens .atelier-downloads {max-width: 200px; }
}