/* =====================================================================
   FARAY ELEGANCE — boutique (cartes, catalogue, fiche, panier, commande)
   Les classes du kit (shop-*, pd-*, ct-*, co-*, od-*, ac-*) sont stylées
   ici : le JavaScript du kit s'appuie dessus et en fabrique certaines.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Prix (HTML produit par Pricing::display et par shop.js)
   --------------------------------------------------------------------- */
.shop-price { font-weight: var(--f-moyen); color: var(--f-nuit); font-variant-numeric: tabular-nums; white-space: nowrap; }
.shop-price--sale { color: var(--f-rouge); }
.shop-price-old { margin-left: 8px; font-weight: var(--f-leger); color: var(--f-gris-clair); font-size: .88em; text-decoration-thickness: 1px; white-space: nowrap; }
.shop-price--quote { color: var(--f-gris); font-style: italic; }
.shop-price-tax { color: var(--f-gris); font-size: .75em; }
.shop-muted { color: var(--f-gris); }
.shop-small { font-size: 13px; }

/* Boutons génériques du kit (produits aussi par shop.js) */
.shop-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border: 1px solid var(--f-nuit); border-radius: 0;
  background: var(--f-nuit); color: #fff; font: inherit;
  font-size: 11px; font-weight: var(--f-moyen); letter-spacing: .24em; text-transform: uppercase;
  transition: background-color .3s, border-color .3s, color .3s; cursor: pointer;
}
.shop-btn:hover { background: var(--f-rouge); border-color: var(--f-rouge); color: #fff; }
.shop-btn--outline, .shop-btn--ghost { background: transparent; color: var(--f-nuit); }
.shop-btn--outline:hover, .shop-btn--ghost:hover { background: var(--f-nuit); border-color: var(--f-nuit); color: #fff; }
.shop-btn--ghost { border-color: transparent; text-decoration: underline; text-underline-offset: 4px; }
.shop-btn--block { width: 100%; }
.shop-btn--lg { min-height: 56px; }
.shop-btn--primary, .shop-btn--dark { background: var(--f-nuit); border-color: var(--f-nuit); color: #fff; }
.shop-btn--sm { min-height: 40px; padding: 0 16px; font-size: 10px; }
.shop-btn--wa { background: transparent; color: var(--f-nuit); }
.shop-btn.is-disabled, .f-btn.is-disabled { opacity: .45; }
.shop-btn[disabled] { opacity: .5; pointer-events: none; }

/* ---------------------------------------------------------------------
   Grille et carte produit
   --------------------------------------------------------------------- */
.shop-grid.fb-grille {
  display: grid; grid-template-columns: repeat(var(--shop-cols, 4), minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 56px) clamp(14px, 1.6vw, 26px);
}
@media (max-width: 1199px) { .shop-grid.fb-grille { grid-template-columns: repeat(min(var(--shop-cols, 3), 3), minmax(0, 1fr)); } }
@media (max-width: 760px)  { .shop-grid.fb-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; } }

/* Défilement horizontal sur mobile (pièces liées) */
@media (max-width: 760px) {
  .shop-grid.fb-grille--defile {
    display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 62%;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--f-gouttiere) * -1); padding-inline: var(--f-gouttiere);
  }
  .shop-grid.fb-grille--defile > * { scroll-snap-align: start; }
  .shop-grid.fb-grille--defile::-webkit-scrollbar { display: none; }
}

.fc { position: relative; display: grid; gap: 14px; align-content: start; min-width: 0; }
.fc__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--f-sable); }
.fc__lien-img { position: absolute; inset: 0; display: block; }
.fc__lien-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform 1.4s var(--f-ease), opacity .7s var(--f-ease); }
.fc__lien-img .is-hover { opacity: 0; }
.fc:hover .fc__lien-img .is-main { transform: scale(1.04); }
.fc:hover .fc__lien-img .is-hover { opacity: 1; transform: scale(1.04); }
.fc__sans-photo { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--f-gris); }
.fc--epuise .fc__lien-img img { filter: grayscale(.35); opacity: .72; }
.fc__badges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; }

.fc__rapide {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  transform: translateY(calc(100% + 12px)); transition: transform .5s var(--f-ease);
}
.fc:hover .fc__rapide, .fc:focus-within .fc__rapide { transform: none; }
.fc__rapide-lien, .fc__rapide-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 0 14px;
  background: rgba(255,255,255,.95); color: var(--f-nuit); border: 0;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 10.5px; font-weight: var(--f-moyen); letter-spacing: .2em; text-transform: uppercase;
}
.fc__rapide-btn:hover, .fc__rapide-lien:hover { background: var(--f-nuit); color: #fff; }
.fc__tailles { letter-spacing: .14em; }
.fc__tailles span { color: var(--f-gris); margin-right: 6px; }
@media (hover: none) { .fc__rapide { display: none; } }

.fc__corps { display: grid; gap: 6px; }
.fc__cat { font-size: 10px; font-weight: var(--f-moyen); letter-spacing: .26em; text-transform: uppercase; color: var(--f-gris); }
.fc__nom { margin: 0; font-size: 14.5px !important; font-weight: var(--f-texte) !important; line-height: 1.45 !important; color: var(--f-encre) !important; letter-spacing: .005em; }
.fc__nom a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fc__nom a:hover { color: var(--f-nuit); }
.fc__pied { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-top: 2px; font-size: 14.5px; }
.fc__couleurs { font-size: 11px; color: var(--f-gris); letter-spacing: .06em; }
@media (max-width: 760px) { .fc__nom { font-size: 13.5px !important; } .fc__pied { font-size: 13.5px; } }

.shop-stars { display: inline-flex; align-items: center; gap: 2px; }
.shop-stars svg { width: 13px; height: 13px; }
.shop-stars svg.is-on { fill: var(--f-nuit); }
.shop-stars svg.is-off { fill: var(--f-ligne-fonce); }
.shop-stars-count { margin-left: 6px; font-size: 12px; color: var(--f-gris); }

/* ---------------------------------------------------------------------
   Catalogue
   --------------------------------------------------------------------- */
.fb-tete { padding-top: clamp(40px, 6vw, 88px); }
.fb-tete__grille { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: end; }
.fb-tete.a-visuel .fb-tete__grille { grid-template-columns: 1fr minmax(220px, 300px); }
.fb-tete__texte { display: grid; gap: 18px; justify-items: start; }
.fb-tete__titre { font-size: clamp(42px, 6.6vw, 108px); margin: 10px 0 4px; }
.fb-tete__texte .f-lead { margin: 0; max-width: 60ch; }
.fb-tete__compte { margin: 0; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--f-gris); }
.fb-tete__compte strong { color: var(--f-nuit); font-weight: var(--f-gras); }
.fb-tete__visuel { aspect-ratio: 4 / 5; }
.fb-tete__visuel img { object-position: center 20%; }
.fb-tete.a-portant .fb-tete__grille { grid-template-columns: 1fr 1.1fr; align-items: center; }
.fb-tete__portant { aspect-ratio: 16 / 10; }
.fb-tete__portant img { object-position: 64% 40%; }
@media (max-width: 760px) {
  .fb-tete.a-visuel .fb-tete__grille, .fb-tete.a-portant .fb-tete__grille { grid-template-columns: 1fr; }
  .fb-tete__visuel { display: none; }
  .fb-tete__portant { aspect-ratio: 3 / 2; }
}

