/* ═══════════════════════════════════════════════════════════════════════════
   CUBX Theme — theme-systempay.css
   Overrides CSS isoles pour le SDK Krypton de SystemPay (V4.0).
   ───────────────────────────────────────────────────────────────────────────
   Pourquoi un fichier isole (decision david v2.5.281) :
   - Le SDK Krypton est un composant tiers risque (le SDK injecte ses propres
     styles inline, comportement non-deterministe selon version).
   - Si un update du SDK casse nos overrides un jour, on desactive juste ce
     fichier (commenter 1 ligne dans theme.yml > assets.css) sans toucher a
     theme-checkout.css (5500+ lignes critiques pour tout le tunnel).
   - Modularite : reutilisable tel quel sur idyll.fr prod sans dependance.

   Sources des selecteurs (officiel doc SystemPay) :
   - https://paiement.systempay.fr/doc/fr-FR/rest/V4.0/javascript/redirection/custom_row.html
   - https://paiement.systempay.fr/doc/en/rest/V4.0/javascript/redirection/themes.html
   - https://paiement.systempay.fr/doc/en-EN/rest/V4.0/javascript/guide/payment_form.html

   Classes officielles documentees :
   - .kr-smart-form         : conteneur parent (mode smart form)
   - .kr-embedded           : conteneur form embarque
   - .kr-pan                : champ Numero de la carte
   - .kr-expiry             : champ Date d'expiration MM/AA
   - .kr-security-code      : champ CVV / Code de securite
   - .kr-holder-name        : champ Titulaire de la carte
   - .kr-form-error         : zone d'affichage des erreurs
   - .kr-payment-button     : bouton de paiement final

   IMPORTANT : SystemPay assume qu'il faut !important sur tous les overrides
   car le SDK Krypton injecte ses propres styles inline en post-render. C'est
   directement recommande dans la doc officielle, pas un workaround sale.

   @author    H2J Ecosystem <info@2klove.fr>
   @copyright 2024-2026 H2J sas RCS 978391720
   @since     v2.5.281 (chantier SystemPay pleine largeur + couleur accent)
   @version   v2.5.288 (P-098 resolu : separation box-model bouton/span - span sans padding/width = fin du "second bouton" + texte centre)
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   1. PLEINE LARGEUR DU FORM EMBARQUE
   ───────────────────────────────────────────────────────────────────────────
   Par defaut le .kr-smart-form a une largeur fixe ~380px (selon theme
   Krypton). On force la pleine largeur du conteneur parent uniquement
   dans le contexte du checkout PS pour ne pas impacter d'eventuelles
   autres surfaces SystemPay (pop-in standalone, etc.).
   ═══════════════════════════════════════════════════════════════════════════ */

body.page-order #checkout-payment-step .kr-smart-form {
  width: 100% !important;
  max-width: 100% !important;
}

body.page-order #checkout-payment-step .kr-smart-form .kr-embedded {
  width: 100% !important;
  max-width: 100% !important;
}

/* Chaque champ (Numero / MM-AA / CVV / Titulaire) prend toute la largeur
   disponible. Selecteurs officiels SystemPay. */
