@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--navy:#0b1d35;--blue:#123e68;--blue2:#1767a5;--yellow:#f4c542;--ink:#17283b;--muted:#64748b;--paper:#f5f8fb;--line:#e1e8f0;--white:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;font-family:'DM Sans',Arial,sans-serif;color:var(--ink);line-height:1.65;background:#fff}h1,h2,h3{font-family:Manrope,'DM Sans',sans-serif;line-height:1.16;letter-spacing:-.035em;margin:0 0 18px}h1{font-size:clamp(2.6rem,5.4vw,5rem);font-weight:800}h2{font-size:clamp(2rem,3.4vw,3.25rem);font-weight:800}h3{font-size:1.25rem}p{margin:0 0 16px;color:var(--muted)}a{color:inherit;text-decoration:none}.header{height:86px;padding:0 max(5vw,24px);display:flex;align-items:center;justify-content:space-between;gap:28px;background:#fff;position:sticky;top:0;z-index:20;border-bottom:1px solid rgba(11,29,53,.08)}.logo-image img{display:block;width:150px;height:58px;object-fit:contain}.header nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,32px)}.header nav a{font-size:.92rem;font-weight:700;color:#35475b;transition:color .2s}.header nav a:hover{color:var(--blue2)}.menu{display:none;background:none;border:0;font-size:1.8rem;color:var(--navy)}.hero{min-height:590px;padding:76px max(5vw,28px);display:grid;grid-template-columns:1fr .82fr;gap:3vw;align-items:center;background:radial-gradient(ellipse at 82% 45%,#254b68 0,transparent 38%),linear-gradient(110deg,#06182a 0%,#0b2945 52%,#183b59 100%);color:white;overflow:hidden;position:relative}.hero:after{content:"";position:absolute;right:-100px;top:170px;width:420px;height:420px;border:1px solid #ffffff18;border-radius:50%;pointer-events:none}.hero-content{max-width:760px;position:relative;z-index:1}.eyebrow,.section-label{font-size:.76rem;letter-spacing:.16em;font-weight:800;text-transform:uppercase}.eyebrow{color:var(--yellow);margin-bottom:24px}.hero h1{color:#fff}.hero h1 strong{color:var(--yellow)}.lead{font-size:1.15rem;line-height:1.8;color:#d4dfeb;max-width:650px;margin:24px 0 32px}.hero-card{position:relative;z-index:1;background:linear-gradient(135deg,#193b58,#0a2035);border:1px solid #ffffff1f;border-radius:20px;padding:28px 22px;text-align:center;box-shadow:0 28px 70px #0003;color:white;max-width:330px;width:100%;justify-self:center}.hero-logo{width:100%;max-width:230px;height:130px;object-fit:contain;margin-bottom:12px}.hero-card h2{font-size:1.7rem;margin-bottom:5px}.hero-card p{margin-bottom:8px;color:#c9d8e6}.hero-card span{display:inline-block;color:var(--yellow);font-size:.86rem;font-weight:700}.actions{display:flex;gap:12px;flex-wrap:wrap}.btn{display:inline-flex;justify-content:center;align-items:center;min-height:50px;padding:13px 22px;border-radius:8px;font-size:.92rem;font-weight:800;border:1px solid transparent;cursor:pointer;transition:transform .2s,background .2s,box-shadow .2s}.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #07182a18}.primary{background:var(--yellow);color:#14263b}.primary:hover{background:#ffda63}.secondary{border-color:#ffffff70;color:white;background:#ffffff0c}.section{padding:100px max(8vw,28px)}.section-label{color:var(--blue2);margin-bottom:24px}.two-col{display:grid;grid-template-columns:.9fr 1.1fr;gap:9vw}.two-col h2{max-width:500px}.two-col p{font-size:1.04rem;line-height:1.9}.points{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.points div{background:var(--paper);padding:12px 15px;border-radius:7px;font-weight:700;font-size:.9rem}.points b{color:#17845b;margin-right:6px}.dark{background:var(--navy);color:white}.dark .section-label{color:var(--yellow)}.dark h2{max-width:740px;margin-bottom:38px}.dark h2 span,.suppliers h2 span{color:var(--blue2)}.dark h2 span{color:var(--yellow)}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.cards article{padding:28px 24px;background:#ffffff08;border:1px solid #ffffff1b;border-radius:13px;min-height:230px;transition:transform .2s,border .2s}.cards article:hover{transform:translateY(-4px);border-color:#f4c54280}.cards h3{color:white;margin:22px 0 12px}.cards p{color:#b9c9d9;font-size:.94rem}.icon{width:46px;height:46px;border-radius:12px;background:#f4c5421c;color:var(--yellow);display:grid;place-items:center;font-size:1.5rem}.suppliers{background:linear-gradient(120deg,#081b30,#123858);color:white}.suppliers .section-label{color:var(--yellow)}.suppliers-heading p{color:#c6d5e3}.suppliers h2 span{color:var(--yellow)}.supplier-card{box-shadow:0 8px 24px #0002}.supplier-note{color:#aabccc}.suppliers-heading{display:grid;grid-template-columns:1fr .8fr;gap:6vw;align-items:end;margin-bottom:36px}.suppliers-heading p{max-width:490px;line-height:1.85}.supplier-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.supplier-card{min-height:132px;background:white;border:1px solid var(--line);border-radius:12px;padding:23px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;box-shadow:0 4px 15px #102a4605;transition:transform .2s,border-color .2s}.supplier-card:hover{transform:translateY(-3px);border-color:#b7c8d9}.supplier-wordmark{font-family:Manrope,Arial,sans-serif;font-size:clamp(1.1rem,2vw,1.6rem);font-weight:800;line-height:1.05;color:var(--navy);letter-spacing:-.04em}.schneider .supplier-wordmark{color:#168448}.legrand .supplier-wordmark{color:#c9232d}.del .supplier-wordmark{font-size:1.1rem;color:#1767a5}.eurom .supplier-wordmark{font-size:1.2rem;color:#183d63}.sonepar .supplier-wordmark{color:#e45c21}.hager .supplier-wordmark{color:#e1a600}.abb .supplier-wordmark{color:#e3262e}.eaton .supplier-wordmark{color:#1555a0}.supplier-card small{font-size:.76rem;color:#758397;margin-top:12px}.supplier-note{font-size:.75rem;margin-top:20px}.contact{background:white}.contact-grid{display:grid;grid-template-columns:1fr .85fr;gap:8vw}.contact h2{max-width:520px}.contact-info{display:grid;gap:18px;margin-top:34px}.contact-info>div{display:flex;align-items:flex-start;gap:14px}.contact-info>div>span{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:#eaf2fa;font-size:1.2rem}.contact-info small{display:block;color:#8492a3;font-size:.7rem;letter-spacing:.1em;font-weight:800;margin-bottom:3px}.contact-info strong{font-size:.95rem;overflow-wrap:anywhere}.contact form{padding:30px;background:var(--paper);border:1px solid var(--line);border-radius:16px;display:grid;gap:15px}.contact label{display:grid;gap:7px;font-size:.85rem;font-weight:700;color:#34475b}.contact input,.contact textarea{width:100%;border:1px solid #d5dee8;border-radius:7px;background:#fff;padding:13px 14px;font:inherit;color:var(--ink);outline:none}.contact input:focus,.contact textarea:focus{border-color:var(--blue2);box-shadow:0 0 0 3px #1767a51a}.contact form .btn{width:100%}.form-message{font-size:.85rem;margin:0}.reviews-section{padding:85px max(8vw,28px);background:#f1f5f9}.reviews-head{display:flex;justify-content:space-between;gap:28px;align-items:center}.reviews-head p{max-width:580px}.google-rating{display:flex;gap:14px;align-items:center;background:white;border:1px solid var(--line);padding:18px 22px;border-radius:12px;min-width:250px}.rating-number{font-size:2rem;font-weight:800;color:var(--blue2)}.google-rating strong,.google-rating small{display:block}.google-rating small{font-size:.75rem;color:var(--muted);margin-top:3px}.stars{color:#e6a900;font-weight:800}.reviews-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.outline-dark{border-color:#c5d0dc;color:var(--navy);background:transparent}.qualification{padding:54px max(8vw,28px);background:#fff;border-top:1px solid var(--line)}.qualification-inner{display:flex;align-items:center;justify-content:space-between;gap:35px}.qualification h2{font-size:clamp(1.7rem,3vw,2.5rem)}.qualification p{max-width:700px}.qualifelec-badge img{width:170px;max-height:110px;object-fit:contain}footer{background:#071626;color:#aab9c9;padding:30px max(8vw,28px);display:flex;align-items:center;justify-content:space-between;gap:24px}footer .logo-image img{width:110px;height:48px;background:white;border-radius:6px}footer p{font-size:.8rem;margin:0;color:#aab9c9}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding-top:75px;padding-bottom:75px;gap:40px}.hero-card{justify-self:start;max-width:320px}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.two-col,.contact-grid,.suppliers-heading{grid-template-columns:1fr;gap:28px}.supplier-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.section{padding-top:75px;padding-bottom:75px}}
@media(max-width:650px){.header{height:72px;padding:0 20px}.logo-image img{width:125px;height:50px}.menu{display:block}.header nav{display:none;position:absolute;top:71px;left:0;right:0;background:white;padding:18px 22px 22px;box-shadow:0 15px 25px #0b1d3518;flex-direction:column;align-items:flex-start;gap:16px}.header nav.open{display:flex}.hero{padding:65px 24px;min-height:auto}.hero h1{font-size:2.65rem}.lead{font-size:1rem}.section,.reviews-section{padding:64px 22px}.cards{grid-template-columns:1fr}.cards article{min-height:0}.supplier-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.supplier-card{min-height:115px;padding:15px 10px}.supplier-card small{font-size:.68rem}.reviews-head{align-items:flex-start;flex-direction:column}.google-rating{width:100%}.qualification-inner,footer{align-items:flex-start;flex-direction:column}.qualification{padding:45px 22px}footer{padding:28px 22px}.contact form{padding:20px}.actions .btn{flex:1}.hero-card{padding:28px 20px}}

/* Mise en page inspiration maquette : introduction à gauche, cartes à droite */
#services .section-label{margin-bottom:16px}
#services h2{max-width:330px}
#services .cards{grid-template-columns:repeat(4,minmax(0,1fr))}
#services .cards article{background:#f5f8fb;border:1px solid #e4ebf2;color:#102b49;padding:22px 18px;border-radius:12px;box-shadow:0 5px 20px #081b3008}
#services .cards h3{color:#102b49;font-size:1rem;margin:16px 0 8px}
#services .cards p{color:#61748a;font-size:.84rem}
#services .icon{background:#e7eff7;color:#123e68}
#services.dark{background:#fff;color:#102b49}
#services.dark .section-label{color:#e0ad00}
#services.dark h2 span{color:#1767a5}
#services .cards article:hover{border-color:#b6c9dc}
@media(max-width:900px){#services .cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){#services .cards{grid-template-columns:1fr}.hero{grid-template-columns:1fr}.hero-card{display:none}}