/* MARCVS ATHLETICS — Thème éditorial sobre
   Fond blanc, encre presque noire, typographie Inter / Inter Tight, angles droits.
   Chargé par /assets/em3-tailwind.js sur toutes les pages publiques. */

:root {
  --em3-ink: #111111;
  --em3-text: #1a1a1a;
  --em3-muted: #6b6b6b;
  --em3-line: #e6e6e6;
  --em3-surface: #f4f4f2;
  --em3-bg: #ffffff;
  --em3-display: "Inter Tight", Inter, "Helvetica Neue", Arial, sans-serif;
  --em3-sans: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html body {
  background-color: var(--em3-bg) !important;
  color: var(--em3-text);
  font-family: var(--em3-sans);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html body h1,
html body h2,
html body h3,
html body .font-display {
  font-family: var(--em3-display);
  letter-spacing: -0.025em;
}

/* Pastilles et boutons « pilule » : angles droits ; seuls les petits ronds (points, compteurs, icônes) restent circulaires */
html body [class*="rounded-full"][class*="px-"] { border-radius: 0 !important; }

html body h4,
html body h5 {
  letter-spacing: -0.01em;
}

/* Majuscules : interlettrage discret plutôt que très espacé */
html body .tracking-widest { letter-spacing: 0.08em !important; }
html body .tracking-wider { letter-spacing: 0.04em !important; }

/* Liens et sélection */
::selection { background: var(--em3-ink); color: #fff; }
html body a { text-underline-offset: 3px; }

/* Champs de formulaire : angles droits, bordure fine */
html body input:not([type="checkbox"]):not([type="radio"]),
html body select,
html body textarea {
  border-radius: 0 !important;
  box-shadow: none !important;
}
html body input:focus,
html body select:focus,
html body textarea:focus {
  outline: none;
  border-color: var(--em3-ink) !important;
  --tw-ring-color: transparent !important;
}

/* Anciennes classes décoratives des pages : neutralisées */
html body .product-shadow,
html body .custom-shadow,
html body .card-shadow {
  box-shadow: none !important;
  transform: none !important;
}
html body .product-shadow:hover { transform: none !important; }
html body .badge-pill { border-radius: 0 !important; font-weight: 500 !important; letter-spacing: 0.04em !important; }
html body .animate-pulse { animation: none !important; }

/* ---- Composants éditoriaux réutilisables ---- */

.em3-container { max-width: 1920px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
@media (min-width: 768px) { .em3-container { padding-left: 32px; padding-right: 32px; } }

.em3-eyebrow {
  font-family: var(--em3-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--em3-ink);
}

.em3-title-xl {
  font-family: var(--em3-display);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--em3-ink);
}

.em3-title-lg {
  font-family: var(--em3-display);
  font-weight: 600;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--em3-ink);
}

.em3-title-overlay {
  font-family: var(--em3-display);
  font-weight: 600;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.em3-body { font-size: 14px; line-height: 1.6; color: #4a4a4a; }

/* Lien d'action texte : majuscules, souligné au survol */
.em3-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color .2s ease;
}
.em3-link:hover { border-bottom-color: currentColor; }

/* Boutons */
.em3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 24px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--em3-ink);
  color: #fff;
  border: 1px solid var(--em3-ink);
  transition: background-color .2s ease, color .2s ease;
  cursor: pointer;
}
.em3-btn:hover { background: #fff; color: var(--em3-ink); }
.em3-btn--light { background: #fff; color: var(--em3-ink); border-color: #fff; }
.em3-btn--light:hover { background: transparent; color: #fff; }
.em3-btn--outline { background: transparent; color: var(--em3-ink); }
.em3-btn--outline:hover { background: var(--em3-ink); color: #fff; }

/* Tuiles visuelles plein cadre (2 colonnes) */
.em3-split { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) { .em3-split { grid-template-columns: 1fr 1fr; } }

.em3-tile {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--em3-surface);
  color: #fff;
  min-height: 70vh;
}
@media (min-width: 768px) { .em3-tile { min-height: 82vh; } }
.em3-tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.em3-tile:hover img { transform: scale(1.025); }
.em3-tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 45%);
  pointer-events: none;
}
.em3-tile__caption {
  position: absolute;
  left: 20px; right: 20px; bottom: 28px;
  z-index: 2;
}
@media (min-width: 768px) { .em3-tile__caption { left: 32px; bottom: 36px; } }
.em3-tile--short { min-height: 56vh; }
@media (min-width: 768px) { .em3-tile--short { min-height: 64vh; } }

/* Hero en carrousel plein cadre */
.em3-hero { position: relative; overflow: hidden; background: #111; color: #fff; }
.em3-hero__track { position: relative; height: 78vh; min-height: 480px; max-height: 900px; }
.em3-hero__slide {
  position: absolute; inset: 0; display: block; color: #fff;
  opacity: 0; visibility: hidden;
  transition: opacity 1s ease, visibility 0s linear 1s;
}
.em3-hero__slide.is-active { opacity: 1; visibility: visible; transition: opacity 1s ease; z-index: 1; }
.em3-hero__slide img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04); transition: transform 7s ease-out;
}
.em3-hero__slide.is-active img { transform: scale(1); }
.em3-hero__slide::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,0) 65%);
}
.em3-hero__caption { position: absolute; left: 20px; right: 20px; bottom: 76px; z-index: 2; }
@media (min-width: 768px) { .em3-hero__caption { left: 32px; bottom: 84px; } }
.em3-hero__dots { position: absolute; left: 20px; bottom: 36px; z-index: 3; display: flex; gap: 10px; }
@media (min-width: 768px) { .em3-hero__dots { left: 32px; bottom: 44px; } }
.em3-hero__dots button {
  width: 8px; height: 8px; border-radius: 9999px; padding: 0;
  background: rgba(255,255,255,.45); border: 0; cursor: pointer;
  transition: background-color .3s ease, width .3s ease;
}
.em3-hero__dots button.is-active { background: #fff; width: 24px; }
.em3-hero__dots button:focus-visible { outline: 1px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .em3-hero__slide, .em3-hero__slide img { transition: none !important; transform: none !important; }
}

/* Cartes produit */
.em3-card { display: block; color: var(--em3-ink); text-decoration: none; }
.em3-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--em3-surface);
  overflow: hidden;
}
.em3-card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 8%;
  mix-blend-mode: multiply; /* le fond blanc des photos se fond dans le gris */
  transition: opacity .35s ease, transform .6s ease;
}
.em3-card__media img.em3-card__alt { opacity: 0; }
.em3-card:hover .em3-card__media img.em3-card__alt { opacity: 1; }
.em3-card:hover .em3-card__media img.em3-card__main.has-alt { opacity: 0; }
.em3-card__tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-size: 11px; font-weight: 500; color: var(--em3-ink);
  background: #fff; padding: 3px 8px;
}
.em3-card__fav {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--em3-ink); background: transparent; border: 0; cursor: pointer;
}
.em3-card__quick {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em;
  background: rgba(255,255,255,.94); color: var(--em3-ink);
  border: 0; border-top: 1px solid var(--em3-line);
  transform: translateY(100%);
  transition: transform .25s ease;
  cursor: pointer;
}
.em3-card:hover .em3-card__quick { transform: translateY(0); }
@media (hover: none) { .em3-card__quick { display: none; } }
.em3-card__body { padding: 12px 2px 0; }
.em3-card__name { font-size: 13px; line-height: 1.35; color: var(--em3-ink); }
.em3-card__meta { font-size: 12px; color: var(--em3-muted); margin-top: 2px; }
.em3-card__price { font-size: 13px; color: var(--em3-ink); margin-top: 6px; }
.em3-card__price s { color: var(--em3-muted); margin-left: 6px; }

