/* ───────────────────────────────────────────────────────────────────────────
   LA BOUTIQUE DES PAULETTES — la page (motif boutique) et la fiche d'un
   produit (motifs produit-fiche et produit-autres).

   Le premier écran suit la seconde maquette de Corentin (14 octobre 2026) :
   le haut (motif boutique-haut, classes bqh-) et les rayons en tuiles photo (motif
   boutique-rayons, classes bqr-), sans pictogrammes ni bande de
   réassurance. Puis « Nos best-sellers » (motif boutique-best-sellers,
   classes bqb-), les moments et la fin (motif boutique).

   La charte ne cède pas : crème, titres en Marcellus bordeaux, pilule
   bordeaux, aucun gris neutre. Photos de produit en portrait (4:5). Pas
   d'arche : la forme du site est le feston (CLAUDE.md, 3 octobre 2026).
   ─────────────────────────────────────────────────────────────────────────── */

/* La largeur de la boutique, d'après Gymshark (mesuré le 18 octobre 2026, shop-women) : fluide, presque bord à bord,
   16 px de marge au téléphone, 40 px en grand écran ; plus le conteneur de 1280 px du site, qui gardait les images
   petites sur un grand écran. Les tuiles : 4:5, quatre par rangée en grand écran, deux au téléphone, 8 px d'écart
   (4 chez eux, à angles droits ; nos coins arrondis respirent un peu plus). Rayons, best-sellers, moments, collection :
   toutes les tuiles ont la même taille. Ce fichier n'est chargé que dans la boutique. */
body { --bq-largeur: 120rem; --bq-gouttiere: 1rem; --bq-ecart: 0.5rem; }
@media (min-width: 900px) {
  body { --bq-gouttiere: 2.5rem; }
}

.bqb, .bqc, .bq-moments, .pf, .bq-autres, .bq-fin__cadre {
  box-sizing: border-box;
  max-width: var(--bq-largeur);
  margin: 0 auto;
  padding-inline: var(--bq-gouttiere);
  color: var(--gray-700);
}
.bqh *, .bqr *, .bqb *, .bqc *, .bq-moments *, .pf *, .bq-autres *, .bq-fin * { box-sizing: border-box; }
.bq-titre { margin: 0 0 1.5rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.75rem, 6.4vw, 2.5rem); line-height: 1.1; text-wrap: balance; color: var(--vin-700); }
.bq-fleche { flex: none; width: 1rem; height: 1rem; transition: transform var(--dur-base) var(--ease-out-expo); }

/* Tout le texte du haut est en Manrope gras (Corentin, 17 octobre 2026) : titre, ligne sous le titre, phrase.
   ── Le haut : le titre à gauche sur le crème, la photo à droite qui s'y fond, le mot manuscrit posé sur le mur de la photo ──
   Téléphone : le titre et le bouton posés dans le fondu de la photo (bloc plus bas). */
@font-face { font-family: "Homemade Apple"; src: url("../fonts/homemade-apple-latin.woff2") format("woff2"); font-display: swap; }
.bqh { position: relative; isolation: isolate; background: var(--cream); color: var(--gray-700); }
.bqh__photo { position: relative; margin: 0; aspect-ratio: 4 / 3.4; overflow: hidden; background: var(--linen-deep); -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent); }
.bqh__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.bqh__mot { position: absolute; top: 1rem; right: var(--bq-gouttiere); margin: 0; transform: rotate(-4deg); transform-origin: 100% 50%; font-family: "Homemade Apple", cursive; font-size: clamp(0.875rem, 3.6vw, 1.0625rem); line-height: 1.6; text-align: right; color: var(--vin-700); }
.bqh__texte { position: relative; display: grid; justify-items: start; padding: 0.25rem var(--bq-gouttiere) 2rem; }
.bqh__h1 { display: flex; flex-direction: column; margin: 0; font: inherit; }   /* le H1 réunit surtitre et grand titre, comme les pages de pratique */
.bqh__surtitre { font: 700 0.75rem/1.3 var(--font-body), sans-serif; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vin-700); }
.bqh__titre { margin-top: 0.625rem; font-family: var(--font-body), sans-serif; font-weight: 700; font-size: clamp(2.75rem, 12.5vw, 3.5rem); line-height: 1.02; text-wrap: balance; color: var(--vin-700); }
.bqh__manuscrit { margin: 0.875rem 0 0; font-family: var(--font-body), sans-serif; font-weight: 700; font-size: clamp(1rem, 4.4vw, 1.25rem); line-height: 1.5; color: var(--vin-700); }
.bqh__intro { max-width: 34rem; margin: 1.125rem 0 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.55; text-wrap: pretty; }
.bqh__intro br { display: none; }   /* au téléphone, le texte coule seul ; les retours du champ valent en grand écran */
.bqh__boutons { display: grid; gap: 0.625rem; width: 100%; margin-top: 1.75rem; }
.bqh__bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 1rem; min-height: 3.375rem; padding: 0.5rem 1.75rem; border: 1.5px solid var(--vin-700); border-radius: var(--radius-pill);
  background: var(--vin-700); color: var(--ivory); text-decoration: none; white-space: nowrap; font: 700 0.8125rem/1.25 var(--font-body), sans-serif; letter-spacing: 0.14em; text-transform: uppercase;
  transition: background-color var(--dur-base) var(--ease-out-expo), border-color var(--dur-base) var(--ease-out-expo);
}
.bqh__bouton:hover { background: var(--vin-800); border-color: var(--vin-800); }
.bqh__bouton:hover .bq-fleche { transform: translateX(3px); }
.bqh__bouton--clair { background: var(--cream); color: var(--vin-700); }
.bqh__bouton--clair:hover { background: var(--linen-deep); border-color: var(--vin-700); }
.bqh__bouton:focus-visible { outline: 2px solid var(--vin-700); outline-offset: 3px; }
/* Le haut, d'après Skims (17 octobre 2026), au téléphone comme en grand écran : la photo entière, sans voile, sur toute la
   largeur ; le titre, le sous-titre et « Découvrir la boutique » (simple lien souligné) en blanc pur (voulu par Corentin),
   en bas à gauche, sur un dégradé lie de vin (jamais gris) qui les rend lisibles sur le t-shirt et le mur crème.
   Téléphone : l'image mise en avant (portrait), jusqu'à ~78 % de l'écran. Grand écran : la photo paysage du champ
   « Photo du haut, grand écran », jusqu'à ~80 % de l'écran ; les rayons apparaissent dessous, dans la fenêtre. */
