/** Shopify CDN: Minification failed

Line 633:0 Unexpected "}"

**/
/* ============================================================
   CHRONCES — Sections d'accueil
   Maquette : design-source/2026-07-31/Accueil.dc.html
   ============================================================ */

/* ---------- Carrousel générique ---------- */
.cr-rail-wrap { position: relative; }
.cr-rail-wrap .cr-rail { padding: 4px 4px 14px; gap: 20px; }
.cr-rail-wrap .cr-rail-nav {
  position: absolute;
  top: calc(50% - 30px);
  z-index: 6;
  width: 46px;
  height: 46px;
  font-size: 24px;
  padding-bottom: 4px;
}
.cr-rail-wrap .cr-rail-nav--prev { left: -6px; }
.cr-rail-wrap .cr-rail-nav--next { right: -6px; }
.cr-rail-wrap--static .cr-rail-nav { display: none; }
@media (max-width: 989px) {
  .cr-rail-wrap .cr-rail-nav { display: none; }
}

/* ---------- Hero ---------- */
.cr-hero {
  max-width: var(--cr-maxw);
  margin-inline: auto;
  padding: 56px var(--cr-gutter) 44px;
  display: grid;
  /* `min(340px, 100%)` et pas `340px` : à 375 px de large il ne reste que
     339 px utiles, la piste faisait donc 1 px de trop et débordait de son
     conteneur. Le `min()` la laisse redescendre à la largeur disponible. */
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 40px;
  align-items: center;
}
/* `.cr-hero__text` est un <div> qui reçoit du richtext : la marge du dernier
   paragraphe qu'il contient doit être neutralisée, sinon elle s'ajoute à la
   sienne. */
.cr-hero__text { max-width: 480px; margin: 0 0 30px; font-weight: 600; font-size: 18px; line-height: 1.6; color: var(--cr-blush); }
.cr-hero__text > p { margin: 0; }
.cr-hero__text > p + p { margin-top: .7em; }
.cr-hero__text strong, .cr-hero__text b { color: var(--cr-white); font-weight: 600; }
.cr-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin: 22px 0 26px; }
.cr-hero__rating { display: flex; align-items: center; gap: 14px; }
.cr-hero__stars { font-family: var(--cr-font-display); font-size: 16px; color: var(--cr-yellow); letter-spacing: 2px; }
.cr-hero__rating-text { font-weight: 600; font-size: 13.5px; color: var(--cr-blush); }

/* Éventail de cartes */
.cr-fan { position: relative; height: 440px; display: flex; align-items: center; justify-content: center; }
.cr-fan__card {
  position: absolute;
  width: 230px;
  height: 300px;
  padding: 22px 20px 46px;
  background: var(--cr-white);
  border-radius: 22px;
  box-shadow: var(--cr-shadow-soft);
}
.cr-fan__card:nth-child(1) { transform: translateX(-150px) rotate(-11deg); }
.cr-fan__card:nth-child(2) { transform: translateX(150px) rotate(11deg); }
.cr-fan__card:nth-child(3) {
  width: 248px; height: 322px; padding: 24px 22px 50px;
  border-radius: 24px; transform: rotate(-2deg); z-index: 3;
  box-shadow: 0 30px 56px -20px rgb(from var(--cr-ink) r g b / .65);
}
.cr-fan__card img { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply; }
/* Le sélecteur descendant est nécessaire : `.cr-fan__card img` est plus
   spécifique que `.cr-fan__logo` et étirait le logo à toute la carte,
   ce qui débordait de la fenêtre sur mobile. */
