/*
  Justine Créa Kids — CSS global
  Projet statique HTML/CSS/JS pur, mobile-first, sans framework.
*/


/* Police de prévisualisation des lettres 3D.
   Ajoutez le fichier réel ici : assets/fonts/matcha-cih.woff2
   Si le fichier n'est pas encore présent, le navigateur utilisera les polices de secours. */
@font-face {
  font-family: "Matcha CIH";
  src:
    url("../fonts/matcha-cih.woff2") format("woff2"),
    url("../fonts/matcha-cih.woff") format("woff"),
    url("../fonts/matcha-cih.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Matcha Cih";
  src:
    url("../fonts/matcha-cih.woff2") format("woff2"),
    url("../fonts/matcha-cih.woff") format("woff"),
    url("../fonts/matcha-cih.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --white: #ffffff;
  --cream: #fffaf7;
  --ink: #342f3f;
  --muted: #756c82;
  --line: #f0e8ef;
  --shadow: 0 18px 45px rgba(52, 47, 63, 0.10);
  --shadow-soft: 0 10px 25px rgba(52, 47, 63, 0.08);

  --primary: #b78cf7;
  --primary-dark: #7655c4;
  --accent: #ff91bf;
  --accent-dark: #d95f94;

  --pastel-violet: #eadfff;
  --pastel-yellow: #fff0ad;
  --pastel-rose: #ffdcea;
  --pastel-orange: #ffdfc6;
  --pastel-blue: #dff3ff;
  --pastel-green: #dcf7e8;
  --pastel-lilac: #f5edff;

  --radius-xs: 10px;
  --radius-sm: 16px;
  --radius-md: 24px;
  --radius-lg: 34px;
  --container: min(1120px, calc(100% - 32px));
  --header-height: 88px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--primary-dark);
}

img,
svg {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.container {
  width: var(--container);
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 999;
  transform: translateY(-160%);
  background: var(--ink);
  color: var(--white);
  padding: 10px 14px;
  border-radius: var(--radius-xs);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* Header blanc */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--header-height);
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  min-height: var(--header-height);
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "brand actions toggle";
  align-items: center;
  gap: 12px;
  position: relative;
}

.brand { grid-area: brand; }
.header-actions { grid-area: actions; }
.nav-toggle { grid-area: toggle; }
.primary-nav { grid-area: nav; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.brand img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 7px 18px rgba(183, 140, 247, 0.22);
}

.brand-text {
  display: none;
  line-height: 1.05;
}

.header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.icon-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-weight: 750;
  color: var(--ink);
}

.icon-link:hover,
.icon-link:focus-visible {
  border-color: #dccdf9;
  color: var(--primary-dark);
  outline: none;
}

.icon-label {
  display: none;
}

.cart-count {
  min-width: 22px;
  min-height: 22px;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--pastel-rose);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 900;
}

.nav-toggle {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
}

.nav-toggle__bar {
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: var(--ink);
  transition: transform 180ms ease, opacity 180ms ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-of-type(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-of-type(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-of-type(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.primary-nav {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  right: 0;
  max-height: 0;
  overflow: hidden;
  background: var(--white);
  border-bottom: 1px solid transparent;
  transition: max-height 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}

.primary-nav.is-open {
  max-height: calc(100vh - var(--header-height));
  overflow-y: auto;
  border-color: var(--line);
  box-shadow: var(--shadow-soft);
}

.primary-nav ul {
  list-style: none;
  margin: 0;
  padding: 12px 0;
  display: grid;
  gap: 4px;
}

.primary-nav a {
  display: block;
  padding: 12px 14px;
  border-radius: var(--radius-xs);
  color: var(--muted);
  font-weight: 780;
}

.primary-nav a:hover,
.primary-nav a:focus-visible,
.primary-nav a[aria-current="page"] {
  color: var(--primary-dark);
  background: var(--pastel-lilac);
  outline: none;
}

/* Composants réutilisables */
.section {
  padding: 56px 0;
}

.section--soft {
  background: linear-gradient(180deg, #fff 0%, #fff8fb 100%);
}

.section--blue {
  background: linear-gradient(180deg, #ffffff 0%, var(--pastel-blue) 100%);
}

.section-header {
  margin-bottom: 28px;
  display: grid;
  gap: 8px;
}

.section-kicker,
.kicker {
  color: var(--accent-dark);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-weight: 900;
  font-size: 0.78rem;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

h1 {
  font-size: clamp(2.2rem, 7vw, 4.75rem);
}

h2 {
  font-size: clamp(1.8rem, 4vw, 3rem);
}

h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.7rem);
}

p,
figure {
  margin: 0;
}

.lead {
  color: var(--muted);
  font-size: clamp(1.02rem, 2vw, 1.25rem);
  max-width: 68ch;
}

.text-muted {
  color: var(--muted);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 900;
  color: var(--ink);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
  outline: none;
}

.btn--primary {
  background: var(--pastel-violet);
  border-color: #d9c4ff;
}

.btn--primary:hover,
.btn--primary:focus-visible {
  color: var(--primary-dark);
}

.btn--secondary {
  background: var(--white);
  border-color: var(--line);
}

.btn--accent {
  background: var(--pastel-rose);
  border-color: #ffc1d7;
}

.btn--green {
  background: var(--pastel-green);
  border-color: #bdeecd;
}

.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

/* Médias / photos réelles */
.media-card,
.product-photo-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--cream);
  box-shadow: var(--shadow);
}

.media-card img,
.product-photo-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.hero-photo-card {
  min-height: 420px;
  aspect-ratio: 4 / 5;
}

.hero-photo-card img {
  object-position: center;
}

.category-card__photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 12px 24px rgba(52, 47, 63, 0.12);
}

/* Hero accueil — fond blanc */
.hero {
  background: var(--white);
  padding: 40px 0 56px;
}

.hero-grid {
  display: grid;
  gap: 34px;
  align-items: center;
}

.hero-content {
  display: grid;
  gap: 18px;
}

.hero-title span {
  color: var(--primary-dark);
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--pastel-yellow);
  border: 1px solid rgba(52, 47, 63, 0.06);
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 850;
}

.hero-visual {
  position: relative;
}

.image-placeholder,
.product-image-placeholder,
.page-illustration {
  position: relative;
  min-height: 310px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 220, 234, 0.88) 0 14%, transparent 15%),
    radial-gradient(circle at 88% 20%, rgba(223, 243, 255, 0.95) 0 18%, transparent 19%),
    linear-gradient(135deg, #ffffff 0%, #fff9de 42%, #f5edff 100%);
}

.room-scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.room-wall {
  width: min(420px, 90%);
  min-height: 220px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 0 0 1px rgba(52, 47, 63, 0.06), 0 20px 45px rgba(52, 47, 63, 0.09);
  padding: 26px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 20px;
}

.wall-letters {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.wall-letters span {
  width: 52px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  font-size: 2.15rem;
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(52, 47, 63, 0.10);
}

.wall-letters span:nth-child(1) { background: var(--pastel-rose); }
.wall-letters span:nth-child(2) { background: var(--pastel-yellow); }
.wall-letters span:nth-child(3) { background: var(--pastel-blue); }
.wall-letters span:nth-child(4) { background: var(--pastel-green); }
.wall-letters span:nth-child(5) { background: var(--pastel-violet); }

.child-silhouette {
  width: 72px;
  height: 82px;
  position: relative;
}

.child-silhouette::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 42px;
  height: 42px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #ffd7b8;
  box-shadow: inset 8px 0 0 rgba(52, 47, 63, 0.08);
}

.child-silhouette::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 70px;
  height: 48px;
  transform: translateX(-50%);
  border-radius: 26px 26px 12px 12px;
  background: var(--pastel-orange);
}

.placeholder-caption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 1;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--muted);
  text-align: center;
  font-weight: 780;
  font-size: 0.9rem;
  backdrop-filter: blur(8px);
}

/* Catégories */
.category-layout {
  display: grid;
  gap: 18px;
}

.category-stack {
  display: grid;
  gap: 18px;
}

.category-card {
  min-height: 220px;
  padding: 24px;
  border: 1px solid rgba(52, 47, 63, 0.06);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  position: relative;
}

.category-card::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -46px;
  bottom: -46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
}

.category-card > * {
  position: relative;
  z-index: 1;
}

.category-card--large {
  min-height: 360px;
}

.category-card h3 {
  margin-bottom: 10px;
}

.category-description-placeholder {
  padding-top: 14px;
  border-top: 1px solid rgba(52, 47, 63, 0.08);
  color: rgba(52, 47, 63, 0.72);
  font-weight: 650;
}

.pastel-violet { background: var(--pastel-violet); }
.pastel-yellow { background: var(--pastel-yellow); }
.pastel-rose { background: var(--pastel-rose); }
.pastel-orange { background: var(--pastel-orange); }
.pastel-blue { background: var(--pastel-blue); }
.pastel-green { background: var(--pastel-green); }

/* Réassurance — flex-box mobile-first */
.reassurance-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.reassurance-card {
  flex: 1 1 100%;
  min-height: 178px;
  padding: 20px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(52, 47, 63, 0.06);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 14px;
  align-content: start;
}

.reassurance-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.reassurance-icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.65);
  font-size: 1.55rem;
  box-shadow: inset 0 0 0 1px rgba(52, 47, 63, 0.05);
}

.reassurance-card h3 {
  font-size: 1.08rem;
  letter-spacing: -0.02em;
}

.reassurance-card p {
  color: rgba(52, 47, 63, 0.72);
}

/* Produits */
.product-grid {
  display: grid;
  gap: 18px;
}

.product-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
}

.product-card__media {
  min-height: 190px;
  background: linear-gradient(135deg, var(--pastel-blue), var(--pastel-lilac));
  display: grid;
  place-items: center;
  padding: 22px;
}

.product-card__media--photo,
.product-card__media--contain {
  min-height: 220px;
  padding: 0;
  overflow: hidden;
}

.product-card__media--photo img,
.product-card__media--contain img {
  width: 100%;
  height: 220px;
  display: block;
}

.product-card__media--photo img {
  object-fit: cover;
}

.product-card__media--contain img {
  object-fit: contain;
  padding: 14px;
}

.product-mini-letters {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.product-mini-letters span {
  width: 42px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  font-size: 1.45rem;
  font-weight: 950;
  box-shadow: 0 8px 15px rgba(52, 47, 63, 0.10);
}

.product-mini-letters span:nth-child(1) { background: var(--pastel-rose); }
.product-mini-letters span:nth-child(2) { background: var(--pastel-yellow); }
.product-mini-letters span:nth-child(3) { background: var(--pastel-green); }
.product-mini-letters span:nth-child(4) { background: var(--pastel-violet); }

.cat-cube {
  width: 128px;
  height: 128px;
  border-radius: 28px;
  background: var(--pastel-orange);
  position: relative;
  box-shadow: inset 0 -12px 0 rgba(52, 47, 63, 0.07), 0 14px 24px rgba(52, 47, 63, 0.10);
}

.cat-cube::before,
.cat-cube::after {
  content: "";
  position: absolute;
  top: -22px;
  width: 40px;
  height: 40px;
  background: var(--pastel-orange);
  transform: rotate(45deg);
  border-radius: 8px;
}

.cat-cube::before { left: 20px; }
.cat-cube::after { right: 20px; }

.cat-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2rem;
}

.product-card__body {
  padding: 18px;
  display: grid;
  gap: 10px;
  flex: 1;
}

.product-card h3 {
  font-size: 1.18rem;
}