.bqh--photo { display: grid; }
.bqh--photo > .bqh__photo, .bqh--photo > .bqh__texte { grid-area: 1 / 1; }
.bqh--photo .bqh__photo { width: 100%; height: calc(78svh - var(--cp-nav-h, 83px)); min-height: 28rem; max-height: 52rem; aspect-ratio: auto; -webkit-mask-image: none; mask-image: none; }
.bqh--photo .bqh__photo img { object-position: 45% 50%; }
.bqh--photo .bqh__photo::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(to bottom, transparent, rgb(26 4 6 / 0.6)); pointer-events: none; }
.bqh--photo .bqh__texte { align-self: end; margin-top: 0; padding-bottom: 1.5rem; }
.bqh--photo .bqh__titre { margin-top: 0; font-size: clamp(1.75rem, 8vw, 2.125rem); color: #fff; }
.bqh--photo .bqh__titre br { display: none; }   /* le titre tient sur une ligne */
.bqh--photo .bqh__surtitre { color: #fff; }
.bqh--photo .bqh__manuscrit { display: none; }
.bqh--photo .bqh__intro { margin-top: 0.375rem; font-size: 0.9375rem; line-height: 1.45; text-wrap: balance; color: #fff; }
.bqh--photo .bqh__boutons { gap: 0; margin-top: 0.5rem; }
.bqh--photo .bqh__bouton { justify-self: start; min-height: 2.75rem; padding: 0; border: 0; background: none; color: #fff; letter-spacing: 0; text-transform: none; font-size: 0.9375rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
.bqh--photo .bqh__bouton:hover { background: none; text-decoration-thickness: 2px; }
.bqh--photo .bqh__bouton .bq-fleche { display: none; }
.bqh--photo .bqh__bouton:focus-visible { outline-color: #fff; }
@media (min-width: 900px) {
  .bqh--photo .bqh__photo { height: clamp(30rem, calc(80svh - var(--cp-nav-h, 92px)), 48rem); }
  .bqh--photo .bqh__photo img { object-position: 50% 30%; }
  .bqh--photo .bqh__photo::after { inset: 0; background: linear-gradient(to top, rgb(26 4 6 / 0.62), rgb(26 4 6 / 0.28) 45%, transparent 72%), linear-gradient(to right, rgb(26 4 6 / 0.28), transparent 55%); }   /* le mur crème est clair : le dégradé monte plus haut et s'appuie à gauche, côté texte (contraste mesuré) */
  /* Le texte s'aligne sur le bord gauche des tuiles dessous (même largeur, même marge). */
  .bqh--photo .bqh__texte { --bq-bord: calc(max(0px, (100vw - var(--bq-largeur)) / 2) + var(--bq-gouttiere)); max-width: calc(var(--bq-bord) + 44rem); padding: 0 2rem 2.5rem var(--bq-bord); }
  .bqh--photo .bqh__titre { font-size: clamp(2.5rem, 3.6vw, 3.25rem); line-height: 1.05; }
  .bqh--photo .bqh__intro { margin-top: 0.625rem; font-size: 1.125rem; }
  .bqh--photo .bqh__boutons { margin-top: 0.75rem; }
  .bqh--photo .bqh__bouton { font-size: 1rem; }
}
/* Les rayons sur le haut de la photo, en grand écran seulement : la barre de catégories de Skims, mesurée le 19 octobre
   2026 (texte blanc de 14 px en GRAS : le lien fait 16 px, mais le mot est un span à 700 de 14 px ; 16 px entre deux,
   centrée dans une bande de 64 px en haut de la photo ;
   au survol, un trait blanc de 2 px, 4 px sous le mot, qui se déroule en 0,3 s). Collée au bord comme chez eux (24 px). */
.bqh__rayons { display: none; }
@media (min-width: 900px) {
  .bqh--photo > .bqh__rayons { grid-area: 1 / 1; align-self: start; display: block; padding: 0 2rem 0 1.5rem; }
  .bqh__rayons ul { display: flex; flex-wrap: wrap; gap: 0 1rem; margin: 0; padding: 0; list-style: none; }
  .bqh__rayons a { position: relative; display: inline-block; padding: 1.25rem 0; color: #fff; text-decoration: none; font: 700 0.875rem/1.5rem var(--font-body), sans-serif; -webkit-font-smoothing: antialiased; }
  .bqh__rayons a::after { content: ""; position: absolute; left: 0; bottom: calc(1.25rem - 4px - 2px); width: 0; height: 2px; background: #fff; transition: width 0.3s ease-in-out; }
  .bqh__rayons a:hover::after, .bqh__rayons a:focus-visible::after { width: 100%; }
  .bqh__rayons a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
}
@media (prefers-reduced-motion: reduce) { .bqh__rayons a::after { transition: none; } }
/* « Offrir un cours » : le second bouton est un <button> (il ouvre la fenêtre), habillé comme le lien. */
button.bqh__bouton { cursor: pointer; }
/* La fenêtre (attribut popover) : la carte du pop-up d'offre (popup.css), centrée ; au téléphone, une feuille qui monte du bas. */
.bq-offrir { box-sizing: border-box; width: min(100% - 32px, 440px); margin: auto; padding: 2.25rem 1.875rem 1.5rem; border: 0; border-radius: 20px; background: var(--cream); color: var(--gray-700); text-align: center; box-shadow: 0 2px 6px rgb(26 4 6 / .12), 0 32px 80px rgb(26 4 6 / .35); opacity: 0; transform: translateY(16px) scale(.985); transition: opacity .4s ease-out, transform .6s var(--ease-out-expo), overlay .4s allow-discrete, display .4s allow-discrete; }
.bq-offrir:popover-open { opacity: 1; transform: none; }
@starting-style { .bq-offrir:popover-open { opacity: 0; transform: translateY(16px) scale(.985); } }
.bq-offrir::backdrop { background: rgb(26 4 6 / .5); }
.bq-offrir__fermer { position: absolute; top: 0.75rem; right: 0.75rem; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: background-color .2s ease-out, transform .2s ease-out; }
.bq-offrir__fermer:hover { background: var(--linen-deep); transform: rotate(90deg); }
.bq-offrir__fermer:focus-visible { outline: 2px solid var(--vin-700); outline-offset: 2px; }
.bq-offrir__fermer svg { width: 18px; height: 18px; }
.bq-offrir__titre { margin: 0; font-family: var(--font-display); font-size: 1.875rem; line-height: 1.1; color: var(--vin-700); }
.bq-offrir__texte { max-width: 32ch; margin: 0.75rem auto 0; font-size: 0.9375rem; line-height: 1.55; text-wrap: pretty; }
.bq-offrir__bouton { width: 100%; margin-top: 1.5rem; }
.bq-offrir__adresse { margin: 0.75rem 0 0; font-size: 0.8125rem; color: var(--ink-2); user-select: all; }
@media (max-width: 599px) {
  .bq-offrir { width: 100%; max-width: none; margin: auto 0 0; padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; transform: translateY(100%); }
  @starting-style { .bq-offrir:popover-open { transform: translateY(100%); } }
}

/* ── Les rayons, façon Skims et Gymshark : de grandes tuiles photo d'ambiance, en portrait, le nom dessous.
   Deux colonnes au téléphone ; en grand écran, un quart de la largeur chacune, la taille des best-sellers, centrées. ── */
.bqr { box-sizing: border-box; max-width: var(--bq-largeur); margin: 0 auto; padding: 1rem var(--bq-gouttiere) 0; scroll-margin-top: calc(var(--cp-nav-h, 92px) + 0.5rem); }
.bqr__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bq-ecart); margin: 0; padding: 0; list-style: none; }
.bqr__lien { display: flex; flex-direction: column; color: var(--vin-700); text-decoration: none; }
.bqr__photo { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-lg); background: var(--linen-deep); }
.bqr__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transition: transform var(--dur-slow) var(--ease-out-expo); }
.bqr__nom { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-top: 0.625rem; font: 400 1.125rem/1.2 var(--font-display); text-wrap: balance; }
.bqr__lien:hover .bqr__photo img { transform: scale(1.03); }
.bqr__lien:hover .bq-fleche { transform: translateX(3px); }
.bqr__lien:focus-visible { outline: 2px solid var(--vin-700); outline-offset: 4px; border-radius: var(--radius-lg); }
@media (min-width: 900px) {
  .bqr { padding-top: 1rem; }   /* comme Skims : les rayons juste sous la photo, un filet de crème entre les deux */
  /* Une tuile = une colonne sur quatre, comme les best-sellers (même taille partout, 18 octobre 2026), la rangée centrée. */
  .bqr__liste { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--bq-ecart); }
  .bqr__rayon { flex: 0 0 calc((100% - 3 * var(--bq-ecart)) / 4); min-width: 0; }
  /* Le nom en texte courant, la flèche collée à son dernier mot : sur une tuile étroite, il passe à la ligne sans que la flèche parte à droite. */
  .bqr__nom { display: block; padding-top: 0.875rem; font-size: 1.5rem; }
  .bqr__nom .bq-fleche { display: inline-block; margin-left: 0.5rem; vertical-align: 0.1em; }
  /* En grand écran, la ligne des rayons sur la photo les remplace (Corentin, 19 octobre 2026 : deux grandes tuiles
     pour cinq produits, c'était de trop). Les tuiles restent au téléphone, et reviennent ici sans photo du haut. */
  body:has(.bqh__rayons) .bqr { display: none; }
}

/* La barre du site sur cette page seulement (la maquette) : le même pêche, et « Boutique » en bordeaux, la page où l'on est. La barre partagée ne change pas ailleurs. */
:is(.page-template-page-boutique, .single-produit, .post-type-archive-produit, .tax-produit_rayon) .cp-nav { background: #F4E8DC; }
:is(.page-template-page-boutique, .single-produit, .post-type-archive-produit, .tax-produit_rayon) .cp-nav__lien[href$="/boutique/"] { color: var(--vin-700); opacity: 1; }

/* ── La carte produit (best-sellers, « Dans la boutique aussi ») : le produit seul, porté au survol (Alo) ── */
.bq-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem var(--bq-ecart); margin: 0; padding: 0; list-style: none; }
.bq-produit__lien { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.bq-produit__photo { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-lg); background: var(--linen-deep); }   /* sans photo : le crème des murs */
.bq-produit__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-base) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo); }
.bq-produit__img--survol { opacity: 0; }
@media (hover: hover) {
  .bq-produit__lien:hover .bq-produit__img--survol { opacity: 1; }
}
.bq-produit__vide { position: absolute; inset: 0; width: 2rem; height: 2rem; margin: auto; color: var(--amber); }   /* photo à venir : le glyphe ✦, rien d'autre */
.bq-produit__corps { display: flex; flex-direction: column; align-items: flex-start; padding-top: 0.875rem; }
/* La pastille (leur « Nouveau ») : sur le crème des murs, jamais en gris. */
.bq-pastille { display: inline-block; margin-bottom: 0.5rem; padding: 0.3125rem 0.5rem; border-radius: 6px; background: var(--linen-deep); font: 700 0.625rem/1.2 var(--font-body), sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vin-700); }
.bq-produit__nom { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.0625rem, 4.4vw, 1.25rem); line-height: 1.2; text-wrap: balance; color: var(--vin-700); }
.bq-produit__economie { display: block; margin-top: 0.125rem; font: 600 0.75rem/1.3 var(--font-body), sans-serif; color: var(--ink); }
.bq-produit__prix { margin-top: 0.375rem; font: 600 0.9375rem/1.3 var(--font-body), sans-serif; color: var(--ink); font-variant-numeric: tabular-nums; }
.bq-produit__etat { margin-top: 0.25rem; font-size: 0.8125rem; line-height: 1.3; color: var(--ink-2); }
.bq-produit__lien:hover .bq-produit__nom { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.bq-produit__lien:focus-visible { outline: 2px solid var(--vin-700); outline-offset: 4px; border-radius: var(--radius-lg); }
/* L'ajout rapide, hors du lien de la carte : un calque de la taille de la photo, le sac en haut à droite, au téléphone comme
   en grand écran (la barre des tailles au survol a été retirée le 17 octobre 2026). */
.bq-produit { position: relative; }
.bq-ajout { position: absolute; inset: 0 0 auto; z-index: 1; aspect-ratio: 4 / 5; pointer-events: none; }
.bq-ajout[hidden] { display: none; }
.bq-ajout__sac { position: absolute; top: 0.5rem; right: 0.5rem; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: var(--cream); color: var(--vin-700); cursor: pointer; pointer-events: auto; transition: background-color var(--dur-base) var(--ease-out-expo), color var(--dur-base) var(--ease-out-expo); }
.bq-ajout__sac svg { width: 1.375rem; height: 1.375rem; }
.bq-ajout__sac:hover { background: var(--vin-700); color: var(--ivory); }
.bq-ajout__sac:focus-visible { outline: 2px solid var(--vin-700); outline-offset: 2px; }

.bq__vide { margin: 0; font-size: 1.0625rem; }
@media (min-width: 900px) {
  .bq-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3rem var(--bq-ecart); }
}

