/* Rose d'Auxois · boutique lue dans donnees/boutique.json (19/10/2026) :
   grille qui accepte n'importe quel nombre de produits, choix du poids, promotions, lots,
   livraison offerte. Chargée après styles.css. */

[hidden] { display: none !important; }

/* Nos spécialités : autant de cartes que de produits en ligne, dernière rangée centrée */
.produits { display: flex; flex-wrap: wrap; justify-content: center; }
.produits[aria-busy] { min-height: 520px; }
.produits > .produit { flex: 0 1 calc((100% - 56px) / 3); min-width: 0; }
.produit--vedette { display: none; } /* le coffret a son propre bloc sur grand écran */
.produit__pousse { flex: 1; }
.produit h3 { text-wrap: balance; }
.produit__desc, .produit__desc-en { text-wrap: pretty; }
.produit__tarif { align-self: stretch; display: flex; flex-direction: column; align-items: center; }
.produit .prix-bloc { display: flex; flex-direction: column; align-items: center; }
.produit .prix { margin: 16px 0 12px; }
.produit .prix-bloc .promo-tag { order: -1; margin: 14px 0 -8px; }

@media (max-width: 959px) {
  .produits > .produit { flex-basis: calc((100% - 20px) / 2); }
  .produit--vedette { display: flex; }
}
@media (max-width: 639px) {
  .produits[aria-busy] { min-height: 640px; }
  .produits > .produit { flex-basis: calc((100% - 12px) / 2); }
  .produit__pousse { display: none; }
  .produit__tarif { flex: 1; }
  .produit .promo-tag__fin { display: none; }
  .produit .prix { margin: 4px 0 10px; }
  .produit .prix-bloc .promo-tag { margin: 4px 0 -2px; padding: 3px 6px 2px; font-size: 12.5px; letter-spacing: .03em; }
  .produit .ra-btn { font-size: 12.5px; letter-spacing: .04em; padding: 4px 6px; line-height: 1.2; }
}

/* Prix barré et étiquette de promotion */
.prix-bloc { display: inline-flex; flex-direction: column; align-items: center; }
.prix__avant { margin-right: 6px; font-size: .78em; font-weight: 500; color: var(--gris); text-decoration-thickness: 1px; }
.promo-tag {
  font-family: var(--f-titre); font-weight: 600; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--creme); background: var(--bordeaux); padding: 4px 10px 3px; border-radius: 2px; line-height: 1.3; text-align: center;
}

/* Menus déroulants dans la charte (poids des éclats, jour de retrait) ----------------------------
   Le <select> natif reste dans la page, caché : c'est lui qui porte la valeur (js/site.js, habiller).
   Fermé : un bouton crème au filet rose, le libellé en Cinzel, la valeur en Garamond ; rien n'y est jamais coupé,
   la valeur passe sur deux lignes s'il le faut. Ouvert : une petite carte de pâtisserie, chaque poids et son prix
   reliés par des points, le choix marqué d'un cœur. */
.deroulant {
  position: relative; width: 100%;
  font-family: var(--f-texte); font-size: 19px; font-style: normal; letter-spacing: 0; text-transform: none; color: var(--titre); text-align: left;
}
.deroulant__natif {
  position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important;
  margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none;
}
.deroulant__bouton {
  display: flex; align-items: center; column-gap: 12px; min-height: 46px; padding: 3px 14px 3px 16px;
  background: var(--rose-pale); border: 1px solid var(--filet); border-radius: 2px; cursor: pointer;
  line-height: 1.2; -webkit-user-select: none; user-select: none; touch-action: manipulation;
  transition: border-color .2s ease, box-shadow .2s ease;
}
@media (hover: hover) {
  .deroulant__bouton:hover { border-color: var(--bordeaux-en); }
}
.deroulant__bouton:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 3px; }
.deroulant__bouton.par-pointeur:focus-visible { outline: 0; }
.deroulant.est-ouvert .deroulant__bouton { border-color: var(--bordeaux); box-shadow: inset 0 0 0 1px var(--bordeaux); }
.deroulant__libelle {
  flex: none; align-self: stretch; display: flex; align-items: center; padding: 2px 12px 0 0; margin: 6px 0;
  border-right: 1px solid var(--filet-l);
  font-family: var(--f-titre); font-weight: 600; font-size: 14px; letter-spacing: .06em; color: var(--bordeaux-en);
}
/* Date à gauche, horaires à droite ; pas la place : les horaires passent dessous, à gauche */
.deroulant__valeur { flex: 1 1 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: 10px; padding: 4px 0; }
.deroulant__valeur .deroulant__texte { overflow-wrap: break-word; }
.deroulant__valeur .deroulant__detail { font-size: 16px; font-style: italic; color: var(--gris); }
.deroulant__fleche { flex: none; margin-left: auto; color: var(--bordeaux); transition: transform .2s var(--ease); }
.deroulant.est-ouvert .deroulant__fleche { transform: rotate(180deg); }