.cr-fan__card .cr-fan__logo {
  position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%);
  width: 70px; height: auto; opacity: .9; mix-blend-mode: normal;
}
@media (max-width: 749px) {
  /* Le hero mesurait 903 px de haut pour un écran de 812 : rien d'autre
     n'était visible au chargement, pas même le début de la section suivante. */
  /* 🚨 Ordre demandé en mobile : pastille → titre → visuel → texte → boutons →
     note. Le hero n'a que DEUX enfants (le bloc de texte, puis l'éventail) : on
     ne peut donc pas glisser l'image au milieu du texte… sauf en retirant le
     bloc de texte de la mise en page avec `display: contents`. Ses enfants
     deviennent alors des éléments de grille à part entière, et `order` peut les
     intercaler avec l'éventail. Rien n'est dupliqué ni déplacé dans le HTML —
     l'ordre du DOM, donc l'ordre de lecture au clavier, reste celui du desktop. */
  .cr-hero { padding: 34px var(--cr-gutter) 32px; gap: 0; }
  .cr-hero > div:first-child { display: contents; }
  .cr-hero .cr-pill  { order: 1; justify-self: start; }
  .cr-hero .cr-h1    { order: 2; }
  .cr-fan            { order: 3; height: 340px; margin: 4px 0 20px; }
  .cr-hero__text     { order: 4; }
  .cr-hero__ctas     { order: 5; }
  .cr-hero__rating   { order: 6; }
  /* Les deux appels à l'action avaient des largeurs différentes (261 et 238),
     ce qui donnait un escalier une fois empilés. */
  .cr-hero__ctas { gap: 10px; margin: 18px 0 22px; }
  .cr-hero__ctas > * { flex: 1 1 100%; justify-content: center; text-align: center; }
  .cr-fan__card { width: 168px; height: 220px; padding: 16px 14px 34px; }
  /* 🚨 L'écartement suit la largeur d'écran, mais 22vw était encore trop :
     mesuré à 375 px, la carte de droite finissait à 374 px — collée au bord de
     l'écran, 17 px hors de son cadre. La rotation de 11° élargit l'encombrement
     réel (168×220 tourné ⇒ 207 px de large) : c'est la DEMI-DIAGONALE qu'il
     faut loger, pas la demi-largeur. 17vw garde les deux cartes dedans. */
  .cr-fan__card:nth-child(1) { transform: translateX(max(-104px, -17vw)) rotate(-11deg); }
  .cr-fan__card:nth-child(2) { transform: translateX(min(104px, 17vw)) rotate(11deg); }
  .cr-fan__card:nth-child(3) { width: 182px; height: 238px; }
  .cr-fan__card .cr-fan__logo { width: 54px; }
}

/* ---------- Bandeau de réassurance ---------- */
.cr-trust-strip { background: var(--cr-ink); padding: 16px var(--cr-gutter); margin-top: var(--cr-trust-space, 0px); }
.cr-trust-strip .cr-trust { max-width: 1120px; margin-inline: auto; }
.cr-trust-strip .cr-accent { font-size: 15px; color: var(--cr-yellow); }
/* En desktop, la bande est fixe et centrée : le doublon de piste ne sert pas. */
.cr-trust--clone { display: none; }

/* Version mobile : bande défilante.
   Les deux pistes se suivent et translatent de −100 % de LEUR PROPRE largeur ;
   quand la première a fini de sortir, la seconde occupe exactement sa position
   de départ, d'où une boucle sans saut. */
