/* ============================================================
   CH Template – Checkout (WooCommerce Blocks)
   Le checkout de ce site utilise le bloc WooCommerce (namespace
   .wc-block-*), entièrement distinct du HTML classique WooCommerce
   (.woocommerce-*) déjà stylé ailleurs dans le thème — ce fichier est
   la seule source de style pour cette page.
   ============================================================ */

.wc-block-checkout {
	font-size: var(--rmp-fs-body);
}

/* ── Colonne "Résumé de la commande" collante ─────────────────────
   WooCommerce Blocks pose déjà position:sticky (classe .is-sticky) sur cette colonne, mais ça ne prenait jamais
   effet : un ancêtre du thème (#page.hfeed.site) a overflow:hidden auto — n'importe quelle valeur d'overflow autre
   que visible sur un ancêtre transforme CET ancêtre en "conteneur de défilement" pour le calcul de position sticky
   (peu importe qu'il ait ou non sa propre barre de défilement visible), ce qui casse le sticky.
   PAS un simple overflow:visible sur les deux axes : ça casse la mise en page (les deux colonnes 65%/35% du
   checkout passent en une seule colonne empilée, même en plein écran — piège vécu, capture à l'appui) parce que
   WooCommerce Blocks mesure sa mise en page responsive avec des *container queries* (@container), et cet ancêtre-là
   y participe d'une façon qui casse si overflow-x n'est plus contenu du tout. Solution qui marche sur les deux
   plans : overflow-x:clip (pas hidden — `clip` ne crée PAS de "conteneur de défilement" au sens de la spec, donc ne
   gêne plus le sticky, mais reste "non visible" comme hidden pour tout le reste, donc la mise en page réagit pareil
   qu'avant) + overflow-y:visible (le seul axe qui compte pour un sticky vertical). Un overflow-y:visible SEUL,
   laissant overflow-x:hidden, ne suffit PAS non plus : la spec CSS force alors overflow-y en overflow:auto "utilisé"
   dès que l'autre axe n'est ni visible ni clip — testé, sticky restait cassé. Rétabli seulement sur la page checkout
   (scope déjà garanti par l'enqueue conditionnel is_checkout() de ce fichier) : aucune autre page n'est concernée
   par ce changement. Vérifié : sticky fonctionne (desktop, scroll), deux colonnes intactes (desktop ET mobile),
   aucune barre de défilement horizontale nouvelle. */
body.woocommerce-checkout .hfeed.site {
	overflow-x: clip;
	overflow-y: visible;
}

/* Retire le padding-left du résumé (retour utilisateur). AUCUNE compensation ajoutée (ni margin ni gap) : WooCommerce
   construit déjà les deux colonnes en 65%/35% avec box-sizing:border-box (.wc-block-components-main a son propre
   padding-right ~4,53%) — les deux boîtes remplissent exactement 100% de la ligne. Un gap ou un margin ajoutés EN
   PLUS dépassent ce 100% et font passer la mise en page en colonnes empilées (piège vécu : les deux essais
   précédents cassaient le layout en desktop). En zérotant juste le padding-left ici, la largeur de la colonne ne
   change pas — seul son contenu n'est plus indenté à l'intérieur — et le padding-right du champ voisin suffit
   toujours de gouttière visuelle entre les deux colonnes. */
.wc-block-checkout__sidebar {
	padding-left: 0 !important;
}

/* Colonne de droite à 35 % sur grand écran, comme avant WooCommerce 11 (qui la fige à 360 px : flex 0 0 360px, la
   colonne de gauche prenant tout le reste — résumé de commande étroit sur les grands écrans). Gauche = le reste
   moins la gouttière de WooCommerce ; tablette / mobile (colonnes empilées, .is-medium / .is-small) inchangés. */
.wc-block-components-sidebar-layout.is-large .wc-block-components-sidebar {
	flex: 0 0 35%;
	width: 35%;
	max-width: 35%;
	box-sizing: border-box;
}

/* ── Carte "Résumé de la commande" — même contour que les champs et les cartes de mode de
   livraison (voir ch-trk-rate-card2) : WooCommerce ne pose ici qu'un contour color-mix() sans
   rapport avec nos jetons, et le retire carrément en dessous de 700px (remplacé par des lignes
   internes d'accordéon) — remis à l'identique sur les deux gabarits pour une bordure uniforme
   partout sur le checkout. */
.wp-block-woocommerce-checkout-order-summary-block {
	border: 1px solid var(--rmp-border) !important;
	border-radius: var(--rmp-radius) !important;
}

/* ── Carte adresse repliée (après connexion / adresse complète) — même contour que le reste.
   Le bordé visuel est bien .wc-block-components-address-card, pas son .…-wrapper (qui n'a jamais
   de contour propre, juste opacity/position pour l'animation de bascule carte ↔ formulaire) : lui
   en donner un créerait un second cadre autour du premier, même bug que la case à cocher corrigée
   plus tôt (contour posé sur le mauvais élément). */
.wc-block-components-address-card {
	border: 1px solid var(--rmp-border) !important;
	border-radius: var(--rmp-radius) !important;
}

/* ── Titres de section ────────────────────────────────────── */
.wc-block-components-checkout-step__title {
	font-size: var(--rmp-fs-lg) !important;
	font-weight: 600 !important;
	color: var(--rmp-text) !important;
	letter-spacing: -0.01em !important;
}

.wc-block-components-checkout-step__description {
	color: var(--rmp-text-soft);
	font-size: var(--rmp-fs-sm);
}

/* ── Champs texte / select / combobox ────────────────────── */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"] {
	border: 1px solid var(--rmp-border) !important;
	border-radius: var(--rmp-radius) !important;
	box-shadow: none !important;
	background: #fff !important;
	font-size: var(--rmp-fs-body) !important;
}