/* Les collections en bulles (défilement horizontal) */
.fb-collections {
  display: flex; gap: clamp(16px, 2vw, 28px); overflow-x: auto; scrollbar-width: none;
  padding: clamp(32px, 4vw, 52px) var(--f-gouttiere) 28px; max-width: var(--f-max); margin: 0 auto;
}
.fb-collections::-webkit-scrollbar { display: none; }
.fb-bulle { flex: none; display: grid; justify-items: center; gap: 12px; width: 92px; text-align: center; }
.fb-bulle__img {
  position: relative; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; overflow: hidden;
  background: var(--f-sable); box-shadow: 0 0 0 1px var(--f-ligne); transition: box-shadow .35s var(--f-ease);
}
.fb-bulle__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform 1s var(--f-ease); }
.fb-bulle:hover .fb-bulle__img img { transform: scale(1.08); }
.fb-bulle__img--tout { background: var(--f-nuit); color: var(--f-rouge); }
.fb-bulle__img--tout svg { width: 30px; height: 32px; }
.fb-bulle.is-actif .fb-bulle__img { box-shadow: 0 0 0 1px var(--f-papier), 0 0 0 3px var(--f-nuit); }
.fb-bulle__nom { font-size: 10px; font-weight: var(--f-moyen); letter-spacing: .14em; text-transform: uppercase; line-height: 1.35; color: var(--f-gris); }
.fb-bulle.is-actif .fb-bulle__nom, .fb-bulle:hover .fb-bulle__nom { color: var(--f-nuit); }

/* Barre d'outils collante */
.fb-outils {
  position: sticky; top: calc(var(--f-entete) + var(--promo-banner-h, 0px)); z-index: 40;
  background: rgba(251,249,245,.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--f-ligne); border-bottom: 1px solid var(--f-ligne);
}
.fb-outils__barre { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; }
.fb-outils__gauche { display: flex; align-items: center; gap: 18px; min-width: 0; }
.fb-filtrer {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 12px;
  border: 1px solid var(--f-nuit); background: var(--f-nuit); color: #fff;
  font-size: 10.5px; font-weight: var(--f-moyen); letter-spacing: .22em; text-transform: uppercase;
}
.fb-filtrer svg { width: 18px; height: 18px; }
.fb-filtrer em { display: inline-grid; place-items: center; min-width: 18px; height: 18px; border-radius: 999px; background: var(--f-rouge); font-style: normal; font-size: 10px; letter-spacing: 0; }
.fb-filtrer:hover { background: var(--f-rouge); border-color: var(--f-rouge); }
.fb-rapides { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.fb-rapides a {
  flex: none; height: 40px; display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid var(--f-ligne-fonce);
  font-size: 10.5px; font-weight: var(--f-moyen); letter-spacing: .18em; text-transform: uppercase; color: var(--f-nuit);
}
.fb-rapides a:hover { border-color: var(--f-nuit); }
.fb-rapides a.is-actif { background: var(--f-nuit); border-color: var(--f-nuit); color: #fff; }
.fb-tri { display: flex; align-items: center; gap: 10px; }
.fb-tri label { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--f-gris); }
.fb-tri select {
  height: 40px; padding: 0 34px 0 12px; border: 1px solid var(--f-ligne-fonce); border-radius: 0; background-color: var(--f-blanc);
  font: inherit; font-size: 13px; color: var(--f-nuit); -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2329265B' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
@media (max-width: 760px) {
  .fb-tri label, .fb-rapides a:nth-child(2) { display: none; }
  .fb-tri select { max-width: 150px; }
  .fb-outils__gauche { gap: 8px; }
}

.fb-corps { padding-top: 32px; padding-bottom: clamp(72px, 9vw, 140px); }
.fb-actifs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 28px; }
.fb-actifs a:not(.fb-actifs__tout) {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 14px; background: var(--f-ivoire);
  font-size: 12.5px; color: var(--f-nuit);
}
.fb-actifs a svg { width: 14px; height: 14px; }
.fb-actifs a:hover { background: var(--f-sable); }
.fb-actifs__tout { margin-left: 6px; font-size: 12px; color: var(--f-gris); text-decoration: underline; text-underline-offset: 3px; }
.fb-coeur { margin-bottom: clamp(56px, 6vw, 96px); }

/* Pause éditoriale dans la grille */
.fb-pause { grid-column: span 2; position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--f-nuit); color: #fff; min-height: 100%; }
.fb-pause__img { aspect-ratio: auto; }
.fb-pause__texte { display: grid; align-content: center; justify-items: start; gap: 14px; padding: clamp(22px, 3vw, 44px); }
.fb-pause__texte .f-y { width: 22px; height: 24px; }
.fb-pause__citation { margin: 0; font-size: clamp(20px, 2vw, 30px); font-weight: var(--f-fin); line-height: 1.25; }
.fb-pause__sig { margin: 0; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.6); }
@media (max-width: 760px) { .fb-pause { grid-template-columns: 1fr; } .fb-pause__img { aspect-ratio: 16 / 10; } }

.fb-vide { display: grid; justify-items: center; gap: 18px; padding: 80px 0; text-align: center; }
.fb-vide .f-y { width: 30px; height: 32px; }
.fb-vide p { color: var(--f-gris); margin: 0; }

.fb-pages { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: clamp(56px, 6vw, 96px); }
.fb-pages a, .fb-pages .gap {
  display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px;
  font-size: 13px; font-variant-numeric: tabular-nums; color: var(--f-gris); border-bottom: 1px solid transparent;
}
.fb-pages a:hover { color: var(--f-nuit); border-color: var(--f-nuit); }
.fb-pages a.is-current { color: var(--f-nuit); font-weight: var(--f-gras); border-color: var(--f-rouge); }
.fb-pages__fleche svg { width: 20px; height: 20px; }

