{"id":9985,"date":"2026-06-05T21:55:25","date_gmt":"2026-06-05T21:55:25","guid":{"rendered":"https:\/\/maisonomeor.fr\/?page_id=9985"},"modified":"2026-06-08T23:05:43","modified_gmt":"2026-06-08T23:05:43","slug":"paiement-commande2","status":"publish","type":"page","link":"https:\/\/maisonomeor.fr\/index.php\/paiement-commande2\/","title":{"rendered":"PAIEMENT (commande2)"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"9985\" class=\"elementor elementor-9985\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2719229 e-flex e-con-boxed e-con e-parent\" data-id=\"2719229\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-486a2bf elementor-widget elementor-widget-heading\" data-id=\"486a2bf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">COMMANDE<\/h2>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5819d42 e-flex e-con-boxed e-con e-parent\" data-id=\"5819d42\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5dc391d elementor-widget elementor-widget-html\" data-id=\"5dc391d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:wght@400;500;600&family=Montserrat:wght@500;600&display=swap\" rel=\"stylesheet\">\n\n<section class=\"checkout-steps\">\n\n    <div class=\"steps-line\"><\/div>\n\n    <div class=\"steps-wrapper\">\n\n        <!-- ETAPE 1 VALIDEE -->\n\n        <div class=\"step completed\">\n            <div class=\"step-circle\">\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\n                    <path d=\"M20 6L9 17L4 12\"\n                        stroke=\"white\"\n                        stroke-width=\"2.5\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\/>\n                <\/svg>\n            <\/div>\n            <div class=\"step-label\">INFORMATIONS<\/div>\n        <\/div>\n\n        <!-- ETAPE 2 VALIDEE -->\n\n        <div class=\"step completed\">\n            <div class=\"step-circle\">\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\n                    <path d=\"M20 6L9 17L4 12\"\n                        stroke=\"white\"\n                        stroke-width=\"2.5\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\/>\n                <\/svg>\n            <\/div>\n            <div class=\"step-label\">LIVRAISON<\/div>\n        <\/div>\n\n        <!-- ETAPE 3 ACTIVE -->\n\n        <div class=\"step active\">\n            <div class=\"step-circle\">3<\/div>\n            <div class=\"step-label\">PAIEMENT<\/div>\n        <\/div>\n\n        <!-- ETAPE 4 -->\n\n        <div class=\"step\">\n            <div class=\"step-circle\">4<\/div>\n            <div class=\"step-label\">CONFIRMATION<\/div>\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<style>\n\n.checkout-steps{\n    position:relative;\n    width:100%;\n    max-width:1400px;\n    margin:20px auto 35px;\n    background:#fff;\n    padding:0 30px;\n}\n\n.steps-line{\n    position:absolute;\n    top:21px;\n    left:170px;\n    right:170px;\n    height:1px;\n    background:#9d9d9d;\n    z-index:1;\n}\n\n.steps-wrapper{\n    display:flex;\n    justify-content:space-between;\n    align-items:flex-start;\n    position:relative;\n    z-index:2;\n}\n\n.step{\n    flex:1;\n    display:flex;\n    flex-direction:column;\n    align-items:center;\n}\n\n.step-circle{\n    width:42px;\n    height:42px;\n    border-radius:50%;\n    border:1px solid #d4b178;\n    background:#fff;\n    color:#000;\n    font-family:'Cormorant Garamond',serif;\n    font-size:24px;\n    font-weight:400;\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    margin-bottom:12px;\n}\n\n.step.completed .step-circle{\n    background:#2c0509;\n    border-color:#2c0509;\n    color:#fff;\n}\n\n.step.active .step-circle{\n    background:#2c0509;\n    border-color:#2c0509;\n    color:#fff;\n}\n\n.step-label{\n    font-family:'Montserrat',sans-serif;\n    font-size:11px;\n    font-weight:600;\n    color:#2c0509;\n    text-transform:uppercase;\n    text-align:center;\n    white-space:nowrap;\n    letter-spacing:0;\n}\n\n@media(max-width:1024px){\n\n    .checkout-steps{\n        padding:0 20px;\n    }\n\n    .steps-line{\n        left:100px;\n        right:100px;\n    }\n\n}\n\n@media(max-width:767px){\n\n    .steps-line{\n        left:60px;\n        right:60px;\n        top:18px;\n    }\n\n    .step-circle{\n        width:36px;\n        height:36px;\n        font-size:20px;\n        margin-bottom:8px;\n    }\n\n    .step-label{\n        font-size:8px;\n    }\n\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-738094c e-flex e-con-boxed e-con e-parent\" data-id=\"738094c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-235ef22 elementor-widget elementor-widget-html\" data-id=\"235ef22\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n  <title>Paiement \u2013 Bague Ga\u00efa<\/title>\n\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:wght@600;700&family=Lato:wght@300;400;700&display=swap\" rel=\"stylesheet\" \/>\n\n  <style>\n    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n    :root {\n      --cream:        #f5f0ea;\n      --cream-border: #e2d9cf;\n      --brown-dark:   #3b1f12;\n      --brown-mid:    #6b3f28;\n      --brown-btn:    #2c1507;\n      --brown-light:  #9b7b6a;\n      --text-main:    #2c1f14;\n      --text-muted:   #8a7265;\n      --input-bg:     #ffffff;\n      --input-border: #d6ccc3;\n      --input-focus:  #9b7b6a;\n      --radius:       6px;\n    }\n\n    html { font-size: 16px; }\n\n    body {\n      font-family: 'Lato', sans-serif;\n      font-weight: 400;\n      color: var(--text-main);\n      background: transparent;\n      min-height: 100vh;\n      padding: 32px 16px;\n    }\n\n    \/* \u2500\u2500 LAYOUT \u2500\u2500 *\/\n    .checkout-wrapper {\n      display: grid;\n      grid-template-columns: 1fr 420px;\n      gap: 28px;\n      max-width: 1060px;\n      margin: 0 auto;\n      align-items: start;\n    }\n\n    @media (max-width: 860px) {\n      .checkout-wrapper { grid-template-columns: 1fr; }\n      .summary-col      { order: -1; }\n    }\n\n    \/* \u2500\u2500 PANELS \u2500\u2500 *\/\n    .panel {\n      background: var(--cream);\n      border: 1px solid var(--cream-border);\n      border-radius: 10px;\n      padding: 36px 36px 40px;\n    }\n\n    @media (max-width: 520px) {\n      .panel { padding: 24px 20px 28px; }\n    }\n\n    \/* \u2500\u2500 TITRES \u2500\u2500 *\/\n    .section-title,\n    .sub-label {\n      font-family: 'Cormorant Garamond', serif;\n      font-weight: 700;\n      font-size: 1.1rem;\n      letter-spacing: 0.06em;\n      text-transform: uppercase;\n      color: var(--brown-dark);\n    }\n\n    .section-title { margin-bottom: 6px; }\n    .section-subtitle {\n      font-family: 'Lato', sans-serif;\n      font-size: 0.82rem;\n      font-weight: 400;\n      color: var(--text-muted);\n      margin-bottom: 28px;\n    }\n\n    \/* \u2500\u2500 M\u00c9THODES DE PAIEMENT \u2500\u2500 *\/\n    .payment-methods { display: flex; flex-direction: column; gap: 10px; margin-bottom: 0; }\n\n    .method-option {\n      border: 1.5px solid var(--cream-border);\n      border-radius: var(--radius);\n      background: var(--input-bg);\n      cursor: pointer;\n      transition: border-color 0.2s, box-shadow 0.2s;\n      overflow: hidden;\n    }\n\n    .method-option.active {\n      border-color: var(--brown-mid);\n      box-shadow: 0 0 0 1px var(--brown-mid);\n    }\n\n    .method-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 16px 18px;\n      gap: 12px;\n    }\n\n    .method-left {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    \/* Radio custom *\/\n    .radio-custom {\n      width: 20px;\n      height: 20px;\n      border-radius: 50%;\n      border: 2px solid var(--cream-border);\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: border-color 0.2s;\n    }\n    .method-option.active .radio-custom {\n      border-color: var(--brown-mid);\n    }\n    .radio-dot {\n      width: 10px;\n      height: 10px;\n      border-radius: 50%;\n      background: var(--brown-mid);\n      opacity: 0;\n      transition: opacity 0.15s;\n    }\n    .method-option.active .radio-dot { opacity: 1; }\n\n    .method-label {\n      font-family: 'Lato', sans-serif;\n      font-size: 0.95rem;\n      font-weight: 400;\n      color: var(--text-main);\n    }\n\n    .method-logos {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      flex-wrap: nowrap;\n    }\n\n    .method-logos svg,\n    .method-logos img {\n      height: 26px;\n      width: auto;\n      display: block;\n    }\n\n    \/* Zone carte d\u00e9pliable *\/\n    .card-fields {\n      padding: 0 18px 20px;\n      display: none;\n      flex-direction: column;\n      gap: 14px;\n    }\n    .card-fields.open { display: flex; }\n\n    .field-label {\n      font-family: 'Lato', sans-serif;\n      font-size: 0.82rem;\n      font-weight: 400;\n      color: var(--text-muted);\n      margin-bottom: 6px;\n      display: block;\n    }\n\n    \/* Inputs *\/\n    input[type=\"text\"],\n    input[type=\"email\"],\n    input[type=\"tel\"],\n    input[type=\"number\"],\n    select,\n    textarea {\n      width: 100%;\n      background: var(--input-bg);\n      border: 1px solid var(--input-border);\n      border-radius: var(--radius);\n      padding: 13px 16px;\n      font-family: 'Lato', sans-serif;\n      font-size: 0.9rem;\n      font-weight: 300;\n      color: var(--text-main);\n      outline: none;\n      transition: border-color 0.2s, box-shadow 0.2s;\n      -webkit-appearance: none;\n      appearance: none;\n      display: block;\n    }\n\n    input::placeholder { color: #b8ada6; font-weight: 300; }\n\n    input:focus {\n      border-color: var(--input-focus);\n      box-shadow: 0 0 0 3px rgba(155,123,106,0.13);\n    }\n\n    .card-row-2 {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 12px;\n    }\n\n    \/* CVC avec ic\u00f4ne ? *\/\n    .cvc-wrap {\n      position: relative;\n    }\n    .cvc-wrap input { padding-right: 44px; }\n    .cvc-icon {\n      position: absolute;\n      right: 14px;\n      top: 50%;\n      transform: translateY(-50%);\n      width: 22px;\n      height: 22px;\n      border-radius: 50%;\n      border: 1.5px solid var(--input-border);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: help;\n    }\n    .cvc-icon span {\n      font-size: 0.72rem;\n      color: var(--text-muted);\n      font-weight: 700;\n      line-height: 1;\n    }\n\n    \/* S\u00e9parateur entre m\u00e9thodes *\/\n    .methods-divider {\n      border: none;\n      border-top: 1px solid var(--cream-border);\n      margin: 0;\n    }\n\n    \/* \u2500\u2500 ADRESSE FACTURATION \u2500\u2500 *\/\n    .billing-section { margin-top: 28px; }\n\n    .billing-options {\n      display: flex;\n      flex-direction: column;\n      gap: 10px;\n      margin-top: 16px;\n    }\n\n    .billing-option {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 15px 18px;\n      border: 1.5px solid var(--cream-border);\n      border-radius: var(--radius);\n      background: var(--input-bg);\n      cursor: pointer;\n      transition: border-color 0.2s;\n    }\n    .billing-option.active {\n      border-color: var(--brown-mid);\n      box-shadow: 0 0 0 1px var(--brown-mid);\n    }\n\n    .billing-option .method-label { font-size: 0.92rem; }\n\n    \/* Checkbox personnalis\u00e9e *\/\n    .checkbox-wrap {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      margin-top: 16px;\n      cursor: pointer;\n    }\n\n    .checkbox-custom {\n      width: 20px;\n      height: 20px;\n      border-radius: 4px;\n      border: 2px solid var(--brown-mid);\n      background: var(--brown-mid);\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .checkbox-custom.unchecked {\n      background: transparent;\n      border-color: var(--cream-border);\n    }\n\n    .checkbox-label {\n      font-family: 'Lato', sans-serif;\n      font-size: 0.88rem;\n      color: var(--text-main);\n    }\n\n    \/* \u2500\u2500 BOUTON PAYER \u2500\u2500 *\/\n    .btn-pay {\n      display: block;\n      width: 100%;\n      padding: 18px 24px;\n      margin-top: 28px;\n      background: var(--brown-btn);\n      color: #fff;\n      font-family: 'Lato', sans-serif;\n      font-size: 0.82rem;\n      font-weight: 700;\n      letter-spacing: 0.18em;\n      text-transform: uppercase;\n      border: none;\n      border-radius: var(--radius);\n      cursor: pointer;\n      transition: background 0.2s, transform 0.1s;\n    }\n    .btn-pay:hover  { background: #3e1d08; }\n    .btn-pay:active { transform: scale(0.99); }\n\n    \/* \u2500\u2500 NOTE S\u00c9CURIT\u00c9 \u2500\u2500 *\/\n    .security-note {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 7px;\n      margin-top: 14px;\n      font-size: 0.8rem;\n      color: var(--text-muted);\n    }\n    .security-note svg { flex-shrink: 0; }\n\n    \/* \u2500\u2500 VALIDATION \u2500\u2500 *\/\n    input.invalid {\n      border-color: #c0392b;\n      box-shadow: 0 0 0 3px rgba(192,57,43,0.10);\n    }\n    .error-msg { font-size: 0.75rem; color: #c0392b; margin-top: 4px; display: none; }\n    .error-msg.visible { display: block; }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       R\u00c9CAPITULATIF (identique \u00e0 l'\u00e9tape pr\u00e9c\u00e9dente)\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .summary-col .panel { padding: 36px 32px 36px; }\n\n    .product-row {\n      display: flex;\n      gap: 16px;\n      align-items: flex-start;\n      margin-bottom: 20px;\n    }\n\n    .product-img {\n      width: 88px;\n      height: 88px;\n      border-radius: 8px;\n      flex-shrink: 0;\n      overflow: hidden;\n      background: #e8ddd4;\n    }\n    .product-img img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      border-radius: 8px;\n      display: block;\n    }\n\n    .product-info { flex: 1; min-width: 0; }\n\n    .product-name {\n      font-family: 'Cormorant Garamond', serif;\n      font-size: 1.25rem;\n      font-weight: 700;\n      color: var(--brown-dark);\n      line-height: 1.2;\n      margin-bottom: 4px;\n    }\n\n    .product-desc {\n      font-size: 0.82rem;\n      color: var(--text-muted);\n      line-height: 1.45;\n      margin-bottom: 6px;\n    }\n\n    .product-size {\n      font-size: 0.82rem;\n      color: var(--text-muted);\n      display: block;\n      margin-bottom: 8px;\n    }\n\n    .product-qty-row {\n      display: flex;\n      justify-content: flex-end;\n    }\n\n    .qty-box {\n      width: 38px;\n      height: 34px;\n      border: 1px solid var(--cream-border);\n      border-radius: 5px;\n      background: var(--input-bg);\n      text-align: center;\n      font-size: 0.9rem;\n      font-family: 'Lato', sans-serif;\n      color: var(--text-main);\n      padding: 0;\n      -webkit-appearance: none;\n      -moz-appearance: textfield;\n      outline: none;\n    }\n    .qty-box::-webkit-inner-spin-button,\n    .qty-box::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }\n\n    .divider { border: none; border-top: 1px solid var(--cream-border); margin: 16px 0; }\n\n    .price-row {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      font-size: 0.88rem;\n      color: var(--text-main);\n      margin-bottom: 8px;\n    }\n    .price-free { color: var(--text-muted); font-size: 0.88rem; }\n\n    .price-row.total {\n      font-family: 'Cormorant Garamond', serif;\n      font-size: 1.35rem;\n      font-weight: 700;\n      color: var(--brown-dark);\n      margin-top: 4px;\n      margin-bottom: 4px;\n    }\n    .price-row.total .label-col { display: flex; flex-direction: column; }\n    .price-row.total .ttc {\n      font-family: 'Lato', sans-serif;\n      font-size: 0.72rem;\n      font-weight: 400;\n      color: var(--text-muted);\n      margin-top: 1px;\n    }\n\n    .trust-list { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }\n    .trust-item { display: flex; align-items: flex-start; gap: 13px; }\n    .trust-icon {\n      width: 36px;\n      height: 36px;\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .trust-text strong { display: block; font-size: 0.85rem; font-weight: 700; color: var(--text-main); line-height: 1.3; }\n    .trust-text span   { font-size: 0.78rem; color: var(--text-muted); }\n\n    \/* Logos paiement r\u00e9cap *\/\n    .payment-section .section-title { margin-bottom: 14px; }\n    .payment-logos {\n      display: flex;\n      align-items: center;\n      gap: 14px;\n      flex-wrap: wrap;\n    }\n    .pay-logo {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: transparent;\n      border: none;\n      padding: 0;\n    }\n    .pay-logo svg,\n    .pay-logo img {\n      height: 32px;\n      width: auto;\n      display: block;\n    }\n  <\/style>\n<\/head>\n\n<body>\n<div class=\"checkout-wrapper\">\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       FORMULAIRE PAIEMENT\n  \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <div class=\"form-col\">\n    <div class=\"panel\">\n\n      <h2 class=\"section-title\">Paiement<\/h2>\n      <p class=\"section-subtitle\">Toutes les transactions sont s\u00e9curis\u00e9es et chiffr\u00e9es<\/p>\n\n      <!-- \u2500\u2500 M\u00e9thodes de paiement \u2500\u2500 -->\n      <div class=\"payment-methods\">\n\n        <!-- Carte bancaire -->\n        <div class=\"method-option active\" id=\"method-card\" onclick=\"selectMethod('card')\">\n          <div class=\"method-header\">\n            <div class=\"method-left\">\n              <div class=\"radio-custom\"><div class=\"radio-dot\"><\/div><\/div>\n              <span class=\"method-label\">Carte bancaire<\/span>\n            <\/div>\n            <div class=\"method-logos\">\n              <!-- \n              <svg viewBox=\"0 0 54 34\" fill=\"none\" xmlns= height=\"26\">\n                <rect width=\"54\" height=\"34\" rx=\"4\" fill=\"#f0f4ff\"\/>\n                <rect x=\"6\" y=\"11\" width=\"12\" height=\"9\" rx=\"2\" fill=\"#1a6bbf\"\/>\n                <rect x=\"20\" y=\"11\" width=\"4\" height=\"9\" rx=\"1\" fill=\"#1a6bbf\" opacity=\"0.45\"\/>\n                <text x=\"6\" y=\"29\" font-size=\"8\" font-family=\"Arial\" fill=\"#1a6bbf\" font-weight=\"900\">CB<\/text>\n              <\/svg>\n              <!-- Mastercard -->\n              <svg viewBox=\"0 0 54 34\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"26\">\n                <rect width=\"54\" height=\"34\" rx=\"4\" fill=\"#f9f9f9\"\/>\n                <circle cx=\"21\" cy=\"17\" r=\"10\" fill=\"#eb001b\"\/>\n                <circle cx=\"33\" cy=\"17\" r=\"10\" fill=\"#f79e1b\"\/>\n                <path d=\"M27 9.5a10 10 0 0 1 0 15 10 10 0 0 1 0-15Z\" fill=\"#ff5f00\"\/>\n              <\/svg>\n              <!-- Visa -->\n              <svg viewBox=\"0 0 70 34\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"26\">\n                <rect width=\"70\" height=\"34\" rx=\"4\" fill=\"#1a1f71\"\/>\n                <text x=\"8\" y=\"24\" font-size=\"18\" font-family=\"Arial,Helvetica,sans-serif\" fill=\"#fff\" font-weight=\"900\" font-style=\"italic\">VISA<\/text>\n              <\/svg>\n              <!-- Alma -->\n              <svg viewBox=\"0 0 66 34\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"26\">\n                <rect width=\"66\" height=\"34\" rx=\"4\" fill=\"#fff\"\/>\n                <text x=\"7\" y=\"24\" font-size=\"17\" font-family=\"Georgia,Times New Roman,serif\" fill=\"#fa5022\" font-weight=\"700\">alma<\/text>\n              <\/svg>\n            <\/div>\n          <\/div>\n\n          <!-- Champs carte -->\n          <div class=\"card-fields open\" id=\"card-fields\">\n            <div>\n              <label class=\"field-label\" for=\"card-num\">Num\u00e9ro de carte<\/label>\n              <input type=\"text\" id=\"card-num\" placeholder=\"1234 1234 1234 1234\" maxlength=\"19\" autocomplete=\"cc-number\" \/>\n              <span class=\"error-msg\" id=\"err-card-num\">Num\u00e9ro de carte invalide.<\/span>\n            <\/div>\n            <div class=\"card-row-2\">\n              <div>\n                <label class=\"field-label\" for=\"card-exp\">Date d'expiration<\/label>\n                <input type=\"text\" id=\"card-exp\" placeholder=\"MM \/ AA\" maxlength=\"7\" autocomplete=\"cc-exp\" \/>\n                <span class=\"error-msg\" id=\"err-card-exp\">Date invalide.<\/span>\n              <\/div>\n              <div>\n                <label class=\"field-label\" for=\"card-cvc\">Code de s\u00e9curit\u00e9<\/label>\n                <div class=\"cvc-wrap\">\n                  <input type=\"text\" id=\"card-cvc\" placeholder=\"CVC\" maxlength=\"4\" autocomplete=\"cc-csc\" \/>\n                  <div class=\"cvc-icon\" title=\"3 chiffres au dos de votre carte (4 pour Amex)\">\n                    <span>?<\/span>\n                  <\/div>\n                <\/div>\n                <span class=\"error-msg\" id=\"err-card-cvc\">CVC invalide.<\/span>\n              <\/div>\n            <\/div>\n            <div>\n              <label class=\"field-label\" for=\"card-name\">Nom du titulaire<\/label>\n              <input type=\"text\" id=\"card-name\" placeholder=\"Nom indiqu\u00e9 sur la carte\" autocomplete=\"cc-name\" \/>\n              <span class=\"error-msg\" id=\"err-card-name\">Nom du titulaire requis.<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- PayPal -->\n        <div class=\"method-option\" id=\"method-paypal\" onclick=\"selectMethod('paypal')\">\n          <div class=\"method-header\">\n            <div class=\"method-left\">\n              <div class=\"radio-custom\"><div class=\"radio-dot\"><\/div><\/div>\n              <span class=\"method-label\">PayPal<\/span>\n            <\/div>\n            <div class=\"method-logos\">\n              <!-- PayPal logo P stylis\u00e9 -->\n              <svg viewBox=\"0 0 38 38\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"32\">\n                <circle cx=\"19\" cy=\"19\" r=\"19\" fill=\"#f5f5f5\"\/>\n                <text x=\"9\" y=\"26\" font-size=\"18\" font-family=\"Arial,Helvetica,sans-serif\" fill=\"#003087\" font-weight=\"900\">P<\/text>\n              <\/svg>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Apple Pay -->\n        <div class=\"method-option\" id=\"method-apple\" onclick=\"selectMethod('apple')\">\n          <div class=\"method-header\">\n            <div class=\"method-left\">\n              <div class=\"radio-custom\"><div class=\"radio-dot\"><\/div><\/div>\n              <span class=\"method-label\">Apple Pay<\/span>\n            <\/div>\n            <div class=\"method-logos\">\n              <svg viewBox=\"0 0 72 34\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"26\">\n                <rect width=\"72\" height=\"34\" rx=\"4\" fill=\"#000\"\/>\n                <path d=\"M22 11.8c.6-.7 1.4-1.2 2.2-1.2.1.9-.3 1.7-.9 2.3-.6.6-1.4 1.1-2.2 1-.1-.8.3-1.5.9-2.1Z\" fill=\"#fff\"\/>\n                <path d=\"M24.4 14.1c-1.3 0-2.4.7-3 .7-.7 0-1.7-.7-2.8-.7-1.5.1-2.8.9-3.5 2.1-1.5 2.3-.4 5.7.9 7.6.6.9 1.3 1.8 2.2 1.8.9 0 1.2-.5 2.3-.5 1.1 0 1.4.5 2.3.5 1 0 1.6-1 2.2-1.8.4-.7.7-1.4.9-2.1-.9-.3-1.6-1.1-1.6-2.3 0-1 .6-1.9 1.5-2.3-.6-.8-1.5-1.3-2.4-1Z\" fill=\"#fff\"\/>\n                <text x=\"32\" y=\"23\" font-size=\"13\" font-family=\"-apple-system,Helvetica,Arial,sans-serif\" fill=\"#fff\" font-weight=\"500\">Pay<\/text>\n              <\/svg>\n            <\/div>\n          <\/div>\n        <\/div>\n\n      <\/div>\n\n      <!-- \u2500\u2500 Checkbox utiliser adresse de livraison \u2500\u2500 -->\n      <div class=\"checkbox-wrap\" id=\"same-address-wrap\" onclick=\"toggleSameAddress()\">\n        <div class=\"checkbox-custom\" id=\"same-addr-checkbox\">\n          <svg width=\"12\" height=\"9\" viewBox=\"0 0 12 9\" fill=\"none\">\n            <polyline points=\"1,4.5 4.5,8 11,1\" stroke=\"#fff\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n          <\/svg>\n        <\/div>\n        <span class=\"checkbox-label\">Utiliser l'adresse de livraison comme adresse de facturation<\/span>\n      <\/div>\n\n      <!-- \u2500\u2500 Adresse de facturation \u2500\u2500 -->\n      <div class=\"billing-section\">\n        <h3 class=\"section-title\" style=\"margin-bottom: 0; margin-top:0;\">Adresse de facturation<\/h3>\n\n        <div class=\"billing-options\" id=\"billing-options\">\n          <div class=\"billing-option active\" id=\"bill-same\" onclick=\"selectBilling('same')\">\n            <div class=\"radio-custom\"><div class=\"radio-dot\"><\/div><\/div>\n            <span class=\"method-label\">M\u00eame adresse que la livraison<\/span>\n          <\/div>\n          <div class=\"billing-option\" id=\"bill-other\" onclick=\"selectBilling('other')\">\n            <div class=\"radio-custom\"><div class=\"radio-dot\"><\/div><\/div>\n            <span class=\"method-label\">Utiliser une autre adresse de facturation<\/span>\n          <\/div>\n        <\/div>\n\n        <!-- Champs adresse alternative (cach\u00e9s par d\u00e9faut) -->\n        <div id=\"alt-billing-fields\" style=\"display:none; margin-top:16px; display: none; flex-direction:column; gap:12px;\">\n          <div style=\"display:grid; grid-template-columns:1fr 1fr; gap:12px;\">\n            <div>\n              <input type=\"text\" id=\"bill-prenom\" placeholder=\"Pr\u00e9nom*\" \/>\n              <span class=\"error-msg\" id=\"err-bill-prenom\">Champ requis.<\/span>\n            <\/div>\n            <div>\n              <input type=\"text\" id=\"bill-nom\" placeholder=\"Nom*\" \/>\n              <span class=\"error-msg\" id=\"err-bill-nom\">Champ requis.<\/span>\n            <\/div>\n          <\/div>\n          <div>\n            <input type=\"text\" id=\"bill-adresse\" placeholder=\"Adresse*\" \/>\n            <span class=\"error-msg\" id=\"err-bill-adresse\">Champ requis.<\/span>\n          <\/div>\n          <div style=\"display:grid; grid-template-columns:1fr 1fr; gap:12px;\">\n            <div>\n              <input type=\"text\" id=\"bill-cp\" placeholder=\"Code postal*\" \/>\n              <span class=\"error-msg\" id=\"err-bill-cp\">Champ requis.<\/span>\n            <\/div>\n            <div>\n              <input type=\"text\" id=\"bill-ville\" placeholder=\"Ville*\" \/>\n              <span class=\"error-msg\" id=\"err-bill-ville\">Champ requis.<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- \u2500\u2500 Bouton Payer \u2500\u2500 -->\n      <button class=\"btn-pay\" type=\"button\" id=\"btn-payer\" onclick=\"handlePayment()\">\n        Payer 90,00\u20ac\n      <\/button>\n\n      <p class=\"security-note\">\n        <svg width=\"14\" height=\"16\" viewBox=\"0 0 14 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n          <path d=\"M11 7V5C11 2.79 9.21 1 7 1C4.79 1 3 2.79 3 5V7\" stroke=\"#8a7265\" stroke-width=\"1.4\" stroke-linecap=\"round\"\/>\n          <rect x=\"1\" y=\"7\" width=\"12\" height=\"8\" rx=\"2\" stroke=\"#8a7265\" stroke-width=\"1.4\"\/>\n          <circle cx=\"7\" cy=\"11.5\" r=\"1\" fill=\"#8a7265\"\/>\n        <\/svg>\n        Paiement 100% s\u00e9curis\u00e9\n      <\/p>\n\n    <\/div>\n  <\/div>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       R\u00c9CAPITULATIF\n  \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <div class=\"summary-col\">\n    <div class=\"panel\">\n\n      <h2 class=\"section-title\" style=\"margin-bottom:20px;\">R\u00e9capitulatif<\/h2>\n\n      <div class=\"product-row\">\n        <div class=\"product-img\">\n          <img decoding=\"async\" src=\"https:\/\/maisonomeor.fr\/wp-content\/uploads\/2026\/06\/bague-gaia-1.png\" alt=\"Bague Ga\u00efa\" \/>\n        <\/div>\n        <div class=\"product-info\">\n          <p class=\"product-name\">Bague Ga\u00efa<\/p>\n          <p class=\"product-desc\">Or jaune 9 carats &amp;<br>Citrine naturelle<\/p>\n          <span class=\"product-size\">Taille : 52<\/span>\n          <div class=\"product-qty-row\">\n            <input type=\"number\" class=\"qty-box\" id=\"qty-input\" value=\"1\" min=\"1\" max=\"99\" aria-label=\"Quantit\u00e9\" \/>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <hr class=\"divider\" \/>\n\n      <div class=\"price-row\">\n        <span>Sous - total<\/span>\n        <span id=\"subtotal\">90,00\u20ac<\/span>\n      <\/div>\n      <div class=\"price-row\">\n        <span>Livraison<\/span>\n        <span class=\"price-free\">Offerte<\/span>\n      <\/div>\n\n      <hr class=\"divider\" \/>\n\n      <div class=\"price-row total\">\n        <div class=\"label-col\">\n          <span>Total<\/span>\n          <span class=\"ttc\">(TTC)<\/span>\n        <\/div>\n        <span id=\"total-price\">90,00\u20ac<\/span>\n      <\/div>\n\n      <hr class=\"divider\" \/>\n\n      <!-- Avantages -->\n      <ul class=\"trust-list\">\n        <li class=\"trust-item\">\n          <span class=\"trust-icon\">\n            <svg width=\"34\" height=\"24\" viewBox=\"0 0 34 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n              <rect x=\"1\" y=\"2\" width=\"20\" height=\"14\" rx=\"2\" stroke=\"#6b3f28\" stroke-width=\"1.5\"\/>\n              <path d=\"M21 7h5.5l4.5 6v5h-10V7Z\" stroke=\"#6b3f28\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/>\n              <circle cx=\"7\"  cy=\"20\" r=\"2.8\" stroke=\"#6b3f28\" stroke-width=\"1.5\"\/>\n              <circle cx=\"26\" cy=\"20\" r=\"2.8\" stroke=\"#6b3f28\" stroke-width=\"1.5\"\/>\n              <line x1=\"10\" y1=\"20\" x2=\"23\" y2=\"20\" stroke=\"#6b3f28\" stroke-width=\"1.5\"\/>\n            <\/svg>\n          <\/span>\n          <div class=\"trust-text\">\n            <strong>Livraison offerte d\u00e8s 80\u20ac d'achat<\/strong>\n            <span>2 \u00e0 4 jours ouvr\u00e9s<\/span>\n          <\/div>\n        <\/li>\n        <li class=\"trust-item\">\n          <span class=\"trust-icon\">\n            <svg width=\"30\" height=\"30\" viewBox=\"0 0 30 30\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n              <path d=\"M5 11C7 5.5 11.8 2 17 2C23.6 2 29 7.4 29 14S23.6 26 17 26c-4.8 0-9-2.7-11.1-6.7\" stroke=\"#6b3f28\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n              <polyline points=\"1,7 5,11 9,7\" stroke=\"#6b3f28\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n            <\/svg>\n          <\/span>\n          <div class=\"trust-text\">\n            <strong>Retour sous 30 jours<\/strong>\n            <span>Satisfait ou rembours\u00e9<\/span>\n          <\/div>\n        <\/li>\n        <li class=\"trust-item\">\n          <span class=\"trust-icon\">\n            <svg width=\"28\" height=\"32\" viewBox=\"0 0 28 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n              <path d=\"M14 1L2 5.5V15c0 8 5.5 13.5 12 15.5C20.5 28.5 26 23 26 15V5.5L14 1Z\" stroke=\"#6b3f28\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/>\n              <polyline points=\"8,16 12,20 20,12\" stroke=\"#6b3f28\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n            <\/svg>\n          <\/span>\n          <div class=\"trust-text\">\n            <strong>Paiement 100% s\u00e9curis\u00e9<\/strong>\n            <span>CB, Paypal, Apple Pay<\/span>\n          <\/div>\n        <\/li>\n        <li class=\"trust-item\">\n          <span class=\"trust-icon\">\n            <svg width=\"30\" height=\"30\" viewBox=\"0 0 30 30\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n              <path d=\"M15 1l3.5 3.5H23l1 4.5 3.5 2.5-1.5 4.5 1.5 4.5L24 22.5 23 27h-4.5L15 30.5 11.5 27H7l-1-4.5-3.5-2L4 16l-1.5-4.5L6 9l1-4.5h4.5L15 1Z\" stroke=\"#6b3f28\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/>\n              <polyline points=\"9,15 12,18 21,10\" stroke=\"#6b3f28\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n            <\/svg>\n          <\/span>\n          <div class=\"trust-text\">\n            <strong>Garantie authenticit\u00e9<\/strong>\n            <span>Sur tous nos bijoux<\/span>\n          <\/div>\n        <\/li>\n      <\/ul>\n\n      <hr class=\"divider\" \/>\n\n      <!-- Logos paiement -->\n      <div class=\"payment-section\">\n        <h3 class=\"section-title\">Nous acceptons<\/h3>\n        <div class=\"payment-logos\">\n          <div class=\"pay-logo\" title=\"Carte bancaire\">\n            <svg viewBox=\"0 0 54 34\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n              <rect width=\"54\" height=\"34\" rx=\"4\" fill=\"#f0f4ff\"\/>\n              <rect x=\"6\" y=\"11\" width=\"12\" height=\"9\" rx=\"2\" fill=\"#1a6bbf\"\/>\n              <rect x=\"20\" y=\"11\" width=\"4\" height=\"9\" rx=\"1\" fill=\"#1a6bbf\" opacity=\"0.45\"\/>\n              <text x=\"6\" y=\"29\" font-size=\"8\" font-family=\"Arial\" fill=\"#1a6bbf\" font-weight=\"900\">CB<\/text>\n            <\/svg>\n          <\/div>\n          <div class=\"pay-logo\" title=\"Apple Pay\">\n            <svg viewBox=\"0 0 72 34\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n              <rect width=\"72\" height=\"34\" rx=\"4\" fill=\"#000\"\/>\n              <path d=\"M22 11.8c.6-.7 1.4-1.2 2.2-1.2.1.9-.3 1.7-.9 2.3-.6.6-1.4 1.1-2.2 1-.1-.8.3-1.5.9-2.1Z\" fill=\"#fff\"\/>\n              <path d=\"M24.4 14.1c-1.3 0-2.4.7-3 .7-.7 0-1.7-.7-2.8-.7-1.5.1-2.8.9-3.5 2.1-1.5 2.3-.4 5.7.9 7.6.6.9 1.3 1.8 2.2 1.8.9 0 1.2-.5 2.3-.5 1.1 0 1.4.5 2.3.5 1 0 1.6-1 2.2-1.8.4-.7.7-1.4.9-2.1-.9-.3-1.6-1.1-1.6-2.3 0-1 .6-1.9 1.5-2.3-.6-.8-1.5-1.3-2.4-1Z\" fill=\"#fff\"\/>\n              <text x=\"32\" y=\"23\" font-size=\"13\" font-family=\"-apple-system,Helvetica,Arial,sans-serif\" fill=\"#fff\" font-weight=\"500\">Pay<\/text>\n            <\/svg>\n          <\/div>\n          <div class=\"pay-logo\" title=\"Mastercard\">\n            <svg viewBox=\"0 0 54 34\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n              <rect width=\"54\" height=\"34\" rx=\"4\" fill=\"#f9f9f9\"\/>\n              <circle cx=\"21\" cy=\"17\" r=\"10\" fill=\"#eb001b\"\/>\n              <circle cx=\"33\" cy=\"17\" r=\"10\" fill=\"#f79e1b\"\/>\n              <path d=\"M27 9.5a10 10 0 0 1 0 15 10 10 0 0 1 0-15Z\" fill=\"#ff5f00\"\/>\n            <\/svg>\n          <\/div>\n          <div class=\"pay-logo\" title=\"PayPal\">\n            <svg viewBox=\"0 0 70 34\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n              <rect width=\"70\" height=\"34\" rx=\"4\" fill=\"#f5f5f5\"\/>\n              <text x=\"8\" y=\"23\" font-size=\"14\" font-family=\"Arial,Helvetica,sans-serif\" fill=\"#003087\" font-weight=\"900\">Pay<\/text>\n              <text x=\"32\" y=\"23\" font-size=\"14\" font-family=\"Arial,Helvetica,sans-serif\" fill=\"#009cde\" font-weight=\"900\">Pal<\/text>\n            <\/svg>\n          <\/div>\n          <div class=\"pay-logo\" title=\"Visa\">\n            <svg viewBox=\"0 0 70 34\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n              <rect width=\"70\" height=\"34\" rx=\"4\" fill=\"#1a1f71\"\/>\n              <text x=\"8\" y=\"24\" font-size=\"18\" font-family=\"Arial,Helvetica,sans-serif\" fill=\"#fff\" font-weight=\"900\" font-style=\"italic\">VISA<\/text>\n            <\/svg>\n          <\/div>\n          <div class=\"pay-logo\" title=\"Alma\">\n            <svg viewBox=\"0 0 66 34\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n              <rect width=\"66\" height=\"34\" rx=\"4\" fill=\"#fff\"\/>\n              <text x=\"7\" y=\"24\" font-size=\"17\" font-family=\"Georgia,Times New Roman,serif\" fill=\"#fa5022\" font-weight=\"700\">alma<\/text>\n            <\/svg>\n          <\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n\n<\/div>\n\n<script>\n  \/* \u2500\u2500\u2500 Prix dynamique \u2500\u2500\u2500 *\/\n  const UNIT_PRICE = 90;\n  const qtyInput   = document.getElementById('qty-input');\n  const subtotalEl = document.getElementById('subtotal');\n  const totalEl    = document.getElementById('total-price');\n  const btnPay     = document.getElementById('btn-payer');\n\n  function formatPrice(n) {\n    return n.toFixed(2).replace('.', ',') + '\u20ac';\n  }\n\n  function updatePrice() {\n    const qty   = Math.max(1, parseInt(qtyInput.value, 10) || 1);\n    qtyInput.value = qty;\n    const total = UNIT_PRICE * qty;\n    subtotalEl.textContent = formatPrice(total);\n    totalEl.textContent    = formatPrice(total);\n    btnPay.textContent     = 'Payer ' + formatPrice(total);\n  }\n\n  qtyInput.addEventListener('input',  updatePrice);\n  qtyInput.addEventListener('change', updatePrice);\n\n  \/* \u2500\u2500\u2500 S\u00e9lection m\u00e9thode \u2500\u2500\u2500 *\/\n  let currentMethod = 'card';\n\n  function selectMethod(method) {\n    currentMethod = method;\n    ['card', 'paypal', 'apple'].forEach(m => {\n      const el = document.getElementById('method-' + m);\n      el.classList.toggle('active', m === method);\n    });\n    const cardFields = document.getElementById('card-fields');\n    cardFields.classList.toggle('open', method === 'card');\n  }\n\n  \/* \u2500\u2500\u2500 Formatage num\u00e9ro carte \u2500\u2500\u2500 *\/\n  document.getElementById('card-num').addEventListener('input', function () {\n    let v = this.value.replace(\/\\D\/g, '').substring(0, 16);\n    this.value = v.replace(\/(.{4})\/g, '$1 ').trim();\n  });\n\n  \/* \u2500\u2500\u2500 Formatage date expiration \u2500\u2500\u2500 *\/\n  document.getElementById('card-exp').addEventListener('input', function () {\n    let v = this.value.replace(\/\\D\/g, '').substring(0, 4);\n    if (v.length >= 3) v = v.slice(0, 2) + ' \/ ' + v.slice(2);\n    this.value = v;\n  });\n\n  \/* \u2500\u2500\u2500 Formatage CVC \u2500\u2500\u2500 *\/\n  document.getElementById('card-cvc').addEventListener('input', function () {\n    this.value = this.value.replace(\/\\D\/g, '').substring(0, 4);\n  });\n\n  \/* \u2500\u2500\u2500 Checkbox m\u00eame adresse \u2500\u2500\u2500 *\/\n  let sameAddress = true;\n\n  function toggleSameAddress() {\n    sameAddress = !sameAddress;\n    const cb = document.getElementById('same-addr-checkbox');\n    cb.classList.toggle('unchecked', !sameAddress);\n\n    \/\/ Synchro avec les boutons radio facturation\n    if (sameAddress) {\n      selectBilling('same');\n    }\n  }\n\n  \/* \u2500\u2500\u2500 S\u00e9lection adresse facturation \u2500\u2500\u2500 *\/\n  let currentBilling = 'same';\n\n  function selectBilling(choice) {\n    currentBilling = choice;\n    document.getElementById('bill-same').classList.toggle('active', choice === 'same');\n    document.getElementById('bill-other').classList.toggle('active', choice === 'other');\n\n    const altFields = document.getElementById('alt-billing-fields');\n    if (choice === 'other') {\n      altFields.style.display = 'flex';\n      \/\/ D\u00e9cocher la checkbox si on choisit une autre adresse\n      sameAddress = false;\n      document.getElementById('same-addr-checkbox').classList.add('unchecked');\n    } else {\n      altFields.style.display = 'none';\n      sameAddress = true;\n      document.getElementById('same-addr-checkbox').classList.remove('unchecked');\n    }\n  }\n\n  \/* \u2500\u2500\u2500 Validation & paiement \u2500\u2500\u2500 *\/\n  function handlePayment() {\n    let valid = true;\n\n    if (currentMethod === 'card') {\n      const cardNum  = document.getElementById('card-num').value.replace(\/\\s\/g, '');\n      const cardExp  = document.getElementById('card-exp').value;\n      const cardCvc  = document.getElementById('card-cvc').value;\n      const cardName = document.getElementById('card-name').value.trim();\n\n      \/\/ Num\u00e9ro\n      const numOk = \/^\\d{16}$\/.test(cardNum);\n      setFieldState('card-num', 'err-card-num', numOk);\n      if (!numOk) valid = false;\n\n      \/\/ Expiration\n      const expOk = \/^\\d{2}\\s*\\\/\\s*\\d{2}$\/.test(cardExp);\n      setFieldState('card-exp', 'err-card-exp', expOk);\n      if (!expOk) valid = false;\n\n      \/\/ CVC\n      const cvcOk = \/^\\d{3,4}$\/.test(cardCvc);\n      setFieldState('card-cvc', 'err-card-cvc', cvcOk);\n      if (!cvcOk) valid = false;\n\n      \/\/ Nom\n      const nameOk = cardName.length > 1;\n      setFieldState('card-name', 'err-card-name', nameOk);\n      if (!nameOk) valid = false;\n    }\n\n    if (currentBilling === 'other') {\n      ['bill-prenom','bill-nom','bill-adresse','bill-cp','bill-ville'].forEach(id => {\n        const el = document.getElementById(id);\n        const ok = el && el.value.trim().length > 0;\n        if (el) setFieldState(id, 'err-' + id, ok);\n        if (!ok) valid = false;\n      });\n    }\n\n    if (valid) {\n      const method = currentMethod === 'card' ? 'carte bancaire'\n                   : currentMethod === 'paypal' ? 'PayPal' : 'Apple Pay';\n      alert('Paiement confirm\u00e9 via ' + method + ' \u2014 merci pour votre commande !');\n    }\n  }\n\n  function setFieldState(inputId, errId, isValid) {\n    const input = document.getElementById(inputId);\n    const err   = document.getElementById(errId);\n    if (!input) return;\n    if (isValid) {\n      input.classList.remove('invalid');\n      if (err) err.classList.remove('visible');\n    } else {\n      input.classList.add('invalid');\n      if (err) err.classList.add('visible');\n    }\n  }\n\n  \/\/ Live feedback sur les champs carte\n  ['card-num','card-exp','card-cvc','card-name'].forEach(id => {\n    const el = document.getElementById(id);\n    if (el) {\n      el.addEventListener('input', function () {\n        if (this.value.trim()) {\n          this.classList.remove('invalid');\n          const err = document.getElementById('err-' + id);\n          if (err) err.classList.remove('visible');\n        }\n      });\n    }\n  });\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-85d9e41 e-flex e-con-boxed e-con e-parent\" data-id=\"85d9e41\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2d00e64 elementor-widget elementor-widget-html\" data-id=\"2d00e64\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<section class=\"omeor-guarantees\">\n\n    <div class=\"guarantee\">\n\n        <div class=\"icon\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n                <rect x=\"1\" y=\"7\" width=\"15\" height=\"9\"><\/rect>\n                <path d=\"M16 10h4l3 3v3h-7z\"><\/path>\n                <circle cx=\"6\" cy=\"18\" r=\"2\"><\/circle>\n                <circle cx=\"18\" cy=\"18\" r=\"2\"><\/circle>\n            <\/svg>\n        <\/div>\n\n        <h3>LIVRAISON OFFERTE<\/h3>\n        <p>D\u00e8s 80\u20ac d'achat<\/p>\n\n    <\/div>\n\n    <div class=\"separator\"><\/div>\n\n    <div class=\"guarantee\">\n\n        <div class=\"icon\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n                <path d=\"M21 12a9 9 0 1 1-3-6.7\"><\/path>\n                <path d=\"M21 3v6h-6\"><\/path>\n            <\/svg>\n        <\/div>\n\n        <h3>RETOUR SOUS 30 JOURS<\/h3>\n        <p>Satisfait ou rembours\u00e9<\/p>\n\n    <\/div>\n\n    <div class=\"separator\"><\/div>\n\n    <div class=\"guarantee\">\n\n        <div class=\"icon\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n                <path d=\"M12 2l7 3v6c0 5-3 8-7 11c-4-3-7-6-7-11V5z\"><\/path>\n                <path d=\"M9 12l2 2l4-4\"><\/path>\n            <\/svg>\n        <\/div>\n\n        <h3>PAIEMENT S\u00c9CURIS\u00c9<\/h3>\n        <p>CB, Paypal, Apple Pay<\/p>\n\n    <\/div>\n\n    <div class=\"separator\"><\/div>\n\n    <div class=\"guarantee\">\n\n        <div class=\"icon\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n                <path d=\"M12 2l2 2.2l3-.2l1 2.8l2.8 1l-.2 3L23 12l-2.2 2l.2 3l-2.8 1l-1 2.8l-3-.2L12 23l-2-2.2l-3 .2l-1-2.8l-2.8-1l.2-3L1 12l2.2-2l-.2-3l2.8-1l1-2.8l3 .2z\"><\/path>\n                <path d=\"M8.5 12l2.2 2.2L15.5 9.5\"><\/path>\n            <\/svg>\n        <\/div>\n\n        <h3>GARANTIE AUTHENTICIT\u00c9<\/h3>\n        <p>Sur tous nos bijoux<\/p>\n\n    <\/div>\n\n<\/section>\n\n<style>\n\n.omeor-guarantees{\n\n    width:100%;\n\n    display:grid;\n    grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;\n\n    align-items:center;\n\n    background:#f5f1ec;\n\n    border:1px solid #d8c29b;\n\n    border-radius:14px;\n\n    padding:18px 14px;\n\n    box-sizing:border-box;\n\n}\n\n\/* BLOCS *\/\n\n.guarantee{\n\n    text-align:center;\n\n    display:flex;\n    flex-direction:column;\n    align-items:center;\n    justify-content:center;\n\n}\n\n\/* IC\u00d4NES *\/\n\n.icon{\n\n    width:30px;\n    height:30px;\n\n    color:#3d0c0c;\n\n    margin-bottom:8px;\n\n}\n\n.icon svg{\n\n    width:100%;\n    height:100%;\n\n    stroke-width:1.4;\n\n}\n\n\/* TITRES *\/\n\n.guarantee h3{\n\n    margin:0 0 3px;\n\n    font-family:'Montserrat',sans-serif;\n    font-size:10px;\n    font-weight:600;\n\n    color:#3d0c0c;\n\n    letter-spacing:.2px;\n\n}\n\n\/* TEXTE *\/\n\n.guarantee p{\n\n    margin:0;\n\n    font-family:'Montserrat',sans-serif;\n    font-size:9px;\n    font-weight:400;\n\n    color:#3d0c0c;\n\n}\n\n\/* S\u00c9PARATEURS *\/\n\n.separator{\n\n    width:1px;\n    height:65px;\n\n    background:#6f3b34;\n\n    opacity:.5;\n\n    margin:0 10px;\n\n}\n\n\/* RESPONSIVE *\/\n\n@media(max-width:1024px){\n\n    .omeor-guarantees{\n\n        grid-template-columns:1fr;\n        gap:20px;\n\n        padding:24px;\n\n    }\n\n    .separator{\n        display:none;\n    }\n\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>COMMANDE INFORMATIONS LIVRAISON 3 PAIEMENT 4 CONFIRMATION Paiement \u2013 Bague Ga\u00efa Paiement Toutes les transactions sont s\u00e9curis\u00e9es et chiffr\u00e9es Carte [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-9985","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/maisonomeor.fr\/index.php\/wp-json\/wp\/v2\/pages\/9985","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maisonomeor.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/maisonomeor.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/maisonomeor.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/maisonomeor.fr\/index.php\/wp-json\/wp\/v2\/comments?post=9985"}],"version-history":[{"count":6,"href":"https:\/\/maisonomeor.fr\/index.php\/wp-json\/wp\/v2\/pages\/9985\/revisions"}],"predecessor-version":[{"id":10065,"href":"https:\/\/maisonomeor.fr\/index.php\/wp-json\/wp\/v2\/pages\/9985\/revisions\/10065"}],"wp:attachment":[{"href":"https:\/\/maisonomeor.fr\/index.php\/wp-json\/wp\/v2\/media?parent=9985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}