.wc-block-components-text-input input:focus {
	border-color: var(--rmp-brand) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--rmp-brand) 12%, transparent) !important;
}

.wc-block-components-text-input label {
	color: var(--rmp-text-soft) !important;
}

.wc-block-components-combobox-control .components-base-control__field,
.wc-block-components-country-input .components-base-control__field {
	border-radius: var(--rmp-radius);
}

.wc-block-components-combobox-control input,
.wc-block-components-address-form select {
	border: 1px solid var(--rmp-border) !important;
	border-radius: var(--rmp-radius) !important;
	box-shadow: none !important;
	background: #fff !important;
}

.wc-block-components-combobox-control input:focus {
	border-color: var(--rmp-brand) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--rmp-brand) 12%, transparent) !important;
}

.wp-block-woocommerce-checkout .wc-block-components-shipping-rates-control__package {
	margin-top: 0 !important;
}

/* Case à cocher ajoutée DANS le formulaire d'adresse (ex. « J'achète pour une entreprise ou un organisme »,
   CH E-Invoicing) : WooCommerce ne lui donne aucune marge, elle collait au champ Téléphone (retour utilisateur
   2026-10-20). Même respiration que la case « Utiliser la même adresse pour la facturation ». */
.wc-block-components-address-form .wc-block-components-checkbox {
	margin-top: 16px !important;
}

/* ── Cases à cocher / radios ──────────────────────────────── */
/* La vraie case est l'input (20×20, WooCommerce lui donne déjà son propre contour clair) ; .mark n'est qu'une
   icône de coche SVG (15×15) positionnée en absolu PAR-DESSUS, pas un second élément de case. Un précédent
   correctif posait le contour/fond directement sur .mark : ça dessinait une petite boîte bleue à l'intérieur de
   la boîte de l'input, d'où l'effet "case dans la case" (retour utilisateur : rendu disgracieux). Le contour et
   le fond doivent être posés sur l'input lui-même ; .mark reste juste la coche blanche par-dessus. */
.wc-block-components-checkbox__input[type="checkbox"] {
	border: 1.5px solid var(--rmp-text) !important;
	border-radius: 4px !important;
}
.wc-block-components-checkbox__input[type="checkbox"]:checked {
	background: var(--rmp-brand) !important;
	border-color: var(--rmp-brand) !important;
}
.wc-block-components-checkbox__input[type="checkbox"]:focus-visible {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--rmp-brand) 12%, transparent) !important;
}
.wc-block-components-checkbox__input:checked + .wc-block-components-checkbox__mark {
	fill: #fff !important;
}
.wc-block-components-checkbox-list .wc-block-components-checkbox__label,
.wc-block-components-checkbox .wc-block-components-checkbox__label {
	font-size: var(--rmp-fs-body);
	color: var(--rmp-text);
}

.wc-block-components-radio-control__input {
	accent-color: var(--rmp-brand);
}

.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
	border: 1px solid var(--rmp-border) !important;
	border-radius: var(--rmp-radius) !important;
}

.wc-block-components-radio-control-accordion-option--checked,
.wc-block-components-radio-control__option-checked {
	border-width: 2px !important;
	border-color: var(--rmp-brand) !important;
}

/* Même design que les cartes de mode de livraison (.ch-trk-rate-card2, ch-track-orders) pour la liste des modes de
   paiement — retour utilisateur : "le même design que les modes de livraison". Les cartes de livraison n'ont
   jamais de puce radio visible (juste le contour qui indique la sélection) ; ici le radio natif WooCommerce
   reste fonctionnel (clavier, lecteur d'écran — le <label> couvre toute la carte, le clic marche pareil) mais
   rendu invisible par opacity plutôt que display:none pour rester dans l'arbre d'accessibilité. Le padding-left
   de 48px prévu pour cette puce (native) est retiré au profit du même padding que les cartes de livraison. */
.wc-block-components-radio-control__option {
	padding: 18px 20px !important;
}
.wc-block-components-radio-control__input {
	opacity: 0;
}

/* ── Panneaux (code promo, etc.) ──────────────────────────── */
.wc-block-components-panel__button {
	color: var(--rmp-brand) !important;
	font-weight: 500;
}

/* Retiré les séparateurs au-dessus ET en dessous de "Ajouter des codes promo" (retour utilisateur). La ligne du
   dessus vient du bloc coupon lui-même, celle du dessous du bloc suivant (regroupement sous-total/frais/remise/
   livraison/taxes) — chacun a sa propre classe de bloc en plus de la classe générique .wc-block-components-
   totals-wrapper (qui porte le border-top), donc on cible ces deux blocs précisément sans toucher aux autres
   séparateurs du résumé (ex. avant le total final). */
.wp-block-woocommerce-checkout-order-summary-coupon-form-block,
.wp-block-woocommerce-checkout-order-summary-totals-block,
.wp-block-woocommerce-checkout-order-summary-subtotal-block {
	border-top: none !important;
}

.wc-block-components-totals-coupon .wc-block-components-text-input input {
	border-radius: var(--rmp-radius) !important;
}

/* "Appliquer" (retour utilisateur : problème visuel) : WooCommerce ne lui donne ni fond ni hauteur explicite — sans
   ça, son fond bleu pâle par défaut (même désactivé, code vide) le rendait à peine visible à côté d'un champ texte
   pleine hauteur. Fond plein cohérent avec les autres boutons secondaires du checkout, hauteur alignée sur le champ
   texte voisin (même ligne, .wc-block-components-totals-coupon__form est déjà en flex). Désactivé (code vide) :
   même couleur mais atténué plutôt qu'un bleu presque blanc. */