/* Tiroir des filtres */
.fb-filtres-fond { position: fixed; inset: 0; z-index: 140; background: rgba(20,18,46,.45); opacity: 0; visibility: hidden; transition: opacity .35s var(--f-ease), visibility 0s .35s; }
.fb-filtres {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 141; width: min(420px, 92vw);
  display: grid; grid-template-rows: auto 1fr auto; background: var(--f-papier);
  transform: translateX(-102%); transition: transform .55s var(--f-ease);
}
.fb-filtres.is-ouvert { transform: none; }
.fb-filtres.is-ouvert + * , .fb-filtres-fond:has(+ .fb-filtres.is-ouvert) { opacity: 1; visibility: visible; transition-delay: 0s; }
body.f-bloque .fb-filtres-fond { opacity: 1; visibility: visible; transition-delay: 0s; }
.fb-filtres__tete { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 18px 28px; border-bottom: 1px solid var(--f-ligne); }
.fb-filtres__tete h2 { font-size: 11px; font-weight: var(--f-gras); letter-spacing: .3em; text-transform: uppercase; }
.fb-filtres__corps { overflow-y: auto; padding: 8px 28px 24px; }
.fb-groupe { border-bottom: 1px solid var(--f-ligne); }
.fb-groupe > summary {
  display: flex; align-items: center; justify-content: space-between; padding: 20px 0; cursor: pointer; list-style: none;
  font-size: 11px; font-weight: var(--f-moyen); letter-spacing: .26em; text-transform: uppercase; color: var(--f-nuit);
}
.fb-groupe > summary::-webkit-details-marker { display: none; }
.fb-groupe > summary::after { content: "+"; font-size: 18px; font-weight: var(--f-fin); }
.fb-groupe[open] > summary::after { content: "−"; }
.fb-liste { list-style: none; margin: 0 0 18px; padding: 0; display: grid; }
.fb-liste a { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 14px; color: var(--f-encre); }
.fb-liste a em { font-style: normal; color: var(--f-gris-clair); font-size: 12px; }
.fb-liste a.is-active { color: var(--f-rouge); }
.fb-liste .sub { list-style: none; padding-left: 14px; }
.fb-valeurs { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 20px; }
.fb-valeurs a {
  display: inline-flex; align-items: center; gap: 8px; min-width: 46px; height: 40px; padding: 0 12px; justify-content: center;
  border: 1px solid var(--f-ligne-fonce); font-size: 13px; color: var(--f-encre); transition: border-color .2s, background-color .2s;
}
.fb-valeurs a:hover { border-color: var(--f-nuit); }
.fb-valeurs a.is-active { background: var(--f-nuit); border-color: var(--f-nuit); color: #fff; }
.fb-valeurs--couleur a { justify-content: flex-start; }
.fb-valeurs a i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.fb-prix { display: grid; gap: 12px; padding-bottom: 22px; }
.fb-prix__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fb-filtres__pied { display: flex; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--f-ligne); }
.fb-filtres__pied .f-btn { flex: 1; padding: 0 12px; }

/* ---------------------------------------------------------------------
   Fiche produit
   --------------------------------------------------------------------- */
.fp-ariane { display: flex; flex-wrap: wrap; gap: 10px; padding-block: 22px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--f-gris); }
.fp-ariane a:hover { color: var(--f-nuit); }
.fp-grille { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); gap: clamp(32px, 5vw, 96px); align-items: start; padding-bottom: clamp(64px, 8vw, 120px); }

.fp-galerie { display: grid; grid-template-columns: 1fr; gap: 14px; }
.fp-galerie.a-vignettes { grid-template-columns: 84px 1fr; }
.fp-vignettes { display: grid; gap: 10px; align-content: start; position: sticky; top: calc(var(--f-entete) + 24px); }
.pd-thumb { position: relative; display: block; padding: 0; border: 0; background: var(--f-sable); aspect-ratio: 4 / 5; overflow: hidden; cursor: pointer; opacity: .55; transition: opacity .3s; }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--f-rouge); transform: scaleX(0); transition: transform .4s var(--f-ease); }
.pd-thumb:hover { opacity: .85; }
.pd-thumb.is-active { opacity: 1; }
.pd-thumb.is-active::after { transform: scaleX(1); }
.fp-scene { position: relative; display: grid; gap: 12px; }
.fp-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--f-sable); cursor: zoom-in; }
.fp-photo > img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transform-origin: var(--zx, 50%) var(--zy, 50%); transition: transform .5s var(--f-ease); }
.fp-photo.is-loupe > img { transform: scale(1.9); transition: transform .2s ease-out; }
.fp-photo > img.is-entree { animation: fp-entree .7s var(--f-ease); }
@keyframes fp-entree { from { opacity: .2; } to { opacity: 1; } }
.fp-sans-photo { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 14px; color: var(--f-gris); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.fp-sans-photo .f-y { width: 34px; height: 36px; }
.fp-badges { position: absolute; top: 16px; left: 16px; display: grid; gap: 6px; justify-items: start; pointer-events: none; }
.fp-agrandir { position: absolute; right: 14px; bottom: 14px; width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--f-nuit); box-shadow: 0 8px 22px -12px rgba(20,18,46,.5); }
.fp-agrandir svg { width: 20px; height: 20px; }
.fp-agrandir:hover { background: var(--f-nuit); color: #fff; }
.fp-compteur { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 11px; letter-spacing: .24em; color: var(--f-gris); font-variant-numeric: tabular-nums; }
.fp-compteur span { color: var(--f-nuit); font-weight: var(--f-gras); }
.fp-compteur i { width: 40px; height: 1px; background: var(--f-ligne-fonce); }

.fp-infos { min-width: 0; }
.fp-infos__colle { position: sticky; top: calc(var(--f-entete) + var(--promo-banner-h, 0px) + 28px); display: grid; gap: 22px; }
.fp-surtitre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0; font-size: 10.5px; font-weight: var(--f-moyen); letter-spacing: .28em; text-transform: uppercase; color: var(--f-gris); }
.fp-surtitre a:hover { color: var(--f-rouge); }
.pd-sku { letter-spacing: .12em; }
.pd-sku strong { font-weight: var(--f-moyen); color: var(--f-nuit); }
.fp-titre { font-size: clamp(28px, 2.7vw, 42px) !important; font-weight: var(--f-leger) !important; line-height: 1.18 !important; letter-spacing: -.005em; }
.fp-note { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--f-gris); }
.fp-prix { font-size: 22px; }
.fp-prix .shop-price { font-weight: var(--f-moyen); }
.fp-accroche { color: var(--f-gris); font-size: 15.5px; line-height: 1.75; }
.fp-accroche p { margin: 0; }
.fp-ruban { margin: 2px 0; }

