/* ===== PROJET 3 — couche design ===== */
/* Hero : soleil couchant + skyline */
.hero{isolation:isolate}
.hero-sun{position:absolute;left:-10%;bottom:-30%;width:70vw;height:70vw;max-width:900px;max-height:900px;border-radius:50%;background:radial-gradient(circle,rgba(255,177,74,.35),rgba(240,106,0,.12) 45%,transparent 70%);filter:blur(10px);z-index:0;animation:sunPulse 9s ease-in-out infinite alternate;pointer-events:none}
@keyframes sunPulse{from{transform:translateY(0) scale(1);opacity:.75}to{transform:translateY(-30px) scale(1.06);opacity:1}}
.hero-sky{position:absolute;left:0;right:0;bottom:-2px;height:150px;z-index:1;pointer-events:none;color:#14203f;opacity:.10}
.hero-sky svg{width:100%;height:100%;display:block}
.hero-stars i{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:0;animation:twk 4s infinite;z-index:1;pointer-events:none}
@keyframes twk{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:.8;transform:scale(1)}}
body.dark .hero-sky{color:#000;opacity:.45}
/* Ornement zellige sous les titres */
.head h2::after{content:'';display:block;width:150px;height:18px;margin:.8rem auto 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 18'%3E%3Cpath d='M0 9h55M95 9h55' stroke='%23e0a100' stroke-width='1.5'/%3E%3Cg transform='translate(75 9)'%3E%3Crect x='-6' y='-6' width='12' height='12' fill='none' stroke='%23f06a00' stroke-width='1.6'/%3E%3Crect x='-6' y='-6' width='12' height='12' fill='none' stroke='%23e0a100' stroke-width='1.6' transform='rotate(45)'/%3E%3Ccircle r='2' fill='%23f06a00'/%3E%3C/g%3E%3Ccircle cx='62' cy='9' r='1.6' fill='%23e0a100'/%3E%3Ccircle cx='88' cy='9' r='1.6' fill='%23e0a100'/%3E%3C/svg%3E") center/contain no-repeat}
/* Séparateur arches marocaines */
.arch-sep{height:46px;margin-top:-46px;position:relative;z-index:2;pointer-events:none;color:var(--navy2)}
.arch-sep svg{width:100%;height:100%;display:block}
/* Cartes voitures : glow + badges */
.car{transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.car:hover{transform:translateY(-8px);box-shadow:0 30px 60px -25px rgba(240,106,0,.45),0 0 0 1px rgba(240,106,0,.25)}
.car .img img{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.car:hover .img img{transform:scale(1.07) rotate(-1.5deg) translateY(-4px)}
.bdg{position:absolute;right:.7rem;bottom:.7rem;z-index:3;font-size:.7rem;font-weight:700;padding:.3rem .65rem;border-radius:99px;color:#fff;box-shadow:0 6px 16px -6px rgba(0,0,0,.35);letter-spacing:.2px}
.bdg-pop{background:linear-gradient(135deg,#ff6a00,#ff2d55)}
.bdg-best{background:linear-gradient(135deg,#16a34a,#0ea5a4)}
.bdg-new{background:linear-gradient(135deg,#7c3aed,#1b4fd8)}
.bdg-lux{background:linear-gradient(135deg,#14203f,#3b4a7a);color:#ffd27a}
.bdg-fam{background:linear-gradient(135deg,#e0a100,#f06a00)}
/* Boutons : reflet doré */
.btn-o{position:relative;overflow:hidden}
.btn-o::after{content:'';position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:none}
.btn-o:hover::after{left:130%;transition:left .8s ease}
/* Timeline : ligne animée */
.timeline{position:relative}
.timeline::before{content:'';position:absolute;left:8%;right:8%;top:38px;height:3px;background:rgba(240,106,0,.15);border-radius:3px;z-index:0}
.timeline::after{content:'';position:absolute;left:8%;top:38px;height:3px;width:0;background:linear-gradient(90deg,var(--gold),var(--orange));border-radius:3px;z-index:0;transition:width 2.2s cubic-bezier(.4,0,.2,1)}
.timeline.go::after{width:84%}
.timeline .tl{position:relative;z-index:1}
@media(max-width:900px){.timeline::before,.timeline::after{display:none}}
/* Carte des livraisons */
.mapsec{padding:5rem 0}
.map-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:2.5rem;align-items:center}
.mmap{background:linear-gradient(160deg,#14203f,#1d2c57);border-radius:28px;padding:1.2rem;box-shadow:0 30px 70px -35px rgba(20,32,63,.7);position:relative;overflow:hidden}
.mmap::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:18px 18px}
.mmap svg{width:100%;height:auto;display:block;position:relative}
.mroute{fill:none;stroke:url(#rg);stroke-width:2.4;stroke-dasharray:6 7;opacity:.55;animation:dash 2.5s linear infinite}
@keyframes dash{to{stroke-dashoffset:-26}}
.mcity{cursor:pointer}
.mcity circle.dot{fill:#ffb14a;stroke:#fff;stroke-width:2;transition:r .25s}
.mcity circle.pulse{fill:none;stroke:#ffb14a;stroke-width:2;opacity:0}
.mcity:hover circle.dot,.mcity.on circle.dot{r:9}
.mcity.on circle.pulse{animation:mp 1.6s infinite}
@keyframes mp{0%{r:8;opacity:.9}100%{r:24;opacity:0}}
.mcity text{fill:#fff;font:600 13px Poppins,sans-serif;paint-order:stroke;stroke:#14203f;stroke-width:4px}
.mhome circle{fill:var(--orange)}.mhome text{font-size:15px;fill:#ffd27a}
.mlbl{fill:rgba(255,255,255,.35);font:italic 13px 'Playfair Display',serif;letter-spacing:3px}
.matlas{fill:none;stroke:rgba(255,210,122,.35);stroke-width:1.5}
.minfo{background:#fff;border-radius:22px;padding:1.6rem;box-shadow:0 20px 50px -30px rgba(20,32,63,.4);border:1px solid rgba(20,32,63,.06)}
.minfo h3{font-family:'Playfair Display',serif;font-size:1.6rem;margin:.2rem 0 .4rem}
.minfo .mrow{display:flex;gap:1.2rem;margin:1rem 0;flex-wrap:wrap}
.minfo .mrow div{background:#fbf6ee;border-radius:14px;padding:.7rem 1rem;flex:1;min-width:110px}
.minfo .mrow small{display:block;color:var(--mut);font-size:.75rem}.minfo .mrow b{font-size:1.15rem;color:var(--orange)}
.mlist{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.mlist button{border:1px solid rgba(20,32,63,.12);background:#fff;border-radius:99px;padding:.4rem .9rem;font:500 .85rem Poppins,sans-serif;cursor:pointer;color:var(--txt);transition:.25s}
.mlist button.on,.mlist button:hover{background:linear-gradient(135deg,var(--gold),var(--orange));color:#fff;border-color:transparent}
@media(max-width:900px){.map-wrap{grid-template-columns:1fr}}
body.dark .minfo,body.dark .mlist button{background:#16214a;color:var(--txt)}body.dark .minfo .mrow div{background:#0f1733}
/* Footer skyline */
.ft-sky{height:clamp(90px,14vw,180px);color:#14203f;margin-bottom:-1px;position:relative;z-index:1;pointer-events:none}
.ft-sky svg{width:100%;height:100%;display:block}
[dir=rtl] .bdg{right:auto;left:.7rem}
@media (prefers-reduced-motion:reduce){.hero-sun,.hero-stars i,.mroute,.mcity.on circle.pulse{animation:none}}
section.alt,section.mapsec{position:relative}.arch-sep{position:absolute;left:0;right:0;top:-45px;margin:0}