.wc-block-components-totals-coupon__form {
	align-items: stretch;
}
.wc-block-components-totals-coupon__button {
	border-radius: var(--rmp-radius) !important;
	border: 1px solid var(--rmp-brand) !important;
	background: var(--rmp-brand) !important;
	color: #fff !important;
	opacity: 1 !important;
	font-weight: 500 !important;
}
.wc-block-components-totals-coupon__button:hover {
	background: var(--rmp-brand-hover) !important;
	border-color: var(--rmp-brand-hover) !important;
}
.wc-block-components-totals-coupon__button:disabled {
	background: var(--rmp-bg-gray) !important;
	border-color: var(--rmp-border) !important;
	color: var(--rmp-text-soft) !important;
	opacity: 1 !important; /* WooCommerce applique son propre opacity:.5 sur :disabled, qui rendait ce fond déjà clair presque invisible */
}

/* ── Résumé de commande ───────────────────────────────────── */
.wc-block-components-order-summary-item__image img {
	border-radius: var(--rmp-radius);
	background: var(--rmp-bg-gray);
}

/* Pastille "1" sur la vignette produit (retour utilisateur : à enlever) — la quantité se choisit maintenant via
   .rmp-checkout-qty (voir plus bas), inutile de la répéter en superposition sur l'image. !important : la règle
   WooCommerce d'origine (.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity) a
   deux classes, plus spécifique que la nôtre à une seule classe — sans ça elle l'emporte malgré l'ordre de
   chargement. */
.wc-block-components-order-summary-item__quantity {
	display: none !important;
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
	color: var(--rmp-text);
	font-size: var(--rmp-fs-body);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-weight: 600;
	font-size: var(--rmp-fs-lg);
}

/* Prix unitaire sous le nom d'article — redondant avec le total déjà affiché à droite de la ligne (retour
   utilisateur : "je vois toujours le prix sous le nom du produit, alors qu'il est aussi à droite"). */
.wc-block-components-order-summary-item__description .wc-block-components-order-summary-item__individual-prices {
	display: none;
}

/* Nom d'article + prix (total, à droite) — mêmes taille/couleur de texte que le reste du checkout
   (uniformisation, retour utilisateur) : WooCommerce ne leur donne par défaut qu'un poids de police, pas de
   taille/couleur explicites. */
.wc-block-components-order-summary-item__total-price {
	font-size: var(--rmp-fs-sm);
	color: var(--rmp-text-soft);
}
.wc-block-components-order-summary-item .wc-block-components-product-name {
	font-size: var(--rmp-fs-body);
	color: var(--rmp-text);
}

/* Détail des variations sous le nom d'article (ex. État + Couleur) — WooCommerce préfixe chaque attribut de son
   nom ("Couleur: Noir / Etat: Reconditionné Grade 1"), retour utilisateur : trop d'info, ne garder que les valeurs
   ("Reconditionné Grade 1 / Or"). Le séparateur "/" entre attributs est déjà natif (span aria-hidden inséré par
   WooCommerce entre chaque attribut) — masquer juste le label suffit, rien d'autre à recomposer. !important
   nécessaire : une version de WooCommerce plus récente que celle vendue en local (10.9.1, voir plugins/woocommerce/)
   regroupe .wc-block-components-product-details__name avec …__value dans UNE MÊME règle "display:inline" —
   même spécificité qu'ici (une seule classe), donc l'ordre de chargement CSS réel du site décide sans
   !important ; confirmé en prod (retour utilisateur, capture avec "Etat:" toujours visible malgré le fix). */
.wc-block-components-product-details__name {
	display: none !important;
}

/* Description courte du produit sous le nom d'article (retour utilisateur : "Produit original…" — trop d'info,
   seul "Reconditionné Grade 1 / Or" doit rester). Absente de la version de WooCommerce utilisée en local (10.9.1,
   voir plugins/woocommerce/) — .wc-block-components-product-metadata__description est une classe apparue dans
   une version plus récente que celle installée sur ce site de dev (confirmée via le HTML réel du site en ligne,
   pas testable ici) ; sans effet local, agit une fois déployé sur un WooCommerce qui a cette fonctionnalité. */
.wc-block-components-product-metadata__description {
	display: none !important;
}

/* ── Bouton "Commander" ───────────────────────────────────── */
.wc-block-components-checkout-place-order-button {
	background: var(--rmp-brand) !important;
	border: 1px solid var(--rmp-brand) !important;
	border-radius: var(--rmp-radius) !important;
	color: #fff !important;
	font-size: 18px !important;
	font-weight: 500 !important;
	box-shadow: none !important;
}

/* ── Espace sous le bouton "Commander" — WooCommerce pose 36px de
   margin-bottom par défaut sur ce wrapper, réduit pour un bas de page
   moins vide. */
.wc-block-checkout__actions {
	margin-bottom: 20px;
}

.wc-block-components-checkout-place-order-button:hover {
	background: var(--rmp-brand-hover) !important;
	border-color: var(--rmp-brand-hover) !important;
}

.wc-block-components-checkout-place-order-button:active {
	background: var(--rmp-brand-active) !important;
	border-color: var(--rmp-brand-active) !important;
}

/* ── Zone "paiement express" native du plugin Stripe officiel (gros boutons Apple Pay/Google Pay empilés,
   au-dessus du formulaire) — remplacée par nos propres cartes compactes dans la liste des modes de paiement
   (voir ch-payment-methods), donc masquée pour ne jamais afficher les deux à la fois. */
.wp-block-woocommerce-checkout-express-payment-block,
.wc-block-components-express-payment {
	display: none !important;
}

/* ── Notices (erreur "aucun moyen de paiement", etc.) ─────── */
.wc-block-components-notice-banner {
	border-radius: var(--rmp-radius) !important;
}

