:root{
  --bleu:#15509E; --bleu-fonce:#0D3A78; --bleu-clair:#EAF2FC; --bleu-vif:#1E6FD9;
  --nuit:#0B1F3A; --nuit-2:#12305A;
  --vert:#1F9A6A; --vert-clair:#E6F6EE; --menthe:#E7F5EF; --rouge:#C8372D; --or:#E0A526;
  --ambre:#F2A93B; --ambre-clair:#FFF4DE; --sable:#FBF5EA; --lavande:#F1F0FA;
  --encre:#16202B; --gris:#4B5A69; --gris-clair:#6B7A8A; --ligne:#E2E8F0;
  --papier:#FFFFFF; --fond:#F6F9FC;
  --sans:"Manrope",system-ui,-apple-system,sans-serif;
  --rayon:12px; --rayon-sm:8px; --ombre:0 2px 10px rgba(16,40,70,.07); --ombre-lg:0 18px 44px rgba(13,58,120,.16);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fond);color:var(--encre);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-weight:800;letter-spacing:-.01em;text-wrap:balance;margin:0 0 .4em}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
::selection{background:var(--bleu);color:#fff}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

/* -------- entête -------- */
.topbar{background:var(--bleu-fonce);color:#fff;font-size:.85rem;text-align:center;padding:.55rem 1rem;display:flex;align-items:center;justify-content:center;gap:.4rem}
.topbar .icone{flex:none}
@media (max-width:600px){.topbar{font-size:.74rem;padding:.5rem .7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
header.site{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--ligne);position:sticky;top:0;z-index:40;transition:box-shadow .25s var(--ease)}
header.site.is-scrolled{box-shadow:0 4px 18px rgba(16,40,70,.08)}
.site__row{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;padding:.75rem 0;position:relative}
.icone{display:inline-block;vertical-align:middle;flex:none}

/* logo : badge "MS" + nom de marque + tagline (demande Yaniss : MS Mobile doit être visible, pas que dans les mentions légales) */
.logo{display:flex;align-items:center;gap:.65rem;text-decoration:none;white-space:nowrap}
.logo-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:28%;background:linear-gradient(135deg,var(--bleu-vif) 0%,var(--bleu-fonce) 100%);color:#fff;font-weight:800;font-family:var(--sans);letter-spacing:-.02em;flex:none;box-shadow:0 3px 10px rgba(13,58,120,.3)}
.logo-texte{display:flex;flex-direction:column;line-height:1.15}
.logo-texte b{font-weight:800;font-size:1.16rem;color:var(--bleu-fonce)}
.logo-texte small{font-size:.68rem;color:var(--gris);text-transform:uppercase;letter-spacing:.04em;font-weight:700}

.nav-principale{display:flex;gap:1.6rem;font-weight:700;font-size:.92rem;flex:1;justify-content:center}
.nav-principale a{text-decoration:none;color:var(--gris);padding:.3rem 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.nav-principale a:hover,.nav-principale a[aria-current="page"]{color:var(--bleu-fonce);border-color:var(--bleu)}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:4px;width:38px;height:38px;border:1px solid var(--ligne);border-radius:var(--rayon-sm);background:#fff;cursor:pointer;padding:0}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--bleu-fonce);margin:0 auto;border-radius:2px;transition:transform .2s var(--ease),opacity .2s var(--ease)}
.nav-toggle.ouvert span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle.ouvert span:nth-child(2){opacity:0}
.nav-toggle.ouvert span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-principale a{white-space:nowrap}
@media (max-width:1060px){
  .nav-toggle{display:flex;order:3;flex:none}
  .logo{order:1;min-width:0}
  .entete-actions{order:2;margin-left:auto;flex:none}
  .nav-principale{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--ligne);border-top:none;border-radius:0 0 var(--rayon) var(--rayon);box-shadow:var(--ombre-lg);flex-direction:column;gap:0;padding:.5rem 0;order:4}
  .nav-principale.ouvert{display:flex}
  .nav-principale a{padding:.8rem 1.2rem;border-bottom:1px solid var(--ligne);width:100%}
  .nav-principale a:last-child{border-bottom:none}
  .lien-compte span{display:none}
  .site__row{gap:.6rem;flex-wrap:nowrap}
}
@media (max-width:480px){
  .wrap{padding:0 14px}
  .logo{gap:.45rem}
  .logo-badge{width:32px !important;height:32px !important;font-size:13px !important}
  .logo-texte b{font-size:.98rem}
  .logo-texte small{display:none}
  .entete-actions{gap:.4rem}
  .panier-pill{padding:.5rem .75rem;font-size:.84rem;gap:.35rem}
  .nav-toggle{width:34px;height:34px}
}
.entete-actions{display:flex;align-items:center;gap:.7rem}
.lien-compte{font-weight:700;font-size:.88rem;text-decoration:none;color:var(--gris);display:flex;align-items:center;gap:.3rem}
.lien-compte:hover{color:var(--bleu-fonce)}
.panier-pill{display:flex;align-items:center;gap:.5rem;background:var(--bleu);color:#fff;border:none;border-radius:999px;padding:.6rem 1.1rem;font-weight:700;font-size:.92rem;cursor:pointer;text-decoration:none;transition:transform .15s var(--ease),background .15s}
.panier-pill:hover{background:var(--bleu-fonce);transform:translateY(-1px)}
.panier-pill__count{background:#fff;color:var(--bleu);border-radius:999px;min-width:1.4em;height:1.4em;display:inline-flex;align-items:center;justify-content:center;font-size:.78rem;padding:0 .3em;transition:transform .2s var(--ease)}
.panier-pill__count.bump{animation:bump .35s var(--ease)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}

/* -------- bandeau réassurance -------- */
.reassurance{background:var(--menthe);padding:.9rem 0;border-bottom:1px solid #d4ece2}
.reassurance__row{display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:center;font-size:.86rem;font-weight:700;color:#0c5a40}
.reassurance__row .icone{color:var(--vert)}
.reassurance__row span{display:flex;align-items:center;gap:.4rem}

/* -------- hero accueil -------- */
.hero-accueil{position:relative;padding:4.2rem 0 3.4rem;overflow:hidden;background:radial-gradient(900px 420px at 88% -8%, rgba(30,111,217,.55) 0%, transparent 62%), radial-gradient(700px 380px at -5% 110%, rgba(31,154,106,.35) 0%, transparent 60%), linear-gradient(160deg,#0B1F3A 0%,#12305A 100%);color:#fff}
.hero-accueil__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
@media (max-width:860px){.hero-accueil__grid{grid-template-columns:1fr}}
.eyebrow{display:inline-flex;align-items:center;gap:.4rem;background:rgba(242,169,59,.16);color:var(--ambre);font-weight:800;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;padding:.35rem .8rem;border-radius:999px;margin-bottom:1rem}
.hero-accueil h1{font-size:clamp(2rem,4.2vw,3.1rem);color:#fff}
.hero-accueil p.lead{color:#C9D6E8;font-size:1.12rem;max-width:520px}
.hero-cta{display:flex;gap:.9rem;margin-top:1.6rem;flex-wrap:wrap}
.hero-accueil .btn--principal{background:var(--ambre);color:var(--nuit)}
.hero-accueil .btn--principal:hover{background:#ffb84f;box-shadow:0 8px 18px rgba(242,169,59,.35)}
.hero-accueil .btn--secondaire{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.hero-accueil .btn--secondaire:hover{background:rgba(255,255,255,.08)}
.hero-stats{display:flex;gap:2rem;margin-top:2.2rem}
.hero-stats b{display:block;font-size:1.5rem;color:#fff}
.hero-stats span{font-size:.8rem;color:#A9BBD3}
.hero-visuel{position:relative;aspect-ratio:1/1;width:100%;max-width:400px;margin:0 auto;display:grid;place-items:center}
.hero-visuel__cercle{position:absolute;inset:6%;border-radius:32%;background:linear-gradient(135deg,var(--bleu) 0%,var(--bleu-vif) 60%,#4FA3FF 100%);box-shadow:var(--ombre-lg);animation:flotte 7s ease-in-out infinite}
.hero-visuel__icone{position:relative;color:#fff;filter:drop-shadow(0 18px 24px rgba(13,58,120,.35))}
.hero-visuel__icone .icone{width:7rem;height:7rem;stroke-width:1.2}
@keyframes flotte{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-14px) rotate(2deg)}}
.badge-flottant{position:absolute;background:#fff;border-radius:var(--rayon-sm);box-shadow:var(--ombre-lg);padding:.6rem .9rem;font-weight:700;font-size:.82rem;display:flex;align-items:center;gap:.5rem;animation:flotte2 5s ease-in-out infinite;color:var(--bleu-fonce)}
.badge-flottant .icone{color:var(--vert)}
.badge-flottant--1{top:4%;right:-4%}
.badge-flottant--2{bottom:8%;left:-6%;animation-delay:1.2s}
@media (max-width:480px){.badge-flottant--1{right:0}.badge-flottant--2{left:0}}
@keyframes flotte2{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* -------- sections génériques -------- */
section.pad{padding:3.4rem 0}
.section-tete{text-align:center;max-width:640px;margin:0 auto 2.4rem}
.section-tete h2{color:var(--bleu-fonce);font-size:clamp(1.5rem,2.6vw,2rem)}
.section-tete p{color:var(--gris)}
.section-tete--large h2{font-size:clamp(1.8rem,3.4vw,2.5rem)}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* -------- marques (page d'accueil) -------- */
.marques{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}
.marque-tuile{display:flex;align-items:center;justify-content:center;min-height:84px;background:var(--papier);border:1px solid var(--ligne);border-top:3px solid var(--couleur-marque,var(--bleu));border-radius:var(--rayon);padding:1.2rem 1rem;font-weight:800;font-size:1.05rem;color:var(--encre);text-decoration:none;text-align:center;transition:transform .2s var(--ease),box-shadow .2s var(--ease),color .2s}
.marque-tuile:hover{transform:translateY(-4px);box-shadow:var(--ombre-lg);color:var(--couleur-marque,var(--bleu))}
.marque-tuile--logo{border-top-color:var(--ligne);padding:1.1rem 1.4rem}
.marque-tuile--logo img{max-width:100%;max-height:34px;object-fit:contain}
.marque-tuile--logo:hover{border-top-color:var(--bleu)}

/* -------- catégories -------- */
.categories{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}
.categorie-tuile{background:var(--papier);border:1px solid var(--ligne);border-radius:var(--rayon);padding:1.4rem 1rem;text-align:center;text-decoration:none;color:var(--encre);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
.categorie-tuile:hover{transform:translateY(-4px);box-shadow:var(--ombre-lg);border-color:var(--bleu)}
.categorie-tuile__icone{width:52px;height:52px;margin:0 auto .6rem;border-radius:50%;background:var(--bleu-clair);display:flex;align-items:center;justify-content:center;color:var(--bleu-fonce)}
.categorie-tuile__icone .icone{width:26px;height:26px}
.categorie-tuile__nom{font-weight:700;font-size:.9rem}

/* -------- avantages -------- */
.avantages{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.3rem}
.avantage{background:var(--papier);border:1px solid var(--ligne);border-radius:var(--rayon);padding:1.5rem}
.avantage__icone{width:44px;height:44px;border-radius:var(--rayon-sm);background:var(--bleu-clair);color:var(--bleu-fonce);display:flex;align-items:center;justify-content:center;margin-bottom:.8rem}
.avantage__icone .icone{width:22px;height:22px}
.avantage h3{font-size:1.02rem;color:var(--bleu-fonce)}
.avantage p{color:var(--gris);font-size:.9rem;margin:0}

/* -------- filtres + grille catalogue -------- */
.fil-ariane{font-size:.82rem;color:var(--gris-clair);padding:1rem 0 0}
.fil-ariane a{color:var(--gris);text-decoration:none}
.fil-ariane a:hover{color:var(--bleu)}
.catalogue{display:grid;grid-template-columns:220px 1fr;gap:1.8rem;padding:1.4rem 0 3rem;align-items:start}
@media (max-width:780px){.catalogue{grid-template-columns:1fr}}
.filtres{background:var(--papier);border:1px solid var(--ligne);border-radius:var(--rayon);padding:1.1rem;position:sticky;top:90px}
@media (max-width:780px){.filtres{position:static}}
.filtres h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gris);margin-bottom:.6rem}
.filtres select{width:100%;padding:.55rem .6rem;border:1px solid var(--ligne);border-radius:var(--rayon-sm);font-family:inherit;font-size:.92rem;margin-bottom:1rem;background:#fff}
.chip-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.chip{border:1px solid var(--ligne);background:#fff;border-radius:999px;padding:.35rem .7rem;font-size:.82rem;cursor:pointer;font-family:inherit;transition:background .15s,color .15s,border-color .15s}
.chip[aria-pressed="true"]{background:var(--bleu);border-color:var(--bleu);color:#fff}

.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.1rem}
.carte{background:var(--papier);border:1px solid var(--ligne);border-radius:var(--rayon);padding:1.1rem;box-shadow:var(--ombre);display:flex;flex-direction:column;gap:.5rem;text-decoration:none;color:inherit;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.carte:hover{transform:translateY(-5px);box-shadow:var(--ombre-lg)}
.carte__vignette{aspect-ratio:4/3;border-radius:var(--rayon-sm);background:linear-gradient(135deg,var(--bleu-clair),#F5F9FF);display:grid;place-items:center;margin-bottom:.3rem;color:var(--bleu)}
.carte__vignette--photo{background:#fff;border:1px solid var(--ligne)}
.carte__vignette--photo img{width:100%;height:100%;object-fit:contain;padding:.6rem}
.carte__vignette .icone{width:2.6rem;height:2.6rem;stroke-width:1.3}
.carte__marque{font-size:1rem;letter-spacing:0;color:var(--bleu-fonce);font-weight:800}
.carte__titre{font-weight:600;font-size:.92rem;line-height:1.35;min-height:2.5em;color:var(--gris)}
.etat-badge{align-self:flex-start;font-size:.72rem;font-weight:700;padding:.22rem .55rem;border-radius:999px;background:var(--bleu-clair);color:var(--bleu-fonce)}
.etat-badge[data-etat="Neuf"]{background:var(--vert-clair);color:var(--vert)}
.carte__prix{font-size:1.35rem;font-weight:800;color:var(--bleu-fonce)}
.carte__prix-ligne{display:flex;align-items:baseline;gap:.5rem;margin-top:.2rem;flex-wrap:wrap}
.prix-marche{font-size:.86rem;color:var(--gris-clair);text-decoration:line-through}
.badge-remise{display:inline-block;font-size:.72rem;font-weight:700;color:var(--vert);background:var(--vert-clair);padding:.15rem .5rem;border-radius:999px;align-self:flex-start}
.carte__stock{font-size:.78rem;color:var(--vert);font-weight:700}
.btn{border:none;border-radius:var(--rayon-sm);padding:.7rem 1rem;font-family:inherit;font-weight:700;font-size:.92rem;cursor:pointer;text-align:center;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;transition:transform .15s var(--ease),background .15s,box-shadow .15s}
.btn--principal{background:var(--bleu);color:#fff}
.btn--principal:hover{background:var(--bleu-fonce);transform:translateY(-1px);box-shadow:0 8px 18px rgba(21,80,158,.28)}
.btn--secondaire{background:#fff;color:var(--bleu-fonce);border:1.5px solid var(--bleu)}
.btn--secondaire:hover{background:var(--bleu-clair)}
.btn--large{width:100%;padding:.85rem 1rem;font-size:1rem}
.btn:active{transform:scale(.97)}
.vide{color:var(--gris);padding:2rem 0;text-align:center}

/* -------- fiche produit -------- */
.fiche{display:grid;grid-template-columns:1fr 1fr;gap:3rem;padding:1.6rem 0 3rem}
@media (max-width:800px){.fiche{grid-template-columns:1fr;gap:1.6rem}}
.fiche__vignette{aspect-ratio:1/1;border-radius:var(--rayon);background:linear-gradient(135deg,var(--bleu-clair),#F5F9FF);display:grid;place-items:center;color:var(--bleu)}
.fiche__vignette .icone{width:7rem;height:7rem;stroke-width:1.1}
.fiche__vignette--photo{background:#fff;border:1px solid var(--ligne)}
.fiche__vignette--photo img{width:100%;height:100%;object-fit:contain;padding:1.4rem}
.fiche__marque{color:var(--bleu-fonce);font-weight:800;font-size:1.05rem}
.fiche h1{color:var(--encre);font-size:1.5rem;font-weight:700}
.fiche__prix{font-size:2.1rem;font-weight:800;color:var(--bleu-fonce)}
.fiche__prix-ligne{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;margin:.3rem 0}
.fiche__prix-ligne .prix-marche{font-size:1.1rem}
.fiche__qte{display:flex;align-items:center;gap:1rem;margin:1.2rem 0}
.fiche__specs{border-top:1px solid var(--ligne);margin-top:1.6rem;padding-top:1.2rem}
.fiche__specs dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;font-size:.9rem}
.fiche__specs dt{color:var(--gris);font-weight:700}

/* -------- panier -------- */
/* Grille panier(gauche)+récap paiement(droite) : colonne fixe de 320px sans
   repli mobile - sur petit écran elle forçait toute la page à dépasser la
   largeur de l'écran (viewport élargi à 566px au lieu de 375px, constaté),
   ce qui cassait même le header (les deux logos s'affichaient en même temps
   car leur media-query mobile ne s'appliquait plus). Empilée en 1 colonne
   sous 860px. */
.grille-panier{display:grid;grid-template-columns:1fr 320px;gap:2rem}
@media (max-width:860px){.grille-panier{grid-template-columns:1fr;gap:1.6rem}}
.ligne-panier{display:grid;grid-template-columns:1fr auto auto auto;gap:1rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--ligne)}
.ligne-panier__titre{font-weight:700}
.ligne-panier__meta{font-size:.82rem;color:var(--gris)}
/* Sous 560px, le titre + les 3 contrôles (quantité/prix/retirer) ne tiennent
   plus sur une ligne (titre écrasé lettre par lettre, constaté) : on passe
   sur 2 lignes - titre+prix en haut, quantité+retirer en bas. */
@media (max-width:560px){
  .ligne-panier{grid-template-columns:1fr auto;grid-template-rows:auto auto;row-gap:.6rem}
  .ligne-panier > div:first-child{grid-column:1/-1;grid-row:1}
  .ligne-panier > div:nth-child(3){grid-column:2;grid-row:1;justify-self:end;align-self:start}
  .ligne-panier .qte-ctl{grid-column:1;grid-row:2}
  .ligne-panier .lien-suppr{grid-column:2;grid-row:2;justify-self:end}
}
.qte-ctl{display:flex;align-items:center;border:1px solid var(--ligne);border-radius:var(--rayon-sm);overflow:hidden}
.qte-ctl button{border:none;background:var(--fond);width:2rem;height:2rem;font-size:1rem;cursor:pointer;transition:background .15s}
.qte-ctl button:hover{background:var(--bleu-clair)}
.qte-ctl input{width:2.4rem;border:none;text-align:center;font-family:inherit;font-weight:700}
.lien-suppr{color:var(--rouge);font-size:.82rem;font-weight:700;background:none;border:none;cursor:pointer;font-family:inherit}
.recap{background:var(--papier);border:1px solid var(--ligne);border-radius:var(--rayon);padding:1.3rem;box-shadow:var(--ombre)}
.recap__ligne{display:flex;justify-content:space-between;font-size:.9rem;color:var(--gris);padding:.3rem 0}
.recap__ligne--remise{color:var(--vert);font-weight:700}
.recap__total{display:flex;justify-content:space-between;font-size:1.25rem;font-weight:800;padding-top:.8rem;margin-top:.6rem;border-top:1px solid var(--ligne)}
.promo-row{display:flex;gap:.5rem;margin:1rem 0}
.promo-row input{flex:1;padding:.6rem .7rem;border:1px solid var(--ligne);border-radius:var(--rayon-sm);font-family:inherit}
.promo-row button{white-space:nowrap}
.promo-msg{font-size:.82rem;margin-top:.3rem}
.promo-msg--ok{color:var(--vert)}
.promo-msg--err{color:var(--rouge)}
.champ{margin-bottom:.9rem}
.champ label{display:block;font-size:.82rem;font-weight:700;margin-bottom:.3rem;color:var(--gris)}
/* 1rem (16px) et pas moins : un champ sous 16px déclenche le zoom
   automatique de Safari iOS au moment du tap (constaté sur le panier). */
.champ input, .champ textarea{width:100%;padding:.65rem .7rem;border:1px solid var(--ligne);border-radius:var(--rayon-sm);font-family:inherit;font-size:1rem;transition:border-color .15s}
.champ input:focus, .champ textarea:focus{outline:none;border-color:var(--bleu)}
.erreur{color:var(--rouge);font-size:.85rem;margin-top:.5rem}
.hp{position:absolute;left:-9999px}

/* -------- toast -------- */
.toast{position:fixed;bottom:1.4rem;right:1.4rem;background:var(--encre);color:#fff;padding:.85rem 1.2rem;border-radius:var(--rayon-sm);font-weight:700;font-size:.9rem;box-shadow:var(--ombre-lg);display:flex;align-items:center;gap:.6rem;z-index:100;transform:translateY(20px);opacity:0;transition:transform .3s var(--ease),opacity .3s var(--ease)}
.toast.show{transform:translateY(0);opacity:1}

/* -------- page merci / suivi -------- */
.merci{text-align:center;padding:4rem 1rem;max-width:520px;margin:0 auto}
.merci__icone{width:72px;height:72px;margin:0 auto 1rem;border-radius:50%;background:var(--vert-clair);color:var(--vert);display:flex;align-items:center;justify-content:center}
.carte-page{max-width:520px;margin:2rem auto;background:var(--papier);border:1px solid var(--ligne);border-radius:var(--rayon);padding:2rem;box-shadow:var(--ombre)}
.statut-badge{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;padding:.3rem .8rem;border-radius:999px;font-size:.85rem}
.statut-badge--payee{background:var(--vert-clair);color:var(--vert)}
.statut-badge--en_attente{background:#FFF4DE;color:var(--or)}
.statut-badge--echouee,.statut-badge--annulee{background:#FBE7E5;color:var(--rouge)}

/* -------- pages texte (légal, qui sommes-nous) -------- */
.page-texte{max-width:760px;margin:0 auto;padding:2.4rem 0 4rem}
.page-texte h1{color:var(--bleu-fonce)}
.page-texte h2{font-size:1.2rem;color:var(--bleu-fonce);margin-top:2rem}
.page-texte p,.page-texte li{color:var(--gris);line-height:1.7}
.page-texte .a-completer{background:#FFF4DE;border:1px dashed var(--or);border-radius:var(--rayon-sm);padding:.15rem .5rem;color:#8a6414;font-weight:700;font-size:.9em}
.valeurs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.3rem;margin:2rem 0}

footer.site{padding:2.8rem 0 1.6rem;margin-top:3rem;background:var(--nuit);color:#B7C5D9}
.footer-grille{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2rem;margin-bottom:2rem}
@media (max-width:700px){.footer-grille{grid-template-columns:1fr 1fr}}
.footer-grille h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ambre);margin-bottom:.8rem}
.footer-grille ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.footer-grille a{text-decoration:none;color:#D5E0EE;font-size:.9rem}
.footer-grille a:hover{color:var(--ambre)}
.footer-grille .logo-texte b{color:#fff}
.footer-grille .logo-texte small{color:#8FA3BF}
.footer-bas{border-top:1px solid rgba(255,255,255,.12);padding-top:1.2rem;color:#8FA3BF;font-size:.82rem;text-align:center}

/* -------- services (réparation, colis, sur place) -------- */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.3rem}
.service-carte{background:#fff;border-radius:var(--rayon);padding:1.7rem;border:1px solid #cfe9dd;position:relative;overflow:hidden}
.service-carte::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--vert),#4fc89a)}
.service-carte--ambre{border-color:#f5dfb0}
.service-carte--ambre::before{background:linear-gradient(90deg,var(--ambre),#ffd27a)}
.service-carte--bleu{border-color:#c9dcf3}
.service-carte--bleu::before{background:linear-gradient(90deg,var(--bleu),var(--bleu-vif))}
.service-carte__icone{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;background:var(--menthe);color:#0c5a40}
.service-carte--ambre .service-carte__icone{background:var(--ambre-clair);color:#8a5a0a}
.service-carte--bleu .service-carte__icone{background:var(--bleu-clair);color:var(--bleu-fonce)}
.service-carte h3{font-size:1.08rem;color:var(--encre)}
.service-carte p{color:var(--gris);font-size:.92rem;margin:.3rem 0 0}
.service-carte ul{margin:.8rem 0 0;padding-left:1.1rem;color:var(--gris);font-size:.9rem;line-height:1.7}

/* -------- coordonnées, horaires -------- */
.infos-boutique{display:grid;grid-template-columns:1.1fr 1fr;gap:1.4rem;align-items:stretch}
@media (max-width:820px){.infos-boutique{grid-template-columns:1fr}}
.infos-carte{background:#fff;border:1px solid var(--ligne);border-radius:var(--rayon);padding:1.6rem;box-shadow:var(--ombre)}
.infos-carte h3{color:var(--bleu-fonce);font-size:1.05rem}
.infos-ligne{display:flex;gap:.7rem;align-items:flex-start;color:var(--encre);font-size:.95rem;margin:.7rem 0}
.infos-ligne .icone{color:var(--vert);margin-top:2px}
.infos-ligne a{color:var(--bleu);font-weight:800;text-decoration:none}
.horaires{width:100%;border-collapse:collapse;font-size:.92rem;margin-top:.4rem}
.horaires td{padding:.45rem 0;border-bottom:1px dashed var(--ligne)}
.horaires td:last-child{text-align:right;font-weight:700;color:var(--encre);font-variant-numeric:tabular-nums}
.horaires tr.aujourdhui td{color:#0c5a40;font-weight:800}
.badge-ouvert{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:800;padding:.25rem .65rem;border-radius:999px;background:var(--menthe);color:#0c5a40;margin-bottom:.4rem}
.badge-ouvert::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--vert)}

/* -------- étoiles (avis) -------- */
.etoiles{display:inline-flex;gap:2px;color:var(--ambre);vertical-align:middle}
.etoiles .icone{width:15px;height:15px}
.etoiles .etoile-vide{color:#E3D9C5;display:inline-flex}

/* -------- avis clients -------- */
.avis-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.1rem}
.avis-carte{background:#fff;border:1px solid var(--ligne);border-radius:var(--rayon);padding:1.2rem 1.25rem;box-shadow:var(--ombre);display:flex;flex-direction:column;gap:.55rem}
.avis-carte p{margin:0;color:var(--encre);font-size:.92rem;line-height:1.6}
.avis-carte__tete{display:flex;align-items:center;gap:.7rem}
.avis-carte__tete strong{display:block;font-size:.95rem;color:var(--encre)}
.avis-carte__tete small{display:block;color:var(--gris-clair);font-size:.76rem}
.avis-avatar{width:38px;height:38px;border-radius:50%;background:var(--bleu);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex:none}
.avis-vide{text-align:center;color:var(--gris);padding:1.4rem;background:#fff;border:1px dashed #cdd7e3;border-radius:var(--rayon)}
.avis-resume{display:flex;align-items:center;gap:1rem;background:#fff;border:1px solid var(--ligne);border-radius:var(--rayon);padding:.9rem 1.3rem;box-shadow:var(--ombre);width:max-content;margin:0 auto 1.6rem}
.avis-resume__note{font-size:2.2rem;font-weight:800;color:var(--encre);line-height:1}
.avis-resume__txt{font-size:.82rem;color:var(--gris)}
.avis-bloc{background:#fff;border:1px solid var(--ligne);border-radius:var(--rayon);padding:1.6rem;margin-top:2.4rem}
.avis-bloc h2{font-size:1.3rem;color:var(--bleu-fonce);margin-bottom:1rem}
.avis-form{max-width:560px;margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--ligne)}
.avis-form h3{font-size:1.1rem;color:var(--bleu-fonce)}
.avis-form__aide{color:var(--gris);font-size:.86rem;margin:0 0 .9rem}
.avis-form__ligne{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.avis-form__ok{margin-top:.7rem;color:#0c5a40;background:var(--menthe);border-radius:var(--rayon-sm);padding:.6rem .8rem;font-weight:700;font-size:.9rem}
.notation{position:relative;display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px;margin-bottom:1rem}
.notation input{position:absolute;opacity:0;pointer-events:none}
.notation label{cursor:pointer;color:#D9CDB6;padding:2px;display:inline-flex;transition:color .15s}
.notation label .icone{width:26px;height:26px}
.notation input:checked ~ label,.notation label:hover,.notation label:hover ~ label{color:var(--ambre)}
.notation input:focus-visible + label{outline:2px solid var(--bleu);border-radius:4px}
@media (max-width:560px){.avis-form__ligne{grid-template-columns:1fr}}

/* -------- façade du magasin en fond (bas de page) -------- */
.facade-fond{background:linear-gradient(180deg,rgba(11,31,58,.82) 0%,rgba(11,31,58,.9) 100%),url("facade-ms-mobile.webp") center/cover no-repeat;color:#fff}
.facade-fond .section-tete h2{color:#fff}
.facade-fond .section-tete p{color:#D5E0EE}
.facade-fond .infos-carte{background:rgba(255,255,255,.97)}

/* ==================== animations ==================== */
@keyframes montee{from{opacity:0;transform:translateY(22px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes derive{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-3%,4%,0) scale(1.06)}}
@keyframes defile{to{transform:translate3d(-50%,0,0)}}
@keyframes lueur{0%{box-shadow:0 0 0 0 rgba(31,196,138,.55)}70%{box-shadow:0 0 0 12px rgba(31,196,138,0)}100%{box-shadow:0 0 0 0 rgba(31,196,138,0)}}
@keyframes balayage{0%{transform:translateX(-120%) skewX(-20deg)}100%{transform:translateX(260%) skewX(-20deg)}}
@keyframes scan{0%{top:-10%;opacity:0}15%{opacity:.9}85%{opacity:.9}100%{top:110%;opacity:0}}
@keyframes pointilles{to{stroke-dashoffset:-160}}

.hero-accueil .eyebrow,.hero-accueil h1,.hero-accueil .lead,.hero-accueil .hero-cta,.hero-accueil .hero-stats{opacity:0;animation:montee .9s var(--ease) forwards}
.hero-accueil .eyebrow{animation-delay:.05s}
.hero-accueil h1{animation-delay:.18s}
.hero-accueil .lead{animation-delay:.34s}
.hero-accueil .hero-cta{animation-delay:.48s}
.hero-accueil .hero-stats{animation-delay:.62s}
.hero-accueil::before{content:"";position:absolute;inset:-20%;background:radial-gradient(520px 320px at 70% 30%,rgba(30,111,217,.28),transparent 70%),radial-gradient(420px 280px at 20% 80%,rgba(31,196,138,.18),transparent 70%);animation:derive 16s ease-in-out infinite;pointer-events:none;z-index:0}
.hero-accueil .wrap{position:relative;z-index:1}

.circuit{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.55}
.circuit path{fill:none;stroke:rgba(120,190,255,.35);stroke-width:1.2;stroke-dasharray:6 10;animation:pointilles 9s linear infinite}
.circuit .noeud{fill:rgba(31,196,138,.9)}

.hero-visuel{perspective:900px}
.hero-visuel__cercle{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s var(--ease)}
.badge-flottant{transition:transform .35s var(--ease)}

.defile{overflow:hidden;background:var(--nuit);color:#fff;padding:1.1rem 0;position:relative}
.defile::before,.defile::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.defile::before{left:0;background:linear-gradient(90deg,var(--nuit),transparent)}
.defile::after{right:0;background:linear-gradient(-90deg,var(--nuit),transparent)}
.defile__piste{display:flex;gap:3rem;width:max-content;animation:defile 32s linear infinite}
.defile:hover .defile__piste{animation-play-state:paused}
.defile__piste span{font-weight:800;font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;color:#D5E0EE;white-space:nowrap;display:flex;align-items:center;gap:3rem}
.defile__piste span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--ambre)}

.reveal{transform:translateY(26px) scale(.985);filter:blur(3px);transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease)}
.reveal.in{transform:none;filter:none}
.reveal-stagger>*{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal-stagger.in>*{opacity:1;transform:none}
.reveal-stagger.in>*:nth-child(2){transition-delay:.08s}
.reveal-stagger.in>*:nth-child(3){transition-delay:.16s}
.reveal-stagger.in>*:nth-child(4){transition-delay:.24s}
.reveal-stagger.in>*:nth-child(5){transition-delay:.32s}
.reveal-stagger.in>*:nth-child(6){transition-delay:.4s}
.reveal-stagger.in>*:nth-child(n+7){transition-delay:.45s}

.btn--principal{position:relative;overflow:hidden;isolation:isolate}
.btn--principal::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-120%) skewX(-20deg);pointer-events:none}
.btn--principal:hover::after{animation:balayage .7s var(--ease)}

.carte__vignette .icone{transition:transform .5s var(--ease)}
.carte:hover .carte__vignette .icone{transform:scale(1.12) rotate(-4deg)}
.carte{transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.carte:hover{border-color:#bcd5f3}
.categorie-tuile__icone{transition:transform .4s var(--ease),background .3s,color .3s}
.categorie-tuile:hover .categorie-tuile__icone{transform:scale(1.08) rotate(-6deg);background:var(--bleu-vif);color:#fff}
.marque-tuile{transition:transform .25s var(--ease),box-shadow .25s,color .25s,border-color .25s}

.carte__vignette{position:relative;overflow:hidden}
.carte__vignette::after{content:"";position:absolute;left:0;right:0;height:38%;top:-10%;background:linear-gradient(180deg,transparent,rgba(30,111,217,.18),transparent);opacity:0;pointer-events:none}
.carte:hover .carte__vignette::after{animation:scan 1.6s ease-in-out infinite}

.badge-ouvert::before{animation:lueur 2s infinite}

@media (prefers-reduced-motion:reduce){
  .hero-accueil .eyebrow,.hero-accueil h1,.hero-accueil .lead,.hero-accueil .hero-cta,.hero-accueil .hero-stats{opacity:1;animation:none}
  .hero-accueil::before,.defile__piste,.circuit path{animation:none}
  .reveal,.reveal-stagger>*{opacity:1;transform:none;filter:none}
}

/* -------- engagements près de l'achat -------- */
.garanties{list-style:none;margin:1.1rem 0;padding:0;display:grid;gap:.6rem}
.garanties li{display:flex;gap:.7rem;align-items:flex-start;background:var(--menthe);border-radius:var(--rayon-sm);padding:.6rem .8rem;font-size:.88rem;color:#0c5a40}
.garanties li .icone{color:var(--vert);margin-top:2px}
.garanties b{color:#0c5a40}
.moyens-paiement{display:flex;flex-wrap:wrap;gap:.4rem;margin:.9rem 0 .2rem}
.moyens-paiement span{font-size:.72rem;font-weight:800;letter-spacing:.02em;color:var(--bleu-fonce);background:#fff;border:1px solid var(--ligne);border-radius:6px;padding:.3rem .55rem}

/* -------- inscription aux nouveautés -------- */
.nouveautes{max-width:560px;margin:0 auto;text-align:center}
.nouveautes h3{color:var(--bleu-fonce);font-size:1.2rem;margin-bottom:.3rem}
.nouveautes p{color:var(--gris);font-size:.9rem;margin:0 0 .9rem}
.nouveautes__ligne{display:flex;gap:.5rem}
.nouveautes__ligne input{flex:1;padding:.7rem .8rem;border:1px solid var(--ligne);border-radius:var(--rayon-sm);font-family:inherit;font-size:.95rem}
.nouveautes .case{justify-content:center;font-size:.82rem;color:var(--gris);margin:.7rem 0 0}
@media (max-width:560px){.nouveautes__ligne{flex-direction:column}}

/* -------- FAQ -------- */
.faq{display:grid;gap:.6rem;margin-top:1.4rem}
.faq details{background:#fff;border:1px solid var(--ligne);border-radius:var(--rayon);padding:.9rem 1.1rem;transition:border-color .2s,box-shadow .2s}
.faq details[open]{border-color:#bcd5f3;box-shadow:var(--ombre)}
.faq summary{cursor:pointer;font-weight:700;color:var(--encre);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.3rem;color:var(--bleu);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:.7rem 0 .2rem;color:var(--gris)}
.faq details[open]{animation:montee .4s var(--ease)}

/* -------- grille d'état -------- */
.niveaux{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin:1.4rem 0 2rem}
.niveau{background:#fff;border:1px solid var(--ligne);border-radius:var(--rayon);padding:1.3rem;box-shadow:var(--ombre);transition:transform .25s var(--ease),box-shadow .25s}
.niveau:hover{transform:translateY(-4px);box-shadow:var(--ombre-lg)}
.niveau__pastille{display:block;width:14px;height:14px;border-radius:50%;margin-bottom:.7rem}
.niveau h2{font-size:1.1rem;margin:0 0 .4rem;color:var(--bleu-fonce)}
.niveau p{color:var(--gris);font-size:.9rem;margin:0 0 .6rem}
.niveau ul{margin:0;padding-left:1.1rem;color:var(--encre);font-size:.88rem;line-height:1.7}

/* -------- un produit, plusieurs états -------- */
.etats-dispo{display:flex;flex-wrap:wrap;gap:.3rem}
.etat-puce{font-size:.7rem;font-weight:800;padding:.2rem .5rem;border-radius:999px;background:var(--bleu-clair);color:var(--bleu-fonce)}
.etat-puce[data-etat="Neuf"]{background:var(--vert-clair);color:#0c5a40}
.etat-puce[data-etat="Bon état"]{background:var(--ambre-clair);color:#8a5a0a}
.carte__depuis{font-size:.74rem;color:var(--gris);margin-top:.2rem}
.choix-etat{border:0;padding:0;margin:1rem 0}
.choix-etat legend{font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--gris);margin-bottom:.5rem}
.choix-etat__option{display:flex;align-items:center;gap:.6rem;border:1.5px solid var(--ligne);border-radius:var(--rayon);padding:.7rem .9rem;margin-bottom:.5rem;cursor:pointer;background:#fff;transition:border-color .2s,box-shadow .2s}
.choix-etat__option:hover{border-color:#bcd5f3}
.choix-etat__option:has(input:checked){border-color:var(--bleu);box-shadow:0 0 0 3px rgba(21,80,158,.12)}
.choix-etat__option input{accent-color:var(--bleu);width:18px;height:18px}
.choix-etat__nom{font-weight:700;flex:1}
.choix-etat__prix{font-weight:800;color:var(--bleu-fonce);font-variant-numeric:tabular-nums}

/* -------- ruptures de stock -------- */
.etat-puce--rupture{background:#f1f3f6;color:#8694A3;text-decoration:line-through}
.badge-rupture{display:inline-block;align-self:flex-start;font-size:.8rem;font-weight:800;color:#fff;background:var(--rouge);padding:.3rem .65rem;border-radius:6px;margin-top:.4rem}
.rupture-texte{color:var(--rouge);font-weight:800}
.choix-etat__option--epuise{opacity:.55;cursor:not-allowed;background:#f7f8fa}
.choix-etat__option--epuise .choix-etat__prix{color:var(--rouge);font-size:.8rem}
#btnAjouter:disabled{background:#B7C2D0;cursor:not-allowed;box-shadow:none}

/* -------- logo MS Mobile (n° 2) -------- */
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{display:block;width:auto}
/* Priorité CSS : ".logo img" (0,1,1) passait devant ".logo__marque"
   (0,1,0) toute seule - le logo complet ET la mini-icône s'affichaient
   donc TOUJOURS ensemble sur mobile, quelle que soit la largeur d'écran
   (constaté sur le panier, présent sur toutes les pages). On regagne la
   priorité en qualifiant chaque règle sur ".logo img.xxx" plutôt que sur
   la seule classe. */
.logo img.logo__marque{display:none}
@media (max-width:480px){.logo img.logo__complet{display:none}.logo img.logo__marque{display:block}}

/* -------- photo du magasin en héros -------- */
.hero-photo{position:relative;width:100%;max-width:460px;aspect-ratio:4/3;object-fit:cover;border-radius:22px;box-shadow:0 24px 60px rgba(0,0,0,.35);margin:0 auto;display:block}
.nav-itineraire{margin-top:.8rem}
.barre-achat{display:none}
@media (max-width:800px){.barre-achat{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:.8rem;background:#fff;border-top:1px solid var(--ligne);padding:.7rem 1rem;box-shadow:0 -6px 20px rgba(16,40,70,.12)}.barre-achat span{font-weight:800;color:var(--bleu-fonce);font-variant-numeric:tabular-nums}.barre-achat b{display:block;font-size:1.2rem}.barre-achat .btn{padding:.7rem 1rem;white-space:nowrap}.barre-achat button:disabled{background:#B7C2D0}body:has(.barre-achat){padding-bottom:84px}}

/* -------- réservation en boutique (acompte 60 %) -------- */
.reserv{position:relative;margin:.8rem 0 1.2rem}
.reserv #btnReserver{width:100%}
.reserv__form{display:grid;gap:.8rem;margin-top:1rem;padding:1.1rem;border:1px solid var(--ligne);border-radius:14px;background:#fff}
.reserv__form[hidden]{display:none}
.reserv__form label{display:grid;gap:.3rem;font-weight:700;font-size:.9rem;color:var(--bleu-fonce)}
.reserv__form input:not([type="checkbox"]){font:inherit;font-weight:500;padding:.7rem .8rem;border:1.5px solid var(--ligne);border-radius:10px;background:#fff}
.reserv__form input:focus-visible{outline:3px solid var(--bleu);outline-offset:2px}
.reserv__case{display:flex!important;align-items:flex-start;gap:.5rem;font-weight:500!important}
.reserv__texte{margin:0;font-size:.92rem;color:var(--gris)}
.reserv__erreur{margin:0;color:var(--rouge);font-weight:700;font-size:.9rem;min-height:0}
.reserv__erreur:empty{display:none}