.fp-options { display: grid; gap: 22px; }
.fp-option__tete { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.fp-option__nom { font-size: 10.5px; font-weight: var(--f-gras); letter-spacing: .28em; text-transform: uppercase; color: var(--f-nuit); }
.fp-option__choix { font-size: 14px; color: var(--f-gris); }
.fp-guide { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font-size: 12px; color: var(--f-nuit); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--f-rouge); }
.fp-guide svg { width: 24px; height: 10px; }
.fp-pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.shop-swatch { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; }
.shop-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.fp-pastilles:not(.fp-pastilles--couleur) .shop-swatch {
  min-width: 56px; height: 52px; padding: 0 14px; border: 1px solid var(--f-ligne-fonce); background: var(--f-blanc);
  font-size: 14px; font-variant-numeric: tabular-nums; color: var(--f-encre); transition: border-color .2s, background-color .2s, color .2s;
}
.fp-pastilles:not(.fp-pastilles--couleur) .shop-swatch:hover { border-color: var(--f-nuit); }
.fp-pastilles:not(.fp-pastilles--couleur) .shop-swatch.is-selected { background: var(--f-nuit); border-color: var(--f-nuit); color: #fff; }
.fp-pastilles--couleur { gap: 10px 18px; }
.fp-pastilles--couleur .shop-swatch { padding: 4px 4px 4px 4px; }
.fp-pastilles--couleur .dot { display: block; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 0 0 3px var(--f-papier), 0 0 0 4px transparent; transition: box-shadow .25s; }
.fp-pastilles--couleur .shop-swatch:hover .dot { box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 0 0 3px var(--f-papier), 0 0 0 4px var(--f-ligne-fonce); }
.fp-pastilles--couleur .shop-swatch.is-selected .dot { box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 0 0 3px var(--f-papier), 0 0 0 4px var(--f-nuit); }
.fp-pastille__nom { font-size: 13px; color: var(--f-gris); }
.fp-pastilles--couleur .shop-swatch.is-selected .fp-pastille__nom { color: var(--f-nuit); }
.shop-swatch input:focus-visible + * { outline: 1px solid var(--f-rouge); outline-offset: 4px; }

.fp-stock { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--f-gris); }
.pd-stock-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--f-gris-clair); flex: none; }
.pd-stock-dot.is-ok { background: #2E8B57; box-shadow: 0 0 0 4px rgba(46,139,87,.14); }
.pd-stock-dot.is-low, .pd-stock-dot.is-pre { background: #D89B16; box-shadow: 0 0 0 4px rgba(216,155,22,.14); }
.pd-stock-dot.is-out { background: var(--f-rouge); box-shadow: 0 0 0 4px rgba(233,78,27,.14); }
.shop-stock-out { color: var(--f-rouge-700); }

.fp-achat { display: grid; gap: 12px; }
.fp-form { display: grid; gap: 12px; }
.fp-form__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fp-achat__ligne { display: flex; gap: 10px; }
.fp-qte, .shop-qty { display: inline-flex; align-items: stretch; height: 54px; border: 1px solid var(--f-ligne-fonce); background: var(--f-blanc); flex: none; }
.shop-qty button { width: 42px; border: 0; background: none; font-size: 18px; font-weight: var(--f-fin); color: var(--f-nuit); }
.shop-qty button:hover { background: var(--f-ivoire); }
.shop-qty input, .f-site .f-form .shop-qty input[type="number"] {
  width: 44px; min-height: 0; padding: 0; border: 0; box-shadow: none; text-align: center;
  font: inherit; font-size: 15px; color: var(--f-nuit); background: none; -moz-appearance: textfield;
}
.shop-qty input::-webkit-outer-spin-button, .shop-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fp-achat__principal { flex: 1; min-height: 54px; }
.fp-achat__principal.is-disabled { opacity: 1; background: var(--f-gris-clair); border-color: var(--f-gris-clair); }
.fp-achat__autres { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fp-achat__autres .f-btn { min-height: 50px; padding: 0 14px; letter-spacing: .16em; font-size: 10.5px; }
.fp-wa svg { width: 17px; height: 17px; color: #25D366; transition: color .3s; }
.fp-wa:hover svg { color: #fff; }
.fp-indice { margin: 0; font-size: 13px; color: var(--f-gris); }
@media (max-width: 420px) { .fp-achat__autres { grid-template-columns: 1fr; } }

.fp-epuise { display: grid; gap: 10px; padding: 22px; background: var(--f-ivoire); border-left: 2px solid var(--f-rouge); }
.fp-epuise__titre { margin: 0; font-size: 11px; font-weight: var(--f-gras); letter-spacing: .26em; text-transform: uppercase; color: var(--f-nuit); }
.fp-epuise__texte { margin: 0 0 6px; font-size: 14px; color: var(--f-gris); }
.fp-epuise .f-btn svg { color: #25D366; }

.fp-engagements { list-style: none; margin: 4px 0 0; padding: 18px 0; display: grid; gap: 14px; border-top: 1px solid var(--f-ligne); border-bottom: 1px solid var(--f-ligne); }
.fp-engagements li { display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start; font-size: 13.5px; color: var(--f-gris); }
.fp-engagements svg { width: 22px; height: 22px; color: var(--f-nuit); }
.fp-engagements strong { color: var(--f-nuit); font-weight: var(--f-moyen); }
.fp-engagements a { color: var(--f-nuit); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--f-rouge); }

.fp-details { display: grid; }
.fp-volet { border-bottom: 1px solid var(--f-ligne); }
.fp-volet > summary {
  display: flex; align-items: center; justify-content: space-between; padding: 18px 0; cursor: pointer; list-style: none;
  font-size: 10.5px; font-weight: var(--f-gras); letter-spacing: .28em; text-transform: uppercase; color: var(--f-nuit);
}
.fp-volet > summary::-webkit-details-marker { display: none; }
.fp-volet > summary::after { content: "+"; font-size: 20px; font-weight: var(--f-fin); letter-spacing: 0; transition: transform .3s var(--f-ease); }
.fp-volet[open] > summary::after { transform: rotate(45deg); }
.fp-volet__corps { padding: 0 0 22px; font-size: 14.5px; color: var(--f-gris); line-height: 1.8; }
.fp-volet__corps p { margin: 0 0 .9em; }
.fp-volet__corps strong { color: var(--f-encre); font-weight: var(--f-moyen); }
.fp-volet__corps ul { padding-left: 1.1em; margin: .4em 0 1em; }
.fp-volet__corps h2, .fp-volet__corps h3, .fp-volet__corps h4 { font-size: 13px; font-weight: var(--f-gras); letter-spacing: .1em; text-transform: uppercase; margin: 1.2em 0 .5em; color: var(--f-nuit); }
.fp-carac { margin: 0; display: grid; }
.fp-carac div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--f-ligne); }
.fp-carac dt { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--f-gris-clair); }
.fp-carac dd { margin: 0; color: var(--f-encre); }

.fp-partage { display: flex; align-items: center; gap: 4px; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--f-gris); }
.fp-partage span { margin-right: 10px; }
.fp-partage a, .fp-partage button { display: grid; place-items: center; width: 38px; height: 38px; border: 0; background: none; color: var(--f-nuit); }
.fp-partage svg { width: 18px; height: 18px; }
.fp-partage a:hover, .fp-partage button:hover { color: var(--f-rouge); }

.fp-liees { border-top: 1px solid var(--f-ligne); }
.fp-avis__grille { display: grid; grid-template-columns: minmax(240px, .7fr) 1.3fr; gap: clamp(32px, 6vw, 100px); }
.fp-avis__resume { display: grid; gap: 18px; align-content: start; }
.fp-avis__note { display: flex; align-items: center; gap: 14px; }
.fp-avis__note .num { font-size: 56px; font-weight: 100; line-height: 1; color: var(--f-nuit); }
.fp-avis__note .out { font-size: 12px; color: var(--f-gris); }
.fp-avis__liste { display: grid; gap: 18px; }
.pd-review { padding: 26px; background: var(--f-blanc); display: grid; gap: 10px; }
.pd-review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 12.5px; color: var(--f-gris); }
.pd-review-author { font-size: 11px; font-weight: var(--f-gras); letter-spacing: .2em; text-transform: uppercase; color: var(--f-nuit); }
.pd-review-verified { color: var(--f-succes); }
.pd-review-title { margin: 0; font-weight: var(--f-moyen); color: var(--f-encre); }
.pd-review-body { margin: 0; color: var(--f-gris); }
.pd-review-reply { padding: 14px 16px; background: var(--f-ivoire); font-size: 14px; }
.pd-review-reply strong { display: block; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--f-nuit); margin-bottom: 4px; }
.fp-avis__donner > summary { list-style: none; width: max-content; cursor: pointer; }
.fp-avis__donner > summary::-webkit-details-marker { display: none; }
.fp-avis__donner[open] > summary { display: none; }
.pd-review-form { display: grid; gap: 14px; padding: 28px; background: var(--f-blanc); }
.pd-rate-picker { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.pd-rate-picker input { position: absolute; opacity: 0; pointer-events: none; }
.pd-rate-picker label { cursor: pointer; }
.pd-rate-picker svg { width: 26px; height: 26px; fill: var(--f-ligne-fonce); transition: fill .2s; }
.pd-rate-picker input:checked ~ label svg, .pd-rate-picker label:hover svg, .pd-rate-picker label:hover ~ label svg { fill: var(--f-nuit); }

/* Barre d'achat collante (mobile) */
.pd-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; gap: 14px; padding: 12px var(--f-gouttiere) calc(12px + env(safe-area-inset-bottom));
  background: rgba(251,249,245,.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--f-ligne); transition: transform .45s var(--f-ease);
}
.fp-barre__infos { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fp-barre__nom { font-size: 12.5px; color: var(--f-encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-sticky-price { font-size: 14px; }
.pd-sticky .f-btn { flex: none; }
@media (min-width: 900px) { .pd-sticky { display: none; } }

/* Visionneuse */
.fp-visionneuse { position: fixed; inset: 0; z-index: 160; display: grid; place-items: center; background: rgba(15,14,23,.96); opacity: 0; transition: opacity .3s var(--f-ease); }
.fp-visionneuse.is-open { opacity: 1; }
.fp-visionneuse img { max-width: min(92vw, 1100px); max-height: 88vh; object-fit: contain; }
.fp-visionneuse__fermer, .fp-visionneuse__nav { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border: 0; background: none; color: #fff; }
.fp-visionneuse__fermer { top: 14px; right: 14px; }
.fp-visionneuse__nav { top: 50%; transform: translateY(-50%); }
.fp-visionneuse__nav.is-prec { left: 10px; }
.fp-visionneuse__nav.is-suiv { right: 10px; }
.fp-visionneuse svg { width: 26px; height: 26px; }

@media (max-width: 899px) {
  .fp-grille { grid-template-columns: 1fr; gap: 28px; }
  .fp-galerie.a-vignettes { grid-template-columns: 1fr; }
  .fp-vignettes { position: static; order: 2; display: flex; overflow-x: auto; gap: 8px; scrollbar-width: none; }
  .fp-vignettes::-webkit-scrollbar { display: none; }
  .fp-vignettes .pd-thumb { flex: none; width: 68px; }
  .fp-galerie { margin-inline: calc(var(--f-gouttiere) * -1); }
  .fp-vignettes { padding-inline: var(--f-gouttiere); }
  .fp-compteur { padding-inline: var(--f-gouttiere); }
  .fp-infos__colle { position: static; }
  .fp-ariane { padding-block: 14px; }
}

/* ---------------------------------------------------------------------
   Tiroir panier (contenu fabriqué par shop.js)
   --------------------------------------------------------------------- */
.shop-drawer-backdrop { position: fixed; inset: 0; z-index: 150; background: rgba(20,18,46,.45); opacity: 0; visibility: hidden; transition: opacity .35s var(--f-ease), visibility 0s .35s; }
.shop-drawer-backdrop.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.shop-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 151; width: min(460px, 100vw);
  display: grid; grid-template-rows: auto 1fr auto auto; background: var(--f-papier);
  transform: translateX(102%); transition: transform .55s var(--f-ease);
}
.shop-drawer.is-open { transform: none; }
.f-tiroir__tete { display: flex; align-items: center; justify-content: space-between; padding: 22px 18px 18px 28px; border-bottom: 1px solid var(--f-ligne); }
.f-tiroir__tete h2 { margin-top: 6px; font-size: 24px; font-weight: var(--f-fin); }
.f-tiroir__corps { overflow-y: auto; padding: 8px 28px; }
.f-tiroir__attente, #shopDrawerBody > p { text-align: center; padding: 60px 0 !important; color: var(--f-gris) !important; font-size: 14px !important; }
.f-tiroir__pied { padding: 18px 28px 6px; border-top: 1px solid var(--f-ligne); display: grid; gap: 8px; }
.f-tiroir__pied:empty { display: none; }
.f-tiroir__pied .shop-btn { min-height: 52px; margin-top: 6px !important; }
.f-tiroir__pied .shop-btn--ghost { min-height: 40px; margin-top: 0 !important; }
.f-tiroir__note { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 14px 20px 18px; font-size: 11.5px; color: var(--f-gris); letter-spacing: .04em; }
.f-tiroir__note svg { width: 20px; height: 20px; color: var(--f-nuit); }
.shop-mini-line { display: grid; grid-template-columns: 84px 1fr auto; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--f-ligne); transition: opacity .3s; }
.shop-mini-line.is-busy { opacity: .5; }
/* Pièce en cours d'ajout (faray.js), le temps que le serveur réponde */
.f-tiroir__ajout { grid-template-columns: 84px 1fr; }
.f-tiroir__ajout strong { font-size: 13.5px; font-weight: var(--f-leger); line-height: 1.4; color: var(--f-encre); }
.f-tiroir__ajout-etat { font-size: 12px; letter-spacing: .04em; color: var(--f-gris); }
.f-tiroir__barre { position: relative; display: block; height: 2px; margin-top: 10px; overflow: hidden; background: var(--f-ligne); }
.f-tiroir__barre::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--f-rouge); animation: f-barre 1.1s var(--f-ease-in-out) infinite; }
@keyframes f-barre { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.shop-mini-thumb { width: 84px; aspect-ratio: 4 / 5; object-fit: cover; background: var(--f-sable); }
.shop-mini-info { display: grid; gap: 4px; align-content: start; min-width: 0; }
.shop-mini-info > a { font-size: 13.5px; line-height: 1.4; color: var(--f-encre); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shop-mini-var { font-size: 12px; color: var(--f-gris); }
.shop-mini-unit { font-size: 11.5px; color: var(--f-gris-clair); }
.shop-mini-qty { display: inline-flex; width: max-content; height: 34px; margin-top: 6px; border: 1px solid var(--f-ligne-fonce); }
.shop-mini-qty button { width: 30px; border: 0; background: none; color: var(--f-nuit); }
.shop-mini-qty input { width: 34px; border: 0; text-align: center; font: inherit; font-size: 13px; background: none; -moz-appearance: textfield; }
.shop-mini-qty input::-webkit-outer-spin-button, .shop-mini-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.shop-mini-right { display: grid; justify-items: end; align-content: space-between; }
.shop-mini-price { font-size: 13.5px; font-weight: var(--f-moyen); color: var(--f-nuit); white-space: nowrap; }
.shop-mini-del { width: 34px; height: 34px; display: grid; place-items: center; border: 0; background: none; color: var(--f-gris); }
.shop-mini-del:hover { color: var(--f-rouge); }
.shop-mini-del svg { width: 17px; height: 17px; }
.shop-mini-total { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--f-gris); }
.shop-mini-total strong { color: var(--f-nuit); font-weight: var(--f-moyen); }
.shop-mini-total.is-grand { padding-top: 8px; font-size: 15px; color: var(--f-encre); }
.shop-mini-total.is-grand strong { font-size: 17px; }

/* ---------------------------------------------------------------------
   Classes génériques du kit (pages compte, suivi, confirmation…)
   --------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--f-max); margin: 0 auto; padding-inline: var(--f-gouttiere); }
.shop-h1 { font-size: clamp(30px, 3.4vw, 48px); font-weight: var(--f-fin); color: var(--f-nuit); margin: 0 0 8px; }
.shop-h2 { font-size: clamp(22px, 2.2vw, 30px); font-weight: var(--f-leger); color: var(--f-nuit); }
.shop-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .shop-row { grid-template-columns: 1fr; } }
.shop-field { display: grid; gap: 8px; margin-bottom: 16px; }
.shop-label { font-size: 10.5px; font-weight: var(--f-moyen); letter-spacing: .22em; text-transform: uppercase; color: var(--f-gris); }
.shop-label .req, .req { color: var(--f-rouge); }
.shop-input, .shop-select, .shop-textarea {
  width: 100%; min-height: 52px; padding: 14px 16px; border: 1px solid var(--f-ligne-fonce); border-radius: 0;
  background: var(--f-blanc); font: inherit; font-size: 15px; color: var(--f-encre); -webkit-appearance: none; appearance: none;
}
.shop-textarea { min-height: 130px; resize: vertical; }
.shop-input:focus, .shop-select:focus, .shop-textarea:focus { outline: none; border-color: var(--f-nuit); box-shadow: 0 0 0 3px rgba(41,38,91,.08); }
.shop-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2329265B' stroke-width='1.2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; }
.shop-help { margin: 0; font-size: 12.5px; color: var(--f-gris); }
.shop-check { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--f-encre); cursor: pointer; }
.shop-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--f-nuit); flex: none; }
.shop-check a { color: var(--f-nuit); text-decoration: underline; text-underline-offset: 3px; }
.shop-hstack { display: flex; flex-wrap: wrap; gap: 10px; }
.shop-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; font-size: 9.5px; font-weight: var(--f-gras); letter-spacing: .2em; text-transform: uppercase; background: var(--f-ivoire); color: var(--f-nuit); }
.shop-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: var(--f-moyen); }
.shop-flash { margin-top: 20px; }
.shop-empty { display: grid; justify-items: center; gap: 16px; padding: 72px 0; text-align: center; }
.shop-empty-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--f-ivoire); color: var(--f-nuit); }
.shop-empty-ico svg { width: 28px; height: 28px; }
.shop-empty h3 { font-size: 26px; font-weight: var(--f-fin); }
.shop-empty p { margin: 0; color: var(--f-gris); }

.shop-totals { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.shop-totals li { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--f-gris); }
.shop-totals strong { font-weight: var(--f-moyen); color: var(--f-encre); font-variant-numeric: tabular-nums; white-space: nowrap; }
.shop-totals .is-discount strong { color: var(--f-succes); }
.shop-totals .is-grand { padding-top: 14px; border-top: 1px solid var(--f-ligne); font-size: 15px; color: var(--f-encre); }
.shop-totals .is-grand strong { font-size: 20px; color: var(--f-nuit); }

/* ---------------------------------------------------------------------
   Panier
   --------------------------------------------------------------------- */
.fk { padding-bottom: clamp(72px, 9vw, 140px); }
.fk-tete { display: grid; gap: 18px; padding: clamp(36px, 5vw, 72px) 0 clamp(28px, 3vw, 44px); border-bottom: 1px solid var(--f-ligne); margin-bottom: clamp(28px, 3vw, 48px); }
.fk-tete .f-titre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; }
.fk-tete__compte { font-size: 11px; font-weight: var(--f-moyen); letter-spacing: .28em; text-transform: uppercase; color: var(--f-gris); }
.fk-etapes { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.fk-etapes li { display: flex; align-items: center; gap: 10px; font-size: 10.5px; font-weight: var(--f-moyen); letter-spacing: .22em; text-transform: uppercase; color: var(--f-gris-clair); }
.fk-etapes li span { font-size: 18px; font-weight: 100; letter-spacing: 0; }
.fk-etapes li.is-actif { color: var(--f-nuit); }
.fk-etapes li.is-actif span { color: var(--f-rouge); }
.fk-etapes li.is-fait { color: var(--f-gris); }
.fk-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 960px) { .fk-grille { grid-template-columns: 1fr; } }