/* ── Panneau de connexion — colonne gauche, au-dessus de "Informations de contact" (retour utilisateur
   2026-09-23 : d'abord posé dans la colonne droite au-dessus du résumé, déplacé ici — n'avait pas de sens
   à côté du panier plutôt qu'à côté du formulaire qu'il concerne). Remplace l'ancien bandeau
   [ch_social_login] pleine largeur en tête de page par un panneau avec boutons sociaux côte à côte +
   connexion par e-mail + mention invité. Masqué pour un client déjà connecté (body.logged-in, classe
   native WordPress) : le shortcode lui-même ne rend déjà rien pour is_user_logged_in(), mais le
   titre/lien e-mail/ligne invité restent du HTML statique — sans ce garde-fou ils resteraient affichés à
   un client déjà authentifié. Contenu (titre, shortcode, lien e-mail, ligne invité) ajouté directement
   dans post_content de la page 7 en base, voir mémoire projet rmp-checkout-blocks-redesign.
   Le lien natif "Log in" de WooCommerce (.wc-block-checkout__login-prompt, flotté à côté du titre
   "Informations de contact") fait doublon avec ce panneau, désormais juste au-dessus — masqué. */
.wc-block-checkout__login-prompt {
	display: none !important;
}
body.logged-in .rmp-checkout-login {
	display: none;
}
.rmp-checkout-login {
	/* Retour utilisateur 2026-10-07 : « Connexion rapide » + un bouton Google à largeur de texte + un lien isolé
	   n'expliquaient pas à quoi servait le panneau, et s'alignaient mal sur mobile. Désormais : « Déjà client ? »,
	   une phrase d'aide (le formulaire reste le chemin par défaut), puis deux boutons de même format, côte à côte
	   sur grand écran et empilés pleine largeur sur mobile. Rendu par le shortcode [rmp_checkout_login]. */
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--rmp-border);
}
.rmp-checkout-login > p:empty,
.rmp-checkout-login > br {
	display: none;
}
.rmp-checkout-login__title {
	margin: 0 0 4px !important;
	font-size: var(--rmp-fs-lg);
	font-weight: 600;
	color: var(--rmp-text);
}
.rmp-checkout-login__hint {
	margin: 0 0 14px !important;
	font-size: var(--rmp-fs-sm);
	line-height: 1.45;
	color: var(--rmp-text-soft);
}
.rmp-checkout-login__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
/* Bouton(s) social(aux) ch-social-login, sans toucher à son réglage global « Empilés / Côte à côte » (partagé
   avec Mon compte) : sur le checkout, ils partagent la rangée avec le bouton e-mail. */
body.woocommerce-checkout .rmp-checkout-login .ch-sl-buttons {
	display: contents;
}
body.woocommerce-checkout .rmp-checkout-login .ch-sl-btn,
.rmp-checkout-login__email {
	box-sizing: border-box;
	flex: 1 1 200px;
	width: auto;
	min-width: 0;
	height: 44px;
	margin: 0;
	padding: 0 16px;
	border-radius: var(--rmp-radius);
	font-family: inherit;
	font-size: var(--rmp-fs-body);
	font-weight: 500;
}
.rmp-checkout-login__email {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 1px solid var(--rmp-border);
	background: var(--rmp-white);
	color: var(--rmp-text);
	text-decoration: none;
	white-space: nowrap;
}
/* Ancien contenu de la page Checkout (HTML en base, encore en place sur staging/prod tant que la page n'est pas
   passée à [rmp_checkout_login]) : pas de rangée __actions, le lien e-mail est enfant direct du panneau. */
.rmp-checkout-login > .rmp-checkout-login__email {
	display: flex;
	width: 100%;
	margin-top: 10px;
}
.rmp-checkout-login > .rmp-checkout-login__title + .ch-sl-buttons,
.rmp-checkout-login > .rmp-checkout-login__title + p + .ch-sl-buttons {
	margin-top: 10px;
}
.rmp-checkout-login__email:hover,
.rmp-checkout-login__email:focus-visible {
	border-color: var(--rmp-text-soft);
	color: var(--rmp-text);
	text-decoration: none;
}
/* Formulaire e-mail déplié sur place (assets/checkout.js, inc/checkout-login.php) : on ne quitte jamais le checkout. */
.rmp-checkout-login__form {
	display: grid;
	gap: 12px;
	margin-top: 16px;
}
.rmp-checkout-login__form[hidden] {
	display: none;
}
.rmp-checkout-login__field {
	display: grid;
	gap: 4px;
	margin: 0;
	font-size: var(--rmp-fs-sm);
	font-weight: 500;
	color: var(--rmp-text);
}
.rmp-checkout-login__field input {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--rmp-border);
	border-radius: var(--rmp-radius);
	background: var(--rmp-white);
	box-shadow: none;
	color: var(--rmp-text);
	font-size: var(--rmp-fs-body); /* évite le zoom auto iOS au focus */
}
.rmp-checkout-login__field input:focus {
	border-color: var(--rmp-brand);
	outline: none;
	box-shadow: 0 0 0 1px var(--rmp-brand);
}
.rmp-checkout-login__form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
}
.rmp-checkout-login .rmp-checkout-login__submit {
	min-height: 44px;
	padding: 0 22px;
	border: 1px solid var(--rmp-brand);
	border-radius: var(--rmp-radius);
	background: var(--rmp-brand);
	color: var(--rmp-white);
	font-family: inherit;
	font-size: var(--rmp-fs-body);
	font-weight: 500;
	cursor: pointer;
}
.rmp-checkout-login .rmp-checkout-login__submit:hover {
	border-color: var(--rmp-brand-hover);
	background: var(--rmp-brand-hover);
}
.rmp-checkout-login .rmp-checkout-login__submit:disabled {
	opacity: .7;
	cursor: default;
}
.rmp-checkout-login__lost {
	font-size: var(--rmp-fs-sm);
	color: var(--rmp-brand);
	text-decoration: none;
}
.rmp-checkout-login__lost:hover {
	text-decoration: underline;
}
.rmp-checkout-login__error {
	margin: 12px 0 0 !important;
	color: #b3261e;
	font-size: var(--rmp-fs-sm);
}
@media (max-width: 560px) {
	.rmp-checkout-login .rmp-checkout-login__submit {
		width: 100%;
	}
	.rmp-checkout-login__form-actions {
		justify-content: center;
	}
}