/* ── Nos best-sellers (la maquette) : le titre et son filet, le lien à droite ; dessous, les cartes en portrait (4:5,
   comme Gymshark : les photos carrées sur six colonnes étaient trop petites), nom en petit Manrope, prix en gras, la
   pastille posée sur la photo. Quatre par rangée en grand écran, deux au téléphone. ── */
.bqb { padding-top: clamp(1.75rem, 7vw, 4rem); scroll-margin-top: calc(var(--cp-nav-h, 92px) + 0.5rem); }
.bqb__tete { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.5rem; margin-bottom: 1.125rem; }
.bqb__titre { display: flex; align-items: center; gap: 1.25rem; margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.625rem, 6.4vw, 2.25rem); line-height: 1.1; color: var(--vin-700); }
.bqb__titre::after { content: ""; flex: none; width: 3.5rem; height: 1px; background: currentColor; opacity: 0.5; }   /* le filet de la maquette */
.bqb__tout { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; margin-left: auto; font-size: 0.8125rem; font-weight: 500; color: var(--vin-700); text-decoration: none; }
.bqb__tout:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.bqb__tout:hover .bq-fleche { transform: translateX(3px); }
.bqb__tout:focus-visible { outline: 2px solid var(--vin-700); outline-offset: 3px; border-radius: 4px; }
.bqb__grille { gap: 1.5rem var(--bq-ecart); }
:is(.bqb, .bqc) .bq-produit__lien { position: relative; }
:is(.bqb, .bqc) .bq-produit__photo { border-radius: var(--radius); }
:is(.bqb, .bqc) .bq-produit__corps { padding-top: 0.625rem; }
:is(.bqb, .bqc) .bq-pastille { position: absolute; top: 0.5rem; left: 0.5rem; z-index: 1; margin: 0; padding: 0.3125rem 0.4375rem; border-radius: 4px; background: var(--vin-700); color: var(--ivory); font-size: 0.5625rem; }
:is(.bqb, .bqc) .bq-produit__nom { font: 500 0.8125rem/1.35 var(--font-body), sans-serif; text-wrap: pretty; color: var(--gray-700); }
:is(.bqb, .bqc) .bq-produit__prix { margin-top: 0.25rem; font-size: 0.875rem; font-weight: 700; }
:is(.bqb, .bqc) .bq-produit__etat { font-size: 0.75rem; }
:is(.bqb, .bqc) .bq-produit__lien:hover .bq-produit__nom { color: var(--vin-700); }
:is(.bqb, .bqc) .bq-produit__lien:focus-visible { border-radius: var(--radius); }
@media (min-width: 900px) {
  .bqb__tete { margin-bottom: 1.25rem; }
  .bqb__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem var(--bq-ecart); }
}

/* ── Toute la boutique (motif boutique-collection), d'après la page de collection de Gymshark : le fil d'Ariane,
   le titre, le nombre de produits ; les onglets des rayons dans une barre qui reste sous la barre du site ;
   la grille, deux colonnes au téléphone, quatre en grand écran (photos en portrait). ── */
.bqc { padding-block: clamp(0.75rem, 2vw, 1.25rem) clamp(3.5rem, 9vw, 6rem); }
.bqc__titre { margin: 0; font: 400 clamp(2.125rem, 9vw, 3.5rem)/1.05 var(--font-display); text-wrap: balance; color: var(--vin-700); }
.bqc__texte { max-width: 40rem; margin: 0.75rem 0 0; font-size: 1rem; line-height: 1.55; text-wrap: pretty; }
.bqc__barre { position: sticky; top: var(--cp-nav-h, 92px); z-index: 5; display: grid; gap: 0.5rem; margin: 1rem calc(-1 * var(--bq-gouttiere)) 1.25rem; padding: 0.75rem var(--bq-gouttiere); border-bottom: 1px solid var(--gray-200); background: var(--cream); }
.bqc__onglets { display: flex; gap: 0.5rem; margin: 0 calc(-1 * var(--bq-gouttiere)); padding: 0 var(--bq-gouttiere); list-style: none; overflow-x: auto; scrollbar-width: none; }
.bqc__onglets::-webkit-scrollbar { display: none; }
.bqc__onglets li { flex: none; }
.bqc__onglet { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.125rem; border: 1px solid var(--vin-700); border-radius: var(--radius-pill); color: var(--vin-700); text-decoration: none; white-space: nowrap; font: 600 0.875rem/1 var(--font-body), sans-serif; transition: background-color var(--dur-base) var(--ease-out-expo), color var(--dur-base) var(--ease-out-expo); }
.bqc__onglet:hover { background: var(--linen-deep); }
.bqc__onglet[aria-current] { background: var(--vin-700); color: var(--ivory); }
.bqc__onglet:focus-visible { outline: 2px solid var(--vin-700); outline-offset: 2px; }
.bqc__nombre { margin: 0; font-size: 0.8125rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bqc__grille { gap: 1.75rem var(--bq-ecart); }
@media (min-width: 900px) {
  .bqc__barre { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; margin-inline: 0; padding-inline: 0; }
  .bqc__onglets { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
  .bqc__grille { gap: 2.5rem var(--bq-ecart); }
}

/* ── La feuille « Ajout rapide » (Gymshark) : le produit, puis une ligne par taille, « Ajouter au panier ⊕ ».
   Téléphone : elle monte du bas ; plus large, une fenêtre au milieu. ── */
.cp-ajout { box-sizing: border-box; width: 100%; max-width: none; max-height: 88svh; margin: auto 0 0; padding: 0 0 calc(0.75rem + env(safe-area-inset-bottom)); overflow-y: auto; border: 0; border-radius: 22px 22px 0 0; background: var(--cream); color: var(--gray-700); }
.cp-ajout::backdrop { background: rgb(26 4 6 / .5); }
.cp-ajout *, .cp-ajout *::before { box-sizing: border-box; }
.cp-ajout__tete { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0.75rem 0.25rem 1.25rem; }
.cp-ajout__titre { margin: 0; font: 400 1.5rem/1.1 var(--font-display); color: var(--vin-700); }
.cp-ajout__produit { display: flex; align-items: center; gap: 1rem; padding: 0.5rem 1.25rem 1.125rem; }
.cp-ajout__photo { flex: none; width: 5.5rem; aspect-ratio: 1; border-radius: var(--radius); background: var(--linen-deep); object-fit: cover; }
.cp-ajout__nom { margin: 0; font: 500 0.9375rem/1.35 var(--font-body), sans-serif; }
.cp-ajout__prix { margin: 0.25rem 0 0; font: 700 0.9375rem/1.3 var(--font-body), sans-serif; color: var(--ink); }
.cp-ajout__sous-titre { margin: 0; padding: 0.875rem 1.25rem 0.5rem; border-top: 1px solid var(--gray-200); font: 700 0.75rem/1.2 var(--font-body), sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vin-700); }
.cp-ajout__tailles { margin: 0; padding: 0; list-style: none; }
.cp-ajout__taille { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 3.25rem; padding: 0 1.25rem; border: 0; border-bottom: 1px solid var(--gray-200); background: none; color: var(--gray-700); font: 600 1rem/1 var(--font-body), sans-serif; text-align: left; cursor: pointer; }
.cp-ajout__taille:hover { background: var(--linen-deep); }
.cp-ajout__taille:focus-visible { outline: 2px solid var(--vin-700); outline-offset: -2px; }
.cp-ajout__taille.is-epuisee { color: var(--ink-2); cursor: default; }
.cp-ajout__taille.is-epuisee:hover { background: none; }
.cp-ajout__taille.is-epuisee .cp-ajout__ajouter { font-weight: 500; }
.cp-ajout__ajouter { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--vin-700); }
.cp-ajout__ajouter svg { width: 1.125rem; height: 1.125rem; }
@media (min-width: 600px) {
  .cp-ajout { width: min(100% - 32px, 28rem); margin: auto; padding-bottom: 0.75rem; border-radius: 20px; }
}