.deroulant__liste {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 100%; width: max-content;
  margin: 0; padding: 6px; list-style: none; overflow-y: auto; overscroll-behavior: contain;
  background: var(--rose-pale); border: 1px solid var(--filet); border-radius: 2px;
  box-shadow: 0 22px 40px -22px rgba(74, 6, 22, .5), 0 2px 8px -4px rgba(74, 6, 22, .16);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
.deroulant.vers-le-haut .deroulant__liste { top: auto; bottom: calc(100% + 6px); transform: translateY(4px); }
.deroulant.est-ouvert .deroulant__liste { opacity: 1; transform: none; }
.deroulant__option {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px 7px 10px;
  border-radius: 2px; cursor: pointer; line-height: 1.2;
  -webkit-user-select: none; user-select: none;
}
.deroulant__option .deroulant__texte { flex: none; white-space: nowrap; }
.deroulant__option .deroulant__detail { flex: none; white-space: nowrap; }
.deroulant__option + .deroulant__option { margin-top: 1px; }
.deroulant__option.est-actif { background: rgba(110, 10, 34, .07); }
.deroulant__option[aria-selected="true"] .deroulant__texte { font-weight: 600; color: var(--bordeaux); }
.deroulant__option[aria-disabled="true"] { opacity: .45; cursor: default; }
.deroulant__marque {
  flex: none; width: 12px; display: flex; color: var(--bordeaux);
  opacity: 0; transform: scale(.5); transition: opacity .15s ease, transform .15s var(--ease);
}
.deroulant__option[aria-selected="true"] .deroulant__marque { opacity: 1; transform: none; }
.deroulant__points { flex: 1 1 0; min-width: 24px; height: 0; margin-top: .62em; border-bottom: 2px dotted rgba(110, 10, 34, .26); }
.deroulant__option .deroulant__detail { text-align: right; font-size: 18px; color: var(--titre); font-variant-numeric: lining-nums tabular-nums; }
.deroulant__detail s { margin-right: 4px; font-size: .85em; color: var(--gris); }
.deroulant--horaires .deroulant__option .deroulant__detail { font-size: 17px; font-style: italic; color: var(--gris); }

/* Choix du poids sur les cartes « Nos spécialités » */
.produit__choix { width: 100%; max-width: 250px; margin: 16px auto 0; }
.produit__unite { margin-top: 12px; font-size: 16px; font-style: italic; color: var(--gris); }
@media (max-width: 639px) {
  .produit__choix { max-width: none; margin-top: 6px; padding: 0 2px; }
  .produit__choix .deroulant { font-size: 17px; }
  .produit__choix .deroulant__bouton { min-height: 44px; column-gap: 8px; padding: 2px 10px; }
  .produit__choix .deroulant__libelle { padding-right: 8px; font-size: 12.5px; letter-spacing: .04em; }
  .produit__unite { margin-top: 2px; font-size: 14px; }
}

/* Carte étroite : le libellé « Poids » passe au-dessus de la valeur, dans le bouton (rien n'est coupé, même avec
   un espacement du texte agrandi) */
.produits .produit__choix { container-type: inline-size; }
@container (max-width: 179px) {
  .deroulant__bouton { flex-wrap: wrap; padding-top: 5px; padding-bottom: 3px; }
  .deroulant__libelle { flex: 1 0 100%; align-self: auto; margin: 0; padding: 0; border-right: 0; line-height: 1.2; }
  .deroulant__valeur { padding: 0 0 2px; }
}

/* Pas la place sur une ligne (ou complément long) : le complément passe sous le texte, en second plan */
.deroulant--empile .deroulant__option { flex-wrap: wrap; row-gap: 0; }
.deroulant--empile .deroulant__points { display: none; }
.deroulant--empile .deroulant__option .deroulant__texte { flex: 1 1 auto; white-space: normal; }
.deroulant--empile .deroulant__option .deroulant__detail { flex: 1 0 100%; white-space: normal; padding-left: 22px; text-align: left; font-size: 16px; font-style: italic; color: var(--gris); }
.deroulant--long .deroulant__valeur .deroulant__detail { flex-basis: 100%; font-size: 15px; }

/* Champ « Jour de retrait » (panier) : même hauteur et même fond que les autres champs ; la colonne du formulaire
   ne s'élargit pas pour un texte long : la date et les horaires passent sur deux lignes */
.champ .deroulant__bouton { min-height: 48px; background: var(--rose-pale); border-radius: 0; }
.commande > div, .retrait .champ { min-width: 0; }

/* Contraste élevé (couleurs forcées) : l'option active, l'option choisie et l'offre choisie restent visibles */
@media (forced-colors: active) {
  .deroulant__option.est-actif { outline: 2px solid Highlight; outline-offset: -2px; }
  .deroulant__option[aria-selected="true"] .deroulant__texte { text-decoration: underline; text-underline-offset: 3px; }
  .deroulant.est-ouvert .deroulant__bouton { outline: 2px solid Highlight; outline-offset: 1px; }
  .offre-choix__rond, .offre-choix__rond:checked { -webkit-appearance: auto; appearance: auto; border: initial; background: initial; box-shadow: none; }
  .mode input { position: static; opacity: 1; width: 16px; height: 16px; margin: 0; flex: none; }
  .mode__rond { display: none; }
  .offre-choix:has(input:checked) { outline: 3px solid Highlight; outline-offset: -3px; }
}

/* Offres par lot -------------------------------------------------------------------------------- */
.offres { list-style: none; margin: 0; padding: 0; }

/* La photo du produit empilée autant de fois que l'offre compte de boîtes (--k : échelle de la pile) ; au-delà de
   quatre boîtes, le nombre en petit sur le coin */
.pile { position: relative; flex: none; display: block; width: calc(120px * var(--k, 1)); height: calc(84px * var(--k, 1)); }
.pile__boite {
  position: absolute; left: 50%; top: 50%; overflow: hidden;
  width: calc(76px * var(--k, 1)); height: calc(50px * var(--k, 1));
  margin: calc(-25px * var(--k, 1)) 0 0 calc(-38px * var(--k, 1));
  background: var(--creme); border: 2px solid var(--rose-pale); border-radius: 3px;
  box-shadow: 0 8px 14px -8px rgba(74, 6, 22, .5), 0 0 0 1px rgba(110, 10, 34, .07);
  translate: calc(var(--dx, 0px) * var(--k, 1)) calc(var(--dy, 0px) * var(--k, 1)); rotate: var(--r, 0deg);
}
.pile__boite img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); }
.pile--1 .pile__boite { --r: -2deg; }
.pile--2 .pile__boite:nth-child(1) { --dx: -12px; --dy: -8px; --r: -7deg; }
.pile--2 .pile__boite:nth-child(2) { --dx: 12px; --dy: 8px; --r: 4deg; }
.pile--3 .pile__boite:nth-child(1) { --dx: -18px; --dy: -11px; --r: -9deg; }
.pile--3 .pile__boite:nth-child(2) { --dx: 0px; --dy: 0px; --r: -2deg; }
.pile--3 .pile__boite:nth-child(3) { --dx: 18px; --dy: 11px; --r: 6deg; }
.pile--4 .pile__boite:nth-child(1) { --dx: -19px; --dy: -12px; --r: -9deg; }
.pile--4 .pile__boite:nth-child(2) { --dx: -6px; --dy: -4px; --r: -4deg; }
.pile--4 .pile__boite:nth-child(3) { --dx: 6px; --dy: 4px; --r: 2deg; }
.pile--4 .pile__boite:nth-child(4) { --dx: 19px; --dy: 12px; --r: 7deg; }
.pile--mini { --k: .5; }
.pile--mini .pile__boite { border-width: 1.5px; border-radius: 2px; box-shadow: 0 4px 8px -5px rgba(74, 6, 22, .5), 0 0 0 1px rgba(110, 10, 34, .07); }
.pile__nb {
  position: absolute; right: -2px; bottom: -3px; z-index: 1; padding: 0 4px;
  background: var(--rose-pale); border-radius: 2px; box-shadow: 0 0 0 1px var(--filet-l);
  font-family: var(--f-texte); font-weight: 600; font-size: 14px; line-height: 1.25; font-style: italic; color: var(--bordeaux);
}