/* « Pas de compte ? Renseignez… » (contenu en base) et « Vous validez votre commande en tant qu'invité » (natif)
   disaient la même chose — et le second est faux : un compte est créé automatiquement à la commande
   (rmp_attach_guest_order_to_account). Le formulaire visible juste dessous suffit. */
.rmp-checkout-login__guest,
.wc-block-checkout__guest-checkout-notice {
	display: none !important;
}
/* ── "Modifier mon panier" — au-dessus du résumé de commande, aligné à droite. WooCommerce Blocks
   n'expose aucun point d'extension par article pour modifier une quantité directement ici (contrairement
   aux modes de livraison) ; plutôt que de reconstruire quantité/suppression/annulation à la main sur LE
   PARCOURS D'ACHAT (retour utilisateur : risque de bug assumé trop élevé pour ça), un simple lien vers la
   page Panier existante — déjà fonctionnelle, déjà testée, aucun code neuf sur le chemin critique. Sur ce
   site, le lien ouvre en fait le panier coulissant FunnelKit Cart (assets/checkout.js + filtre
   fkcart_is_cart_enabled dans functions.php) ; la page Panier n'est plus qu'un repli si le plugin est absent. */
.rmp-checkout-edit-cart {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	margin-bottom: 12px;
	font-size: var(--rmp-fs-sm);
	font-weight: 500;
	color: var(--rmp-brand);
	text-decoration: none;
}
.rmp-checkout-edit-cart:hover {
	text-decoration: underline;
}
/* Le tiroir FunnelKit s'ouvre au clic et laisse le focus sur ce lien : sans ça, le contour violet de Storefront
   restait affiché sur toute la largeur de la ligne (le lien est en display:flex). Contour conservé au clavier. */
.rmp-checkout-edit-cart:focus:not(:focus-visible) {
	outline: none;
}

/* FunnelKit Cart est réactivé sur le checkout uniquement pour ouvrir son tiroir depuis "Modifier mon panier"
   (voir functions.php, filtre fkcart_is_cart_enabled) : son icône flottante, absente jusque-là sur cette page, ferait
   doublon avec le lien et recouvrirait le bas de la colonne résumé. */
#fkcart-floating-toggler {
	display: none !important;
}

/* ── "Réparez en toute sécurité" — sous le résumé de commande (retour utilisateur, avec capture de référence) ── */
.rmp-checkout-trust {
	margin-top: 32px;
}
.rmp-checkout-trust__title {
	margin: 0 0 20px;
	font-size: var(--rmp-fs-lg);
	font-weight: 600;
	color: var(--rmp-text);
}
.rmp-checkout-trust__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.rmp-checkout-trust__list li {
	display: flex;
	align-items: center;
	gap: 12px;
}
.rmp-checkout-trust__icon {
	flex-shrink: 0;
	color: #3fa680;
}
.rmp-checkout-trust__list span {
	font-size: var(--rmp-fs-body);
	color: var(--rmp-text);
}

/* ── "Satisfait ou 100% remboursé" — sous le bouton "Commander" (retour utilisateur, avec capture de référence) ── */
.rmp-checkout-guarantee {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 16px 0 0;
	font-size: var(--rmp-fs-body);
	color: var(--rmp-text);
}
.rmp-checkout-guarantee svg {
	flex-shrink: 0;
}
/* Sur desktop, le bloc « Réparez en toute sécurité » (colonne droite) dit déjà « Retour 100 % remboursé » : la
   garantie sous « Commander » faisait doublon. Gardée sur mobile, où ce bloc est masqué (seule garantie visible). */
@media (min-width: 783px) {
	.rmp-checkout-guarantee {
		display: none !important;
	}
}

/* ── Layout mobile : empile le résumé sous le formulaire, pleine
   largeur, boutons/champs assez grands pour le tactile ──────── */
@media (max-width: 782px) {
	/* Bloc « Réparez en toute sécurité » masqué sur mobile (retour utilisateur 2026-09-24) : en une colonne, il
	   s'affichait tout en haut, avant même le formulaire. */
	.rmp-checkout-trust {
		display: none !important;
	}

	.wc-block-components-text-input input,
	.wc-block-components-combobox-control input,
	.wc-block-components-address-form select {
		min-height: 44px;
		font-size: var(--rmp-fs-body) !important; /* évite le zoom auto iOS sur focus */
	}

	.wc-block-components-checkout-place-order-button {
		min-height: 48px;
		width: 100%;
	}
}