@media (max-width: 749px) {
  .cr-trust-strip {
    padding-inline: 0;
    overflow: hidden;
    /* Estompe les deux bords pour que le texte n'apparaisse pas coupé net. */
    mask-image: linear-gradient(to right, transparent, #000 22px, #000 calc(100% - 22px), transparent);
  }
  .cr-trust-strip__viewport { display: flex; width: max-content; }
  .cr-trust-strip .cr-trust {
    flex: none;
    max-width: none;
    flex-wrap: nowrap;
    gap: 26px;
    padding-right: 26px;
    animation: cr-trust-scroll var(--cr-trust-duration, 14s) linear infinite;
  }
  .cr-trust--clone { display: flex; }
  .cr-trust__item { white-space: nowrap; }
}
@keyframes cr-trust-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
/* Un défilement permanent est un mouvement non sollicité : on le coupe.
   ⚠️ `chronces.css` neutralise déjà toute animation sous `reduced-motion` — la
   piste resterait donc figée à sa position de départ, la moitié des points
   invisibles hors du cadre. Il faut REMETTRE la mise en page statique, pas se
   contenter de couper l'animation. */
@media (prefers-reduced-motion: reduce) {
  .cr-trust-strip { overflow: visible; mask-image: none; padding-inline: var(--cr-gutter); }
  .cr-trust-strip__viewport { display: block; width: auto; }
  .cr-trust-strip .cr-trust { animation: none; flex-wrap: wrap; padding-right: 0; gap: 14px 30px; }
  .cr-trust--clone { display: none; }
}

/* ---------- Titres de section centrés ---------- */
.cr-section-head--center { display: block; text-align: center; }
.cr-section-head--center .cr-eyebrow { text-align: center; }
.cr-section-head__note {
  font-family: var(--cr-font-accent);
  font-size: 15px;
  color: var(--cr-ink);
  max-width: 280px;
  text-align: right;
  line-height: 1.35;
}

/* ---------- Cartes de collection ---------- */
.cr-coll-card {
  flex: 0 0 262px;
  display: block;
  padding: 22px;
  background: var(--cr-yellow);
  border: var(--cr-border);
  border-radius: 26px;
  box-shadow: 0 8px 0 -1px var(--cr-ink);
  color: var(--cr-ink);
}
.cr-coll-card:hover { color: var(--cr-ink); }
.cr-coll-card--dark { background: var(--cr-ink); }
.cr-coll-card__media {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 22px; margin-bottom: 16px;
  background: var(--cr-white);
  border: var(--cr-border);
  border-radius: 18px;
}
.cr-coll-card__media img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cr-coll-card__tag { font-family: var(--cr-font-accent); font-size: 14px; color: var(--cr-pink); margin-bottom: 2px; }
.cr-coll-card__name { font-family: var(--cr-font-display); font-size: 21px; line-height: 1.05; color: var(--cr-ink); }
.cr-coll-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.cr-coll-card__count { font-weight: 600; font-size: 13px; color: var(--cr-mauve); }
.cr-coll-card__arrow { font-family: var(--cr-font-display); font-size: 16px; color: var(--cr-ink); }
.cr-coll-card--dark .cr-coll-card__tag { color: var(--cr-blush); }
.cr-coll-card--dark .cr-coll-card__name,
.cr-coll-card--dark .cr-coll-card__arrow { color: var(--cr-yellow); }
.cr-coll-card--dark .cr-coll-card__count { color: #f2d9df; }

/* ---------- Tailles ---------- */
.cr-sizes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px; }
.cr-size {
  display: flex; align-items: center; gap: 18px;
  padding: 24px;
  background: var(--cr-ink);
  border-radius: 26px;
  color: var(--cr-yellow);
}
.cr-size:hover { color: var(--cr-yellow); }
.cr-size__box {
  flex: none;
  width: var(--cr-box, 44px); height: var(--cr-box, 44px);
  display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--cr-yellow);
  border-radius: 14px;
}
.cr-size__box span {
  width: 60%; height: 60%; border-radius: 6px;
  background: repeating-linear-gradient(135deg, rgb(from var(--cr-yellow) r g b / .35) 0 6px, transparent 6px 12px);
}
/* `display: block` indispensable : ce sont des <span>, donc en ligne par
   défaut — le nom, la dimension et la description se suivaient sur la même
   ligne (« Mini3 × 3 cmDiscret… ») et les marges verticales étaient ignorées. */
