/* =========================================================
   PAGE COMMANDE
========================================================= */

.checkout-page {
    padding: 70px 0 110px;
}

.checkout-page__header {
    margin-bottom: 40px;
}

.checkout-page__header h1 {
    margin: 0 0 10px;
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    line-height: 1.1;
}

.checkout-page__header p {
    margin: 0;
    color: var(--color-text-light);
}


/* =========================================================
   LAYOUT PRINCIPAL
========================================================= */

body.woocommerce-checkout form.checkout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(380px, 0.85fr);

    gap: 50px;

    align-items: start;
}


/* =========================================================
   COLONNE GAUCHE
========================================================= */

body.woocommerce-checkout #customer_details {
    grid-column: 1;

    display: block;

    min-width: 0;
}


/*
 * WooCommerce applique normalement des colonnes flottantes.
 * On les neutralise pour empiler :
 *
 * Facturation
 * ↓
 * Notes de commande
 */
body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2 {
    float: none !important;

    width: 100% !important;

    margin: 0 !important;
}


/* =========================================================
   FACTURATION
========================================================= */

body.woocommerce-checkout .woocommerce-billing-fields {
    padding: 30px;

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

body.woocommerce-checkout .woocommerce-billing-fields > h3 {
    margin-top: 0;
}


/* =========================================================
   BLOC EXPÉDITION
========================================================= */

/*
 * On enlève le gros bloc blanc autour de la partie expédition.
 * Si WooCommerce affiche ensuite de vrais champs de livraison,
 * ils resteront utilisables.
 */

body.woocommerce-checkout .woocommerce-shipping-fields {
    margin: 25px 0 0;

    padding: 0;

    background: transparent;

    border: 0;
    box-shadow: none;
}


/* =========================================================
   NOTES DE COMMANDE
========================================================= */

body.woocommerce-checkout .woocommerce-additional-fields {
    margin-top: 25px;

    padding: 30px;

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

body.woocommerce-checkout .woocommerce-additional-fields h3 {
    margin-top: 0;
}


/* =========================================================
   CHAMPS
========================================================= */

body.woocommerce-checkout .form-row {
    margin-bottom: 18px;
}

body.woocommerce-checkout input.input-text,
body.woocommerce-checkout textarea,
body.woocommerce-checkout select {
    width: 100%;

    min-height: 46px;

    padding: 10px 12px;

    font-family: var(--font-family);

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);

    transition: var(--transition);
}

body.woocommerce-checkout textarea {
    min-height: 120px;

    resize: vertical;
}

body.woocommerce-checkout input.input-text:focus,
body.woocommerce-checkout textarea:focus,
body.woocommerce-checkout select:focus {
    outline: none;

    border-color: var(--color-primary);

    box-shadow:
        0 0 0 3px rgba(46, 125, 50, 0.12);
}


/* =========================================================
   COLONNE DROITE : VOTRE COMMANDE
========================================================= */

body.woocommerce-checkout #order_review_heading {
    grid-column: 2;
    grid-row: 1;

    margin: 0 0 15px;

    align-self: start;

    font-size: 1.6rem;
}


/*
 * Le récapitulatif commence également en haut de la
 * deuxième colonne.
 */
body.woocommerce-checkout #order_review {
    grid-column: 2;
    grid-row: 1;

    align-self: start;

    margin-top: 55px;

    padding: 28px;

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius);

    box-shadow: var(--shadow);
}


/* =========================================================
   TABLEAU COMMANDE
========================================================= */

body.woocommerce-checkout #order_review table.shop_table {
    width: 100%;

    margin: 0 0 25px;

    border: 0;
    border-collapse: collapse;
}

body.woocommerce-checkout #order_review table.shop_table th,
body.woocommerce-checkout #order_review table.shop_table td {
    padding: 14px 0;

    vertical-align: top;

    border-bottom: 1px solid var(--color-border);
}