body.page-order #checkout-payment-step .kr-smart-form .kr-pan,
body.page-order #checkout-payment-step .kr-smart-form .kr-expiry,
body.page-order #checkout-payment-step .kr-smart-form .kr-security-code,
body.page-order #checkout-payment-step .kr-smart-form .kr-holder-name {
  width: 100% !important;
  max-width: 100% !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. BOUTON PAYER — couleur, taille, hover
   ───────────────────────────────────────────────────────────────────────────
   Le bouton final .kr-payment-button est genere par le SDK Krypton.
   Par defaut il a une couleur neutre dark (#1a1f2c sur theme classic).

   Decision v2.5.281 : couleur dor\u00e9e --cubx-accent (preset CUBX) pour
   coherence visuelle avec les liens CGV (qui sont deja dores), l'icone
   cadenas (idem) et le reste du tunnel checkout.

   Note : si tu prefere garder bleu nuit (haute contrastance, neutre),
   il suffit de commenter le bloc 'background-color' ci-dessous.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- v2.5.288 — P-098 RESOLU DEFINITIVEMENT ---------------------------------
   Diagnostic browser MCP (16/05/2026) : le span enfant du bouton Krypton avait
   son PROPRE box-model. Les versions v2.5.283 a v2.5.287 appliquaient width:100%
   + padding 12/24 + min-height AU SPAN aussi -> le span (box-sizing: content-box
   cote SDK) calculait width 100% PUIS ajoutait 48px de padding => boite reelle
   ~770px de contenu, span pousse a x+24, debordant a droite et en bas du bouton
   parent. Resultat visuel : un "second bouton" dore decale derriere le bouton,
   et le texte non centre (text-align: start herite du SDK).

   CORRECTION : separer en 2 regles distinctes.
     - BOUTON PARENT (.kr-payment-button) : porte TOUT le box-model (width 100%,
       padding, min-height, border-radius, fond). C'est lui le rectangle visible.
       Il est deja en display:flex + justify-content:center.
     - SPAN ENFANT (> span) : porte UNIQUEMENT la typographie + le centrage.
       AUCUN box-model : padding 0, width auto, pas de min-height, fond
       transparent, box-sizing border-box. display:inline-flex pour etre
       centre proprement par le flex parent.
   Valide en live browser MCP : span centre + contenu dans le bouton, plus
   aucun debordement.
   --------------------------------------------------------------------------- */

/* (a) BOUTON PARENT : box-model complet + fond + forme. */
body.page-order #checkout-payment-step .kr-smart-form .kr-embedded .kr-payment-button,
body.page-order #checkout-payment-step .kr-smart-form .kr-payment-button {
  /* Pleine largeur + centrage (recettes doc SystemPay) */
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;

  /* Box-model maitrise par le bouton uniquement */
  box-sizing: border-box !important;
  padding: 12px 24px !important;
  min-height: var(--cubx-input-height, 48px) !important;

  /* Couleur accent CUBX (option B1 par defaut). Pour utiliser le bleu nuit
     a la place (option B3), commenter les 2 lignes ci-dessous. */
  background-color: var(--cubx-accent, #d4af37) !important;
  color: #ffffff !important;

  /* Forme */
  border: none !important;
  border-radius: var(--cubx-radius, 6px) !important;
  cursor: pointer;

  /* Centrage du contenu (le span) */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* Animation hover/active douce */
  transition: background-color 150ms ease, transform 100ms ease, box-shadow 150ms ease !important;
}

/* (b) SPAN ENFANT : typographie + centrage SEULEMENT. Zero box-model.
   Le span est le porteur du texte "PAYER XX,XX EUR". On lui retire tout
   ce qui pourrait creer une boite (padding, width, min-height, fond) pour
   qu'il ne deborde plus du bouton parent. */
body.page-order #checkout-payment-step .kr-smart-form .kr-embedded .kr-payment-button > span,
body.page-order #checkout-payment-step .kr-smart-form .kr-payment-button > span {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;
  line-height: 1 !important;
  text-align: center !important;

  /* Typographie bouton CTA — combinaison J (validee David v2.5.287) :
     Inter 900 + 18px + letter-spacing 1px + text-shadow legere. */
  font-family: var(--cubx-font-primary, 'Inter, system-ui, -apple-system, sans-serif') !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
  text-transform: uppercase !important;
}

/* Hover : assombrir legerement (utilise --cubx-accent-2 si defini, sinon
   fallback sur l'accent principal). v2.5.287 : etendu aussi au > span
   (cf P-098 selecteur SDK Krypton). */