.cr-size__name { display: block; font-family: var(--cr-font-display); font-size: 22px; line-height: 1; color: var(--cr-yellow); }
.cr-size__dim { display: block; font-family: var(--cr-font-accent); font-size: 15px; color: var(--cr-blush); margin: 5px 0 4px; }
.cr-size__desc { display: block; font-weight: 500; font-size: 13px; line-height: 1.4; color: #f2d9df; }

/* ---------- Packs ---------- */
.cr-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(258px, 100%), 1fr)); gap: 20px; }
.cr-pack {
  display: flex; flex-direction: column;
  padding: 20px;
  background: var(--cr-yellow);
  border: var(--cr-border);
  border-radius: 26px;
  box-shadow: 0 8px 0 -1px var(--cr-ink);
}
.cr-pack--dark { background: var(--cr-ink); }
.cr-pack__fan { display: flex; justify-content: center; margin-bottom: 18px; padding-top: 6px; }
.cr-pack__fan-item {
  width: 86px; height: 110px; margin: 0 -13px;
  display: flex; align-items: center; justify-content: center;
  padding: 9px;
  background: var(--cr-white);
  border: var(--cr-border);
  border-radius: var(--cr-r-md);
  box-shadow: 0 6px 14px -6px rgb(from var(--cr-ink) r g b / .5);
}
.cr-pack__fan-item img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
/* Nom puis mention (ordre de la maquette) : les marges suivent. */
.cr-pack__name { font-family: var(--cr-font-display); font-size: 22px; line-height: 1.05; color: var(--cr-ink); }
.cr-pack__tag { font-family: var(--cr-font-accent); font-size: 14px; color: var(--cr-pink); margin: 3px 0 14px; }
/* `flex-wrap` : dans la grille de collection en mobile, la carte pack ne fait
   que 164 px — prix + prix barré + pastille de remise ne tenaient pas sur une
   ligne et la pastille débordait de la page de 34 px. */
