/* ─── « Dans le même rayon » : la rangée sous la fiche ─── */
/* Même famille visuelle que « À compléter » — œil-de-bœuf en capitales, titre
   en serif, cartes claires — mais en grille : ici on compare, on n'ajoute pas. */

body.cd-theme .cd-li{margin:2.6rem 0 0}

body.cd-theme .cd-li-tete{margin:0 0 1.05rem}
body.cd-theme .cd-li-oeil{display:inline-block;margin:0 0 .3rem;
  font-family:var(--mono,monospace);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--a,#8C2F42)}
body.cd-theme .cd-li-titre{margin:0;font-family:var(--titre,Georgia,serif);font-weight:400;
  font-size:1.3rem;line-height:1.15;color:var(--t,#241619)}
body.cd-theme .cd-li-aide{margin:.2rem 0 0;font-size:.86rem;color:var(--t2,#4A3439)}

/*
 * 🚨 Nombre de colonnes FIXÉ par palier, et surplus masqué : `auto-fill`
 * laissait deux orphelins sur une deuxième ligne dès que la largeur ne tombait
 * pas juste. Six produits sont rendus ; chaque palier n'en montre qu'un
 * multiple exact de ses colonnes, donc une rangée toujours pleine.
 */
body.cd-theme .cd-li-rangee{list-style:none;margin:0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(6,minmax(0,1fr))}
body.cd-theme .cd-li-item{min-width:0}

/* ⚠ Chaque palier RÉOUVRE toutes les cartes avant de masquer son surplus.
   Sans cette remise à zéro, la règle du palier au-dessus continue de s'appliquer :
   à 390 px, le `n+4` des tablettes laissait 3 cartes sur 2 colonnes — un orphelin.
   🚨 Et la remise à zéro s'écrit `:nth-child(n)`, pas `.cd-li-item` seul : à
   spécificité inférieure elle perdait contre le `:nth-child(n+4)` du palier
   au-dessus, quel que soit l'ordre d'écriture. */
@media (max-width:1239px){
  body.cd-theme .cd-li-rangee{grid-template-columns:repeat(5,minmax(0,1fr))}
  body.cd-theme .cd-li-item:nth-child(n){display:block}
  body.cd-theme .cd-li-item:nth-child(n+6){display:none}
}
@media (max-width:1023px){
  body.cd-theme .cd-li-rangee{grid-template-columns:repeat(4,minmax(0,1fr))}
  body.cd-theme .cd-li-item:nth-child(n){display:block}
  body.cd-theme .cd-li-item:nth-child(n+5){display:none}
}
@media (max-width:767px){
  body.cd-theme .cd-li-rangee{grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
  body.cd-theme .cd-li-item:nth-child(n){display:block}
  body.cd-theme .cd-li-item:nth-child(n+4){display:none}
}
@media (max-width:519px){
  body.cd-theme .cd-li-rangee{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
  body.cd-theme .cd-li-item:nth-child(n){display:block}
  body.cd-theme .cd-li-item:nth-child(n+5){display:none}
}

/* La carte : surface claire, cadre discret, et le visuel entier — les photos
   fournisseur sont détourées, les recadrer coupait les produits hauts. */
body.cd-theme .cd-li-item a{display:flex;flex-direction:column;gap:.34rem;height:100%;
  padding:.55rem .6rem .75rem;background:var(--s,#fff);
  border:1px solid var(--b,#E9DCD3);border-radius:var(--r,14px);
  text-decoration:none;color:var(--t,#241619);
  transition:border-color .2s,box-shadow .2s,transform .2s}
body.cd-theme .cd-li-item a:hover{border-color:var(--peau,#E9CFC3);transform:translateY(-3px);
  box-shadow:var(--ombre,0 18px 40px -24px rgba(60,30,35,.36))}
body.cd-theme .cd-li-item a:focus-visible{outline:2px solid var(--a,#8C2F42);outline-offset:2px}

body.cd-theme .cd-li-vis{display:block;margin-bottom:.3rem;border-radius:var(--r-p,8px);
  overflow:hidden;background:var(--f2,#F4EAE3)}
body.cd-theme .cd-li-vis img{width:100%;aspect-ratio:1/1;object-fit:contain;display:block;
  margin:0;padding:.4rem;transition:transform .35s ease}
body.cd-theme .cd-li-item a:hover .cd-li-vis img{transform:scale(1.04)}

body.cd-theme .cd-li-marque{font-family:var(--mono,monospace);font-size:.58rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--a,#8C2F42)}
body.cd-theme .cd-li-nom{font-size:.85rem;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.cd-theme .cd-li-item a:hover .cd-li-nom{text-decoration:underline;text-underline-offset:2px}
body.cd-theme .cd-li-prix{margin-top:auto;padding-top:.2rem;font-family:var(--mono,monospace);
  font-size:.9rem;font-variant-numeric:tabular-nums;color:var(--t,#241619)}
body.cd-theme .cd-li-prix del{opacity:.5;margin-right:.3em;font-size:.82em}
body.cd-theme .cd-li-prix ins{text-decoration:none;color:var(--a,#8C2F42);font-weight:600}

@media (prefers-reduced-motion:reduce){
  body.cd-theme .cd-li-item a:hover{transform:none}
  body.cd-theme .cd-li-item a:hover .cd-li-vis img{transform:none}
}

/* ─── « À compléter » : l'accessoire, sous le descriptif ─── */
/* Volontairement différent de la grille du bas : ce ne sont pas des produits
   qu'on compare, ce sont des compléments qu'on ajoute. D'où des rangées, un
   prix aligné à droite, et un bouton qui agit sans quitter la page. */

body.cd-theme .cd-cpl{margin:2rem 0 0;padding:1.15rem 1.25rem 1.25rem;
  background:var(--peau-p,#F6E6DE);border:1px solid var(--peau,#E9CFC3);
  border-radius:var(--r,14px)}

body.cd-theme .cd-cpl-tete{margin:0 0 .9rem}
body.cd-theme .cd-cpl-oeil{display:inline-block;margin:0 0 .3rem;
  font-family:var(--mono,monospace);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--a,#8C2F42)}
body.cd-theme .cd-cpl-titre{margin:0;font-family:var(--titre,Georgia,serif);font-weight:400;
  font-size:1.3rem;line-height:1.15;color:var(--t,#241619)}
body.cd-theme .cd-cpl-aide{margin:.2rem 0 0;font-size:.86rem;color:var(--t2,#4A3439)}

body.cd-theme .cd-cpl-liste{list-style:none;margin:0;padding:0;
  background:var(--s,#fff);border:1px solid var(--b,#E9DCD3);border-radius:var(--r-p,8px);
  overflow:hidden}
body.cd-theme .cd-cpl-item{display:flex;align-items:center;gap:.85rem;
  padding:.7rem .8rem;transition:background .18s}
body.cd-theme .cd-cpl-item + .cd-cpl-item{border-top:1px solid var(--b,#E9DCD3)}
body.cd-theme .cd-cpl-item:hover{background:var(--f,#FBF7F4)}

body.cd-theme .cd-cpl-vis{flex:0 0 58px;width:58px;height:58px;border-radius:6px;
  overflow:hidden;background:var(--f2,#F4EAE3);display:block}
body.cd-theme .cd-cpl-vis img{width:100%;height:100%;object-fit:cover;display:block;margin:0;
  transition:transform .3s ease}
body.cd-theme .cd-cpl-item:hover .cd-cpl-vis img{transform:scale(1.05)}

body.cd-theme .cd-cpl-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.1rem}
body.cd-theme .cd-cpl-marque{font-family:var(--mono,monospace);font-size:.58rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--a,#8C2F42)}
body.cd-theme .cd-cpl-nom{font-size:.9rem;line-height:1.35;color:var(--t,#241619);
  text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
body.cd-theme .cd-cpl-nom:hover{text-decoration:underline;text-underline-offset:2px}

body.cd-theme .cd-cpl-fin{flex:0 0 auto;display:flex;align-items:center;gap:.7rem}
body.cd-theme .cd-cpl-prix{font-family:var(--mono,monospace);font-size:.92rem;
  font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--t,#241619)}
body.cd-theme .cd-cpl-prix del{opacity:.5;margin-right:.25em;font-size:.82em}
body.cd-theme .cd-cpl-prix ins{text-decoration:none;color:var(--a,#8C2F42);font-weight:600}

/* Le bouton reste celui du thème — même classe `cd-ajout`, même gestionnaire,
   donc même comportement que partout ailleurs : on ajoute sans quitter la page.
   Seule l'apparence change. */
body.cd-theme .cd-cpl .button{display:inline-flex;align-items:center;gap:.4rem;
  margin:0;padding:.52rem 1rem;border:1px solid var(--a,#8C2F42);
  border-radius:var(--r-pill,999px);background:transparent;color:var(--a,#8C2F42);
  font-family:var(--mono,monospace);font-size:.63rem;letter-spacing:.09em;text-transform:uppercase;
  line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s}
body.cd-theme .cd-cpl .button:hover{background:var(--a,#8C2F42);color:#FBF7F4}
body.cd-theme .cd-cpl .button svg{flex:0 0 auto;width:14px;height:14px}

/* 🚨 Le thème replie le libellé partout (`.cd-ajout-t{max-width:0;opacity:0}`)
   et ne le déplie qu'au survol d'une carte de liste. Ici la place ne manque
   pas et le mot doit se lire d'emblée : on le déplie explicitement, avec assez
   de poids pour l'emporter sur la règle générale. */
body.cd-theme .cd-cpl .button .cd-ajout-t{display:inline;max-width:none;overflow:visible;opacity:1}
body.cd-theme .cd-cpl .button.cd-charge{opacity:.55;pointer-events:none}
body.cd-theme .cd-cpl .button.cd-fait{background:var(--ok,#2F7A5A);
  border-color:var(--ok,#2F7A5A);color:#fff}
body.cd-theme .cd-cpl .button.cd-fait .cd-ajout-t{opacity:1}

@media (prefers-reduced-motion:reduce){
  body.cd-theme .cd-cpl-item:hover .cd-cpl-vis img{transform:none}
}
@media (max-width:560px){
  body.cd-theme .cd-cpl{padding:1rem}
  body.cd-theme .cd-cpl-item{flex-wrap:wrap;gap:.6rem .8rem}
  body.cd-theme .cd-cpl-txt{flex:1 1 55%}
  body.cd-theme .cd-cpl-fin{flex:1 1 100%;justify-content:space-between;
    padding-left:calc(58px + .8rem)}
}