.fk-ligne { display: grid; grid-template-columns: 116px 1fr auto; gap: 22px; padding: 24px 0; border-bottom: 1px solid var(--f-ligne); transition: background-color .6s; }
.fk-ligne:first-child { padding-top: 0; }
.fk-ligne__img { display: block; aspect-ratio: 4 / 5; background: var(--f-sable); overflow: hidden; }
.fk-ligne__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.fk-ligne__infos { display: grid; gap: 6px; align-content: start; min-width: 0; }
.fk-ligne__nom { margin: 0; font-size: 15.5px !important; font-weight: var(--f-texte) !important; line-height: 1.4 !important; color: var(--f-encre) !important; }
.fk-ligne__var { margin: 0; font-size: 13px; color: var(--f-gris); }
.fk-ligne__unit { margin: 0; font-size: 13px; color: var(--f-gris); }
.fk-ligne__unit s { margin-left: 6px; color: var(--f-gris-clair); }
.fk-ligne__alerte { margin: 0; font-size: 12px; color: var(--f-rouge-700); }
.fk-ligne__actions { display: flex; align-items: center; gap: 18px; margin-top: 10px; }
.fk-ligne__actions .shop-qty { height: 44px; }
.fk-retirer, .fk-vider { padding: 0; border: 0; background: none; font-size: 12px; color: var(--f-gris); text-decoration: underline; text-underline-offset: 3px; }
.fk-retirer:hover, .fk-vider:hover { color: var(--f-rouge); }
.fk-ligne__total { font-size: 15px; font-weight: var(--f-moyen); color: var(--f-nuit); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fk-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; }
.fk-actions__droite { display: flex; align-items: center; gap: 18px; }
@media (max-width: 560px) { .fk-ligne { grid-template-columns: 92px 1fr; } .fk-ligne__total { grid-column: 2; } }