.cr-pack__prices { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin-bottom: 18px; }
.cr-pack__price { font-family: var(--cr-font-display); font-size: 20px; color: var(--cr-ink); }
.cr-pack__old { font-weight: 600; font-size: 14px; text-decoration: line-through; color: var(--cr-mauve); }
.cr-pack__save {
  margin-left: auto;
  font-family: var(--cr-font-accent); font-size: 13px;
  padding: 4px 11px; border-radius: var(--cr-r-pill);
  background: var(--cr-pink); color: var(--cr-yellow);
}
.cr-pack__cta { margin-top: auto; }
.cr-pack--dark .cr-pack__tag { color: var(--cr-blush); }
.cr-pack--dark .cr-pack__name,
.cr-pack--dark .cr-pack__price { color: var(--cr-yellow); }
.cr-pack--dark .cr-pack__old { color: #f2d9df; }

/* ---------- Bandeau bundle builder ---------- */
.cr-bundle {
  display: grid;
  /* `min(300px, 100%)` : même piège que le hero. À 375 px, le cadre n'offre que
     299 px utiles et la piste en réclamait 300 — le bloc débordait de 3 px à
     droite, ce qui faisait paraître le visuel décalé dans la section. */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 34px;
  align-items: center;
  padding: 44px 34px;
  background: var(--cr-ink);
  border: var(--cr-border);
  border-radius: var(--cr-r-2xl);
}
.cr-bundle__eyebrow { font-family: var(--cr-font-accent); font-size: 18px; color: var(--cr-yellow); opacity: .9; margin-bottom: 6px; }
.cr-bundle__title {
  font-family: var(--cr-font-display);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.02; margin: 0 0 14px;
  color: var(--cr-yellow);
  text-shadow: 2px 2px 0 var(--cr-pink);
}
.cr-bundle__text { max-width: 460px; margin: 0 0 22px; font-weight: 600; font-size: 16px; line-height: 1.55; color: var(--cr-blush); }
.cr-bundle__text strong { color: var(--cr-white); font-weight: 600; }
.cr-bundle__tiers { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.cr-tier {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px;
  background: var(--cr-pink);
  border: 3px solid var(--cr-yellow);
  border-radius: 16px;
}
.cr-tier__label { font-family: var(--cr-font-display); font-size: 15px; color: var(--cr-yellow); }
.cr-tier__value {
  font-family: var(--cr-font-display); font-size: 14px; color: var(--cr-white);
  background: var(--cr-ink); padding: 3px 10px; border-radius: var(--cr-r-pill);
}
.cr-bundle__media {
  display: flex; align-items: center; justify-content: center;
  padding: 14px;
  background: var(--cr-white);
  border: 3px solid var(--cr-yellow);
  border-radius: var(--cr-r-xl);
}
.cr-bundle__media img { width: 100%; height: auto; border-radius: var(--cr-r-md); display: block; }

/* ---------- Mobile : packs et bandeau bundle ---------- */
@media (max-width: 749px) {
  /* Les cartes de pack passaient à 1 colonne pleine largeur, soit ~340 px
     contre ~270 en desktop : l'éventail de motifs paraissait minuscule dans
     une carte démesurée. On garde donc la largeur de carte du desktop et on
     fait glisser la grille, comme les autres rails du site. */
  .cr-packs {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Le débord doit atteindre le bord de l'écran, sinon le rail donne
       l'impression de s'arrêter avant. */
    margin-inline: calc(var(--cr-gutter) * -1);
    padding: 4px var(--cr-gutter) 14px;
    /* Sans ça, `scroll-snap-align: start` cale la carte sur le bord de la BOÎTE
       de défilement et avale le padding gauche : au chargement le rail était
       déjà décalé de 18 px et la première carte touchait le bord de l'écran. */
    scroll-padding-inline: var(--cr-gutter);
  }
  .cr-packs::-webkit-scrollbar { display: none; }
  .cr-pack { flex: 0 0 262px; scroll-snap-align: start; padding: 18px; }
  .cr-pack__name { font-size: 20px; }

  /* Bandeau bundle : le cadre et les pastilles d'arguments étaient calibrés
     pour une colonne de 500 px. */
  .cr-bundle { padding: 22px 18px; gap: 22px; }
  /* Le visuel passe en tête, comme l'éventail du hero : la section s'ouvre sur
     le produit au lieu d'un pavé de texte. */
  .cr-bundle__media { order: -1; padding: 10px; }
  /* Les pastilles d'arguments faisaient 42 px de haut et occupaient chacune
     leur propre ligne : trois gros blocs empilés là où il ne faut qu'un rappel.
     Version compacte, ~30 px, qui en laisse deux tenir sur une ligne. */
  .cr-bundle__tiers { gap: 7px; margin-bottom: 22px; }
  .cr-tier { gap: 6px; padding: 7px 10px; border-width: 2px; border-radius: 12px; }
  /* `line-height: 1` explicite : c'est la hauteur de ligne par défaut de Titan
     One (~1,75 em) qui gonflait la pastille, pas le padding. */
  .cr-tier__label { font-size: 12px; line-height: 1; }
  .cr-tier__value { font-size: 11px; line-height: 1; padding: 3px 7px; }
}

/* ---------- Cartes produit (best-sellers) ---------- */
.cr-prod-card {
  flex: 0 0 208px;
  display: block;
  padding: 16px;
  background: var(--cr-cream);
  border: var(--cr-border);
  border-radius: 22px;
  box-shadow: var(--cr-shadow-md);
  color: var(--cr-ink);
}
.cr-prod-card:hover { color: var(--cr-ink); }
.cr-prod-card__media {
  position: relative;
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 18px; margin-bottom: 12px;
  background: var(--cr-white);
  border-radius: var(--cr-r-md);
}
.cr-prod-card__media img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cr-prod-card__badge {
  position: absolute; top: 10px; left: 10px;
  font-family: var(--cr-font-accent); font-size: 12px;
  padding: 4px 11px; border-radius: var(--cr-r-pill);
  background: var(--cr-pink); color: var(--cr-yellow);
}
.cr-prod-card__name { font-family: var(--cr-font-display); font-size: 15px; line-height: 1.1; color: var(--cr-ink); }
.cr-prod-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; gap: 8px; }
.cr-prod-card__cat { font-family: var(--cr-font-accent); font-size: 13px; color: var(--cr-pink); }
.cr-prod-card__price { font-family: var(--cr-font-display); font-size: 14px; color: var(--cr-pink); white-space: nowrap; }

@supports not (color: rgb(from white r g b / 1)) {
  .cr-size__box span { background: repeating-linear-gradient(135deg, rgba(250,233,78,.35) 0 6px, transparent 6px 12px); }
  .cr-pack__fan-item { box-shadow: 0 6px 14px -6px rgba(46,11,24,.5); }
  .cr-fan__card:nth-child(3) { box-shadow: 0 30px 56px -20px rgba(46,11,24,.65); }
}

/* ---------- Carrousel vidéo ---------- */
.cr-video-card {
  flex: 0 0 250px;
  position: relative;
  aspect-ratio: 9/16;
  overflow: hidden;
  background: var(--cr-ink);
  border: var(--cr-border);
  border-radius: var(--cr-r-xl);
  box-shadow: 0 8px 0 -1px var(--cr-ink);
}
.cr-video-card video,
.cr-video-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cr-video-card__caption {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  display: flex; align-items: center; gap: 9px;
}
.cr-video-card__initial {
  flex: none; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--cr-yellow); color: var(--cr-pink);
  font-family: var(--cr-font-display); font-size: 14px;
}
.cr-video-card__meta { padding: 6px 11px; border-radius: 12px; background: rgb(from var(--cr-ink) r g b / .72); }
.cr-video-card__name { font-weight: 700; font-size: 12.5px; line-height: 1.1; color: var(--cr-yellow); }
.cr-video-card__design { font-family: var(--cr-font-accent); font-size: 11.5px; color: var(--cr-blush); }