/* =========================================================
   NOM PRODUIT
========================================================= */

body.woocommerce-checkout #order_review .product-name {
    color: var(--color-text);

    font-weight: 700;

    line-height: 1.5;
}


/* =========================================================
   CONFIGURATION PRODUIT
========================================================= */

body.woocommerce-checkout #order_review dl.variation {
    display: grid;

    grid-template-columns:
        minmax(110px, auto)
        1fr;

    gap: 6px 12px;

    margin: 14px 0 0;

    color: var(--color-text-light);

    font-size: 0.84rem;
}

body.woocommerce-checkout #order_review dl.variation dt,
body.woocommerce-checkout #order_review dl.variation dd {
    float: none;

    margin: 0;

    padding: 0;
}

body.woocommerce-checkout #order_review dl.variation dt {
    font-weight: 600;
}

body.woocommerce-checkout #order_review dl.variation dd p {
    margin: 0;
}


/* =========================================================
   TOTAL
========================================================= */

body.woocommerce-checkout #order_review .order-total th,
body.woocommerce-checkout #order_review .order-total td {
    padding-top: 20px;

    color: var(--color-text);

    font-size: 1.1rem;
}

body.woocommerce-checkout #order_review .order-total strong {
    color: var(--color-primary-dark);

    font-size: 1.35rem;
}


/* =========================================================
   PAIEMENT
========================================================= */

body.woocommerce-checkout #payment {
    margin-top: 25px;

    background: transparent !important;
}

body.woocommerce-checkout #payment ul.payment_methods {
    padding: 0 0 20px !important;

    border-bottom: 1px solid var(--color-border) !important;
}


/* =========================================================
   VALIDER LA COMMANDE
========================================================= */

body.woocommerce-checkout #place_order {
    width: 100%;

    min-height: 56px;

    margin-top: 20px;

    padding: 0 25px !important;

    color: #fff !important;

    background: var(--color-primary) !important;

    border: 0 !important;
    border-radius: var(--radius-small) !important;

    font-family: var(--font-family) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;

    cursor: pointer;

    transition: var(--transition);
}

body.woocommerce-checkout #place_order:hover {
    background: var(--color-primary-dark) !important;

    transform: translateY(-2px);
}


/* =========================================================
   RÉASSURANCE
========================================================= */

.pcreco-checkout-reassurance-row td {
    padding: 22px 0 !important;

    border-bottom: 0 !important;
}

.checkout-reassurance {
    display: grid;

    gap: 12px;

    padding-top: 5px;
}

.checkout-reassurance__item {
    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--color-text);

    font-size: 0.9rem;
}

.checkout-reassurance__item span {
    display: inline-flex;

    flex: 0 0 32px;

    width: 32px;
    height: 32px;

    align-items: center;
    justify-content: center;

    color: var(--color-primary-dark);

    background: var(--color-primary-light);

    border-radius: 50%;
}


/* =========================================================
   CODE PROMO
========================================================= */

body.woocommerce-checkout .woocommerce-form-coupon-toggle {
    margin-bottom: 30px;
}

body.woocommerce-checkout .woocommerce-form-coupon {
    margin-bottom: 35px !important;

    padding: 22px !important;

    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-small);
}

/* =========================================================
   PAIEMENT STRIPE
========================================================= */

body.woocommerce-checkout #payment {
    margin-top: 28px;

    padding: 24px;

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius);

    box-shadow: none;
}


/* Liste des moyens de paiement */

body.woocommerce-checkout
#payment
ul.payment_methods {
    margin: 0;
    padding: 0;

    border: 0;
}


/* Chaque moyen de paiement */

body.woocommerce-checkout
#payment
ul.payment_methods > li {
    margin: 0;
    padding: 0;

    list-style: none;
}


/* Label principal */

body.woocommerce-checkout
#payment
.payment_methods
label {
    color: var(--color-text);

    font-family: var(--font-family);
    font-size: 0.95rem;
    font-weight: 700;
}