.product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.price {
  font-weight: 950;
  color: var(--primary-dark);
  font-size: 1.15rem;
}

.product-card__footer {
  padding: 0 18px 18px;
  margin-top: auto;
}

/* Avis */
.testimonial-grid {
  display: grid;
  gap: 18px;
}

.testimonial-card {
  padding: 22px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.testimonial-card blockquote {
  margin: 0;
  color: var(--ink);
  font-weight: 650;
}

.testimonial-card footer {
  margin-top: 14px;
  color: var(--muted);
  font-weight: 800;
}

/* Pages internes */
.page-hero {
  background: var(--white);
  padding: 42px 0 26px;
}

.page-hero__content {
  display: grid;
  gap: 12px;
}

.breadcrumb {
  font-size: 0.92rem;
  color: var(--muted);
  margin-bottom: 18px;
}

.breadcrumb a {
  color: var(--primary-dark);
  font-weight: 800;
}

.content-grid {
  display: grid;
  gap: 20px;
}

.text-card {
  padding: 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 14px;
}

.text-card.pastel-violet { background: var(--pastel-violet); }
.text-card.pastel-yellow { background: var(--pastel-yellow); }
.text-card.pastel-rose { background: var(--pastel-rose); }
.text-card.pastel-orange { background: var(--pastel-orange); }
.text-card.pastel-blue { background: var(--pastel-blue); }
.text-card.pastel-green { background: var(--pastel-green); }
.text-card.pastel-lilac { background: var(--pastel-lilac); }

.text-card ul,
.text-card ol {
  margin: 0;
  padding-left: 1.2rem;
}

/* Page produit personnalisable */
.product-detail {
  display: grid;
  gap: 28px;
  align-items: start;
}

.product-gallery {
  display: grid;
  gap: 16px;
}

.product-photo-card {
  min-height: 320px;
  aspect-ratio: 4 / 3;
}

.product-photo-card img {
  min-height: 320px;
}

.product-photo-card--contain img {
  object-fit: contain;
  padding: 12px;
  background: var(--white);
}

.product-gallery-mini {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.product-gallery-mini .product-photo-card {
  min-height: 150px;
  border-radius: var(--radius-md);
}

.product-gallery-mini .product-photo-card img {
  min-height: 150px;
}

.product-image-placeholder {
  min-height: 360px;
  display: grid;
  place-items: center;
  padding: 24px;
}

.preview-name {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  position: relative;
  z-index: 1;
}

.preview-name span {
  width: 48px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  font-size: 1.65rem;
  font-weight: 950;
  box-shadow: 0 12px 22px rgba(52, 47, 63, 0.12);
}

.product-info {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow);
}

.product-info > * + * {
  margin-top: 18px;
}

.form-grid {
  display: grid;
  gap: 18px;
}

.form-field {
  display: grid;
  gap: 8px;
}

.form-field label,
.field-label {
  font-weight: 900;
  color: var(--ink);
}

.form-help {
  color: var(--muted);
  font-size: 0.92rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid #ded4e5;
  border-radius: 14px;
  background: var(--white);
  color: var(--ink);
  padding: 12px 14px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(183, 140, 247, 0.18);
}

fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin: 0;
}

legend {
  padding: 0 8px;
  font-weight: 950;
}

.palette-tools {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}

.color-palette {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.palette-photos {
  display: grid;
  gap: 12px;
}

.palette-photo {
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.palette-photo img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.palette-photo figcaption {
  padding: 10px 12px;
  color: var(--muted);
  font-weight: 800;
  font-size: 0.92rem;
}

.swatch {
  min-height: 42px;
  border: 1px solid rgba(52, 47, 63, 0.18);
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 950;
  color: #2f2a36;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45);
}

.swatch:hover,
.swatch:focus-visible,
.swatch.is-selected {
  outline: none;
  border-color: var(--primary-dark);
  box-shadow: 0 0 0 4px rgba(183, 140, 247, 0.20), inset 0 0 0 2px rgba(255, 255, 255, 0.45);
}

.letter-colors {
  display: grid;
  gap: 12px;
}

.letter-field {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--cream);
  display: grid;
  gap: 10px;
}

.letter-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 950;
}

.letter-pill {
  width: 36px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--pastel-violet);
  box-shadow: 0 5px 12px rgba(52, 47, 63, 0.09);
}

.price-box {
  padding: 18px;
  border-radius: var(--radius-md);
  background: var(--pastel-lilac);
  border: 1px solid #dfceff;
  display: grid;
  gap: 9px;
}

.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dynamic-price {
  color: var(--primary-dark);
  font-size: 1.8rem;
  font-weight: 950;
}

.status-message {
  min-height: 1.4em;
  font-weight: 800;
}

.status-message.success { color: #217d4e; }
.status-message.error { color: #b3261e; }

/* Panier */
.cart-layout {
  display: grid;
  gap: 24px;
  align-items: start;
}

.cart-items {
  display: grid;
  gap: 14px;
}

.cart-item {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 14px;
}

.cart-item__top {
  display: flex;
  gap: 14px;
  justify-content: space-between;
  align-items: start;
}

.cart-item__details {
  display: grid;
  gap: 6px;
}

.cart-item__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.qty-btn,
.remove-btn {
  min-width: 38px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-weight: 950;
}

.remove-btn {
  padding-inline: 14px;
  color: #b3261e;
}

.order-summary,
.checkout-panel {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow);
  display: grid;
  gap: 18px;
}

.summary-line {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.summary-line.total {
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 1.2rem;
  font-weight: 950;
}

.method-grid {
  display: grid;
  gap: 12px;
}

.method-card {
  position: relative;
  display: grid;
  gap: 5px;
  padding: 14px 14px 14px 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--cream);
}

.method-card input {
  position: absolute;
  left: 16px;
  top: 18px;
  width: 18px;
  height: 18px;
  accent-color: var(--primary-dark);
}

.method-card strong {
  line-height: 1.2;
}

.method-card:has(input:checked) {
  border-color: var(--primary);
  background: var(--pastel-lilac);
}

.empty-cart {
  padding: 30px;
  text-align: center;
  border: 1px dashed #d9cfe1;
  border-radius: var(--radius-md);
  color: var(--muted);
  background: var(--cream);
}

/* Formulaire contact */
.contact-layout {
  display: grid;
  gap: 24px;
  align-items: start;
}

.contact-form {
  display: grid;
  gap: 16px;
}

/* Footer blanc */
.site-footer {
  background: var(--white);
  border-top: 1px solid var(--line);
  padding: 42px 0 22px;
}

.footer-grid {
  display: grid;
  gap: 28px;
}

.footer-brand {
  display: grid;
  gap: 10px;
}

.footer-brand img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
}

.footer-links {
  display: grid;
  gap: 18px;
}

.footer-links h3 {
  font-size: 1rem;
  letter-spacing: 0;
  margin-bottom: 10px;
}

.footer-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.footer-links a {
  color: var(--muted);
  font-weight: 740;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--primary-dark);
  outline: none;
}

.footer-bottom {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.92rem;
}

/* Responsive tablette */
@media (min-width: 560px) {
  .brand-text,
  .icon-label {
    display: inline;
  }

  .color-palette {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .letter-colors,
  .method-grid,
  .footer-links,
  .palette-photos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 700px) {
  .hero {
    padding: 56px 0 76px;
  }

  .reassurance-grid,
  .product-grid,
  .testimonial-grid,
  .content-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reassurance-grid {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .reassurance-card {
    flex-basis: calc(50% - 16px);
  }

  .contact-layout {
    grid-template-columns: 0.8fr 1.2fr;
  }
}

/* Responsive desktop */
@media (min-width: 960px) {
  .header-inner {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "brand nav actions";
    gap: 22px;
  }

  .brand img {
    width: 68px;
    height: 68px;
  }

  .nav-toggle {
    display: none;
  }

  .primary-nav {
    position: static;
    max-height: none;
    overflow: visible;
    border: 0;
    box-shadow: none;
    justify-self: center;
  }

  .primary-nav ul {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0;
  }

  .primary-nav a {
    padding: 10px 12px;
    font-size: 0.94rem;
  }

  .hero-grid {
    grid-template-columns: 0.95fr 1.05fr;
    gap: 54px;
  }

  .category-layout {
    grid-template-columns: 2fr 1fr;
  }

  .category-stack {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .reassurance-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .reassurance-card {
    flex-basis: calc(25% - 16px);
  }

  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .testimonial-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .product-detail {
    grid-template-columns: 0.92fr 1.08fr;
  }

  .product-gallery {
    position: sticky;
    top: calc(var(--header-height) + 22px);
  }

  .cart-layout {
    grid-template-columns: minmax(0, 1fr) 390px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1.45fr;
  }

  .footer-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1120px) {
  .section {
    padding: 72px 0;
  }

  .primary-nav a {
    padding-inline: 14px;
  }
}

@media (max-width: 374px) {
  :root {
    --container: min(100% - 22px, 1120px);
  }

  .header-inner {
    gap: 7px;
  }

  .brand img {
    width: 52px;
    height: 52px;
  }

  .icon-link {
    min-height: 38px;
    padding: 7px 8px;
  }

  .cart-count {
    min-width: 20px;
  }
}

/* --------------------------------------------------------------------------
   Thème choisi par l'utilisateur — style boutique pastel premium
   Ces règles complètent le CSS global et s'appliquent surtout à l'accueil.
---------------------------------------------------------------------------- */
:root {
  --theme-violet: #c9a8ff;
  --theme-pink: #ffb7d5;
  --theme-yellow: #ffe8a8;
  --theme-orange: #ffc49c;
  --theme-blue: #bfe9ff;
  --theme-green: #c7f4df;
  --theme-bg: #fffdfb;
  --theme-ink: #30283d;
  --theme-gradient: linear-gradient(135deg, #f0e7ff 0%, #ffe4f0 48%, #e4f6ff 100%);
}

body {
  background:
    radial-gradient(circle at top left, rgba(255, 183, 213, 0.18), transparent 32rem),
    radial-gradient(circle at top right, rgba(191, 233, 255, 0.22), transparent 34rem),
    var(--white);
}

.site-header {
  box-shadow: 0 8px 28px rgba(48, 40, 61, 0.06);
}

.brand img {
  box-shadow: 0 10px 24px rgba(201, 168, 255, 0.28);
}

.primary-nav a {
  border-radius: 999px;
}

.icon-link,
.nav-toggle {
  box-shadow: 0 8px 20px rgba(48, 40, 61, 0.05);
}

.section-title {
  position: relative;
  width: fit-content;
  margin: 0 auto 18px;
  text-align: center;
  font-size: clamp(1.9rem, 4vw, 3rem);
}

.section-title::after {
  content: "";
  display: block;
  width: min(150px, 70%);
  height: 8px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: var(--theme-gradient);
}

.section-intro {
  max-width: 760px;
  margin: 0 auto 34px;
  color: var(--muted);
  text-align: center;
  font-size: 1.05rem;
}

.theme-hero {
  position: relative;
  overflow: hidden;
  background: var(--white);
}

.theme-hero::before,
.theme-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  filter: blur(2px);
}

.theme-hero::before {
  width: 240px;
  height: 240px;
  left: -80px;
  top: 60px;
  background: rgba(255, 183, 213, 0.35);
}

.theme-hero::after {
  width: 300px;
  height: 300px;
  right: -110px;
  bottom: 20px;
  background: rgba(191, 233, 255, 0.45);
}

.theme-hero .container {
  position: relative;
  z-index: 1;
}

.theme-hero-grid {
  display: grid;
  gap: 34px;
  align-items: center;
}

.hero-text {
  display: grid;
  gap: 18px;
}

.hero-text h1 {
  max-width: 12ch;
}

.hero-text strong {
  color: var(--primary-dark);
}

.hero-photo-card {
  transform: rotate(1.1deg);
}

.hero-photo-card::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: calc(var(--radius-lg) - 10px);
  pointer-events: none;
}

.btn-primary,
.btn-secondary,
.btn-add-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 950;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.btn-primary {
  background: var(--theme-gradient);
  border: 0;
  color: var(--theme-ink);
  box-shadow: 0 14px 28px rgba(201, 168, 255, 0.28);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(48, 40, 61, 0.08);
  color: var(--theme-ink);
}

.btn-add-cart {
  min-height: 42px;
  padding: 10px 16px;
  background: var(--pastel-violet);
  color: var(--primary-dark);
  box-shadow: inset 0 0 0 1px rgba(118, 85, 196, 0.10);
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-add-cart:hover,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-add-cart:focus-visible {
  transform: translateY(-2px);
  filter: saturate(1.03);
  box-shadow: 0 18px 34px rgba(48, 40, 61, 0.12);
  outline: none;
}

.categories-grid {
  display: grid;
  gap: 22px;
}

.category-small-wrapper {
  display: grid;
  gap: 22px;
}

.categories .category-card {
  min-height: auto;
  padding: 18px;
  border: 0;
  border-radius: 30px;
  box-shadow: 0 18px 40px rgba(48, 40, 61, 0.10);
  display: grid;
  align-content: start;
  gap: 16px;
}

.categories .category-card::after {
  width: 180px;
  height: 180px;
  background: rgba(255,255,255,0.35);
}

.category-image {
  overflow: hidden;
  border-radius: 22px;
  background: rgba(255,255,255,0.7);
  aspect-ratio: 16 / 9;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
}

.category-card:not(.category-large) .category-image {
  aspect-ratio: 16 / 10;
}

.category-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-content {
  display: grid;
  gap: 10px;
}

.category-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(255,255,255,0.72);
  font-size: 1.55rem;
  box-shadow: 0 10px 22px rgba(48, 40, 61, 0.08);
}

.category-description {
  color: rgba(48, 40, 61, 0.74);
}

.avantages {
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,244,249,0.9) 100%);
}