/* ── Checkout « fermé » : header et footer minimaux (functions.php, rmp_is_checkout_focus) ─────────────────────── */
.rmp-co-header {
	grid-template-columns: auto 1fr !important;
}
.rmp-co-header-meta {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 22px;
	min-width: 0;
}
.rmp-co-secure {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: var(--rmp-fs-meta);
	line-height: 1.2;
	white-space: nowrap;
	color: var(--rmp-text-header, #202124);
}
.rmp-co-secure svg {
	width: 17px;
	height: 17px;
	flex: none;
}
/* Mobile : même boîte que le header des autres pages (retour utilisateur 2026-10-07). Ailleurs, la boîte grise
   n'a pas de marge basse (la barre de recherche la prolonge) : sa hauteur vient de la rangée de 40 px (boutons
   icônes) + l'écart de grille de la ligne « nav » cachée. Même chose ici → même boîte de 63 px, logo au même endroit.
   « Paiement sécurisé » passe sur deux lignes, aligné sur l'icône compte des autres pages : sur une ligne, il
   chevauchait « slogan ». */
@media (max-width: 560px) {
	.rmp-co-header-meta {
		min-height: 40px;
		padding-right: 6px;
	}
	.rmp-co-secure {
		gap: 8px;
		max-width: 6.5em;
		font-size: var(--rmp-fs-meta);
		line-height: 1.2;
		white-space: normal;
		text-align: left;
	}
	.rmp-co-secure svg {
		width: 20px;
		height: 20px;
	}
}

.rmp-co-footer {
	margin-top: 48px;
	padding: 22px 0 28px;
	border-top: 1px solid var(--rmp-border, #d2d3d3);
	font-size: var(--rmp-fs-meta);
	color: var(--rmp-muted, #5f6368);
}
.rmp-co-footer-inner {
	/* Pas de .col-full ici : hors de #content, Storefront lui remet ses propres marges (débordait de 23px). Même
	   largeur que le header, texte aligné sur le logo. */
	box-sizing: border-box;
	width: var(--rmp-site-width, calc(100vw - 48px));
	margin-inline: auto;
	padding-inline: 18px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
}
.rmp-co-footer nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
}
.rmp-co-footer a {
	color: inherit;
	text-decoration: none;
}
.rmp-co-footer a:hover,
.rmp-co-footer a:focus-visible {
	color: var(--rmp-text-header, #202124);
	text-decoration: underline;
}

@media (max-width: 600px) {
	.rmp-co-footer-inner { flex-direction: column; align-items: flex-start; padding-inline: 0; }
}

/* ── Mobile : les deux résumés de commande ───────────────────────────────────────────────────────────────────────
   En une colonne, WooCommerce affiche un résumé repliable en haut ET le résumé complet avant « Commander ».
   Retour utilisateur 2026-10-20 : le récapitulatif apparaissait deux fois. Le détail (articles, code promo,
   sous-total, livraison) reste dans le résumé repliable du haut ; avant le bouton, seule la ligne « Total » (voir
   plus bas, « Résumé avant Commander »). */

/* Résumé repliable du haut : une seule boîte (notre contour unifié) — la ligne de titre perd ses propres bordures
   haut/bas (doublaient le contour → bande vide) et gagne un retrait intérieur (le titre collait au bord). */
.wc-block-components-checkout-order-summary__title {
	margin: 0 !important;
	padding: 14px 16px !important;
	border: 0 !important;
	align-items: center !important;
}
.wc-block-components-checkout-order-summary__title-text {
	margin: 0 !important;
	font-size: var(--rmp-fs-body) !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	color: var(--rmp-text) !important;
}
.wc-block-components-checkout-order-summary__title .wc-block-formatted-money-amount {
	font-weight: 600 !important;
	color: var(--rmp-text) !important;
}
.wc-block-components-checkout-order-summary__content {
	border-top: 1px solid var(--rmp-border) !important;
	border-bottom: 0 !important; /* déplié, WooCommerce ajoute un trait droit qui dépassait des coins arrondis */
}
/* Déplié en une colonne (is-mobile, is-small, is-medium — tout sauf is-large), WooCommerce retire le retrait des
   lignes (articles, code promo, totaux collés au bord) : même retrait de 16px que la carte du bas. */
.wc-block-components-sidebar-layout:not(.is-large) .wc-block-components-checkout-order-summary__content {
	padding: 0 16px !important;
}

/* Résumé avant « Commander » (n'existe qu'en une colonne) : la seule ligne « Total », dans une carte, juste au-dessus
   du bouton — sans titre de section, ni articles, ni code promo, ni sous-total / livraison, déjà dans le résumé du
   haut. Le contour unifié était posé à la fois sur le bloc et sur sa carte intérieure (deux cadres imbriqués). */
.wp-block-woocommerce-checkout-order-summary-block.checkout-order-summary-block-fill-wrapper {
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin-bottom: 16px !important;
}
.checkout-order-summary-block-fill-wrapper > .wc-block-components-checkout-step__heading {
	display: none !important;
}
.checkout-order-summary-block-fill-wrapper > .checkout-order-summary-block-fill {
	border: 1px solid var(--rmp-border) !important;
	border-radius: var(--rmp-radius) !important;
}
/* Tout sauf la ligne du total (blocs d'extensions compris) ; si WooCommerce change sa structure et qu'aucune ligne
   « Total » n'est trouvée, :has() ne cache rien et le résumé complet reste affiché. */
.checkout-order-summary-block-fill:has(.wc-block-components-totals-footer-item) > :not(:has(.wc-block-components-totals-footer-item)):not(.wc-block-components-totals-footer-item) {
	display: none !important;
}
.checkout-order-summary-block-fill .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) {
	border-top: 0 !important;
	padding-block: 12px !important;
}

@media (max-width: 782px) {
	/* Checkout « fermé » : moins de vide entre le header et le contenu (54 px → 30 px). */
	body.rmp-checkout-focus .wc-block-checkout {
		padding-top: 0 !important;
	}
}

/* ── Checkout avec panier vide (état natif du bloc, voir woocommerce_checkout_redirect_empty_cart dans functions.php) ──
   Retour utilisateur 2026-10-07 : le paragraphe « La validation de commande n'est pas disponible… » est superflu
   sous « Votre panier est actuellement vide ! », et le bouton collait au titre. */
.wc-block-checkout-empty__description {
	display: none !important;
}
.wc-block-checkout-empty .wp-block-button {
	display: block;
	margin-top: 24px;
}
/* Le lien est inline par défaut : son padding débordait au-dessus et mangeait la marge. */
.wc-block-checkout-empty .wp-block-button__link {
	display: inline-block;
}
/* Bouton bleu du thème garanti : style.css et la feuille du bloc core/button (.wp-block-button__link, gris foncé
   arrondi) ont la même spécificité, et l'ordre de chargement varie selon le site (vu sur staging, 2026-10-07). */
.wc-block-checkout-empty .wp-block-button .wp-block-button__link {
	padding: 10px 22px;
	border: 1px solid var(--rmp-brand);
	border-radius: var(--rmp-radius);
	background-color: var(--rmp-brand);
	color: var(--rmp-white);
	font-size: var(--rmp-fs-body);
	font-weight: 500;
	text-decoration: none;
}
.wc-block-checkout-empty .wp-block-button .wp-block-button__link:hover,
.wc-block-checkout-empty .wp-block-button .wp-block-button__link:focus-visible {
	border-color: var(--rmp-brand-hover);
	background-color: var(--rmp-brand-hover);
	color: var(--rmp-white);
}

/* ── Champs à 16 px, toujours (retour utilisateur 2026-10-07) ─────────────────────────────────────────────────────
   Sous 16 px, Safari iOS zoome sur la page au focus d'un champ ; la page zoomée glisse ensuite en largeur pendant la
   saisie. Les champs du checkout étaient à --rmp-fs-body (15,36 px) : la règle « 16 px sur mobile » plus haut était
   écrasée par une règle plus spécifique. Règle unique et finale, tous champs et toutes largeurs (iPad compris),
   conforme à l'échelle du thème (style.css : les champs restent à 1rem). Les champs carte Stripe (ch-payment-methods)
   recopient cette taille. */
body.woocommerce-checkout input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
body.woocommerce-checkout select,
body.woocommerce-checkout textarea {
	font-size: var(--rmp-fs-body) !important;
}
/* Garde-fou : rien ne doit pouvoir élargir la page (clip, pas hidden : ne casse pas les éléments sticky). */
@media (max-width: 782px) {
	html:has(body.woocommerce-checkout),
	body.woocommerce-checkout {
		overflow-x: clip;
	}
}

/* ── « Payer la commande » (checkout/order-pay, gabarit woocommerce/checkout/form-pay.php) ─────────────────────────
   Page classique de WooCommerce (lien « Payer » envoyé au client, commande créée en admin…) : sans ce gabarit elle
   sortait en tableau gris pleine largeur, sans rapport avec le checkout en blocs. Même composition que le checkout :
   moyens de paiement à gauche (≈ 65 %), carte « Résumé de la commande » à droite, collante ; au-dessus sur mobile.
   Les cartes de paiement et le bouton sont dessinés par Payment methods (ch-payment-methods/assets/checkout.css,
   règles !important) : les règles ci-dessous, sans !important, ne servent que de repli quand ce plugin n'est pas
   chargé (autre moyen de paiement seul, Stripe non configuré). */
.rmp-pay {
	display: grid;
	grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
	grid-template-areas: "main summary";
	gap: 0 4.5%;
	align-items: start;
	margin: 8px 0 40px;
	font-size: var(--rmp-fs-body);
	color: var(--rmp-text);
}
.rmp-pay__main { grid-area: main; min-width: 0; }
.rmp-pay__summary {
	grid-area: summary;
	position: sticky;
	top: 24px;
	border: 1px solid var(--rmp-border);
	border-radius: var(--rmp-radius);
	padding: 16px 16px 0;
	background: var(--rmp-white);
}
.rmp-pay__title,
.rmp-pay__summary-title {
	margin: 0 0 16px;
	font-size: var(--rmp-fs-lg);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.4;
	color: var(--rmp-text);
}
.rmp-pay__summary-title {
	margin: -16px -16px 0;
	padding: 16px;
	border-bottom: 1px solid var(--rmp-border);
}

/* Articles : vignette, nom (+ variations), prix à droite — comme les lignes du résumé du checkout. */
.rmp-pay__items { list-style: none; margin: 0; padding: 0; }
.rmp-pay__item {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: start;
	padding: 16px 0;
	border-bottom: 1px solid var(--rmp-border);
}
.rmp-pay__thumb img,
.rmp-pay__thumb-img {
	display: block;
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: var(--rmp-radius);
	background: var(--rmp-bg-gray);
}
.rmp-pay__item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rmp-pay__item-name { font-size: var(--rmp-fs-body); color: var(--rmp-text); line-height: 1.4; }
.rmp-pay__item-qty,
.rmp-pay__item-price { font-size: var(--rmp-fs-sm); color: var(--rmp-text-soft); }
.rmp-pay__item-price { white-space: nowrap; }
/* Variations : valeurs seules (« Noir »), comme dans le résumé du checkout. */
.rmp-pay .wc-item-meta { list-style: none; margin: 0; padding: 0; font-size: var(--rmp-fs-sm); color: var(--rmp-text-soft); }
.rmp-pay .wc-item-meta li { display: inline; margin: 0; }
.rmp-pay .wc-item-meta li + li::before { content: " / "; }
.rmp-pay .wc-item-meta .wc-item-meta-label { display: none; }
.rmp-pay .wc-item-meta p { display: inline; margin: 0; }

/* Totaux */
.rmp-pay__totals { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--rmp-border); }
.rmp-pay__total-row { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; }
.rmp-pay__total-row dt,
.rmp-pay__total-row dd { margin: 0; font-size: var(--rmp-fs-body); font-weight: 400; color: var(--rmp-text); }
.rmp-pay__total-row dd { text-align: right; }
.rmp-pay__total-row dd small { display: block; font-size: var(--rmp-fs-xs); color: var(--rmp-text-soft); }
.rmp-pay__grand-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 16px 0;
	font-size: var(--rmp-fs-lg);
	font-weight: 600;
}
.rmp-pay__grand-total strong { font-weight: 600; }
.rmp-pay__grand-total small { display: block; font-size: var(--rmp-fs-xs); font-weight: 400; color: var(--rmp-text-soft); }