.fk-recap { position: sticky; top: calc(var(--f-entete) + var(--promo-banner-h, 0px) + 24px); }
.fk-recap__boite { display: grid; gap: 22px; padding: clamp(24px, 2.6vw, 36px); background: var(--f-ivoire); }
.fk-recap__titre { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px !important; font-weight: var(--f-gras) !important; letter-spacing: .28em; text-transform: uppercase; color: var(--f-nuit) !important; }
.fk-recap__titre a { font-size: 11px; letter-spacing: .1em; text-transform: none; font-weight: var(--f-texte); color: var(--f-gris); text-decoration: underline; text-underline-offset: 3px; }
.fk-bloc { display: grid; gap: 12px; }
.fk-bloc__titre { font-size: 10.5px !important; font-weight: var(--f-moyen) !important; letter-spacing: .24em; text-transform: uppercase; color: var(--f-gris) !important; }
.ct-ship-options { display: grid; gap: 8px; }
.ct-ship-option { display: grid; grid-template-columns: 18px 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--f-ligne-fonce); background: var(--f-blanc); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.ct-ship-option input { width: 16px; height: 16px; margin: 0; accent-color: var(--f-nuit); }
.ct-ship-option.is-selected { border-color: var(--f-nuit); box-shadow: inset 0 0 0 1px var(--f-nuit); }
.ct-ship-body { display: grid; gap: 2px; }
.ct-ship-name { font-size: 14px; color: var(--f-encre); }
.ct-ship-desc { font-size: 12px; color: var(--f-gris); }
.ct-ship-cost { font-size: 13.5px; font-weight: var(--f-moyen); color: var(--f-nuit); white-space: nowrap; }
.ct-ship-cost.is-free { color: var(--f-succes); }
.fk-offerte { display: grid; gap: 8px; font-size: 12.5px; color: var(--f-gris); }
.ct-freeship-bar { height: 3px; background: var(--f-ligne); }
.ct-freeship-bar i { display: block; height: 100%; background: var(--f-rouge); transition: width .6s var(--f-ease); }
.fk-totaux { padding-top: 4px; }
.fk-cta { display: grid; gap: 10px; }
.fk-cta form { margin: 0; }
.fk-code > summary { cursor: pointer; font-size: 13px; color: var(--f-nuit); text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.fk-code > summary::-webkit-details-marker { display: none; }
.fk-code__form { display: flex; gap: 8px; margin-top: 12px; }
.fk-code__form input { min-height: 44px !important; padding: 10px 14px !important; text-transform: uppercase; }
.fk-code__actif { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 13.5px; color: var(--f-succes); }
.fk-code__actif button { border: 0; background: none; font-size: 12px; color: var(--f-gris); text-decoration: underline; }
.fk-rassure { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--f-ligne-fonce); display: grid; gap: 10px; }
.fk-rassure li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: center; font-size: 12.5px; color: var(--f-gris); }
.fk-rassure svg { width: 20px; height: 20px; color: var(--f-nuit); }
.fk-suggestions { margin-top: clamp(72px, 8vw, 120px); }
.fk-vide { padding: 40px 0 80px; }
.fk-vide .f-y { width: 30px; height: 32px; }

