/*
 * Identité PROTEXIA pour le parcours d'achat.
 *
 * Les pages panier, commande et compte n'étaient habillées par personne :
 * WooCommerce laisse ses champs au navigateur, et le thème ne les
 * reprenait pas. Les champs apparaissaient donc sans bordure ni fond,
 * indiscernables d'un texte — un client voyait « Ville », « Code postal »
 * ou « Téléphone » sans voir où saisir.
 *
 * Ces règles reprennent la palette et les formes du catalogue : mêmes
 * couleurs, mêmes rayons, même bordure, même accent orange. Rien n'est
 * inventé ici, tout est repris de la carte produit.
 */

.woocommerce-cart,
.woocommerce-checkout,
.woocommerce-account {
    --pco-navy: #082b4c;
    --pco-navy-deep: #051f38;
    --pco-accent: #f36f21;
    --pco-accent-dark: #d85a0d;
    --pco-line: #dce3ea;
    --pco-surface: #f8fafc;
    --pco-muted: #667589;
}

/* --- Les champs, le défaut principal --------------------------------- */

.woocommerce-cart .woocommerce input[type="text"],
.woocommerce-cart .woocommerce input[type="email"],
.woocommerce-cart .woocommerce input[type="tel"],
.woocommerce-cart .woocommerce input[type="number"],
.woocommerce-cart .woocommerce input[type="password"],
.woocommerce-cart .woocommerce textarea,
.woocommerce-cart .woocommerce select,
.woocommerce-checkout .woocommerce input[type="text"],
.woocommerce-checkout .woocommerce input[type="email"],
.woocommerce-checkout .woocommerce input[type="tel"],
.woocommerce-checkout .woocommerce input[type="number"],
.woocommerce-checkout .woocommerce input[type="password"],
.woocommerce-checkout .woocommerce textarea,
.woocommerce-checkout .woocommerce select,
.woocommerce-account .woocommerce input[type="text"],
.woocommerce-account .woocommerce input[type="email"],
.woocommerce-account .woocommerce input[type="tel"],
.woocommerce-account .woocommerce input[type="number"],
.woocommerce-account .woocommerce input[type="password"],
.woocommerce-account .woocommerce textarea,
.woocommerce-account .woocommerce select,
.woocommerce-checkout .select2-selection--single {
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    border: 1px solid var(--pco-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
    color: var(--pco-navy-deep);
    font-size: 15px;
    line-height: 1.4;
    transition: border-color .15s, box-shadow .15s;
}

.woocommerce-cart .woocommerce textarea,
.woocommerce-checkout .woocommerce textarea,
.woocommerce-account .woocommerce textarea {
    min-height: 108px;
    resize: vertical;
}

.woocommerce-cart .woocommerce input:focus,
.woocommerce-cart .woocommerce textarea:focus,
.woocommerce-cart .woocommerce select:focus,
.woocommerce-checkout .woocommerce input:focus,
.woocommerce-checkout .woocommerce textarea:focus,
.woocommerce-checkout .woocommerce select:focus,
.woocommerce-account .woocommerce input:focus,
.woocommerce-account .woocommerce textarea:focus,
.woocommerce-account .woocommerce select:focus {
    border-color: var(--pco-accent);
    box-shadow: 0 0 0 3px rgba(243, 111, 33, .16);
    outline: 0;
}

/* Un champ refusé se signale par sa bordure, pas seulement par son intitulé. */
.woocommerce-checkout .woocommerce-invalid input,
.woocommerce-checkout .woocommerce-invalid select,
.woocommerce-checkout .woocommerce-invalid .select2-selection--single {
    border-color: #c62828;
}

.woocommerce-checkout .woocommerce-validated input,
.woocommerce-checkout .woocommerce-validated select {
    border-color: #2e7d32;
}

/* --- Les intitulés ---------------------------------------------------- */

.woocommerce-cart .woocommerce label,
.woocommerce-checkout .woocommerce label,
.woocommerce-account .woocommerce label {
    display: block;
    margin-bottom: 6px;
    color: var(--pco-navy-deep);
    font-size: .92rem;
    font-weight: 700;
}

.woocommerce-checkout .woocommerce .required {
    color: var(--pco-accent-dark);
    text-decoration: none;
}

.woocommerce-checkout .woocommerce form .form-row {
    margin: 0 0 18px;
    padding: 0;
}

/* --- Les titres de section ------------------------------------------- */

.woocommerce-cart .woocommerce h2,
.woocommerce-cart .woocommerce h3,
.woocommerce-checkout .woocommerce h2,
.woocommerce-checkout .woocommerce h3,
.woocommerce-account .woocommerce h2,
.woocommerce-account .woocommerce h3 {
    margin: 0 0 18px;
    color: var(--pco-navy-deep);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.01em;
}

/* --- Les blocs : mêmes formes que la carte produit ------------------- */

.woocommerce-checkout .woocommerce form.checkout_coupon,
.woocommerce-checkout #order_review,
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-account .woocommerce-MyAccount-navigation {
    padding: 22px;
    border: 1px solid var(--pco-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(8, 43, 76, .055);
}

.woocommerce-cart .woocommerce table.shop_table,
.woocommerce-checkout .woocommerce table.shop_table {
    border: 1px solid var(--pco-line);
    border-collapse: separate;
    border-radius: 14px;
    border-spacing: 0;
    overflow: hidden;
    background: #fff;
}

.woocommerce-cart .woocommerce table.shop_table th,
.woocommerce-checkout .woocommerce table.shop_table th {
    padding: 14px 16px;
    background: var(--pco-surface);
    color: var(--pco-navy-deep);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.woocommerce-cart .woocommerce table.shop_table td,
.woocommerce-checkout .woocommerce table.shop_table td {
    padding: 14px 16px;
    border-top: 1px solid var(--pco-line);
    color: var(--pco-navy-deep);
}

/* Le prix porte la couleur de la marque, comme sur les cartes produit. */
.woocommerce-cart .woocommerce .amount,
.woocommerce-checkout .woocommerce .amount {
    color: var(--pco-accent);
    font-weight: 800;
}

.woocommerce-cart .woocommerce table.shop_table .product-name a {
    color: var(--pco-navy-deep);
    font-weight: 700;
    text-decoration: none;
}

/* --- Les boutons ------------------------------------------------------ */

.woocommerce-cart .woocommerce .button,
.woocommerce-checkout .woocommerce .button,
.woocommerce-account .woocommerce .button,
.woocommerce-checkout #place_order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 26px;
    border: 0;
    border-radius: 10px;
    background: var(--pco-accent);
    color: #fff;
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background .15s, transform .15s;
}

.woocommerce-cart .woocommerce .button:hover,
.woocommerce-checkout .woocommerce .button:hover,
.woocommerce-account .woocommerce .button:hover,
.woocommerce-checkout #place_order:hover {
    background: var(--pco-accent-dark);
    color: #fff;
    transform: translateY(-1px);
}

/* Le bouton secondaire ne doit pas rivaliser avec l'action principale. */
.woocommerce-cart .woocommerce .button[name="update_cart"] {
    background: #fff;
    border: 1px solid var(--pco-line);
    color: var(--pco-navy-deep);
}

.woocommerce-cart .woocommerce .button[name="update_cart"]:hover {
    background: var(--pco-surface);
    color: var(--pco-navy-deep);
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
    width: 100%;
    font-size: 1rem;
}

/* --- Les messages ----------------------------------------------------- */

.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info {
    border-top-color: var(--pco-accent);
    border-radius: 10px;
    background: var(--pco-surface);
    color: var(--pco-navy-deep);
}

.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-error {
    border-top-color: #c62828;
    border-radius: 10px;
}

/* --- Le pas à pas sur petit écran ------------------------------------ */

@media (max-width: 782px) {
    .woocommerce-checkout .woocommerce form.checkout_coupon,
    .woocommerce-checkout #order_review {
        padding: 16px;
    }

    .woocommerce-cart .woocommerce table.shop_table th {
        font-size: .72rem;
    }
}