.avantages-grid {
  display: grid;
  gap: 18px;
}

.avantage-card {
  padding: 20px;
  border-radius: 28px;
  display: flex;
  gap: 15px;
  align-items: flex-start;
  border: 1px solid rgba(255,255,255,0.65);
  box-shadow: 0 16px 34px rgba(48, 40, 61, 0.08);
}

.avantage-icon {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  background: rgba(255,255,255,0.72);
  font-size: 1.55rem;
}

.avantage-content {
  display: grid;
  gap: 6px;
}

.avantage-content h3 {
  font-size: 1.12rem;
  letter-spacing: -0.02em;
}

.avantage-description {
  color: rgba(48, 40, 61, 0.74);
}

.products-grid {
  display: grid;
  gap: 22px;
}

.theme-product-card {
  position: relative;
  border: 0;
  border-radius: 30px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 18px 42px rgba(48, 40, 61, 0.10);
}

.product-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--primary-dark);
  font-size: 0.78rem;
  font-weight: 950;
  box-shadow: 0 10px 22px rgba(48, 40, 61, 0.10);
}

.product-image {
  position: relative;
  margin: 0;
  height: 240px;
  background: linear-gradient(135deg, var(--pastel-blue), var(--pastel-lilac));
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-image--contain img,
.theme-product-card:first-child .product-image img {
  object-fit: contain;
  padding: 14px;
  background: linear-gradient(135deg, #ffffff 0%, #fff7fb 100%);
}

.size-indicator {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(48, 40, 61, 0.82);
  color: var(--white);
  font-weight: 950;
  font-size: 0.82rem;
}

.theme-product-card .product-info {
  padding: 18px;
  display: grid;
  gap: 10px;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.theme-product-card .product-info > * + * {
  margin-top: 0;
}

.product-description {
  color: var(--muted);
}

.product-colors {
  display: flex;
  gap: 7px;
  align-items: center;
  flex-wrap: wrap;
}

.color-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--white);
  box-shadow: 0 0 0 1px rgba(48, 40, 61, 0.10);
}

.product-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding-top: 6px;
}

.product-price {
  color: var(--muted);
  font-weight: 800;
}

.product-price strong {
  color: var(--primary-dark);
}

.section-cta {
  margin-top: 34px;
  text-align: center;
}

.avis {
  background: linear-gradient(180deg, var(--white) 0%, #f7fbff 100%);
}

.avis-grid {
  display: grid;
  gap: 22px;
}

.avis-card {
  padding: 24px;
  border-radius: 30px;
  background: var(--white);
  box-shadow: 0 16px 36px rgba(48, 40, 61, 0.09);
  border: 1px solid rgba(48, 40, 61, 0.05);
  display: grid;
  gap: 15px;
}

.avis-stars {
  color: #ffb300;
  letter-spacing: 0.08em;
  font-size: 1.1rem;
}

.avis-text {
  color: var(--theme-ink);
  font-weight: 650;
}

.avis-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-avatar {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--theme-gradient);
  color: var(--theme-ink);
  font-weight: 950;
}

.author-name {
  font-weight: 950;
}

.author-date {
  color: var(--muted);
  font-size: 0.9rem;
}

.site-footer {
  box-shadow: 0 -8px 28px rgba(48, 40, 61, 0.04);
}

@media (min-width: 700px) {
  .theme-hero-grid {
    grid-template-columns: 1fr 0.85fr;
    gap: 48px;
  }

  .avantages-grid,
  .products-grid,
  .avis-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .theme-hero {
    padding: 72px 0 86px;
  }

  .theme-hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.75fr);
  }

  .categories-grid {
    grid-template-columns: 2fr 1fr;
    align-items: stretch;
  }

  .category-large {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
  }

  .category-large .category-image {
    min-height: 100%;
    aspect-ratio: auto;
  }

  .category-small-wrapper {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .avantages-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .avantage-card {
    flex-direction: column;
  }

  .products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .avis-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Harmonisation des boutons sur toutes les pages avec le nouveau thème */
.btn--primary {
  background: var(--theme-gradient);
  border-color: transparent;
  color: var(--theme-ink);
  box-shadow: 0 14px 28px rgba(201, 168, 255, 0.22);
}

.btn--secondary {
  background: rgba(255,255,255,0.9);
  border-color: rgba(48, 40, 61, 0.08);
  color: var(--theme-ink);
}

.btn--accent {
  background: linear-gradient(135deg, var(--theme-pink), var(--theme-orange));
  border-color: transparent;
  color: var(--theme-ink);
}

.btn--green {
  background: linear-gradient(135deg, var(--theme-green), var(--theme-blue));
  border-color: transparent;
  color: var(--theme-ink);
}

.page-hero {
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 183, 213, 0.20), transparent 24rem),
    radial-gradient(circle at 88% 20%, rgba(191, 233, 255, 0.22), transparent 26rem),
    var(--white);
}

/* --------------------------------------------------------------------------
   Correctif images 1:1 demandé : toutes les images de cartes restent carrées
   et ne sont plus étirées. Les visuels sont soit recadrés proprement (cover),
   soit contenus pour les produits détourés/nuanciers (contain).
---------------------------------------------------------------------------- */
.category-image,
.category-card:not(.category-large) .category-image,
.category-large .category-image,
.product-image,
.product-card__media--photo,
.product-card__media--contain,
.product-photo-card,
.product-gallery-mini .product-photo-card,
.palette-photo {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
}

.category-image img,
.category-card__photo,
.product-image img,
.product-card__media--photo img,
.product-card__media--contain img,
.product-photo-card img,
.product-gallery-mini .product-photo-card img,
.palette-photo img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: block;
}

.category-image img,
.category-card__photo,
.product-image img,
.product-card__media--photo img,
.product-photo-card img,
.product-gallery-mini .product-photo-card img {
  object-fit: cover !important;
}

.product-image--contain img,
.theme-product-card:first-child .product-image img,
.product-card__media--contain img,
.product-photo-card--contain img,
.palette-photo img {
  object-fit: contain !important;
  padding: 12px;
  background: var(--white);
}

.category-large .category-image {
  min-height: 0 !important;
}

.hero-photo-card {
  aspect-ratio: 1 / 1;
  min-height: 0;
}

.hero-photo-card img {
  object-fit: cover;
}

@media (min-width: 960px) {
  .category-large .category-image {
    aspect-ratio: 1 / 1 !important;
  }
}

/* Prévisualisation automatique du prénom personnalisé */
.preview-panel {
  padding: 16px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #ffffff 0%, #fff7fb 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 12px;
}