/* ── Les moments : un instant du cours, et le produit qu'on y voit (leur « Votre style ») ── */
.bq-moments { padding-top: clamp(3.5rem, 9vw, 6rem); }
.bq-moments__liste { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: 0.875rem; margin: 0 calc(-1 * var(--bq-gouttiere)); padding: 0 var(--bq-gouttiere); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--bq-gouttiere); scrollbar-width: none; }
.bq-moments__liste::-webkit-scrollbar { display: none; }
.bq-moment { scroll-snap-align: start; }
.bq-moment__lien { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.bq-moment__photo { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-lg); background: var(--linen-deep); }
.bq-moment__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out-expo); }
.bq-moment__titre { margin-top: 0.875rem; font: 400 1.375rem/1.2 var(--font-display); color: var(--vin-700); }
.bq-moment__texte { margin-top: 0.25rem; font-size: 0.9375rem; line-height: 1.5; }
.bq-moment__produit { display: block; margin-top: 0.625rem; font: 600 0.875rem/1.4 var(--font-body), sans-serif; color: var(--vin-700); }
.bq-moment__fin { white-space: nowrap; }
.bq-moment__produit .bq-fleche { display: inline-block; margin-left: 0.375rem; vertical-align: -0.15em; }   /* collée au dernier mot (motif boutique) : un nom sur deux lignes garde sa flèche au bout */
a.bq-moment__lien:hover .bq-moment__photo img { transform: scale(1.03); }
a.bq-moment__lien:hover .bq-moment__produit { text-decoration: underline; text-underline-offset: 0.2em; }
a.bq-moment__lien:hover .bq-fleche { transform: translateX(3px); }
a.bq-moment__lien:focus-visible { outline: 2px solid var(--vin-700); outline-offset: 4px; border-radius: var(--radius-lg); }
@media (min-width: 900px) {
  .bq-moments__liste { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: auto; gap: var(--bq-ecart); margin-inline: 0; padding-inline: 0; overflow: visible; }
}

/* ── La fin : où la commande attend, sur le crème des murs ── */
.bq-fin { margin-top: clamp(3.5rem, 9vw, 6rem); padding-block: clamp(3rem, 8vw, 5rem); background: var(--linen-deep); }
.bq-fin__cadre { display: grid; gap: 1.75rem; align-items: center; }
.bq-fin__photo { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-lg); background: var(--cream); }
.bq-fin__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.bq-fin__texte .bq-titre { margin-bottom: 0.875rem; }
.bq-fin__texte p { max-width: 34rem; margin: 0; font-size: 1.0625rem; line-height: 1.6; }
.bq-fin__texte .bq-premier { margin-top: 1.5rem; font-size: 1rem; color: var(--ink); }
.bq-premier a { color: var(--vin-700); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
@media (min-width: 900px) {
  .bq-fin--photo .bq-fin__cadre { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; }
}

/* ── Au téléphone, d'après l'accueil mobile d'Alo : les moments en grille de deux, comme les best-sellers plus haut. ── */
@media (max-width: 899px) {
  .bq-moments .bq-titre { text-align: center; }

  /* Les moments en grille de deux (leurs « Tendances ») */
  .bq-moments__liste { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; gap: 1.5rem var(--bq-ecart); margin-inline: 0; padding-inline: 0; overflow: visible; }
  .bq-moment__titre { margin-top: 0.625rem; font-size: 1.0625rem; text-align: center; }
  .bq-moment__texte { display: none; }
  .bq-moment__produit { margin-top: 0.25rem; font-size: 0.75rem; text-align: center; }
}

/* ── La fiche d'un produit, d'après la maquette de Corentin (PREMIERE PAGE.pdf, page 2) ──
   Grand écran : la grande photo et ses vignettes dessous, puis le nom, le prix, la description, la couleur, la taille,
   le bouton et ses quatre pictos. Téléphone : nom et prix, PUIS les photos en carrousel, puis l'achat (Alo) ;
   .pf__infos s'efface pour que ses deux blocs encadrent la galerie. */
.pf { padding-block: clamp(0.75rem, 2vw, 1.25rem) clamp(2.5rem, 5vw, 3.5rem); }
.pf__ariane ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin: 0 0 1rem; padding: 0; list-style: none; font: 500 0.75rem/1.4 var(--font-body), sans-serif; color: var(--ink-2); }
.pf__ariane li + li::before { content: "›"; margin-right: 0.375rem; }
.pf__ariane a { display: inline-flex; align-items: center; min-height: 2.75rem; margin-block: -0.75rem; color: inherit; text-decoration: none; }   /* cible tactile de 44 px sans pousser la mise en page */
.pf__ariane a:hover { color: var(--vin-700); text-decoration: underline; text-underline-offset: 0.2em; }
.pf__ariane [aria-current] { color: var(--gray-700); }

.pf__grille { display: grid; gap: 1.25rem; }
.pf__infos { display: contents; }
.pf__tete { order: 1; }
.pf__galerie { order: 2; min-width: 0; }
.pf__achat { order: 3; }
.pf-caisse { order: 4; }
.pf__plus { order: 5; }

.pf__scene { position: relative; }
.pf__photos { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 0.75rem; margin-inline: calc(-1 * var(--bq-gouttiere)); padding-inline: var(--bq-gouttiere); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--bq-gouttiere); scrollbar-width: none; }
.pf__photos::-webkit-scrollbar { display: none; }
.pf__photo { position: relative; display: grid; place-items: center; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--linen-deep); scroll-snap-align: start; }
.pf__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf__agrandir { position: absolute; inset: 0; cursor: zoom-in; }
.pf__agrandir:focus-visible { outline: 2px solid var(--vin-700); outline-offset: -4px; border-radius: var(--radius); }
.pf__photo--vide .bq-produit__vide { width: 3rem; height: 3rem; }
/* Le compteur « 1 / 4 » sur la photo (Amazon, Shopify) : on sait combien il y en a, et où on en est. */
.pf__compte { position: absolute; right: 0.75rem; bottom: 0.75rem; padding: 0.3125rem 0.625rem; border-radius: var(--radius-pill); background: rgb(245 240 235 / 0.88); font: 600 0.75rem/1 var(--font-body), sans-serif; color: var(--ink); font-variant-numeric: tabular-nums; pointer-events: none; }
/* Les vignettes : en rangée sous la photo (Baymard : des vignettes, pas des points) ; au téléphone, la dernière coupée si elles débordent. */
.pf__vignettes { position: relative; display: flex; gap: 0.5rem; margin: 0.75rem calc(-1 * var(--bq-gouttiere)) 0; padding: 4px var(--bq-gouttiere); list-style: none; overflow-x: auto; scrollbar-width: none; }
.pf__vignettes::-webkit-scrollbar { display: none; }
.pf__vignettes li { flex: none; width: 4rem; }
.pf__vignette { display: block; aspect-ratio: 6 / 7; overflow: hidden; border: 1px solid var(--gray-200); border-radius: 8px; background: var(--linen-deep); transition: border-color var(--dur-fast) ease-out, box-shadow var(--dur-fast) ease-out; }
.pf__vignette img { display: block; width: 100%; height: 100%; object-fit: cover; }   /* la photo telle quelle, sans voile : c'est elle qui donne envie */
/* Le halo d'Amazon (bordure de couleur + lueur autour), en bordeaux : au survol, et sur la photo affichée. En ombre : le clic retire l'outline. */
.pf__vignette:hover, .pf__vignette[aria-current] { border-color: var(--vin-700); box-shadow: 0 0 4px 2px rgb(94 32 40 / 0.35); }
.pf__vignette:focus-visible { outline: 2px solid var(--vin-700); outline-offset: 2px; }

/* « Clique pour voir en grand », au bas de la photo (Amazon) : en grand écran seulement, là où il y a une souris. */
.pf__vue { display: none; }
@media (hover: hover) and (min-width: 900px) {
  .pf__vue { position: absolute; left: 50%; bottom: 0.875rem; z-index: 2; display: inline-flex; align-items: center; gap: 0.4375rem; padding: 0.4375rem 0.875rem; border-radius: var(--radius-pill); background: rgb(245 240 235 / 0.9); font: 600 0.75rem/1 var(--font-body), sans-serif; color: var(--ink); white-space: nowrap; transform: translateX(-50%); pointer-events: none; }
  .pf__vue svg { width: 0.875rem; height: 0.875rem; }
}

/* La vue complète (Amazon) : une fenêtre, la photo en grand à gauche, le nom et les vignettes à droite ;
   au téléphone, plein écran, les vignettes dessous. Un clic sur la photo zoome là où on a cliqué. */
.pf-loupe { box-sizing: border-box; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--cream); color: var(--gray-700); overflow: hidden; }
.pf-loupe::backdrop { background: rgb(26 4 6 / 0.55); }
.pf-loupe__cadre { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; }
.pf-loupe__fermer { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--linen-deep); color: var(--ink); cursor: pointer; }
.pf-loupe__fermer:hover { background: var(--gray-200); }
.pf-loupe__fermer:focus-visible { outline: 2px solid var(--vin-700); outline-offset: 2px; }
.pf-loupe__fermer svg { width: 18px; height: 18px; }
.pf-loupe__scene { position: relative; min-height: 0; overflow: hidden; background: var(--linen-deep); cursor: zoom-in; touch-action: pinch-zoom; }
.pf-loupe__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain;   /* la photo entière, jamais coupée */
  transition: transform var(--dur-base) var(--ease-out-expo); }
