/* Les fenêtres de la prod (app/popups.css, les classes pop-*) quand elles s'ouvrent DANS la nouvelle interface façon
   Shopify (24/10, nuit — Evan : « même les pop-up pour choisir et tout… il faut que ce soit le bon radius, un truc
   vraiment moderne »). html.klintt-shopify est posée par components/shopify/CadreShopify.tsx ; la v5 n'est pas touchée.
   Les cotes : celles du nouvel admin Shopify, mesurées le 24/10 (mémoire popups-shopify-mesurees) — fenêtre blanche au
   rayon 24, ni bandeau ni filet, leur ombre en 5 couches ; champs au rayon 12 avec leur liseré à 13 % ; croix ronde ;
   fond noir à 50 % ; boutons « très arrondis, pas pilule » (mémoire boutons-rayon-ios) ; notre bleu #4190F9. */

html.klintt-shopify {
  --pop-feuille-fond: #FFFFFF;
  --pop-feuille-trait: transparent;
  --pop-feuille-voile: rgba(0, 0, 0, 0.5);
  --pop-feuille-filet: #EBEBEB;
  --pop-panneau-fond: #FFFFFF;
  --pop-panneau-trait: transparent;
  --pop-encre-principale: #101010;
  --pop-encre-seconde: #616161;
  --pop-encre-faible: #8A8A8A;
  --pop-encre-inverse: #FFFFFF;
  --pop-champ-fond: #FFFFFF;
  --pop-champ-trait: transparent;
  --pop-champ-focus: #4190F9;
  --pop-champ-anneau: rgba(65, 144, 249, 0.22);
  --pop-champ-tiret: #D4D4D8;
  --pop-champ-desactive: #F7F7F7;
  --pop-pastille-fond: #F1F1F1;
  --pop-rangee-survol: #F1F1F1;
  --pop-action-encre: #101010;
  --pop-action-bleu: #4190F9;
  --pop-action-verre: #FFFFFF;
  --pop-action-selection: #F7F7F7;
  --pop-segment-encre: #6A6A73;
  /* 06/11 (Evan : « c'est horrible ») : cette interface est claire, même si le document porte data-theme="dark" (cookie ascend_theme). Tout ce
     que le bloc sombre d'app/popups.css redéfinit doit donc revenir ici : un ton oublié donnait un fond #2E2E2E sous une encre #101010.
     lib/shopify/popups-shopify.test.ts le vérifie. */
  --pop-ton-neutre-fond: #F2F2F5;  --pop-ton-neutre-encre: #6E6E77;
  --pop-ton-vert-fond: #E7F5ED;    --pop-ton-vert-encre: #007F3C;
  --pop-ton-orange-fond: #FDF3E0;  --pop-ton-orange-encre: #A06105;
  --pop-ton-rouge-fond: #FDF0EF;   --pop-ton-rouge-encre: #C93C28;
  --pop-ton-bleu-fond: #E8EFFD;    --pop-ton-bleu-encre: #166AD0;
  --pop-rayon-carte: 24px;
  --pop-rayon-panneau: 16px;
  --pop-rayon-tuile: 14px;
  --pop-rayon-zone: 12px;
  --pop-rayon-champ: 12px;
  --pop-rayon-vignette: 10px;
  --pop-rayon-case: 6px;
  --pop-hauteur-champ: 34px;
  --pop-hauteur-bouton: 30px;
  --pop-hauteur-rangee: 40px;
  --pop-espace-bouton: 14px;
  --pop-espace-champ: 12px;
  --pop-ombre-feuille: 0 2px 3px -1px rgba(0,0,0,.06), 0 4px 6px -2px rgba(0,0,0,.06), 0 8px 12px -4px rgba(0,0,0,.06), 0 16px 24px -6px rgba(0,0,0,.06), 0 32px 48px -8px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.08);
  --pop-ombre-bouton: none;
  /* le verre des boutons et des tuiles devient la matière du bouton blanc de Shopify (liseré .07 + trois ombres .03) */
  --pop-verre-creux: 0 2px 20px rgba(0,0,0,.03), 0 5px 20px rgba(0,0,0,.03);
  --pop-verre-arete: 0 0 0 1px rgba(0,0,0,.07);
  --pop-verre-lisere: 0 1px .5px -.5px rgba(0,0,0,.13), 0 1px 2px -.5px rgba(0,0,0,.13);
  /* leur liseré de champ */
  --shop-champ: 0 2px 3px -1px rgba(0,0,0,.04), 0 3px 4px -1.5px rgba(0,0,0,.04), 0 0 0 1px rgba(0,0,0,.13);
  --shop-se: superellipse(1.333);
}