.preview-panel__label {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.preview-name--inline {
  justify-content: flex-start;
  min-height: 58px;
}

.preview-name .preview-letter {
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.preview-name .preview-letter:hover {
  transform: translateY(-2px) rotate(-1deg);
}

.preview-name .preview-separator {
  width: auto;
  min-width: 16px;
  height: 56px;
  padding-inline: 2px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  font-weight: 950;
}

.pricing-details {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.pricing-details summary {
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 950;
  color: var(--theme-ink, var(--ink));
  background: linear-gradient(135deg, #fff7fb 0%, #f5edff 100%);
}

.pricing-table-wrap {
  overflow-x: auto;
  padding: 12px;
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 440px;
}

.pricing-table th,
.pricing-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.pricing-table th {
  color: var(--primary-dark);
  font-size: 0.9rem;
}

.pricing-table td {
  font-weight: 800;
}

.pricing-table tbody tr:last-child td {
  border-bottom: 0;
}

/* FAQ accueil */
.faq {
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 183, 213, 0.18), transparent 26rem),
    radial-gradient(circle at 90% 30%, rgba(191, 233, 255, 0.18), transparent 28rem),
    var(--white);
}

.faq-grid {
  display: grid;
  gap: 14px;
  max-width: 940px;
  margin: 0 auto;
}

.faq-item {
  border: 1px solid rgba(48, 40, 61, 0.08);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 30px rgba(48, 40, 61, 0.07);
  overflow: hidden;
}

.faq-item summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 18px 56px 18px 20px;
  font-weight: 950;
  color: var(--theme-ink, var(--ink));
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--theme-gradient);
  color: var(--theme-ink, var(--ink));
  font-weight: 950;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-answer {
  padding: 0 20px 18px;
  color: var(--muted);
}

.faq-answer p {
  max-width: 78ch;
}

@media (min-width: 700px) {
  .faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Prévisualisation avec la police Matcha CIH, proche du rendu des lettres réelles */
.preview-name {
  font-family: "Matcha CIH", "Matcha Cih", "Cooper Black", "Arial Rounded MT Bold", "Trebuchet MS", cursive, sans-serif;
}

.preview-name .preview-letter,
.preview-name > span:not(.preview-separator) {
  width: auto;
  min-width: clamp(38px, 8vw, 72px);
  height: auto;
  min-height: clamp(54px, 10vw, 92px);
  padding: 0 0.04em;
  background: transparent !important;
  border-radius: 0;
  box-shadow: none;
  font-family: "Matcha CIH", "Matcha Cih", "Cooper Black", "Arial Rounded MT Bold", "Trebuchet MS", cursive, sans-serif;
  font-size: clamp(3rem, 9vw, 6.4rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.08em;
  color: var(--letter-color, currentColor);
  -webkit-text-stroke: 2px rgba(48, 40, 61, 0.22);
  text-shadow:
    0 3px 0 rgba(255,255,255,0.65),
    0 10px 18px rgba(48, 40, 61, 0.18);
}

.preview-name--inline .preview-letter,
.preview-name--inline > span:not(.preview-separator) {
  min-width: clamp(30px, 7vw, 58px);
  min-height: clamp(42px, 9vw, 74px);
  font-size: clamp(2.35rem, 8vw, 4.9rem);
}

.preview-name .preview-separator {
  min-width: 0.42em;
  height: auto;
  min-height: clamp(42px, 9vw, 74px);
  padding-inline: 0.05em;
  background: transparent !important;
  box-shadow: none;
  -webkit-text-stroke: 0;
  text-shadow: none;
  font-family: inherit;
}

/* --------------------------------------------------------------------------
   Responsive final — optimisation mobile & tablette
   Objectif : navigation tactile, grilles lisibles, configurateur utilisable
   et aucune image/section qui déborde sur smartphone ou tablette.
---------------------------------------------------------------------------- */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

button,
a,
input,
select,
textarea,
summary {
  touch-action: manipulation;
}

/* Mobile + tablette : menu burger plein écran propre */
@media (max-width: 959px) {
  :root {
    --header-height: 76px;
  }

  .site-header {
    min-height: var(--header-height);
  }

  .header-inner {
    min-height: var(--header-height);
  }

  .primary-nav {
    left: 50%;
    right: auto;
    width: 100vw;
    transform: translateX(-50%);
    padding-inline: max(16px, calc((100vw - 1120px) / 2));
  }

  .primary-nav.is-open {
    max-height: calc(100dvh - var(--header-height));
  }

  .primary-nav ul {
    padding: 16px 0 22px;
    gap: 8px;
  }

  .primary-nav a {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    font-size: 1.02rem;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 8px 18px rgba(48, 40, 61, 0.05);
  }

  .nav-toggle,
  .icon-link {
    min-width: 44px;
    min-height: 44px;
  }

  .section,
  .hero,
  .page-hero {
    padding-block: 42px;
  }

  .section-title {
    max-width: 100%;
  }

  .lead,
  .section-intro {
    font-size: 1rem;
  }

  .category-layout,
  .categories-grid,
  .category-small-wrapper,
  .product-detail,
  .cart-layout,
  .contact-layout,
  .content-grid {
    grid-template-columns: 1fr !important;
  }

  .product-gallery {
    position: static !important;
  }
}

/* Smartphone */
@media (max-width: 767px) {
  :root {
    --container: min(100% - 28px, 1120px);
  }

  h1 {
    font-size: clamp(2rem, 10vw, 3.1rem);
  }

  h2,
  .section-title {
    font-size: clamp(1.55rem, 7vw, 2.25rem);
  }

  h3 {
    font-size: clamp(1.1rem, 5vw, 1.45rem);
  }

  .brand img {
    width: 54px;
    height: 54px;
  }

  .brand-text,
  .icon-label {
    display: none !important;
  }

  .header-actions {
    gap: 6px;
  }

  .icon-link {
    padding: 8px;
  }

  .cart-count {
    position: absolute;
    right: -5px;
    top: -5px;
    min-width: 20px;
    min-height: 20px;
    font-size: 0.68rem;
  }

  .theme-hero-grid,
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 26px;
    text-align: center;
  }

  .hero-text,
  .hero-content,
  .page-hero__content {
    justify-items: center;
    text-align: center;
  }

  .hero-text h1 {
    max-width: 13ch;
  }

  .hero-badges,
  .inline-actions {
    justify-content: center;
  }

  .inline-actions,
  .product-footer,
  .cart-item__controls {
    width: 100%;
  }

  .inline-actions .btn,
  .inline-actions .btn-primary,
  .inline-actions .btn-secondary,
  .section-cta .btn,
  .btn-add-cart {
    width: 100%;
  }

  .hero-photo-card {
    width: min(100%, 420px);
    margin-inline: auto;
    transform: none;
  }

  .categories .category-card,
  .theme-product-card,
  .avis-card,
  .faq-item,
  .text-card,
  .product-info,
  .checkout-panel,
  .order-summary {
    border-radius: 22px;
  }

  .category-large {
    grid-template-columns: 1fr !important;
  }

  .avantages-grid,
  .products-grid,
  .product-grid,
  .testimonial-grid,
  .avis-grid,
  .faq-grid,
  .reassurance-grid {
    grid-template-columns: 1fr !important;
  }

  .avantage-card,
  .reassurance-card {
    flex-direction: row;
    align-items: flex-start;
  }

  .product-image,
  .product-card__media--photo,
  .product-card__media--contain {
    min-height: 0;
  }

  .product-card__body,
  .product-info,
  .text-card,
  .checkout-panel,
  .order-summary {
    padding: 16px;
  }

  .product-detail {
    gap: 18px;
  }

  .product-gallery-mini,
  .palette-photos,
  .letter-colors,
  .method-grid,
  .footer-links {
    grid-template-columns: 1fr !important;
  }

  .color-palette {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 7px;
  }

  .swatch {
    min-height: 38px;
    border-radius: 10px;
    font-size: 0.84rem;
  }

  .preview-panel {
    overflow: hidden;
  }

  .preview-name {
    gap: 0;
    max-width: 100%;
    overflow-x: auto;
    padding: 6px 2px 10px;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }

  .preview-name .preview-letter,
  .preview-name > span:not(.preview-separator) {
    min-width: clamp(28px, 12vw, 46px);
    min-height: clamp(40px, 14vw, 60px);
    font-size: clamp(2.15rem, 15vw, 4rem);
    -webkit-text-stroke-width: 1.4px;
    letter-spacing: -0.1em;
  }

  .product-image-placeholder {
    min-height: 260px;
    padding: 16px;
  }

  fieldset {
    padding: 14px;
  }

  .price-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .dynamic-price {
    font-size: 1.55rem;
  }

  .cart-item__top {
    flex-direction: column;
  }

  .method-card {
    padding-right: 12px;
  }

  .footer-grid,
  .footer-bottom {
    text-align: center;
    justify-content: center;
  }

  .footer-brand {
    justify-items: center;
  }
}

/* Très petits smartphones */
@media (max-width: 380px) {
  :root {
    --container: min(100% - 22px, 1120px);
  }

  .brand img {
    width: 48px;
    height: 48px;
  }

  .header-inner {
    grid-template-columns: 1fr auto auto;
    gap: 5px;
  }

  .icon-link,
  .nav-toggle {
    min-width: 40px;
    min-height: 40px;
    width: 40px;
    height: 40px;
  }

  .color-palette {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .preview-name .preview-letter,
  .preview-name > span:not(.preview-separator) {
    font-size: clamp(1.9rem, 14vw, 3.3rem);
  }
}

/* Tablette portrait et paysage avant desktop */
@media (min-width: 768px) and (max-width: 959px) {
  :root {
    --container: min(100% - 44px, 1120px);
  }

  .brand img {
    width: 62px;
    height: 62px;
  }

  .icon-label,
  .brand-text {
    display: inline;
  }

  .theme-hero-grid,
  .hero-grid {
    grid-template-columns: 1fr 0.9fr !important;
    gap: 34px;
  }

  .hero-text h1 {
    max-width: 12ch;
  }

  .hero-photo-card {
    max-width: 430px;
    justify-self: end;
  }

  .categories-grid {
    grid-template-columns: 1fr !important;
  }

  .category-large {
    grid-template-columns: 1fr 1fr !important;
    align-items: center;
  }

  .category-small-wrapper,
  .avantages-grid,
  .products-grid,
  .product-grid,
  .testimonial-grid,
  .avis-grid,
  .faq-grid,
  .reassurance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .product-detail {
    grid-template-columns: 1fr !important;
  }

  .product-gallery {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .product-gallery .text-card,
  .product-image-placeholder {
    grid-column: 1 / -1;
  }

  .palette-photos,
  .letter-colors,
  .method-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .color-palette {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }

  .cart-layout {
    grid-template-columns: 1fr !important;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* Article prénom séparé par taille */
.fixed-size-card {
  padding: 18px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(48, 40, 61, 0.08);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 8px;
}

.fixed-size-card strong {
  font-size: clamp(1.65rem, 4vw, 2.4rem);
  line-height: 1;
  color: var(--primary-dark);
}

/* Checkout connecté au backend */
.checkout-form {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow);
  display: grid;
  gap: 14px;
}

/* Espace client PHP/MySQL */
.account-layout {
  display: grid;
  gap: 22px;
  align-items: start;
}

.account-card[hidden],
[data-guest-panel][hidden],
[data-account-panel][hidden] {
  display: none !important;
}

.account-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: var(--pastel-lilac);
}

.account-tab {
  border: 0;
  border-radius: 999px;
  padding: 10px 12px;
  background: transparent;
  color: var(--muted);
  font-weight: 950;
}

.account-tab.is-active {
  background: var(--white);
  color: var(--primary-dark);
  box-shadow: var(--shadow-soft);
}

.account-welcome {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.account-orders {
  display: grid;
  gap: 14px;
}

.account-order-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--cream);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.account-status {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--pastel-blue);
  color: var(--ink);
  font-weight: 950;
  font-size: 0.82rem;
}

@media (min-width: 960px) {
  .account-layout {
    grid-template-columns: minmax(0, 1.2fr) 0.8fr;
  }

  .account-layout > [data-account-global-status] {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .checkout-form {
    padding: 16px;
  }

  .account-tabs {
    grid-template-columns: 1fr;
    border-radius: var(--radius-md);
  }

  .account-order-card {
    flex-direction: column;
  }
}

/* Tunnel de commande séparé : Panier > Livraison > Paiement */
.checkout-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.checkout-step {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--cream);
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 950;
  font-size: 0.9rem;
}

.checkout-step.is-active {
  background: var(--theme-gradient);
  color: var(--theme-ink, var(--ink));
  border-color: transparent;
  box-shadow: var(--shadow-soft);
}

.form-grid-2 {
  display: grid;
  gap: 14px;
}

.cart-items--compact {
  gap: 10px;
}

.cart-items--compact .cart-item {
  box-shadow: var(--shadow-soft);
}

@media (min-width: 700px) {
  .form-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .checkout-steps {
    display: grid;
    grid-template-columns: 1fr;
  }

  .checkout-step {
    justify-content: center;
  }
}

/* Choix de point relais — Mondial Relay / Shop2Shop */
.relay-section {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #ffffff 0%, #fff7fb 100%);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 16px;
}

.relay-section[hidden] {
  display: none !important;
}

.relay-search {
  display: grid;
  gap: 10px;
  align-items: end;
}

.relay-options {
  display: grid;
  gap: 10px;
}

.relay-option {
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  display: grid;
  gap: 4px;
  box-shadow: var(--shadow-soft);
}

.relay-option:hover,
.relay-option:focus-visible,
.relay-option.is-selected {
  outline: none;
  border-color: var(--primary);
  background: var(--pastel-lilac);
  box-shadow: 0 0 0 4px rgba(183, 140, 247, 0.16), var(--shadow-soft);
}

.relay-option small {
  color: var(--muted);
  font-weight: 850;
}

.relay-selected,
.relay-recap {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--pastel-blue);
  border: 1px solid rgba(48, 40, 61, 0.06);
  display: grid;
  gap: 4px;
}

@media (min-width: 700px) {
  .relay-search {
    grid-template-columns: 1fr auto;
  }

  .relay-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   WordPress / WooCommerce compatibility layer
---------------------------------------------------------------------------- */
.wp-site-blocks,
.site {
  min-height: 100vh;
}

.admin-bar .site-header {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

.current-menu-item > a,
.current_page_item > a {
  color: var(--primary-dark) !important;
  background: var(--pastel-lilac);
}

.wp-content,
.entry-content {
  display: grid;
  gap: 18px;
}

.entry-content a:not(.btn):not(.button) {
  color: var(--primary-dark);
  font-weight: 800;
}

.woocommerce-notices-wrapper,
.woocommerce .woocommerce-notices-wrapper {
  width: var(--container);
  margin: 18px auto 0;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}

.woocommerce-message { border-top-color: #76c893; }
.woocommerce-info { border-top-color: var(--primary); }
.woocommerce-error { border-top-color: #d95f94; }

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button,
.wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--theme-gradient) !important;
  color: var(--theme-ink) !important;
  font-weight: 950 !important;
  padding: 12px 18px !important;
  box-shadow: 0 14px 28px rgba(201, 168, 255, 0.18);
}

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 30px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 18px 42px rgba(48, 40, 61, 0.10);
}

.woocommerce ul.products li.product a img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0 !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .product_title {
  color: var(--ink);
  font-weight: 950;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button {
  margin-inline: 16px !important;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--primary-dark) !important;
  font-weight: 950;
}

.woocommerce div.product {
  width: var(--container);
  margin-inline: auto;
}

.woocommerce div.product div.images img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.woocommerce div.product div.summary {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.woocommerce-tabs,
.related.products,
.upsells.products {
  width: var(--container);
  margin-inline: auto;
}

.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce {
  width: var(--container);
  margin: 42px auto;
}

.woocommerce table.shop_table,
.woocommerce form.checkout,
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-md) !important;
  background: var(--white);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
  min-height: 48px;
  border: 1px solid #ded4e5;
  border-radius: 14px;
  padding: 10px 12px;
}

.jck-customizer {
  margin: 22px 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #ffffff 0%, #fff7fb 100%);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 18px;
}

.jck-customizer .color-palette {
  grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
}

.jck-customizer .preview-panel {
  margin-top: 8px;
}

.jck-customizer .letter-colors {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.jck-wc-price-preview {
  margin: 0;
}

@media (max-width: 767px) {
  .woocommerce div.product {
    width: var(--container);
  }

  .woocommerce div.product div.summary {
    padding: 16px;
  }

  .woocommerce ul.products {
    grid-template-columns: 1fr;
  }
}

/* Pages éditables Elementor / constructeur */
.jck-builder-page {
  width: 100%;
  min-height: 45vh;
}

.jck-builder-page > .elementor,
.jck-builder-page > .wp-block-group,
.jck-builder-page > .wp-block-cover {
  width: 100%;
}

.jck-builder-page .alignwide {
  width: min(1280px, calc(100% - 32px));
  margin-inline: auto;
}

.jck-builder-page .alignfull {
  width: 100%;
  margin-inline: 0;
}

.jck-builder-page > :not(.elementor):not(.alignfull) {
  max-width: var(--container);
  margin-inline: auto;
}

.elementor-page .jck-builder-page > .elementor {
  max-width: none;
}

.jck-view-prices-button {
  text-align: center;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
  white-space: normal;
  line-height: 1.25;
  text-align: center;
}

/* Titres plus doux / moins massifs */
h1 {
  font-size: clamp(2rem, 4.8vw, 3.35rem);
}

h2,
.section-title,
.woocommerce div.product .product_title {
  font-size: clamp(1.55rem, 3.1vw, 2.35rem);
}

h3,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: clamp(1.08rem, 2vw, 1.38rem);
}

.hero-text h1 {
  max-width: 14ch;
  font-size: clamp(2.15rem, 5vw, 3.55rem);
}

.page-hero h1 {
  font-size: clamp(2rem, 4.4vw, 3.05rem);
}

.section-title::after {
  height: 6px;
  margin-top: 10px;
}

@media (max-width: 767px) {
  h1,
  .hero-text h1,
  .page-hero h1 {
    font-size: clamp(1.85rem, 8vw, 2.55rem);
  }

  h2,
  .section-title,
  .woocommerce div.product .product_title {
    font-size: clamp(1.4rem, 6vw, 1.95rem);
  }
}

/* Nuancier et prévisualisation des pots à crayons */
.jck-object-customizer {
  gap: 20px;
}

.jck-object-preview-wrap {
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--white);
  border: 1px solid var(--line);
}

.jck-object-preview {
  --object-color: #7356C9;
  width: min(260px, 100%);
  aspect-ratio: 1 / 1;
  position: relative;
  display: grid;
  place-items: end center;
  isolation: isolate;
}

.jck-object-cat {
  position: relative;
  width: 76%;
  height: 70%;
  border-radius: 18% 18% 10% 10%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.16) 0 3px, transparent 3px 18px),
    linear-gradient(180deg, color-mix(in srgb, var(--object-color), white 28%), var(--object-color));
  box-shadow:
    inset 0 -14px 0 rgba(48, 40, 61, 0.08),
    inset 0 0 0 2px rgba(255,255,255,0.25),
    0 18px 34px rgba(48, 40, 61, 0.18);
}

