/* pdi-upsell.css — suggestions du panier et du paiement, offre « avant de
   partir », rappel du panier (js/pdi-upsell.js).

   Deux décors très différents :
   - le PANIER change avec chaque site : verre sombre, ou livre-parchemin dont
     le gabarit force l'encre (#2a1a10) sur le panneau. Ici aucune couleur de
     texte n'est imposée : tout part de currentColor (bordures et fonds en
     color-mix, repli rgba pour les navigateurs qui ne l'ont pas), et les
     marges suivent celles des lignes du livre (--cartw, posé par le gabarit
     en mode parchemin seulement ; 0 ailleurs) pour ne jamais mordre le décor ;
   - la FENÊTRE DE PAIEMENT est toujours la même : carte #1b0e0b, accent
     #e4002b, texte #f6efe9, police système (css/pdi-order-page.css,
     .pdi-pay-* / .pdi-co-*). On y reprend exactement sa palette.
   Toutes les classes commencent par pdi- : la purge CSS du gabarit les garde. */

/* ------------------------------------------------------------ commun */

.pdi-upsell-slot:empty { display: none; }

.pdi-upsell {
  /* jamais plus large que son panneau, même posé dans un conteneur flex :
     c'est le carrousel qui défile, pas la page */
  min-width: 0;
  max-width: 100%;
  margin: 10px 0 12px;
  color: inherit;
  text-align: start;
}
.pdi-upsell-titre {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .78;
}
.pdi-upsell-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.pdi-upsell-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 7px 8px;
  border: 1px solid rgba(127, 127, 127, .3);
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 10px;
  background: rgba(127, 127, 127, .07);
  background: color-mix(in srgb, currentColor 5%, transparent);
  animation: pdi-upsell-entree .24s ease both;
}
.pdi-upsell-vignette {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(127, 127, 127, .12);
  background: color-mix(in srgb, currentColor 9%, transparent);
}
.pdi-upsell-vignette img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Sans photo : une assiette dessinée au trait, dans la couleur du texte. */
.pdi-upsell-vignette--vide::before {
  content: "";
  width: 46%;
  height: 46%;
  border-radius: 50%;
  border: 2px solid currentColor;
  box-shadow: 0 0 0 4px rgba(127, 127, 127, .12);
  opacity: .38;
}
.pdi-upsell-texte {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pdi-upsell-nom {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.pdi-upsell-raison {
  overflow: hidden;
  font-size: 11.5px;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: .7;
}
.pdi-upsell-raison:empty { display: none; }
.pdi-upsell-prix {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pdi-upsell-ajout {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  margin: 0;
  padding: 0;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: 700 20px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, transform .15s ease, opacity .15s ease;
}
.pdi-upsell-ajout:hover { background: rgba(127, 127, 127, .18); background: color-mix(in srgb, currentColor 14%, transparent); }
.pdi-upsell-ajout:active { transform: scale(.92); }
.pdi-upsell-ajout:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.pdi-upsell-ajout[aria-busy="true"] { opacity: .55; cursor: progress; }
.pdi-upsell-ajout:disabled { cursor: default; }
.pdi-upsell-item.is-ajoute .pdi-upsell-ajout { opacity: .9; }

/* Plus de deux suggestions : un carrousel qui défile au doigt, la carte
   suivante dépasse pour dire qu'il y en a d'autres. */
.pdi-upsell-liste--defile {
  display: flex;
  gap: 8px;
  margin: 0 -2px;
  padding: 2px 2px 4px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pdi-upsell-liste--defile::-webkit-scrollbar { display: none; }
.pdi-upsell-liste--defile > .pdi-upsell-item {
  flex: 0 0 min(78%, 240px);
  scroll-snap-align: start;
}

@keyframes pdi-upsell-entree {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------- le panier */

/* Police de texte du site (comme les lignes du livre-panier), jamais la
   police d'affichage des titres. Marges : celles des lignes du livre. */
.pdi-order-cart .pdi-upsell {
  margin: 8px calc(var(--cartw, 0px) * .11) 10px;
  font-family: var(--t-font-body, Rubik, Arial, sans-serif);
  letter-spacing: normal;
  text-transform: none;
  text-shadow: none;
}
@media (max-width: 767px) {
  .pdi-order-cart .pdi-upsell { margin-left: calc(var(--cartw, 0px) * .08); margin-right: calc(var(--cartw, 0px) * .08); }
}

/* ------------------------------------------ la fenêtre de paiement */

.pdi-pay-card .pdi-upsell {
  margin: 0 0 16px;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  color: #f6efe9;
}
.pdi-pay-card .pdi-upsell-titre {
  margin: 0 0 10px;
  color: #f6efe9;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  opacity: 1;
}
/* Trois cartes côte à côte, photo en haut : se voit d'un coup d'œil, se
   touche d'un pouce, sans repousser le choix livraison / retrait. */
.pdi-pay-card .pdi-upsell-liste {
  grid-template-columns: repeat(var(--pdi-upsell-n, 3), minmax(0, 1fr));
  gap: 8px;
}
.pdi-pay-card .pdi-upsell-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "vignette vignette" "nom nom" "raison raison" "prix ajout";
  /* le nom prend la place libre : prix et bouton s'alignent en bas des trois cartes */
  grid-template-rows: auto 1fr auto auto;
  align-items: end;
  gap: 4px 6px;
  padding: 7px;
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  border-radius: 12px;
}
.pdi-pay-card .pdi-upsell-texte { display: contents; }
.pdi-pay-card .pdi-upsell-vignette { grid-area: vignette; width: 100%; height: 64px; margin-bottom: 2px; background: rgba(255, 255, 255, .06); }
.pdi-pay-card .pdi-upsell-nom { grid-area: nom; align-self: start; color: #f6efe9; font-size: 14px; }
.pdi-pay-card .pdi-upsell-raison { grid-area: raison; color: #e9ddd4; font-size: 12px; }
.pdi-pay-card .pdi-upsell-prix { grid-area: prix; align-self: center; color: #fff; font-size: 14px; }
.pdi-pay-card .pdi-upsell-ajout {
  grid-area: ajout;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border: 0;
  background: #e4002b;
  color: #fff;
  font-size: 19px;
}
.pdi-pay-card .pdi-upsell-ajout:hover { background: #e4002b; filter: brightness(1.1); }
.pdi-pay-card .pdi-upsell-ajout:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pdi-pay-card .pdi-upsell-item.is-ajoute { border-color: rgba(60, 200, 120, .45); background: rgba(60, 200, 120, .08); }
.pdi-pay-card .pdi-upsell-item.is-ajoute .pdi-upsell-ajout { background: rgba(60, 200, 120, .22); color: #7fdca0; opacity: 1; filter: none; }
/* Téléphone : trois cartes d'environ 95 px à 360 px d'écran, la raison n'y
   tiendrait pas — le titre « Une dernière envie ? » suffit.
   Le bouton « + » quitte la ligne du prix et se pose dans le coin de la
   vignette : à côté de lui, le prix n'avait que 41 px et, écrit sans
   retour à la ligne, passait SOUS le bouton (« 24,9 EUR » à 360 px,
   « 25.000 COP » à 375 px coupé en « 25.000 C »). Le prix a maintenant toute
   la largeur de la carte, et s'il ne tient toujours pas (prix à six
   chiffres), il revient à la ligne plutôt que de se cacher. */
@media (max-width: 480px) {
  .pdi-pay-card .pdi-upsell-item { grid-template-areas: "vignette vignette" "nom nom" "prix prix"; grid-template-rows: auto 1fr auto; }
  .pdi-pay-card .pdi-upsell-raison { display: none; }
  .pdi-pay-card .pdi-upsell-vignette { height: 56px; }
  .pdi-pay-card .pdi-upsell-nom { font-size: 13px; }
  .pdi-pay-card .pdi-upsell-prix { min-width: 0; font-size: 13px; white-space: normal; overflow-wrap: anywhere; }
  .pdi-pay-card .pdi-upsell-ajout {
    /* même cellule que la vignette, dessiné après elle : au-dessus de la photo */
    grid-area: vignette;
    position: relative;
    z-index: 1;
    justify-self: end;
    align-self: end;
    margin: 0 4px 6px 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
  }
  /* coché : un fond plein, lisible sur n'importe quelle photo */
  .pdi-pay-card .pdi-upsell-item.is-ajoute .pdi-upsell-ajout { background: #1f6b43; color: #fff; }
}

/* -------------------------------------------------- avant de partir */

.pdi-downsell {
  display: grid;
  gap: 10px;
  animation: pdi-upsell-entree .22s ease both;
}
.pdi-downsell-titre {
  margin: 0;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  outline: none;
}
.pdi-downsell-texte {
  margin: 0 0 4px;
  color: #e9ddd4;
  font-size: 16px;
  line-height: 1.45;
}
.pdi-downsell-offre {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  color: #f6efe9;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  text-align: start;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.pdi-downsell-offre:hover,
.pdi-downsell-offre:focus-visible { border-color: #e4002b; background: rgba(228, 0, 43, .08); outline: none; }
.pdi-downsell-offre:disabled { opacity: .6; cursor: progress; }
.pdi-downsell-offre strong { color: #7fdca0; white-space: nowrap; }
.pdi-downsell-offre-s { color: #e9ddd4; font-size: 14px; font-weight: 400; opacity: .78; }
.pdi-downsell-finir { margin-top: 4px; }
.pdi-downsell-quitter {
  justify-self: center;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  background: none;
  color: #e9ddd4;
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: .72;
  cursor: pointer;
}
.pdi-downsell-quitter:hover,
.pdi-downsell-quitter:focus-visible { opacity: 1; outline: none; }
@media (max-width: 480px) {
  .pdi-downsell-titre { font-size: 20px; }
  .pdi-downsell-texte { font-size: 15px; }
  .pdi-downsell-offre { font-size: 16px; padding: 13px 14px; }
}

/* ------------------------------------------------ rappel du panier */

/* Un bandeau discret en haut de l'écran — là où la souris part quand on
   s'en va — dans la palette du paiement pour se lire sur n'importe quel site. */
.pdi-upsell-rappel {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 99990;
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(440px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 8px 8px 8px 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  background: #1b0e0b;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .45);
  color: #f6efe9;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, sans-serif;
  opacity: 0;
  transform: translate(-50%, -14px);
  transition: opacity .22s ease, transform .26s ease;
}
.pdi-upsell-rappel.is-visible { opacity: 1; transform: translate(-50%, 0); }
.pdi-upsell-rappel-texte {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}
.pdi-upsell-rappel-montant { font-weight: 400; opacity: .8; white-space: nowrap; }
.pdi-upsell-rappel-cta {
  flex: 0 0 auto;
  margin: 0;
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  background: #e4002b;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.pdi-upsell-rappel-cta:hover { filter: brightness(1.08); }
.pdi-upsell-rappel-x {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #f6efe9;
  font: 400 20px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
}
.pdi-upsell-rappel-x:hover { background: rgba(255, 255, 255, .16); }
.pdi-upsell-rappel-cta:focus-visible,
.pdi-upsell-rappel-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ------------------------------------------------- mouvement réduit */

@media (prefers-reduced-motion: reduce) {
  .pdi-upsell-item,
  .pdi-downsell { animation: none; }
  .pdi-upsell-ajout,
  .pdi-downsell-offre,
  .pdi-upsell-rappel { transition: none; }
  .pdi-upsell-ajout:active { transform: none; }
  .pdi-upsell-liste--defile { scroll-behavior: auto; }
}

/* Téléphone, dans le panier : l'assiette dessinée d'un plat sans photo prend
   44 px d'une carte d'environ 180 — le nom passait de « Flan de Huevo » à
   « Flan de… » (vu en production le 25/09 à 375 px). Sans photo, le nom
   prend la place ; la carte suivante dépasse toujours pour inviter à glisser. */
@media (max-width: 480px) {
  .pdi-upsell--panier .pdi-upsell-vignette--vide { display: none; }
  .pdi-upsell--panier .pdi-upsell-liste--defile > .pdi-upsell-item { flex-basis: min(86%, 240px); }
}

/* L'étape « suggestions » du checkout (fondateur, 25/09) : upsell, puis
   downsell après « Non merci ». Les cartes reprennent le style du paiement ;
   le bouton est celui des autres étapes. */
.pdi-pay-card .pdi-co-suggestions { display: flex; flex-direction: column; gap: 14px; }
.pdi-pay-card .pdi-upsell-etape .pdi-upsell-titre { font-size: 20px; margin-bottom: 4px; }
.pdi-pay-card .pdi-upsell-suite { width: 100%; }


/* L'étape « dernière envie » à la maquette du fondateur (« Ma mamie
   foodtruck », 25/09) quand les plats n'ont pas de photo : titre et
   sous-titre centrés, une ligne par plat avec un rond sombre et son icône
   crème, nom / raison / prix, « + » rouge. Même rendu sur ordinateur et
   téléphone.
   Tailles (fondateur, 26/09) : l'écran +15 % et l'icône +20 % de plus dans
   son rond, mais TOUT doit tenir dans l'écran, sans défiler. Les tailles
   sont donc des variables (--pm-*) posées sur la fenêtre pendant cette
   étape ; pdi-upsell.js essaie la plus grande et descend d'un palier
   (.pdi-mamie-p1 → p5) tant que la fenêtre déborde. L'icône reste grande à
   tous les paliers. Sans :has (vieux navigateurs), les valeurs de repli sont
   les tailles d'avant. */
.pdi-pay-card .pdi-mamie { text-align: left; }
.pdi-pay-card .pdi-mamie-titre { margin: 2px 0 var(--pm-titre-bas, 4px); text-align: center; font-size: var(--pm-titre, 21px); font-weight: 800; line-height: 1.2; color: #fff; outline: none; }
.pdi-pay-card .pdi-mamie-sous { margin: 0 0 var(--pm-sous-bas, 16px); text-align: center; font-size: var(--pm-sous, 14px); line-height: 1.35; color: #d9cbc3; }
.pdi-pay-card .pdi-mamie-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pm-liste, 10px); }
.pdi-pay-card .pdi-mamie-item { display: flex; align-items: center; gap: var(--pm-ligne-gap, 14px); margin: 0; padding: var(--pm-ligne-v, 12px) var(--pm-ligne-h, 14px); border: 1px solid rgba(255, 255, 255, .09); border-radius: var(--pm-rayon, 14px); background: #2a1714; animation: pdi-upsell-entree .24s ease both; }
.pdi-pay-card .pdi-mamie-rond { flex: 0 0 var(--pm-rond, 56px); width: var(--pm-rond, 56px); height: var(--pm-rond, 56px); display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; background: #3d231e; }
.pdi-pay-card .pdi-mamie-rond img { display: block; width: var(--pm-icone, 30px); height: var(--pm-icone, 30px); object-fit: contain; }
.pdi-pay-card .pdi-mamie-rond--photo img { width: 100%; height: 100%; object-fit: cover; }
.pdi-pay-card .pdi-mamie-texte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pdi-pay-card .pdi-mamie-nom { font-size: var(--pm-nom, 15px); font-weight: 700; line-height: 1.25; color: #fff; overflow-wrap: anywhere; }
.pdi-pay-card .pdi-mamie-raison { font-size: var(--pm-raison, 13px); line-height: 1.3; color: #cdbdb4; }
.pdi-pay-card .pdi-mamie-prix { margin-top: var(--pm-prix-haut, 3px); font-size: var(--pm-prix, 15px); font-weight: 700; color: #fff; white-space: nowrap; }
.pdi-pay-card .pdi-mamie-ajout { flex: 0 0 var(--pm-plus, 40px); width: var(--pm-plus, 40px); height: var(--pm-plus, 40px); display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: #e4002b; color: #fff; font-size: var(--pm-plus-t, 24px); font-weight: 600; line-height: 1; cursor: pointer; transition: transform .12s ease, filter .12s ease; }
.pdi-pay-card .pdi-mamie-ajout svg { width: var(--pm-coche, 16px); height: var(--pm-coche, 16px); }
.pdi-pay-card .pdi-mamie-ajout:hover { filter: brightness(1.08); }
.pdi-pay-card .pdi-mamie-ajout:active { transform: scale(.94); }
.pdi-pay-card .pdi-mamie-ajout:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pdi-pay-card .pdi-mamie-ajout:disabled { cursor: default; opacity: 1; }
.pdi-pay-card .pdi-mamie-item.is-ajoute { border-color: rgba(228, 0, 43, .55); }
.pdi-pay-card .pdi-mamie-liste.is-vu .pdi-mamie-item { animation: none; }
.pdi-pay-card .pdi-co-suggestions .pdi-upsell-suite { margin-top: 18px; }

/* La fenêtre pendant cette étape seulement (:has) : le contact et le
   paiement Stripe gardent leur mise en page. Palier 0 = +15 % partout. */
.pdi-pay-card:has(.pdi-mamie) {
  --pm-haut: 30px; --pm-cote: 28px; --pm-bas: 25px;
  --pm-x: 39px; --pm-x-t: 25px;
  --pm-logo: 74px; --pm-logo-bas: 12px; --pm-marque: 32px; --pm-tete-bas: 21px;
  --pm-titre: 24px; --pm-titre-bas: 5px; --pm-sous: 16px; --pm-sous-bas: 18px;
  --pm-liste: 12px; --pm-ligne-v: 14px; --pm-ligne-h: 16px; --pm-ligne-gap: 16px; --pm-rayon: 16px;
  --pm-rond: 64px; --pm-icone: 41px;
  --pm-nom: 17px; --pm-raison: 15px; --pm-prix: 17px; --pm-prix-haut: 3px;
  --pm-plus: 46px; --pm-plus-t: 28px; --pm-coche: 18px;
  --pm-bouton: 25px; --pm-bouton-v: 16px; --pm-bouton-haut: 21px;
  --pm-total: 24px; --pm-total-fort: 29px; --pm-total-v: 12px; --pm-total-bas: 16px;
  max-width: 506px;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  padding: var(--pm-haut) var(--pm-cote) 0;
  border-radius: 21px;
}
/* Palier 1 : textes et icône à +15 %, air et en-tête resserrés. */
.pdi-pay-card.pdi-mamie-p1:has(.pdi-mamie) {
  --pm-haut: 22px; --pm-bas: 16px; --pm-logo: 60px; --pm-logo-bas: 8px; --pm-marque: 28px; --pm-tete-bas: 14px;
  --pm-titre-bas: 4px; --pm-sous-bas: 12px; --pm-liste: 10px; --pm-ligne-v: 12px; --pm-rond: 60px;
  --pm-bouton-v: 14px; --pm-bouton-haut: 14px; --pm-total-v: 10px; --pm-total-bas: 0px;
}
/* Palier 2 : textes toujours à +15 %, tout l'air retiré, logo réduit. */
.pdi-pay-card.pdi-mamie-p2:has(.pdi-mamie) {
  --pm-haut: 16px; --pm-bas: 12px; --pm-x: 34px; --pm-x-t: 22px;
  --pm-logo: 48px; --pm-logo-bas: 6px; --pm-marque: 26px; --pm-tete-bas: 10px;
  --pm-titre: 23px; --pm-titre-bas: 3px; --pm-sous: 15px; --pm-sous-bas: 10px;
  --pm-liste: 8px; --pm-ligne-v: 9px; --pm-ligne-h: 14px; --pm-ligne-gap: 14px; --pm-rayon: 14px;
  --pm-rond: 56px; --pm-prix-haut: 2px; --pm-plus: 44px; --pm-plus-t: 26px; --pm-coche: 17px;
  --pm-bouton: 23px; --pm-bouton-v: 12px; --pm-bouton-haut: 10px;
  --pm-total: 21px; --pm-total-fort: 26px; --pm-total-v: 8px; --pm-total-bas: 0px;
}
/* Palier 3 : textes +7 %, icône toujours grande. */
.pdi-pay-card.pdi-mamie-p3:has(.pdi-mamie) {
  --pm-haut: 12px; --pm-bas: 8px; --pm-x: 32px; --pm-x-t: 20px;
  --pm-logo: 40px; --pm-logo-bas: 4px; --pm-marque: 23px; --pm-tete-bas: 6px;
  --pm-titre: 22px; --pm-titre-bas: 2px; --pm-sous: 14px; --pm-sous-bas: 8px;
  --pm-liste: 7px; --pm-ligne-v: 8px; --pm-ligne-h: 12px; --pm-ligne-gap: 12px; --pm-rayon: 14px;
  --pm-rond: 52px; --pm-icone: 40px; --pm-nom: 16px; --pm-raison: 14px; --pm-prix: 16px; --pm-prix-haut: 1px;
  --pm-plus: 42px; --pm-plus-t: 25px; --pm-coche: 16px;
  --pm-bouton: 21px; --pm-bouton-v: 11px; --pm-bouton-haut: 8px;
  --pm-total: 19px; --pm-total-fort: 23px; --pm-total-v: 6px; --pm-total-bas: 0px;
}
/* Palier 4 : les tailles de texte d'avant, sans logo. */
.pdi-pay-card.pdi-mamie-p4:has(.pdi-mamie),
.pdi-pay-card.pdi-mamie-p5:has(.pdi-mamie) {
  --pm-haut: 12px; --pm-bas: 10px; --pm-x: 32px; --pm-x-t: 20px;
  --pm-marque: 21px; --pm-tete-bas: 8px;
  --pm-titre: 21px; --pm-titre-bas: 2px; --pm-sous: 14px; --pm-sous-bas: 8px;
  --pm-liste: 6px; --pm-ligne-v: 7px; --pm-ligne-h: 12px; --pm-ligne-gap: 12px; --pm-rayon: 14px;
  --pm-rond: 48px; --pm-icone: 37px; --pm-nom: 15px; --pm-raison: 13px; --pm-prix: 15px; --pm-prix-haut: 1px;
  --pm-plus: 40px; --pm-plus-t: 24px; --pm-coche: 16px;
  --pm-bouton: 19px; --pm-bouton-v: 11px; --pm-bouton-haut: 8px;
  --pm-total: 18px; --pm-total-fort: 22px; --pm-total-v: 6px; --pm-total-bas: 0px;
}
.pdi-pay-card.pdi-mamie-p4:has(.pdi-mamie) .pdi-pay-logo,
.pdi-pay-card.pdi-mamie-p5:has(.pdi-mamie) .pdi-pay-logo { display: none; }
/* Palier 5 (tout petit écran) : le palier 4 sans le sous-titre. */
.pdi-pay-card.pdi-mamie-p5:has(.pdi-mamie) { --pm-titre-bas: 8px; }
.pdi-pay-card.pdi-mamie-p5:has(.pdi-mamie) .pdi-mamie-sous { display: none; }
.pdi-pay-card:has(.pdi-mamie) .pdi-co-body { padding-bottom: var(--pm-bas); }
.pdi-pay-card:has(.pdi-mamie) .pdi-pay-x { top: 12px; right: 14px; width: var(--pm-x); height: var(--pm-x); font-size: var(--pm-x-t); }
.pdi-pay-card:has(.pdi-mamie) .pdi-pay-head { margin-bottom: var(--pm-tete-bas); }
.pdi-pay-card:has(.pdi-mamie) .pdi-pay-logo { width: var(--pm-logo); height: var(--pm-logo); margin: 0 auto var(--pm-logo-bas); }
.pdi-pay-card:has(.pdi-mamie) .pdi-pay-brand { font-size: var(--pm-marque); line-height: 1.2; }
.pdi-pay-card:has(.pdi-mamie) .pdi-co-suggestions { gap: 0; }
/* Dernier recours, si même le palier 4 déborde (très petit écran, noms très
   longs) : le bouton reste collé en bas, les plats défilent dessous. Quand
   tout tient, il ne bouge pas. Sa bande (couleur de la fenêtre) ne dépasse
   jamais l'espace libre au-dessus du sous-total. La marge du bas est portée
   par le contenu : la position collante se compte depuis le bord intérieur
   de la fenêtre. */
.pdi-pay-card:has(.pdi-mamie) .pdi-co-suggestions .pdi-upsell-suite { position: sticky; bottom: var(--pm-total-v); z-index: 1; margin-top: var(--pm-bouton-haut); padding: var(--pm-bouton-v) 18px; border-radius: 14px; font-size: var(--pm-bouton); box-shadow: 0 0 0 var(--pm-total-v) #1b0e0b; }
.pdi-pay-card:has(.pdi-mamie) .pdi-co-summary { padding: var(--pm-total-v) 0; margin-bottom: var(--pm-total-bas); font-size: var(--pm-total); }
.pdi-pay-card:has(.pdi-mamie) .pdi-co-summary strong { font-size: var(--pm-total-fort); }
@media (max-width: 480px) {
  .pdi-pay-card:has(.pdi-mamie) { --pm-haut: 25px; --pm-cote: 18px; --pm-bas: 21px; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) { .pdi-pay-card .pdi-mamie-item { animation: none; } }

/* ===== Le tunnel tient dans l'écran (fondateur, 26/09) ======================
   « Je ne devrais pas avoir à défiler pour appuyer sur le bouton, tout doit
   tenir. » Toutes les étapes du paiement (livraison ou retrait, adresse,
   coordonnées, paiement) : la fenêtre est bornée par la hauteur VISIBLE
   (100dvh, barres du navigateur comprises — avec 100vh le bouton finissait
   sous la barre) ; js/pdi-order-page.js (coAjusterPalier) essaie la taille
   normale puis ajoute .pdi-co-p1, p2… CUMULÉS (p3 = p1 + p2 + p3) jusqu'à ce
   que la fenêtre ne défile plus. p5 colle le bouton en bas en dernier
   recours. Les champs restent à 16 px au moins : en dessous, l'iPhone zoome
   sur le champ touché. L'étape « suggestions » garde ses propres paliers
   (.pdi-mamie-p*, plus haut). */
.pdi-pay-card { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }

/* Palier 1 : les blancs d'abord. */
.pdi-pay-card.pdi-co-p1 .pdi-pay-error:empty { min-height: 0; margin: 0; }
.pdi-pay-card.pdi-co-p1 .pdi-pay-head { margin-bottom: 10px; }
.pdi-pay-card.pdi-co-p1 .pdi-pay-logo { width: 48px; height: 48px; margin-bottom: 6px; }
.pdi-pay-card.pdi-co-p1 .pdi-pay-brand { font-size: 24px; line-height: 1.15; }
.pdi-pay-card.pdi-co-p1 .pdi-co-summary { padding: 8px 0; margin-bottom: 10px; }
.pdi-pay-card.pdi-co-p1 .pdi-co-q { margin-bottom: 9px; }
.pdi-pay-card.pdi-co-p1 .pdi-co-form { gap: 8px; }
.pdi-pay-card.pdi-co-p1 .pdi-co-input { padding: 10px 13px; }
.pdi-pay-card.pdi-co-p1 .pdi-co-pickup-note { padding: 10px 12px; margin-bottom: 10px; }
.pdi-pay-card.pdi-co-p1 .pdi-co-choices { gap: 8px; }
.pdi-pay-card.pdi-co-p1 .pdi-co-choice { padding: 12px 14px; }
.pdi-pay-card.pdi-co-p1 .pdi-pay-submit { padding: 12px 16px; }

/* Palier 2 : textes un cran plus petits, les notes sur une ligne. */
.pdi-pay-card.pdi-co-p2 .pdi-pay-logo { width: 36px; height: 36px; margin-bottom: 4px; }
.pdi-pay-card.pdi-co-p2 .pdi-pay-brand { font-size: 21px; }
.pdi-pay-card.pdi-co-p2 .pdi-pay-head { margin-bottom: 8px; }
.pdi-pay-card.pdi-co-p2 .pdi-co-back { font-size: 16px; padding-bottom: 6px; }
.pdi-pay-card.pdi-co-p2 .pdi-co-summary { font-size: 18px; }
.pdi-pay-card.pdi-co-p2 .pdi-co-summary strong { font-size: 21px; }
.pdi-pay-card.pdi-co-p2 .pdi-co-q { font-size: 18px; margin-bottom: 8px; }
.pdi-pay-card.pdi-co-p2 .pdi-co-input { font-size: 18px; padding: 9px 12px; }
.pdi-pay-card.pdi-co-p2 textarea.pdi-co-input { height: calc(1.2em + 20px); min-height: 0; line-height: 1.2; resize: none; }
.pdi-pay-card.pdi-co-p2 .pdi-co-pickup-t { font-size: 12px; margin-bottom: 2px; }
.pdi-pay-card.pdi-co-p2 .pdi-co-pickup-l { font-size: 13px; line-height: 1.35; }
.pdi-pay-card.pdi-co-p2 .pdi-co-pickup-pay { font-size: 12px; }
.pdi-pay-card.pdi-co-p2 .pdi-co-choice-t { font-size: 19px; }
.pdi-pay-card.pdi-co-p2 .pdi-co-choice-s { font-size: 15px; }
.pdi-pay-card.pdi-co-p2 .pdi-pay-submit { font-size: 20px; padding: 11px 14px; }
.pdi-pay-card.pdi-co-p2 .pdi-pay-line { font-size: 17px; line-height: 1.6; }
.pdi-pay-card.pdi-co-p2 .pdi-pay-line-total { font-size: 20px; }
.pdi-pay-card.pdi-co-p2 .pdi-co-ok-note,
.pdi-pay-card.pdi-co-p2 .pdi-co-quote-no { font-size: 15px; }
.pdi-pay-card.pdi-co-p2 .pdi-pay-secure { font-size: 14px; margin-top: 8px; }

/* Palier 3 : plus de logo, champs à 16 px (le plancher de l'iPhone). */
.pdi-pay-card.pdi-co-p3 .pdi-pay-logo { display: none; }
.pdi-pay-card.pdi-co-p3 .pdi-pay-head { margin-bottom: 6px; padding: 0 36px; }
.pdi-pay-card.pdi-co-p3 .pdi-pay-brand { font-size: 18px; }
.pdi-pay-card.pdi-co-p3 .pdi-co-summary { font-size: 16px; padding: 6px 0; margin-bottom: 8px; }
.pdi-pay-card.pdi-co-p3 .pdi-co-summary strong { font-size: 19px; }
.pdi-pay-card.pdi-co-p3 .pdi-co-q { font-size: 16px; margin-bottom: 6px; }
.pdi-pay-card.pdi-co-p3 .pdi-co-form { gap: 6px; }
.pdi-pay-card.pdi-co-p3 .pdi-co-input { font-size: 16px; padding: 8px 11px; }
.pdi-pay-card.pdi-co-p3 .pdi-co-pickup-note { padding: 8px 10px; margin-bottom: 8px; }
.pdi-pay-card.pdi-co-p3 .pdi-co-pickup-l { line-height: 1.3; }
.pdi-pay-card.pdi-co-p3 .pdi-co-choice { padding: 10px 12px; }
.pdi-pay-card.pdi-co-p3 .pdi-co-choice-t { font-size: 17px; }
.pdi-pay-card.pdi-co-p3 .pdi-co-choice-s { font-size: 14px; }
.pdi-pay-card.pdi-co-p3 .pdi-pay-submit { font-size: 18px; padding: 10px 14px; }
.pdi-pay-card.pdi-co-p3 .pdi-co-back { font-size: 15px; padding-bottom: 4px; }

/* Palier 4 : le nom du restaurant en petit, la croix plus près du bord. */
.pdi-pay-card.pdi-co-p4 { padding-top: 14px; }
.pdi-pay-card.pdi-co-p4 .pdi-pay-brand { font-size: 15px; }
.pdi-pay-card.pdi-co-p4 .pdi-pay-x { top: 8px; width: 30px; height: 30px; font-size: 19px; }
.pdi-pay-card.pdi-co-p4 .pdi-co-pickup-l { font-size: 12px; }
.pdi-pay-card.pdi-co-p4 .pdi-pay-line { font-size: 15px; line-height: 1.45; }
.pdi-pay-card.pdi-co-p4 .pdi-pay-secure { display: none; }
.pdi-pay-card.pdi-co-p4 .pdi-co-quote-ok { padding: 8px 10px; margin-bottom: 6px; }

/* Palier 5 : si rien ne suffit, le bouton de l'étape reste collé en bas
   (le contenu défile dessous, sa bande a la couleur de la fenêtre). Après un
   devis de livraison, c'est « Continuer au paiement » qui colle. */
.pdi-pay-card.pdi-co-p5 { padding-bottom: 0; }
.pdi-pay-card.pdi-co-p5 .pdi-co-body { padding-bottom: 10px; }
.pdi-pay-card.pdi-co-p5 form:not(:has(.pdi-co-continue)) > .pdi-pay-submit,
.pdi-pay-card.pdi-co-p5 .pdi-co-continue { position: sticky; bottom: 8px; z-index: 2; box-shadow: 0 0 0 8px #1b0e0b; }

/* ===== Code promo du tunnel (26/09) =========================================
   Un lien discret aux étapes coordonnées / adresse (seulement si le
   restaurant a des codes actifs) ; ouvert : le champ et « Appliquer » sur une
   ligne ; appliqué : une ligne verte avec « Retirer ». La remise apparaît
   ensuite dans le détail du paiement (.pdi-pay-line-remise). */
.pdi-co-promo { margin: 2px 0; font-size: 16px; color: #e9ddd4; }
.pdi-co-promo .pdi-co-link { font-size: inherit; }
.pdi-co-promo-ligne { display: flex; gap: 8px; }
.pdi-co-promo-ligne .pdi-co-input { flex: 1 1 auto; min-width: 0; text-transform: uppercase; }
.pdi-co-promo-appliquer { flex: 0 0 auto; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: #f6efe9; border-radius: 10px; padding: 0 16px; font-size: 17px; font-weight: 700; cursor: pointer; }
.pdi-co-promo-appliquer:disabled { opacity: .6; cursor: default; }
.pdi-co-promo-msg { margin: 6px 0 0; font-size: 14px; line-height: 1.35; color: #ffb4a3; }
.pdi-co-promo-msg:empty { display: none; }
.pdi-co-promo--ok { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: #7fdca0; font-weight: 600; }
.pdi-pay-line-remise span:last-child { color: #7fdca0; }
.pdi-pay-card.pdi-co-p2 .pdi-co-promo { font-size: 14px; }
.pdi-pay-card.pdi-co-p2 .pdi-co-promo-appliquer { font-size: 15px; padding: 0 12px; }

/* 07/10 (fondateur : « le plus à l'intérieur du cercle rouge n'est pas aligné ») : le signe est un SVG centré — sa
   boîte ne s'assoit plus sur une ligne de base (span en flex, svg en bloc) ; le « + » un peu plus grand que la coche. */
.pdi-upsell-ajout > span, .pdi-mamie-ajout > span { display: flex; align-items: center; justify-content: center; line-height: 0; }
.pdi-upsell-ajout svg, .pdi-mamie-ajout svg { display: block; flex: none; }
.pdi-upsell-ajout svg.pdi-signe-plus { width: 16px; height: 16px; }
.pdi-pay-card .pdi-mamie-ajout svg.pdi-signe-plus { width: calc(var(--pm-plus-t, 24px) * .8); height: calc(var(--pm-plus-t, 24px) * .8); }

/* ===== La fenêtre du tunnel PEINTE (fondateur, 04/11) =======================
   « Mets une image en fond comme ici pour chaque site » : media.checkoutBg
   { d, m, w } posé par js/pdi-order-page.js (poserFondCheckout) en variables
   --pdi-co-fond-d/m/w + la classe .pdi-co-peint. d = bureau 2:3, m = téléphone
   1:2, w = l'étape paiement au bureau (large, 3:2). La fenêtre prend les
   proportions de son image (aspect-ratio, plafonnée par la hauteur visible :
   les paliers resserrent le contenu comme avant) ; le décor vit sur les bords,
   le contenu reste dans la zone calme (marges plus larges) et un voile sombre
   au centre garde le texte blanc lisible. Sous l'image, la couleur d'avant :
   jamais de noir pendant le chargement. Sans image : rien ne change. */
.pdi-pay-modal .pdi-pay-card.pdi-co-peint {
  display: flex;
  flex-direction: column;
  aspect-ratio: 2 / 3;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  padding: 40px 44px 30px;
  background-color: #1b0e0b;
  background-image:
    radial-gradient(ellipse 78% 70% at 50% 50%, rgba(16, 8, 6, .62) 0%, rgba(16, 8, 6, .46) 58%, rgba(16, 8, 6, .10) 100%),
    var(--pdi-co-fond-d);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  border-color: rgba(255, 255, 255, .18);
}
/* Le contenu se centre dans la hauteur ; les marges automatiques retombent à
   0 quand il déborde (jamais de haut coupé, la fenêtre défile comme avant). */
.pdi-pay-modal .pdi-pay-card.pdi-co-peint > .pdi-pay-head { margin-top: auto; flex: none; }
.pdi-pay-modal .pdi-pay-card.pdi-co-peint > .pdi-co-body { margin-bottom: auto; flex: none; }
.pdi-pay-modal .pdi-pay-card.pdi-co-peint:has(.pdi-mamie) { padding: 40px 44px 0; }
.pdi-pay-modal .pdi-pay-card.pdi-co-peint .pdi-pay-brand,
.pdi-pay-modal .pdi-pay-card.pdi-co-peint .pdi-co-q,
.pdi-pay-modal .pdi-pay-card.pdi-co-peint .pdi-mamie-titre,
.pdi-pay-modal .pdi-pay-card.pdi-co-peint .pdi-mamie-sous,
.pdi-pay-modal .pdi-pay-card.pdi-co-peint .pdi-co-summary { text-shadow: 0 1px 3px rgba(0, 0, 0, .75); }
.pdi-pay-modal .pdi-pay-card.pdi-co-peint .pdi-pay-x { background: rgba(16, 8, 6, .62); top: 14px; right: 16px; }
/* Les lignes et les choix : un verre sombre au lieu de l'aplat, le décor
   transparaît à peine, le texte garde son contraste. */
.pdi-pay-modal .pdi-pay-card.pdi-co-peint .pdi-mamie-item,
.pdi-pay-modal .pdi-pay-card.pdi-co-peint .pdi-co-choice,
.pdi-pay-modal .pdi-pay-card.pdi-co-peint .pdi-co-pickup-note,
.pdi-pay-modal .pdi-pay-card.pdi-co-peint .pdi-co-quote-ok,
.pdi-pay-modal .pdi-pay-card.pdi-co-peint .pdi-co-quote-no {
  background: rgba(22, 11, 9, .74);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.pdi-pay-modal .pdi-pay-card.pdi-co-peint .pdi-co-choice:hover { background: rgba(60, 14, 18, .80); }
/* Les bandes collantes (dernier recours des paliers) n'ont plus la couleur
   de la fenêtre unie : un halo du voile, pas un rectangle brun. */
.pdi-pay-modal .pdi-pay-card.pdi-co-peint:has(.pdi-mamie) .pdi-co-suggestions .pdi-upsell-suite,
.pdi-pay-modal .pdi-pay-card.pdi-co-peint.pdi-co-p5 .pdi-co-continue,
.pdi-pay-modal .pdi-pay-card.pdi-co-peint.pdi-co-p5 form:not(:has(.pdi-co-continue)) > .pdi-pay-submit { box-shadow: 0 0 14px 6px rgba(16, 8, 6, .55); }
/* Étape paiement au bureau : la fenêtre large prend l'image large. */
@media (min-width: 768px) {
  .pdi-pay-modal .pdi-pay-card.pdi-co-peint.pdi-pay-card--pay {
    aspect-ratio: auto;
    padding: 34px 54px 26px;
    background-image:
      radial-gradient(ellipse 80% 74% at 50% 50%, rgba(16, 8, 6, .66) 0%, rgba(16, 8, 6, .50) 60%, rgba(16, 8, 6, .14) 100%),
      var(--pdi-co-fond-w, var(--pdi-co-fond-d));
  }
}
/* Téléphone : l'image du téléphone, des marges un peu moins larges. */
@media (max-width: 767px) {
  .pdi-pay-modal .pdi-pay-card.pdi-co-peint {
    aspect-ratio: 1 / 2;
    padding: 34px 28px 24px;
    background-image:
      radial-gradient(ellipse 82% 72% at 50% 50%, rgba(16, 8, 6, .64) 0%, rgba(16, 8, 6, .48) 60%, rgba(16, 8, 6, .12) 100%),
      var(--pdi-co-fond-m, var(--pdi-co-fond-d));
  }
  .pdi-pay-modal .pdi-pay-card.pdi-co-peint:has(.pdi-mamie) { padding: 34px 26px 0; }
}

/* ===== Les BOUTONS du tunnel PEINTS (fondateur, 04/11) ======================
   « Mets le truc des pages commander au lieu du bouton blanc background rouge
   générique » : poserBoutonsCheckout (js/pdi-order-page.js) pose, si le site
   les a, .pdi-co-plus-peint (le « + » peint de /commander, media.addButton)
   et .pdi-co-btn-peint (la barre peinte de /commander, media.cartBar : fond
   seul, bande sombre mesurée — padL/padR — pour du texte BLANC). Les grands
   boutons (.pdi-pay-submit : Non merci, Vérifier la livraison, Continuer au
   paiement, Payer, WhatsApp…) gardent leur texte, posé dans la bande. Survol :
   l'effet négatif de tous les boutons du site. Sans ces images : rien ne
   change. */
.pdi-pay-modal .pdi-pay-card.pdi-co-plus-peint .pdi-mamie-ajout.pdi-mamie-ajout,
.pdi-pay-modal .pdi-pay-card.pdi-co-plus-peint .pdi-upsell-ajout.pdi-upsell-ajout {
  background: transparent var(--pdi-co-plus) center / contain no-repeat;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #fff;
  transition: filter .3s ease, transform .12s ease;
}
.pdi-pay-modal .pdi-pay-card.pdi-co-plus-peint .pdi-mamie-ajout .pdi-signe-plus,
.pdi-pay-modal .pdi-pay-card.pdi-co-plus-peint .pdi-upsell-ajout .pdi-signe-plus { visibility: hidden; }
.pdi-pay-modal .pdi-pay-card.pdi-co-plus-peint .pdi-mamie-ajout .pdi-signe-coche,
.pdi-pay-modal .pdi-pay-card.pdi-co-plus-peint .pdi-upsell-ajout .pdi-signe-coche { filter: drop-shadow(0 0 2px rgba(0, 0, 0, .9)) drop-shadow(0 0 4px rgba(0, 0, 0, .7)); }
.pdi-pay-modal .pdi-pay-card.pdi-co-plus-peint .pdi-mamie-ajout.pdi-mamie-ajout:hover,
.pdi-pay-modal .pdi-pay-card.pdi-co-plus-peint .pdi-upsell-ajout.pdi-upsell-ajout:hover { filter: invert(1) hue-rotate(180deg); }
.pdi-pay-modal .pdi-pay-card.pdi-co-btn-peint .pdi-pay-submit.pdi-pay-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: var(--pdi-co-barre-ar, 6);
  height: auto;
  min-height: 0;
  padding: 0 var(--pdi-co-barre-pr, 14%) 0 var(--pdi-co-barre-pl, 14%);
  border: 0;
  border-radius: 0;
  background: transparent var(--pdi-co-barre) center / 100% 100% no-repeat;
  box-shadow: none;
  color: #fff;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .75);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .40));
  transition: filter .3s ease, opacity .15s ease;
}
.pdi-pay-modal .pdi-pay-card.pdi-co-btn-peint .pdi-pay-submit.pdi-pay-submit:hover { filter: invert(1) hue-rotate(180deg); }
.pdi-pay-modal .pdi-pay-card.pdi-co-btn-peint .pdi-pay-submit.pdi-pay-submit:disabled { opacity: .65; filter: none; }
/* Étape paiement large (bureau, 1200 px) : la barre garde la taille d'un bouton, centrée — jamais une plaque de 180 px. */
.pdi-pay-modal .pdi-pay-card.pdi-co-btn-peint .pdi-pay-submit.pdi-pay-submit { max-width: 460px; margin-left: auto; margin-right: auto; }
.pdi-pay-modal .pdi-pay-card--pay.pdi-co-btn-peint .pdi-pay-submit.pdi-pay-submit { max-width: 520px; font-size: 18px; white-space: nowrap; }
/* Le « + » peint est une forme (étiquette, médaillon) : 30 % plus grand que le rond d'avant pour se lire. Au téléphone, le
   texte des grands boutons tient sur une ligne dans la bande. */
.pdi-pay-modal .pdi-pay-card.pdi-co-plus-peint .pdi-mamie-ajout.pdi-mamie-ajout { flex-basis: calc(var(--pm-plus, 40px) * 1.3); width: calc(var(--pm-plus, 40px) * 1.3); height: calc(var(--pm-plus, 40px) * 1.3); }
.pdi-pay-modal .pdi-pay-card.pdi-co-plus-peint .pdi-upsell-ajout.pdi-upsell-ajout { width: 44px; height: 44px; min-width: 44px; }
@media (max-width: 480px) {
  .pdi-pay-modal .pdi-pay-card.pdi-co-btn-peint .pdi-pay-submit.pdi-pay-submit { font-size: 18px; white-space: nowrap; }
}