body.page-order #checkout-payment-step .kr-smart-form .kr-embedded .kr-payment-button:hover:not(:disabled),
body.page-order #checkout-payment-step .kr-smart-form .kr-embedded .kr-payment-button:hover:not(:disabled) > span,
body.page-order #checkout-payment-step .kr-smart-form .kr-payment-button:hover:not(:disabled),
body.page-order #checkout-payment-step .kr-smart-form .kr-payment-button:hover:not(:disabled) > span {
  background-color: var(--cubx-accent-2, var(--cubx-accent, #d4af37)) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Active (clic) */
body.page-order #checkout-payment-step .kr-smart-form .kr-embedded .kr-payment-button:active:not(:disabled),
body.page-order #checkout-payment-step .kr-smart-form .kr-payment-button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Disabled (CGV non cochee, validation form en cours, etc.) */
body.page-order #checkout-payment-step .kr-smart-form .kr-embedded .kr-payment-button:disabled,
body.page-order #checkout-payment-step .kr-smart-form .kr-payment-button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. ZONE D'ERREUR — kr-form-error
   ───────────────────────────────────────────────────────────────────────────
   Style coherent avec les autres messages d'erreur du tunnel checkout
   (cf section 6 et 12 de theme-checkout.css : fond rose tres clair, bordure
   gauche rouge, texte rouge fonce).
   ═══════════════════════════════════════════════════════════════════════════ */

body.page-order #checkout-payment-step .kr-smart-form .kr-form-error,
body.page-order #checkout-payment-step .kr-smart-form .kr-embedded .kr-form-error {
  margin-top: 12px;
  padding: 10px 14px;
  font-size: 13px;
  background-color: rgba(239, 68, 68, 0.06);
  border-left: 3px solid var(--h2j-error, #ef4444);
  color: var(--h2j-error, #ef4444);
  border-radius: 4px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. STYLING DES INPUTS (cohérence avec inputs CUBX du tunnel)
   ───────────────────────────────────────────────────────────────────────────
   Note importante : le SDK Krypton utilise des iframes pour les champs
   sensibles (Numero CB, CVV). Les iframes recuperent automatiquement les
   styles de la page parent via un systeme de hidden fields (cf doc :
   "Thanks to a system of hidden fields, the JavaScript client will
   automatically retrieve the styles of your page"). On styline donc les
   wrappers .kr-pan etc., pas les inputs internes.

   Les wrappers gardent la hauteur/border/bg coherents avec les inputs
   CUBX (cf --cubx-input-* tokens).
   ═══════════════════════════════════════════════════════════════════════════ */

body.page-order #checkout-payment-step .kr-smart-form .kr-pan,
body.page-order #checkout-payment-step .kr-smart-form .kr-expiry,
body.page-order #checkout-payment-step .kr-smart-form .kr-security-code,
body.page-order #checkout-payment-step .kr-smart-form .kr-holder-name {
  margin-bottom: 12px !important;
  background-color: var(--cubx-input-bg, #ffffff) !important;
  border: var(--cubx-input-border, 1px solid var(--h2j-border, #e5e7eb)) !important;
  border-radius: var(--cubx-radius, 6px) !important;
  /* La hauteur du wrapper est conservee par Krypton (l'iframe interne a sa
     propre hauteur). On force juste le min-height pour coherence visuelle. */
  min-height: var(--cubx-input-height, 44px) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. MOBILE (< 600px) — Ajustements responsive
   ───────────────────────────────────────────────────────────────────────────
   Sur mobile le form est deja pleine largeur naturellement. On garde juste
   un padding optimise et on assure que le bouton reste tactilement accessible.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 599px) {
  body.page-order #checkout-payment-step .kr-smart-form .kr-embedded .kr-payment-button,
  body.page-order #checkout-payment-step .kr-smart-form .kr-embedded .kr-payment-button > span,
  body.page-order #checkout-payment-step .kr-smart-form .kr-payment-button,
  body.page-order #checkout-payment-step .kr-smart-form .kr-payment-button > span {
    min-height: 52px !important;  /* Cible tactile mobile (Apple HIG : 44pt min) */
    font-size: 16px !important;   /* v2.5.287 : 18px desktop -> 16px mobile, plus lisible */
  }
}


/* ===========================================================================
   6. TRIM DU FOSSE BOUTON PAYER -> BLOC SUIVANT (v2.5.284)
   ---------------------------------------------------------------------------
   Diagnostic via browser MCP (session 15/05/2026) : entre le bouton PAYER
   (.kr-payment-button) et la card reassurance suivante (.cubx-pp-card--reass),
   on observe un fosse de ~95px alors que mon margin-top de la reass n'est
   que 14px. La cause est cumulative :
     - <section id="systempay_standard_rest_wrapper"> ajoute par le module
       SystemPay PrestaShop wrap le .kr-smart-form avec margin-bottom: 48px.
     - .payment-options PS Classic a margin-bottom: 16px.
     - Plus quelques px de line-height/padding interne du bouton.
   Total : ~74-95px d'espace fantome sous le bouton PAYER alors qu'aucun
   element visible n'est rendu entre les 2 cards.

   Solution : neutraliser ces 2 marges en contexte checkout (body.page-order)
   pour ramener l'ecart visuel a ~30px (margin-top: 14px de la reass +
   margin-bottom: 7px natif du .kr-payment-button + line-height residuel).

   Resultat valide en pre-prod via browser MCP : fosse passe de 95px a 31px.
   =========================================================================== */

body.page-order #checkout-payment-step section#systempay_standard_rest_wrapper {
  margin-bottom: 0 !important;
}

body.page-order #checkout-payment-step .payment-options {
  margin-bottom: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   FIN theme-systempay.css
   ═══════════════════════════════════════════════════════════════════════════ */