.jck-object-markers {
  position: absolute;
  top: 8%;
  z-index: 2;
  display: flex;
  gap: 8px;
  justify-content: center;
}

.jck-object-markers span {
  width: 24px;
  height: 92px;
  border-radius: 999px;
  background: #26232a;
  box-shadow: inset 0 -22px 0 rgba(255,255,255,0.08), 0 8px 14px rgba(0,0,0,0.18);
}

.jck-object-markers span:nth-child(1)::before,
.jck-object-markers span:nth-child(2)::before,
.jck-object-markers span:nth-child(3)::before,
.jck-object-markers span:nth-child(4)::before {
  content: "";
  display: block;
  width: 100%;
  height: 12px;
  border-radius: 999px 999px 4px 4px;
}

.jck-object-markers span:nth-child(1)::before { background: #13B84F; }
.jck-object-markers span:nth-child(2)::before { background: #F28BA5; }
.jck-object-markers span:nth-child(3)::before { background: #7356C9; }
.jck-object-markers span:nth-child(4)::before { background: #2F2F31; }

.jck-ear {
  position: absolute;
  top: -26%;
  width: 32%;
  height: 58%;
  border-radius: 999px 999px 18px 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--object-color), white 36%), var(--object-color));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.18);
}

.jck-ear::after {
  content: "";
  position: absolute;
  inset: 18% 22%;
  border-radius: inherit;
  background: rgba(255,255,255,0.24);
}

.jck-ear-left { left: 8%; }
.jck-ear-right { right: 8%; }

.jck-eye {
  position: absolute;
  width: 11%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #1e1a24;
  left: 42%;
  top: 45%;
}

.jck-whisker,
.jck-mouth,
.jck-paw {
  position: absolute;
  border: 4px solid color-mix(in srgb, var(--object-color), #342f3f 32%);
}

.jck-whisker {
  width: 22%;
  height: 1px;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  top: 57%;
}

.jck-whisker-left { left: 16%; transform: rotate(16deg); }
.jck-whisker-right { right: 16%; transform: rotate(-16deg); }

.jck-mouth {
  left: 45%;
  top: 61%;
  width: 18%;
  height: 10%;
  border-top: 0;
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 0 0 999px 999px;
}

.jck-paw {
  bottom: 7%;
  width: 20%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--object-color), white 10%);
}

.jck-paw-left { left: 18%; }
.jck-paw-right { right: 18%; }

@supports not (color: color-mix(in srgb, red, white)) {
  .jck-object-cat,
  .jck-ear,
  .jck-paw {
    background: var(--object-color);
  }

  .jck-whisker,
  .jck-mouth,
  .jck-paw {
    border-color: rgba(52,47,63,0.45);
  }
}

/* --------------------------------------------------------------------------
   Ajustement accueil : catégories en pleine largeur + titres plus élégants
---------------------------------------------------------------------------- */
.categories .categories-grid {
  grid-template-columns: 1fr !important;
  align-items: start !important;
  max-width: 920px;
  margin-inline: auto;
}

.categories .category-large {
  grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1.05fr) !important;
  align-items: center !important;
  min-height: 0 !important;
}

.categories .category-large .category-image {
  aspect-ratio: 16 / 9 !important;
  min-height: 0 !important;
}

.categories .category-small-wrapper {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: none !important;
  align-items: stretch;
}

.categories .category-card:not(.category-large) {
  min-height: 0 !important;
}

.categories .category-card:not(.category-large) .category-image {
  aspect-ratio: 1 / 1 !important;
}

/* Baisse supplémentaire des titres de l’accueil */
.home .section-title,
.front-page .section-title,
body:not(.woocommerce-page) .section-title {
  font-size: clamp(1.45rem, 2.15vw, 2rem) !important;
  line-height: 1.16;
}

.home .hero-text h1,
.front-page .hero-text h1 {
  font-size: clamp(1.95rem, 4vw, 3rem) !important;
  line-height: 1.08;
  max-width: 15ch;
}

.home .section-intro,
.front-page .section-intro {
  font-size: 0.96rem;
}

@media (max-width: 767px) {
  .categories .categories-grid {
    max-width: 100%;
  }

  .categories .category-large,
  .categories .category-small-wrapper {
    grid-template-columns: 1fr !important;
  }

  .categories .category-large .category-image,
  .categories .category-card:not(.category-large) .category-image {
    aspect-ratio: 1 / 1 !important;
  }

  .home .section-title,
  .front-page .section-title,
  body:not(.woocommerce-page) .section-title {
    font-size: clamp(1.35rem, 6vw, 1.75rem) !important;
  }

  .home .hero-text h1,
  .front-page .hero-text h1 {
    font-size: clamp(1.75rem, 8vw, 2.35rem) !important;
  }
}

/* Titres de pages uniformes : suppression du gros style “Shop” */
.jck-page-hero {
  padding: 54px 0 34px;
  background:
    radial-gradient(circle at 18% 15%, rgba(255, 183, 213, 0.18), transparent 26rem),
    radial-gradient(circle at 88% 20%, rgba(191, 233, 255, 0.18), transparent 28rem),
    var(--white);
}

.jck-page-title,
.page-hero .jck-page-title,
.woocommerce .jck-page-title {
  margin: 0;
  color: var(--accent-dark);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: clamp(1.45rem, 3vw, 2.25rem) !important;
  font-weight: 950;
  line-height: 1.12;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.jck-page-title::after {
  content: "";
  display: block;
  width: min(130px, 55%);
  height: 6px;
  margin: 12px auto 0;
  border-radius: 999px;
  background: var(--theme-gradient);
}

.woocommerce-products-header,
.woocommerce-products-header__title,
.woocommerce .page-title {
  display: none !important;
}

@media (max-width: 767px) {
  .jck-page-hero {
    padding: 38px 0 24px;
  }

  .jck-page-title,
  .page-hero .jck-page-title,
  .woocommerce .jck-page-title {
    font-size: clamp(1.25rem, 6vw, 1.75rem) !important;
  }
}

/* --------------------------------------------------------------------------
   Page À propos retravaillée
---------------------------------------------------------------------------- */
.about-hero {
  padding: 58px 0 42px;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 183, 213, 0.20), transparent 26rem),
    radial-gradient(circle at 88% 18%, rgba(191, 233, 255, 0.22), transparent 30rem),
    var(--white);
}

