:root{--bg:#102139;--card:#1a2f50;--line:#2d4670;--ink:#f5f7fa;--muted:#9aa6b5;--pink:#e93970;--blue:#5cc8f0}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.top{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 4vw;background:rgba(16,33,57,.92);backdrop-filter:blur(8px)}
.logo{text-decoration:none;font-weight:800;letter-spacing:.04em;font-size:1.05rem}
.logo b{color:var(--pink)}
.top nav{display:flex;gap:18px;align-items:center;font-size:.92rem}
.top nav a{text-decoration:none;color:var(--muted)}
.top nav a:hover{color:#fff}
.btn{display:inline-block;background:var(--pink);color:#fff!important;padding:10px 18px;border-radius:50px;font-weight:700;text-decoration:none;border:0;font:inherit;font-weight:700;cursor:pointer}
.btn.ghost{background:rgba(255,255,255,.14)}
.over{color:var(--blue);text-transform:uppercase;letter-spacing:.15em;font-size:.75rem;font-weight:800}
.hero{min-height:60vh;display:flex;align-items:flex-end;padding:8vh 4vw 6vh;background:linear-gradient(90deg,rgba(16,33,57,.96) 30%,rgba(16,33,57,.35)),var(--bgimg) center/cover}
.hero h1{font-size:clamp(1.8rem,4vw,3.2rem);line-height:1.1;max-width:780px;margin:.3em 0}
.hero p{color:#cfd6df;max-width:640px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.profils{display:flex;gap:8px;overflow-x:auto;padding:18px 4vw;scrollbar-width:none}
.profils a{flex:none;padding:8px 16px;border-radius:50px;border:1px solid var(--line);text-decoration:none;font-size:.9rem;color:#cfd6df}
.profils a.on,.profils a:hover{background:#fff;color:var(--bg);border-color:#fff}
.rangee{position:relative;margin:6px 0 26px}
.rh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0 4vw}
.rh h2{font-size:1.2rem;margin:0 0 10px}
.rh a{color:var(--muted);font-size:.85rem;text-decoration:none;white-space:nowrap}
.rh a:hover{color:#fff}
.defile{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 4vw 18px;scroll-padding-left:4vw;scrollbar-width:none}
.defile::-webkit-scrollbar{display:none}
.carte{flex:0 0 clamp(210px,22vw,300px);scroll-snap-align:start;text-decoration:none;background:var(--card);border-radius:10px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.carte:hover{transform:scale(1.04);box-shadow:0 14px 30px rgba(0,0,0,.45)}
.carte .img{position:relative;display:block;aspect-ratio:16/9;background:#22395c}
.carte img{width:100%;height:100%;object-fit:cover;display:block}
.prix{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.78);padding:3px 8px;border-radius:6px;font-size:.75rem;font-weight:700}
.txt{display:block;padding:10px 12px}
.txt strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.9rem;line-height:1.3}
.txt small{display:block;color:var(--muted);margin-top:4px;font-size:.78rem}
.fl{position:absolute;top:calc(50% + 14px);transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:rgba(0,0,0,.7);color:#fff;font-size:26px;line-height:1;cursor:pointer;opacity:0;transition:opacity .2s}
.rangee:hover .fl{opacity:1}
.fl.g{left:10px}.fl.d{right:10px}
@media(hover:none){.fl{display:none}}
.page{padding:24px 4vw 0}
.filtres{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0}
.filtres select,.filtres input{background:var(--card);color:#fff;border:1px solid var(--line);border-radius:8px;padding:9px 12px;font:inherit;font-size:.92rem}
.filtres input{min-width:260px}
.raz{color:var(--muted);font-size:.88rem}
.compte{color:var(--muted)}
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px;padding:0 4vw}
.grille .carte{flex:none}
.pagination{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:24px}
.pagination a{padding:8px 14px;background:var(--card);border-radius:8px;text-decoration:none}
.pagination a[aria-current]{background:var(--pink)}
.video{display:grid;grid-template-columns:1.6fr 1fr;gap:28px;padding:24px 4vw;max-width:1400px;margin:auto;align-items:start}
.video h1{font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.15;margin:.3em 0}
.sous{color:var(--muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.06em}
.lecteur{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.lecteur button{position:absolute;inset:0;padding:0;border:0;background:none;cursor:pointer}
.lecteur img{width:100%;height:100%;object-fit:cover;display:block}
.lecteur button::after{content:"\25B6";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;background:var(--pink);font-size:28px;line-height:76px;text-align:center;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.lecteur iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.puces{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.puces span{background:var(--card);border:1px solid var(--line);border-radius:50px;padding:5px 12px;font-size:.82rem}
.texte{max-width:900px;margin:0 auto;padding:0 4vw 20px;color:#d5dbe3}
.texte h2{color:#fff;font-size:1.3rem;margin-top:1.8em}
.texte li{margin:.4em 0}
details{background:var(--card);border-radius:10px;padding:14px 16px;margin:8px 0}
summary{cursor:pointer;font-weight:700;color:#fff}
.produit{display:flex;gap:16px;background:var(--card);border-radius:12px;padding:16px;margin:26px 0;align-items:center}
.produit img{width:120px;height:120px;object-fit:cover;border-radius:8px;flex:none}
.pied{padding:30px 4vw;color:var(--muted);font-size:.85rem;border-top:1px solid #22395c;margin-top:40px}
.pied a{color:#cfd6df}
@media(max-width:820px){.video{grid-template-columns:1fr}.top nav a:not(.btn){display:none}.hero{min-height:52vh}.filtres input{min-width:0;width:100%}.produit{flex-direction:column;align-items:flex-start}}
.finder{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 4vw 14px;background:#0c1a2e;border-bottom:1px solid #22395c}
.finder .lab{font-weight:800;color:#fff;margin-right:6px;font-size:.95rem}
.finder select,.finder input{background:var(--card);color:#fff;border:1px solid var(--line);border-radius:50px;padding:8px 14px;font:inherit;font-size:.88rem;max-width:230px}
.finder select.on{border-color:var(--pink);background:#3a1f3d}
.finder input{min-width:160px}
.finder .btn{padding:8px 18px;font-size:.88rem}
@media(max-width:820px){.finder{display:grid;grid-template-columns:1fr 1fr}.finder .lab{grid-column:1/-1}.finder select,.finder input{max-width:none;width:100%}.finder input{grid-column:1/2}}
.finder .lab{flex-basis:100%;font-weight:400;color:#cfd6df;font-size:.9rem;line-height:1.45;margin:0 0 6px;max-width:900px}
.finder .lab strong{display:block;color:#fff;font-size:1.05rem;font-weight:800;margin-bottom:2px}
.voir-aussi{display:flex;flex-wrap:wrap;gap:8px;align-items:center;max-width:1400px;margin:0 auto;padding:0 4vw 14px}
.voir-aussi span{color:var(--muted);font-size:.88rem;margin-right:4px}
.voir-aussi a{padding:6px 14px;border-radius:50px;border:1px solid var(--line);text-decoration:none;font-size:.86rem;background:var(--card)}
.voir-aussi a:hover{border-color:var(--pink)}
.plan{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px;margin-bottom:26px}
.plan strong{display:block;color:#fff;margin-bottom:8px}
.plan a{display:block;color:#cfd6df;text-decoration:none;padding:2px 0;font-size:.86rem}
.plan a:hover{color:#fff}
.hero h1.over{font-size:.75rem;line-height:1.4;margin:0;max-width:none}
.hero .titre{font-size:clamp(1.8rem,4vw,3.2rem);line-height:1.1;max-width:780px;margin:.3em 0;font-weight:800}

/* Autres formules possibles */
.alternatives{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:0 0 24px}
.produit.alt{display:flex;gap:16px;align-items:center;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.produit.alt:hover{border-color:#e93970;transform:translateY(-2px)}
.produit.alt img{flex:0 0 96px;width:96px;height:96px;object-fit:cover;border-radius:8px}
.produit.alt .etiquette{display:inline-block;background:#e93970;color:#fff;font-size:.78em;font-weight:700;padding:3px 10px;border-radius:20px;margin-bottom:6px}
.produit.alt strong{display:block;line-height:1.3}
.produit.alt small{display:block;color:#9fb3d1;margin-top:2px}
.produit.alt .lien{display:block;color:#5cc8f0;margin-top:6px;font-weight:600}
.realisation-lien{margin:0 0 24px}

/* Barre de recherche */
.recherche{padding:20px 4vw;background:linear-gradient(180deg,#132744,#102139);border-bottom:1px solid #22395c}.recherche.grande{padding:38px 4vw 28px;text-align:center}.rq-titre{display:block;font-size:clamp(22px,3.2vw,34px);font-weight:800;margin:0 0 16px;color:#fff}.rq-champ{display:flex;max-width:820px;margin:0 auto;background:#fff;border-radius:50px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.35)}.recherche:not(.grande) .rq-champ{margin:0;max-width:720px}.rq-champ input{flex:1;min-width:0;border:0;background:transparent;font-size:clamp(16px,2vw,20px);padding:12px 18px;color:#102139;outline:none}.rq-champ .btn{border-radius:40px;padding:12px 26px;white-space:nowrap}.rq-sugg{margin:14px auto 0;max-width:820px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;font-size:14px}.rq-sugg span{color:#b9c8de;padding:6px 2px}.rq-sugg a{color:#fff;border:1px solid #2d4670;border-radius:30px;padding:6px 14px;text-decoration:none}.rq-sugg a:hover{border-color:#e93970}@media(max-width:520px){.rq-champ .btn{padding:12px 16px}}
.rq-titre{margin-bottom:8px}.rq-aide{max-width:680px;margin:0 auto 18px;color:#b9c8de;font-size:clamp(14px,1.6vw,16px);line-height:1.5}