/* Moyens de paiement — repli (voir l'en-tête de section). Préfixe #order_review : la feuille de WooCommerce
   (woocommerce.css, celle de Storefront aussi) vise ces éléments par #order_review #payment (fonds gris, marges) —
   il faut deux identifiants, et parfois une classe de plus, pour passer devant. */
#order_review.rmp-pay #payment { background: none; border-radius: 0; padding: 0; }
#order_review.rmp-pay #payment .wc_payment_methods { list-style: none; margin: 0; padding: 0; border: 0; }
#order_review.rmp-pay #payment .wc_payment_methods > li.wc_payment_method {
	position: relative;
	margin: 0 0 12px;
	padding: 18px 20px;
	border: 1px solid var(--rmp-border);
	border-radius: var(--rmp-radius);
	background: var(--rmp-white);
	list-style: none;
}
#order_review.rmp-pay #payment .wc_payment_methods > li.wc_payment_method:has(> input:checked) {
	border-color: var(--rmp-brand);
	box-shadow: 0 0 0 1px var(--rmp-brand);
}
#order_review.rmp-pay #payment .wc_payment_methods > li.wc_payment_method > input.input-radio {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}
#order_review.rmp-pay #payment .wc_payment_methods > li.wc_payment_method > label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	font-weight: 500;
	cursor: pointer;
}
#order_review.rmp-pay #payment .wc_payment_methods > li.wc_payment_method > .payment_box {
	margin: 0;
	padding: 12px 0 0;
	background: none;
	font-size: var(--rmp-fs-sm);
	color: var(--rmp-text-soft);
}
#order_review.rmp-pay #payment .wc_payment_methods > li.wc_payment_method > .payment_box::before { display: none; }
#order_review.rmp-pay #payment .wc_payment_methods > li.wc_payment_method > .payment_box p { margin: 0; }

