/** Shopify CDN: Minification failed

Line 51:7 Unexpected "}"
Line 56:62 Unterminated string token
Line 62:77 Unterminated string token
Line 65:80 Unterminated string token

**/
/* ------------------------------------------------------------------
   Orléa — LE STEPPER OCCUPE EXACTEMENT LA BOÌeTE DU BOUTON
   ------------------------------------------------------------------
   Consigne Simon (2026-07-27, soir) : « la quantité n'est pas au même
   niveau que Add to cart, il faudrait que ce soit exactement à la même
   place » — et que l'ajout reste facile à comprendre.

   ÉCART INITIAL (4 cartes de la même rangée, à 1500px) :
     bouton ADD TO CART : top 1006, hauteur 45
     stepper            : top 1020, hauteur 44 — 14px trop bas

   ── CE QUI CLOCHAIT ──

   1. `margin:inherit` (orlea-carte-qty.css) héritait des ~14.75px de
      marge haute du PARENT au lieu de les annuler. → `margin:0`.

   2. `height:100%` ne marche pas : `.ocol-qa` porte
      `padding: 0 19.5px 20.5px` et mesure 65px quand le bouton en fait
      45. Prendre 100% du parent, c'est prendre son padding avec.

   3. Fixer `padding:14px` marchait à 1500px, cassait à 1019px : le
      padding du bouton est un `clamp()` (hauteur 45 → 42 selon l'écran).
      Une constante ne peut pas suivre une valeur variable.

   4. Recopier un clamp « de mémoire » : mon `clamp(10px,.55vw+7.5px,14px)`
      donnait 13.13px là où le bouton calculait 14.14px.

   5. `height:1em` sur les boutons −/+ : `1em` suit LEUR font-size (16px),
      pas celle du libellé (11.64px) — 4px de trop.

   6. `align-items:center` ajouté au passage : il recentrait la pilule
      dans la case et cassait le `top`, stable depuis l'étape 1.
      → ne PAS toucher à l'alignement vertical du conteneur.

   ── LA MÉTHODE QUI TIENT ──
   Lire la règle SOURCE au lieu de la deviner. Trouvée en parcourant
   `document.styleSheets` :

     orlea-carte-v5.css
       .main-collection-section .ocol-qa-btn{
         padding: clamp(11px, 8px + 0.6vw, 15px) clamp(8px, 6px + 0.5vw, 12px);
         font-size: clamp(10.5px, .18vw + 9.8px, 12.5px);   /* = line-height */
       }

   La pilule reprend EXACTEMENT ce clamp de padding ; son contenu est
   borné à la hauteur de ligne du libellé, en unités absolues (jamais en
   `em`, qui suivrait la taille du glyphe ±). Bordure 1px des deux côtés
   — le bouton en a une aussi, je l'avais supposée absente.

   RÉSULTAT : mêmes `top`, `height` et `width` que le bouton, vérifié à
   1018px ET à 1500px, sur une rangée mêlant les deux états.

   LEÇONS :
   · caler la boîte sur l'ÉLÉMENT à remplacer, jamais sur le CONTENEUR ;
   · face à un `clamp()`, aller LIRE la règle source (styleSheets) ;
   · se méfier des unités relatives quand les font-size diffèrent ;
   · vérifier À DEUX LARGEURS AU MOINS — le réglage d'origine était noté
     « vérifié, écart 0 » : vrai à 1010px, faux à 1500px.

   ⚠ SI LE PADDING DU BOUTON CHANGE dans orlea-carte-v5.css, reporter le
   même clamp ici — les deux valeurs sont liées par construction.

   ⚠ Ce fichier ne touche NI la forme NI les couleurs : pilule outline,
   glyphe encre, survol café-pécan et typo restent ceux de
   `orlea-qty-systeme.css` (référence = PDP). Voir
   [[orlea-qty-composant-unique]].
   ------------------------------------------------------------------ */

.main-collection-section .ocol-qa{
  position:relative!important;
}

/* =========================================================
   1. MÊME CONSTRUCTION QUE LE BOUTON — clamp copié de la source
   ========================================================= */
.main-collection-section .ocol-qa .ocol-qty{
  position:absolute!important;
  top:0!important;
  bottom:auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding-top:clamp(11px, 8px + 0.6vw, 15px)!important;
  padding-bottom:clamp(11px, 8px + 0.6vw, 15px)!important;
  border-width:1px!important;
  box-sizing:border-box!important;
}

/* =========================================================
   2. LE CONTENU NE DOIT PAS DÉPASSER LA LIGNE DU LIBELLÉ
   Hauteur bornée au clamp de font-size du bouton, en ABSOLU :
   `1em` suivrait la taille du glyphe ± (16px) et rajouterait 4px.
   Le glyphe reste gros et lisible, il déborde visuellement de sa
   boîte sans la faire grandir.
   Largeur généreuse (38px) pour rester facile à viser.
   ========================================================= */
.main-collection-section .ocol-qa .ocol-qty-btn{
  width:38px!important;
  flex:0 0 38px!important;
  height:clamp(10.5px, .18vw + 9.8px, 12.5px)!important;
  min-height:0!important;
  max-height:clamp(10.5px, .18vw + 9.8px, 12.5px)!important;
  padding:0!important;
  font-size:16px!important;
  line-height:clamp(10.5px, .18vw + 9.8px, 12.5px)!important;
  border-radius:50em!important;
  overflow:visible!important;
}

.main-collection-section .ocol-qa .ocol-qty-val{
  flex:1 1 auto!important;
  text-align:center!important;
  height:clamp(10.5px, .18vw + 9.8px, 12.5px)!important;
  line-height:clamp(10.5px, .18vw + 9.8px, 12.5px)!important;
}