/* ---------- Bandeau tatouage personnalisé ---------- */
.cr-custom {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 30px;
  align-items: center;
  padding: 44px 34px;
  background: var(--cr-yellow);
  border: var(--cr-border);
  border-radius: var(--cr-r-2xl);
}

/* 🚨 `min-width: 0` — sans lui, la mosaïque DÉBORDE du panneau sur un vrai
   téléphone, alors que tout va bien dans l'éditeur et dans nos mesures.
   Un élément de grille a `min-width: auto` : il refuse de descendre sous la
   largeur MIN-CONTENT de son contenu. Tant que les images ne sont pas
   décodées elles ne pèsent rien — c'est le cas dans un aperçu qui ne
   composite pas, et c'est pour ça que le défaut y est invisible. Sur un
   appareil réel, les visuels produit arrivent en pleine résolution et
   poussent la piste au-delà du panneau, malgré le `max-width: 100%`.
   ⚠️ À poser sur TOUTE grille qui contient des images. */
.cr-custom > * { min-width: 0; }
.cr-custom__tile { min-width: 0; }
.cr-custom__tile img { min-width: 0; }
.cr-custom__eyebrow { font-family: var(--cr-font-accent); font-size: 18px; color: var(--cr-pink); margin-bottom: 6px; }
.cr-custom__title {
  font-family: var(--cr-font-display);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.02; margin: 0 0 14px;
  color: var(--cr-pink);
  text-shadow: 2px 2px 0 var(--cr-ink);
}
.cr-custom__text { max-width: 460px; margin: 0 0 26px; font-weight: 600; font-size: 16px; line-height: 1.55; color: var(--cr-ink); }
/* La mosaïque ne remplit plus toute sa colonne : elle y est CENTRÉE et
   plafonnée (retour utilisateur du 2026-08-02). Collée au bord droit du
   panneau, elle donnait un bandeau déséquilibré — le bloc de texte, lui,
   s'arrête à 460 px et laisse du jaune à sa droite.
   `width: 100%` + `max-width` : sous 420 px de colonne (mobile, une seule
   colonne), la contrainte ne mord pas et la grille reprend toute la place. */