/* Bloc Stripe */

body.woocommerce-checkout
#payment
.payment_box {
    margin: 16px 0 0 !important;

    padding: 20px !important;

    background: #f8faf9 !important;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
}


/* Supprime la petite flèche WooCommerce */

body.woocommerce-checkout
#payment
.payment_box::before {
    display: none !important;
}


/* Texte Stripe */

body.woocommerce-checkout
#payment
.payment_box p {
    color: var(--color-text-light);

    font-size: 0.9rem;
    line-height: 1.6;
}


/* Zone carte bancaire Stripe */

body.woocommerce-checkout
#payment
.wc-stripe-elements-field,
body.woocommerce-checkout
#payment
.stripe-card-group {
    width: 100%;
}


/* Sauvegarde carte */

body.woocommerce-checkout
#payment
.woocommerce-SavedPaymentMethods-saveNew {
    display: flex;

    align-items: flex-start;

    gap: 9px;

    margin-top: 15px !important;

    color: var(--color-text-light);

    font-size: 0.85rem;
    line-height: 1.5;
}


/* Bouton final WooCommerce */

body.woocommerce-checkout
#payment
#place_order {
    width: 100%;

    min-height: 52px;

    margin-top: 22px;

    padding: 0 24px !important;

    color: #fff !important;

    background: var(--color-primary) !important;

    border: 0 !important;
    border-radius: var(--radius-small) !important;

    font-family: var(--font-family) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;

    cursor: pointer;

    transition: var(--transition);
}

body.woocommerce-checkout
#payment
#place_order:hover {
    background: var(--color-primary-dark) !important;
}

/* =========================================================
   STRIPE - FINITIONS PC RECO
========================================================= */

/* Bloc général des options de paiement */

body.woocommerce-checkout #payment {
    padding: 24px;

    background: #fff;

    border: 1px solid var(--color-border);
    border-radius: 20px;
}


/* Titre / labels */

body.woocommerce-checkout
#payment
.payment_methods label {
    color: var(--color-text);

    font-family: var(--font-family);
    font-weight: 700;
}


/* Bloc contenant les champs Stripe */

body.woocommerce-checkout
#payment
.payment_box {
    margin-top: 18px !important;

    padding: 20px !important;

    background: var(--color-primary-light) !important;

    border: 1px solid rgba(46, 125, 50, 0.18);
    border-radius: 14px;
}


/* Champs Stripe visibles */

body.woocommerce-checkout
#payment
.wc-stripe-elements-field {
    min-height: 46px;

    padding: 12px 14px;

    background: #fff;

    border: 1px solid var(--color-border) !important;
    border-radius: 8px !important;

    box-shadow: none !important;
}


/* Champ actif */

body.woocommerce-checkout
#payment
.wc-stripe-elements-field.focused {
    border-color: var(--color-primary) !important;

    box-shadow:
        0 0 0 3px
        rgba(46, 125, 50, 0.12) !important;
}


/* Sauvegarde de la carte */

body.woocommerce-checkout
#payment
.woocommerce-SavedPaymentMethods-saveNew {
    margin-top: 16px !important;

    padding-top: 16px;

    border-top: 1px solid rgba(46, 125, 50, 0.15);
}


/* Checkbox */

body.woocommerce-checkout
#payment
input[type="checkbox"] {
    accent-color: var(--color-primary);
}


/* Texte de confidentialité */

body.woocommerce-checkout
#payment
.woocommerce-privacy-policy-text {
    margin-top: 20px;

    padding-top: 20px;

    border-top: 1px solid var(--color-border);
}

body.woocommerce-checkout
#payment
.woocommerce-privacy-policy-text p {
    margin: 0;

    color: var(--color-text-light);

    font-size: 0.9rem;
    line-height: 1.65;
}


/* Bouton Commander */

