@import url(‘https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap’);
/* Fond sombre par defaut pour toute section/footer qui n’a pas deja sa propre
couleur — evite les bandes/zones blanches derriere les sections transparentes. */
.axm-wrap > section,
.axm-wrap > footer{
background:#12141a;
}
body{
background:#12141a;
}
/* =========================================================
TOKENS — palette “atelier / nuit d’Agadir” : graphite chaud,
acide (couleur d’électrolyte) + cuivre (bornes de batterie).
========================================================= */
.axm-wrap{
–bg:#12141a;
–surface:#1b1e26;
–surface-2:#242833;
–border:#333947;
–text:#f2f0e9;
–muted:#9aa0ad;
–acid:#c6f24e;
–copper:#e08d4b;
–danger:#ff6a52;
–radius:14px;
–font-display:’Space Grotesk’, sans-serif;
–font-body:’Inter’, sans-serif;
–font-mono:’IBM Plex Mono’, monospace;
–max:1180px;
}
.axm-wrap *{box-sizing:border-box; margin:0; padding:0;}
.axm-wrap{scroll-behavior:smooth;}
.axm-wrap{
background:var(–bg);
color:var(–text);
font-family:var(–font-body);
line-height:1.55;
-webkit-font-smoothing:antialiased;
}
.axm-wrap img{max-width:100%; display:block;}
.axm-wrap a{color:inherit; text-decoration:none;}
.axm-wrap ul{list-style:none;}
.axm-wrap .wrap{max-width:var(–max); margin:0 auto; padding:0 24px;}
.axm-wrap section{padding:100px 0;}
.axm-wrap h1, .axm-wrap h2, .axm-wrap h3{font-family:var(–font-display); line-height:1.1; letter-spacing:-0.01em;}
.axm-wrap .eyebrow{
font-family:var(–font-mono);
font-size:12.5px;
letter-spacing:0.14em;
text-transform:uppercase;
color:var(–acid);
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:18px;
}
.axm-wrap .eyebrow::before{content:”●”; font-size:8px;}
.axm-wrap h2.section-title{font-size:clamp(28px,4vw,42px); margin-bottom:14px;}
.axm-wrap .section-sub{color:var(–muted); max-width:560px; font-size:16.5px; margin-bottom:52px;}
.axm-wrap :focus-visible{outline:2px solid var(–acid); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){
.axm-wrap *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}
/* Buttons */
.axm-wrap .btn{
display:inline-flex; align-items:center; gap:10px;
font-family:var(–font-body); font-weight:600; font-size:15px;
padding:15px 26px; border-radius:999px; border:1px solid transparent;
cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
white-space:nowrap;
}
.axm-wrap .btn:hover{transform:translateY(-2px);}
.axm-wrap .btn-primary{background:var(–acid); color:#12141a;}
.axm-wrap .btn-primary:hover{box-shadow:0 10px 30px -8px rgba(198,242,78,0.5);}
.axm-wrap .btn-whatsapp{background:#25D366; color:#0c1f13;}
.axm-wrap .btn-whatsapp:hover{box-shadow:0 10px 30px -8px rgba(37,211,102,0.55);}
.axm-wrap .btn-outline{background:transparent; border-color:var(–border); color:var(–text);}
.axm-wrap .btn-outline:hover{border-color:var(–acid);}
/* =========================================================
0. NAVBAR
========================================================= */
.axm-wrap header.nav{
position:sticky; top:0; z-index:50;
background:rgba(18,20,26,0.85); backdrop-filter:blur(10px);
border-bottom:1px solid var(–border);
}
.axm-wrap .nav-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:var(–max); margin:0 auto;}
.axm-wrap .logo{font-family:var(–font-display); font-weight:700; font-size:20px; letter-spacing:-0.02em;}
.axm-wrap .logo span{color:var(–acid);}
.axm-wrap .nav-links{display:flex; gap:32px; font-size:14.5px; color:var(–muted);}
.axm-wrap .nav-links a:hover{color:var(–text);}
.axm-wrap .nav-cta{display:flex; gap:12px;}
.axm-wrap .nav-mobile-hide{display:flex;}
@media (max-width:820px){ .axm-wrap .nav-links{display:none;} }
/* =========================================================
1. HERO — avec jauge de tension animée (élément signature)
========================================================= */
.axm-wrap .hero{
padding:90px 0 70px;
background:
radial-gradient(circle at 85% 10%, rgba(198,242,78,0.08), transparent 45%),
radial-gradient(circle at 10% 90%, rgba(224,141,75,0.10), transparent 40%);
}
.axm-wrap .hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:center;}
@media (max-width:900px){ .axm-wrap .hero-grid{grid-template-columns:1fr;} }
.axm-wrap .hero h1{font-size:clamp(34px,5vw,56px); margin-bottom:22px;}
.axm-wrap .hero h1 em{font-style:normal; color:var(–acid);}
.axm-wrap .hero p.lead{font-size:18px; color:var(–muted); max-width:520px; margin-bottom:34px;}
.axm-wrap .hero-ctas{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:34px;}
.axm-wrap .trust-row{display:flex; flex-wrap:wrap; gap:22px; font-size:13.5px; color:var(–muted); font-family:var(–font-mono);}
.axm-wrap .trust-row li{display:flex; align-items:center; gap:8px;}
.axm-wrap .trust-row svg{width:16px; height:16px; stroke:var(–acid);}
/* Voltmeter signature element */
.axm-wrap .gauge-card{
background:var(–surface); border:1px solid var(–border); border-radius:var(–radius);
padding:30px; position:relative; overflow:hidden;
}
.axm-wrap .gauge-card::after{
content:””; position:absolute; inset:0;
background:linear-gradient(135deg, transparent 60%, rgba(198,242,78,0.06));
pointer-events:none;
}
.axm-wrap .gauge-label{font-family:var(–font-mono); font-size:12px; color:var(–muted); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:6px;}
.axm-wrap .gauge-value{font-family:var(–font-mono); font-size:34px; color:var(–acid); font-weight:600; margin-bottom:18px;}
.axm-wrap .gauge-svg{width:100%; height:auto;}
.axm-wrap #needle{transform-origin:150px 150px; animation: axm-sweep 2.6s ease-out forwards;}
@keyframes axm- sweep{
0%{transform:rotate(-90deg);}
70%{transform:rotate(48deg);}
100%{transform:rotate(38deg);}
}
.axm-wrap .gauge-status{display:flex; align-items:center; gap:10px; margin-top:14px; font-size:14px; color:var(–muted);}
.axm-wrap .dot-live{width:9px; height:9px; border-radius:50%; background:var(–acid); box-shadow:0 0 0 0 rgba(198,242,78,0.6); animation: axm-pulse 1.8s infinite;}
@keyframes axm- pulse{
0%{box-shadow:0 0 0 0 rgba(198,242,78,0.55);}
70%{box-shadow:0 0 0 10px rgba(198,242,78,0);}
100%{box-shadow:0 0 0 0 rgba(198,242,78,0);}
}
/* =========================================================
2. PROBLÈMES
========================================================= */
.axm-wrap .problems-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
@media (max-width:760px){ .axm-wrap .problems-grid{grid-template-columns:1fr;} }
.axm-wrap .problem-card{
background:var(–surface); border:1px solid var(–border); border-radius:var(–radius);
padding:26px; border-left:3px solid var(–danger);
}
.axm-wrap .problem-card p{color:var(–text); font-size:15.5px;}
.axm-wrap .problem-card .tag{font-family:var(–font-mono); font-size:11.5px; color:var(–danger); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:10px; display:block;}
/* =========================================================
3. SOLUTION
========================================================= */
.axm-wrap .solution{
background:var(–surface); border-top:1px solid var(–border); border-bottom:1px solid var(–border);
}
.axm-wrap .solution-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
@media (max-width:900px){ .axm-wrap .solution-grid{grid-template-columns:1fr;} }
.axm-wrap .solution ul{display:flex; flex-direction:column; gap:16px; margin-top:24px;}
.axm-wrap .solution ul li{display:flex; gap:12px; font-size:15.5px; color:var(–text);}
.axm-wrap .solution ul li svg{flex-shrink:0; width:20px; height:20px; stroke:var(–acid); margin-top:2px;}
.axm-wrap .solution-visual{
background:linear-gradient(160deg, var(–surface-2), var(–surface));
border:1px solid var(–border); border-radius:var(–radius); padding:34px;
font-family:var(–font-mono); font-size:13px; color:var(–muted);
}
.axm-wrap .solution-visual .row{display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px dashed var(–border);}
.axm-wrap .solution-visual .row:last-child{border-bottom:none;}
.axm-wrap .solution-visual .row b{color:var(–acid); font-weight:600;}
/* =========================================================
4. BÉNÉFICES
========================================================= */
.axm-wrap .benefits-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:900px){ .axm-wrap .benefits-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .axm-wrap .benefits-grid{grid-template-columns:1fr;} }
.axm-wrap .benefit-card{
background:var(–surface); border:1px solid var(–border); border-radius:var(–radius);
padding:28px; transition:border-color .2s ease, transform .2s ease;
}
.axm-wrap .benefit-card:hover{border-color:var(–acid); transform:translateY(-4px);}
.axm-wrap .benefit-icon{width:42px; height:42px; border-radius:10px; background:var(–surface-2); display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
.axm-wrap .benefit-icon svg{width:22px; height:22px; stroke:var(–acid);}
.axm-wrap .benefit-card h3{font-size:17px; margin-bottom:8px;}
.axm-wrap .benefit-card p{font-size:14.5px; color:var(–muted);}
/* =========================================================
5. COMMENT ÇA MARCHE
========================================================= */
.axm-wrap .steps{background:var(–surface); border-top:1px solid var(–border); border-bottom:1px solid var(–border);}
.axm-wrap .steps-row{display:grid; grid-template-columns:repeat(4,1fr); gap:0;}
@media (max-width:900px){ .axm-wrap .steps-row{grid-template-columns:repeat(2,1fr); gap:30px;} }
@media (max-width:560px){ .axm-wrap .steps-row{grid-template-columns:1fr;} }
.axm-wrap .step{padding:0 22px; position:relative;}
.axm-wrap .step:not(:last-child)::after{
content:””; position:absolute; top:26px; right:-2px; width:100%; height:1px; background:var(–border);
}
@media (max-width:900px){ .axm-wrap .step::after{display:none;} }
.axm-wrap .step-num{font-family:var(–font-mono); font-size:13px; color:var(–copper); margin-bottom:14px; display:block;}
.axm-wrap .step h3{font-size:16.5px; margin-bottom:8px;}
.axm-wrap .step p{font-size:14px; color:var(–muted);}
/* =========================================================
6. POURQUOI NOUS CHOISIR
========================================================= */
.axm-wrap .why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
@media (max-width:900px){ .axm-wrap .why-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .axm-wrap .why-grid{grid-template-columns:1fr;} }
.axm-wrap .why-card{
text-align:center; background:var(–surface); border:1px solid var(–border); border-radius:var(–radius);
padding:26px 18px;
}
.axm-wrap .why-card .glyph{font-family:var(–font-mono); color:var(–acid); font-size:22px; margin-bottom:10px;}
.axm-wrap .why-card h3{font-size:15px; margin-bottom:6px;}
.axm-wrap .why-card p{font-size:13px; color:var(–muted);}
/* =========================================================
7. GAMME PRODUITS (données réelles catalogue)
========================================================= */
.axm-wrap .tier-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:40px;}
@media (max-width:900px){ .axm-wrap .tier-grid{grid-template-columns:1fr;} }
.axm-wrap .tier-card{
background:var(–surface); border:1px solid var(–border); border-radius:var(–radius);
padding:30px; display:flex; flex-direction:column;
}
.axm-wrap .tier-card.featured{border-color:var(–acid); position:relative;}
.axm-wrap .tier-card.featured::before{
content:”RECOMMANDÉ”; position:absolute; top:-11px; left:24px; background:var(–acid); color:#12141a;
font-family:var(–font-mono); font-size:10.5px; letter-spacing:0.08em; padding:4px 10px; border-radius:999px; font-weight:600;
}
.axm-wrap .tier-line{font-family:var(–font-mono); font-size:11.5px; color:var(–copper); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:10px;}
.axm-wrap .tier-card h3{font-size:20px; margin-bottom:6px;}
.axm-wrap .tier-card .ref{font-family:var(–font-mono); font-size:12px; color:var(–muted); margin-bottom:20px;}
.axm-wrap .tier-specs{display:flex; flex-direction:column; gap:9px; margin-bottom:22px; flex-grow:1;}
.axm-wrap .tier-specs .r{display:flex; justify-content:space-between; font-size:14px; border-bottom:1px dashed var(–border); padding-bottom:9px;}
.axm-wrap .tier-specs .r span:first-child{color:var(–muted);}
.axm-wrap .tier-specs .r span:last-child{font-family:var(–font-mono); color:var(–text);}
.axm-wrap .tier-price{font-family:var(–font-mono); font-size:26px; color:var(–acid); font-weight:600; margin-bottom:18px;}
.axm-wrap .tier-price small{font-size:13px; color:var(–muted); font-weight:400;}
.axm-wrap .range-table-wrap{overflow-x:auto; border:1px solid var(–border); border-radius:var(–radius);}
.axm-wrap table.range-table{width:100%; border-collapse:collapse; font-size:13.5px; min-width:640px;}
.axm-wrap table.range-table th, .axm-wrap table.range-table td{padding:14px 16px; text-align:left; border-bottom:1px solid var(–border);}
.axm-wrap table.range-table th{font-family:var(–font-mono); text-transform:uppercase; letter-spacing:0.06em; font-size:11.5px; color:var(–muted); background:var(–surface);}
.axm-wrap table.range-table td{font-family:var(–font-mono); color:var(–text);}
.axm-wrap table.range-table tr:last-child td{border-bottom:none;}
.axm-wrap .note-catalog{font-size:12.5px; color:var(–muted); margin-top:14px;}
/* =========================================================
8. TÉMOIGNAGES
========================================================= */
.axm-wrap .testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:900px){ .axm-wrap .testi-grid{grid-template-columns:1fr;} }
.axm-wrap .testi-card{background:var(–surface); border:1px solid var(–border); border-radius:var(–radius); padding:26px;}
.axm-wrap .stars{color:var(–acid); font-size:15px; margin-bottom:14px; letter-spacing:2px;}
.axm-wrap .testi-card p{font-size:14.5px; color:var(–text); margin-bottom:18px;}
.axm-wrap .testi-who{display:flex; align-items:center; gap:10px;}
.axm-wrap .avatar{width:36px; height:36px; border-radius:50%; background:var(–surface-2); display:flex; align-items:center; justify-content:center; font-family:var(–font-mono); font-size:13px; color:var(–copper);}
.axm-wrap .testi-who .name{font-size:13.5px; font-weight:600;}
.axm-wrap .testi-who .loc{font-size:12px; color:var(–muted);}
/* =========================================================
9. GALERIE
========================================================= */
.axm-wrap .gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:760px){ .axm-wrap .gallery-grid{grid-template-columns:repeat(2,1fr);} }
.axm-wrap .gallery-tile{
aspect-ratio:4/3; border-radius:var(–radius); border:1px solid var(–border);
background:linear-gradient(150deg, var(–surface-2), var(–surface));
display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px;
color:var(–muted); font-family:var(–font-mono); font-size:12px; text-align:center; padding:14px;
}
.axm-wrap .gallery-tile svg{width:26px; height:26px; stroke:var(–copper);}
/* =========================================================
10. FAQ
========================================================= */
.axm-wrap .faq-list{max-width:760px; margin:0 auto;}
.axm-wrap .faq-item{border-bottom:1px solid var(–border);}
.axm-wrap .faq-q{
width:100%; text-align:left; background:none; border:none; color:var(–text);
font-family:var(–font-body); font-size:16px; font-weight:600; padding:22px 0; cursor:pointer;
display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.axm-wrap .faq-q .plus{font-family:var(–font-mono); color:var(–acid); font-size:20px; transition:transform .25s ease; flex-shrink:0;}
.axm-wrap .faq-item.open .plus{transform:rotate(45deg);}
.axm-wrap .faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.axm-wrap .faq-a p{padding-bottom:22px; color:var(–muted); font-size:14.5px; max-width:640px;}
/* =========================================================
11. CTA FINAL
========================================================= */
.axm-wrap .cta-final{
background:linear-gradient(135deg, var(–surface-2), var(–surface));
border-radius:24px; border:1px solid var(–border);
padding:64px 40px; text-align:center; margin:0 24px;
max-width:calc(var(–max) – 48px);
margin-left:auto; margin-right:auto;
}
.axm-wrap .cta-final h2{font-size:clamp(26px,4vw,38px); margin-bottom:16px;}
.axm-wrap .cta-final p{color:var(–muted); max-width:480px; margin:0 auto 30px;}
.axm-wrap .cta-final .hero-ctas{justify-content:center;}
/* =========================================================
12. FOOTER
========================================================= */
.axm-wrap footer{border-top:1px solid var(–border); padding:60px 0 30px; margin-top:80px;}
.axm-wrap .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:50px;}
@media (max-width:760px){ .axm-wrap .footer-grid{grid-template-columns:1fr; gap:32px;} }
.axm-wrap .footer-grid h4{font-family:var(–font-mono); font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(–muted); margin-bottom:16px;}
.axm-wrap .footer-grid ul{display:flex; flex-direction:column; gap:10px; font-size:14.5px; color:var(–muted);}
.axm-wrap .footer-grid ul a:hover{color:var(–acid);}
.axm-wrap .footer-desc{color:var(–muted); font-size:14px; margin-top:14px; max-width:320px;}
.axm-wrap .footer-bottom{
display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
padding-top:24px; border-top:1px solid var(–border); font-size:12.5px; color:var(–muted);
}
.axm-wrap .social-row{display:flex; gap:14px;}
.axm-wrap .social-row a{width:34px; height:34px; border:1px solid var(–border); border-radius:50%; display:flex; align-items:center; justify-content:center;}
.axm-wrap .social-row a:hover{border-color:var(–acid);}
.axm-wrap .social-row svg{width:16px; height:16px; stroke:var(–muted);}
/* Floating WhatsApp button */
.axm-wrap .wa-float{
position:fixed; bottom:22px; right:22px; z-index:60;
width:58px; height:58px; border-radius:50%; background:#25D366;
display:flex; align-items:center; justify-content:center;
box-shadow:0 8px 24px rgba(0,0,0,0.35);
}
.axm-wrap .wa-float svg{width:28px; height:28px; fill:#0c1f13;}
/* Reveal on scroll */
.axm-wrap .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.axm-wrap .reveal.in{opacity:1; transform:translateY(0);}
/* Casse la largeur du conteneur du theme WordPress pour un affichage plein ecran */
.axm-wrap{ overflow-x:hidden; }
html, body{ overflow-x:hidden; }
.axm-wrap > header.nav,
.axm-wrap > section,
.axm-wrap > footer{
width:100vw;
position:relative;
left:50%;
right:50%;
margin-left:-50vw;
margin-right:-50vw;
}
.axm-wrap .wa-float{ position:fixed; }