.cr-custom__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  max-width: 420px;
  justify-self: center;
}
.cr-custom__tile {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  background: var(--cr-white);
  border: var(--cr-border);
  border-radius: 18px;
}
.cr-custom__tile img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }

/* ---------- Étapes ---------- */
.cr-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 22px; }
.cr-step { padding: 28px 24px; background: var(--cr-ink); border-radius: var(--cr-r-xl); }
.cr-step__num {
  display: flex; width: 52px; height: 52px;
  align-items: center; justify-content: center;
  margin-bottom: 18px;
  border-radius: 15px;
  background: var(--cr-yellow); color: var(--cr-pink);
  font-family: var(--cr-font-display); font-size: 24px;
}
.cr-step__title { font-family: var(--cr-font-display); font-size: 18px; line-height: 1.1; margin: 0 0 9px; color: var(--cr-yellow); }
.cr-step__body { font-weight: 500; font-size: 14px; line-height: 1.55; margin: 0; color: #f2d9df; }

/* ---------- Avis ---------- */
.cr-reviews { padding: 46px 30px; background: var(--cr-ink); border-radius: var(--cr-r-2xl); }
.cr-reviews__eyebrow { text-align: center; font-family: var(--cr-font-accent); font-size: 18px; color: var(--cr-yellow); opacity: .9; margin-bottom: 4px; }
.cr-reviews__title {
  text-align: center; margin: 0 0 30px;
  font-family: var(--cr-font-display);
  font-size: clamp(26px, 4vw, 36px);
  color: var(--cr-yellow);
  text-shadow: 2px 2px 0 var(--cr-pink);
}
.cr-reviews__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(238px, 100%), 1fr)); gap: 16px; }
.cr-review { padding: 18px; background: var(--cr-yellow); border-radius: var(--cr-r-lg); box-shadow: 0 6px 0 -1px var(--cr-pink); }
.cr-review__stars { font-family: var(--cr-font-display); font-size: 13px; color: var(--cr-pink); letter-spacing: 2px; }
.cr-review__text { font-weight: 500; font-size: 14px; line-height: 1.5; margin: 9px 0 14px; color: var(--cr-ink); }
.cr-review__author { display: flex; align-items: center; gap: 10px; }
.cr-review__initial {
  flex: none; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--cr-pink); color: var(--cr-yellow);
  font-family: var(--cr-font-display); font-size: 15px;
}
.cr-review__name { font-weight: 700; font-size: 12.5px; color: var(--cr-ink); }
.cr-review__tag { font-family: var(--cr-font-accent); font-size: 12px; color: var(--cr-pink); }

/* ---------- Garanties ---------- */
.cr-guarantees { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 18px; }
.cr-guarantee {
  padding: 22px;
  background: var(--cr-cream);
  border: var(--cr-border);
  border-radius: 22px;
  box-shadow: var(--cr-shadow-md);
}
.cr-guarantee__icon { font-size: 28px; line-height: 1; margin-bottom: 12px; }
.cr-guarantee__icon img { width: 32px; height: 32px; object-fit: contain; }
.cr-guarantee__title { font-family: var(--cr-font-display); font-size: 17px; line-height: 1.1; margin: 0 0 7px; color: var(--cr-pink); }
.cr-guarantee__body { font-weight: 500; font-size: 13.5px; line-height: 1.5; margin: 0; color: var(--cr-ink); }

/* ---------- FAQ ---------- */
.cr-faq { display: flex; flex-direction: column; gap: 14px; }
.cr-faq__item { background: var(--cr-ink); border-radius: var(--cr-r-lg); overflow: hidden; }
.cr-faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
}
.cr-faq__item summary::-webkit-details-marker { display: none; }
.cr-faq__q { font-family: var(--cr-font-display); font-size: 16px; line-height: 1.25; color: var(--cr-yellow); }
/* Le « + » est DESSINÉ, pas écrit. Mesuré : le glyphe de Titan One est
   géométriquement centré mais paraît décalé à cause des métriques de la
   police. Deux barres en pseudo-éléments sont centrées par construction et
   pivotent proprement en croix à l'ouverture. */
