/* HRL Design v6 — feuille de style principale.
   Identité : fond #101014, violet #a66be8, titres Anton, coins arrondis. */

/* ---------- Jetons ---------- */
:root{
  --fond:#101014;
  --fond-2:#15141b;
  --panneau:#1a1920;
  --panneau-2:#211f29;
  --ligne:rgba(255,255,255,.09);
  --ligne-forte:rgba(255,255,255,.18);
  --texte:#f3f2ef;
  --texte-doux:#b4afbd;
  --texte-pale:#8d8896;
  --violet:#a66be8;
  --violet-clair:#c9a3f5;
  --violet-profond:#7a3fc4;
  --violet-voile:rgba(166,107,232,.14);
  --cyan:#5fe0ee;
  --danger:#ff8a8a;
  --succes:#8de0a8;
  --police-titre:'Anton','Arial Narrow',Impact,sans-serif;
  --police-texte:'DM Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --marge:clamp(20px,5.5vw,88px);
  --section:clamp(80px,11vw,168px);
  --rayon:20px;
  --rayon-s:12px;
  --rayon-l:28px;
  --ease:cubic-bezier(.22,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --entete:76px;
  color-scheme:dark;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--entete) + 24px)}
body{margin:0;background:var(--fond);color:var(--texte);font:400 16px/1.6 var(--police-texte);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul[class],ol[class]{list-style:none;margin:0;padding:0}
::selection{background:var(--violet);color:#120c19}
:focus-visible{outline:2px solid var(--violet-clair);outline-offset:4px;border-radius:6px}
.visuellement-cache{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lien-evitement{position:fixed;left:16px;top:-80px;z-index:9999;padding:12px 18px;border-radius:999px;background:var(--violet);color:#120c19;font-weight:700;transition:top .2s}
.lien-evitement:focus{top:16px}
[hidden]{display:none!important}

/* Grain photographique très léger sur tout le site. */
body::after{content:"";position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Typographie ---------- */
.titre-xl,.titre-l,.titre-m,.titre-s,h1,h2,h3{font-family:var(--police-titre);font-weight:400;text-transform:uppercase;letter-spacing:-.005em;line-height:.9}
.titre-xl{font-size:clamp(3.4rem,10.5vw,10.5rem);line-height:.84}
.titre-l{font-size:clamp(2.9rem,7.4vw,7.4rem);line-height:.86}
.titre-m{font-size:clamp(2.2rem,4.6vw,4.4rem);line-height:.92}
.titre-s{font-size:clamp(1.5rem,2.3vw,2.1rem);line-height:1}
.accent{color:var(--violet)}
em.accent,.titre-xl em,.titre-l em,.titre-m em{font-style:normal;color:var(--violet)}
.chapo{font-size:clamp(1.05rem,1.35vw,1.25rem);line-height:1.55;color:var(--texte-doux);max-width:36ch}
.texte-doux{color:var(--texte-doux)}
.petit{font-size:.875rem;line-height:1.55;color:var(--texte-pale)}
.kicker{display:inline-flex;align-items:center;gap:14px;font:600 .75rem/1.3 var(--police-texte);letter-spacing:.2em;text-transform:uppercase;color:var(--texte-doux)}
.kicker b{font-weight:600;color:var(--violet);font-variant-numeric:tabular-nums}
.kicker::before{content:"";width:28px;height:1px;background:currentColor;opacity:.55}
.kicker--sans-trait::before{display:none}
.chiffres{font-variant-numeric:tabular-nums}

/* Lignes de titre qui montent depuis un masque. */
.l{display:block;overflow:hidden;padding:.1em 0 .06em;margin:-.1em 0 -.06em}
.l>span{display:block;transform:translateY(105%);transition:transform 1.1s var(--ease-out)}
.est-visible .l>span,.l.est-visible>span{transform:none}
.l:nth-child(2)>span{transition-delay:.08s}.l:nth-child(3)>span{transition-delay:.16s}.l:nth-child(4)>span{transition-delay:.24s}
[data-apparition]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform 1s var(--ease-out)}
[data-apparition].est-visible{opacity:1;transform:none}
[data-apparition="2"]{transition-delay:.1s}[data-apparition="3"]{transition-delay:.2s}[data-apparition="4"]{transition-delay:.3s}
.sans-js .l>span,.sans-js [data-apparition]{transform:none;opacity:1}

/* ---------- Boutons ---------- */
.bouton{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:52px;padding:8px 8px 8px 24px;border:1px solid transparent;border-radius:999px;background:var(--violet);color:#140d1d;font:700 .8125rem/1.2 var(--police-texte);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;isolation:isolate;overflow:hidden;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s,transform .4s var(--ease-out);will-change:transform}
.bouton::before{content:"";position:absolute;inset:0;z-index:-1;background:#f3f2ef;transform:translateY(101%);border-radius:inherit;transition:transform .5s var(--ease-out)}
.bouton:hover::before{transform:none}
.bouton .fleche{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:#140d1d;color:var(--texte);font-size:15px;transition:transform .4s var(--ease-out)}
.bouton:hover .fleche{transform:rotate(-45deg)}
.bouton--fantome{background:transparent;color:var(--texte);border-color:var(--ligne-forte)}
.bouton--fantome::before{background:var(--texte)}
.bouton--fantome:hover{color:#140d1d}
.bouton--fantome .fleche{background:rgba(255,255,255,.08)}
.bouton--fantome:hover .fleche{background:#140d1d}
.bouton--plein{width:100%}
.bouton--compact{min-height:44px;padding-left:18px;font-size:.75rem}
.bouton--compact .fleche{flex-basis:30px;width:30px;height:30px}
.bouton[disabled],.bouton[aria-disabled="true"]{opacity:.5;pointer-events:none}
.lien-fleche{display:inline-flex;align-items:center;gap:12px;padding-bottom:6px;border-bottom:1px solid var(--ligne-forte);font:600 .8125rem/1.3 var(--police-texte);letter-spacing:.08em;text-transform:uppercase;transition:border-color .3s,color .3s}
.lien-fleche span{color:var(--violet);transition:transform .35s var(--ease-out)}
.lien-fleche:hover{border-color:var(--violet);color:var(--violet-clair)}
.lien-fleche:hover span{transform:translateX(5px)}
.lien-texte{color:var(--violet-clair);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.lien-texte:hover{color:#fff}

/* ---------- Bandeau d'annonce ---------- */
.annonce{position:relative;z-index:60;display:flex;justify-content:center;align-items:center;gap:10px;min-height:36px;padding:8px var(--marge);background:var(--violet);color:#160e20;font:700 .6875rem/1.3 var(--police-texte);letter-spacing:.12em;text-transform:uppercase;text-align:center}
.annonce__point{flex:none;width:6px;height:6px;border-radius:50%;background:#160e20;animation:pouls 2.4s infinite}
.annonce__sep{opacity:.5}
@keyframes pouls{50%{opacity:.25}}

/* ---------- En-tête ---------- */
.entete{position:sticky;top:0;z-index:50;height:var(--entete);display:flex;align-items:center;gap:28px;padding:0 var(--marge);background:rgba(16,16,20,.72);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid transparent;transition:transform .5s var(--ease),border-color .3s,background .3s}
.entete.est-defile{border-color:var(--ligne);background:rgba(16,16,20,.86)}
.entete.est-cache{transform:translateY(-100%)}
.entete__logo{flex:0 0 auto;display:block;width:104px}
.entete__logo img{width:100%;height:auto}
.nav{margin-left:auto}
.nav__liste{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px)}
.nav__lien,.nav__bouton{position:relative;display:inline-flex;align-items:center;gap:6px;padding:10px 0;border:0;background:none;color:var(--texte-doux);font:500 .875rem/1 var(--police-texte);letter-spacing:.02em;transition:color .25s}
.nav__lien::after,.nav__bouton::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--violet);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
.nav__lien:hover,.nav__bouton:hover,.nav__bouton[aria-expanded="true"],.nav__lien[aria-current="page"]{color:var(--texte)}
.nav__lien:hover::after,.nav__lien[aria-current="page"]::after,.nav__bouton[aria-expanded="true"]::after{transform:scaleX(1);transform-origin:left}
.nav__bouton svg{width:10px;height:10px;transition:transform .3s var(--ease)}
.nav__bouton[aria-expanded="true"] svg{transform:rotate(180deg)}
.entete__actions{display:flex;align-items:center;gap:6px}
.icone-bouton{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--texte);transition:background .25s,color .25s}
.icone-bouton:hover{background:rgba(255,255,255,.07);color:var(--violet-clair)}
.icone-bouton svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.panier-compte{position:absolute;top:5px;right:3px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--violet);color:#140d1d;font:700 .6875rem/1 var(--police-texte);transform:scale(0);transition:transform .35s var(--ease-out)}
.panier-compte.a-articles{transform:scale(1)}
.panier-compte.pulse{animation:compte .6s var(--ease-out)}
@keyframes compte{40%{transform:scale(1.45)}}
.burger{display:none}

/* Méga-menus */
.mega{position:absolute;left:var(--marge);right:var(--marge);top:calc(var(--entete) - 8px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:14px;border:1px solid var(--ligne);border-radius:var(--rayon-l);background:rgba(22,20,28,.97);box-shadow:0 40px 80px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .3s var(--ease),transform .45s var(--ease-out),visibility .3s}
.mega--3{grid-template-columns:repeat(3,minmax(0,1fr));left:50%;right:auto;width:min(880px,calc(100vw - 2 * var(--marge)));transform:translate(-50%,-10px)}
.nav__menu.est-ouvert .mega{opacity:1;visibility:visible;transform:none}
.nav__menu.est-ouvert .mega--3{transform:translate(-50%,0)}
.mega--2{grid-template-columns:repeat(2,minmax(0,1fr));width:min(600px,calc(100vw - 2 * var(--marge)))}
.mega__carte{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--rayon);overflow:hidden;background:var(--panneau);isolation:isolate}
.mega__carte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.68) saturate(.95);transition:transform .9s var(--ease-out),filter .5s}
.mega__carte:hover img,.mega__carte:focus-visible img{transform:scale(1.06);filter:brightness(.82)}
.mega__texte{position:absolute;inset:auto 0 0;padding:16px;background:linear-gradient(0deg,rgba(8,7,12,.92),transparent)}
.mega__texte small{display:block;font:700 .625rem/1 var(--police-texte);letter-spacing:.18em;color:var(--violet-clair)}
.mega__texte strong{display:block;margin:7px 0 0;font:400 1.6rem/1 var(--police-titre);text-transform:uppercase}
.mega__texte span{display:inline-flex;gap:8px;margin-top:10px;font-size:.75rem;color:var(--texte-doux)}
.mega__carte:hover .mega__texte span{color:var(--texte)}

/* ---------- Mise en page ---------- */
.section{position:relative;padding:var(--section) var(--marge)}
.section--serree{padding-block:clamp(56px,7vw,104px)}
.section--claire{background:#efedf2;color:#16141b}
.section--claire .kicker{color:#5e5868}
.section--claire .chapo,.section--claire .texte-doux{color:#4f4a58}
.conteneur{width:min(1320px,100%);margin-inline:auto}
.entete-section{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:end;gap:40px;margin-bottom:clamp(40px,5vw,72px)}
.entete-section .titre-l,.entete-section .titre-m{margin-top:22px}
.entete-section>p{justify-self:end}
.ligne-sep{height:1px;background:var(--ligne);border:0;margin:0}
.grille-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.grille-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}

/* ---------- Hero piloté par le scroll ---------- */
.hero{position:relative;background:var(--fond)}
.hero__piste{position:relative}
/* Vidéo en boucle, en pleine page : elle couvre tout l'écran, cadrée sur la moto. */
.hero__scene{position:relative;height:calc(100vh - var(--hero-haut,0px));height:calc(100svh - var(--hero-haut,0px));min-height:560px;overflow:hidden;isolation:isolate;background:#0e0d12}
.hero__media{position:absolute;inset:0;z-index:-2;transform:scale(1.025)}/* masque le liseré sombre du bord de la vidéo source */
@media (min-width:961px){
  .hero__media video,.hero__media img{object-position:50% 50%}
  .hero__voile{background:linear-gradient(90deg,rgba(10,9,14,.82) 0%,rgba(10,9,14,.45) 35%,rgba(10,9,14,0) 65%),linear-gradient(0deg,rgba(10,9,14,.8) 0%,rgba(10,9,14,0) 30%)}
}
.etape-carte__grand{display:flex;align-items:flex-end;aspect-ratio:16/9;padding:22px;background:radial-gradient(circle at 85% 15%,rgba(166,107,232,.22),transparent 60%),#121117;border-bottom:1px solid var(--ligne);font:400 clamp(4.5rem,7vw,7rem)/.8 var(--police-titre);color:transparent;-webkit-text-stroke:1px rgba(201,163,245,.55);transition:color .5s var(--ease)}
.etape-carte:hover .etape-carte__grand{color:var(--violet)}
.hero__media video,.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.hero__media img{opacity:0;transition:opacity .4s}
.hero.video-indisponible .hero__media img{opacity:1}
.hero__voile{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,9,14,.92) 0%,rgba(10,9,14,.66) 28%,rgba(10,9,14,0) 58%),linear-gradient(0deg,rgba(10,9,14,.85) 0%,rgba(10,9,14,0) 34%),linear-gradient(180deg,rgba(10,9,14,.55) 0%,rgba(10,9,14,0) 22%)}
.hero__contenu{position:absolute;left:var(--marge);bottom:clamp(70px,12vh,140px);width:min(760px,calc(100% - 2 * var(--marge)))}
.hero__titre{margin:22px 0 26px;font-size:clamp(3.4rem,7vw,8rem);line-height:.88}
.hero__titre .l>span{transition-duration:1.3s}
.hero__titre .ligne-titre{transition:color .6s var(--ease),opacity .6s var(--ease)}
.hero__titre[data-actif] .ligne-titre{opacity:.32}
.hero__titre[data-actif="0"] .ligne-titre:nth-child(1),.hero__titre[data-actif="1"] .ligne-titre:nth-child(2),.hero__titre[data-actif="2"] .ligne-titre:nth-child(3){opacity:1}
.hero__titre .ligne-titre--accent>span{color:var(--violet)}
.hero__texte{max-width:430px;color:#d4d0db;font-size:1.0625rem;line-height:1.55}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__etapes{position:absolute;left:var(--marge);right:var(--marge);bottom:calc(clamp(64px,9vh,92px) + 14px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hero__etape{display:flex;align-items:baseline;gap:10px;color:var(--texte-pale);font:500 .8125rem/1.3 var(--police-texte);transition:color .5s var(--ease)}
.hero__etape b{font-weight:600;font-variant-numeric:tabular-nums;color:inherit}
.hero__etape.est-active{color:var(--texte)}
.hero__etape.est-active b{color:var(--violet)}
.hero__etape.est-faite{color:var(--texte-doux)}
.hero__progression{position:absolute;left:var(--marge);right:var(--marge);bottom:clamp(64px,9vh,92px);height:2px;background:rgba(255,255,255,.14);border-radius:2px;overflow:hidden}
.hero__progression span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--violet-profond),var(--violet),var(--violet-clair));transform:scaleX(var(--hp,0));transform-origin:left}
.hero__defiler{position:absolute;left:var(--marge);bottom:clamp(30px,4.5vh,52px);display:flex;align-items:center;gap:10px;color:var(--texte-pale);font:600 .6875rem/1 var(--police-texte);letter-spacing:.18em;text-transform:uppercase;transition:opacity .5s}
.hero__defiler i{display:block;width:1px;height:14px;background:var(--violet);animation:defiler 1.6s var(--ease) infinite}
@keyframes defiler{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.hero__compteur{position:absolute;right:var(--marge);bottom:clamp(30px,4.5vh,52px);color:var(--texte-pale);font:600 .6875rem/1 var(--police-texte);letter-spacing:.18em;font-variant-numeric:tabular-nums}
@media (min-width:961px){.hero__compteur{display:none}}

/* ---------- Bandeau de marques ---------- */
.marques{overflow:hidden;padding:26px 0;border-block:1px solid var(--ligne);background:var(--fond)}
.marques__piste{display:flex;width:max-content;animation:marques 40s linear infinite}
.marques:hover .marques__piste{animation-play-state:paused}
/* Marques rapprochées, séparées par des barres obliques. */
.marques__groupe{display:flex;align-items:center;gap:7px;padding-right:7px;font:400 clamp(1.4rem,2.2vw,2rem)/1 var(--police-titre);text-transform:uppercase;color:#cfcad6}
.marques__groupe i{font-style:normal;color:var(--violet)}
.marques__groupe i::before{content:"/"}
@keyframes marques{to{transform:translateX(-50%)}}

/* ---------- Comment ça marche ---------- */
.etapes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.etape-carte{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:var(--rayon);background:var(--fond-2);overflow:hidden;transition:transform .6s var(--ease-out)}
.etape-carte:hover{transform:translateY(-6px)}
.etape-carte__image{aspect-ratio:16/10;overflow:hidden;background:#0c0b10}
.etape-carte__image img{width:100%;height:100%;object-fit:cover;object-position:60% 55%;transform:scale(1.25);transition:transform 1.2s var(--ease-out)}
.etape-carte:hover .etape-carte__image img{transform:scale(1.32)}
.etape-carte__texte{padding:22px 22px 26px}
/* Étapes de l'accueil sans encadré : ni fond, ni trait de séparation, seulement le numéro et le texte. */
.etapes{gap:44px 32px}
.etapes .etape-carte{background:none;border-radius:0;overflow:visible}
.etapes .etape-carte__grand{aspect-ratio:auto;background:none;border-bottom:0;padding:6px 0 0;line-height:1;overflow:visible}
.etapes .etape-carte__texte{padding:18px 0 0}
.etape-carte__num{display:block;margin-bottom:18px;font:600 .75rem/1 var(--police-texte);letter-spacing:.18em;color:var(--violet)}
.etape-carte h3{font-size:clamp(1.6rem,2.2vw,2.1rem);line-height:.95;margin-bottom:12px}
.etape-carte p{color:var(--texte-doux);font-size:.9375rem;line-height:1.55}
.etape-carte p a{color:var(--violet-clair);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;white-space:nowrap}
.etape-carte p a:hover{text-decoration-thickness:2px}
.etapes__note{margin-top:22px;font-size:.75rem;color:var(--texte-pale)}

/* ---------- Trois chemins ---------- */
.chemins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.chemin{position:relative;display:flex;flex-direction:column;min-height:620px;border-radius:var(--rayon-l);overflow:hidden;isolation:isolate;background:var(--panneau);color:var(--texte)}
.chemin--noir{background:#000}
.chemin--noir::after{display:none}
.chemin__photo{position:absolute;inset:0;z-index:-2}
.chemin__photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.4s var(--ease-out)}
.chemin:hover .chemin__photo img{transform:scale(1.1)}
.chemin::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,11,16,.25) 0%,rgba(12,11,16,.1) 30%,rgba(12,11,16,.88) 62%,rgba(12,11,16,.97) 100%)}
.chemin__haut{display:flex;justify-content:space-between;align-items:center;padding:22px 24px}
.pastille{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(18,15,24,.55);backdrop-filter:blur(10px);font:600 .6875rem/1.2 var(--police-texte);letter-spacing:.12em;text-transform:uppercase}
.chemin__num{font:400 1.2rem/1 var(--police-titre);color:var(--violet-clair)}
.chemin__bas{margin-top:auto;padding:0 24px 24px}
.chemin h3{font-size:clamp(2rem,2.8vw,2.7rem);margin-bottom:14px}
.chemin p{color:#d6d2dd;font-size:.9875rem;line-height:1.5;margin-bottom:22px}
.chemin__pied{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16)}
.prix-depart small{display:block;font:600 .6875rem/1 var(--police-texte);letter-spacing:.14em;text-transform:uppercase;color:var(--texte-doux)}
.prix-depart strong{display:block;margin-top:8px;font:400 2.1rem/1 var(--police-titre);color:var(--texte)}
.prix-depart em{display:block;margin-top:6px;font-style:normal;font-size:.75rem;color:var(--texte-doux)}
.chemins__bandeau{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:20px;border:1px solid var(--ligne);border-radius:var(--rayon);overflow:hidden;background:var(--fond-2)}
.repere{padding:26px 28px}
.repere+.repere{border-left:1px solid var(--ligne)}
.repere small{display:block;font:600 .6875rem/1 var(--police-texte);letter-spacing:.16em;text-transform:uppercase;color:var(--texte-pale)}
.repere strong{display:block;margin:16px 0 6px;font:400 clamp(2rem,3.4vw,3.2rem)/1 var(--police-titre);text-transform:uppercase}
.repere:first-child strong{color:var(--violet)}
.repere p{font-size:.875rem;color:var(--texte-doux)}
.bande-lien{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;padding:22px 28px;border-radius:var(--rayon);background:linear-gradient(100deg,#251a33,#17151d 70%);border:1px solid rgba(166,107,232,.3)}
.bande-lien p{color:var(--texte-doux)}
.bande-lien strong{color:var(--texte)}

/* ---------- Finitions ---------- */
.finitions{overflow:hidden}
.finitions__fond{position:absolute;inset:0 0 auto;height:min(760px,90vh);z-index:-1;opacity:.5;-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent)}
.finitions__fond video,.finitions__fond img{width:100%;height:100%;object-fit:cover}
.finitions__fond::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--fond) 0%,rgba(16,16,20,.6) 50%,var(--fond) 100%)}
.finitions{isolation:isolate}
.finitions-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,28px);perspective:1200px}
.finition{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;position:relative;display:block;margin:0;transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .5s var(--ease-out)}
.finition.est-survol{transition:transform .12s linear}
.finition__visuel{position:relative;aspect-ratio:1;border-radius:var(--rayon-l);overflow:hidden;background:#0c0b10;border:1px solid var(--ligne);transition:border-color .4s,box-shadow .5s}
.finition:hover .finition__visuel{border-color:rgba(201,163,245,.6);box-shadow:0 30px 60px rgba(0,0,0,.45),0 0 60px rgba(166,107,232,.14)}
.finition__visuel img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .8s var(--ease-out)}
.finition:hover .finition__visuel img{transform:scale(1.07)}
.finition__reflet{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.38),transparent 42%);mix-blend-mode:soft-light;transition:opacity .4s}
.finition:hover .finition__reflet{opacity:1}
.finition--speciale .finition__reflet{background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.4),transparent 38%),conic-gradient(from calc(var(--ry) * 8) at var(--mx) var(--my),rgba(255,90,200,.35),rgba(90,220,255,.35),rgba(150,255,150,.3),rgba(255,230,90,.3),rgba(255,90,200,.35));mix-blend-mode:color-dodge}
.finition figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:18px 4px 0}
.finition h3{font-size:1.75rem;line-height:1}
.finition p{margin-top:6px;font-size:.9375rem;color:var(--texte-doux)}
.finition .etiquette{flex:none}
.etiquette{display:inline-block;padding:5px 10px;border-radius:999px;background:var(--violet-voile);color:var(--violet-clair);font:600 .6875rem/1.2 var(--police-texte);letter-spacing:.06em;white-space:nowrap}
.etiquette--neutre{background:rgba(255,255,255,.07);color:var(--texte-doux)}
/* Finitions comme en v5 : tuiles carrées, inclinaison 3D, image et reflet qui suivent le curseur. */
.finish-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px;perspective:1000px;align-items:stretch}
.finish-card{min-width:0;margin:0}
.finish-card[data-finish]{--tilt-x:0deg;--tilt-y:0deg;transform-style:preserve-3d;will-change:transform;transform:perspective(900px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x));transition:transform .16s cubic-bezier(.2,.75,.25,1)}
.finish-swatch{position:relative;width:100%;aspect-ratio:1/1;border-radius:26px;overflow:hidden;background:#19151f;border:1px solid rgba(193,157,231,.42);transform:translateZ(15px);transition:border-color .2s,box-shadow .2s}
.finish-card[data-finish]:hover .finish-swatch{border-color:#bd90f2;box-shadow:0 24px 48px rgba(0,0,0,.38)}
.finish-swatch img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;background:#111015;transition:transform .22s cubic-bezier(.2,.75,.25,1);will-change:transform}
.finish-card:hover .finish-swatch img{transform:scale(1.045) translate3d(var(--image-x,0px),var(--image-y,0px),0)}
.finish-card h3{font-size:25px;line-height:1.1;margin:18px 0 8px;color:#f4eefb;transition:color .2s}
.finish-card[data-finish]:hover h3{color:#c6a2f1}
.finish-card p{margin:0;color:#c4bfcc;font-size:1rem;line-height:1.35}
@media (max-width:900px){.finish-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}}
@media (max-width:680px){.finish-swatch{border-radius:21px}.finish-card h3{font-size:22px;margin-top:12px}.finish-card p{font-size:.875rem}}
@media (prefers-reduced-motion:reduce){.finish-card[data-finish],.finish-swatch img{transition:none!important}}
/* Accueil : moins d'espace vide entre les rubriques (environ deux fois moins qu'avant). */
.page-accueil main>.section{padding-block:clamp(36px,4.5vw,72px)}
.page-accueil main>.section[style*="padding-top:0"]{padding-top:0}
.page-accueil .entete-section{margin-bottom:clamp(26px,3.2vw,48px)}
/* Accueil : prix clairs (ce qui est compris, comparatif semi perso / sur mesure, exemple de prix final). */
.prix-clair{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(20px,3vw,40px);margin-top:20px;padding:clamp(22px,3.2vw,36px);border:1px solid var(--ligne);border-radius:var(--rayon-l);background:var(--fond-2)}
.prix-clair h3{margin-bottom:16px;font:600 .75rem/1 var(--police-texte);letter-spacing:.16em;text-transform:uppercase;color:var(--violet-clair)}
.liste-coche{display:grid;gap:10px;margin:0 0 18px;padding:0;list-style:none}
.liste-coche li{position:relative;padding-left:26px;font-size:.9375rem;line-height:1.45}
.liste-coche li::before{content:"✓";position:absolute;left:0;top:0;color:var(--violet-clair);font-weight:700}
.comparatif{display:grid;border:1px solid var(--ligne);border-radius:var(--rayon);overflow:hidden;font-size:.9375rem}
.comparatif>div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr)}
.comparatif>div+div{border-top:1px solid var(--ligne)}
.comparatif span{padding:11px 14px;line-height:1.35}
.comparatif [role="rowheader"]{color:var(--texte-pale)}
.comparatif [role="cell"]{font-variant-numeric:tabular-nums}
.comparatif__tete{background:var(--violet-voile)}
.comparatif__tete span{font-weight:600;color:var(--texte)}
.prix-clair__exemple{margin:16px 0 14px;color:var(--texte-doux);font-size:.9375rem}
.prix-clair__exemple strong{color:var(--texte);font-size:1.05rem}
@media (max-width:900px){.prix-clair{grid-template-columns:minmax(0,1fr)}}
@media (max-width:680px){.comparatif{font-size:.8125rem}.comparatif span{padding:9px 8px}}
/* Accueil : finitions plus compactes, les six sur une ligne (trois par ligne sur tablette et téléphone). */
#finitions .finish-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:24px 16px}
#finitions .finish-swatch{border-radius:18px}
#finitions .finish-card h3{font-size:19px;margin:12px 0 4px}
#finitions .finish-card p{font-size:.8125rem;line-height:1.35}
@media (max-width:960px){#finitions .finish-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:680px){#finitions .finish-grid{gap:18px 10px}#finitions .finish-swatch{border-radius:14px}#finitions .finish-card h3{font-size:15px;margin-top:8px}#finitions .finish-card p{font-size:.75rem}}
.finitions__note{margin-top:30px;max-width:760px;font-size:.875rem;color:var(--texte-pale)}

/* ---------- Réalisations : bandeau qui défile tout seul de droite à gauche ---------- */
.bandeau{margin-inline:calc(-1 * var(--marge));overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
/* Les photos sont présentes deux fois : la piste recule d'une moitié exacte puis repart, sans saut visible. */
.bandeau__piste{display:flex;gap:clamp(14px,1.6vw,24px);width:max-content;padding-right:clamp(14px,1.6vw,24px);animation:bandeau var(--duree-bandeau,70s) linear infinite}
.bandeau:hover .bandeau__piste,.bandeau:focus-within .bandeau__piste{animation-play-state:paused}
@keyframes bandeau{to{transform:translate3d(-50%,0,0)}}
.galerie__photo{position:relative;flex:none;height:clamp(260px,52vh,520px);aspect-ratio:var(--ratio,4/5);border:0;padding:0;border-radius:var(--rayon);overflow:hidden;background:var(--panneau);cursor:zoom-in}
.galerie__photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .5s;filter:saturate(.95)}
.galerie__photo:hover img{transform:scale(1.05);filter:saturate(1.1) brightness(1.05)}
.galerie__pied{margin-top:clamp(28px,4vh,44px)}
@media (max-width:680px){.galerie__photo{height:min(78vw,380px)}}
@media (prefers-reduced-motion:reduce){
  .bandeau{overflow-x:auto;scrollbar-width:none}
  .bandeau__piste{animation:none}
  .bandeau__piste [aria-hidden="true"]{display:none}
}

/* Visionneuse */
.visionneuse{width:min(1200px,94vw);max-height:92vh;padding:0;border:0;border-radius:var(--rayon);background:#0b0a0f;color:var(--texte);overflow:visible}
.visionneuse::backdrop{background:rgba(6,5,9,.88);backdrop-filter:blur(8px)}
.visionneuse img{width:100%;max-height:82vh;object-fit:contain;border-radius:var(--rayon)}
.visionneuse__barre{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 4px 0}
.visionneuse__nav{display:flex;gap:8px}
.visionneuse button{min-width:44px;height:44px;border:1px solid var(--ligne-forte);border-radius:999px;background:transparent;color:var(--texte);padding:0 16px}
.visionneuse button:hover{border-color:var(--violet);color:var(--violet-clair)}

/* ---------- Vidéos ---------- */
.videos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.video-carte{position:relative;aspect-ratio:9/16;border-radius:var(--rayon);overflow:hidden;background:#0b0a0f;border:1px solid var(--ligne)}
.video-carte video{width:100%;height:100%;object-fit:cover}
.video-carte span{position:absolute;left:12px;top:12px;font:600 .625rem/1 var(--police-texte);letter-spacing:.16em;color:rgba(255,255,255,.85);text-shadow:0 1px 6px rgba(0,0,0,.6)}

/* ---------- Avis ---------- */
.avis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.avis-carte{display:flex;flex-direction:column;gap:18px;min-height:250px;padding:28px;border:1px solid var(--ligne);border-radius:var(--rayon);background:var(--fond-2)}
.avis-carte blockquote{font-size:1.0625rem;line-height:1.55}
.avis-carte footer{margin-top:auto;font-size:.875rem;color:var(--texte-doux)}
.avis-carte footer strong{display:block;color:var(--texte);font-weight:600}
.avis-carte__auteur{display:flex;align-items:center;gap:12px}
.avis-carte__photo{flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover;border:1px solid var(--ligne)}
.avis-carte[hidden]{display:none}
.avis__plus{display:block;margin:18px auto 0;padding:8px 4px;border:0;background:none;color:var(--texte-doux);font:500 .8125rem/1.2 var(--police-texte);letter-spacing:.04em;text-decoration:underline;text-underline-offset:4px;cursor:pointer;transition:color .25s}
.avis__plus:hover{color:var(--violet-clair)}
.avis-carte--vide{align-items:flex-start;justify-content:center;border-style:dashed;border-color:rgba(166,107,232,.35);background:transparent;color:var(--texte-pale)}
.avis-carte--vide .guillemet{font:400 4rem/.6 var(--police-titre);color:rgba(166,107,232,.35)}
.avis-carte--vide p{font-size:.9375rem}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,7vw,120px)}
.faq__titre{position:sticky;top:calc(var(--entete) + 40px);align-self:start}
.faq__titre .titre-l{margin:22px 0 22px}
.faq__titre p{margin-bottom:26px}
.question{border-bottom:1px solid var(--ligne)}
.question:first-child{border-top:1px solid var(--ligne)}
.question summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 0;list-style:none;cursor:pointer;font:500 1.125rem/1.4 var(--police-texte);transition:color .25s}
.question summary::-webkit-details-marker{display:none}
.question summary:hover{color:var(--violet-clair)}
.question summary i{position:relative;flex:none;width:32px;height:32px;border:1px solid var(--ligne-forte);border-radius:50%;transition:transform .45s var(--ease-out),background .3s,border-color .3s}
.question summary i::before,.question summary i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.question summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .45s var(--ease-out)}
.question[open] summary i{background:var(--violet);border-color:var(--violet);color:#140d1d}
.question[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.question__reponse{overflow:hidden}
.question__reponse p{padding:0 56px 28px 0;color:var(--texte-doux);line-height:1.65}

/* ---------- Appel final ---------- */
.appel{position:relative;min-height:min(92vh,860px);display:grid;place-items:center;text-align:center;overflow:hidden;isolation:isolate;padding:var(--section) var(--marge)}
.appel__fond{position:absolute;inset:0;z-index:-2}
.appel__fond video,.appel__fond img{width:100%;height:100%;object-fit:cover}
.appel::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 60%,rgba(122,63,196,.55),rgba(16,16,20,.88) 62%),linear-gradient(0deg,var(--fond),transparent 30%,transparent 70%,var(--fond))}
.appel .titre-xl{margin:26px 0 34px}
.appel__marque{position:absolute;right:var(--marge);bottom:-.12em;z-index:-1;font:400 clamp(8rem,26vw,26rem)/.8 var(--police-titre);color:rgba(255,255,255,.035);pointer-events:none}
.appel .petit{margin-top:18px}

/* ---------- Pied de page ---------- */
.pied{padding:clamp(64px,8vw,110px) var(--marge) 30px;border-top:1px solid var(--ligne);background:#0b0a0e}
.pied__haut{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:40px}
.pied__marque img{width:150px;margin-bottom:24px}
.pied__marque p{max-width:32ch;color:var(--texte-doux);font-size:.9375rem}
.pied__mail{display:inline-block;margin-top:18px;font:400 1.4rem/1 var(--police-titre);text-transform:uppercase;color:var(--violet-clair);border-bottom:1px solid rgba(201,163,245,.35);padding-bottom:4px}
.pied__mail:hover{color:#fff;border-color:#fff}
.pied ul{list-style:none;margin:0;padding:0}
.pied h2{margin-bottom:18px;font:600 .75rem/1 var(--police-texte);letter-spacing:.18em;text-transform:uppercase;color:var(--texte-pale)}
.pied ul a{display:inline-block;padding:6px 0;color:#d6d2dd;font-size:.9375rem;transition:color .2s,transform .3s var(--ease-out)}
.pied ul a:hover{color:var(--violet-clair);transform:translateX(4px)}
.pied__legal{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:clamp(48px,6vw,80px);padding-top:22px;border-top:1px solid var(--ligne);font-size:.8125rem;color:var(--texte-pale)}
.pied__legal span strong{color:var(--texte-doux);font-weight:500}
.pied__geant{margin-top:30px;font:400 clamp(4rem,19vw,19rem)/.78 var(--police-titre);text-transform:uppercase;letter-spacing:-.01em;color:#16151c;white-space:nowrap;user-select:none;overflow:hidden}
.a-completer{display:inline-block;padding:1px 7px;border-radius:6px;background:rgba(255,196,87,.12);color:#ffd27a;font-weight:600;font-size:.92em}

/* ---------- Panier ---------- */
.panier-voile{position:fixed;inset:0;z-index:80;background:rgba(6,5,9,.6);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.panier{position:fixed;z-index:81;top:0;right:0;height:100vh;height:100dvh;width:min(460px,100%);display:flex;flex-direction:column;background:#15141a;border-left:1px solid var(--ligne);box-shadow:-30px 0 80px rgba(0,0,0,.5);transform:translateX(102%);transition:transform .6s var(--ease-out);visibility:hidden}
.panier-ouvert .panier{transform:none;visibility:visible}
.panier-ouvert .panier-voile{opacity:1;visibility:visible}
.panier-ouvert{overflow:hidden}
.panier__tete{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--ligne)}
.panier__tete h2{font-size:1.6rem}
.panier__corps{flex:1;overflow-y:auto;padding:8px 24px;overscroll-behavior:contain}
.panier__vide{display:grid;place-items:center;align-content:center;gap:14px;height:100%;text-align:center;color:var(--texte-doux)}
.panier__vide strong{font:400 2rem/1 var(--police-titre);text-transform:uppercase;color:var(--texte)}
.article{display:grid;grid-template-columns:72px 1fr auto;gap:14px;padding:18px 0;border-bottom:1px solid var(--ligne)}
.article img{width:72px;height:72px;border-radius:var(--rayon-s);object-fit:cover;background:var(--panneau)}
.article h3{font:600 .9375rem/1.3 var(--police-texte);text-transform:none;letter-spacing:0}
.article p{margin-top:4px;font-size:.8125rem;color:var(--texte-pale);line-height:1.45}
.article__prix{text-align:right;font-weight:600;white-space:nowrap}
.article__retirer{margin-top:8px;border:0;background:none;color:var(--texte-pale);font-size:.75rem;text-decoration:underline;text-underline-offset:3px;padding:4px 0}
.article__retirer:hover{color:var(--danger)}
.panier__pied{padding:20px 24px max(22px,env(safe-area-inset-bottom));border-top:1px solid var(--ligne);background:#121117}
.panier__ligne{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:.9375rem;color:var(--texte-doux)}
.panier__ligne--total{margin:8px 0 16px;padding-top:12px;border-top:1px solid var(--ligne);color:var(--texte);font-weight:700;font-size:1.0625rem}
.panier__note{margin-top:12px;font-size:.75rem;color:var(--texte-pale);text-align:center}

/* ---------- Pages intérieures ---------- */
.page-tete{position:relative;padding:clamp(64px,9vw,140px) var(--marge) clamp(40px,5vw,72px);overflow:hidden;isolation:isolate}
.page-tete::before{content:"";position:absolute;inset:-20% -10% auto auto;width:70vw;height:70vw;z-index:-1;background:radial-gradient(circle,rgba(166,107,232,.16),transparent 60%);pointer-events:none}
.page-tete .titre-xl,.page-tete .titre-l{margin:24px 0 26px}
.page-tete .chapo{max-width:52ch}
.fil{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;font-size:.8125rem;color:var(--texte-pale)}
.fil a:hover{color:var(--violet-clair)}
.fil span[aria-hidden]{opacity:.5}

/* Cartes de design (pages catégories) */
.designs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.design-carte{display:flex;flex-direction:column;border:1px solid var(--ligne);border-radius:var(--rayon-l);background:var(--fond-2);overflow:hidden;transition:border-color .4s,transform .6s var(--ease-out)}
.design-carte:hover{border-color:rgba(166,107,232,.55);transform:translateY(-6px)}
.design-carte__image{position:relative;display:block;aspect-ratio:1;background:#f2f1f4;overflow:hidden}
.design-carte__image img{width:100%;height:100%;object-fit:contain;transition:transform 1s var(--ease-out)}
.design-carte:hover .design-carte__image img{transform:scale(1.05)}
.design-carte__image .pastille{position:absolute;left:14px;top:14px;color:#fff;background:rgba(18,15,24,.72);border-color:rgba(255,255,255,.18)}
.design-carte__texte{display:flex;flex-direction:column;gap:10px;flex:1;padding:22px}
.design-carte__texte small{font:600 .6875rem/1 var(--police-texte);letter-spacing:.16em;text-transform:uppercase;color:var(--violet-clair)}
.design-carte h2,.design-carte h3{font-size:1.9rem;line-height:1}
.design-carte p{color:var(--texte-doux);font-size:.9375rem}
.palette{display:flex;gap:6px}
.palette i{width:16px;height:16px;border-radius:50%;border:1px solid rgba(255,255,255,.35)}
.design-carte__pied{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid var(--ligne)}
.design-carte__prix{flex:none;font:400 1.5rem/1 var(--police-titre);white-space:nowrap}
.design-carte__prix small{display:block;margin-bottom:4px;white-space:nowrap;font:600 .625rem/1 var(--police-texte);letter-spacing:.14em;text-transform:uppercase;color:var(--texte-pale)}
.carte-blanche{display:flex;flex-direction:column;justify-content:space-between;gap:30px;padding:30px;border:1px dashed rgba(166,107,232,.45);border-radius:var(--rayon-l);background:radial-gradient(circle at 80% 10%,rgba(166,107,232,.16),transparent 55%),var(--fond-2)}
.carte-blanche .titre-m{margin-top:14px}
.mention-visuel{margin-top:20px;font-size:.8125rem;color:var(--texte-pale)}

/* Catalogue semi-perso (24 kits) */
.kits-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.kit-carte{display:flex;flex-direction:column;border:1px solid var(--ligne);border-radius:var(--rayon);background:var(--fond-2);overflow:hidden;transition:border-color .35s,transform .5s var(--ease-out)}
.kit-carte:hover{border-color:rgba(166,107,232,.55);transform:translateY(-4px)}
.kit-carte__image{display:block;background:#6a6a6d;overflow:hidden}
.kit-carte__image img{width:100%;aspect-ratio:2/1;object-fit:contain;transition:transform .8s var(--ease-out)}
.kit-carte:hover .kit-carte__image img{transform:scale(1.04)}
.kit-carte__texte{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px}
.kit-carte__texte h2{font-size:1.35rem;line-height:1}
.kit-carte__texte small{display:block;margin-top:4px;font-size:.75rem;color:var(--texte-pale)}
.kit-carte__prix{font:400 1.25rem/1 var(--police-titre);color:var(--violet-clair);white-space:nowrap}
.kit-carte__prix small,.fiche__prix small{font:600 .625rem/1 var(--police-texte);letter-spacing:.14em;text-transform:uppercase;color:var(--texte-pale);vertical-align:middle}
.kit-carte__texte h2 a:hover{color:var(--violet-clair)}
.kit-carte__prix{text-align:right}
.kit-carte__livraison{display:block;margin-top:6px;font:500 .75rem/1.2 var(--police-texte);letter-spacing:0;text-transform:none;color:var(--texte-doux)}
.fiche__prix:has(+ .fiche__livraison){margin-bottom:10px}
.fiche__livraison{margin:0 0 28px;font-size:.9375rem;color:var(--texte-doux)}
.filtres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.filtre{min-height:40px;padding:0 18px;border:1px solid var(--ligne-forte);border-radius:999px;background:transparent;color:var(--texte-doux);font-size:.875rem;transition:all .25s}
.filtre:hover{color:var(--texte);border-color:var(--violet)}
.filtre[aria-pressed="true"]{background:var(--violet);border-color:var(--violet);color:#140d1d;font-weight:600}

/* Fiche kit */
.fiche{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:clamp(32px,6vw,96px);align-items:center}
.fiche__visuel{border-radius:var(--rayon-l);overflow:hidden;background:#6a6a6d;border:1px solid var(--ligne)}
.fiche__visuel img{width:100%;aspect-ratio:2/1;object-fit:contain;transition:opacity .35s}
.fiche__visuel figcaption{padding:12px 16px;font-size:.75rem;color:var(--texte-doux);background:#17161c}
.fiche__prix{margin:6px 0 28px;font:400 clamp(2.6rem,4vw,3.6rem)/1 var(--police-titre);color:var(--violet-clair)}
.nuancier{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0 30px}
.nuance{width:36px;height:36px;border-radius:50%;border:2px solid transparent;box-shadow:0 0 0 1px rgba(255,255,255,.3);transition:transform .25s var(--ease-out),box-shadow .25s}
/* Pastilles bicolores : le dégradé couvre tout le rond, bordure comprise, sans se répéter (sinon on voit 4 couleurs). */
.nuance{background-origin:border-box!important;background-repeat:no-repeat!important}
.nuance:hover{transform:scale(1.12)}
.nuance[aria-checked="true"]{box-shadow:0 0 0 2px var(--fond),0 0 0 4px var(--violet)}

/* Tableaux de prix */
.tarifs-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.bloc{padding:clamp(24px,3vw,40px);border:1px solid var(--ligne);border-radius:var(--rayon-l);background:var(--fond-2)}
.bloc h2{font-size:clamp(1.8rem,2.6vw,2.5rem);margin-bottom:10px}
.bloc>p{color:var(--texte-doux);margin-bottom:18px}
.liste-prix{margin:0}
.liste-prix div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:13px 0;border-bottom:1px solid var(--ligne)}
.liste-prix div:last-child{border-bottom:0}
.liste-prix dt{color:#dcd8e2}
.liste-prix dt small{display:block;font-size:.75rem;color:var(--texte-pale)}
.liste-prix dd{flex:none;font-weight:600;color:var(--violet-clair);font-variant-numeric:tabular-nums}
.sommaire{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.sommaire a{padding:10px 18px;border:1px solid var(--ligne-forte);border-radius:999px;font-size:.875rem;transition:all .25s}
.sommaire a:hover{border-color:var(--violet);color:var(--violet-clair)}

/* Cartes pièces */
.pieces-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.piece-carte{display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:170px;padding:22px;border:1px solid var(--ligne);border-radius:var(--rayon);background:var(--fond-2);transition:border-color .3s,transform .4s var(--ease-out),background .3s}
.piece-carte:hover{border-color:rgba(166,107,232,.55);background:#1d1925;transform:translateY(-3px)}
.piece-carte strong{display:block;font:400 1.5rem/1 var(--police-titre);text-transform:uppercase}
.piece-carte small{display:block;margin-top:8px;color:var(--texte-pale);font-size:.8125rem}
.piece-carte__pied{display:flex;justify-content:space-between;align-items:center;padding-top:14px;border-top:1px solid var(--ligne);font-size:.875rem}
.piece-carte__pied b{color:var(--violet-clair);font-variant-numeric:tabular-nums}
.piece-carte--photo{gap:18px;padding-top:0;overflow:hidden}
.piece-carte__image{display:block;margin:0 -22px;aspect-ratio:1;background:#0d0d0f;overflow:hidden}
.piece-carte__image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.piece-carte--photo:hover .piece-carte__image img{transform:scale(1.04)}

/* Contact / compte / à propos */
.contact-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.contact-carte{display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:260px;padding:30px;border:1px solid var(--ligne);border-radius:var(--rayon-l);background:var(--fond-2);transition:border-color .35s,transform .5s var(--ease-out),background .35s}
.contact-carte:hover{border-color:rgba(166,107,232,.6);background:#1c1824;transform:translateY(-5px)}
.contact-carte small{font:600 .6875rem/1 var(--police-texte);letter-spacing:.18em;color:var(--violet-clair)}
.contact-carte strong{display:block;font:400 clamp(1.6rem,2.4vw,2.2rem)/1.05 var(--police-titre);text-transform:uppercase;overflow-wrap:anywhere}
.contact-carte p{margin-top:10px;color:var(--texte-doux);font-size:.9375rem}
/* Pages « sur mesure » par catégorie : une vraie photo, le bouton du configurateur et les infos. */
.categorie-sm__grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center;margin-top:clamp(28px,4vw,48px)}
.categorie-sm__photo{position:relative;margin:0;border-radius:var(--rayon-l);overflow:hidden;border:1px solid var(--ligne);background:var(--panneau)}
.categorie-sm__photo img{display:block;width:100%;height:min(76vh,720px);object-fit:cover}
.categorie-sm__photo figcaption{position:absolute;left:14px;bottom:14px;padding:7px 12px;border-radius:999px;background:rgba(10,9,14,.72);backdrop-filter:blur(6px);font:600 .6875rem/1 var(--police-texte);letter-spacing:.14em;text-transform:uppercase;color:var(--texte)}
/* Carrousel de photos : défilement horizontal au doigt, aux flèches et aux points. */
.carrousel__piste{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.carrousel__piste::-webkit-scrollbar{display:none}
.carrousel__piste:focus-visible{outline:2px solid var(--violet);outline-offset:-2px}
.carrousel__slide{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;aspect-ratio:3/4}
.carrousel .carrousel__slide img{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover}
.carrousel__slide{position:relative;overflow:hidden;background:#17161c}
.carrousel__slide--entiere::before{content:"";position:absolute;inset:-30px;background:var(--fond) center/cover no-repeat;filter:blur(26px) brightness(.5) saturate(1.2)}
.carrousel .carrousel__slide--entiere img,.carrousel .carrousel__slide video{position:relative;object-fit:contain}
.carrousel .carrousel__slide video{display:block;width:100%;height:100%;background:transparent}
.carrousel figcaption{top:14px;bottom:auto}
.carrousel__fleche{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:46px;height:46px;margin-top:-23px;padding:0;border:1px solid rgba(255,255,255,.28);border-radius:50%;background:rgba(10,9,14,.62);backdrop-filter:blur(6px);color:var(--texte);cursor:pointer;transition:background .25s,border-color .25s,transform .25s}
.carrousel__fleche:hover{background:var(--violet);border-color:var(--violet);color:#120d1a}
.carrousel__fleche:active{transform:scale(.94)}
.carrousel__fleche svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.carrousel__fleche--prec{left:12px}
.carrousel__fleche--suiv{right:12px}
.carrousel__points{position:absolute;left:50%;bottom:14px;z-index:2;display:flex;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(10,9,14,.62);backdrop-filter:blur(6px);transform:translateX(-50%)}
.carrousel__points button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.38);cursor:pointer;transition:background .25s,transform .25s}
.carrousel__points button[aria-current="true"]{background:var(--violet);transform:scale(1.35)}
@media (max-width:900px){.carrousel__fleche{width:40px;height:40px;margin-top:-20px}}
.categorie-sm__texte .kicker{margin:0}
.categorie-sm__bouton{margin-top:30px}
.categorie-sm .categorie-sm__infos{list-style:none;margin:34px 0 0;padding:0;border-top:1px solid var(--ligne)}
.categorie-sm__infos li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--ligne);font-size:.9375rem;line-height:1.5;color:var(--texte-doux)}
.categorie-sm__infos strong{font:600 .6875rem/1.9 var(--police-texte);letter-spacing:.16em;text-transform:uppercase;color:var(--violet-clair)}
.categorie-sm__aide{margin-top:20px}
.categorie-sm__prix{font:400 1.5rem/1 var(--police-titre);color:var(--texte);margin-right:4px}
@media (max-width:900px){
  .categorie-sm__grille{grid-template-columns:1fr}
  .categorie-sm__photo img{height:auto;aspect-ratio:4/5;max-height:70vh}
  .categorie-sm__infos li{grid-template-columns:1fr;gap:4px}
}
.recit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.recit__image{border-radius:var(--rayon-l);overflow:hidden;aspect-ratio:4/5}
.recit__image img{width:100%;height:100%;object-fit:cover}
.recit__texte p+p{margin-top:16px}
.recit__texte .titre-m{margin:20px 0 24px}
.valeurs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.valeur{padding:30px;border-top:2px solid var(--violet);background:var(--fond-2);border-radius:0 0 var(--rayon) var(--rayon)}
.valeur strong{display:block;margin:14px 0 10px;font:400 1.9rem/1 var(--police-titre);text-transform:uppercase}
.valeur p{color:var(--texte-doux);font-size:.9375rem}
.compte-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.compte-bloc{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-height:380px;padding:clamp(26px,4vw,48px);border:1px solid var(--ligne);border-radius:var(--rayon-l);background:var(--fond-2)}
.compte-bloc--violet{background:radial-gradient(circle at 85% 15%,rgba(166,107,232,.3),transparent 55%),var(--fond-2);border-color:rgba(166,107,232,.35)}
.compte-bloc .bouton{margin-top:auto}
.recompense{font:400 clamp(4rem,8vw,7rem)/.9 var(--police-titre);color:var(--violet)}
.recompense small{font-size:.45em;vertical-align:top}

/* Pages légales */
.legal{width:min(860px,100%);margin-inline:auto}
.legal__alerte{display:block;margin-bottom:34px;padding:18px 20px;border:1px solid rgba(255,196,87,.35);border-radius:var(--rayon-s);background:rgba(255,196,87,.06);color:#f1dfb8;font-size:.9375rem;line-height:1.6}
.legal__alerte b{display:inline-block;margin-right:10px;padding:2px 9px;border-radius:999px;background:rgba(255,196,87,.16);color:#ffd27a;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase}
.legal section{padding:30px 0;border-top:1px solid var(--ligne)}
.legal h2{font-size:clamp(1.6rem,2.4vw,2.2rem);margin-bottom:16px}
.legal h3{margin:22px 0 8px;font:600 1rem/1.4 var(--police-texte);text-transform:none;letter-spacing:0;color:var(--texte)}
.legal p,.legal li{color:var(--texte-doux);line-height:1.75}
.legal p+p{margin-top:12px}
.legal ul{padding-left:20px;margin:10px 0}
.legal a{color:var(--violet-clair);text-decoration:underline;text-underline-offset:3px}
.legal dl div{display:grid;grid-template-columns:minmax(170px,.6fr) 1.4fr;gap:20px;padding:11px 0;border-bottom:1px solid var(--ligne)}
.legal dt{color:var(--texte-pale)}
.legal dd{color:var(--texte)}

/* Formulaires partagés */
.champ{display:flex;flex-direction:column;gap:8px;min-width:0}
.champ>span,.champ legend{font:600 .875rem/1.3 var(--police-texte);color:var(--texte)}
.champ>span small,.champ legend small{font-weight:400;color:var(--texte-pale)}
.champ input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),.champ select,.champ textarea{width:100%;min-height:52px;padding:14px 16px;border:1px solid rgba(255,255,255,.14);border-radius:var(--rayon-s);background:#0f0e13;color:var(--texte);font-size:1rem;transition:border-color .2s,box-shadow .2s}
.champ textarea{min-height:110px;resize:vertical;line-height:1.5}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(166,107,232,.22)}
.champ input[aria-invalid="true"],.champ select[aria-invalid="true"]{border-color:var(--danger)}
.champ__aide{font-size:.8125rem;color:var(--texte-pale);line-height:1.45}
.champ__erreur{font-size:.8125rem;color:var(--danger)}
.coche{display:flex;gap:12px;align-items:flex-start;cursor:pointer;color:var(--texte-doux);font-size:.9375rem;line-height:1.5}
.coche input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--violet)}
.champs-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.champs-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}

/* Erreur 404 */
.page-404{min-height:70vh;display:grid;place-items:center;text-align:center;padding:var(--section) var(--marge)}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .chemins{grid-template-columns:1fr 1fr}
  .chemin:last-child{grid-column:1/-1;min-height:460px}
  .etapes{grid-template-columns:1fr 1fr}
  .kits-grille{grid-template-columns:repeat(3,minmax(0,1fr))}
  .videos{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(220px,32%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:thin;scrollbar-color:var(--violet) transparent}
  .video-carte{scroll-snap-align:start}
  .pied__haut{grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
  :root{--entete:68px}
  .burger{display:inline-grid;place-items:center;gap:0}
  .burger span{display:block;width:20px;height:1.5px;background:currentColor;transition:transform .4s var(--ease-out)}
  .burger span+span{margin-top:6px}
  .burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
  .burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
  /* Sans flou d'arrière-plan sur mobile : un backdrop-filter enfermerait le menu plein écran (position fixed) dans l'en-tête. */
  .entete{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(16,16,20,.97)}
  .nav{position:fixed;inset:var(--nav-haut,104px) 0 0 0;z-index:49;margin:0;padding:24px var(--marge) 48px;background:var(--fond);overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .35s var(--ease),transform .5s var(--ease-out),visibility .35s}
  .nav.est-ouvert{opacity:1;visibility:visible;transform:none}
  .nav__liste{flex-direction:column;align-items:stretch;gap:0}
  .nav__liste>li{border-bottom:1px solid var(--ligne)}
  .nav__lien,.nav__bouton{width:100%;justify-content:space-between;padding:18px 0;font:400 2.1rem/1 var(--police-titre);text-transform:uppercase;color:var(--texte)}
  .nav__lien::after,.nav__bouton::after{display:none}
  .nav__bouton svg{width:14px;height:14px}
  .mega,.mega--3{position:static;display:none;width:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 0 18px;border:0;background:none;box-shadow:none;opacity:1;visibility:visible;transform:none}
  .nav__menu.est-ouvert .mega,.nav__menu.est-ouvert .mega--3{display:grid;transform:none}
  .mega__carte{aspect-ratio:4/3}
  .mega__texte strong{font-size:1.3rem}
  .entete__actions{margin-left:auto}
  .nav-ouverte{overflow:hidden}
  .entete-section{grid-template-columns:1fr;gap:20px}
  .entete-section>p{justify-self:start}
  .faq{grid-template-columns:1fr}
  .faq__titre{position:static}
  .finitions-grille,.designs,.avis,.contact-grille,.valeurs,.pieces-grille{grid-template-columns:1fr 1fr}
  .fiche,.recit{grid-template-columns:1fr}
  .tarifs-grille,.compte-grille,.grille-3{grid-template-columns:1fr}
  .hero__etapes{display:none}
}
@media (max-width:680px){
  body{font-size:15px}
  .annonce{font-size:.625rem;letter-spacing:.08em}
  .annonce__sep,.annonce__point{display:none}
  .entete__logo{width:84px}
  .entete__actions{gap:0}
  .finitions-grille{grid-template-columns:1fr 1fr!important;gap:22px 12px}
  .finition h3{font-size:1.3rem}
  .finition p{font-size:.8125rem}
  .finition figcaption{flex-direction:column;align-items:flex-start;gap:8px;padding-top:12px}
  .finition__visuel{border-radius:var(--rayon)}
  .hero__contenu{bottom:96px}
  .hero__titre{font-size:clamp(3rem,15vw,4.6rem);margin:16px 0 18px}
  .hero__texte{font-size:.9688rem}
  .hero__actions .bouton{flex:1 1 100%}
  .hero__voile{background:linear-gradient(0deg,rgba(10,9,14,.96) 0%,rgba(10,9,14,.74) 42%,rgba(10,9,14,.1) 72%,rgba(10,9,14,.45) 100%)}
  .hero__media video,.hero__media img{object-position:50% 50%}
  .chemins,.etapes,.finitions-grille,.designs,.avis,.contact-grille,.valeurs,.pieces-grille,.grille-2,.champs-2,.champs-3{grid-template-columns:1fr}
  .chemin,.chemin:last-child{min-height:520px}
  .chemins__bandeau{grid-template-columns:1fr}
  .repere+.repere{border-left:0;border-top:1px solid var(--ligne)}
  .kits-grille{grid-template-columns:1fr 1fr;gap:10px}
  .kit-carte__texte{flex-direction:column;align-items:flex-start;padding:12px}
  .kit-carte__texte h2{font-size:1.1rem}
  .videos{grid-auto-columns:72%}
  .question summary{font-size:1rem;padding:22px 0}
  .question__reponse p{padding-right:0}
  .pied__haut{grid-template-columns:1fr}
  .legal dl div{grid-template-columns:1fr;gap:4px}
  .contact-carte{min-height:0;gap:26px;padding:24px}
  .design-carte__pied .bouton{padding-left:14px;font-size:.6875rem}
  .article{grid-template-columns:60px 1fr;}
  .article img{width:60px;height:60px}
  .article__prix{grid-column:2;text-align:left}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .l>span,[data-apparition]{transform:none!important;opacity:1!important}
  .hero__media{transform:none}
  .marques__piste{animation:none}
}

/* ---------- Jeu concours : packs de stickers ---------- */
.annonce__lien{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.annonce__lien:hover{text-decoration-thickness:2px}
.packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch;padding-top:14px}
.pack{position:relative;display:flex;flex-direction:column;gap:22px;padding:30px 28px 28px;border:1px solid var(--ligne);border-radius:var(--rayon-l);background:linear-gradient(160deg,var(--panneau) 0%,var(--fond-2) 70%);overflow:hidden;isolation:isolate;transition:transform .5s var(--ease-out),border-color .35s,box-shadow .5s var(--ease-out)}
/* Texture fibre de carbone très discrète, et reflet qui balaie la carte au survol. */
.pack::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(135deg,rgba(255,255,255,.028) 0 2px,transparent 2px 9px);pointer-events:none}
.pack::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.08),transparent);transform:skewX(-18deg);transition:left 1s var(--ease-out);pointer-events:none}
.pack:hover{transform:translateY(-6px);border-color:rgba(166,107,232,.55);box-shadow:0 26px 60px -30px rgba(166,107,232,.6)}
.pack:hover::after{left:130%}
.pack__tete{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px}
.pack__nom{font:600 .75rem/1 var(--police-texte);letter-spacing:.22em;text-transform:uppercase;color:var(--violet-clair)}
.pack__badge{padding:7px 12px;border-radius:999px;background:linear-gradient(90deg,var(--violet),var(--cyan));color:#120c19;font:700 .6875rem/1 var(--police-texte);letter-spacing:.14em;text-transform:uppercase}
.pack__prix{font:400 clamp(3.4rem,5.2vw,4.6rem)/.9 var(--police-titre);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.pack__contenu{display:grid;gap:12px;padding:20px 0;border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.pack__contenu li{display:flex;align-items:center;gap:14px;line-height:1.3}
.pack__contenu b{flex:none;display:grid;place-items:center;min-width:52px;height:52px;padding:0 8px;border-radius:14px;background:var(--violet-voile);font:400 1.75rem/1 var(--police-titre);color:var(--texte)}
.pack__contenu span{color:var(--texte-doux)}
.pack__livraison{font-size:.875rem;color:var(--texte-pale)}
.pack__livraison strong{color:var(--texte);font-weight:600}
.pack .bouton{margin-top:auto;width:100%}
.pack--premium{border:1.5px solid transparent;background:linear-gradient(160deg,#221a30,#14111b 70%) padding-box,linear-gradient(135deg,var(--violet),var(--cyan) 55%,var(--violet-profond)) border-box;box-shadow:0 34px 80px -42px rgba(166,107,232,.8)}
.pack--premium:hover{border-color:transparent;box-shadow:0 40px 90px -40px rgba(166,107,232,.95)}
.pack--premium .pack__prix{background:linear-gradient(90deg,#fff 30%,var(--violet-clair));-webkit-background-clip:text;background-clip:text;color:transparent}
.pack--premium .pack__contenu b{background:linear-gradient(135deg,rgba(166,107,232,.32),rgba(95,224,238,.2))}
@media (min-width:961px){
  .pack--premium{transform:translateY(-14px)}
  .pack--premium:hover{transform:translateY(-20px)}
}
@media (max-width:960px){
  .packs{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
}
@media (prefers-reduced-motion:reduce){
  .pack:hover,.pack--premium:hover{transform:none}
  .pack::after{display:none}
}

/* ---------- Jeu concours : choix des stickers d'un pack ---------- */
.choix-sticker{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.choix-sticker__visuel{position:relative;border:1px solid var(--ligne);border-radius:var(--rayon-l);overflow:hidden;line-height:0}
.choix-sticker__visuel img{width:100%;height:auto}
.choix-sticker__fleche{position:absolute;top:50%;translate:0 -50%;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--ligne-forte);border-radius:50%;background:rgba(16,16,20,.72);font-size:1.1rem;transition:background .3s,border-color .3s}
.choix-sticker__fleche:hover{background:var(--violet);border-color:var(--violet);color:#140d1d}
.choix-sticker__fleche--prec{left:12px}
.choix-sticker__fleche--suiv{right:12px}
.choix-sticker__infos{display:flex;flex-direction:column;gap:18px}
.choix-sticker__modele{font:400 1.6rem/1 var(--police-titre);text-transform:uppercase;color:var(--violet-clair)}
.choix-sticker__fin{font-size:.875rem;color:var(--texte-doux)}
.choix-sticker__actions{display:grid;gap:10px}
.choix-sticker__actions .bouton{width:100%}
.choix-sticker__sous-titre{margin-top:clamp(40px,5vw,64px)}
.choix-sticker__galerie{display:flex;gap:14px;margin-top:20px;padding:4px 2px 16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-color:var(--violet) transparent}
.choix-sticker__vignette{position:relative;flex:0 0 auto;display:grid;align-content:start;gap:10px;padding:10px;border:1px solid var(--ligne);border-radius:var(--rayon);background:var(--fond-2);scroll-snap-align:start;cursor:pointer;transition:border-color .3s,transform .4s var(--ease-out),box-shadow .3s}
.choix-sticker__vignette input{position:absolute;opacity:0;pointer-events:none}
.choix-sticker__vignette img{width:auto;height:clamp(84px,9vw,112px);border-radius:var(--rayon-s)}
.choix-sticker__vignette span{font-weight:600;font-size:.9375rem}
.choix-sticker__vignette:hover{transform:translateY(-3px);border-color:rgba(166,107,232,.45)}
button.choix-sticker__vignette{color:inherit;font:inherit;text-align:left}
.choix-sticker__vignette.est-vu{border-color:rgba(166,107,232,.6)}
.choix-sticker__vignette:has(input:disabled:not(:checked)){opacity:.45;cursor:not-allowed}
.choix-sticker__compteur{font-size:.875rem;color:var(--texte-doux)}
.choix-sticker__vignette:has(input:checked){border-color:var(--violet);box-shadow:0 0 0 1px var(--violet),0 18px 40px -24px rgba(166,107,232,.7)}
.choix-sticker__vignette:has(input:focus-visible){outline:2px solid var(--violet-clair);outline-offset:3px}
@media (max-width:960px){
  .choix-sticker{grid-template-columns:1fr}
}

/* ---------- Panier : quantité et poubelle ---------- */
.article__droite{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:10px}
.article .article__retirer{display:grid;place-items:center;width:34px;height:34px;margin:0;padding:0;border:1px solid var(--ligne);border-radius:50%;background:none;color:var(--texte-pale);text-decoration:none;transition:color .25s,border-color .25s,background .25s}
.article .article__retirer svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.article .article__retirer:hover{color:var(--danger);border-color:rgba(255,138,138,.5);background:rgba(255,138,138,.08)}
.quantite{display:inline-flex;align-items:center;margin-top:10px;border:1px solid var(--ligne);border-radius:999px}
.quantite button{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:none;color:var(--texte);font-size:1rem;line-height:1;transition:background .25s}
.quantite button:hover:not(:disabled){background:var(--violet-voile)}
.quantite button:disabled{color:var(--texte-pale);opacity:.45;cursor:default}
.quantite span{min-width:26px;text-align:center;font-weight:600;font-size:.875rem;font-variant-numeric:tabular-nums}
@media (max-width:680px){
  .article{grid-template-columns:60px 1fr auto}
}

/* Carrousel au format carré : les photos larges remplissent le cadre sans être coupées ni entourées de fond. */
.carrousel--carre .carrousel__slide,.carrousel.carrousel--carre .carrousel__slide img{aspect-ratio:1/1}

/* ---------- Galerie qui défile (À propos) : toutes les réalisations, chacune dans ses proportions ---------- */
.defile{position:relative}
.defile__piste{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;border-radius:var(--rayon-l)}
.defile__piste::-webkit-scrollbar{display:none}
.defile__piste:focus-visible{outline:2px solid var(--violet);outline-offset:4px}
.defile__photo{flex:0 0 auto;margin:0;scroll-snap-align:start}
.defile__photo img{display:block;width:auto;height:clamp(280px,40vw,520px);border-radius:var(--rayon)}
.defile .defile__fleche--prec,.defile .carrousel__fleche--prec{left:calc(var(--marge) + 12px)}
.defile .carrousel__fleche--suiv{right:calc(var(--marge) + 12px)}
.defile .carrousel__fleche:disabled{opacity:0;pointer-events:none}

/* À propos : récit sans photo, titre à gauche et texte à droite. */
.recit--sans-image{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}
.recit--sans-image .recit__titre .titre-l{margin-top:20px}
.recit--sans-image .recit__texte{padding-top:44px;font-size:1.0625rem}
@media (max-width:960px){
  .recit--sans-image{grid-template-columns:1fr;gap:28px}
}

/* ---------- Espace compte : bandeau de connexion et tuiles, façon grand site marchand ---------- */
.compte-connexion{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-bottom:22px;padding:24px 28px;border:1px solid rgba(166,107,232,.35);border-radius:var(--rayon-l);background:radial-gradient(circle at 90% 0%,rgba(166,107,232,.22),transparent 55%),var(--fond-2)}
.compte-connexion strong{display:block;font:400 1.6rem/1 var(--police-titre);text-transform:uppercase}
.compte-connexion p{margin-top:8px;max-width:62ch}
.compte-connexion__etat{padding:8px 14px;border-radius:999px;background:var(--violet-voile);color:var(--violet-clair);font:600 .75rem/1 var(--police-texte);letter-spacing:.12em;text-transform:uppercase}
.compte-tuiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.compte-tuile{display:flex;align-items:flex-start;gap:16px;width:100%;padding:22px;border:1px solid var(--ligne);border-radius:var(--rayon);background:var(--fond-2);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .3s,transform .4s var(--ease-out),background .3s}
.compte-tuile:hover:not(:disabled){border-color:rgba(166,107,232,.55);background:#1d1925;transform:translateY(-3px)}
.compte-tuile:disabled{opacity:.55;cursor:default}
.compte-tuile__icone{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--violet-voile);color:var(--violet-clair)}
.compte-tuile__icone svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.compte-tuile strong{display:block;font-weight:600;font-size:1rem}
.compte-tuile small{display:block;margin-top:6px;color:var(--texte-pale);font-size:.875rem;line-height:1.45}
@media (max-width:960px){.compte-tuiles{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.compte-tuiles{grid-template-columns:1fr}}

/* ---------- Espace compte : profil (photo, nom, e-mail, téléphone) ---------- */
.profil{display:grid;gap:24px;margin-bottom:22px;padding:clamp(22px,3.5vw,36px);border:1px solid rgba(166,107,232,.35);border-radius:var(--rayon-l);background:radial-gradient(circle at 92% 0%,rgba(166,107,232,.22),transparent 55%),var(--fond-2)}
.profil__identite{display:flex;align-items:center;gap:22px}
.profil__identite strong{display:block;font:400 clamp(1.6rem,3vw,2.2rem)/1 var(--police-titre);text-transform:uppercase}
.profil__identite .petit{margin-top:8px;max-width:58ch}
.profil__photo{position:relative;flex:none;display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:var(--violet-voile);border:1px solid rgba(166,107,232,.45);overflow:hidden;cursor:pointer}
.profil__photo img{width:100%;height:100%;object-fit:cover}
.profil__photo [data-profil-initiales]{font:400 2rem/1 var(--police-titre);color:var(--violet-clair)}
.profil__photo-bouton{position:absolute;inset:auto 0 0;padding:5px 0 7px;background:rgba(10,9,14,.72);font:600 .625rem/1 var(--police-texte);letter-spacing:.12em;text-transform:uppercase;text-align:center;opacity:0;transition:opacity .25s}
.profil__photo:hover .profil__photo-bouton,.profil__photo:focus-within .profil__photo-bouton{opacity:1}
.profil__photo:focus-within{outline:2px solid var(--violet-clair);outline-offset:3px}
.profil__champs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.profil__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.profil__lien{margin-top:6px;padding:0;border:0;background:none;font-size:.8125rem;cursor:pointer}
@media (max-width:680px){
  .profil__identite{align-items:flex-start}
  .profil__champs{grid-template-columns:1fr}
}

/* ---------- Housse de selle : partie à part entière de la page Pièces et son configurateur ---------- */
.housse-carte{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);overflow:hidden;border:1px solid rgba(166,107,232,.4);border-radius:var(--rayon-l);background:radial-gradient(circle at 85% 10%,rgba(166,107,232,.22),transparent 55%),var(--fond-2);transition:border-color .35s,transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.housse-carte:hover{border-color:var(--violet);transform:translateY(-4px);box-shadow:0 26px 60px -32px rgba(166,107,232,.6)}
.housse-carte__image{display:block;overflow:hidden;background:#0d0d0f}
.housse-carte__image img{width:100%;height:100%;max-height:520px;object-fit:cover;transition:transform .8s var(--ease-out)}
.housse-carte:hover .housse-carte__image img{transform:scale(1.04)}
.housse-carte__texte{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:18px;padding:clamp(26px,4vw,56px)}
.housse-carte__texte strong{display:block}
.housse-carte__texte .texte-doux{max-width:46ch}
.housse{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);align-items:start}
.housse__visuel{position:sticky;top:calc(var(--entete) + 24px);margin:0;border-radius:var(--rayon-l);overflow:hidden;border:1px solid var(--ligne)}
.housse__visuel img{width:100%;height:auto}
.housse__form{display:grid;gap:22px}
.housse__bientot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;color:var(--texte-doux);font-size:.9375rem}
.housse__bloc{margin:0;padding:22px;border:1px solid var(--ligne);border-radius:var(--rayon);background:var(--fond-2)}
.housse__bloc legend{padding:0 8px;font:600 .75rem/1 var(--police-texte);letter-spacing:.18em;text-transform:uppercase;color:var(--violet-clair)}
.housse__bloc legend small{letter-spacing:0;text-transform:none;color:var(--texte-pale)}
.housse__bloc .champs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.housse__bloc .couleurs{grid-template-columns:repeat(3,minmax(0,1fr))}
.housse__bloc .depots{grid-template-columns:1fr}
.housse__actions{display:grid;gap:10px}
.housse__actions .bouton{width:100%}
@media (max-width:960px){
  .housse-carte,.housse{grid-template-columns:1fr}
  .housse-carte__image img{max-height:380px}
  .housse__visuel{position:static;max-width:420px}
}
@media (max-width:680px){.housse__bloc .champs{grid-template-columns:1fr}}

/* ---------- Réassurance : barre sous l'en-tête, engagements et moyens de paiement dans le pied de page ---------- */
.reassurance{border-bottom:1px solid var(--ligne);background:var(--fond-2)}
.reassurance .reassurance__liste{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 28px;padding:10px var(--marge);font:600 .75rem/1.3 var(--police-texte);letter-spacing:.04em;color:var(--texte-doux)}
.reassurance__liste li{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.reassurance__liste a{display:inline-flex;align-items:center;gap:8px;color:var(--violet-clair)}
.reassurance__liste a:hover{text-decoration:underline;text-underline-offset:3px}
.reassurance svg,.pied__engagements svg,.confiance svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--violet-clair);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pied__confiance{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px;margin-top:clamp(40px,5vw,64px);padding:22px 0;border-top:1px solid var(--ligne)}
.pied__engagements{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:.875rem;color:var(--texte-doux)}
.pied__engagements li{display:inline-flex;align-items:center;gap:8px}
.pied__paiement,.confiance__paiement{display:flex;flex-wrap:wrap;gap:8px}
.carte-paiement{display:block;width:48px;height:30px;border-radius:5px;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.carte-paiement svg{display:block;width:100%;height:100%}
.pied__confiance + .pied__legal{margin-top:0}
/* Note des avis et bloc de confiance sur les fiches. */
.note-avis{display:inline-flex;align-items:center;gap:8px;font-size:.875rem;color:var(--texte-doux)}
.note-avis a{color:inherit}
.note-avis a:hover{color:var(--violet-clair)}
.note-avis__etoiles{color:#f5c542;letter-spacing:2px;font-size:1rem}
.confiance{display:grid;gap:10px;margin-top:22px;padding:18px 20px;border:1px solid var(--ligne);border-radius:var(--rayon);background:var(--fond-2);font-size:.875rem;color:var(--texte-doux)}
.confiance ul{display:grid;gap:8px}
.confiance li{display:flex;align-items:center;gap:10px}
/* Filtres de la page Kits. */
.filtres{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.filtres button{padding:10px 18px;border:1px solid var(--ligne-forte);border-radius:999px;background:none;color:var(--texte);font:600 .8125rem/1 var(--police-texte);letter-spacing:.04em;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.filtres button:hover{border-color:var(--violet)}
.filtres button[aria-pressed="true"]{background:var(--violet);border-color:var(--violet);color:#140d1d}
@media (max-width:680px){
  .reassurance .reassurance__liste{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:22px}
  .reassurance__liste::-webkit-scrollbar{display:none}
}

/* ---------- Carte cadeau ---------- */
.cadeau{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.cadeau__apercu{position:sticky;top:calc(var(--entete) + 24px)}
.cadeau__carte{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:10px;aspect-ratio:1.586;padding:clamp(22px,3vw,34px);border-radius:var(--rayon-l);overflow:hidden;background:radial-gradient(circle at 85% 15%,rgba(95,224,238,.35),transparent 45%),linear-gradient(135deg,#7a3fc4,#a66be8 55%,#3b1d66);box-shadow:0 30px 80px -40px rgba(166,107,232,.9)}
.cadeau__carte::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,transparent 2px 10px);pointer-events:none}
.cadeau__carte img{width:clamp(110px,14vw,160px);height:auto}
.cadeau__libelle{font:600 .75rem/1 var(--police-texte);letter-spacing:.22em;text-transform:uppercase;color:#f3eaff}
.cadeau__montant{font:400 clamp(3rem,6vw,4.6rem)/.9 var(--police-titre);color:#fff}
.cadeau__pour,.cadeau__de{font-size:.9375rem;color:#f3eaff}
.cadeau__de:empty{display:none}
.cadeau__form{display:grid;gap:20px}
.cadeau__euros{position:relative;display:block}
.cadeau__euros b{position:absolute;right:16px;top:50%;translate:0 -50%;font-weight:600;color:var(--texte-pale)}
.cadeau__suggestions{margin:14px 0 0}
.cadeau__champs{grid-template-columns:1fr 1fr!important}
@media (max-width:960px){
  .cadeau{grid-template-columns:1fr}
  .cadeau__apercu{position:static;max-width:440px}
}
@media (max-width:680px){.cadeau__champs{grid-template-columns:1fr!important}}

/* Sur mesure « Autre » : deux boutons de contact (Instagram, e-mail) à la place du configurateur. */
.categorie-sm__contact{display:flex;flex-wrap:wrap;gap:12px}

/* Page Pièces : partie « Console » (photo entière, sans recadrage), contact sur Instagram ou par e-mail. */
.console-carte{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);cursor:default}
.console-carte:hover{transform:none}
.console-carte__image{background:#141414}
.console-carte__image img{height:auto;max-height:none;object-fit:contain}
.console-carte:hover .console-carte__image img{transform:none}
@media (max-width:960px){.console-carte{grid-template-columns:1fr}}

/* ---------- Responsive : corrections pour les petits écrans (téléphones de 320 à 414 px) ---------- */
/* Zones tactiles : au moins 32 px de haut, sans changer la mise en page (marge négative compensée). */
.fil a{display:inline-block;padding:6px 0;margin:-6px 0}
.carrousel__points button{position:relative}
.carrousel__points button::before{content:"";position:absolute;inset:-10px -6px}
.profil__lien{padding:8px 0;margin-block:-8px}
/* Cartes des kits : le prix et le bouton passent l'un sous l'autre quand la place manque, au lieu d'écraser le bouton. */
.design-carte__pied{flex-wrap:wrap}
.design-carte__pied .bouton{white-space:nowrap}
@media (max-width:680px){
  /* Textes trop fins sur téléphone : 11 px minimum. */
  .annonce{font-size:.6875rem}
  .design-carte__prix small{font-size:.6875rem}
}

/* ---------- Sélecteur de couleur maison (identique sur ordinateur et téléphone) ---------- */
.couleur__pastille{width:72px;height:72px;padding:0;border:4px solid #1e1c24;border-radius:50%;background:var(--c,#111116);box-shadow:0 0 0 1px rgba(255,255,255,.2),inset 0 0 0 2px rgba(255,255,255,.4);cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s}
.couleur__pastille:hover{transform:scale(1.06);box-shadow:0 0 0 1px var(--violet),inset 0 0 0 2px rgba(255,255,255,.4)}
.nuancier-fenetre{width:min(460px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--ligne-forte);border-radius:var(--rayon-l);background:var(--fond-2);color:var(--texte);overflow:auto}
.nuancier-fenetre::backdrop{background:rgba(8,7,12,.72);backdrop-filter:blur(4px)}
.nuancier-fenetre__corps{display:grid;gap:18px;padding:22px}
.nuancier-fenetre__tete{display:flex;align-items:center;justify-content:space-between;gap:12px}
.nuancier-fenetre__tete h2{font-size:1.6rem}
.nuancier-fenetre__fermer{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--ligne);border-radius:50%;background:none;color:var(--texte);font-size:1.4rem;line-height:1}
.nuancier-fenetre__apercu{display:flex;align-items:center;gap:16px}
.nuancier-fenetre__apercu>span{flex:none;width:64px;height:64px;border-radius:var(--rayon-s);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.nuancier-fenetre__apercu strong{display:block;font:400 1.5rem/1 var(--police-titre)}
.nuancier-fenetre__apercu small{display:block;margin-top:6px;color:var(--texte-doux);font-size:.875rem}
.nuancier-fenetre__grille{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.nuancier-fenetre__grille button{aspect-ratio:1;min-height:36px;border:2px solid transparent;border-radius:10px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);cursor:pointer}
.nuancier-fenetre__grille button[aria-checked="true"]{border-color:#fff;box-shadow:0 0 0 2px var(--violet)}
.nuancier-fenetre__codes{display:grid;gap:14px}
.nuancier-fenetre__codes fieldset{margin:0;padding:0;border:0}
.nuancier-fenetre__codes legend{margin-bottom:8px;font:600 .875rem/1.3 var(--police-texte)}
.nuancier-fenetre__cmjn{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.nuancier-fenetre__cmjn .champ span{font-size:.75rem;color:var(--texte-pale)}
.nuancier-fenetre__cmjn input{padding-inline:8px!important;text-align:center}
.nuancier-fenetre__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.nuancier-fenetre__actions .bouton{justify-content:center;padding-left:14px}
@media (max-width:400px){.nuancier-fenetre__grille{grid-template-columns:repeat(5,minmax(0,1fr))}.nuancier-fenetre__actions{grid-template-columns:1fr}}
/* Boutons Annuler / Valider toujours visibles en bas de la fenêtre de couleur, même sur un petit écran. */
.nuancier-fenetre .nuancier-fenetre__actions{position:sticky;bottom:-22px;z-index:1;grid-template-columns:1fr 1fr;margin:0 -22px -22px;padding:14px 22px 22px;border-top:1px solid var(--ligne);background:var(--fond-2)}
@media (max-width:400px){.nuancier-fenetre__corps{gap:14px;padding:18px}.nuancier-fenetre .nuancier-fenetre__actions{bottom:-18px;margin:0 -18px -18px;padding:12px 18px 18px}.nuancier-fenetre__grille button{min-height:0}}

/* ---------- Téléphone : moins de blocs empilés ---------- */
/* Packs, chemins et avis : une rangée de cartes qu'on fait glisser du doigt (la carte suivante dépasse pour le montrer). */
@media (max-width:680px){
  .packs,.chemins,.avis{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;gap:12px;max-width:none;margin-inline:calc(-1 * var(--marge));padding-inline:var(--marge);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--marge);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .packs::-webkit-scrollbar,.chemins::-webkit-scrollbar,.avis::-webkit-scrollbar{display:none}
  .packs>*,.chemins>*,.avis>*{scroll-snap-align:start}
  .packs>[data-apparition],.chemins>[data-apparition]{opacity:1;transform:none}
  .pack{gap:14px;padding:20px 18px 18px}
  .pack:hover,.pack--premium:hover{transform:none}
  .pack__prix{font-size:2.8rem}
  .pack__contenu{gap:8px;padding:12px 0}
  .pack__contenu li{gap:10px;font-size:.875rem}
  .pack__contenu b{min-width:38px;height:38px;border-radius:10px;font-size:1.3rem}
  .pack__livraison{font-size:.8125rem}
  .chemin,.chemin:last-child{min-height:440px}
  .avis-carte{min-height:0;padding:22px}
  /* Repères 24–48 h / Unique / 5–10 j : une seule bande de trois colonnes, sans les phrases. */
  .chemins__bandeau{grid-template-columns:repeat(3,minmax(0,1fr))}
  .repere{padding:14px 10px;text-align:center}
  .repere+.repere{border-top:0;border-left:1px solid var(--ligne)}
  .repere small{font-size:.5625rem;letter-spacing:.1em}
  .repere strong{margin:8px 0 0;font-size:1.45rem}
  .repere p{display:none}
  /* Étapes et pièces : deux par ligne. */
  .etapes{grid-template-columns:1fr 1fr;gap:28px 16px}
  .etapes .etape-carte__grand{font-size:3.2rem}
  .etapes .etape-carte__texte{padding-top:10px}
  .etape-carte__num{margin-bottom:10px;font-size:.625rem}
  .etape-carte h3{font-size:1.25rem}
  .etape-carte p{font-size:.8125rem;line-height:1.45}
  .pieces-grille{grid-template-columns:1fr 1fr;gap:10px}
  .piece-carte{gap:14px;min-height:0;padding:14px}
  .piece-carte--photo{padding-top:0}
  .piece-carte__image{margin:0 -14px}
  .piece-carte strong{font-size:1.1rem}
  .piece-carte small{font-size:.75rem}
  .piece-carte__pied{flex-wrap:wrap;gap:4px;padding-top:10px;font-size:.75rem}
}

/* ---------- Espace client : mes commandes, suivi, paiement, administration ---------- */
.texte-pale{color:var(--texte-pale)}
.bandeau-demo{margin:0 0 18px;padding:12px 16px;border:1px dashed rgba(95,224,238,.5);border-radius:var(--rayon-s);background:rgba(95,224,238,.06);color:#c9f6fb;font-size:.875rem;line-height:1.5}
.cmd-liste{display:grid;gap:14px}
.cmd{border:1px solid var(--ligne);border-radius:var(--rayon-l);background:var(--fond-2);transition:border-color .3s}
.cmd[open]{border-color:rgba(166,107,232,.45)}
.cmd__tete{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto 12px;gap:18px;align-items:center;padding:20px 24px;cursor:pointer;list-style:none}
.cmd__tete::-webkit-details-marker{display:none}
.cmd__tete::after{content:"";width:9px;height:9px;border-right:1.5px solid var(--texte-pale);border-bottom:1.5px solid var(--texte-pale);transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s var(--ease-out)}
.cmd[open]>.cmd__tete::after{transform:rotate(225deg) translate(-2px,-2px)}
.cmd__tete:focus-visible{outline:2px solid var(--violet);outline-offset:-2px;border-radius:var(--rayon-l)}
.cmd__id strong{display:block;font-weight:600;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.cmd__id small{display:block;margin-top:4px;color:var(--texte-pale);font-size:.8125rem;overflow-wrap:anywhere}
.cmd__avancement{display:grid;gap:8px;min-width:0}
.cmd__total{display:grid;gap:6px;justify-items:end;font-weight:600;font-variant-numeric:tabular-nums}
.etat-commande{display:inline-flex;width:fit-content;padding:6px 11px;border-radius:999px;background:var(--violet-voile);color:var(--violet-clair);font:600 .6875rem/1.2 var(--police-texte);letter-spacing:.1em;text-transform:uppercase}
.etat-commande--livree{background:rgba(95,224,238,.14);color:var(--cyan)}
.barre-avancement{display:block;height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.barre-avancement i{display:block;width:var(--p,0%);height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--violet),var(--cyan));transition:width .6s var(--ease-out)}
.cmd__corps{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:30px;padding:22px 24px 24px;border-top:1px solid var(--ligne)}
.cmd__infos{display:grid;gap:24px;align-content:start}
.cmd__bloc h3{margin-bottom:14px;font:600 .75rem/1 var(--police-texte);letter-spacing:.16em;text-transform:uppercase;color:var(--texte-pale)}
.cmd__bloc>.petit{margin-top:10px}
.frise{margin:0;padding:0;list-style:none}
.frise__etape{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;padding-bottom:18px}
.frise__etape:not(:last-child)::before{content:"";position:absolute;left:13px;top:30px;bottom:2px;width:2px;border-radius:2px;background:var(--ligne)}
.frise__etape.est-faite:not(:last-child)::before{background:linear-gradient(var(--violet),rgba(166,107,232,.35))}
.frise__point{display:grid;place-items:center;width:28px;height:28px;border:2px solid var(--ligne-forte);border-radius:50%;background:var(--fond-2)}
.frise__point svg{width:16px;height:16px;fill:none;stroke:#140d1d;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.est-faite .frise__point{border-color:var(--violet);background:var(--violet)}
.est-courante .frise__point{box-shadow:0 0 0 5px rgba(166,107,232,.22)}
.frise__etape strong{display:block;padding-top:3px;font-weight:600;font-size:.9375rem}
.frise__etape:not(.est-faite) strong{color:var(--texte-pale);font-weight:500}
.frise__etape small{display:block;margin-top:2px;color:var(--texte-pale);font-size:.8125rem}
.frise__etape p{margin-top:6px;color:var(--texte-doux);font-size:.875rem;line-height:1.5}
.colis{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:16px;border:1px solid var(--ligne);border-radius:var(--rayon);background:rgba(255,255,255,.02)}
.colis p span{display:block}
.colis__numero{display:block;margin-top:2px;font-weight:600;font-size:1.05rem;letter-spacing:.06em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.cmd-articles{margin:0 0 8px;padding:0;list-style:none}
.cmd-articles li{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--ligne)}
.cmd-articles strong{display:block;font-weight:500}
.cmd-articles small{display:block;margin-top:3px;color:var(--texte-pale);font-size:.8125rem;line-height:1.4}
.cmd-articles b{flex:none;font-weight:600;font-variant-numeric:tabular-nums}
.cmd-totaux{margin:0}
.cmd-totaux div{display:flex;justify-content:space-between;gap:14px;padding:6px 0}
.cmd-totaux dt{color:var(--texte-doux)}
.cmd-totaux dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.cmd-totaux div:last-child dd{font-size:1.05rem}
.cmd__paiement{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:12px}
.paiement-etat{display:inline-flex;width:fit-content;padding:5px 10px;border-radius:999px;font:600 .75rem/1.2 var(--police-texte)}
.paiement-etat--paye{background:rgba(95,224,238,.12);color:var(--cyan)}
.paiement-etat--a-payer{background:rgba(255,210,138,.12);color:#ffd28a}
.paiement-etat--demande{background:rgba(255,255,255,.06);color:var(--texte-pale)}
.factures{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.factures li{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.factures small{color:var(--texte-pale);font-size:.8125rem}
/* Suivi de commande */
.suivi{display:grid;gap:22px}
.suivi__form{max-width:760px}
.suivi-carte{padding:clamp(22px,3vw,32px);border:1px solid rgba(166,107,232,.35);border-radius:var(--rayon-l);background:radial-gradient(circle at 92% 0%,rgba(166,107,232,.18),transparent 55%),var(--fond-2)}
.suivi-carte__tete{display:grid;gap:14px;margin-bottom:26px}
.suivi-carte__tete .titre-m{margin-top:6px;font-size:clamp(1.8rem,3.4vw,2.8rem)}
.suivi-carte__tete .barre-avancement{max-width:460px}
.suivi-carte__corps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}
.suivi-carte__corps h3{margin-bottom:14px;font:600 .75rem/1 var(--police-texte);letter-spacing:.16em;text-transform:uppercase;color:var(--texte-pale)}
/* Paiement */
.paiement h2{margin-bottom:16px}
.paiement__moyens{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 18px}
.paiement__garanties{display:grid;gap:8px;margin:0 0 22px;padding:0;list-style:none}
.paiement__garanties li{position:relative;padding-left:24px;color:var(--texte-doux);font-size:.9375rem}
.paiement__garanties li::before{content:"✓";position:absolute;left:0;color:var(--violet-clair);font-weight:700}
.paiement__deja{padding:14px 16px;border-radius:var(--rayon-s);background:var(--violet-voile)}
.paiement [data-livraison-a]{margin-top:14px}
/* Administration */
.admin-outils{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.admin-filtre{flex:0 1 340px}
.admin-etapes{display:grid;gap:8px}
.admin-etape{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--ligne);border-radius:var(--rayon-s);cursor:pointer;transition:border-color .2s,background .2s}
.admin-etape:hover{border-color:rgba(166,107,232,.45)}
.admin-etape:has(input:checked){border-color:rgba(166,107,232,.55);background:var(--violet-voile)}
.admin-etape input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--violet)}
.admin-etape strong{display:block;font-weight:600;font-size:.9375rem}
.admin-etape small{display:block;margin-top:2px;color:var(--texte-pale);font-size:.8125rem}
.admin-paye{margin-top:16px}
.admin-colis{display:grid;gap:10px;margin-bottom:14px}
.admin-colis__champs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.admin-colis .bouton{justify-self:start}
.admin-ajout{margin-top:14px;cursor:pointer}
.admin-ajout:focus-within{outline:2px solid var(--violet);outline-offset:2px}
.admin-retirer,.admin-supprimer{padding:6px 12px;border:1px solid rgba(255,138,138,.4);border-radius:999px;background:none;color:var(--danger);font:600 .8125rem/1.2 var(--police-texte);cursor:pointer;transition:background .2s}
.admin-retirer:hover,.admin-supprimer:hover{background:rgba(255,138,138,.08)}
.admin-client{margin:0}
.admin-client div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;padding:7px 0;border-bottom:1px solid var(--ligne);font-size:.9375rem}
.admin-client dt{color:var(--texte-pale)}
.admin-client dd{margin:0;overflow-wrap:anywhere}
.admin-pied{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:14px 24px 20px;border-top:1px solid var(--ligne)}
.admin-statut{min-height:1.3em;margin:0;color:var(--violet-clair);font-size:.875rem}
.admin-statut--erreur{color:var(--danger)}
@media (max-width:900px){
  .cmd__corps,.suivi-carte__corps{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:680px){
  .cmd__tete{grid-template-columns:minmax(0,1fr) auto 12px;gap:12px 14px;padding:16px 18px}
  .cmd__avancement{grid-column:1/-1;grid-row:2}
  .cmd__corps{padding:18px}
  .admin-pied{padding:14px 18px 18px}
  .admin-colis__champs,.suivi__form .champs{grid-template-columns:minmax(0,1fr)}
  .admin-client div{grid-template-columns:minmax(0,1fr);gap:2px}
  .admin-filtre{flex:1 1 100%}
}