.pf-loupe__scene.is-zoom { cursor: zoom-out; }
.pf-loupe__scene.is-zoom .pf-loupe__img { transform: scale(2.2); transition: none; }
.pf-loupe__cote { padding: 0.875rem max(1rem, 4vw) calc(1rem + env(safe-area-inset-bottom)); }
.pf-loupe__titre { margin: 0 0 0.75rem; font: 500 0.9375rem/1.35 var(--font-body), sans-serif; color: var(--ink); }
.pf-loupe__vignettes { display: flex; gap: 0.625rem; margin: 0; padding: 4px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.pf-loupe__vignettes::-webkit-scrollbar { display: none; }
.pf-loupe__vignettes li { flex: none; width: 4rem; }
.pf-loupe__vignettes .pf__vignette { width: 100%; padding: 0; cursor: pointer; }
@media (min-width: 900px) {
  .pf-loupe { width: min(100% - 4rem, 82rem); height: min(100% - 4rem, 52rem); margin: auto; border-radius: var(--radius-lg); box-shadow: 0 2px 6px rgb(26 4 6 / .12), 0 32px 80px rgb(26 4 6 / .35); }
  .pf-loupe__cadre { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) 19rem; }
  .pf-loupe__cote { padding: 4rem 1.75rem 1.75rem; overflow-y: auto; }
  .pf-loupe__titre { margin-bottom: 1.25rem; font-size: 1.0625rem; }
  .pf-loupe__vignettes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .pf-loupe__vignettes li { width: auto; }
}
html:has(.pf-loupe[open]) { overflow: hidden; }

/* Les informations du produit en noir (demande de Corentin, 14 octobre 2026) ; le bordeaux reste aux cerclages et aux liens. */
.pf__pastille { margin-bottom: 0.5rem; }
/* Le nom plus gros et plus gras que celui d'Amazon (Arial 24 px, mesuré) : Manrope, la police de texte du site, parce que
   Marcellus n'a qu'une graisse (DESIGN.md : jamais de faux gras). */
.pf__titre { margin: 0; font: 600 1.625rem/1.3 var(--font-body), sans-serif; letter-spacing: -0.01em; text-wrap: pretty; color: var(--ink); }
.pf__prix { margin: 0.5rem 0 0; font: 400 1.75rem/1.2 var(--font-body), sans-serif; color: var(--ink); font-variant-numeric: tabular-nums; }   /* le prix d'Amazon : 28 px, sans gras */

/* Couleur et taille */
.pf__option { margin-top: 1.25rem; }
.pf__label { margin: 0 0 0.625rem; padding: 0; font: 600 0.875rem/1.3 var(--font-body), sans-serif; color: var(--ink); }
.pf__label strong { font-weight: 700; color: var(--ink); }   /* le nom de la couleur, en gras comme chez Amazon */
/* Les couleurs à la manière d'Amazon : une vignette encadrée par couleur, sa photo et son prix ; le même halo que les vignettes. */
.pf__coloris { display: flex; flex-wrap: wrap; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.pf-coloris { display: flex; flex-direction: column; align-items: center; width: 5.25rem; padding: 0.3125rem 0.3125rem 0.4375rem; border: 1px solid var(--gray-300); border-radius: 10px; background: var(--cream); color: inherit; text-decoration: none; transition: border-color var(--dur-fast) ease-out, box-shadow var(--dur-fast) ease-out; }
.pf-coloris__photo { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: var(--linen-deep); }
.pf-coloris__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-coloris__prix { margin-top: 0.375rem; font: 600 0.75rem/1.25 var(--font-body), sans-serif; text-align: center; color: var(--ink); font-variant-numeric: tabular-nums; }
.pf-coloris__prix del { display: block; font-weight: 400; color: var(--ink-2); }
.pf-coloris[aria-current] { border: 2px solid var(--vin-700); padding: calc(0.3125rem - 1px) calc(0.3125rem - 1px) calc(0.4375rem - 1px); }
a.pf-coloris:hover { border-color: var(--vin-700); box-shadow: 0 0 4px 2px rgb(94 32 40 / 0.35); }
a.pf-coloris:focus-visible { outline: 2px solid var(--vin-700); outline-offset: 2px; }
.pf__economie { margin: 0.25rem 0 0; font: 600 0.875rem/1.3 var(--font-body), sans-serif; color: var(--ink); }
/* À l'unité ou le lot : deux cartes à cocher, comme les couleurs (photo, nom, prix, ce que le lot fait gagner). */
.pf__formats { display: grid; gap: 0.5rem; min-width: 0; margin-inline: 0; padding: 0; border: 0; }
.pf__formats legend { float: left; width: 100%; }
.pf-format { position: relative; display: block; cursor: pointer; }
.pf-format input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.pf-format__corps { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem 0.5rem 0.5rem; border: 1px solid var(--gray-300); border-radius: 10px; background: var(--cream); transition: border-color var(--dur-fast) ease-out; }
.pf-format input:checked + .pf-format__corps { border: 2px solid var(--vin-700); padding: calc(0.5rem - 1px) calc(0.75rem - 1px) calc(0.5rem - 1px) calc(0.5rem - 1px); }
.pf-format input:focus-visible + .pf-format__corps { outline: 2px solid var(--vin-700); outline-offset: 2px; }
.pf-format:hover .pf-format__corps { border-color: var(--vin-700); }
.pf-format__photo { flex: none; width: 3rem; height: 3rem; overflow: hidden; border-radius: 6px; background: var(--linen-deep); }
.pf-format__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-format__texte { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.75rem; flex: 1; min-width: 0; }
.pf-format__nom { font: 600 0.9375rem/1.3 var(--font-body), sans-serif; color: var(--ink); }
.pf-format__prix { font: 700 0.9375rem/1.3 var(--font-body), sans-serif; color: var(--ink); font-variant-numeric: tabular-nums; }
.pf-format__economie { grid-column: 1 / -1; font: 500 0.8125rem/1.3 var(--font-body), sans-serif; color: var(--ink-2); }
.pf__barre { margin-left: 0.5rem; font-size: 0.6em; font-weight: 500; color: var(--ink-2); }
/* L'aperçu d'une autre couleur, posé sur la grande photo pendant le survol de sa vignette. */
.pf__apercu { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); pointer-events: none; }
.pf__apercu[hidden] { display: none; }
.pf__tailles { display: flex; flex-wrap: wrap; gap: 0.5rem; min-width: 0; margin: 0; padding: 0; border: 0; list-style: none; }
.pf__tailles legend { float: left; width: 100%; }   /* la légende au-dessus des tailles, pas dans la bordure */
.pf__taille { position: relative; }
.pf__taille input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.pf__taille span { display: inline-grid; place-items: center; min-width: 3.5rem; min-height: 2.75rem; padding: 0 0.875rem; border: 1px solid var(--gray-300); border-radius: 8px; font: 600 0.8125rem/1 var(--font-body), sans-serif; color: var(--ink); }
.pf__taille input:checked + span { border-color: var(--vin-700); box-shadow: inset 0 0 0 0.5px var(--vin-700); color: var(--ink); }
.pf__taille input:focus-visible + span { outline: 2px solid var(--vin-700); outline-offset: 2px; }
.pf__taille-unique { margin: 0; font: 700 0.9375rem/1.3 var(--font-body), sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.pf__taille-note { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--ink-2); }
.pf__erreur { margin: 0.5rem 0 0; font: 600 0.8125rem/1.3 var(--font-body), sans-serif; color: var(--vin-700); }
.pf__tailles.is-erreur .pf__taille span { border-color: var(--vin-700); }
/* Une taille épuisée : en pointillés et plus pâle, comme chez Amazon ; toujours choisissable, elle dit alors qu'elle est épuisée. */
.pf__taille--epuisee span { border-style: dashed; color: var(--ink-2); }
.pf__taille--epuisee input:checked + span { border-style: dashed; border-color: var(--vin-700); box-shadow: none; }

/* L'encadré d'achat, à la manière d'Amazon (demande de Corentin, 14 octobre 2026) : un cadre fin, le prix, le retrait à la
   place de leur livraison, le stock, le bouton orange d'Amazon, puis le vendeur et le paiement. Le jaune et l'orange
   sortent de la charte à dessein, comme le module de commande : ce sont les couleurs qu'on reconnaît pour acheter. */