.cr-faq__sign {
  position: relative;
  flex: none; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--cr-yellow); color: var(--cr-pink);
  font-size: 0;
}
.cr-faq__sign::before,
.cr-faq__sign::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 14px; height: 3px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.cr-faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.cr-faq__item[open] .cr-faq__sign { transform: rotate(45deg); }
.cr-faq__a { font-weight: 500; font-size: 14.5px; line-height: 1.6; margin: 0; padding: 0 22px 22px; color: var(--cr-blush); }
.cr-faq__a a { text-decoration: underline; }

/* ---------- CTA final ---------- */
.cr-final {
  padding: 52px 30px;
  text-align: center;
  background: var(--cr-yellow);
  border-radius: var(--cr-r-2xl);
}
.cr-final__eyebrow { font-family: var(--cr-font-accent); font-size: 18px; color: var(--cr-pink); margin-bottom: 6px; }
.cr-final__title {
  font-family: var(--cr-font-display);
  font-size: clamp(28px, 4.5vw, 46px);
  line-height: 1.04; margin: 0 0 16px;
  color: var(--cr-pink);
  text-shadow: 2px 2px 0 var(--cr-ink);
}
.cr-final__text { max-width: 560px; margin: 0 auto 30px; font-weight: 600; font-size: 16px; line-height: 1.55; color: var(--cr-ink); }
.cr-final__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* Variante encre — celle de la fiche produit (maquette § CUSTOM CTA).
   Le bouton principal doit repasser en jaune : `cr-btn--pink` sur fond encre
   donnerait du rose sur presque-noir, illisible. */
.cr-final--ink { background: var(--cr-ink); }
.cr-final--ink .cr-final__eyebrow { color: var(--cr-yellow); opacity: .9; }
.cr-final--ink .cr-final__title { color: var(--cr-yellow); text-shadow: 2px 2px 0 var(--cr-pink); }
.cr-final--ink .cr-final__text { color: var(--cr-rose-soft); }
.cr-root .cr-final--ink .cr-btn--pink { background: var(--cr-yellow); color: var(--cr-pink); box-shadow: 0 6px 0 -1px var(--cr-pink); }
.cr-root .cr-final--ink .cr-btn--ink { background: transparent; color: var(--cr-yellow); border-color: var(--cr-yellow); box-shadow: none; }

@supports not (color: rgb(from white r g b / 1)) {
  .cr-video-card__meta { background: rgba(46, 11, 24, .72); }
}

/* La mosaïque s'adapte au nombre réel de produits publiés dans la collection :
   une seule tuile ne doit pas laisser une colonne vide. */
.cr-custom__grid:has(> :only-child) { grid-template-columns: 1fr; }
.cr-custom__grid:has(> :nth-child(3):last-child) > :first-child { grid-column: span 2; }

/* Aperçu « 3 motifs de la collection » du bandeau pack, sur la page collection.
   Maquette : Collection.dc.html (BUNDLE CTA). Les cadres reprennent EXACTEMENT
   ceux des cartes de la grille juste au-dessus — même fond crème, même bordure,
   même rayon, même carré — pour que les deux blocs se répondent. */
.cr-bundle__peek { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cr-bundle__peek-item {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1;
  overflow: hidden;
  padding: 20px;
  background: #FBF1EC;
  border: 2.5px solid #efdcd3;
  border-radius: 16px;
}
.cr-bundle__peek-item img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
@media (max-width: 749px) {
  .cr-bundle__peek { gap: 8px; }
  .cr-bundle__peek-item { padding: 8px; border-width: 2px; border-radius: 13px; }
}
}


/* Le bouton d'ajout du CTA final : même retour visuel que sur les cartes. */
.cr-final__add.is-busy button { opacity: .6; pointer-events: none; }
.cr-final__add.is-done button { background: var(--cr-ink); color: var(--cr-yellow); }