body.woocommerce-checkout
#payment
#place_order {
    width: 100%;

    min-height: 52px;

    margin-top: 22px;

    padding: 0 24px !important;

    color: #fff !important;

    background: var(--color-primary) !important;

    border: 0 !important;
    border-radius: 10px !important;

    font-family: var(--font-family) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;

    transition:
        background-color var(--transition),
        transform var(--transition);
}

body.woocommerce-checkout
#payment
#place_order:hover {
    background: var(--color-primary-dark) !important;

    transform: translateY(-1px);
}

body.woocommerce-checkout #payment .payment_box {
    margin-top: 18px !important;
    padding: 20px !important;

    background: #f7fbf7 !important;

    border: 1px solid rgba(46, 125, 50, 0.18);
    border-radius: 14px;
}

/* =========================================================
   STRIPE - SUPPRESSION DES SÉPARATIONS GRISES
========================================================= */

/* Supprime les bordures des conteneurs internes Stripe */
body.woocommerce-checkout
#payment
.payment_box fieldset {
    border: 0 !important;
    box-shadow: none !important;
}


/* Supprime les lignes horizontales internes */
body.woocommerce-checkout
#payment
.payment_box hr {
    display: none !important;
}


/* Bloc d'enregistrement des informations */
body.woocommerce-checkout
#payment
.woocommerce-SavedPaymentMethods-saveNew {
    border: 0 !important;

    box-shadow: none !important;

    padding-top: 16px;
}


/* Évite une séparation supplémentaire au-dessus */
body.woocommerce-checkout
#payment
.payment_box .form-row {
    border-top: 0 !important;
    border-bottom: 0 !important;
}


/* On conserve uniquement le contour du vrai champ Stripe */
body.woocommerce-checkout
#payment
.wc-stripe-elements-field {
    border: 1px solid var(--color-border) !important;

    border-radius: 10px !important;

    box-shadow: none !important;
}

/* =========================================================
   STRIPE EXPRESS CHECKOUT
========================================================= */


body.woocommerce-checkout
#wc-stripe-express-checkout-button-separator::before,
body.woocommerce-checkout
#wc-stripe-express-checkout-button-separator::after {
    position: absolute;

    top: 50%;

    width: calc(50% - 32px);
    height: 1px;

    content: "";

    background: var(--color-border);
}

body.woocommerce-checkout
#wc-stripe-express-checkout-button-separator::before {
    left: 0;
}

body.woocommerce-checkout
#wc-stripe-express-checkout-button-separator::after {
    right: 0;
}



/* Chaque conteneur Stripe */

body.woocommerce-checkout
#wc-stripe-express-checkout-element-applePay,
body.woocommerce-checkout
#wc-stripe-express-checkout-element-googlePay {
    width: 100%;
    min-width: 0;
}

/* =========================================================
   STRIPE EXPRESS CHECKOUT - PC RECO
========================================================= */

body.woocommerce-checkout
#wc-stripe-express-checkout-element {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

    width: 100%;

    margin: 0 0 24px !important;
    padding: 20px;

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius);

    box-shadow: var(--shadow);
}


/* Apple Pay / Google Pay */

body.woocommerce-checkout
#wc-stripe-express-checkout-element-applePay,
body.woocommerce-checkout
#wc-stripe-express-checkout-element-googlePay {
    width: 100%;
    min-width: 0;
}


/* Séparateur */

body.woocommerce-checkout
#wc-stripe-express-checkout-button-separator {
    position: relative;

    margin: 0 0 24px !important;

    color: var(--color-text-light);

    font-size: 0.82rem;
    font-weight: 600;

    text-align: center;
}


/* Remplace visuellement "-- OU --" */
body.woocommerce-checkout
#wc-stripe-express-checkout-button-separator {
    font-size: 0;
}

body.woocommerce-checkout
#wc-stripe-express-checkout-button-separator::after {
    content: "OU";

    font-size: 0.82rem;
    font-weight: 600;

    color: var(--color-text-light);
}