/* la fenêtre : blanche, sans trait (l'ombre porte son liseré), les coins lissés */
html.klintt-shopify .pop-feuille { border: 0; corner-shape: var(--shop-se); }
html.klintt-shopify .pop-panneau { padding: 4px 20px; gap: 16px; corner-shape: var(--shop-se); }
html.klintt-shopify .pop-tete { padding: 19px 20px 4px; }

/* l'en-tête : un titre 15, pas de tuile d'icône (le nouvel admin n'en a pas) ; la croix ronde, blanche */
html.klintt-shopify .pop-pastille-entete { display: none; }
html.klintt-shopify .pop-titre { font-size: 15px; line-height: 22px; letter-spacing: -.15px; }
html.klintt-shopify .pop-sous { font-size: 13px; font-weight: 400; line-height: 20px; }
html.klintt-shopify .pop-fermer {
  width: 28px; height: 28px; border-radius: 50%; background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(0,0,0,.07), 0 2px 20px rgba(0,0,0,.03), 0 5px 20px rgba(0,0,0,.03), 0 8px 60px rgba(0,0,0,.03);
}

/* les textes du corps : 13, comme chez eux */
html.klintt-shopify .pop-feuille .pop-texte, html.klintt-shopify .pop-feuille .pop-aide { font-size: 13px; font-weight: 400; line-height: 20px; }
html.klintt-shopify .pop-feuille .pop-lib { font-size: 13px; font-weight: 400; color: #101010; }
html.klintt-shopify .pop-feuille .pop-recap-lib { font-size: 13px; font-weight: 400; color: #616161; }
html.klintt-shopify .pop-feuille .pop-recap-val { font-size: 13px; }
html.klintt-shopify .pop-feuille .pop-section-titre { font-size: 15px; }

/* les champs : sans trait, leur liseré et leurs deux ombres ; au focus, l'anneau bleu */
html.klintt-shopify .pop-saisie {
  border-color: transparent; box-shadow: var(--shop-champ); corner-shape: var(--shop-se);
  font-size: 13px; font-weight: 400;
}
html.klintt-shopify .pop-recherche-champ, html.klintt-shopify .pop-saisie-interne, html.klintt-shopify .pop-unite { font-size: 13px; font-weight: 400; }
html.klintt-shopify .pop-saisie:focus, html.klintt-shopify .pop-saisie:focus-within { border-color: transparent; box-shadow: var(--shop-champ), 0 0 0 3px var(--pop-champ-anneau); }
html.klintt-shopify .pop-feuille input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not(.pop-saisie):not(.pop-recherche-champ):not(.pop-saisie-interne):not(.pop-titre-champ),
html.klintt-shopify .pop-feuille textarea:not(.pop-saisie),
html.klintt-shopify .pop-feuille select:not(.pop-saisie) {
  border-color: transparent !important; box-shadow: var(--shop-champ) !important; border-radius: 12px !important; corner-shape: var(--shop-se);
}

/* les boutons : 30 de haut, rayon 13 (≈ 0,43 × h), 13 px ; l'action pleine = le bouton bleu de shop.js */
html.klintt-shopify .pop-btn { font-size: 13px; border-radius: 13px; corner-shape: var(--shop-se); padding: 0 var(--pop-espace-bouton); }
html.klintt-shopify .pop-btn-bleu, html.klintt-shopify .pop-btn-encre {
  background: #4190F9;
  background-image: radial-gradient(50% 50% at 50% 0%, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 100%), radial-gradient(49.59% 37.11% at 50.41% 101.56%, rgba(255,255,255,.15) 0%, rgba(255,255,255,0) 66.46%);
  color: #FFFFFF;
  box-shadow: 0 1px .5px -.5px rgba(0,0,0,.13), 0 1px 2px -.5px rgba(0,0,0,.13), 0 4px 6px -2px rgba(0,0,0,.13), 0 2px 3px -1.5px rgba(0,0,0,.13), inset 0 0 4px 1px #4190F9, inset 0 0 4px 2px rgba(255,255,255,.1), inset 0 0 12px -6px rgba(255,255,255,.75);
}
html.klintt-shopify .pop-btn-danger { box-shadow: 0 1px 2px -.5px rgba(0,0,0,.13), 0 4px 6px -2px rgba(0,0,0,.13); }
html.klintt-shopify .pop-btn-verre { background: #FFFFFF; color: #101010; box-shadow: 0 0 0 1px rgba(0,0,0,.07), 0 2px 20px rgba(0,0,0,.03), 0 5px 20px rgba(0,0,0,.03), 0 8px 60px rgba(0,0,0,.03); }
html.klintt-shopify .pop-feuille .dv4-btn-neutre:not(.pop-btn), html.klintt-shopify .pop-feuille .dv4-btn-primaire:not(.pop-btn),
html.klintt-shopify .pop-feuille .dv4-btn-encre:not(.pop-btn), html.klintt-shopify .pop-feuille .dv4-btn-danger:not(.pop-btn) { border-radius: 13px !important; corner-shape: var(--shop-se); }
html.klintt-shopify .pop-feuille .dv4-btn-neutre:not(.pop-btn) { background: #FFFFFF !important; box-shadow: 0 0 0 1px rgba(0,0,0,.07), 0 2px 20px rgba(0,0,0,.03), 0 5px 20px rgba(0,0,0,.03) !important; }
html.klintt-shopify .pop-feuille .dv4-btn-primaire:not(.pop-btn), html.klintt-shopify .pop-feuille .dv4-btn-encre:not(.pop-btn) { background: #4190F9 !important; color: #FFFFFF !important; }

/* le segmenté : blanc posé sur gris (leurs réglages) ; la note grise ; les tons */
html.klintt-shopify .pop-seg { background: #F1F1F1; border-radius: 13px; corner-shape: var(--shop-se); box-shadow: none; }
html.klintt-shopify .pop-seg-pastille { background: #FFFFFF; border-radius: 11px; box-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.1); }
html.klintt-shopify .pop-note { background: #F7F7F7; border-radius: 12px; corner-shape: var(--shop-se); box-shadow: none; }
html.klintt-shopify .pop-bascule { border-radius: 12px; corner-shape: var(--shop-se); }

/* U6 (26/10, Evan : « Republier : du texte invisible sur une pilule blanche, et les pilules ont une animation
   dégueulasse » ; décision 5 : les animations en flou de la coque, simples, sans rebond, rien qui arrive l'un après
   l'autre).
   1. Le segmenté (« Cette annonce | Les 2 annonces », « Pourcentage | Montant ») : la pastille choisie est blanche ici,
      mais son texte gardait l'encre « sur couleur » (blanche) : il était invisible. Texte noir sur la pastille, gris
      autour, 13 px comme chez Shopify. */
html.klintt-shopify .pop-seg-item { font-size: 13px; color: #616161; }
html.klintt-shopify .pop-seg-item[data-actif] { color: #101010; }
/* 2. La pastille glissait toute seule à l'ouverture (re-mesurée quand la police finit de charger, elle partait de sa
      place d'avant) : plus de glissement à l'ouverture ; elle glisse seulement quand on la choisit (souris dessus, ou
      focus clavier), en 200 ms, la courbe de la coque. */
html.klintt-shopify .pop-seg-pastille { transition: none; }
html.klintt-shopify .pop-seg:hover .pop-seg-pastille, html.klintt-shopify .pop-seg:focus-within .pop-seg-pastille {
  transition: left .2s cubic-bezier(.2, .8, 0, 1), width .2s cubic-bezier(.2, .8, 0, 1);
}
/* 3. Les pilules de prix (−5 %, −10 %…) : blanches sans liseré sur la fenêtre blanche, elles ne se voyaient pas. Les
      puces de Shopify : #F1F1F1, 28 de haut, rayon 12, 13 px ; la choisie en bleu, texte blanc (contraste mesuré). */
html.klintt-shopify .republier-puce {
  height: 28px; padding: 0 10px; border-color: transparent; border-radius: 12px; corner-shape: var(--shop-se);
  background: #F1F1F1; color: #303030; font-size: 13px; box-shadow: none;
}
html.klintt-shopify .republier-puce:hover:not(:disabled):not([aria-pressed="true"]) { background: #E3E3E3; }
html.klintt-shopify .republier-puce[aria-pressed="true"] { background: #4190F9; color: #FFFFFF; }
/* 4. L'entrée de toutes les fenêtres : l'entrée en flou de la coque (volet d'Otto, mesuré chez Shopify : scale .975 +
      flou), un seul mouvement de 260 ms — un fondu, 6 px de glissement, 2 px de flou qui se lève. */
@keyframes shop-feuille-entre { from { opacity: 0; transform: scale(calc(var(--k, 1) * .975)) translateY(6px); filter: blur(2px); } }
html.klintt-shopify .pop-feuille { animation: shop-feuille-entre 260ms cubic-bezier(.2, .8, 0, 1) both; }
@media (prefers-reduced-motion: reduce) { html.klintt-shopify .pop-feuille { animation: none; } }

/* 5. Les pastilles de statut suivent aussi data-theme (app/statuts.css) : dans cette interface claire, elles restent claires.
      « adresse à renseigner » passait par là : un fond #5A2700 sur une fenêtre blanche. */
html.klintt-shopify .pst { background: var(--pst-fond, #EAEAEA); color: var(--pst-encre, #333333); }
html.klintt-shopify .pst, html.klintt-shopify .pop-icones { --pst-seconde: var(--pst-seconde-clair, currentColor); }
html.klintt-shopify[data-theme="dark"] .pop-icone { color: var(--pst-encre); }
/* 6. L'interrupteur (« Recevoir une copie de chaque envoi ») lit --color-*, que le thème sombre redéfinit : les valeurs claires de globals.css. */
html.klintt-shopify .liq-sw { --card: #E8E8E8; --ink: #0D0D0D; --board: #FFFFFF; }

/* 7. La fenêtre « Vendu » (components/shopify/vendu.tsx) : l'article en tête, où en un clic, le prix et ce qu'il rapporte côte à côte. */
.vdu-tete { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0 44px 16px 6px; }
.vdu-vignette { flex: none; display: block; width: 48px; height: 48px; border-radius: 12px; corner-shape: superellipse(1.333); object-fit: cover; background: #F1F1F1; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
.vdu-pile { display: flex; flex: none; }
.vdu-pile .vdu-vignette { box-shadow: 0 0 0 2px #fff; }
.vdu-pile .vdu-vignette + .vdu-vignette { margin-left: -28px; }
.vdu-tete-texte { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.vdu-tete-texte b { font: 500 15px/20px var(--pop-police, inherit); color: #101010; letter-spacing: -.15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vdu-tete-texte small { font: 400 12px/16px var(--pop-police, inherit); color: #616161; font-variant-numeric: tabular-nums; }
.vdu-tete-ligne { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; line-height: 16px; color: #616161; }
.vdu-sku { flex: none; padding: 1px 6px; border-radius: 6px; background: #F1F1F1; color: #303030; font-variant-numeric: tabular-nums; }
.vdu-boutique { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vdu-achat { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.vdu-achat small { font-size: 12px; line-height: 16px; color: #616161; }
.vdu-achat b { font-size: 13px; line-height: 18px; font-weight: 500; color: #101010; font-variant-numeric: tabular-nums; }

.vdu-corps { display: flex; flex-direction: column; gap: 14px; }
.vdu-ou { display: flex; flex-wrap: wrap; gap: 6px; }
.vdu-pilule { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px 0 8px; border: 0; border-radius: 12px; corner-shape: superellipse(1.333); background: #fff; color: #303030; font-size: 13px; font-weight: 450; cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,.09), 0 1px 2px rgba(0,0,0,.04); transition: background 120ms ease, box-shadow 120ms ease; }
.vdu-pilule img { display: block; width: 18px; height: 18px; border-radius: 5px; object-fit: cover; }
.vdu-pilule:hover { background: #F7F7F7; }
.vdu-pilule[aria-checked="true"] { background: rgba(65,144,249,.1); color: #101010; box-shadow: 0 0 0 1.5px #4190F9; }
.vdu-pilule:focus-visible, .vdu-mini:focus-visible { outline: 2px solid #4190F9; outline-offset: 1px; }
.vdu-plus { justify-content: center; width: 32px; padding: 0; color: #616161; }

.vdu-prix { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 16px; corner-shape: superellipse(1.333); background: #F7F7F7; }
.vdu-cellule { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 16px 13px; }
.vdu-cellule > span:first-child { font-size: 12px; line-height: 16px; color: #616161; }
.vdu-benefice { border-left: 1px solid #EBEBEB; }
.vdu-benefice b { font-size: 26px; line-height: 34px; font-weight: 600; letter-spacing: -.5px; color: #8A8A8A; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vdu-benefice[data-ton="gain"] b { color: #0C7A43; }
.vdu-benefice[data-ton="perte"] b { color: #D72C0D; }
.vdu-saisie { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
html.klintt-shopify .pop-feuille .vdu-saisie input { flex: 1; min-width: 0; width: 100%; height: auto; padding: 0; border: 0; border-radius: 0; outline: 0; box-shadow: none; background: transparent; color: #101010; font-size: 26px; line-height: 34px; font-weight: 600; letter-spacing: -.5px; font-family: inherit; font-variant-numeric: tabular-nums; }
html.klintt-shopify .pop-feuille .vdu-saisie input::placeholder { color: #C4C4C4; }
.vdu-saisie i { font-style: normal; font-size: 15px; font-weight: 500; color: #8A8A8A; }

.vdu-prix-lot { grid-template-columns: minmax(0, 1fr); }
.vdu-rangees { max-height: 232px; overflow-y: auto; padding: 4px 8px; scrollbar-width: thin; }
.vdu-rangee { display: flex; align-items: center; gap: 10px; padding: 7px 8px; }
.vdu-rangee + .vdu-rangee { border-top: 1px solid #EBEBEB; }
.vdu-rangee .vdu-vignette { width: 36px; height: 36px; border-radius: 10px; }
.vdu-rangee .vdu-tete-texte { gap: 0; }
.vdu-rangee .vdu-tete-texte b { font-size: 13px; line-height: 18px; letter-spacing: 0; }
.vdu-rangee .vdu-saisie { flex: none; align-items: center; width: 96px; height: 30px; box-sizing: border-box; padding: 0 10px; border-radius: 12px; corner-shape: superellipse(1.333); background: #fff; box-shadow: var(--shop-champ); }
html.klintt-shopify .pop-feuille .vdu-rangee .vdu-saisie input { font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: 0; }
.vdu-rangee .vdu-saisie i { font-size: 13px; }
.vdu-prix-lot .vdu-benefice { flex-direction: row; align-items: center; justify-content: space-between; padding: 8px 16px 9px; border-left: 0; border-top: 1px solid #EBEBEB; }
.vdu-prix-lot .vdu-benefice b { font-size: 18px; line-height: 24px; letter-spacing: -.3px; }

.vdu-mini { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border: 0; border-radius: 9px; corner-shape: superellipse(1.333); background: transparent; color: #616161; font-size: 12px; font-weight: 450; cursor: pointer; box-sizing: border-box; width: auto; }
.vdu-mini:hover { background: #F1F1F1; }
.vdu-mini[aria-pressed="true"] { background: #F1F1F1; color: #101010; font-weight: 500; }
.vdu-dates { display: flex; align-items: center; gap: 2px; margin: -4px 0 -6px; }
.vdu-annonce { display: flex; align-items: center; gap: 6px; min-height: 28px; color: #303030; font-size: 13px; line-height: 18px; }
.vdu-annonce > span { flex: 1; min-width: 0; }
.vdu-annonce .vdu-mini { height: 28px; padding: 0 10px; border-radius: 11px; background: #fff; color: #303030; font-size: 13px; box-shadow: 0 0 0 1px rgba(0,0,0,.09), 0 1px 2px rgba(0,0,0,.04); }
.vdu-annonce .vdu-mini:hover { background: #F7F7F7; }
.vdu-annonce .vdu-mini[aria-pressed="true"] { background: rgba(65,144,249,.1); color: #101010; font-weight: 450; box-shadow: 0 0 0 1.5px #4190F9; }