/* ---------------------------------------------------------------------
   Commande
   --------------------------------------------------------------------- */
.fco-colonne { display: grid; gap: 14px; }
.fco-bandeau { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 0; padding: 16px 20px; background: var(--f-ivoire); font-size: 13.5px; color: var(--f-gris); }
.fco-bandeau a { color: var(--f-nuit); text-decoration: underline; text-underline-offset: 3px; }
.fco-bloc { display: grid; gap: 16px; padding: 28px 0; border-bottom: 1px solid var(--f-ligne); }
.fco-bloc__titre { display: flex; align-items: baseline; gap: 16px; font-size: 22px !important; font-weight: var(--f-leger) !important; }
.fco-bloc__titre span { font-size: 13px; font-weight: var(--f-gras); letter-spacing: .1em; color: var(--f-rouge); }
.fco-bloc__titre em { font-style: normal; font-size: 13px; color: var(--f-gris); }
.fco-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .fco-duo { grid-template-columns: 1fr; } }
.fco-aide { margin: 0; font-size: 12.5px; color: var(--f-gris); }
.fco-case { margin-top: 4px; }
.fco-adresses, .co-pay-list { display: grid; gap: 8px; }
.fco-choix { display: block; padding: 16px 18px; border: 1px solid var(--f-ligne-fonce); background: var(--f-blanc); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.fco-choix.is-selected { border-color: var(--f-nuit); box-shadow: inset 0 0 0 1px var(--f-nuit); }
.co-saved-address { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
.co-saved-address input, .co-pay-label input { width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--f-nuit); flex: none; }
.co-pay-label { display: grid; grid-template-columns: 16px 34px 1fr auto; gap: 14px; align-items: center; cursor: pointer; }
.co-pay-ico { display: grid; place-items: center; width: 34px; height: 34px; color: var(--f-nuit); }
.co-pay-ico svg, .co-pay-ico img { width: 26px; height: 26px; object-fit: contain; }
.co-pay-txt { display: grid; gap: 3px; }
.co-pay-name { font-size: 14.5px; font-weight: var(--f-moyen); color: var(--f-encre); }
.co-pay-desc { font-size: 12.5px; color: var(--f-gris); }
.co-pay-fee { font-size: 12.5px; color: var(--f-gris); }
.co-pay-extra { display: none; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--f-ligne-fonce); font-size: 13.5px; color: var(--f-gris); }
.co-pay.is-selected .co-pay-extra { display: grid; gap: 12px; }
.fco-modes { display: grid; gap: 10px; margin-top: 6px; }
.fco-article { display: grid; grid-template-columns: 58px 1fr auto; gap: 14px; align-items: start; padding-bottom: 14px; border-bottom: 1px solid var(--f-ligne-fonce); }
.fco-article img { width: 58px; aspect-ratio: 4 / 5; object-fit: cover; }
.fco-article p { margin: 0; }
.fco-article__nom { font-size: 13.5px; line-height: 1.4; color: var(--f-encre); }
.fco-article__var { font-size: 12px; color: var(--f-gris); }
.fco-article__prix { font-size: 13.5px; color: var(--f-nuit); white-space: nowrap; }
.co-lines { display: grid; gap: 14px; }
.fco-valider { min-height: 58px; }
.fco-mention { margin: 0; font-size: 11.5px; color: var(--f-gris-clair); text-align: center; }

/* ---------------------------------------------------------------------
   Confirmation, suivi, détail de commande (classes od-* du kit)
   --------------------------------------------------------------------- */