.about-hero__grid {
  display: grid;
  gap: 34px;
  align-items: center;
}

.about-hero__content {
  display: grid;
  gap: 18px;
}

.about-title {
  max-width: 14ch;
  font-size: clamp(2rem, 4vw, 3.15rem) !important;
  line-height: 1.08;
}

.about-hero__image {
  aspect-ratio: 1 / 1;
  max-width: 520px;
  justify-self: center;
}

.about-hero__image img {
  object-fit: cover;
  object-position: center;
}

.about-split {
  display: grid;
  gap: 24px;
  align-items: center;
}

.about-split__media {
  aspect-ratio: 1 / 1;
}

.about-split__media img {
  object-fit: cover;
}

.about-split__content {
  gap: 16px;
}

.about-centered {
  justify-items: center;
  text-align: center;
}

.about-values-grid {
  display: grid;
  gap: 18px;
}

.about-value-card {
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: 28px;
  border: 1px solid rgba(48, 40, 61, 0.06);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 12px;
}

.about-value-card::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -55px;
  bottom: -55px;
  border-radius: 50%;
  background: rgba(255,255,255,0.42);
}

.about-value-card > * {
  position: relative;
  z-index: 1;
}

.about-value-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(255,255,255,0.7);
  font-size: 1.55rem;
  box-shadow: inset 0 0 0 1px rgba(48,40,61,0.05);
}

.about-value-card h3 {
  font-size: clamp(1.05rem, 1.8vw, 1.28rem) !important;
}

.about-value-card p {
  color: rgba(48, 40, 61, 0.74);
}

.about-process {
  background: linear-gradient(180deg, #ffffff 0%, #fff8fb 100%);
}

.about-process__grid {
  display: grid;
  gap: 28px;
  align-items: center;
}

.about-process__content {
  display: grid;
  gap: 18px;
}

.about-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
  counter-reset: about-step;
}

.about-steps li {
  counter-increment: about-step;
  position: relative;
  padding: 16px 16px 16px 68px;
  border-radius: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 4px;
}

.about-steps li::before {
  content: counter(about-step);
  position: absolute;
  left: 16px;
  top: 16px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--theme-gradient);
  color: var(--theme-ink);
  font-weight: 950;
}

.about-steps span {
  color: var(--muted);
}

.about-process__gallery {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 16px;
  align-items: end;
}

.about-process__gallery .media-card {
  aspect-ratio: 1 / 1;
}

.about-process__gallery .media-card:nth-child(2) {
  transform: translateY(28px);
}

.about-process__gallery img {
  object-fit: cover;
}

.about-cta {
  padding-top: 0;
}

.about-cta__card {
  padding: clamp(22px, 4vw, 38px);
  border-radius: 34px;
  background: var(--theme-gradient);
  box-shadow: var(--shadow);
  display: grid;
  gap: 22px;
  align-items: center;
}

.about-cta__card h2 {
  max-width: 18ch;
}

.about-cta__card p {
  max-width: 62ch;
}

@media (min-width: 760px) {
  .about-hero__grid,
  .about-split,
  .about-process__grid,
  .about-cta__card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-values-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 959px) {
  .about-values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .about-hero {
    padding: 40px 0 28px;
  }

  .about-hero__content,
  .about-centered {
    text-align: center;
    justify-items: center;
  }

  .about-title {
    max-width: 13ch;
    font-size: clamp(1.75rem, 8vw, 2.35rem) !important;
  }

  .about-values-grid,
  .about-process__gallery {
    grid-template-columns: 1fr;
  }

  .about-process__gallery .media-card:nth-child(2) {
    transform: none;
  }

  .about-cta__card {
    text-align: center;
    justify-items: center;
  }
}

/* --------------------------------------------------------------------------
   Prévisualisation pot à crayons — version plus fidèle sans feutres
   - Par défaut : couleurs opaques.
   - Couleur 32 : violet transparent avec lignes d'impression visibles.
---------------------------------------------------------------------------- */
.jck-object-markers {
  display: none !important;
}

.jck-object-preview {
  --object-color: #6A5798;
  width: min(310px, 100%);
  aspect-ratio: 1 / 1.12;
  position: relative;
  display: grid;
  place-items: end center;
  padding: 12% 8% 6%;
  background:
    radial-gradient(circle at 20% 12%, rgba(255,255,255,0.85), transparent 18%),
    linear-gradient(180deg, #ffffff 0%, #fff9fd 100%);
  border-radius: 28px;
  overflow: hidden;
}

.jck-object-cat {
  position: relative;
  width: 82%;
  height: 73%;
  border-radius: 11% 11% 7% 7%;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--object-color), white 18%) 0%,
      var(--object-color) 100%);
  box-shadow:
    inset 0 -12px 0 rgba(48, 40, 61, 0.08),
    inset 0 0 0 2px rgba(255,255,255,0.18),
    0 18px 34px rgba(48, 40, 61, 0.16);
}

.jck-object-preview.is-transparent .jck-object-cat {
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.20) 0 3px,
      rgba(255,255,255,0.04) 3px 13px,
      rgba(48,40,61,0.09) 13px 16px,
      rgba(255,255,255,0.02) 16px 25px),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.08) 0 2px,
      transparent 2px 12px),
    linear-gradient(180deg,
      color-mix(in srgb, var(--object-color), white 42%) 0%,
      color-mix(in srgb, var(--object-color), white 10%) 100%);
  opacity: 0.86;
  backdrop-filter: blur(0.4px);
}

.jck-object-cat::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 16%;
  border-radius: 16px 16px 8px 8px;
  background: color-mix(in srgb, var(--object-color), white 24%);
  box-shadow: inset 0 -3px 0 rgba(48,40,61,0.08);
  z-index: 3;
}

.jck-object-preview.is-transparent .jck-object-cat::before {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.22) 0 3px, transparent 3px 16px),
    color-mix(in srgb, var(--object-color), white 45%);
  opacity: 0.86;
}

.jck-ear {
  position: absolute;
  top: -31%;
  width: 30%;
  height: 58%;
  border-radius: 999px 999px 16px 16px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--object-color), white 30%),
    var(--object-color));
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.18),
    0 7px 14px rgba(48,40,61,0.10);
  z-index: 1;
}

.jck-object-preview.is-transparent .jck-ear {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.18) 0 3px, transparent 3px 14px),
    linear-gradient(180deg,
      color-mix(in srgb, var(--object-color), white 52%),
      color-mix(in srgb, var(--object-color), white 12%));
  opacity: 0.86;
}

.jck-ear::after {
  content: "";
  position: absolute;
  inset: 18% 22%;
  border-radius: inherit;
  background: rgba(255,255,255,0.22);
  box-shadow: inset 0 0 0 1px rgba(48,40,61,0.05);
}

.jck-ear-left { left: 9%; }
.jck-ear-right { right: 9%; }

.jck-eye-hole {
  position: absolute;
  left: 38%;
  top: 44%;
  width: 8.5%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #17131b;
  box-shadow: inset 0 2px 2px rgba(255,255,255,0.08), 0 0 0 3px rgba(255,255,255,0.06);
  z-index: 4;
}

.jck-whiskers {
  position: absolute;
  top: 54%;
  width: 24%;
  height: 14%;
  z-index: 4;
}

.jck-whiskers i {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--object-color), #342f3f 42%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.16);
}

.jck-whiskers i:nth-child(1) { top: 0; transform: rotate(18deg); }
.jck-whiskers i:nth-child(2) { top: 42%; transform: rotate(0deg); }
.jck-whiskers i:nth-child(3) { bottom: 0; transform: rotate(-18deg); }

.jck-whiskers-left { left: 14%; }
.jck-whiskers-right { right: 14%; transform: scaleX(-1); }

