/* ============================================================ FIXALU - Design system v5 Couleurs du logo : cyan #2fbef0 (FIX) + argent alu #b0b5b9 (ALU) Mode clair / sombre via [data-theme] sur ============================================================ */ :root{ --cyan:#2fbef0; --cyan2:#5fd2ff; --cyan-deep:#0e9fd8; --alu:#b0b5b9; --alu2:#8b9296; --orange:#f5a623; /* Theme clair */ --bg:#f4f8fa; --bg2:#ffffff; --bg3:#e8f1f5; --txt:#16242e; --txt2:#5b6b76; --line:#dfe9ee; --header:#0b1620; --header2:#102230; --glow:rgba(47,190,240,.25); --card-shadow:0 10px 30px rgba(11,22,32,.08); --radius:16px; } [data-theme="dark"]{ --bg:#0b1620; --bg2:#101f2b; --bg3:#0e1c27; --txt:#e8f1f6; --txt2:#93a6b2; --line:#1d3444; --header:#070f16; --header2:#0c1a24; --glow:rgba(47,190,240,.35); --card-shadow:0 12px 34px rgba(0,0,0,.45); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;color:var(--txt);background:var(--bg);line-height:1.65;transition:background .3s,color .3s} img{max-width:100%;height:auto} a{color:var(--cyan-deep);text-decoration:none} [data-theme="dark"] a{color:var(--cyan)} a:hover{text-decoration:underline} h1,h2,h3{line-height:1.22;color:var(--txt)} .container{max-width:1160px;margin:0 auto;padding:0 20px} .center{text-align:center} ::selection{background:var(--cyan);color:#fff} /* ---------- Header minimal (style Terminal Industries) ---------- */ .site-header{position:sticky;top:0;z-index:50;background:rgba(7,15,22,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(47,190,240,.14)} .header-inner{display:flex;align-items:center;gap:28px;max-width:1240px;margin:0 auto;padding:14px 24px} .logo img{height:36px;display:block} .logo-txt{font-size:24px;color:#fff;letter-spacing:2px} .main-nav{flex:1} .main-nav ul{list-style:none;margin:0;padding:0} .main-nav>ul{display:flex;flex-wrap:wrap;gap:2px} .main-nav>ul>li{position:relative} .main-nav>ul>li>a{display:block;padding:10px 13px;color:#c8d8e0;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1.6px;transition:color .15s} .main-nav a:hover{text-decoration:none;color:var(--cyan)} .main-nav li ul{display:none;position:absolute;left:0;top:100%;background:rgba(7,15,22,.97);min-width:290px;box-shadow:0 24px 50px rgba(0,0,0,.5);border-radius:0 0 14px 14px;padding:8px 0;z-index:60;border:1px solid rgba(47,190,240,.16);border-top:1px solid var(--cyan)} .main-nav li:hover>ul{display:block;animation:fadeDown .18s ease} .main-nav li ul a{display:block;padding:9px 18px;color:#c9dae2;font-size:13px;letter-spacing:0;text-transform:none} .main-nav li ul a:hover{background:rgba(47,190,240,.1);color:var(--cyan);text-decoration:none} .header-actions{display:flex;align-items:center;gap:14px} .header-phone{display:flex;align-items:center;gap:7px;color:#c8d8e0;font-size:13px;font-weight:600;letter-spacing:.5px} .header-phone:hover{color:var(--cyan);text-decoration:none} .theme-toggle{background:transparent;border:1px solid rgba(255,255,255,.2);color:#c8d8e0;width:38px;height:38px;border-radius:100px;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center;padding:0} .theme-toggle:hover{border-color:var(--cyan);color:var(--cyan);transform:rotate(90deg)} .theme-toggle .ico-night{display:none} [data-theme="dark"] .theme-toggle .ico-day{display:none} [data-theme="dark"] .theme-toggle .ico-night{display:block} .btn-header{padding:9px 20px;font-size:13px;letter-spacing:.5px;border-radius:100px} .burger{display:none;background:none;border:0;color:#fff;cursor:pointer;padding:4px} @keyframes fadeDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} /* ---------- Icones SVG ---------- */ .ico{vertical-align:-3px} .btn .ico,.link-more .ico{vertical-align:-3px;margin-right:2px} .card-ico{display:inline-flex;width:46px;height:46px;border-radius:12px;align-items:center;justify-content:center;background:rgba(47,190,240,.12);color:var(--cyan-deep);margin-bottom:10px} [data-theme="dark"] .card-ico{color:var(--cyan)} .check-list{list-style:none;padding:0} .check-list li{padding:4px 0;display:flex;gap:9px;align-items:center} .check-list .ico{color:var(--cyan);flex-shrink:0} .link-more{font-weight:700;display:inline-flex;align-items:center;gap:5px} .side-card .ico,.agence-body .ico{color:var(--cyan-deep);margin-right:5px;flex-shrink:0} [data-theme="dark"] .side-card .ico,[data-theme="dark"] .agence-body .ico{color:var(--cyan)} /* ---------- Hero + jante 3D ---------- */ .hero{position:relative;overflow:hidden;background:radial-gradient(1100px 500px at 75% 20%,rgba(47,190,240,.16),transparent 60%),linear-gradient(150deg,#0b1620 0%,#102538 70%,#0d3247 100%);color:#fff;padding:72px 0} .hero::after{content:"";position:absolute;inset:auto -10% -60% -10%;height:70%;background:radial-gradient(closest-side,rgba(47,190,240,.12),transparent);pointer-events:none} .hero h1{color:#fff;font-size:clamp(28px,4.1vw,46px);margin:.3em 0;letter-spacing:-.5px;white-space:nowrap} @media (max-width:900px){.hero h1{white-space:normal}} .hero h1 .grad{background:linear-gradient(90deg,var(--cyan),var(--cyan2),var(--alu));-webkit-background-clip:text;background-clip:text;color:transparent} .hero-sub{color:#9db4c0;font-size:17px} .hero-sub a{color:#fff} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;position:relative;z-index:2} .hero-price{font-size:18px;color:#9db4c0} .hero-price strong{color:var(--cyan);font-size:28px} .hero-small{background:linear-gradient(150deg,#0b1620,#102538);padding:40px 0} .badge{display:inline-block;background:rgba(47,190,240,.1);color:var(--cyan-deep);border:1px solid var(--cyan);border-radius:100px;padding:4px 15px;font-size:13px;font-weight:600} [data-theme="dark"] .badge{color:var(--cyan)} .badge-orange{background:rgba(245,166,35,.12);border-color:var(--orange);color:#c07c07} .hero .badge{background:rgba(47,190,240,.14);color:var(--cyan2);border-color:rgba(95,210,255,.5)} /* Scene : jante construite par des traits electriques */ .hero{background-image:linear-gradient(rgba(47,190,240,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(47,190,240,.05) 1px,transparent 1px),radial-gradient(1100px 500px at 75% 20%,rgba(47,190,240,.16),transparent 60%),linear-gradient(150deg,#0b1620 0%,#102538 70%,#0d3247 100%);background-size:44px 44px,44px 44px,auto,auto} .wheel-scene{position:relative;display:flex;justify-content:center;align-items:center;min-height:360px} .wheel-build{width:min(360px,74vw);height:auto;animation:floaty 7s ease-in-out infinite} .wheel-shadow{position:absolute;bottom:6px;width:250px;height:34px;background:radial-gradient(closest-side,rgba(0,0,0,.5),transparent);border-radius:50%;filter:blur(6px)} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} /* couche blueprint : traits cyan qui dessinent la jante */ .wheel-build .blueprint circle,.wheel-build .blueprint path{ fill:none;stroke:var(--cyan);stroke-width:1.4;stroke-linecap:round; stroke-dasharray:100;stroke-dashoffset:100; animation:draw 1.4s cubic-bezier(.4,0,.2,1) forwards;animation-delay:var(--d,0s); } @keyframes draw{to{stroke-dashoffset:0}} /* couche metal : la jante se materialise une fois dessinee */ .wheel-build .metal{opacity:0;animation:materialize 1.6s ease 3.4s forwards} @keyframes materialize{from{opacity:0;filter:brightness(2.4) saturate(0)}to{opacity:1;filter:none}} /* couche energie : impulsions lumineuses en continu */ .wheel-build .energy circle,.wheel-build .energy path{ fill:none;stroke:#9fe8ff;stroke-width:2.4;stroke-linecap:round; stroke-dasharray:7 93;stroke-dashoffset:0;opacity:0; animation:appear .8s ease 3.8s forwards,flow 3.2s linear 3.8s infinite; } .wheel-build .energy .rev{animation:appear .8s ease 3.8s forwards,flowrev 4.5s linear 3.8s infinite} @keyframes appear{to{opacity:.95}} @keyframes flow{to{stroke-dashoffset:-100}} @keyframes flowrev{to{stroke-dashoffset:100}} /* etincelles */ .wheel-build .sparks circle{fill:#c9f2ff;opacity:0;animation:appear .8s ease 3.8s forwards;filter:drop-shadow(0 0 6px var(--cyan))} @media (prefers-reduced-motion:reduce){ .wheel-build,.wheel-build .blueprint circle,.wheel-build .blueprint path,.wheel-build .energy circle,.wheel-build .energy path{animation:none} .wheel-build .blueprint circle,.wheel-build .blueprint path{stroke-dashoffset:0} .wheel-build .metal{opacity:1;animation:none} } /* ---------- Boutons ---------- */ .btn,a.btn{display:inline-block;background:linear-gradient(90deg,var(--cyan-deep),var(--cyan));color:#fff;padding:13px 26px;border-radius:12px;font-weight:700;border:0;cursor:pointer;font-size:15px;box-shadow:0 8px 22px var(--glow);transition:.2s} [data-theme="dark"] .btn,[data-theme="dark"] a.btn{color:#fff} .btn:hover,a.btn:hover{transform:translateY(-2px);filter:brightness(1.1);text-decoration:none;color:#fff;box-shadow:0 12px 28px var(--glow)} .btn-outline,a.btn-outline{background:transparent;color:var(--cyan-deep);border:2px solid var(--cyan);box-shadow:none} [data-theme="dark"] .btn-outline,[data-theme="dark"] a.btn-outline{color:var(--cyan);background:transparent} .hero .btn-outline,.hero a.btn-outline{color:#fff;border-color:rgba(255,255,255,.6)} .btn-sm{padding:8px 15px;font-size:13px;border-radius:9px} /* ---------- Cartes ---------- */ .cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:38px auto} .cards-3 article{background:var(--bg2);border-radius:var(--radius);padding:24px;border:1px solid var(--line);box-shadow:var(--card-shadow);transition:transform .25s,box-shadow .25s;transform-style:preserve-3d} .cards-3 article:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 18px 44px var(--glow)} .cards-3 article img{border-radius:10px;margin-bottom:12px} .cards-3 h3{margin:.4em 0} .tag{font-size:12px;color:var(--cyan-deep);text-transform:uppercase;letter-spacing:.8px;font-weight:700} .section-sub{color:var(--txt2);max-width:720px} .section-sub.center{margin:0 auto 10px} .services-phares h2,.map-section h2,.expertise h2{font-size:32px} /* ---------- Reveal au scroll ---------- */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}} /* ---------- Carte de France (panneau technologique) ---------- */ .map-section{padding:52px 0;margin:44px 0} .map-panel{ background: linear-gradient(rgba(47,190,240,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(47,190,240,.05) 1px,transparent 1px), linear-gradient(160deg,#0b1620,#0e2434); background-size:38px 38px,38px 38px,auto; border:1px solid rgba(47,190,240,.2);border-radius:20px; padding:34px 26px 26px;box-shadow:0 24px 60px rgba(7,15,22,.35), inset 0 0 60px rgba(47,190,240,.05); } .maps-wrap{display:grid;grid-template-columns:1fr 240px;gap:26px;align-items:center} .map-main .france-map{width:100%;display:block} .map-idf{background:rgba(47,190,240,.05);border:1px solid rgba(47,190,240,.25);border-radius:14px;padding:14px;text-align:center} .map-idf-title{display:block;color:#7fd8f7;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;margin-bottom:10px} .idf-map{width:100%;display:block} .france-map .dept{fill:#16303f;stroke:rgba(47,190,240,.35);stroke-width:.7;transition:fill .15s,filter .15s} .france-map .dept.covered{fill:var(--cyan);stroke:#9fe8ff;filter:drop-shadow(0 0 5px rgba(47,190,240,.6))} .france-map .dept.recruiting{fill:var(--orange);stroke:#ffd9a0} .france-map a:hover .dept{fill:#5fd2ff;filter:drop-shadow(0 0 8px rgba(95,210,255,.9))} .france-map .dept-code{font-size:10px;font-weight:700;fill:#bfe6f5;text-anchor:middle;pointer-events:none;paint-order:stroke;stroke:rgba(7,15,22,.65);stroke-width:2.5px} .idf-map .dept-code{font-size:5.5px;stroke-width:1.4px} .map-legend{display:flex;gap:26px;justify-content:center;margin-top:22px;font-size:13.5px;flex-wrap:wrap;color:#9db4c0} .map-legend .lg{display:inline-block;width:14px;height:14px;border-radius:4px;margin-right:6px;vertical-align:-2px} .lg-covered{background:var(--cyan)} .lg-recruiting{background:var(--orange)} .lg-none{background:#16303f;border:1px solid rgba(47,190,240,.35)} .map-section h2,.map-section .section-sub{text-align:center;margin-left:auto;margin-right:auto} /* ---------- Galerie des realisations ---------- */ .realisations{padding:20px 20px 0} .realisations h2{font-size:30px} .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 10px} .gallery-item{display:block;border-radius:14px;overflow:hidden;position:relative;box-shadow:var(--card-shadow)} .gallery-item img{width:100%;height:200px;object-fit:cover;display:block;transition:transform .35s ease,filter .35s ease} .gallery-item:hover img{transform:scale(1.07);filter:brightness(1.08)} .gallery-item::after{content:"+";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:38px;color:#fff;background:rgba(14,159,216,.35);opacity:0;transition:opacity .25s} .gallery-item:hover::after{opacity:1} .lightbox{position:fixed;inset:0;background:rgba(7,15,22,.93);display:flex;align-items:center;justify-content:center;z-index:200;padding:30px;cursor:zoom-out;backdrop-filter:blur(6px)} .lightbox img{max-width:100%;max-height:92vh;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.6)} .lightbox-close{position:absolute;top:16px;right:22px;background:none;border:0;color:#fff;font-size:34px;cursor:pointer;line-height:1} @media (max-width:700px){.gallery{grid-template-columns:repeat(2,1fr)}.gallery-item img{height:140px}} /* ---------- Stats ---------- */ .expertise{padding:30px 20px} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:28px 0} .stats div{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);text-align:center;padding:20px;box-shadow:var(--card-shadow)} .stats strong{display:block;font-size:30px;background:linear-gradient(90deg,var(--cyan-deep),var(--cyan2));-webkit-background-clip:text;background-clip:text;color:transparent} .stats span{font-size:13px;color:var(--txt2)} /* ---------- Recrutement ---------- */ .recrute{background:radial-gradient(800px 400px at 20% 0%,rgba(47,190,240,.14),transparent),linear-gradient(150deg,#0b1620,#102538);color:#c3d5de;padding:52px 0;margin-top:44px} .recrute h2{color:#fff} .recrute ul{list-style:none;padding:0} .recrute li{padding:4px 0} /* ---------- Pages / contenu ---------- */ .page-content{padding:30px 20px 50px;max-width:900px} .page-content .lead{font-size:18px;color:var(--txt2)} .page-content .lead strong{color:var(--txt)} .form-hint{font-size:13px;color:var(--txt2);margin-top:-6px} .dept-voisins{font-size:13px;color:var(--txt2);border-top:1px solid var(--line);padding-top:16px;margin-top:30px} input[type=file]{padding:9px;border:1px dashed var(--line);border-radius:10px;width:100%;margin-top:5px;background:var(--bg2);color:var(--txt2);font-size:14px} .page-content img{border-radius:var(--radius);margin:10px 0;box-shadow:var(--card-shadow)} .page-content h2{margin-top:1.6em} .post-img{margin-bottom:20px} .date{color:var(--txt2);font-size:13px} /* ---------- Agences ---------- */ .agences-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin:28px 0} .agence-card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--card-shadow);transition:transform .25s,box-shadow .25s} .agence-card:hover{transform:translateY(-5px);box-shadow:0 18px 44px var(--glow)} .agence-card img{width:100%;height:190px;object-fit:cover;display:block} .agence-body{padding:18px} .agence-body h3{margin:.2em 0} .agence-body p{margin:.5em 0;font-size:14px} .agence-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:32px;padding:30px 0 50px} .agence-photo{border-radius:var(--radius)} .side-card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:18px;font-size:14px;box-shadow:var(--card-shadow)} .side-card h3{margin-top:0} /* ---------- Pagination ---------- */ .pagination{display:flex;gap:8px;justify-content:center;margin:26px 0} .pagination a,.pagination .current{padding:8px 14px;border-radius:10px;border:1px solid var(--line)} .pagination .current{background:var(--cyan);color:#fff;border-color:var(--cyan)} /* ---------- Formulaire ---------- */ .form label{display:block;margin-bottom:14px;font-weight:600;font-size:14px} .form input,.form select,.form textarea{display:block;width:100%;padding:12px;margin-top:5px;border:1px solid var(--line);border-radius:10px;font-size:15px;font-family:inherit;background:var(--bg2);color:var(--txt)} .form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--cyan)} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .alert{padding:14px 18px;border-radius:12px;margin:16px 0} .alert-ok{background:rgba(46,158,91,.12);border:1px solid #2e9e5b;color:#2e9e5b} .alert-err{background:rgba(217,83,79,.12);border:1px solid #d9534f;color:#d9534f} /* ---------- Liens departements + footer ---------- */ .dept-links{background:var(--bg3);padding:30px 0;font-size:12.5px;color:var(--txt2)} .dept-links h2{font-size:17px} .dept-links a{color:var(--txt2)} .site-footer{background:var(--header);color:#8fa6b3;padding:46px 0 0} .footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:30px;font-size:14px} .footer-grid h4{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:.8px;margin:0 0 12px;border-bottom:2px solid var(--cyan);display:inline-block;padding-bottom:5px} .footer-grid ul{list-style:none;margin:0;padding:0} .footer-grid li{padding:3px 0} .site-footer a{color:#8fa6b3} .site-footer a:hover{color:var(--cyan)} .footer-about img{height:42px;margin-bottom:12px;filter:drop-shadow(0 0 14px var(--glow))} .footer-cta{margin-top:12px;display:inline-block;background:linear-gradient(90deg,var(--cyan-deep),var(--cyan));color:#fff !important;padding:10px 20px;border-radius:10px;font-weight:700} .copyright{text-align:center;padding:22px 0;font-size:13px;color:#5c7484;border-top:1px solid rgba(255,255,255,.08);margin-top:36px} /* ---------- Responsive ---------- */ @media (max-width:1050px){ .header-phone span{display:none} .main-nav>ul>li>a{padding:10px 9px;letter-spacing:1px} } @media (max-width:900px){ .hero-grid,.agence-layout{grid-template-columns:1fr} .wheel-scene{min-height:280px} .cards-3{grid-template-columns:1fr} .agences-grid{grid-template-columns:1fr} .stats{grid-template-columns:repeat(2,1fr)} .footer-grid{grid-template-columns:1fr 1fr} .form-row{grid-template-columns:1fr} .maps-wrap{grid-template-columns:1fr} .map-idf{max-width:300px;margin:0 auto} .map-panel{padding:22px 14px 18px} /* Header mobile : logo + actions sur une ligne, menu plein ecran */ .header-inner{gap:12px;padding:12px 16px} .logo img{height:30px} .header-phone{display:none} .btn-header{display:none} .burger{display:flex;align-items:center;margin-left:4px} .header-actions{margin-left:auto;gap:10px} .main-nav{display:none} /* position:absolute sous le header (fixed serait piege par le backdrop-filter du header) */ body.nav-open .main-nav{ display:block;position:absolute;top:100%;left:0;right:0; background:rgba(7,15,22,.98);max-height:calc(100vh - 62px);overflow-y:auto; padding:12px 22px 30px;border-bottom:1px solid rgba(47,190,240,.25); box-shadow:0 30px 60px rgba(0,0,0,.5); } .main-nav>ul{flex-direction:column;gap:0} .main-nav>ul>li>a{padding:13px 4px;font-size:14px;letter-spacing:1.4px;border-bottom:1px solid rgba(47,190,240,.12);white-space:normal} .main-nav li ul{display:block;position:static;box-shadow:none;background:transparent;padding:2px 0 8px 14px;border:0;min-width:0} .main-nav li ul a{padding:8px 4px;white-space:normal} } @media (max-width:560px){ .footer-grid{grid-template-columns:1fr} .hero{padding:44px 0} .hero h1{font-size:30px} .hero-cta .btn{display:block;text-align:center;margin-bottom:10px} }