/* Cartes « Nos spécialités » : une rangée courte par offre (vers la fiche réglée sur la quantité) */
.offres--carte { width: 100%; display: flex; flex-direction: column; gap: 8px; margin: -2px 0 16px; }
.offre-tuile {
  width: 100%; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 14px 6px 6px;
  background: var(--rose-pale); border: 1px solid var(--filet); border-radius: 2px;
  font-family: var(--f-texte); color: var(--texte); text-align: left; text-decoration: none; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
@media (hover: hover) {
  .offre-tuile:hover { border-color: var(--bordeaux-en); color: var(--texte); }
}
.offre-tuile__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.offre-tuile__nom { font-family: var(--f-titre); font-weight: 600; font-size: 15px; letter-spacing: .03em; color: var(--titre); }
.offre-tuile__titre { font-family: var(--f-main); font-weight: 500; font-size: 18px; line-height: 1.15; color: var(--bordeaux-en); text-wrap: balance; }
.offre-tuile__tarif { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; font-size: 17px; }
.offre-tuile__montant { font-weight: 600; color: var(--titre); white-space: nowrap; }
.offre-tuile__avant { font-size: 15px; color: var(--gris); white-space: nowrap; text-decoration-thickness: 1px; }
.offre-tuile__fin { font-size: 14px; font-style: italic; color: var(--gris); }
.offre-tuile__fleche { flex: none; color: var(--bordeaux); }
@media (max-width: 639px) {
  .offres--carte { gap: 5px; margin: -6px 0 8px; }
  .offre-tuile { gap: 6px; min-height: 44px; padding: 2px 6px 2px 3px; }
  .offre-tuile .pile--mini { --k: .38; }
  .offre-tuile__txt { line-height: 1.15; }
  .offre-tuile__nom { font-size: 13px; letter-spacing: 0; }
  .offre-tuile__titre { display: none; }
  .offre-tuile__tarif { font-size: 15px; line-height: 1.15; column-gap: 5px; }
  .offre-tuile__avant { font-size: 13px; }
  .offre-tuile__fin { font-size: 13px; line-height: 1.2; }
  .offre-tuile__fleche { display: none; }
  /* Dans une rangée, la carte la plus haute (le coffret et ses offres) donne la hauteur : chez les autres,
     l'espace se met sous le nom, le choix du poids, le prix et le bouton restent ensemble en bas */
  .produit__choix { margin-top: auto; }
  .produit .produit__tarif { flex: none; margin-top: auto; }
  .produit__choix ~ .produit__tarif { margin-top: 0; }
}
@media (max-width: 359px) {
  .offre-tuile { gap: 5px; padding: 2px 4px 2px 2px; }
  .offre-tuile .pile--mini { --k: .3; }
}

/* Bloc du coffret de l'accueil : les offres en cartes illustrées, sur toute la largeur du cadre.
   Colonnes égales (leur nombre est posé par js/site.js selon le nombre d'offres : jamais une offre seule sur sa
   rangée) ; chaque carte se met debout ou couchée selon sa propre largeur. */
.coffret-bloc__offres { flex: 1 0 100%; width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 22px; }
@media (min-width: 960px) {
  .coffret-bloc__cadre { flex-wrap: wrap; }
  .coffret-bloc__texte { flex: 440 1 0; }
  .coffret-bloc__visuel { flex: 520 1 0; }
}
.coffret-bloc__offres .filet-coeur { margin-top: 0; }
.coffret-bloc__fr, .coffret-bloc__en, .coffret-bloc__contenu { text-wrap: balance; }
.fiche__accroche { text-wrap: pretty; }
.offres--bloc {
  --c: var(--c-tel, 1);
  --ecart: 10px;
  width: 100%; max-width: calc(var(--c) * 560px + (var(--c) - 1) * var(--ecart));
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px var(--ecart);
}
@media (min-width: 640px) { .offres--bloc { --c: var(--c-tab, 2); --ecart: 22px; gap: 18px var(--ecart); } }
@media (min-width: 960px) { .offres--bloc { --c: var(--c-ordi, 3); } }
@media (min-width: 1200px) { .offres--bloc { --c: var(--c-large, 4); } }
.offres--bloc > li { flex: 0 0 calc((100% - (var(--c) - 1) * var(--ecart)) / var(--c)); min-width: 0; display: flex; container-type: inline-size; }
.offre-carte {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px 18px 20px; text-align: center;
  background: var(--rose-pale); border: 1px solid var(--filet); border-radius: 2px;
}
.offre-carte .pile { --k: 1.1; margin-bottom: 6px; }
.offre-carte__txt { align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; margin-bottom: 14px; }
.offre-carte__nom { font-family: var(--f-titre); font-weight: 600; font-size: 21px; line-height: 1.1; color: var(--titre); text-wrap: balance; }
.offre-carte__titre { font-family: var(--f-main); font-weight: 500; font-size: 23px; line-height: 1.15; color: var(--bordeaux-en); text-wrap: balance; }
.offre-carte__tarif { margin-top: 4px; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 10px; }
.offre-carte__montant { font-family: var(--f-titre); font-weight: 600; font-size: 24px; color: var(--titre); white-space: nowrap; }
.offre-carte__tarif s { font-size: 17px; color: var(--gris); white-space: nowrap; }
.offre-carte__gain { font-size: 16px; line-height: 1.3; font-style: italic; color: var(--bordeaux-en); text-wrap: balance; }
.offre-carte__unite { color: var(--gris); }
.offre-carte__fin { font-size: 15px; font-style: italic; color: var(--gris); }
.offre-carte__btn { margin-top: auto; min-height: 46px; padding: 0 22px; font-size: 13px; letter-spacing: .08em; white-space: nowrap; }

/* Carte étroite : deux offres côte à côte au téléphone */
@container (max-width: 239px) {
  .offre-carte { padding: 12px 10px; }
  .offre-carte .pile { --k: .9; margin-bottom: 4px; }
  .offre-carte__txt { margin-bottom: 10px; }
  .offre-carte__nom { font-size: 17px; }
  .offre-carte__titre { font-size: 19px; }
  .offre-carte__tarif { margin-top: 2px; gap: 0 8px; }
  .offre-carte__montant { font-size: 19px; }
  .offre-carte__tarif s { font-size: 15px; }
  .offre-carte__gain { font-size: 15px; }
  .offre-carte__unite { display: none; }
  .offre-carte__fin { font-size: 14px; }
  .offre-carte__btn { align-self: stretch; min-height: 44px; padding: 4px 6px; font-size: 12.5px; letter-spacing: .05em; white-space: normal; line-height: 1.2; }
  .offre-carte__btn svg { display: none; }
}
@container (max-width: 139px) {
  .offre-carte { padding: 10px 8px 12px; }
  .offre-carte .pile { --k: .76; }
  .offre-carte__nom { font-size: 16px; }
  .offre-carte__montant { font-size: 18px; }
}
/* Carte couchée et compacte (tablette et téléphone, une offre par rangée) */
@media (max-width: 959px) {
  @container (min-width: 300px) and (max-width: 439px) {
    .offre-carte { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: center; gap: 2px 16px; padding: 14px 14px 16px; text-align: left; }
    .offre-carte .pile { --k: .8; grid-row: 1 / 3; margin: 0; }
    .offre-carte__txt { align-self: start; align-items: flex-start; margin: 0; }
    .offre-carte__nom { font-size: 18px; }
    .offre-carte__titre { font-size: 20px; }
    .offre-carte__tarif { justify-content: flex-start; gap: 0 8px; }
    .offre-carte__montant { font-size: 20px; }
    .offre-carte__tarif s { font-size: 15px; }
    .offre-carte__gain { font-size: 15px; }
    .offre-carte__unite { display: none; }
    .offre-carte__fin { font-size: 14px; }
    .offre-carte__btn { grid-column: 2; justify-self: start; margin-top: 8px; min-height: 44px; padding: 0 14px; font-size: 12.5px; letter-spacing: .06em; }
  }
}
/* Carte couchée : la pile à gauche du texte */
@container (min-width: 440px) {
  .offre-carte {
    display: grid; grid-template-columns: auto minmax(0, 300px); grid-template-rows: 1fr auto;
    justify-content: center; align-items: center; gap: 4px 26px; padding: 20px 24px 22px; text-align: left;
  }
  .offre-carte .pile { --k: 1.2; grid-row: 1 / 3; margin: 0; }
  .offre-carte__txt { align-self: start; align-items: flex-start; margin: 0; }
  .offre-carte__tarif { justify-content: flex-start; }
  .offre-carte__btn { grid-column: 2; justify-self: start; margin-top: 10px; }
}

/* Fiche : un vrai choix unique, l'unité puis chaque lot (le choix règle la quantité) */
.choix-offre .offres--fiche { clear: both; }
.offres--fiche { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; container-type: inline-size; }
.offre-choix {
  position: relative; width: 100%;
  display: grid; grid-template-columns: 16px auto minmax(0, 1fr) auto; grid-template-areas: "rond pile txt tarif";
  align-items: center; gap: 4px 16px; min-height: 84px; padding: 8px 18px 8px 16px;
  background: var(--rose-pale); border: 1px solid var(--filet); border-radius: 2px;
  font-family: var(--f-texte); color: var(--texte); text-align: left; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
@media (hover: hover) {
  .offre-choix:hover { border-color: var(--bordeaux-en); }
}
.offre-choix:has(input:checked) { border-color: var(--bordeaux); box-shadow: inset 0 0 0 1px var(--bordeaux); background: var(--rose-clair); }
.offre-choix:has(input:focus-visible) { outline: 2px solid var(--bordeaux); outline-offset: 3px; }
/* Le rond de sélection est le vrai bouton radio, dessiné comme ceux de « Réception » */
.offre-choix__rond {
  grid-area: rond; -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin: 0; padding: 0;
  border: 1px solid var(--bordeaux); border-radius: 50%; background: transparent; cursor: pointer;
  transition: box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.offre-choix__rond:checked { background: var(--bordeaux); box-shadow: inset 0 0 0 3px var(--rose-clair); }
.offre-choix__rond:focus-visible { outline: 0; }
.offre-choix .pile { grid-area: pile; --k: .82; }
.offre-choix__txt { grid-area: txt; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.offre-choix__nom { font-family: var(--f-titre); font-weight: 600; font-size: 18px; line-height: 1.15; color: var(--titre); }
.offre-choix__titre { font-family: var(--f-main); font-weight: 500; font-size: 21px; line-height: 1.15; color: var(--bordeaux-en); text-wrap: balance; }
.offre-choix__gain { font-size: 15px; line-height: 1.3; color: var(--gris); }
.offre-choix__eco { font-style: italic; color: var(--bordeaux-en); }
.offre-choix__fin { font-size: 15px; line-height: 1.3; font-style: italic; color: var(--gris); }
.offre-choix__tarif { grid-area: tarif; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.offre-choix__montant { font-family: var(--f-titre); font-weight: 600; font-size: 20px; color: var(--titre); white-space: nowrap; }
.offre-choix__tarif s { font-size: 16px; color: var(--gris); white-space: nowrap; }
/* Colonne étroite (téléphone, petit ordinateur) : le prix passe sous le nom, le rond reste */
@container (max-width: 419px) {
  .offre-choix { grid-template-columns: 16px auto minmax(0, 1fr); grid-template-areas: "rond pile txt" "rond pile tarif"; gap: 2px 12px; min-height: 76px; padding: 10px 12px; }
  .offre-choix .pile { --k: .6; }
  .offre-choix__nom { font-size: 16px; }
  .offre-choix__titre { font-size: 19px; }
  .offre-choix__gain, .offre-choix__fin { font-size: 14px; }
  .offre-choix__tarif { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 8px; text-align: left; }
  .offre-choix__montant { font-size: 17px; }
  .offre-choix__tarif s { font-size: 15px; }
}
.fiche__infos > .prix-bloc { align-items: flex-start; }
.fiche__infos > .prix-bloc .prix { font-size: 22px; }
.fiche__infos > .prix-bloc .promo-tag { margin-top: 6px; }
.fiche__indispo { font-size: 18px; font-style: italic; color: var(--bordeaux); }

/* Fiche : le total de la quantité choisie, juste avant « Ajouter au panier » */
.fiche__total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-top: 10px; min-height: 30px; }
.fiche__total-lib { font-family: var(--f-titre); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--titre); }
.fiche__total-qte { font-family: var(--f-texte); font-weight: 400; font-size: 17px; font-style: italic; letter-spacing: 0; text-transform: none; color: var(--gris); }
.fiche__total-montant { font-family: var(--f-titre); font-weight: 600; font-size: 22px; color: var(--titre); }
.fiche__total s { font-size: 17px; color: var(--gris); }
.fiche__total + .fiche__achat { margin-top: 2px; }

/* Fiche : « Dans le coffret », chaque élément avec sa photo */
.fiche__bloc ul[data-champ="composition"] { gap: 10px; }
.fiche__bloc ul[data-champ="composition"] li { display: flex; align-items: center; gap: 16px; }
.compo__vignette {
  flex: none; width: 76px; height: 50px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--creme); border: 2px solid var(--rose-pale); border-radius: 3px; box-shadow: 0 0 0 1px rgba(110, 10, 34, .07);
}
.compo__vignette img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.compo__vignette--coeur { color: var(--bordeaux); }
@media (max-width: 639px) {
  .fiche__bloc ul[data-champ="composition"] li { gap: 12px; }
  .compo__vignette { width: 64px; height: 44px; }
}

/* Livraison offerte : panier et fiche */
.livraison-offerte {
  display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 16px;
  background: var(--creme); border: 1px solid var(--filet-l); border-radius: 2px;
  font-size: 17px; line-height: 1.4; color: var(--bordeaux);
}
.livraison-offerte svg { flex: none; }
.livraison-offerte.est-atteinte { border-color: var(--bordeaux); font-weight: 600; }
.livraison-offerte--note { margin-top: 12px; padding: 0; background: none; border: 0; font-size: 17px; font-style: italic; }

/* Panier : le prix à l'unité et l'offre sous le nom, le prix de la ligne avec ses offres */
.ligne__prix { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.ligne__prix s { font-size: 14px; color: var(--gris); }
.ligne__nom .ligne__pu { font-style: normal; font-size: 15px; color: var(--gris); font-variant-numeric: lining-nums; }
.ligne__nom .ligne__offre { font-size: 15px; font-style: italic; color: var(--bordeaux-en); }
.ligne__nom .ligne__retirer { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; margin: -6px 0 -10px; }
.quantite--petit { height: 46px; }
.quantite--petit button { width: 44px; }
.recap__ligne .est-offerte { color: var(--bordeaux); font-weight: 600; }
@media (max-width: 639px) {
  .ligne .ligne__prix { grid-column: 3; }
}

/* Panier : une croix en haut à droite pour retirer la ligne, le poids se change sur la ligne */
.ligne { grid-template-columns: 80px minmax(0, 1fr) auto 90px 40px; }
.ligne__croix {
  grid-column: 5; grid-row: 1; align-self: start; justify-self: end; margin: -8px -8px 0 0;
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 50%; background: none; color: var(--gris); cursor: pointer;
}
@media (hover: hover) { .ligne__croix:hover { color: var(--bordeaux); background: rgba(110, 10, 34, .07); } }
.ligne__croix:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: -2px; }
.ligne__choix { margin-top: 6px; width: 100%; max-width: 230px; }
.ligne__choix .deroulant { font-size: 16px; }
.ligne__choix .deroulant__bouton { min-height: 44px; gap: 8px; padding: 0 10px; }
.ligne__choix .deroulant__libelle { padding-right: 8px; font-size: 12px; letter-spacing: .04em; }
@media (max-width: 639px) {
  .ligne { grid-template-columns: 64px minmax(0, 1fr) auto 36px; }
  .ligne__nom { grid-column: 2 / 4; }
  .ligne__croix { grid-column: 4; grid-row: 1; margin: -10px -10px 0 0; }
  .ligne .ligne__prix { grid-column: 3 / 5; }
}

/* Panier : sous une ligne, le lot suivant illustré, et un bouton qui règle la quantité dessus */
.ligne:has(+ .ligne-offre:not([hidden])) { border-bottom: 0; padding-bottom: 8px; }
.ligne-offre {
  display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; grid-template-areas: "pile txt btn";
  align-items: center; gap: 4px 22px; padding: 0 0 14px; border-bottom: 1px solid var(--filet-l);
}
.ligne-offre .pile { grid-area: pile; justify-self: center; margin: -8px 0; --k: .6; }
.ligne-offre__txt { grid-area: txt; min-width: 0; font-size: 16px; line-height: 1.35; color: var(--gris); }
.ligne-offre__nom { font-family: var(--f-titre); font-weight: 600; font-size: 14px; letter-spacing: .03em; color: var(--titre); }
.ligne-offre__tarif { font-style: italic; }
.ligne-offre__titre { display: block; font-family: var(--f-main); font-weight: 500; font-size: 19px; line-height: 1.2; color: var(--bordeaux-en); text-wrap: balance; }
.ligne__astuce { display: block; font-style: italic; color: var(--bordeaux-en); }
.ligne__astuce sup { font-size: 12.5px; line-height: 0; }
.ligne-offre__btn { grid-area: btn; min-height: 44px; padding: 0 16px; font-size: 12.5px; letter-spacing: .08em; white-space: nowrap; }
@media (max-width: 639px) {
  .ligne-offre { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 2px 14px; }
  .ligne-offre .pile { --k: .5; }
  .ligne-offre__txt { font-size: 15px; }
  .ligne-offre__btn { padding: 0 12px; }
}
@media (max-width: 479px) {
  .ligne-offre { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "pile txt" "pile btn"; row-gap: 8px; }
  .ligne-offre__btn { justify-self: start; }
}

/* Récapitulatif : chaque article avec sa photo et sa quantité */
.recap__article { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 8px 0; }
.recap__article + .recap__article { border-top: 1px solid var(--filet-l); }
.recap__vignette {
  position: relative; width: 56px; height: 46px; display: flex; align-items: center; justify-content: center;
  background: var(--rose-pale); border: 1px solid var(--filet-l); border-radius: 2px;
}
.recap__vignette img { width: 100%; height: 100%; object-fit: cover; border-radius: 1px; }
.recap__nb {
  position: absolute; top: -9px; right: -9px; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 11px;
  background: var(--bordeaux); color: var(--creme); box-shadow: 0 0 0 2px var(--creme);
  font-family: var(--f-texte); font-size: 13px; font-weight: 600; line-height: 21px; text-align: center;
}
.recap__nom { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.recap__article .recap__nom span { white-space: normal; }
.recap__titre { font-size: 17px; }
.recap__sous { font-size: 14px; font-style: italic; color: var(--bordeaux-en); }
.recap__montant { white-space: nowrap; font-size: 17px; }
.recap__article + .recap__ligne:not(.recap__article) { margin-top: 6px; border-top: 1px solid var(--filet-l); padding-top: 12px; }
.recap__eco { margin-top: 4px; text-align: right; font-size: 16px; font-style: italic; color: var(--bordeaux-en); }

/* Message « ajouté au panier » : au-dessus du bouton V1 / V2, vraiment caché quand il s'efface, lien de 44 px */
.toast {
  z-index: 95; padding-top: 4px; padding-bottom: 4px; visibility: hidden;
  transition: transform .3s var(--ease), opacity .3s var(--ease), visibility 0s linear .3s;
}
.toast.visible { visibility: visible; transition: transform .3s var(--ease), opacity .3s var(--ease), visibility 0s linear 0s; }
.toast a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; border-bottom: 0;
  text-decoration: underline; text-decoration-color: rgba(252, 230, 224, .55); text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.toast__img { flex: none; width: 46px; height: 38px; overflow: hidden; background: var(--creme); border: 1.5px solid var(--rose-pale); border-radius: 2px; }
.toast__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.toast:has(.toast__img:not([hidden])) { padding-left: 10px; gap: 14px; }
.toast__txt { flex: 1; min-width: 0; padding: 8px 0; }

/* Ajout au panier : la photo de l'article se soulève et file vers le panier de l'en-tête en s'arrondissant
   (site.js, envolerVersPanier) ; l'ombre suit la forme (drop-shadow posé par l'animation) */
.envol { position: fixed; z-index: 60; left: 0; top: 0; pointer-events: none; will-change: transform, filter, opacity; }
.envol__forme { width: 100%; height: 100%; overflow: hidden; background: var(--creme-l); clip-path: inset(0 round 4px); }
.envol img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Jeton qui sort du bouton (photo hors de l'écran) : rond, bordé de crème */
.envol--jeton .envol__forme { border-radius: 50%; clip-path: none; border: 3px solid var(--creme-l); background: var(--creme); }
.envol--jeton img { object-fit: cover; }

/* Le panier de l'en-tête quand l'article y tombe : une onde, une seule fois */
.panier-lien svg { transform-origin: 50% 75%; }
.panier-onde {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  border: 1.5px solid var(--bordeaux); pointer-events: none; opacity: 0;
}

/* Coche qui se dessine sur le bouton « Ajouté au panier » */
.coche { flex: none; }
.coche path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: tracer-coche .38s .06s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes tracer-coche { to { stroke-dashoffset: 0; } }
.ra-btn.est-ajoute { gap: 8px; }

/* Panier : la ligne qui arrive de la fiche se pose (photo qui tombe à sa place, ligne éclairée qui s'estompe) */
.ligne--arrivee { animation: ligne-eclairee 1.8s .2s ease-out both; }
.ligne--arrivee .ligne__img img { animation: photo-posee .7s .15s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes ligne-eclairee { 0% { background-color: var(--rose-clair); box-shadow: -14px 0 0 var(--rose-clair), 14px 0 0 var(--rose-clair); } 100% { background-color: rgba(250, 221, 221, 0); box-shadow: -14px 0 0 rgba(250, 221, 221, 0), 14px 0 0 rgba(250, 221, 221, 0); } }
@keyframes photo-posee { 0% { transform: translateY(-36px) scale(.5) rotate(-8deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .coche path { animation: none; stroke-dashoffset: 0; }
  .ligne--arrivee, .ligne--arrivee .ligne__img img { animation: none; }
}

/* Complément de la fiche : le prix reste aligné, le choix du poids rejoint le lien (44 px de haut) */
.complement__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 16px; margin-top: 4px; }
.complement .produit__choix { display: inline-block; width: auto; max-width: none; margin: 0; padding: 0; }
.complement .deroulant { font-size: 17px; }
.complement .deroulant__bouton { min-height: 44px; column-gap: 10px; padding: 2px 12px; }
.complement .deroulant__libelle { margin: 6px 0; padding-right: 10px; font-size: 13px; }
.complement .prix-bloc { align-items: center; }
.complement__item .complement__lien {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 0; padding: 0; border-bottom: 0;
  text-decoration: underline; text-decoration-color: var(--filet); text-decoration-thickness: 1px; text-underline-offset: 6px;
}
@media (hover: hover) {
  .complement__item .complement__lien:hover { text-decoration-color: var(--bordeaux); }
}
@media (max-width: 639px) {
  .complement .prix-bloc { align-items: flex-start; }
  .complement__actions { justify-content: flex-start; margin-top: 2px; gap: 4px 16px; }
}

/* La boutique ne répond pas */
.boutique-panne { list-style: none; flex-basis: 100%; padding: 28px 16px; text-align: center; font-size: 19px; font-style: italic; color: var(--gris); }

/* Demande de devis (panier) */
.recap__devis { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--filet); display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.recap__devis p { font-size: 16px; line-height: 1.4; font-style: italic; color: var(--gris); }
.recap__devis .ra-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; border-bottom: 0;
  text-decoration: underline; text-decoration-color: var(--filet); text-decoration-thickness: 1px; text-underline-offset: 6px;
}
.devis-qui { border: 0; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }
.devis-qui__choix {
  position: relative; display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px;
  border: 1px solid var(--filet); border-radius: 2px; background: var(--rose-pale);
  font-size: 18px; color: var(--titre); cursor: pointer; transition: border-color .2s ease, background-color .2s ease;
}
@media (hover: hover) {
  .devis-qui__choix:hover { border-color: var(--bordeaux-en); }
  .recap__devis .ra-link:hover { text-decoration-color: var(--bordeaux); }
}
.devis-qui__choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.devis-qui__choix:has(input:checked) { border-color: var(--bordeaux); box-shadow: inset 0 0 0 1px var(--bordeaux); background: var(--rose-clair); color: var(--bordeaux); font-weight: 600; }
.devis-qui__choix:has(input:focus-visible) { outline: 2px solid var(--bordeaux); outline-offset: 2px; }
.devis-entreprise, .devis-plus { margin-top: 18px; }
.champ textarea { font-family: var(--f-texte); font-size: 19px; letter-spacing: 0; text-transform: none; color: var(--titre); background: var(--rose-pale); border: 1px solid var(--filet); }
.champ input[type="date"] { line-height: 46px; }
.devis-rgpd { margin-top: 14px; font-size: 15px; font-style: italic; color: var(--gris); }
.piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.commande.est-devis .recap__total span:first-child { white-space: nowrap; }
@media (max-width: 639px) {
  .devis-qui__choix { flex: 1 1 0; justify-content: center; padding: 0 10px; font-size: 17px; }
}

/* Coordonnées : prénom et nom séparés (deux colonnes, comme e-mail et téléphone) */
.grille-champs--coord { margin-top: 18px; }

/* Adresse : suggestions de la Base Adresse Nationale sous le champ */
.champ.a-suggestions { position: relative; }
.suggestions {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  margin: 0; padding: 6px; list-style: none; max-height: 320px; overflow-y: auto;
  background: var(--rose-pale); border: 1px solid var(--filet); box-shadow: 0 14px 34px -14px rgba(74, 6, 22, .35);
  text-transform: none; letter-spacing: 0;
}
.suggestions li {
  min-height: 44px; padding: 8px 12px; display: flex; flex-direction: column; justify-content: center; gap: 1px;
  cursor: pointer; border-radius: 2px;
}
.suggestions li + li { margin-top: 1px; }
.suggestions li.est-actif { background: rgba(110, 10, 34, .07); }
@media (hover: hover) { .suggestions li:hover { background: rgba(110, 10, 34, .05); } }
.suggestions__haut { font-family: var(--f-texte); font-size: 18px; line-height: 1.25; color: var(--titre); }
.suggestions__bas { font-family: var(--f-texte); font-size: 15px; font-style: italic; color: var(--gris); }
@media (forced-colors: active) { .suggestions li.est-actif { outline: 2px solid Highlight; } }

/* Écran tactile : pas d'effet de survol qui reste collé après un toucher (le bouton « Ajouté » reste plein) */
@media (hover: none) {
  .produit .ra-btn-line:not(.est-ajoute):hover, .offre-carte__btn:not(.est-ajoute):hover, .ligne-offre__btn:hover,
  .panier-vide .ra-btn-line:hover {
    background: transparent; border-color: var(--bordeaux); color: var(--bordeaux);
  }
}