.jck-nose {
  position: absolute;
  left: 50%;
  top: 57%;
  width: 9%;
  height: 6%;
  transform: translateX(-50%);
  border-radius: 50% 50% 58% 58%;
  background: color-mix(in srgb, var(--object-color), #342f3f 36%);
  z-index: 4;
}

.jck-mouth {
  position: absolute;
  left: 50%;
  top: 62%;
  width: 22%;
  height: 9%;
  transform: translateX(-50%);
  border: 4px solid color-mix(in srgb, var(--object-color), #342f3f 42%);
  border-top: 0;
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 0 0 999px 999px;
  background: transparent;
  z-index: 4;
}

.jck-paw {
  position: absolute;
  bottom: 10%;
  width: 19%;
  aspect-ratio: 1;
  border-radius: 50% 50% 43% 43%;
  border: 4px solid color-mix(in srgb, var(--object-color), #342f3f 35%);
  background: color-mix(in srgb, var(--object-color), white 6%);
  z-index: 4;
}

.jck-paw-left { left: 18%; }
.jck-paw-right { right: 18%; }

.jck-paw i {
  position: absolute;
  bottom: 6%;
  width: 3px;
  height: 18%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--object-color), #342f3f 40%);
}

.jck-paw i:nth-child(1) { left: 30%; }
.jck-paw i:nth-child(2) { left: 48%; }
.jck-paw i:nth-child(3) { left: 66%; }

@supports not (color: color-mix(in srgb, red, white)) {
  .jck-object-cat,
  .jck-ear,
  .jck-paw {
    background: var(--object-color);
  }

  .jck-whiskers i,
  .jck-nose,
  .jck-paw i {
    background: rgba(52,47,63,0.50);
  }

  .jck-mouth,
  .jck-paw {
    border-color: rgba(52,47,63,0.45);
  }
}

/* SEO / lisibilité contenu */
.jck-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
  margin-bottom: 12px;
}

.jck-breadcrumbs a {
  color: var(--primary-dark);
}

.jck-seo-intro,
.jck-product-seo-block {
  margin: 0 auto 28px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #ffffff 0%, #fff7fb 100%);
  box-shadow: var(--shadow-soft);
}

.jck-seo-intro h2,
.jck-product-seo-block h2 {
  font-size: clamp(1.25rem, 2.3vw, 1.75rem) !important;
  margin-bottom: 10px;
}

.jck-seo-intro p,
.jck-product-seo-block p,
.jck-product-seo-block li {
  color: var(--muted);
}

.jck-product-seo-block {
  width: var(--container);
}

.jck-product-seo-block ul {
  margin: 12px 0 0;
  padding-left: 1.2rem;
}

/* --------------------------------------------------------------------------
   Prévisualisation pot à crayons basée sur l'image de référence fournie
   Utilise un masque PNG + calque couleur + calque de relief.
---------------------------------------------------------------------------- */
.jck-object-preview--reference {
  --object-color: #6A5798;
  width: min(340px, 100%);
  aspect-ratio: 900 / 1304;
  position: relative;
  display: block;
  padding: 0;
  border-radius: 28px;
  overflow: hidden;
  background:
    linear-gradient(45deg, #f1f1f1 25%, transparent 25% 75%, #f1f1f1 75%),
    linear-gradient(45deg, #f1f1f1 25%, transparent 25% 75%, #f1f1f1 75%),
    #ffffff;
  background-position: 0 0, 10px 10px, 0 0;
  background-size: 20px 20px, 20px 20px, auto;
  box-shadow: inset 0 0 0 1px rgba(48,40,61,0.06), var(--shadow-soft);
}

.jck-object-color-layer,
.jck-object-print-lines,
.jck-object-shading-layer {
  position: absolute;
  inset: 4%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.jck-object-color-layer,
.jck-object-print-lines {
  -webkit-mask-image: url('../img/pencil-holder-reference-mask.png');
  mask-image: url('../img/pencil-holder-reference-mask.png');
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.jck-object-color-layer {
  background: var(--object-color);
  opacity: 1;
}

.jck-object-preview--reference.is-transparent .jck-object-color-layer {
  opacity: 0.72;
}

.jck-object-print-lines {
  display: none;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.26) 0 3px,
      rgba(255,255,255,0.03) 3px 14px,
      rgba(48,40,61,0.10) 14px 17px,
      rgba(255,255,255,0.02) 17px 28px),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.08) 0 2px,
      transparent 2px 13px);
  opacity: 0.72;
  mix-blend-mode: screen;
}

.jck-object-preview--reference.is-transparent .jck-object-print-lines {
  display: block;
}

.jck-object-shading-layer {
  background-image: url('../img/pencil-holder-reference-shading.webp');
  z-index: 3;
  opacity: 0.98;
}

.jck-object-preview--reference.is-transparent .jck-object-shading-layer {
  opacity: 0.9;
}

@supports not ((mask-image: url('')) or (-webkit-mask-image: url(''))) {
  .jck-object-color-layer,
  .jck-object-print-lines {
    display: none !important;
  }

  .jck-object-shading-layer {
    background-image: url('../img/pencil-holder-reference-object.webp');
    opacity: 1;
  }
}

/* Correctif visibilité prévisualisation pot à crayons sur WordPress/LWS Optimize :
   les images de masque/relief sont fournies en URL absolue via variables inline. */
.jck-object-preview--reference {
  max-width: 360px;
  margin-inline: auto;
}

.jck-object-preview--reference .jck-object-color-layer,
.jck-object-preview--reference .jck-object-print-lines {
  -webkit-mask-image: var(--object-mask, url('../img/pencil-holder-reference-mask.png')) !important;
  mask-image: var(--object-mask, url('../img/pencil-holder-reference-mask.png')) !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

.jck-object-preview--reference .jck-object-shading-layer {
  background-image: var(--object-shading, url('../img/pencil-holder-reference-shading.webp')) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

@supports not ((mask-image: url('')) or (-webkit-mask-image: url(''))) {
  .jck-object-preview--reference .jck-object-shading-layer {
    background-image: var(--object-fallback, url('../img/pencil-holder-reference-object.webp')) !important;
  }
}

/* Canvas fallback robuste pour mobile/tablette : si les masques CSS ne s'affichent
   pas correctement, l'image générée par JavaScript prend le relais. */
.jck-object-canvas-preview {
  position: absolute;
  inset: 4%;
  width: 92%;
  height: 92%;
  object-fit: contain;
  opacity: 0;
  z-index: 10;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.jck-object-canvas-preview.is-ready {
  opacity: 1;
}

@media (max-width: 1024px) {
  .jck-object-preview--reference {
    width: min(320px, 92vw);
    min-height: 360px;
  }

  .jck-object-canvas-preview.is-ready ~ .jck-object-color-layer,
  .jck-object-canvas-preview.is-ready ~ .jck-object-print-lines,
  .jck-object-canvas-preview.is-ready ~ .jck-object-shading-layer {
    opacity: 0;
  }
}

/* Version 1.0.2 — centrage mobile/tablette de la prévisualisation pot à crayons */
@media (max-width: 1024px) {
  .woocommerce div.product,
  .woocommerce-page div.product {
    width: min(100% - 24px, 720px) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: hidden;
  }

  .woocommerce div.product div.summary,
  .woocommerce-page div.product div.summary {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
    overflow: hidden;
  }

  .jck-object-customizer,
  .jck-object-preview-wrap {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    overflow: hidden;
  }

  .jck-object-preview-wrap {
    justify-items: center !important;
    padding: 12px !important;
  }

  .jck-object-preview--reference {
    width: min(282px, 74vw) !important;
    max-width: 282px !important;
    min-height: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    right: auto !important;
  }

  .jck-object-color-layer,
  .jck-object-print-lines,
  .jck-object-shading-layer,
  .jck-object-canvas-preview {
    transform: translateX(-2.4%);
    transform-origin: center center;
  }
}

@media (max-width: 390px) {
  .jck-object-preview--reference {
    width: min(252px, 72vw) !important;
    max-width: 252px !important;
  }

  .jck-object-color-layer,
  .jck-object-print-lines,
  .jck-object-shading-layer,
  .jck-object-canvas-preview {
    transform: translateX(-3.2%);
  }
}

/* --------------------------------------------------------------------------
   Version 1.0.3 — police Matcha CIH renforcée + page Contact retravaillée
---------------------------------------------------------------------------- */
@font-face {
  font-family: "Matcha CIH";
  src:
    url('../fonts/matcha-cih.woff2') format('woff2'),
    url('../fonts/Matcha-CIH.woff2') format('woff2'),
    url('../fonts/MatchaCIH.woff2') format('woff2'),
    url('../fonts/Matcha Cih.woff2') format('woff2'),
    url('../fonts/matcha-cih.woff') format('woff'),
    url('../fonts/Matcha-CIH.woff') format('woff'),
    url('../fonts/MatchaCIH.woff') format('woff'),
    url('../fonts/matcha-cih.ttf') format('truetype'),
    url('../fonts/Matcha-CIH.ttf') format('truetype'),
    url('../fonts/MatchaCIH.ttf') format('truetype'),
    url('../fonts/matcha-cih.otf') format('opentype'),
    url('../fonts/Matcha-CIH.otf') format('opentype'),
    url('../fonts/MatchaCIH.otf') format('opentype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

.jck-customizer .preview-name,
.jck-customizer .preview-name .preview-letter,
.jck-customizer .preview-name > span:not(.preview-separator),
.preview-name,
.preview-name .preview-letter,
.preview-name > span:not(.preview-separator) {
  font-family: "Matcha CIH", "Matcha Cih", "Cooper Black", "Arial Rounded MT Bold", "Trebuchet MS", cursive, sans-serif !important;
}

.contact-hero {
  padding: 58px 0 42px;
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 183, 213, 0.20), transparent 26rem),
    radial-gradient(circle at 86% 16%, rgba(191, 233, 255, 0.22), transparent 30rem),
    var(--white);
}

.contact-hero__grid {
  display: grid;
  gap: 34px;
  align-items: center;
}

.contact-hero__content {
  display: grid;
  gap: 18px;
}

.contact-title {
  max-width: 13ch;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  line-height: 1.08;
}

.contact-hero__image {
  aspect-ratio: 1 / 1;
  max-width: 460px;
  justify-self: center;
}

.contact-hero__image img {
  object-fit: cover;
  object-position: center;
}

.contact-page-layout {
  display: grid;
  gap: 24px;
  align-items: start;
}

.contact-info-stack {
  display: grid;
  gap: 16px;
}

.contact-info-card {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border-radius: 28px;
  border: 1px solid rgba(48, 40, 61, 0.06);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 10px;
}

.contact-info-card::after {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -42px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgba(255,255,255,0.40);
}

.contact-info-card > * {
  position: relative;
  z-index: 1;
}

.contact-info-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(255,255,255,0.72);
  font-size: 1.45rem;
}

.contact-info-card h2,
.contact-form-card h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.65rem) !important;
}

.contact-form-card {
  padding: clamp(18px, 3vw, 28px);
  gap: 16px;
}

.jck-contact-form {
  display: grid;
  gap: 16px;
}

.jck-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--muted);
  font-size: 0.95rem;
}

.jck-consent input {
  margin-top: 5px;
  accent-color: var(--primary-dark);
}

