/* ═══════════════════════════════════════════ CLYDE DRIVING SCHOOL — Styles globaux DA : #FFFFFF · #000000 · #424242 · #FFC605 · dégradé jaune Police : Mazzard (fallback Poppins) — gras pour les titres, fine sinon ═══════════════════════════════════════════ */ /* Police chargée via dans le de chaque page (non-bloquant) */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root{ --y:#FFC605;--y10:rgba(255,198,5,.10);--y20:rgba(255,198,5,.20);--y35:rgba(255,198,5,.35); --ygrad:linear-gradient(105deg,#FFD84D 0%,#FFC605 55%,#F5B301 100%); --k:#000000;--k1:#111111;--k2:#1A1A1A;--k3:#424242; --w:#FFFFFF;--w2:#EEEEED;--g4:#ABABAB;--g6:#424242; --text:var(--k);--textm:var(--g6);--bg:var(--w);--card:#fff;--border:#E4E4E0; --ease:cubic-bezier(.16,1,.3,1); } @media(prefers-color-scheme:dark){:root{--text:var(--w);--textm:var(--g4);--bg:var(--k1);--card:var(--k2);--border:rgba(255,255,255,.07)}} html{scroll-behavior:smooth;font-size:16px;background:var(--k);overflow-x:hidden;overflow-x:clip} body{font-family:'Mazzard','Mazzard M','Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-weight:300;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased} /* ── Layout ── */ .wrap{max-width:1240px;margin:0 auto;padding:0 32px} .wrap-sm{max-width:760px;margin:0 auto;padding:0 32px} /* ── Buttons ── */ .btn{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:100px;font-size:14px;font-weight:600;letter-spacing:-.01em;text-decoration:none;cursor:pointer;border:none;transition:transform .25s var(--ease),box-shadow .25s,background .2s,color .2s;white-space:nowrap;line-height:1;font-family:inherit} .btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)} .btn-y{background:var(--ygrad);color:#000;font-weight:700} .btn-y:hover{filter:brightness(1.06);box-shadow:0 8px 32px var(--y35)} .btn-ghost{background:rgba(255,255,255,.09);color:#fff;border:1px solid rgba(255,255,255,.13)} .btn-ghost:hover{background:rgba(255,255,255,.14)} .btn-dark{background:var(--k);color:var(--w)} .btn-dark:hover{background:var(--k3);box-shadow:0 8px 32px rgba(0,0,0,.35)} .btn-outline{background:transparent;color:var(--text);border:1.5px solid var(--border)} .btn-outline:hover{border-color:var(--g4)} .btn-lg{padding:15px 30px;font-size:16px} /* ── Nav ── */ #nav{position:fixed;top:0;left:0;right:0;z-index:900;padding:20px 0;transition:background .35s var(--ease),border-color .35s,padding .3s var(--ease);border-bottom:1px solid transparent} #nav.scrolled,#nav.solid{background:rgba(10,10,10,.96);border-color:rgba(255,255,255,.07);padding:12px 0} .nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px} .nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0} .nav-logo svg{width:40px;height:40px} .nav-logo-img{height:52px;width:auto;display:block} #nav.scrolled .nav-logo-img,#nav.solid .nav-logo-img{height:44px;transition:height .3s var(--ease)} .nav-logo-name{font-size:15px;font-weight:800;color:#fff;letter-spacing:-.02em} @media(max-width:768px){.nav-logo-img{height:42px}} .nav-links{display:flex;align-items:center;gap:2px;list-style:none} .nav-links a{display:block;padding:7px 13px;color:rgba(255,255,255,.65);text-decoration:none;font-size:13.5px;font-weight:500;letter-spacing:-.01em;border-radius:8px;transition:color .2s,background .2s} .nav-links a:hover,.nav-links a.active{color:#fff;background:rgba(255,255,255,.07)} /* ── Burger (mobile) ── */ .nav-burger{display:none;width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);cursor:pointer;align-items:center;justify-content:center;flex-shrink:0;padding:0} .nav-burger svg{width:20px;height:20px;stroke:#fff;stroke-width:2;stroke-linecap:round;fill:none} .nav-burger .ic-close{display:none} #nav.menu-open .nav-burger .ic-close{display:block} #nav.menu-open .nav-burger .ic-menu{display:none} @media(max-width:768px){ .nav-burger{display:flex} .nav-logo-name{display:none} .nav-in{gap:12px} .nav-in .btn{padding:9px 14px;font-size:12.5px} #nav.menu-open{background:rgba(8,8,8,.97);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)} .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:4px;background:rgba(8,8,8,.97);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid rgba(255,255,255,.08);padding:12px 20px 20px} #nav.menu-open .nav-links{display:flex} .nav-links a{font-size:16px;padding:13px 14px;color:rgba(255,255,255,.85)} } /* ── Hero ── */ .hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;background:var(--k);overflow:hidden;padding:140px 0 100px} .hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none} .orb{position:absolute;border-radius:50%;will-change:transform;transform:translateZ(0)} .orb1{width:700px;height:700px;background:radial-gradient(circle,rgba(255,198,5,.2) 0%,rgba(255,198,5,.08) 40%,transparent 68%);top:-180px;right:-180px;animation:floatA 9s ease-in-out infinite} .orb2{width:500px;height:500px;background:radial-gradient(circle,rgba(255,198,5,.12) 0%,rgba(255,198,5,.05) 40%,transparent 68%);bottom:-100px;left:-80px;animation:floatA 12s ease-in-out infinite reverse} @keyframes floatA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(20px,-30px) scale(1.04)}} .hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:72px 72px;mask-image:radial-gradient(ellipse 80% 90% at 50% 40%,black 10%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 80% 90% at 50% 40%,black 10%,transparent 75%)} .hero-cnt{position:relative;z-index:1} .hero-ey{display:inline-flex;align-items:center;gap:8px;background:var(--y10);border:1px solid var(--y20);border-radius:100px;padding:5px 14px;font-size:11px;font-weight:700;color:var(--y);letter-spacing:.1em;text-transform:uppercase;margin-bottom:36px} .ey-dot{width:6px;height:6px;background:var(--y);border-radius:50%;animation:blink 2.4s ease-in-out infinite} @keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.75)}} .hero-title{font-size:clamp(52px,7.5vw,104px);font-weight:800;line-height:1.01;letter-spacing:-.04em;color:#fff;text-wrap:balance;margin-bottom:28px} .hero-title em{font-style:normal;color:var(--y)} .hero-sub{font-size:clamp(16px,2vw,19px);color:rgba(255,255,255,.48);line-height:1.65;max-width:460px;letter-spacing:-.01em;margin-bottom:48px;font-weight:400} .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px} .hero-strip{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:14px 20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:14px;margin-bottom:40px} .hs-label{font-size:13px;font-weight:600;color:rgba(255,255,255,.55);flex-shrink:0} .hs-sep{width:1px;height:18px;background:rgba(255,255,255,.1);flex-shrink:0} .hs-link{display:flex;align-items:center;gap:6px;font-size:13px;color:rgba(255,255,255,.6);text-decoration:none;font-weight:500;transition:color .2s;flex-shrink:0} .hs-link:hover{color:#fff} .hs-link svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .hs-modal-btn{background:var(--y);color:#000;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:100px;font-size:12.5px;font-weight:700;font-family:inherit;letter-spacing:-.01em;transition:background .2s,transform .2s;flex-shrink:0} .hs-modal-btn:hover{background:#FFD84D;transform:translateY(-1px)} .hero-proof{display:flex;align-items:center;gap:16px} .stars{display:flex;gap:1px} .star{color:var(--y);font-size:15px} .proof-text{font-size:13.5px;color:rgba(255,255,255,.42);letter-spacing:-.01em} .proof-text strong{color:rgba(255,255,255,.78);font-weight:600} /* ── Page hero (sous-pages) ── */ .page-hero{background:var(--k);padding:180px 0 80px;position:relative;overflow:hidden} .page-hero .orb1{width:500px;height:500px;top:-200px;right:-120px} .page-hero-title{font-size:clamp(40px,5.5vw,72px);font-weight:800;color:#fff;letter-spacing:-.035em;line-height:1.05;margin-bottom:16px;position:relative;z-index:1} .page-hero-sub{font-size:17px;color:rgba(255,255,255,.45);max-width:560px;position:relative;z-index:1} /* ── Stats ── */ .stats{background:var(--k2);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr)} .stat{padding:44px 36px;border-right:1px solid rgba(255,255,255,.06);text-align:center} .stat:last-child{border-right:none} .stat-n{font-size:clamp(36px,4vw,52px);font-weight:800;color:#fff;letter-spacing:-.04em;line-height:1;margin-bottom:8px;font-variant-numeric:tabular-nums} .stat-n .ac{color:var(--y)} .stat-l{font-size:13.5px;color:rgba(255,255,255,.38);font-weight:450;letter-spacing:-.01em} .stat-star{font-size:.5em;vertical-align:super;color:var(--y);margin-left:1px} .stats-note{text-align:center;font-size:12px;color:rgba(255,255,255,.35);padding:20px 24px 0;max-width:640px;margin:0 auto} /* ── Sections ── */ .sec{padding:120px 0} .sec-dark{background:var(--k)} .sec-dark2{background:var(--k1)} .sec-light{background:var(--w)} .sec-light2{background:var(--w2)} @media(prefers-color-scheme:dark){.sec-light{background:var(--k1)}.sec-light2{background:var(--k)}} .eyebrow{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--y);margin-bottom:16px} .sec-title{font-size:clamp(34px,4.5vw,58px);font-weight:800;letter-spacing:-.03em;line-height:1.07;text-wrap:balance;margin-bottom:18px} .sec-title-dk{color:#fff} .sec-title-lt{color:var(--k)} @media(prefers-color-scheme:dark){.sec-title-lt{color:var(--w)}} .sec-desc{font-size:17px;line-height:1.65;font-weight:400;letter-spacing:-.01em;max-width:500px} .sec-desc-dk{color:rgba(255,255,255,.42)} .sec-desc-lt{color:var(--g6)} @media(prefers-color-scheme:dark){.sec-desc-lt{color:var(--g4)}} .sec-hdr{margin-bottom:64px} .sec-hdr-center{text-align:center;display:flex;flex-direction:column;align-items:center} .sec-hdr-split{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:64px} /* ── Formations ── */ .form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .form-card{background:var(--k2);border:1px solid rgba(255,255,255,.07);border-radius:28px;padding:36px;display:flex;flex-direction:column;gap:22px;text-decoration:none;position:relative;overflow:hidden;transition:border-color .3s,transform .35s var(--ease),box-shadow .35s;cursor:pointer} .form-card::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 75% 15%,var(--y10) 0%,transparent 55%);opacity:0;transition:opacity .3s;pointer-events:none} .form-card:hover{border-color:var(--y20);transform:translateY(-5px);box-shadow:0 28px 72px rgba(0,0,0,.5)} .form-card:hover::after{opacity:1} .form-card-feat{border-color:var(--y20);background:linear-gradient(145deg,#181400,#0E0C00)} .form-icon{width:50px;height:50px;border-radius:14px;background:var(--y10);display:flex;align-items:center;justify-content:center;flex-shrink:0} .form-icon svg{width:24px;height:24px;stroke:var(--y);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .form-badge{position:absolute;top:20px;right:20px;background:var(--y);color:#000;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:4px 10px;border-radius:100px} .form-name{font-size:22px;font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1.2} .form-desc{font-size:13.5px;color:rgba(255,255,255,.4);line-height:1.6;flex:1} .form-tags{display:flex;flex-direction:column;gap:7px} .form-tag{display:flex;align-items:center;gap:7px;font-size:12.5px;color:rgba(255,255,255,.45);font-weight:500} .form-tag::before{content:'';width:4px;height:4px;background:var(--y);border-radius:50%;flex-shrink:0} .form-foot{display:flex;align-items:center;justify-content:space-between;padding-top:18px;border-top:1px solid rgba(255,255,255,.06)} .form-price{font-size:26px;font-weight:800;color:#fff;letter-spacing:-.03em} .form-price small{font-size:13px;font-weight:500;color:rgba(255,255,255,.35);letter-spacing:0;margin-left:3px} .form-arr{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;transition:background .2s,transform .25s var(--ease)} .form-card:hover .form-arr{background:var(--y);transform:translateX(2px)} .form-arr svg{width:15px;height:15px;stroke:rgba(255,255,255,.5);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s} .form-card:hover .form-arr svg{stroke:#000} .form-more{margin-top:40px;text-align:center} /* ── Note tarifs ── */ .tarif-note{margin-top:28px;font-size:12.5px;color:rgba(255,255,255,.45);text-align:center;letter-spacing:-.01em} @media(prefers-color-scheme:light){.sec-light .tarif-note,.sec-light2 .tarif-note{color:var(--g6)}} /* ── Hero photo de fond ── */ .hero-photo{position:absolute;inset:0;background-position:center;background-size:cover;opacity:.14;pointer-events:none} /* ── Why ── */ .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:28px;overflow:hidden} .why-item{background:var(--card);padding:40px 36px;display:flex;flex-direction:column;gap:14px;transition:background .2s} .why-item:hover{background:var(--w2)} @media(prefers-color-scheme:dark){.why-item{background:var(--k2)}.why-item:hover{background:var(--k3)}} .why-ico{width:46px;height:46px;border-radius:12px;background:var(--y10);display:flex;align-items:center;justify-content:center} .why-ico svg{width:22px;height:22px;stroke:var(--y);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .why-title{font-size:16px;font-weight:700;letter-spacing:-.015em;color:var(--text);line-height:1.3} .why-desc{font-size:13.5px;color:var(--textm);line-height:1.65} .why-partners{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;margin:32px auto 0;width:fit-content;max-width:100%;background:var(--card);border:1px solid var(--border);border-radius:20px;padding:20px 36px} @media(prefers-color-scheme:dark){.why-partners{background:var(--k2);border-color:rgba(255,255,255,.07)}} .why-logo{height:52px;width:auto} .why-logo-badge{height:68px} .why-logo-note{font-size:12.5px;color:var(--textm);line-height:1.55;max-width:300px} @media(max-width:768px){.why-partners{padding:18px 22px;gap:16px}} @media(prefers-color-scheme:light){.sec-light .why-logo{filter:invert(1) hue-rotate(180deg)}} /* ── Process ── */ .proc-steps{display:flex;align-items:flex-start;position:relative;gap:0} .proc-line{position:absolute;top:24px;left:12%;right:12%;height:1px;background:rgba(255,255,255,.07);z-index:0} .proc-fill{height:100%;background:var(--y);transition:width .6s var(--ease)} .proc-step{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;position:relative;z-index:1;cursor:pointer} .proc-node{width:48px;height:48px;border-radius:50%;background:var(--k1);border:2px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:rgba(255,255,255,.25);transition:background .3s,border-color .3s,color .3s,box-shadow .3s;position:relative;z-index:2} .proc-step.done .proc-node{background:var(--k1);border-color:var(--y);color:var(--y)} .proc-step.active .proc-node{background:var(--y);border-color:var(--y);color:#000;box-shadow:0 0 0 6px var(--y10),0 8px 24px var(--y35)} .proc-lbl{font-size:14px;font-weight:600;color:rgba(255,255,255,.35);letter-spacing:-.01em;transition:color .3s} .proc-sub{font-size:12px;color:rgba(255,255,255,.2);line-height:1.4;transition:color .3s;margin-top:-8px} .proc-step.active .proc-lbl{color:#fff} .proc-step.active .proc-sub{color:rgba(255,255,255,.45)} .proc-step.done .proc-lbl{color:rgba(255,255,255,.55)} .proc-detail{margin-top:40px;padding:26px 32px;background:var(--k2);border:1px solid rgba(255,255,255,.07);border-radius:20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;max-width:640px;margin-left:auto;margin-right:auto} .proc-detail-ico{width:44px;height:44px;border-radius:12px;background:var(--y10);border:1px solid var(--y20);display:flex;align-items:center;justify-content:center;flex-shrink:0} .proc-detail-ico svg{width:20px;height:20px;stroke:var(--y);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .proc-detail-txt h4{font-size:16px;font-weight:700;color:#fff;letter-spacing:-.02em;margin-bottom:5px} .proc-detail-txt p{font-size:13.5px;color:rgba(255,255,255,.45);line-height:1.6} /* ── Vehicles ── */ .veh-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .veh-card{background:var(--k2);border:1px solid rgba(255,255,255,.07);border-radius:28px;overflow:hidden;position:relative;height:360px;display:flex;flex-direction:column;justify-content:flex-end;padding:32px;transition:transform .35s var(--ease),box-shadow .35s} .veh-card:hover{transform:translateY(-4px);box-shadow:0 32px 80px rgba(0,0,0,.5)} .veh-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .veh-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,.92) 0%,rgba(10,10,10,.25) 55%,transparent 100%)} .veh-info{position:relative;z-index:1} .veh-badge{display:inline-flex;align-items:center;gap:6px;background:var(--y);color:#000;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:100px;margin-bottom:12px} .veh-badge-soon{background:rgba(255,255,255,.92);color:#000;border:1.5px dashed rgba(0,0,0,.4)} .veh-photo-contain{object-fit:contain;background:#fff} .veh-name{font-size:26px;font-weight:800;color:#fff;letter-spacing:-.03em;margin-bottom:4px} .veh-sub{font-size:13px;color:rgba(255,255,255,.55)} /* ── Team ── */ .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .team-card{background:var(--k2);border:1px solid rgba(255,255,255,.07);border-radius:24px;padding:32px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;transition:border-color .3s,transform .3s var(--ease)} .team-card:hover{border-color:rgba(255,255,255,.14);transform:translateY(-3px)} .team-av{width:88px;height:88px;border-radius:50%;overflow:hidden;flex-shrink:0;border:3px solid rgba(255,198,5,.3);position:relative} .team-photo{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;position:relative;z-index:1} .team-initial{position:absolute;inset:0;background:var(--y);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;color:#000;z-index:0} .team-name{font-size:17px;font-weight:700;color:#fff;letter-spacing:-.02em} .team-role{font-size:12px;color:var(--y);font-weight:600;letter-spacing:.06em;text-transform:uppercase} .team-quote{font-size:13px;color:rgba(255,255,255,.42);line-height:1.6;font-style:italic;padding-top:14px;border-top:1px solid rgba(255,255,255,.06);width:100%} /* ── Reviews ── */ .reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .avis-carousel{position:relative;padding:0 60px} .avis-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;align-items:stretch;padding:4px 2px} .avis-track::-webkit-scrollbar{display:none} .avis-track .rev-card{flex:0 0 360px;scroll-snap-align:start} .avis-btn{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:var(--ygrad);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;transition:filter .2s} .avis-btn:hover{filter:brightness(1.1)} .avis-prev{left:0} .avis-next{right:0} .avis-btn svg{width:18px;height:18px;stroke:#000;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round} @media(max-width:768px){.avis-carousel{padding:0 46px}.avis-track .rev-card{flex:0 0 280px}} .rev-card{background:var(--card);border:1px solid var(--border);border-radius:24px;padding:28px 28px 24px;display:flex;flex-direction:column;gap:16px;transition:transform .3s var(--ease),box-shadow .3s} .rev-card:hover{transform:translateY(-3px);box-shadow:0 16px 48px rgba(0,0,0,.08)} @media(prefers-color-scheme:dark){.rev-card{background:var(--k2);border-color:rgba(255,255,255,.07)}.rev-card:hover{box-shadow:0 16px 48px rgba(0,0,0,.35)}} .rev-stars{display:flex;gap:2px;font-size:15px;color:var(--y)} .rev-text{font-size:14px;line-height:1.72;color:var(--textm);flex:1;font-style:italic} .rev-text::before{content:'"'} .rev-text::after{content:'"'} .rev-foot{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--border)} @media(prefers-color-scheme:dark){.rev-foot{border-color:rgba(255,255,255,.06)}} .rev-av{width:56px;height:56px;border-radius:50%;background:var(--y);display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;color:#000;flex-shrink:0;text-transform:uppercase;overflow:hidden;border:2px solid var(--y);box-shadow:0 4px 12px rgba(255,198,5,.25)} .rev-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block} /* ── Bande humaine (section avis) ── */ .human-band{display:grid;grid-template-columns:1.05fr 1fr;background:var(--card);border:1px solid var(--border);border-radius:28px;overflow:hidden;margin-bottom:56px;box-shadow:0 24px 64px rgba(0,0,0,.10)} @media(prefers-color-scheme:dark){.human-band{background:var(--k2);border-color:rgba(255,255,255,.08)}} .human-photo{min-height:360px;position:relative} .human-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block} .human-text{padding:48px;display:flex;flex-direction:column;justify-content:center;gap:16px} .human-badge{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;background:var(--y10);border:1px solid var(--y20);color:var(--y);font-size:13px;font-weight:700;padding:7px 15px;border-radius:100px} @media(prefers-color-scheme:light){.sec-light .human-badge{background:#fff4cc;border-color:#ffe08a;color:#9a7400}} .human-text h3{font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.02em;line-height:1.15;color:var(--text)} .human-text>p{font-size:15.5px;line-height:1.65;color:var(--textm)} .human-stat{margin-top:6px;font-size:14px;color:var(--textm)} .human-stat strong{color:var(--y);font-size:22px;font-weight:800;margin-right:4px} @media(max-width:768px){ .human-band{grid-template-columns:1fr} .human-photo{min-height:260px} .human-text{padding:28px 24px} } .rev-meta{display:flex;flex-direction:column} .rev-name{font-size:13.5px;font-weight:600;color:var(--text);letter-spacing:-.01em} .rev-date{font-size:11.5px;color:var(--textm)} /* ── FAQ ── */ .faq-list{display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:20px;overflow:hidden} .faq-item{background:var(--card)} @media(prefers-color-scheme:dark){.faq-item{background:var(--k2)}} .faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 28px;font-size:15px;font-weight:600;color:var(--text);background:none;border:none;cursor:pointer;text-align:left;letter-spacing:-.01em;transition:background .2s;font-family:inherit} .faq-q:hover{background:rgba(0,0,0,.02)} @media(prefers-color-scheme:dark){.faq-q:hover{background:rgba(255,255,255,.03)}} .faq-chev{width:22px;height:22px;border-radius:50%;background:var(--w2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .3s var(--ease),background .2s} @media(prefers-color-scheme:dark){.faq-chev{background:var(--k3)}} .faq-chev svg{width:12px;height:12px;stroke:var(--textm);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .faq-item.open .faq-chev{transform:rotate(180deg);background:var(--y)} .faq-item.open .faq-chev svg{stroke:#000} .faq-a{display:none;padding:0 28px 22px;font-size:14px;color:var(--textm);line-height:1.7} .faq-item.open .faq-a{display:block} /* ── CTA ── */ .cta-sec{background:var(--ygrad);padding:100px 0;position:relative;overflow:hidden} .cta-sec::before{content:'';position:absolute;width:800px;height:800px;border-radius:50%;background:rgba(0,0,0,.05);top:-300px;left:50%;transform:translateX(-50%);pointer-events:none} .cta-inner{text-align:center;position:relative} .cta-title{font-size:clamp(38px,5.5vw,68px);font-weight:800;color:#000;letter-spacing:-.03em;line-height:1.04;text-wrap:balance;margin-bottom:18px} .cta-sub{font-size:18px;color:rgba(0,0,0,.52);margin-bottom:40px} .cta-btns{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin-bottom:32px} .cta-contact-strip{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:20px;margin-top:8px} .cta-contact-link{display:flex;align-items:center;gap:7px;text-decoration:none;font-size:14px;font-weight:600;color:rgba(0,0,0,.6);transition:color .2s;letter-spacing:-.01em} .cta-contact-link:hover{color:#000} .cta-contact-link svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* ── Contact ── */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start} .contact-info-list{display:flex;flex-direction:column;gap:16px;margin-top:32px} .contact-item{display:flex;align-items:flex-start;gap:16px;padding:22px;background:var(--k2);border:1px solid rgba(255,255,255,.07);border-radius:18px;text-decoration:none;transition:border-color .2s} .contact-item:hover{border-color:rgba(255,255,255,.15)} .contact-item-ico{width:44px;height:44px;border-radius:12px;background:var(--y10);display:flex;align-items:center;justify-content:center;flex-shrink:0} .contact-item-ico svg{width:20px;height:20px;stroke:var(--y);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .contact-item-lbl{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:4px} .contact-item-val{font-size:15px;font-weight:600;color:#fff;letter-spacing:-.01em} .contact-item-sub{font-size:12.5px;color:rgba(255,255,255,.35);margin-top:2px} /* ── Callback form ── */ .callback-form{display:flex;flex-direction:column;gap:14px} .field{display:flex;flex-direction:column;gap:6px} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px} .field label{font-size:12px;font-weight:700;color:rgba(255,255,255,.45);letter-spacing:.06em;text-transform:uppercase} .field input,.field select,.field textarea{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:13px 16px;font-size:14.5px;color:#fff;font-family:inherit;transition:border-color .2s,background .2s;outline:none;resize:none;-webkit-appearance:none} .field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.25)} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--y35);background:rgba(255,255,255,.09)} .field select{color:rgba(255,255,255,.7);cursor:pointer} .field select option{background:var(--k2);color:#fff} .field-hp{display:none;position:absolute;left:-9999px} .form-reassure{display:flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(255,255,255,.38);line-height:1.5} .form-reassure svg{width:14px;height:14px;stroke:var(--y);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0} .form-success{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:40px 20px} .form-success-check{width:60px;height:60px;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.25);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;color:#22c55e} .form-success h3{font-size:20px;font-weight:700;color:#fff;letter-spacing:-.02em} .form-success p{font-size:14px;color:rgba(255,255,255,.45)} .form-error{display:flex;align-items:center;gap:8px;padding:12px 16px;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);border-radius:10px;font-size:13px;color:#fca5a5} .form-error.hidden{display:none} /* ── Modal ── */ .modal-overlay{position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s var(--ease)} .modal-overlay.open{opacity:1;pointer-events:all} .modal-box{background:var(--k2);border:1px solid rgba(255,255,255,.1);border-radius:28px;padding:48px;max-width:520px;width:100%;max-height:90vh;overflow-y:auto;position:relative;transform:translateY(24px) scale(.98);transition:transform .4s var(--ease)} .modal-overlay.open .modal-box{transform:translateY(0) scale(1)} .modal-close{position:absolute;top:18px;right:18px;width:32px;height:32px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(255,255,255,.5);font-size:16px;line-height:1;transition:background .2s,color .2s;font-family:inherit} .modal-close:hover{background:rgba(255,255,255,.13);color:#fff} .modal-eyebrow{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--y);margin-bottom:12px} .modal-title{font-size:26px;font-weight:800;color:#fff;letter-spacing:-.03em;margin-bottom:6px} .modal-sub{font-size:14px;color:rgba(255,255,255,.42);margin-bottom:28px;line-height:1.5} /* ── Financement ── */ .fin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .fin-card{background:var(--k2);border:1px solid rgba(255,255,255,.07);border-radius:28px;padding:40px 36px;display:flex;flex-direction:column;gap:18px;transition:border-color .3s,transform .35s var(--ease)} .fin-card:hover{border-color:var(--y20);transform:translateY(-4px)} .fin-ico{width:54px;height:54px;border-radius:14px;background:var(--y10);display:flex;align-items:center;justify-content:center} .fin-ico svg{width:26px;height:26px;stroke:var(--y);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .fin-name{font-size:21px;font-weight:700;color:#fff;letter-spacing:-.02em} .fin-desc{font-size:14px;color:rgba(255,255,255,.45);line-height:1.7;flex:1} .fin-steps{display:flex;flex-direction:column;gap:10px;padding-top:16px;border-top:1px solid rgba(255,255,255,.06)} .fin-step{display:flex;gap:10px;font-size:13px;color:rgba(255,255,255,.5);line-height:1.5} .fin-step b{color:var(--y);font-weight:700;flex-shrink:0} /* ── Pages légales ── */ .legal-content{padding:80px 0 120px} .legal-content h2{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:40px 0 12px;color:var(--text)} .legal-content p,.legal-content li{font-size:15px;color:var(--textm);line-height:1.75;margin-bottom:12px} .legal-content ul{padding-left:22px;margin-bottom:12px} .legal-note{background:var(--y10);border:1px solid var(--y20);border-radius:14px;padding:18px 22px;font-size:14px;line-height:1.6;margin-bottom:32px} /* ── Footer ── */ footer{background:var(--k);padding:80px 0 40px;border-top:1px solid rgba(255,255,255,.06)} .footer-top{display:grid;grid-template-columns:300px repeat(3,1fr);gap:60px;margin-bottom:60px} .footer-brand{display:flex;flex-direction:column;gap:14px} .footer-logo{width:auto;height:44px} .footer-brand .footer-logo{height:32px;align-self:flex-start;opacity:.95} .footer-desc{font-size:13.5px;color:rgba(255,255,255,.6);line-height:1.65;max-width:220px} .footer-col-title{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:18px} .footer-links{list-style:none;display:flex;flex-direction:column;gap:9px} .footer-links a{text-decoration:none;font-size:13.5px;color:rgba(255,255,255,.45);letter-spacing:-.01em;transition:color .2s} .footer-links a:hover{color:rgba(255,255,255,.85)} .footer-contact-btns{display:flex;flex-direction:column;gap:10px;margin-top:4px} .footer-cta-btn{display:flex;align-items:center;gap:8px;text-decoration:none;font-size:13px;font-weight:600;color:rgba(255,255,255,.7);padding:10px 14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:10px;transition:background .2s,color .2s,border-color .2s} .footer-cta-btn:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.18)} /* ── Réseaux sociaux ── */ .social-row{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap} .social-row-center{justify-content:center;margin:0 0 28px} .social-link{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s,transform .2s} .social-link:hover{background:var(--y);border-color:var(--y);transform:translateY(-2px)} .social-link svg{width:18px;height:18px;fill:rgba(255,255,255,.75);transition:fill .2s} .social-link:hover svg{fill:#000} .footer-cta-btn svg{width:14px;height:14px;stroke:var(--y);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0} .footer-bottom{padding-top:28px;border-top:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between} .footer-copy{font-size:12.5px;color:rgba(255,255,255,.5)} .footer-legal{display:flex;gap:20px} .footer-legal a{font-size:12.5px;color:rgba(255,255,255,.5);text-decoration:none;transition:color .2s} .footer-legal a:hover{color:rgba(255,255,255,.85)} /* ── Reveal ── */ .rev{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .rev.in{opacity:1;transform:none} .d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s} .d4{transition-delay:.32s}.d5{transition-delay:.4s}.d6{transition-delay:.48s} @media(prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}.orb1,.orb2{animation:none}.ey-dot{animation:none}} /* ── Sommaire rapide (page formules) ── */ .form-sommaire{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;position:relative;z-index:1} .form-sommaire a{display:inline-flex;align-items:center;padding:9px 16px;border-radius:100px;font-size:13px;font-weight:600;letter-spacing:-.01em;text-decoration:none;color:var(--y);background:var(--y10);border:1px solid var(--y20);transition:background .2s,color .2s,transform .2s} .form-sommaire a:hover{background:var(--y);color:#000;transform:translateY(-1px)} @media(max-width:768px){.form-sommaire a{font-size:12.5px;padding:8px 13px}} /* ── Correctifs mobile ── */ @media(max-width:768px){ /* Boutons longs : autoriser le retour à la ligne (ex. bandeau financement) */ .btn{white-space:normal;text-align:center;line-height:1.35} .form-more .btn{width:100%;justify-content:center} /* Frise des 5 étapes : liste verticale claire sur mobile */ .proc-steps{flex-direction:column;align-items:stretch;gap:10px} .proc-step{display:grid;grid-template-columns:44px 1fr;column-gap:14px;row-gap:2px;align-items:center;justify-items:start;text-align:left;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);transition:border-color .3s} .proc-step.active{border-color:var(--y35)} .proc-node{grid-row:1/3;width:40px;height:40px;font-size:14px} .proc-lbl{font-size:14.5px} .proc-sub{font-size:12.5px;margin-top:0} /* Carrousels (moniteurs + avis) : flèches sous le carrousel, cartes pleine largeur */ .mon-carousel,.avis-carousel{padding:0 0 66px} .mon-track .team-card{flex:0 0 86%} .avis-track .rev-card{flex:0 0 86%} .mon-btn,.avis-btn{top:auto;bottom:0;transform:none} .mon-prev,.avis-prev{left:calc(50% - 54px)} .mon-next,.avis-next{right:calc(50% - 54px)} } /* ── Responsive ── */ @media(max-width:1024px){.team-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:900px){.form-grid{grid-template-columns:1fr 1fr}.fin-grid{grid-template-columns:1fr}.footer-top{grid-template-columns:1fr 1fr;gap:40px}.footer-brand{grid-column:1/-1}} @media(max-width:768px){.wrap{padding:0 20px}.sec{padding:80px 0}.nav-links{display:none}.hero{padding:120px 0 80px}.stats-grid{grid-template-columns:repeat(2,1fr)}.stat{border-right:none;border-bottom:1px solid rgba(255,255,255,.06)}.stat:nth-child(odd){border-right:1px solid rgba(255,255,255,.06)}.stat:nth-child(3),.stat:nth-child(4){border-bottom:none}.form-grid{grid-template-columns:1fr}.why-grid{grid-template-columns:1fr}.proc-steps{gap:28px}.proc-line{display:none}.reviews-grid{grid-template-columns:1fr}.team-grid{grid-template-columns:1fr}.contact-grid{grid-template-columns:1fr;gap:40px}.field-row{grid-template-columns:1fr}.footer-top{grid-template-columns:1fr;gap:32px}.footer-bottom{flex-direction:column;gap:12px;text-align:center}.veh-grid{grid-template-columns:1fr}.sec-hdr-split{flex-direction:column;align-items:flex-start;gap:12px}.modal-box{padding:28px 24px}.cta-contact-strip{flex-direction:column;gap:12px}.hero-strip{flex-direction:column;align-items:flex-start}.page-hero{padding:140px 0 60px}}