.pf-caisse, .cp-panier { --amz-jaune: #FFD814; --amz-jaune-bord: #FCD200; --amz-jaune-survol: #F7CA00; --amz-orange: #FFA41C; --amz-orange-bord: #FF8F00; --amz-orange-survol: #FA8900; --amz-encre: #0F1111; }
.pf-caisse { margin-top: 1.5rem; padding: 1.125rem 1.125rem 1rem; border: 1px solid var(--gray-300); border-radius: 10px; background: var(--cream); }
.pf-caisse__prix { margin: 0; font: 700 1.625rem/1.1 var(--font-body), sans-serif; color: var(--amz-encre); font-variant-numeric: tabular-nums; }
.pf-caisse__prix del { margin-left: 0.375rem; font-size: 0.8125rem; font-weight: 400; color: var(--ink-2); }
.pf-caisse__retrait { margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.45; color: var(--amz-encre); }
.pf-caisse__lieu { display: flex; align-items: flex-start; gap: 0.375rem; margin: 0.5rem 0 0; font-size: 0.8125rem; line-height: 1.4; color: var(--ink-2); }
.pf-caisse__lieu svg { flex: none; width: 1rem; height: 1rem; margin-top: 0.0625rem; }
.pf-caisse__stock { margin: 0.75rem 0 0; font: 600 1.0625rem/1.3 var(--font-body), sans-serif; color: var(--ink); }
/* Le menu de quantité d'Amazon (« Quantité : 1 »), une pilule grise devenue crème */
.pf-caisse__qte { position: relative; display: flex; align-items: center; gap: 0.375rem; min-height: 2.25rem; margin-top: 0.75rem; padding: 0 2rem 0 0.875rem; border: 1px solid var(--gray-300); border-radius: 8px; background: var(--linen-deep); font-size: 0.875rem; color: var(--ink); box-shadow: 0 2px 5px rgb(26 4 6 / 0.08); }
.pf-caisse__qte select { flex: 1; min-height: 2.25rem; border: 0; background: transparent; font: 600 0.875rem/1 var(--font-body), sans-serif; color: var(--ink); appearance: none; cursor: pointer; }
.pf-caisse__qte::after { content: ""; position: absolute; right: 0.875rem; top: 50%; width: 0.4375rem; height: 0.4375rem; border: solid var(--ink); border-width: 0 1.5px 1.5px 0; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.pf-caisse__qte:focus-within { outline: 2px solid var(--amz-encre); outline-offset: 2px; }
/* Les deux boutons d'Amazon : jaune « Ajouter au panier », orange « Acheter cet article ». */
.pf__ajouter, .pf__acheter {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 2.75rem; margin-top: 0.875rem; padding: 0.5rem 1.25rem; border: 1px solid var(--amz-orange-bord); border-radius: var(--radius-pill);
  background: var(--amz-orange); color: var(--amz-encre); text-decoration: none; box-shadow: 0 2px 5px 0 rgb(213 217 217 / 0.5);
  font: 500 0.9375rem/1.25 var(--font-body), sans-serif;
  transition: background-color var(--dur-fast) ease-out;
}
.pf__acheter:hover { background: var(--amz-orange-survol); }
.pf__ajouter { border-color: var(--amz-jaune-bord); background: var(--amz-jaune); cursor: pointer; }
.pf__ajouter[hidden], .pf__acheter[hidden], .pf-barre__bouton[hidden] { display: none; }
.pf-caisse__stock.is-epuise { color: #B12704; }   /* le rouge d'Amazon pour « indisponible » : un état, pas une couleur de marque */
.pf-caisse__epuisee { margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.45; color: var(--amz-encre); }
.pf-caisse__epuisee[hidden] { display: none; }
.pf__ajouter:hover { background: var(--amz-jaune-survol); }
.pf__ajouter + .pf__acheter { margin-top: 0.625rem; }
.pf__ajouter:active, .pf__acheter:active { transform: scale(0.98); }
.pf__ajouter:focus-visible, .pf__acheter:focus-visible { outline: 2px solid var(--amz-encre); outline-offset: 2px; }
.pf__acheter[aria-busy], .cp-panier__payer[aria-busy] { opacity: 0.7; cursor: progress; }
.pf-caisse__infos { display: grid; gap: 0.3125rem; margin: 0.875rem 0 0; font-size: 0.75rem; line-height: 1.35; }
.pf-caisse__infos div { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: 0.5rem; }
.pf-caisse__infos dt { color: var(--ink-2); }
.pf-caisse__infos dd { margin: 0; color: var(--amz-encre); }
.pf-caisse .pf__etat { margin-top: 0; }
.pf__etat {
  display: flex; align-items: center; justify-content: center; min-height: 3.375rem; margin: 1.5rem 0 0; border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1.5px var(--gray-300); font: 700 0.8125rem/1.25 var(--font-body), sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2);
}
.pf__etat--gagne { box-shadow: none; background: var(--linen-deep); font: 400 1.125rem/1.3 var(--font-display); letter-spacing: 0; text-transform: none; color: var(--vin-700); text-align: center; padding: 0.75rem 1.25rem; }   /* l'objet qui se gagne : une annonce, pas un bouton grisé */

/* « À prendre avec » : un produit, une ligne, sous le bouton */
.pf-avec { margin-top: 1.5rem; }
.pf-avec__lien { display: flex; align-items: center; gap: 0.875rem; padding: 0.625rem 1rem 0.625rem 0.625rem; border: 1px solid var(--gray-200); border-radius: 12px; color: var(--ink); text-decoration: none; transition: border-color var(--dur-base) var(--ease-out-expo); }
.pf-avec__lien:hover { border-color: var(--vin-700); }
.pf-avec__lien:hover .bq-fleche { transform: translateX(3px); }
.pf-avec__lien:focus-visible { outline: 2px solid var(--vin-700); outline-offset: 2px; }
.pf-avec__photo { position: relative; flex: none; width: 3.5rem; height: 3.5rem; overflow: hidden; border-radius: 8px; background: var(--linen-deep); }
.pf-avec__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-avec__texte { display: flex; flex: 1; flex-direction: column; gap: 0.125rem; min-width: 0; }
.pf-avec__nom { font: 500 0.875rem/1.35 var(--font-body), sans-serif; color: var(--gray-700); }
.pf-avec__prix { font: 700 0.875rem/1.3 var(--font-body), sans-serif; color: var(--ink); font-variant-numeric: tabular-nums; }

/* « Détails du produit » et « À propos de cet article » (Amazon), sous les options : un tableau, puis des puces. */
.pf__sous-titre { margin: 0 0 0.75rem; font: 700 1.125rem/1.3 var(--font-body), sans-serif; color: var(--ink); }
.pf-faits, .pf-apropos { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--gray-200); }
.pf-faits dl { display: grid; gap: 0.5rem; margin: 0; }
.pf-faits dl div { display: grid; grid-template-columns: minmax(7rem, 38%) minmax(0, 1fr); gap: 1rem; font-size: 0.875rem; line-height: 1.45; }
.pf-faits dt { font-weight: 700; color: var(--ink); }
.pf-faits dd { margin: 0; color: var(--ink); }
/* Ce qui manque encore (visible seulement connectée au wp-admin) : un signal, pas un style de la charte. */
.pf-faits__manque dd { font-weight: 600; color: #B12704; }
.pf-faits__note { margin: 0.625rem 0 0; font-size: 0.75rem; color: var(--ink-2); }
.pf-apropos ul { display: grid; gap: 0.375rem; margin: 0; padding-left: 1.125rem; list-style: disc; font-size: 0.9375rem; line-height: 1.5; color: var(--ink); }
.pf-apropos > :not(h2):not(ul) { margin: 0.75rem 0 0; font-size: 0.9375rem; line-height: 1.55; }
.pf__premier { margin-top: 1.25rem; font-size: 0.875rem; }

@media (min-width: 900px) {
  /* La grande photo et ses vignettes à gauche, l'achat à droite, qui reste en place. */
  /* La colonne des photos : la photo carrée et ses vignettes tiennent dans la fenêtre (hauteur moins la barre, le fil et la rangée), sans dépasser 56 % ; l'achat prend le reste. */
  .pf__grille { grid-template-columns: minmax(0, min(56%, max(24rem, calc(100svh - var(--cp-nav-h, 92px) - 12.5rem)))) minmax(0, 1fr); gap: clamp(2rem, 3.5vw, 3.5rem); align-items: start; }
  .pf__galerie { order: 0; }   /* l'ordre du téléphone (nom et prix d'abord) ne vaut plus : photos à gauche */
  /* Les vignettes en rangée sous la grande photo, comme au téléphone (demande de Corentin, d'après Amazon) ; la photo carrée pour que tout tienne dans la fenêtre. */
  .pf__vignettes { flex-wrap: wrap; gap: 0.625rem; margin-inline: -4px; padding-inline: 4px; overflow: visible; }
  .pf__vignettes li { width: 4.75rem; }
  .pf__photos { gap: 0; margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
  .pf__photo { aspect-ratio: 1; }
  .pf__compte { display: none; }   /* les vignettes, dessous, disent déjà où on en est */
  .pf__infos { display: block; order: 1; position: sticky; top: calc(var(--cp-nav-h, 92px) + 1.5rem); padding-top: 0.5rem; }
  .pf__achat { margin-top: 1rem; }
}
/* Les trois colonnes d'Amazon : les photos, le produit, l'encadré d'achat qui reste en place. */
@media (min-width: 1200px) {
  .pf__infos { position: static; display: grid; grid-template-columns: minmax(0, 1fr) 15.5rem; grid-template-rows: auto auto 1fr; column-gap: 1.5rem; align-items: start; }
  .pf__tete, .pf__achat, .pf__plus { grid-column: 1; }
  .pf-caisse { grid-column: 2; grid-row: 1 / -1; position: sticky; top: calc(var(--cp-nav-h, 92px) + 1.5rem); margin-top: 0; }
}

/* La barre « Commander » collée en bas de l'écran (Alo), au téléphone ; boutique.js la montre tant que le vrai bouton n'est pas dans la vue. */
.pf-barre {
  position: fixed; inset: auto 0 0; z-index: 40; display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem max(1rem, 4.2vw) calc(0.625rem + env(safe-area-inset-bottom));
  background: var(--cream); box-shadow: 0 -1px 0 var(--gray-200), 0 -10px 28px oklch(34% 0.09 15.6 / 0.12);
  transform: translateY(110%); transition: transform var(--dur-base) var(--ease-out-expo);
}
.pf-barre.is-visible { transform: none; }
.pf-barre.is-epuisee { display: none; }   /* une taille épuisée choisie : plus rien à y acheter */
.pf-barre__photo { flex: none; width: 2.75rem; height: 2.75rem; overflow: hidden; border-radius: 8px; background: var(--linen-deep); }
.pf-barre__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-barre__texte { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.pf-barre__nom { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font: 400 0.9375rem/1.2 var(--font-display); color: var(--vin-700); }   /* le nom court, sur deux lignes au plus : coupé à une ligne, « Chaussettes borde… » */
.pf-barre__prix { font: 600 0.875rem/1.3 var(--font-body), sans-serif; color: var(--ink); }
.pf-barre__bouton { flex: none; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.125rem; border: 1px solid #FCD200; border-radius: var(--radius-pill); background: #FFD814; color: #0F1111; text-decoration: none; font: 500 0.875rem/1 var(--font-body), sans-serif; cursor: pointer; }   /* le jaune de « Ajouter au panier » dans l'encadré d'achat */
@media (min-width: 900px) {
  .pf-barre { display: none; }
}

/* ── La bande sous la fiche (maquette) : photo, phrase à la main sur le crème, photo ── */
.pf-bande { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-bande__photo { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; background: var(--linen-deep); }
.pf-bande__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-bande__papier { grid-column: 1 / -1; order: -1; display: grid; justify-items: center; align-content: center; gap: 0.75rem; padding: 2.5rem 1.5rem; background: var(--linen-deep); color: var(--vin-700); }
.pf-bande__phrase { margin: 0; transform: rotate(-3deg); font-family: "Homemade Apple", cursive; font-size: clamp(1.125rem, 4.6vw, 1.375rem); line-height: 1.75; text-align: center; }
.pf-bande__coeur { width: 2rem; height: 2rem; }
@media (min-width: 900px) {
  .pf-bande { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .pf-bande__photo { aspect-ratio: 4 / 3; }
  .pf-bande__papier { grid-column: auto; order: 0; padding: 2rem; }
  .pf-bande__phrase { font-size: clamp(1.25rem, 1.9vw, 1.75rem); }
}

/* ── Tu pourrais aussi aimer, à la manière d'Amazon : les cartes des best-sellers (classes bqb-), sans bouton ── */
.bq-autres { padding-bottom: clamp(4rem, 9vw, 6rem); }

/* ── Le panier (inc/boutique-panier.php, assets/js/panier.js) : l'icône dans la barre, dans la boutique seulement ── */
.cp-nav__panier { position: relative; flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-left: 1.25rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--vin-700); cursor: pointer; }
.cp-nav__panier svg { width: 1.625rem; height: 1.625rem; }
.cp-nav__panier:hover { background: rgb(94 32 40 / 0.08); }
.cp-nav__panier:focus-visible { outline: 2px solid var(--vin-700); outline-offset: 2px; }
.cp-nav__panier-compte { position: absolute; top: 0.125rem; right: 0.0625rem; display: grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3125rem; border-radius: var(--radius-pill); background: var(--vin-700); color: var(--ivory); font: 700 0.6875rem/1 var(--font-body), sans-serif; font-variant-numeric: tabular-nums; }
.cp-nav__panier-compte[hidden] { display: none; }
/* Menu ouvert au téléphone (fond lie de vin) : « Boutique » et le sac passent en clair. Le bordeaux de la page en cours ne vaut que sur la barre crème. */
:is(.page-template-page-boutique, .single-produit, .post-type-archive-produit, .tax-produit_rayon) .cp-nav__panneau .cp-nav__lien[href$="/boutique/"],
.cp-nav.is-ouvert .cp-nav__panier { color: var(--wp--preset--color--davos); }
@media (max-width: 1199px) {
  .cp-nav__panier { position: absolute; right: 0.5rem; top: 50%; z-index: 2; margin: 0; transform: translateY(-50%); }
}

/* Le volet : il glisse de la droite (Shopify), les articles, le sous-total, le bouton jaune d'Amazon. */
.cp-panier { box-sizing: border-box; position: fixed; inset: 0 0 0 auto; width: min(100%, 26rem); max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--cream); color: var(--gray-700); box-shadow: -24px 0 60px rgb(26 4 6 / 0.25); transform: translateX(100%); transition: transform 0.35s var(--ease-out-expo), overlay 0.35s allow-discrete, display 0.35s allow-discrete; }
.cp-panier[open] { display: flex; flex-direction: column; transform: none; }
@starting-style { .cp-panier[open] { transform: translateX(100%); } }
.cp-panier::backdrop { background: rgb(26 4 6 / 0.45); }
.cp-panier * { box-sizing: border-box; }
.cp-panier__tete { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1rem 1rem 1.25rem; border-bottom: 1px solid var(--gray-200); }
.cp-panier__titre { margin: 0; font-family: var(--font-display); font-size: 1.625rem; line-height: 1.1; color: var(--vin-700); }
.cp-panier__fermer { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.cp-panier__fermer:hover { background: var(--linen-deep); }
.cp-panier__fermer svg { width: 18px; height: 18px; }
.cp-panier__vide { padding: 2rem 1.25rem 0.5rem; font-size: 1rem; }
.cp-panier__vide p { margin: 0; }
.cp-panier__continuer { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; margin-top: 1rem; padding: 0 1.25rem; border: 1px solid var(--gray-300); border-radius: var(--radius-pill); background: var(--cream); color: var(--amz-encre); font: 500 0.9375rem/1.2 var(--font-body), sans-serif; text-decoration: none; }
.cp-panier__continuer:hover { background: var(--linen-deep); }
.cp-panier__continuer:focus-visible { outline: 2px solid var(--amz-encre); outline-offset: 2px; }
/* Les fiches d'un lot prises une par une : le lot à leur place. */
.cp-panier__lot { display: flex; align-items: center; gap: 0.875rem; margin: 0.25rem 1.25rem 0.5rem; padding: 0.75rem 0.875rem; border: 1px solid var(--gray-300); border-radius: 10px; background: var(--linen-deep); }
.cp-panier__lot[hidden] { display: none; }
.cp-panier__lot-texte { flex: 1; margin: 0; font: 600 0.875rem/1.4 var(--font-body), sans-serif; color: var(--amz-encre); text-wrap: pretty; }
.cp-panier__lot-bouton { flex: none; min-height: 2.25rem; padding: 0 1rem; border: 1px solid var(--amz-jaune-bord); border-radius: var(--radius-pill); background: var(--amz-jaune); color: var(--amz-encre); font: 500 0.8125rem/1.2 var(--font-body), sans-serif; cursor: pointer; }
.cp-panier__lot-bouton:hover { background: var(--amz-jaune-survol); }
.cp-panier__lot-bouton:focus-visible { outline: 2px solid var(--amz-encre); outline-offset: 2px; }
.cp-panier__vide[hidden], .cp-panier__pied[hidden] { display: none; }
.cp-panier__corps { flex: 1; min-height: 0; overflow-y: auto; }   /* les articles et les suggestions défilent ; le sous-total reste en bas */
.cp-panier__lignes { margin: 0; padding: 0.5rem 1.25rem; list-style: none; }
/* « Ajouté au panier », comme Amazon et Alo : la coche, juste après un ajout */
.cp-panier__ajoute { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.875rem 1.25rem 0.25rem; font: 700 1rem/1.3 var(--font-body), sans-serif; color: var(--ink); }
.cp-panier__ajoute[hidden] { display: none; }
.cp-panier__ajoute svg { flex: none; width: 1.25rem; height: 1.25rem; color: #067D62; }   /* le vert de la coche d'Amazon : un état, pas une couleur de marque */
/* Ce qui va avec : une rangée de petites cartes, juste au-dessus du sous-total */
.cp-panier__suggestions { padding: 1rem 1.25rem 1.25rem; }
.cp-panier__suggestions[hidden] { display: none; }
.cp-panier__sous-titre { margin: 0 0 0.75rem; font: 700 0.9375rem/1.3 var(--font-body), sans-serif; color: var(--ink); }
.cp-suggestions { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 1.25rem) / 2.35); gap: 0.625rem; margin: 0 -1.25rem; padding: 0 1.25rem 0.25rem; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1.25rem; scrollbar-width: none; }
.cp-suggestions::-webkit-scrollbar { display: none; }
.cp-suggestion { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; scroll-snap-align: start; }
.cp-suggestion__photo { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: var(--linen-deep); }
.cp-suggestion__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cp-suggestion__nom { display: -webkit-box; margin-top: 0.25rem; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font: 500 0.8125rem/1.3 var(--font-body), sans-serif; color: var(--amz-encre); text-decoration: none; }
.cp-suggestion__nom:hover { text-decoration: underline; }
.cp-suggestion__prix { font: 700 0.875rem/1.3 var(--font-body), sans-serif; color: var(--amz-encre); font-variant-numeric: tabular-nums; }
.cp-suggestion__ajouter { display: flex; align-items: center; justify-content: center; min-height: 2.25rem; margin-top: auto; padding: 0 0.75rem; border: 1px solid var(--amz-jaune-bord); border-radius: var(--radius-pill); background: var(--amz-jaune); color: var(--amz-encre); font: 500 0.8125rem/1.2 var(--font-body), sans-serif; text-align: center; text-decoration: none; cursor: pointer; }
.cp-suggestion__ajouter:hover { background: var(--amz-jaune-survol); }
.cp-suggestion__ajouter--taille { border-color: var(--gray-300); background: var(--cream); }
.cp-suggestion__ajouter--taille:hover { background: var(--linen-deep); }
.cp-suggestion__ajouter:focus-visible { outline: 2px solid var(--amz-encre); outline-offset: 2px; }
.cp-ligne { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.875rem; padding: 0.875rem 0; border-bottom: 1px solid var(--gray-200); }
.cp-ligne__photo { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: var(--linen-deep); }
.cp-ligne__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cp-ligne__corps { display: flex; flex-direction: column; gap: 0.1875rem; min-width: 0; }
.cp-ligne__nom { font: 500 0.875rem/1.35 var(--font-body), sans-serif; color: var(--amz-encre); text-decoration: none; }
.cp-ligne__nom:hover { text-decoration: underline; }
.cp-ligne__taille { font-size: 0.8125rem; color: var(--ink-2); }
.cp-ligne__taille:empty { display: none; }
/* La taille modifiable : « Taille » et un petit menu, à la place du texte. */
.cp-ligne__taille-choix { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--ink-2); }
.cp-ligne__taille-choix[hidden] { display: none; }
.cp-ligne__taille-choix select { min-height: 2rem; padding: 0 1.75rem 0 0.625rem; border: 1px solid var(--gray-300); border-radius: 8px; background: var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5l3-3' fill='none' stroke='%230F1111' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.5rem center / 0.75rem; color: var(--amz-encre); font: 600 0.8125rem/1 var(--font-body), sans-serif; appearance: none; cursor: pointer; }
.cp-ligne__taille-choix select:focus-visible { outline: 2px solid var(--amz-encre); outline-offset: 2px; }
.cp-ligne__prix { font: 700 0.9375rem/1.3 var(--font-body), sans-serif; color: var(--amz-encre); font-variant-numeric: tabular-nums; }
.cp-ligne__actions { display: flex; align-items: center; gap: 1rem; margin-top: 0.375rem; }
/* Le compteur de quantité d'Amazon : une pilule cerclée de jaune, − n + */
.cp-ligne__qte { display: inline-flex; align-items: center; border: 2px solid var(--amz-jaune); border-radius: var(--radius-pill); }
.cp-ligne__qte button { display: grid; place-items: center; width: 2.25rem; height: 2rem; padding: 0; border: 0; background: none; color: var(--amz-encre); font: 600 1.125rem/1 var(--font-body), sans-serif; cursor: pointer; }
.cp-ligne__qte button:disabled { opacity: 0.3; cursor: default; }
.cp-ligne__qte span { min-width: 1.5rem; text-align: center; font: 700 0.875rem/1 var(--font-body), sans-serif; font-variant-numeric: tabular-nums; }
.cp-ligne__retirer { min-height: 2rem; padding: 0; border: 0; background: none; font-size: 0.8125rem; color: var(--vin-700); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.cp-panier__pied { padding: 1rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--gray-200); background: var(--linen-deep); }
.cp-panier__total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-size: 1rem; color: var(--amz-encre); }
.cp-panier__total strong { font-size: 1.375rem; font-variant-numeric: tabular-nums; }
.cp-panier__retrait { margin: 0.375rem 0 0; font-size: 0.8125rem; color: var(--ink-2); }
.cp-panier__erreur { margin: 0.625rem 0 0; font: 600 0.8125rem/1.4 var(--font-body), sans-serif; color: var(--vin-700); }
.cp-panier__erreur[hidden] { display: none; }
.cp-panier__payer { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 2.875rem; margin-top: 0.875rem; padding: 0.5rem 1.25rem; border: 1px solid var(--amz-jaune-bord); border-radius: var(--radius-pill); background: var(--amz-jaune); color: var(--amz-encre); font: 500 0.9375rem/1.25 var(--font-body), sans-serif; cursor: pointer; }
.cp-panier__payer:hover { background: var(--amz-jaune-survol); }
.cp-panier__payer:focus-visible { outline: 2px solid var(--amz-encre); outline-offset: 2px; }
.cp-panier__securite { margin: 0.5rem 0 0; font-size: 0.75rem; text-align: center; color: var(--ink-2); }

/* Le merci, au retour de Stripe */
.cp-merci { box-sizing: border-box; width: min(100% - 32px, 26rem); margin: auto; padding: 2rem 1.75rem 1.5rem; border: 0; border-radius: 20px; background: var(--cream); color: var(--gray-700); text-align: center; box-shadow: 0 2px 6px rgb(26 4 6 / .12), 0 32px 80px rgb(26 4 6 / .35); }
.cp-merci::backdrop { background: rgb(26 4 6 / 0.5); }
.cp-merci__titre:focus { outline: none; }   /* le focus se pose sur le titre à l'ouverture (lecteurs d'écran), sans anneau */
.cp-merci__titre { margin: 0; font-family: var(--font-display); font-size: 2rem; color: var(--vin-700); }
.cp-merci__texte { margin: 0.75rem 0 0; font-size: 1rem; line-height: 1.55; text-wrap: pretty; }
.cp-merci form { margin: 1.5rem 0 0; }
.cp-merci__recap { margin: 1rem 0 0; padding: 0.875rem 1rem; border-radius: 12px; background: var(--linen-deep); list-style: none; font: 600 0.9375rem/1.45 var(--font-body), sans-serif; color: var(--ink); text-align: left; }
.cp-merci__recap[hidden] { display: none; }
.cp-merci__numero { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--gray-700); }   /* à citer si elle écrit */
.cp-merci__numero[hidden] { display: none; }
.cp-merci__cours { display: flex; align-items: center; justify-content: center; min-height: 2.875rem; margin-top: 1.5rem; padding: 0 1rem; border-radius: var(--radius-pill); background: var(--vin-700); color: var(--ivory); font: 700 0.75rem/1.2 var(--font-body), sans-serif; letter-spacing: 0.06em; text-align: center; text-transform: uppercase; text-decoration: none; }
.cp-merci__cours:focus-visible, .cp-merci__ok:focus-visible { outline: 2px solid var(--vin-700); outline-offset: 2px; }
.cp-merci .cp-merci__cours + form { margin-top: 0.75rem; }
.cp-merci__ok.cp-merci__ok--second { background: none; color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; letter-spacing: 0; text-transform: none; font-weight: 600; font-size: 0.9375rem; }
.cp-merci__ok { min-height: 2.875rem; padding: 0 2rem; border: 0; border-radius: var(--radius-pill); background: var(--vin-700); color: var(--ivory); font: 700 0.8125rem/1 var(--font-body), sans-serif; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .bq-produit__img, .bq-moment__photo img, .bq-fleche, .bqh__bouton, .bqr__photo img, .pf__acheter, .pf-barre, .bq-offrir, .bq-offrir__fermer, .pf__vignette, .pf-coloris, .pf-avec__lien, .pf-loupe__img, .cp-panier, .bq-ajout__sac, .bqc__onglet, .pf-format__corps { transition: none; }
  a.bq-moment__lien:hover .bq-moment__photo img, a.bq-moment__lien:hover .bq-fleche, .pf__acheter:active, .pf-avec__lien:hover .bq-fleche { transform: none; }
}

/* ── La page Boutique tout en Manrope (Corentin, 17 octobre 2026) : les titres qui étaient en Marcellus passent en Manrope gras,
   comme le haut. Seulement sur cette page ; les fiches et la collection gardent la charte. ── */
.page-template-page-boutique :is(.bqr__nom, .bqb__titre, .bq-titre, .bq-moment__titre, .cp-panier__titre, .cp-ajout__titre) { font-family: var(--font-body), sans-serif; font-weight: 700; }
/* Sous le haut, le texte de la page Boutique en noir (Corentin, 17 octobre 2026) : titres, noms, prix, phrases et liens des
   rayons, best-sellers, moments et de la fin. La pastille (« Le duo ») et l'ajout rapide gardent leurs couleurs. */
.page-template-page-boutique :is(.bqr, .bqb, .bq-moments, .bq-fin) :not(.bq-pastille, .bq-ajout, .bq-ajout *) { color: #000; }
/* Et dans toute la boutique (page, collection, fiches, panier, ajout rapide), le texte qui était en bordeaux passe en noir.
   Restent en couleur : ce qui est écrit SUR un fond coloré (pastille, onglet choisi, boutons pleins). */
:is(.page-template-page-boutique, .single-produit, .post-type-archive-produit, .tax-produit_rayon) :is(
  .cp-panier__titre, .cp-ligne__retirer, .cp-ajout__titre, .cp-ajout__sous-titre, .cp-ajout__ajouter,
  .bqc__titre, .bqc__onglet:not([aria-current]), .bqb__titre, .bqb__tout, .bq-premier a, .pf__erreur, .pf-barre__nom, .pf-bande__phrase,
  .bq-produit__lien:hover .bq-produit__nom, .pf__ariane a:hover
) { color: #000; }