.contact-faq {
  background: linear-gradient(180deg, #ffffff 0%, #fff8fb 100%);
}

@media (min-width: 760px) {
  .contact-hero__grid,
  .contact-page-layout {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

@media (max-width: 767px) {
  .contact-hero {
    padding: 40px 0 28px;
  }

  .contact-hero__content {
    text-align: center;
    justify-items: center;
  }

  .contact-title {
    max-width: 13ch;
    font-size: clamp(1.75rem, 8vw, 2.35rem) !important;
  }

  .contact-page-layout {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Version 1.0.4 — images SEO des descriptions produits en format 1:1 léger
---------------------------------------------------------------------------- */
.entry-content .jck-seo-figure,
.woocommerce-Tabs-panel--description .jck-seo-figure,
.jck-product-seo-block .jck-seo-figure {
  width: min(360px, 100%);
  max-width: 360px;
  margin: 18px auto;
  border-radius: 24px;
  overflow: hidden;
  background: var(--cream);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  aspect-ratio: 1 / 1;
}

.entry-content .jck-seo-figure img,
.woocommerce-Tabs-panel--description .jck-seo-figure img,
.jck-product-seo-block .jck-seo-figure img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 1 / 1;
  display: block;
  object-fit: cover;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 767px) {
  .entry-content .jck-seo-figure,
  .woocommerce-Tabs-panel--description .jck-seo-figure,
  .jck-product-seo-block .jck-seo-figure {
    width: min(280px, 88vw);
    max-width: 280px;
    border-radius: 20px;
  }
}

/* Version 1.0.5 — fallback mobile couleurs par lettre */
.jck-letter-fallback-help {
  grid-column: 1 / -1;
}

.jck-fallback-letter-field select,
.letter-field select {
  min-height: 46px;
}

@media (max-width: 767px) {
  .jck-customizer .letter-colors {
    grid-template-columns: 1fr !important;
  }

  .letter-field,
  .jck-fallback-letter-field {
    padding: 12px;
  }
}

/* --------------------------------------------------------------------------
   Version 1.0.6 — cartes produits centrées sur mobile/tablette
---------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .woocommerce .products,
  .woocommerce-page .products {
    display: grid !important;
    grid-template-columns: minmax(0, min(360px, 92vw)) !important;
    justify-content: center !important;
    justify-items: center !important;
    gap: 26px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product,
  .woocommerce .products li.product,
  .woocommerce-page .products li.product,
  .products-grid .theme-product-card,
  .product-grid .product-card {
    width: 100% !important;
    max-width: 360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    border-radius: 28px !important;
  }

  .woocommerce ul.products li.product a img,
  .woocommerce-page ul.products li.product a img,
  .products-grid .product-image,
  .product-grid .product-card__media,
  .product-grid .product-card__media--photo,
  .product-grid .product-card__media--contain {
    border-radius: 28px 28px 0 0 !important;
    overflow: hidden;
  }

  .woocommerce ul.products li.product .button,
  .woocommerce-page ul.products li.product .button,
  .woocommerce ul.products li.product .price,
  .woocommerce-page ul.products li.product .price,
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    margin-left: 18px !important;
    margin-right: 18px !important;
  }

  .woocommerce ul.products li.product .button,
  .woocommerce-page ul.products li.product .button,
  .woocommerce .products li.product .button,
  .woocommerce-page .products li.product .button {
    width: calc(100% - 36px) !important;
    max-width: 100% !important;
    margin-bottom: 18px !important;
  }
}

@media (min-width: 768px) and (max-width: 959px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .woocommerce .products,
  .woocommerce-page .products {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 330px)) !important;
    justify-content: center !important;
    gap: 24px !important;
  }

  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product,
  .woocommerce .products li.product,
  .woocommerce-page .products li.product {
    width: 100% !important;
    max-width: 330px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
  }
}

/* --------------------------------------------------------------------------
   Version 1.0.7 — FAQ finale et nettoyage des contenus de publication
---------------------------------------------------------------------------- */
.faq-page-hero {
  padding: 54px 0 34px;
  background:
    radial-gradient(circle at 14% 16%, rgba(255, 183, 213, 0.20), transparent 26rem),
    radial-gradient(circle at 86% 16%, rgba(191, 233, 255, 0.22), transparent 30rem),
    var(--white);
}

.faq-page-hero .lead {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.faq-page-content .faq-grid {
  max-width: 980px;
}

.faq-page-cta {
  padding-top: 0;
}

/* Version 1.0.9 — champs couleur par lettre toujours accessibles */
.jck-customizer .letter-colors .jck-fallback-letter-field {
  display: grid;
}

.jck-customizer .letter-colors select[data-jck-letter-color] {
  width: 100%;
}

/* Version 1.0.10 — renforcement police Matcha CIH sur prévisualisations */
.jck-customizer .preview-name,
.jck-customizer .preview-name .preview-letter,
.jck-customizer .preview-name > span:not(.preview-separator),
[data-jck-preview],
[data-jck-preview] .preview-letter,
[data-jck-preview] > span:not(.preview-separator) {
  font-family: "Matcha CIH", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif !important;
  font-synthesis: none !important;
  font-variant-ligatures: none;
}

@media (max-width: 767px) {
  .jck-customizer .preview-name,
  .jck-customizer .preview-name .preview-letter,
  .jck-customizer .preview-name > span:not(.preview-separator),
  [data-jck-preview],
  [data-jck-preview] .preview-letter,
  [data-jck-preview] > span:not(.preview-separator) {
    font-family: "Matcha CIH", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif !important;
  }
}

/* --------------------------------------------------------------------------
   Version 1.0.11 — footer mobile réorganisé façon navigation/ressources
---------------------------------------------------------------------------- */
.footer-section--navigation h3 {
  text-transform: uppercase;
}

.footer-social {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.footer-social h3 {
  margin: 0 0 14px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.95rem;
}

.footer-social__links {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-social__links a {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--pastel-lilac);
  color: var(--primary-dark);
  font-size: 1.25rem;
  font-weight: 950;
  box-shadow: var(--shadow-soft);
}

.footer-bottom__legal {
  display: inline-flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-bottom__legal a {
  color: var(--muted);
  font-weight: 800;
}

@media (max-width: 767px) {
  .site-footer {
    background: #060917;
    color: #f8f7ff;
    padding: 52px 0 34px;
    border-top: 0;
    box-shadow: none;
  }

  .site-footer .container {
    width: min(100% - 42px, 560px);
  }

  .site-footer .footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 34px;
    text-align: center;
  }

  .site-footer .footer-brand {
    justify-items: center;
    gap: 12px;
  }

  .site-footer .footer-brand img {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    box-shadow: 0 14px 32px rgba(183, 140, 247, 0.28);
  }

  .site-footer .footer-brand h2 {
    color: #ffffff;
    font-size: clamp(1.55rem, 7vw, 2.25rem) !important;
    line-height: 1.1;
  }

  .site-footer .footer-brand h2::first-letter {
    color: #ffffff;
  }

  .site-footer .footer-brand .text-muted,
  .site-footer p,
  .site-footer li,
  .site-footer a {
    color: #a9afc5;
  }

  .site-footer .footer-brand .text-muted {
    max-width: 34ch;
    margin-inline: auto;
    font-size: 1rem;
    line-height: 1.75;
  }

  .site-footer .footer-links {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 30px 28px;
    text-align: center;
    align-items: start;
  }

  .site-footer .footer-section--legal {
    grid-column: 1 / -1;
    padding-top: 8px;
  }

  .site-footer .footer-links h3,
  .site-footer .footer-social h3 {
    color: #d8def3;
    font-size: 0.95rem !important;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 16px;
  }

  .site-footer .footer-links ul {
    gap: 12px;
  }

  .site-footer .footer-links a {
    color: #a9afc5;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
  }

  .site-footer .footer-links a:hover,
  .site-footer .footer-links a:focus-visible,
  .site-footer .footer-bottom__legal a:hover,
  .site-footer .footer-bottom__legal a:focus-visible {
    color: #ffffff;
  }

  .site-footer .footer-social {
    margin-top: 38px;
    padding-top: 0;
    border-top: 0;
  }

  .site-footer .footer-social__links a {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: #172033;
    color: #d8def3;
    box-shadow: none;
  }

  .site-footer .footer-bottom {
    margin-top: 42px;
    padding-top: 28px;
    border-top: 1px solid rgba(216, 222, 243, 0.12);
    display: grid;
    gap: 18px;
    justify-content: center;
    text-align: center;
    color: #8f96ad;
  }

  .site-footer .footer-bottom p {
    margin: 0;
    color: #8f96ad;
  }

  .site-footer .footer-bottom__legal {
    gap: 24px;
  }

  .site-footer .footer-bottom__legal a {
    color: #8f96ad;
    font-size: 0.98rem;
  }
}

/* --------------------------------------------------------------------------
   Version 1.0.13 — grilles boutique centrées + images moins imposantes
---------------------------------------------------------------------------- */
@media (min-width: 960px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .woocommerce .products,
  .woocommerce-page .products {
    width: min(1120px, calc(100% - 48px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 285px)) !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 26px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product,
  .woocommerce .products li.product,
  .woocommerce-page .products li.product {
    width: 100% !important;
    max-width: 285px !important;
    float: none !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 100% !important;
    overflow: hidden !important;
  }

  .woocommerce ul.products li.product .woocommerce-LoopProduct-link,
  .woocommerce-page ul.products li.product .woocommerce-LoopProduct-link {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
  }

  .woocommerce ul.products li.product a img,
  .woocommerce-page ul.products li.product a img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    max-height: 230px !important;
    object-fit: cover !important;
  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    min-height: 3.1em;
    display: flex;
    align-items: flex-start;
  }

  .woocommerce ul.products li.product .price,
  .woocommerce-page ul.products li.product .price {
    min-height: 2.2em;
    display: flex !important;
    align-items: center;
  }

  .woocommerce ul.products li.product .button,
  .woocommerce-page ul.products li.product .button,
  .woocommerce .products li.product .button,
  .woocommerce-page .products li.product .button {
    margin-top: auto !important;
    margin-left: 18px !important;
    margin-right: 18px !important;
    margin-bottom: 18px !important;
    width: calc(100% - 36px) !important;
    min-height: 48px !important;
    text-align: center !important;
  }
}

/* Accueil : catégories plus compactes */
@media (min-width: 768px) {
  .categories .categories-grid {
    max-width: 980px !important;
  }

  .categories .category-large {
    grid-template-columns: minmax(250px, 0.82fr) minmax(0, 1.18fr) !important;
    padding: 18px !important;
  }

  .categories .category-large .category-image {
    aspect-ratio: 16 / 9 !important;
    max-height: 260px !important;
  }

  .categories .category-small-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }

  .categories .category-card:not(.category-large) .category-image {
    aspect-ratio: 4 / 3 !important;
    max-height: 185px !important;
  }

  .categories .category-card:not(.category-large) {
    padding: 16px !important;
  }
}

@media (max-width: 767px) {
  .categories .category-image {
    width: min(250px, 100%) !important;
    max-width: 250px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Accueil : cartes produits plus équilibrées */
.products-grid {
  align-items: stretch;
}

.products-grid .theme-product-card {
  display: flex;
  flex-direction: column;
  max-width: 285px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.products-grid .product-image {
  height: auto !important;
  max-height: 220px !important;
  aspect-ratio: 1 / 1 !important;
}

.products-grid .product-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.products-grid .product-image--contain img,
.products-grid .theme-product-card:first-child .product-image img {
  object-fit: contain !important;
  padding: 12px !important;
}

.products-grid .product-info {
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column !important;
}

.products-grid .product-description {
  min-height: 3.4em;
}

.products-grid .product-footer {
  margin-top: auto;
}

.products-grid .btn-add-cart {
  width: 100%;
}

/* Fiches produits : images principales moins énormes */
@media (min-width: 960px) {
  .woocommerce div.product div.images,
  .woocommerce-page div.product div.images,
  .woocommerce div.product div.woocommerce-product-gallery,
  .woocommerce-page div.product div.woocommerce-product-gallery {
    width: min(42%, 460px) !important;
    max-width: 460px !important;
    float: left !important;
  }

  .woocommerce div.product div.images img,
  .woocommerce-page div.product div.images img,
  .woocommerce div.product div.woocommerce-product-gallery img,
  .woocommerce-page div.product div.woocommerce-product-gallery img {
    max-height: 520px !important;
    object-fit: contain !important;
    background: var(--white);
  }

  .woocommerce div.product div.summary,
  .woocommerce-page div.product div.summary {
    width: calc(58% - 28px) !important;
    max-width: 620px !important;
    float: right !important;
  }
}

@media (max-width: 959px) {
  .woocommerce div.product div.images,
  .woocommerce-page div.product div.images,
  .woocommerce div.product div.woocommerce-product-gallery,
  .woocommerce-page div.product div.woocommerce-product-gallery {
    width: min(420px, 100%) !important;
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
  }

  .woocommerce div.product div.images img,
  .woocommerce-page div.product div.images img,
  .woocommerce div.product div.woocommerce-product-gallery img,
  .woocommerce-page div.product div.woocommerce-product-gallery img {
    max-height: 430px !important;
    object-fit: contain !important;
  }
}

/* --------------------------------------------------------------------------
   Version 1.0.15 — accueil synchronisé avec les images principales WooCommerce
---------------------------------------------------------------------------- */
.products-home .products-grid .theme-product-card:first-child .product-image img,
.products-home .products-grid .product-image--contain img {
  object-fit: cover !important;
  padding: 0 !important;
  background: var(--white) !important;
}

.products-home .products-grid .product-image img {
  object-position: center center;
}

/* --------------------------------------------------------------------------
   Version 1.0.16 — code promo première commande
---------------------------------------------------------------------------- */
.jck-welcome-coupon-notice {
  width: var(--container);
  margin: 18px auto 0;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(118, 85, 196, 0.16);
  background: linear-gradient(135deg, #fff7fb 0%, #f5edff 58%, #eaf8ff 100%);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.jck-welcome-coupon-notice code {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--white);
  color: var(--primary-dark);
  font-weight: 950;
  letter-spacing: 0.04em;
}

@media (max-width: 767px) {
  .jck-welcome-coupon-notice {
    width: min(100% - 24px, 520px);
    font-size: 0.95rem;
  }
}

/* Version 1.0.19 — nombre de sélecteurs couleur = nombre de lettres */
.jck-fallback-letter-field[hidden],
.jck-letter-fallback-help[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Version 1.0.20 — centrage des icônes compte/panier sur mobile
---------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .site-header .header-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .site-header .header-actions .icon-link {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    border-radius: 50% !important;
    line-height: 1 !important;
  }

  .site-header .header-actions .icon-link > span[aria-hidden="true"] {
    width: 100%;
    height: 100%;
    display: grid !important;
    place-items: center !important;
    line-height: 1 !important;
    font-size: 1.18rem;
    margin: 0 !important;
    transform: none !important;
  }

  .site-header .header-actions .icon-link .icon-label {
    display: none !important;
  }

  .site-header .header-actions .icon-link .cart-count {
    position: absolute !important;
    right: -5px !important;
    top: -5px !important;
    display: grid !important;
    place-items: center !important;
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 0.68rem !important;
  }
}

@media (max-width: 380px) {
  .site-header .header-actions .icon-link {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  .site-header .header-actions .icon-link > span[aria-hidden="true"] {
    font-size: 1.08rem;
  }
}