.em3-grid-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 8px;
  row-gap: 32px;
}
@media (min-width: 1024px) { .em3-grid-products { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 12px; } }

/* Peaux de chamois détourées : légère rotation au survol */
.em3-pad img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
article:hover .em3-pad img { transform: translateY(-4px) rotate(-2deg); }

/* Photos produit détourées sur fond blanc posées sur une surface grise */
.em3-multiply { mix-blend-mode: multiply; }

/* Séparateurs et tableaux */
.em3-rule { border-top: 1px solid var(--em3-line); }
.em3-table { width: 100%; font-size: 13px; border-collapse: collapse; }
.em3-table th { text-align: left; font-weight: 500; color: var(--em3-muted); padding: 10px 0; border-bottom: 1px solid var(--em3-line); }
.em3-table td { padding: 10px 0; border-bottom: 1px solid var(--em3-line); color: var(--em3-ink); }

/* Squelettes de chargement */
.em3-skeleton { background: linear-gradient(90deg, #f1f1ef 0%, #f7f7f5 50%, #f1f1ef 100%); background-size: 200% 100%; animation: em3-shimmer 1.4s infinite linear; }
@keyframes em3-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Défilement horizontal sans barre */
.em3-scroll-x { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.em3-scroll-x::-webkit-scrollbar { display: none; }
.em3-scroll-x > * { scroll-snap-align: start; }

@media (prefers-reduced-motion: reduce) {
  .em3-tile img, .em3-card__media img, .em3-card__quick { transition: none !important; }
}

/* Zones sombres : les anciennes mises en valeur dorées (désormais encre) redeviennent lisibles */
html body :is(.bg-neutral-950, .bg-neutral-900, .bg-black, .bg-\[\#111111\], .bg-brand-dark) :is(.text-\[\#111111\], .text-\[\#000000\], .text-brand-gold, .text-brand-olive, .text-brand-dark) {
  color: rgba(255, 255, 255, 0.72) !important;
}
html body :is(.bg-neutral-950, .bg-neutral-900, .bg-black, .bg-\[\#111111\]) :is(.bg-\[\#111111\], .bg-brand-gold, .bg-brand-olive):not(button):not(a) {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

/* Hero sur téléphone : cadrage centré sur les maillots, hauteur adaptée à l'écran */
@media (max-width: 767px) {
  .em3-hero__track { height: 74svh; min-height: 460px; }
  #hero-bg-img { object-position: 62% center !important; }
  .em3-hero__caption { bottom: 64px; }
  .em3-hero__dots { bottom: 30px; }
}

/* Ancres : le titre ne passe pas sous l'en-tête collant */
html { scroll-padding-top: 120px; }

/* Rangées défilantes au doigt sur téléphone (gammes, chamois, journal) */
@media (max-width: 639px) {
  .em3-rail {
    display: flex; gap: 10px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px;
    scroll-padding-left: 20px;
  }
  .em3-rail::-webkit-scrollbar { display: none; }
  .em3-rail > * { flex: 0 0 80%; scroll-snap-align: start; }
  .em3-statement { font-size: 24px !important; line-height: 1.15 !important; }
}
@media (min-width: 640px) and (max-width: 767px) {
  #blogs-grid.em3-rail {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px;
  }
  #blogs-grid.em3-rail > * { flex: 0 0 60%; scroll-snap-align: start; }
}

/* Aucune page ne doit défiler horizontalement sur téléphone */
html, body { overflow-x: clip; }


/* ===================================================================
   PANEL ADMINISTRATIF — mêmes codes que le site (préfixé body.em3-admin)
   =================================================================== */
body.em3-admin { background: #fff; }
body.em3-admin main { background: #fff; }
body.em3-admin .em3-admin-card { background: #fff; border: 1px solid #E6E6E6; padding: 24px; }
body.em3-admin .em3-admin-h { font-family: var(--em3-display); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: #111; }

/* Typographie : pas de majuscules forcées, titres en Inter Tight */
body.em3-admin .uppercase:not(.em3-btn):not(.em3-link):not(.em3-keep-case) { text-transform: none !important; letter-spacing: 0 !important; }
body.em3-admin :is(h1, h2, h3) { font-family: var(--em3-display); letter-spacing: -0.015em; }
body.em3-admin main :is(h2, h3).text-sm, body.em3-admin main :is(h2, h3).text-base { font-size: 15px !important; }

/* Cartes et blocs : filet fin, pas d'ombre */
body.em3-admin main .custom-shadow, body.em3-admin main .bg-white.border { border-color: #E6E6E6 !important; }
body.em3-admin .shadow-inner { box-shadow: none !important; }

/* Couleurs vives ramenées au noir & gris ; le rouge reste réservé aux alertes */
body.em3-admin .bg-emerald-50,body.em3-admin .bg-emerald-100,body.em3-admin .bg-emerald-200,body.em3-admin .bg-green-50,body.em3-admin .bg-green-100,body.em3-admin .bg-green-200,body.em3-admin .bg-teal-50,body.em3-admin .bg-teal-100,body.em3-admin .bg-teal-200,body.em3-admin .bg-blue-50,body.em3-admin .bg-blue-100,body.em3-admin .bg-blue-200,body.em3-admin .bg-sky-50,body.em3-admin .bg-sky-100,body.em3-admin .bg-sky-200,body.em3-admin .bg-indigo-50,body.em3-admin .bg-indigo-100,body.em3-admin .bg-indigo-200,body.em3-admin .bg-violet-50,body.em3-admin .bg-violet-100,body.em3-admin .bg-violet-200,body.em3-admin .bg-purple-50,body.em3-admin .bg-purple-100,body.em3-admin .bg-purple-200,body.em3-admin .bg-amber-50,body.em3-admin .bg-amber-100,body.em3-admin .bg-amber-200,body.em3-admin .bg-yellow-50,body.em3-admin .bg-yellow-100,body.em3-admin .bg-yellow-200,body.em3-admin .bg-orange-50,body.em3-admin .bg-orange-100,body.em3-admin .bg-orange-200,body.em3-admin .bg-lime-50,body.em3-admin .bg-lime-100,body.em3-admin .bg-lime-200,body.em3-admin .bg-cyan-50,body.em3-admin .bg-cyan-100,body.em3-admin .bg-cyan-200,body.em3-admin .bg-fuchsia-50,body.em3-admin .bg-fuchsia-100,body.em3-admin .bg-fuchsia-200,body.em3-admin .bg-pink-50,body.em3-admin .bg-pink-100,body.em3-admin .bg-pink-200 { background-color: #F4F4F2 !important; }
body.em3-admin .bg-emerald-400,body.em3-admin .bg-emerald-500,body.em3-admin .bg-emerald-600,body.em3-admin .bg-emerald-700,body.em3-admin .bg-emerald-800,body.em3-admin .bg-green-400,body.em3-admin .bg-green-500,body.em3-admin .bg-green-600,body.em3-admin .bg-green-700,body.em3-admin .bg-green-800,body.em3-admin .bg-teal-400,body.em3-admin .bg-teal-500,body.em3-admin .bg-teal-600,body.em3-admin .bg-teal-700,body.em3-admin .bg-teal-800,body.em3-admin .bg-blue-400,body.em3-admin .bg-blue-500,body.em3-admin .bg-blue-600,body.em3-admin .bg-blue-700,body.em3-admin .bg-blue-800,body.em3-admin .bg-sky-400,body.em3-admin .bg-sky-500,body.em3-admin .bg-sky-600,body.em3-admin .bg-sky-700,body.em3-admin .bg-sky-800,body.em3-admin .bg-indigo-400,body.em3-admin .bg-indigo-500,body.em3-admin .bg-indigo-600,body.em3-admin .bg-indigo-700,body.em3-admin .bg-indigo-800,body.em3-admin .bg-violet-400,body.em3-admin .bg-violet-500,body.em3-admin .bg-violet-600,body.em3-admin .bg-violet-700,body.em3-admin .bg-violet-800,body.em3-admin .bg-purple-400,body.em3-admin .bg-purple-500,body.em3-admin .bg-purple-600,body.em3-admin .bg-purple-700,body.em3-admin .bg-purple-800,body.em3-admin .bg-amber-400,body.em3-admin .bg-amber-500,body.em3-admin .bg-amber-600,body.em3-admin .bg-amber-700,body.em3-admin .bg-amber-800,body.em3-admin .bg-yellow-400,body.em3-admin .bg-yellow-500,body.em3-admin .bg-yellow-600,body.em3-admin .bg-yellow-700,body.em3-admin .bg-yellow-800,body.em3-admin .bg-orange-400,body.em3-admin .bg-orange-500,body.em3-admin .bg-orange-600,body.em3-admin .bg-orange-700,body.em3-admin .bg-orange-800,body.em3-admin .bg-lime-400,body.em3-admin .bg-lime-500,body.em3-admin .bg-lime-600,body.em3-admin .bg-lime-700,body.em3-admin .bg-lime-800,body.em3-admin .bg-cyan-400,body.em3-admin .bg-cyan-500,body.em3-admin .bg-cyan-600,body.em3-admin .bg-cyan-700,body.em3-admin .bg-cyan-800,body.em3-admin .bg-fuchsia-400,body.em3-admin .bg-fuchsia-500,body.em3-admin .bg-fuchsia-600,body.em3-admin .bg-fuchsia-700,body.em3-admin .bg-fuchsia-800,body.em3-admin .bg-pink-400,body.em3-admin .bg-pink-500,body.em3-admin .bg-pink-600,body.em3-admin .bg-pink-700,body.em3-admin .bg-pink-800 { background-color: #111 !important; color: #fff !important; }
body.em3-admin .text-emerald-300,body.em3-admin .text-emerald-400,body.em3-admin .text-emerald-500,body.em3-admin .text-emerald-600,body.em3-admin .text-emerald-700,body.em3-admin .text-emerald-800,body.em3-admin .text-emerald-900,body.em3-admin .text-green-300,body.em3-admin .text-green-400,body.em3-admin .text-green-500,body.em3-admin .text-green-600,body.em3-admin .text-green-700,body.em3-admin .text-green-800,body.em3-admin .text-green-900,body.em3-admin .text-teal-300,body.em3-admin .text-teal-400,body.em3-admin .text-teal-500,body.em3-admin .text-teal-600,body.em3-admin .text-teal-700,body.em3-admin .text-teal-800,body.em3-admin .text-teal-900,body.em3-admin .text-blue-300,body.em3-admin .text-blue-400,body.em3-admin .text-blue-500,body.em3-admin .text-blue-600,body.em3-admin .text-blue-700,body.em3-admin .text-blue-800,body.em3-admin .text-blue-900,body.em3-admin .text-sky-300,body.em3-admin .text-sky-400,body.em3-admin .text-sky-500,body.em3-admin .text-sky-600,body.em3-admin .text-sky-700,body.em3-admin .text-sky-800,body.em3-admin .text-sky-900,body.em3-admin .text-indigo-300,body.em3-admin .text-indigo-400,body.em3-admin .text-indigo-500,body.em3-admin .text-indigo-600,body.em3-admin .text-indigo-700,body.em3-admin .text-indigo-800,body.em3-admin .text-indigo-900,body.em3-admin .text-violet-300,body.em3-admin .text-violet-400,body.em3-admin .text-violet-500,body.em3-admin .text-violet-600,body.em3-admin .text-violet-700,body.em3-admin .text-violet-800,body.em3-admin .text-violet-900,body.em3-admin .text-purple-300,body.em3-admin .text-purple-400,body.em3-admin .text-purple-500,body.em3-admin .text-purple-600,body.em3-admin .text-purple-700,body.em3-admin .text-purple-800,body.em3-admin .text-purple-900,body.em3-admin .text-amber-300,body.em3-admin .text-amber-400,body.em3-admin .text-amber-500,body.em3-admin .text-amber-600,body.em3-admin .text-amber-700,body.em3-admin .text-amber-800,body.em3-admin .text-amber-900,body.em3-admin .text-yellow-300,body.em3-admin .text-yellow-400,body.em3-admin .text-yellow-500,body.em3-admin .text-yellow-600,body.em3-admin .text-yellow-700,body.em3-admin .text-yellow-800,body.em3-admin .text-yellow-900,body.em3-admin .text-orange-300,body.em3-admin .text-orange-400,body.em3-admin .text-orange-500,body.em3-admin .text-orange-600,body.em3-admin .text-orange-700,body.em3-admin .text-orange-800,body.em3-admin .text-orange-900,body.em3-admin .text-lime-300,body.em3-admin .text-lime-400,body.em3-admin .text-lime-500,body.em3-admin .text-lime-600,body.em3-admin .text-lime-700,body.em3-admin .text-lime-800,body.em3-admin .text-lime-900,body.em3-admin .text-cyan-300,body.em3-admin .text-cyan-400,body.em3-admin .text-cyan-500,body.em3-admin .text-cyan-600,body.em3-admin .text-cyan-700,body.em3-admin .text-cyan-800,body.em3-admin .text-cyan-900,body.em3-admin .text-fuchsia-300,body.em3-admin .text-fuchsia-400,body.em3-admin .text-fuchsia-500,body.em3-admin .text-fuchsia-600,body.em3-admin .text-fuchsia-700,body.em3-admin .text-fuchsia-800,body.em3-admin .text-fuchsia-900,body.em3-admin .text-pink-300,body.em3-admin .text-pink-400,body.em3-admin .text-pink-500,body.em3-admin .text-pink-600,body.em3-admin .text-pink-700,body.em3-admin .text-pink-800,body.em3-admin .text-pink-900 { color: #111 !important; }
body.em3-admin .hover\:bg-emerald-50:hover,body.em3-admin .hover\:bg-emerald-100:hover,body.em3-admin .hover\:bg-emerald-200:hover,body.em3-admin .hover\:bg-emerald-500:hover,body.em3-admin .hover\:bg-emerald-600:hover,body.em3-admin .hover\:bg-emerald-700:hover,body.em3-admin .hover\:bg-green-50:hover,body.em3-admin .hover\:bg-green-100:hover,body.em3-admin .hover\:bg-green-200:hover,body.em3-admin .hover\:bg-green-500:hover,body.em3-admin .hover\:bg-green-600:hover,body.em3-admin .hover\:bg-green-700:hover,body.em3-admin .hover\:bg-teal-50:hover,body.em3-admin .hover\:bg-teal-100:hover,body.em3-admin .hover\:bg-teal-200:hover,body.em3-admin .hover\:bg-teal-500:hover,body.em3-admin .hover\:bg-teal-600:hover,body.em3-admin .hover\:bg-teal-700:hover,body.em3-admin .hover\:bg-blue-50:hover,body.em3-admin .hover\:bg-blue-100:hover,body.em3-admin .hover\:bg-blue-200:hover,body.em3-admin .hover\:bg-blue-500:hover,body.em3-admin .hover\:bg-blue-600:hover,body.em3-admin .hover\:bg-blue-700:hover,body.em3-admin .hover\:bg-sky-50:hover,body.em3-admin .hover\:bg-sky-100:hover,body.em3-admin .hover\:bg-sky-200:hover,body.em3-admin .hover\:bg-sky-500:hover,body.em3-admin .hover\:bg-sky-600:hover,body.em3-admin .hover\:bg-sky-700:hover,body.em3-admin .hover\:bg-indigo-50:hover,body.em3-admin .hover\:bg-indigo-100:hover,body.em3-admin .hover\:bg-indigo-200:hover,body.em3-admin .hover\:bg-indigo-500:hover,body.em3-admin .hover\:bg-indigo-600:hover,body.em3-admin .hover\:bg-indigo-700:hover,body.em3-admin .hover\:bg-violet-50:hover,body.em3-admin .hover\:bg-violet-100:hover,body.em3-admin .hover\:bg-violet-200:hover,body.em3-admin .hover\:bg-violet-500:hover,body.em3-admin .hover\:bg-violet-600:hover,body.em3-admin .hover\:bg-violet-700:hover,body.em3-admin .hover\:bg-purple-50:hover,body.em3-admin .hover\:bg-purple-100:hover,body.em3-admin .hover\:bg-purple-200:hover,body.em3-admin .hover\:bg-purple-500:hover,body.em3-admin .hover\:bg-purple-600:hover,body.em3-admin .hover\:bg-purple-700:hover,body.em3-admin .hover\:bg-amber-50:hover,body.em3-admin .hover\:bg-amber-100:hover,body.em3-admin .hover\:bg-amber-200:hover,body.em3-admin .hover\:bg-amber-500:hover,body.em3-admin .hover\:bg-amber-600:hover,body.em3-admin .hover\:bg-amber-700:hover,body.em3-admin .hover\:bg-yellow-50:hover,body.em3-admin .hover\:bg-yellow-100:hover,body.em3-admin .hover\:bg-yellow-200:hover,body.em3-admin .hover\:bg-yellow-500:hover,body.em3-admin .hover\:bg-yellow-600:hover,body.em3-admin .hover\:bg-yellow-700:hover,body.em3-admin .hover\:bg-orange-50:hover,body.em3-admin .hover\:bg-orange-100:hover,body.em3-admin .hover\:bg-orange-200:hover,body.em3-admin .hover\:bg-orange-500:hover,body.em3-admin .hover\:bg-orange-600:hover,body.em3-admin .hover\:bg-orange-700:hover,body.em3-admin .hover\:bg-lime-50:hover,body.em3-admin .hover\:bg-lime-100:hover,body.em3-admin .hover\:bg-lime-200:hover,body.em3-admin .hover\:bg-lime-500:hover,body.em3-admin .hover\:bg-lime-600:hover,body.em3-admin .hover\:bg-lime-700:hover,body.em3-admin .hover\:bg-cyan-50:hover,body.em3-admin .hover\:bg-cyan-100:hover,body.em3-admin .hover\:bg-cyan-200:hover,body.em3-admin .hover\:bg-cyan-500:hover,body.em3-admin .hover\:bg-cyan-600:hover,body.em3-admin .hover\:bg-cyan-700:hover,body.em3-admin .hover\:bg-fuchsia-50:hover,body.em3-admin .hover\:bg-fuchsia-100:hover,body.em3-admin .hover\:bg-fuchsia-200:hover,body.em3-admin .hover\:bg-fuchsia-500:hover,body.em3-admin .hover\:bg-fuchsia-600:hover,body.em3-admin .hover\:bg-fuchsia-700:hover,body.em3-admin .hover\:bg-pink-50:hover,body.em3-admin .hover\:bg-pink-100:hover,body.em3-admin .hover\:bg-pink-200:hover,body.em3-admin .hover\:bg-pink-500:hover,body.em3-admin .hover\:bg-pink-600:hover,body.em3-admin .hover\:bg-pink-700:hover { background-color: #E9E9E6 !important; }
body.em3-admin .border-emerald-100,body.em3-admin .border-emerald-200,body.em3-admin .border-emerald-300,body.em3-admin .border-emerald-400,body.em3-admin .border-emerald-500,body.em3-admin .border-green-100,body.em3-admin .border-green-200,body.em3-admin .border-green-300,body.em3-admin .border-green-400,body.em3-admin .border-green-500,body.em3-admin .border-teal-100,body.em3-admin .border-teal-200,body.em3-admin .border-teal-300,body.em3-admin .border-teal-400,body.em3-admin .border-teal-500,body.em3-admin .border-blue-100,body.em3-admin .border-blue-200,body.em3-admin .border-blue-300,body.em3-admin .border-blue-400,body.em3-admin .border-blue-500,body.em3-admin .border-sky-100,body.em3-admin .border-sky-200,body.em3-admin .border-sky-300,body.em3-admin .border-sky-400,body.em3-admin .border-sky-500,body.em3-admin .border-indigo-100,body.em3-admin .border-indigo-200,body.em3-admin .border-indigo-300,body.em3-admin .border-indigo-400,body.em3-admin .border-indigo-500,body.em3-admin .border-violet-100,body.em3-admin .border-violet-200,body.em3-admin .border-violet-300,body.em3-admin .border-violet-400,body.em3-admin .border-violet-500,body.em3-admin .border-purple-100,body.em3-admin .border-purple-200,body.em3-admin .border-purple-300,body.em3-admin .border-purple-400,body.em3-admin .border-purple-500,body.em3-admin .border-amber-100,body.em3-admin .border-amber-200,body.em3-admin .border-amber-300,body.em3-admin .border-amber-400,body.em3-admin .border-amber-500,body.em3-admin .border-yellow-100,body.em3-admin .border-yellow-200,body.em3-admin .border-yellow-300,body.em3-admin .border-yellow-400,body.em3-admin .border-yellow-500,body.em3-admin .border-orange-100,body.em3-admin .border-orange-200,body.em3-admin .border-orange-300,body.em3-admin .border-orange-400,body.em3-admin .border-orange-500,body.em3-admin .border-lime-100,body.em3-admin .border-lime-200,body.em3-admin .border-lime-300,body.em3-admin .border-lime-400,body.em3-admin .border-lime-500,body.em3-admin .border-cyan-100,body.em3-admin .border-cyan-200,body.em3-admin .border-cyan-300,body.em3-admin .border-cyan-400,body.em3-admin .border-cyan-500,body.em3-admin .border-fuchsia-100,body.em3-admin .border-fuchsia-200,body.em3-admin .border-fuchsia-300,body.em3-admin .border-fuchsia-400,body.em3-admin .border-fuchsia-500,body.em3-admin .border-pink-100,body.em3-admin .border-pink-200,body.em3-admin .border-pink-300,body.em3-admin .border-pink-400,body.em3-admin .border-pink-500 { border-color: #D9D9D6 !important; }
body.em3-admin :is(.bg-rose-50, .bg-red-50) { background-color: #FEF2F2 !important; }
body.em3-admin :is(.text-rose-500, .text-rose-600, .text-rose-700, .text-rose-800, .text-red-500, .text-red-600, .text-red-700, .text-red-800) { color: #DC2626 !important; }
body.em3-admin :is(.bg-rose-100, .bg-red-100) { background-color: #FEF2F2 !important; }

/* Tableaux */
body.em3-admin main table thead th { font-weight: 400 !important; color: #6B6B6B !important; font-size: 12px !important; }
body.em3-admin main table tbody td { font-size: 13px; }

/* Formulaires */
body.em3-admin main :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { border-color: #D9D9D6; }
body.em3-admin .backdrop-blur-sm, body.em3-admin .backdrop-blur-md { backdrop-filter: none !important; }

/* Modales : fond blanc, filet, angles droits */
body.em3-admin .fixed.inset-0 > div.bg-white { border: 1px solid #E6E6E6; }

/* Pastilles d'icônes décoratives (un carré qui ne contient qu'une icône) : masquées */
body.em3-admin main :is(div, span):is([class*="w-7"], [class*="w-8"], [class*="w-9"], [class*="w-10"], [class*="w-11"], [class*="w-12"], [class*="p-1.5"], [class*="p-2"]):is([class*="rounded"]):has(> svg:only-child):not(button):not(a):not([onclick]) { display: none !important; }

/* Glisser-déposer (catégories du panel) */
body.em3-admin .em3-drag-handle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: #B5B5B5; cursor: grab; touch-action: none; flex-shrink: 0; }
body.em3-admin .em3-drag-handle:hover, body.em3-admin .em3-drag-handle:focus-visible { color: #111; outline: none; background: #F4F4F2; }
body.em3-admin .em3-drag-handle:active { cursor: grabbing; }
body.em3-admin .em3-sort-ghost { opacity: .35; background: #F4F4F2 !important; }
body.em3-admin .em3-sort-chosen { background: #fff !important; box-shadow: 0 8px 24px -12px rgba(0,0,0,.25); }

/* Éditeur de tailles (fiche produit du panel) */
body.em3-admin .em3-size-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px 0 12px; border: 1px solid #111; font-size: 13px; color: #111; background: #fff; user-select: none; }
body.em3-admin .em3-size-chip button { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; color: #6B6B6B; }
body.em3-admin .em3-size-chip button:hover { color: #DC2626; }

/* Webmail : filtres rapides (même taille et alignement quel que soit l'état) */
body.em3-admin .em3-mail-filter { display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid #E6E6E6; background: #fff; color: #333; white-space: nowrap; transition: background-color .15s, color .15s, border-color .15s; }
body.em3-admin .em3-mail-filter:hover { background: #F4F4F2; }
body.em3-admin .em3-mail-filter.is-active { background: #111; border-color: #111; color: #fff; }

/* Bandeau cookies : panneau plein en bas d'écran, toujours au premier plan (Safari iOS compris) */
.em3-cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 2147483000;
  background: #fff;
  border-top: 1px solid var(--em3-line);
  box-shadow: 0 -10px 30px -16px rgba(0, 0, 0, .22);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
.em3-cookie-banner.hidden { display: none; }
.em3-cookie-modal { z-index: 2147483001; }
.em3-cookie-modal > div { background: #fff; }
@media (max-width: 639px) {
  .em3-cookie-modal > div { max-height: 92vh; border-radius: 0; }
}

/* Barre de catégories : marge gauche conservée malgré l'accrochage du défilement */
#category-subnav-list { scroll-padding-inline: 20px; }
@media (min-width: 768px) { #category-subnav-list { scroll-padding-inline: 32px; } }

/* ===================================================================
   ANIMATIONS DISCRÈTES — uniquement transform / opacity.
   Les apparitions au défilement ne s'activent que via JS (classe .em3-reveal
   posée par em3-components.js) : sans JS, tout le contenu reste visible.
   =================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Apparition au défilement : fondu + glissement vers le haut, en cascade */
  .em3-reveal {
    opacity: 0;
    transform: translate3d(0, 36px, 0);
    transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
    transition-delay: var(--em3-reveal-delay, 0ms);
  }
  .em3-reveal.is-in { opacity: 1; transform: none; }

  /* Arrivée sur la page : les premiers blocs du contenu montent en fondu */
  main > :first-child:not(.em3-hero) > :nth-child(-n+5):not(script):not(style) {
    animation: em3-enter .8s cubic-bezier(.2,.7,.2,1) both;
  }
  main > :first-child:not(.em3-hero) > :nth-child(2) { animation-delay: .08s; }
  main > :first-child:not(.em3-hero) > :nth-child(3) { animation-delay: .16s; }
  main > :first-child:not(.em3-hero) > :nth-child(4) { animation-delay: .24s; }
  main > :first-child:not(.em3-hero) > :nth-child(5) { animation-delay: .32s; }
  @keyframes em3-enter { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }

  /* Carrousel d'accueil : le texte de la diapositive active monte en cascade */
  .em3-hero__slide.is-active .em3-hero__caption > * { animation: em3-enter .9s cubic-bezier(.2,.7,.2,1) both; animation-delay: .25s; }
  .em3-hero__slide.is-active .em3-hero__caption > :nth-child(2) { animation-delay: .4s; }
  .em3-hero__slide.is-active .em3-hero__caption > :nth-child(3) { animation-delay: .55s; }
  .em3-hero__dots { animation: em3-fade 1s ease .8s both; }
  @keyframes em3-fade { from { opacity: 0; } to { opacity: 1; } }

  /* Cartes produit : léger zoom de la photo au survol */
  @media (hover: hover) {
    .em3-card__media img { will-change: transform; }
    .em3-card:hover .em3-card__media img { transform: scale(1.035); }
    .em3-card__fav { transition: transform .2s ease; }
    .em3-card__fav:hover { transform: scale(1.12); }
  }

  /* Boutons : petit enfoncement au clic */
  .em3-btn, .em3-icon-btn, .em3-card__fav, .em3-card__quick, #btn-add-to-cart {
    transition-property: background-color, color, border-color, opacity, transform;
    transition-duration: .2s;
    transition-timing-function: ease;
  }
  .em3-btn:active, .em3-icon-btn:active, #btn-add-to-cart:active { transform: scale(.97); }
  .em3-card__fav:active { transform: scale(.9); }

  /* Compteur du panier : rebond discret après un ajout */
  .em3-count.is-bump { animation: em3-bump .45s cubic-bezier(.2,.7,.2,1); }
  @keyframes em3-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

  /* Menus et listes déroulantes de l'en-tête : fondu + glissement à l'ouverture */
  #account-dropdown:not(.hidden),
  #navbar-search-dropdown:not(.hidden), #mobile-search-dropdown:not(.hidden),
  #mobile-search-bar:not(.hidden) {
    animation: em3-drop .22s cubic-bezier(.2,.7,.2,1);
  }
  #mobile-nav-drawer:not(.hidden) { animation: em3-drawer .3s cubic-bezier(.2,.7,.2,1); }

  /* En-tête : les trois zones (liens, logo, icônes) descendent en fondu au chargement */
  [data-purpose="primary-header"] > .em3-container > * { animation: em3-drop .7s cubic-bezier(.2,.7,.2,1) both; }
  [data-purpose="primary-header"] > .em3-container > :nth-child(2) { animation-delay: .08s; }
  [data-purpose="primary-header"] > .em3-container > :nth-child(3) { animation-delay: .16s; }

  /* Liens de navigation et catégories : soulignement qui se trace depuis la gauche */
  html body :is(.em3-nav-link, .em3-subnav-btn) { position: relative; border-bottom-color: transparent !important; }
  html body :is(.em3-nav-link, .em3-subnav-btn)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: left center;
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
  }
  html body :is(.em3-nav-link, .em3-subnav-btn):is(:hover, .is-active)::after { transform: scaleX(1); }
  html body .em3-subnav-btn { transition: color .25s ease; }

  /* Barre de catégories : les catégories arrivent une à une */
  #category-subnav-list.is-ready > .em3-subnav-btn { animation: em3-slide-in .55s cubic-bezier(.2,.7,.2,1) both; }
  #category-subnav-list.is-ready > :nth-child(2) { animation-delay: .04s; }
  #category-subnav-list.is-ready > :nth-child(3) { animation-delay: .08s; }
  #category-subnav-list.is-ready > :nth-child(4) { animation-delay: .12s; }
  #category-subnav-list.is-ready > :nth-child(5) { animation-delay: .16s; }
  #category-subnav-list.is-ready > :nth-child(6) { animation-delay: .2s; }
  #category-subnav-list.is-ready > :nth-child(7) { animation-delay: .24s; }
  #category-subnav-list.is-ready > :nth-child(8) { animation-delay: .28s; }
  #category-subnav-list.is-ready > :nth-child(n+9) { animation-delay: .32s; }
  @keyframes em3-slide-in { from { opacity: 0; transform: translate3d(14px, 0, 0); } to { opacity: 1; transform: none; } }

  /* Icônes de l'en-tête : léger soulèvement au survol, logo qui pivote doucement */
  @media (hover: hover) {
    html body .em3-icon-btn:hover { opacity: 1; transform: translate3d(0, -2px, 0); }
    .em3-logo-mark { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
    a:hover > .em3-logo-mark { transform: rotate(-12deg) scale(1.06); }
  }

  /* Menu mobile : les liens arrivent en cascade */
  #mobile-nav-drawer:not(.hidden) nav > a { animation: em3-slide-in .45s cubic-bezier(.2,.7,.2,1) both; }
  #mobile-nav-drawer:not(.hidden) nav > a:nth-child(2) { animation-delay: .05s; }
  #mobile-nav-drawer:not(.hidden) nav > a:nth-child(3) { animation-delay: .1s; }
  #mobile-nav-drawer:not(.hidden) nav > a:nth-child(4) { animation-delay: .15s; }
  #mobile-nav-drawer:not(.hidden) nav > a:nth-child(5) { animation-delay: .2s; }
  #mobile-nav-drawer:not(.hidden) nav > a:nth-child(6) { animation-delay: .25s; }

  /* Image de la landing : zoom arrière lent (« Ken Burns ») à chaque diapositive, fondu à l'arrivée */
  .em3-hero__slide img { transform: scale(1.06); transition: transform 1.2s ease; }
  .em3-hero__slide.is-active img { animation: em3-kenburns 9s cubic-bezier(.3,.3,.4,1) both; }
  @keyframes em3-kenburns { from { transform: scale(1.14); } to { transform: scale(1); } }
  /* départ à .4 et non à 0 : l'image compte tout de suite pour le LCP */
  .em3-hero__track { animation: em3-hero-in 1.2s ease both; will-change: transform; }
  @keyframes em3-hero-in { from { opacity: .4; } to { opacity: 1; } }

  /* Tuiles « Acheter par discipline » : zoom plus franc, libellé qui glisse */
  @media (hover: hover) {
    #catalogue-showcase a.group img { transition: transform 1s cubic-bezier(.2,.7,.2,1) !important; }
    #catalogue-showcase a.group:hover img { transform: scale(1.07) !important; }
    #catalogue-showcase a.group p { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
    #catalogue-showcase a.group:hover p { transform: translate3d(6px, 0, 0); }
  }
  @keyframes em3-drop { from { opacity: 0; transform: translate3d(0, -6px, 0); } to { opacity: 1; transform: none; } }
  @keyframes em3-drawer { from { opacity: 0; transform: translate3d(0, -12px, 0); } to { opacity: 1; transform: none; } }
}