.od-wrap { padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(72px, 9vw, 140px); }
.od-hero { display: grid; justify-items: center; gap: 14px; text-align: center; padding-bottom: clamp(40px, 5vw, 64px); margin-bottom: clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--f-ligne); }
.od-hero h1 { font-size: clamp(30px, 4vw, 58px); font-weight: var(--f-fin); }
.od-hero p { margin: 0; max-width: 56ch; color: var(--f-gris); }
.od-number { display: inline-block; padding: 8px 16px; background: var(--f-ivoire); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--f-nuit); }
.od-number strong { font-weight: var(--f-gras); }
.od-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
.od-check { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--f-nuit); color: #fff; }
.od-check.is-ko { background: var(--f-rouge); }
.od-check.is-pending { background: #D89B16; }
.od-check svg { width: 28px; height: 28px; }
.od-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (max-width: 900px) { .od-layout { grid-template-columns: 1fr; } }
.od-box { padding: clamp(22px, 2.4vw, 32px); background: var(--f-blanc); border: 1px solid var(--f-ligne); margin-bottom: 18px; display: grid; gap: 16px; }
.od-box-title { font-size: 11px !important; font-weight: var(--f-gras) !important; letter-spacing: .26em; text-transform: uppercase; color: var(--f-nuit) !important; }
.od-progress { display: flex; justify-content: space-between; gap: 8px; position: relative; padding-top: 6px; }
.od-progress > * { flex: 1; display: grid; justify-items: center; gap: 10px; text-align: center; }
.od-pdot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--f-ligne-fonce); background: var(--f-blanc); }
.od-progress .is-done .od-pdot, .od-progress .done .od-pdot { background: var(--f-nuit); border-color: var(--f-nuit); }
.od-progress .is-current .od-pdot, .od-progress .current .od-pdot { background: var(--f-rouge); border-color: var(--f-rouge); box-shadow: 0 0 0 5px rgba(233,78,27,.15); }
.od-plabel { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--f-gris); }
.od-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--f-ligne); }
.od-item img { width: 64px; aspect-ratio: 4 / 5; object-fit: cover; }
.od-item-name { font-size: 14px; color: var(--f-encre); }
.od-item-var, .od-item-qty { font-size: 12.5px; color: var(--f-gris); }
.od-item-total { font-size: 14px; color: var(--f-nuit); white-space: nowrap; }
.od-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.od-info-label { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--f-gris-clair); }
.od-info-value { font-size: 14px; color: var(--f-encre); }
.od-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; border-left: 1px solid var(--f-ligne-fonce); padding-left: 18px; }
.od-tl-date { font-size: 11.5px; color: var(--f-gris-clair); }
.od-tl-text { font-size: 13.5px; color: var(--f-encre); }
.od-instructions { padding: 22px; background: var(--f-ivoire); border-left: 2px solid var(--f-nuit); }
.od-instructions-title { font-size: 11px; font-weight: var(--f-gras); letter-spacing: .24em; text-transform: uppercase; color: var(--f-nuit); margin-bottom: 8px; }
.od-instructions-body { font-size: 14px; color: var(--f-gris); }
.od-cancelled { padding: 16px 20px; background: var(--f-rouge-100); color: var(--f-rouge-700); }
.od-track-form { max-width: 520px; margin: 0 auto; }
/* Pictogrammes en ligne des vues du kit (sans taille déclarée) */
.od-box-title, .od-instructions-title, .ac-panel-title { display: flex; align-items: center; gap: 10px; }
.od-box-title svg, .od-instructions-title svg, .ac-panel-title svg, .shop-btn svg, .ac-dl-ico svg, .ac-nav svg { width: 18px; height: 18px; flex: none; }
.od-dl-box .od-dl { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--f-ligne); }

/* ---------------------------------------------------------------------
   Espace cliente (classes ac-* du kit)
   --------------------------------------------------------------------- */
.ac-wrap { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(72px, 9vw, 140px); }
.ac-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (max-width: 900px) { .ac-layout { grid-template-columns: 1fr; } }
.ac-side { display: grid; gap: 18px; padding: 28px; background: var(--f-nuit); color: #fff; position: sticky; top: calc(var(--f-entete) + 24px); }
.ac-side-user { display: grid; gap: 6px; }
.ac-avatar { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--f-rouge); color: #fff; font-size: 20px; font-weight: var(--f-leger); }
.ac-side-name { font-size: 18px; font-weight: var(--f-leger); }
.ac-side-mail { font-size: 12.5px; color: rgba(255,255,255,.6); word-break: break-all; }
.ac-nav { display: grid; gap: 2px; }
.ac-nav a { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 13px; letter-spacing: .06em; color: rgba(255,255,255,.75); }
.ac-nav a:hover, .ac-nav a.is-active { color: #fff; }
.ac-nav a.is-active { box-shadow: inset 2px 0 0 var(--f-rouge); padding-left: 12px; }
.ac-nav-out { font-size: 12px; color: rgba(255,255,255,.55); text-decoration: underline; }
.ac-panel { padding: clamp(22px, 2.6vw, 34px); background: var(--f-blanc); border: 1px solid var(--f-ligne); margin-bottom: 18px; display: grid; gap: 16px; }
.ac-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ac-panel-title { font-size: 11px !important; font-weight: var(--f-gras) !important; letter-spacing: .26em; text-transform: uppercase; color: var(--f-nuit) !important; }
.ac-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.ac-stat { padding: 20px; background: var(--f-ivoire); display: grid; gap: 4px; }
.ac-stat-label { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--f-gris); }
.ac-stat-value { font-size: 26px; font-weight: var(--f-fin); color: var(--f-nuit); }
.ac-stat-sub { font-size: 12px; color: var(--f-gris); }
.ac-order { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--f-ligne); }
.ac-order-num { font-weight: var(--f-moyen); color: var(--f-nuit); }
.ac-order-date, .ac-order-meta, .ac-order-items { font-size: 12.5px; color: var(--f-gris); }
.ac-order-right { display: grid; justify-items: end; gap: 6px; }
.ac-order-total { font-weight: var(--f-moyen); color: var(--f-nuit); }
.ac-order-actions { display: flex; gap: 8px; }
.ac-addresses { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ac-address { padding: 18px; border: 1px solid var(--f-ligne-fonce); display: grid; gap: 6px; font-size: 13.5px; }
.ac-address.is-default { border-color: var(--f-nuit); }
.ac-address-label { font-size: 11px; font-weight: var(--f-gras); letter-spacing: .2em; text-transform: uppercase; color: var(--f-nuit); }
.ac-address-badge { display: inline-block; padding: 2px 8px; background: var(--f-nuit); color: #fff; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.ac-address-actions { display: flex; gap: 12px; font-size: 12.5px; }
.ac-address-actions .is-danger { color: var(--f-rouge-700); }
.bq-inline-form { display: inline; }
.ac-auth { max-width: 520px; margin: 0 auto; padding: clamp(28px, 4vw, 48px); background: var(--f-blanc); border: 1px solid var(--f-ligne); }
.ac-auth-head { display: grid; gap: 8px; text-align: center; margin-bottom: 24px; }
.ac-auth-head h1 { font-size: clamp(28px, 3vw, 40px); font-weight: var(--f-fin); }
.ac-auth-head p { margin: 0; color: var(--f-gris); font-size: 14px; }
.ac-auth-switch { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 26px; border-bottom: 1px solid var(--f-ligne); }
.ac-auth-switch a { padding: 12px; text-align: center; font-size: 11px; font-weight: var(--f-moyen); letter-spacing: .22em; text-transform: uppercase; color: var(--f-gris); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ac-auth-switch a.is-active { color: var(--f-nuit); border-color: var(--f-rouge); }
.ac-auth-foot { margin-top: 20px; text-align: center; font-size: 13px; color: var(--f-gris); }
.ac-auth-foot a { color: var(--f-nuit); text-decoration: underline; text-underline-offset: 3px; }
.ac-dl-body { display: grid; gap: 4px; }
.ac-dl-name { font-weight: var(--f-moyen); }
.ac-dl-meta { font-size: 12.5px; color: var(--f-gris); }

/* Fenêtre de commande express du kit */
.shop-modal { position: fixed; inset: 0; z-index: 155; display: none; place-items: center; padding: 16px; background: rgba(20,18,46,.55); }
.shop-modal.is-open { display: grid; }
.shop-modal-box { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--f-papier); padding: 32px; }
.shop-modal-head { display: grid; gap: 6px; margin-bottom: 18px; position: relative; }
.shop-modal-head h3 { font-size: 24px; font-weight: var(--f-fin); }
.shop-modal-close { position: absolute; top: -12px; right: -12px; width: 40px; height: 40px; border: 0; background: none; font-size: 26px; color: var(--f-nuit); }