/* Mention de confidentialité / CGV, puis bouton — comme sous les moyens de paiement du checkout. */
#order_review.rmp-pay #payment .form-row.rmp-pay__actions { margin: 0; padding: 20px 0 0; border-top: 0; background: none; }
#order_review.rmp-pay #payment .woocommerce-terms-and-conditions-wrapper { margin: 8px 0 16px; }
#order_review.rmp-pay #payment .woocommerce-privacy-policy-text p {
	margin: 0;
	font-size: var(--rmp-fs-sm);
	color: var(--rmp-text-soft);
}
#order_review.rmp-pay #payment .woocommerce-privacy-policy-text a { color: inherit; text-decoration: underline; }
#order_review.rmp-pay #payment #place_order {
	display: block;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 12px 24px;
	background: var(--rmp-brand);
	border: 1px solid var(--rmp-brand);
	border-radius: var(--rmp-radius);
	color: #fff;
	font-size: 18px;
	font-weight: 500;
	box-shadow: none;
	cursor: pointer;
}
#order_review.rmp-pay #payment #place_order:hover { background: var(--rmp-brand-hover); border-color: var(--rmp-brand-hover); }
#order_review.rmp-pay #payment #place_order:active { background: var(--rmp-brand-active); border-color: var(--rmp-brand-active); }

@media (max-width: 782px) {
	.rmp-pay {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "summary" "main";
		gap: 24px;
	}
	.rmp-pay__summary { position: static; }
	#order_review.rmp-pay #payment #place_order { min-height: 48px; }
}

/* Texte à 17 px partout (2026-10-24) : textes du checkout et du panier en blocs de WooCommerce
   (sa feuille wc-blocks fixe 13 à 16 px) au texte courant du thème. */
:is(body.woocommerce-checkout, body.woocommerce-cart) :is(
	.wc-block-components-text-input label,
	.wc-blocks-components-select__label,
	.wc-block-components-address-form__address_2-toggle,
	.wc-block-components-checkbox__label,
	.wc-block-components-notice-banner__content,
	.wc-block-components-panel__button,
	.wc-block-components-checkout-order-summary__title .wc-block-formatted-money-amount,
	.wc-block-components-validation-error,
	.wc-block-components-checkout-step__description,
	.wc-block-components-radio-control__secondary-label,
	.wc-block-components-radio-control__description,
	.wc-block-components-totals-item__description,
	.wc-block-components-product-metadata,
	.wc-block-components-product-details,
	.wc-block-components-order-summary-item__quantity
) { font-size: var(--rmp-fs-body); }

/* Listes (pays, région) une fois remplies : seulement la valeur (« France »), sans le libellé « Pays/Région » posé
   au-dessus à 17 px, valeur centrée dans le champ. Vide = libellé gardé (le client sait quoi choisir). */
:is(body.woocommerce-checkout, body.woocommerce-cart) .wc-blocks-components-select__container:has(select option:checked:not([value=""])) .wc-blocks-components-select__label {
	display: none;
}
:is(body.woocommerce-checkout, body.woocommerce-cart) .wc-blocks-components-select__container:has(select option:checked:not([value=""])) .wc-blocks-components-select__select {
	padding-top: 0;
	padding-bottom: 0;
}