/* ==========================================================================
   Etika Spirulina — Tunnel de commande FunnelKit
   Gabarit Shoppe trois étapes, monté dans Elementor.
   Maquettes : « ES - Checkout V1 - 2 Informations » à « 4 Paiement ».
   --------------------------------------------------------------------------
   TROIS RACINES, ET POURQUOI.

   Le formulaire vit dans #wfacp-e-form. Le récapitulatif, lui, existe en
   deux exemplaires dans la page : #wfacp_mini_cart_start_h pour la colonne de
   droite des grands écrans, et .wfacp_collapsible_order_summary_wrap pour
   l'accordéon des petits. Deux gabarits différents, rendus tous les deux à
   chaque chargement, c'est le CSS de FunnelKit qui décide lequel se voit.

   D'où le `:is()` qui les regroupe. Il n'est pas là pour raccourcir : la
   spécificité d'un `:is()` est celle de son argument le plus fort, donc la
   branche par classe hérite du poids de la branche par identifiant. Sans lui,
   la version repliable n'aurait jamais atteint le CSS du plugin, et tout
   l'habillage aurait sauté sur mobile — c'est exactement ce qui se passait
   avant, quand seul l'identifiant était visé.

   CE QUI N'EST PAS ICI, ET NE DOIT PAS Y VENIR.

   FunnelKit imprime environ trente-cinq règles de couleur d'accent en style
   inline, dans le corps du document, donc APRÈS cette feuille. Les recopier
   ici demanderait de surenchérir sur chacune, et le tout se déferait à la
   première modification de réglage. La couleur d'accent se change dans
   l'écran de personnalisation de FunnelKit, une seule fois. Cette feuille ne
   traite que la forme : graisses, espacements, rayons, structure.

   Voir le LISEZ-MOI, section « Réglages FunnelKit du tunnel ».
   ========================================================================== */


/* ==========================================================================
   1. Base
   ========================================================================== */

body #wfacp-e-form,
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap){
	font-family: var(--es-fk-font);
	color: var(--es-fk-foret);
}

body #wfacp-e-form .wfacp_main_form,
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_order_summary_container{
	font-family: var(--es-fk-font);
}


/* ==========================================================================
   2. Fil d'étapes
   --------------------------------------------------------------------------
   Style « fil d'Ariane » de FunnelKit, réglé dans l'éditeur de tunnel. Il
   produit déjà les étapes en toutes lettres et les chevrons de la maquette ;
   il reste à les centrer sous le logo et à souligner l'étape courante.

   Sélecteur ancré sur l'identifiant #wfacp_steps_sec, que le plugin pose sur
   le bloc : il vaut quel que soit son emplacement dans l'arbre Elementor.

   Si le réglage repasse un jour au style à pastilles numérotées, ce bloc ne
   s'applique plus du tout : le markup change entièrement.
   ========================================================================== */

body #wfacp_steps_sec ul{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 9px;
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}

body #wfacp_steps_sec ul li{
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0 0 2px;
	border: 0;
	background: none;
	font-size: 14px;
	line-height: 1.4;
}

body #wfacp_steps_sec ul li a{
	color: var(--es-fk-foret-300);
	font-family: var(--es-fk-font);
	font-size: 14px;
	font-weight: 400;
	text-decoration: none;
}

/* Étapes non courantes. Sélecteur porté à deux classes de plus que celui
   ci-dessus pour passer devant la typographie que FunnelKit imprime en ligne
   depuis ses réglages, qui remontait la graisse à 600 et mettait les trois
   étapes au même niveau. La hiérarchie du fil doit se lire d'un coup d'œil :
   une seule étape en gras, les autres en retrait. */
body #wfacp_steps_sec ul li:not(.wfacp_bred_active) a.wfacp_step_text_have{
	color: var(--es-fk-foret-300);
	font-weight: 400;
}

/* Étape déjà parcourue, donc cliquable : vert lien. */
body #wfacp_steps_sec ul li.wfacp_bred_visited:not(.wfacp_bred_active) a.wfacp_step_text_have{
	color: var(--es-fk-lien);
}

body #wfacp_steps_sec ul li.wfacp_bred_visited:not(.wfacp_bred_active) a.wfacp_step_text_have:hover{
	color: var(--es-fk-foret);
	text-decoration: underline;
	text-underline-offset: .2em;
}

/* Étape courante. Déclarée après « visited », qu'elle porte aussi. */
body #wfacp_steps_sec ul li.wfacp_bred_active{
	border-bottom: 2px solid var(--es-fk-vif);
}

body #wfacp_steps_sec ul li.wfacp_bred_active a{
	color: var(--es-fk-foret);
	font-weight: 600;
	cursor: default;
}


/* ==========================================================================
   3. Titres de section
   ========================================================================== */

body #wfacp-e-form .wfacp_main_form .wfacp-section{
	margin-top: 34px;
}

body #wfacp-e-form .wfacp_main_form .wfacp-section:first-child{
	margin-top: 0;
}

body #wfacp-e-form .wfacp_main_form .wfacp_section_heading,
body #wfacp-e-form .wfacp_main_form .wfacp_section_title{
	margin: 0 0 14px;
	color: var(--es-fk-foret);
	font-family: var(--es-fk-font);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.015em;
}


/* ==========================================================================
   4. Champs
   --------------------------------------------------------------------------
   La hauteur est posée, pas le remplissage. FunnelKit imprime un
   `padding: 12px 12px` en style inline, calculé depuis ses réglages ; le
   combattre demanderait de surenchérir sur un sélecteur à six niveaux pour
   deux pixels d'écart. Avec box-sizing et une hauteur fixe, le rendu est
   celui de la maquette.
   ========================================================================== */

/* Deux identifiants dans le sélecteur, et c'est nécessaire : FunnelKit pose
   ses propres règles de libellé en style inline avec
   `body #wfacp-e-form #wfacp-sec-wrapper ...`, qui pèse deux identifiants et
   arrive après cette feuille. Sans #wfacp-sec-wrapper ici, la typographie de
   la maquette ne s'appliquait pas. */
body #wfacp-e-form #wfacp-sec-wrapper .wfacp_main_form label.wfacp-form-control-label,
body #wfacp-e-form .wfacp_main_form label.wfacp-form-control-label{
	color: var(--es-fk-foret-500);
	font-family: var(--es-fk-font);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
}

/* L'astérisque d'obligation. Corail sur fond clair, sans soulignement : le
   `abbr[title]` en pointillés du navigateur n'a rien à faire ici. */
body #wfacp-e-form #wfacp-sec-wrapper .wfacp_main_form label.wfacp-form-control-label abbr.required,
body #wfacp-e-form .wfacp_main_form label.wfacp-form-control-label abbr.required{
	border: 0;
	color: var(--es-fk-corail);
	font-weight: 600;
	text-decoration: none;
}

/* Champ rempli : le libellé flottant remonte, il doit rester lisible sur le
   filet du champ qu'il chevauche. */
body #wfacp-e-form #wfacp-sec-wrapper .wfacp-anim-wrap label.wfacp-form-control-label{
	background: var(--es-fk-blanc);
	color: var(--es-fk-foret-500);
}

/* Le conteneur Select2 est volontairement absent de ce sélecteur. Le <select>
   du pays porte déjà .wfacp-form-control, et Select2 l'enveloppe ensuite dans
   son propre bloc : border des deux côtés donnait un cadre dans un cadre. */
body #wfacp-e-form .wfacp_main_form .wfacp-form-control{
	height: 52px;
	border: 1px solid var(--es-fk-filet-fonce);
	border-radius: var(--es-fk-rayon);
	background-color: var(--es-fk-blanc);
	box-shadow: none;
	color: var(--es-fk-foret);
	font-family: var(--es-fk-font);
	font-size: 15px;
	line-height: 1.4;
}

body #wfacp-e-form .wfacp_main_form textarea.wfacp-form-control{
	height: auto;
	min-height: 88px;
	padding-top: 12px;
}

body #wfacp-e-form .wfacp_main_form .wfacp-form-control::placeholder{
	color: var(--es-fk-foret-300);
}

/* Anneau de focus vert, comme sur la fiche produit et le panier latéral.
   La couleur de bordure au focus vient des réglages FunnelKit, elle suivra
   l'accent une fois celui-ci corrigé. */
body #wfacp-e-form .wfacp_main_form .wfacp-form-control:focus{
	outline: none;
	box-shadow: 0 0 0 3px rgba(51, 159, 91, .16);
}

/* Cases à cocher et boutons radio : la couleur de remplissage vient aussi des
   réglages. On ne touche qu'à la taille et à l'alignement. */
body #wfacp-e-form .wfacp_main_form .wfacp_checkbox_field label.wfacp-form-control-label{
	color: var(--es-fk-foret);
	font-size: 14.5px;
	font-weight: 400;
	line-height: 1.45;
}

/* Liens de dépliage : « Ajouter un complément d'adresse », « Ajouter des
   notes de commande ». */
body #wfacp-e-form .wfacp_main_form .wfacp_collapsible_field_wrap a,
body #wfacp-e-form .wfacp_main_form .wfacp_divider_field a{
	color: var(--es-fk-lien);
	font-size: 13.5px;
	font-weight: 500;
	text-decoration: none;
}

body #wfacp-e-form .wfacp_main_form .wfacp_collapsible_field_wrap a:hover,
body #wfacp-e-form .wfacp_main_form .wfacp_divider_field a:hover{
	text-decoration: underline;
	text-underline-offset: .18em;
}

body #wfacp-e-form .wfacp_main_form .wfacp_inline_error{
	color: #B00C0C;
	font-size: 12.5px;
	line-height: 1.4;
}

/* ---- modes de livraison ----
   Même dessin que la liste des moyens de paiement plus bas, et pour la même
   raison : ce sont deux listes d'options exclusives, elles doivent se lire
   pareil. Cadre unique, filet entre les lignes, option retenue sur fond vert
   pâle. Le !important sur le fond répond à un blanc posé en style inline par
   le gabarit, comme pour le paiement. */

body #wfacp-e-form .wfacp_main_form ul#shipping_method{
	margin: 14px 0 0;
	padding: 0;
	border: 1px solid var(--es-fk-filet-fonce);
	border-radius: 10px;
	background: var(--es-fk-blanc);
	list-style: none;
	overflow: hidden;
}

body #wfacp-e-form .wfacp_main_form ul#shipping_method li.wfacp_single_shipping_method{
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--es-fk-filet);
	background: var(--es-fk-blanc);
	transition: background .18s var(--es-fk-ease);
}

body #wfacp-e-form .wfacp_main_form ul#shipping_method li.wfacp_single_shipping_method:last-child{
	border-bottom: 0;
}

body #wfacp-e-form .wfacp_main_form ul#shipping_method li.wfacp_single_shipping_method:has(input.shipping_method:checked){
	background-color: var(--es-fk-vif-050) !important;
}

body #wfacp-e-form .wfacp_main_form ul#shipping_method .wfacp_single_shipping{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px 18px;
}

body #wfacp-e-form .wfacp_main_form ul#shipping_method .wfacp_shipping_radio{
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	min-width: 0;
}

body #wfacp-e-form .wfacp_main_form ul#shipping_method .wfacp_shipping_radio label{
	margin: 0;
	color: var(--es-fk-foret);
	font-family: var(--es-fk-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	cursor: pointer;
}

/* Le logo du transporteur est suivi d'un <br> dans le libellé : il tient donc
   sa propre ligne, au-dessus du nom du mode. On le cale et on le borne. */
body #wfacp-e-form .wfacp_main_form ul#shipping_method .wfacp_shipping_radio label img{
	max-width: 84px !important;
	height: auto;
	margin: 0 0 4px;
	vertical-align: middle;
}

/* Le tarif, à droite. « Offerte » est le seul signal de gain de la liste :
   vert lien, pas vert vif, sur du texte de 15 px. */
body #wfacp-e-form .wfacp_main_form ul#shipping_method .wfacp_shipping_price{
	flex: none;
	color: var(--es-fk-foret);
	font-family: var(--es-fk-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	white-space: nowrap;
	text-align: right;
}

/* « Offerte » en vert, comme sur la maquette. Le plugin sort ce mot en texte
   nu, sans classe pour l'attraper : on le reconnaît à l'absence de montant
   formaté. Un tarif réel contient toujours un .amount produit par wc_price(),
   un mode offert jamais. */
body #wfacp-e-form .wfacp_main_form ul#shipping_method .wfacp_shipping_price:not(:has(.amount)){
	color: var(--es-fk-lien);
}

body #wfacp-e-form .wfacp_main_form ul#shipping_method .wfacp_shipping_price .amount,
body #wfacp-e-form .wfacp_main_form ul#shipping_method .wfacp_shipping_price bdi,
body #wfacp-e-form .wfacp_main_form ul#shipping_method .wfacp_shipping_price span{
	font: inherit;
	color: inherit;
}

/* Le tableau qui enveloppe la liste ne doit rien ajouter. */
body #wfacp-e-form .wfacp_main_form table.wfacp_shipping_table,
body #wfacp-e-form .wfacp_main_form table.wfacp_shipping_table > tbody > tr > td{
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

/* ---- ajustements des petits écrans : PAS ICI ----
   Le recalage du bouton radio et la suppression du retrait de son libellé
   vivent dans le champ CSS de FunnelKit, écran de personnalisation du tunnel.

   Ce n'est pas un oubli. FunnelKit pose sur ces deux éléments des règles en
   ligne portant elles-mêmes un !important : aucune feuille mise en file avant
   elles ne peut l'emporter, quelle que soit la spécificité. Son propre champ
   CSS, lui, est imprimé après, et c'est le seul recours dans ce cas.

   La règle à ne pas oublier : une seule source par déclaration. Rétablir un
   bloc ici en doublerait une qui est ailleurs, et la prochaine recherche
   partirait du mauvais fichier. */


/* Bouton « Changer le point de retrait » du plugin Colissimo. Il sort avec la
   classe wp-element-button, donc au style de bouton du thème, qui jure avec le
   tunnel. On lui donne l'habillage secondaire du tunnel : contour vert forêt,
   aplat au survol. Le vert vif reste à l'action principale de l'étape. */
body #wfacp-e-form button.lpc_pick_up_widget_show_map,
body #wfacp-e-form #lpc_pick_up_widget_show_map{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: auto;
	margin: 10px 0 0;
	padding: 11px 20px;
	border: 1px solid var(--es-fk-foret) !important;
	border-radius: var(--es-fk-rayon) !important;
	background: var(--es-fk-blanc) !important;
	box-shadow: none !important;
	color: var(--es-fk-foret) !important;
	font-family: var(--es-fk-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: background .18s var(--es-fk-ease), color .18s var(--es-fk-ease);
}

body #wfacp-e-form button.lpc_pick_up_widget_show_map:hover,
body #wfacp-e-form #lpc_pick_up_widget_show_map:hover{
	background: var(--es-fk-foret) !important;
	color: var(--es-fk-blanc) !important;
}

body #wfacp-e-form button.lpc_pick_up_widget_show_map::before,
body #wfacp-e-form #lpc_pick_up_widget_show_map::before{
	content: "";
	display: block;
	width: 15px;
	height: 15px;
	flex: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23173622' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Le tracé est en vert forêt dans le data URI, il disparaîtrait sur l'aplat
   du survol : on le blanchit par un filtre plutôt que de doubler l'image. */
body #wfacp-e-form button.lpc_pick_up_widget_show_map:hover::before,
body #wfacp-e-form #lpc_pick_up_widget_show_map:hover::before{
	filter: brightness(0) invert(1);
}

/* Confirmation de livraison offerte, sous le bloc du mode d'expédition.
   Posée par es-fk-tunnel.php, et seulement quand le seuil est atteint. */
/* ---- absence du point relais sur un panier froid ----
   Même forme que le message de franco, mais l'icône reste sur le gris du
   texte : cette note explique une contrainte, elle n'annonce pas un avantage,
   et le vert vif de la livraison offerte lui donnerait le ton inverse. */
body #wfacp-e-form .es-fk-froid{
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 12px 0 0;
	color: var(--es-fk-foret-500);
	font-size: 12.5px;
	line-height: 1.5;
}

body #wfacp-e-form .es-fk-froid__ic{
	width: 15px;
	height: 15px;
	flex: none;
	margin-top: 2px;
	color: var(--es-fk-foret-300);
}

/* État de refus : le panier contient du froid et l'adresse est hors zone.
   Ce n'est plus une précision mais un obstacle, et le client doit agir. Corail
   plutôt que rouge vif : l'avis natif de WooCommerce juste au-dessus occupe
   déjà le registre de l'alerte, en répéter le ton ferait crier deux fois. */
body #wfacp-e-form .es-fk-froid--refus{
	margin-top: 10px;
	padding: 12px 14px;
	border-radius: var(--es-fk-rayon);
	background: rgba(238, 110, 106, .08);
	color: var(--es-fk-foret);
	font-size: 13px;
}

body #wfacp-e-form .es-fk-froid--refus .es-fk-froid__ic{
	color: var(--es-fk-corail);
}


/* ==========================================================================
   5. Bouton de continuation et lien de retour
   --------------------------------------------------------------------------
   Forme seulement. Le fond du bouton est imposé par la couleur d'accent des
   réglages FunnelKit, en style inline après cette feuille.
   ========================================================================== */

body #wfacp-e-form .wfacp_main_form .wfacp-next-btn-wrap{
	margin-top: 26px;
}

body #wfacp-e-form .wfacp_main_form button.button.wfacp_next_page_button,
body #wfacp-e-form .wfacp_main_form #payment #place_order{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 18px 22px;
	border: 0;
	border-radius: var(--es-fk-rayon);
	box-shadow: none;
	font-family: var(--es-fk-font);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
}

/* L'icône du bouton vient d'un ::before en police d'icônes (bwf-icons),
   posé en style inline par les réglages FunnelKit, glyphe \e902, avant le
   texte. La maquette veut une flèche après le libellé. On neutralise le
   pseudo-élément et on pose le nôtre en ::after.

   Quatre classes dans le sélecteur : la règle en ligne pèse (1,3,2) et arrive
   après cette feuille, il faut la dépasser. La flèche est un data URI, donc
   sa couleur est écrite en dur : currentColor n'y est pas résolu. Blanc, comme
   le libellé du bouton. */
body #wfacp-e-form .wfacp-left-panel .wfacp-next-btn-wrap button.wfacp_next_page_button::before{
	content: none;
	display: none;
}

body #wfacp-e-form .wfacp-left-panel .wfacp-next-btn-wrap button.wfacp_next_page_button::after{
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	flex: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15m-6-6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .18s var(--es-fk-ease);
}

body #wfacp-e-form .wfacp-left-panel .wfacp-next-btn-wrap button.wfacp_next_page_button:hover::after{
	transform: translateX(3px);
}


/* Mention de sécurité sous le bouton de paiement, dernière étape. Posée par
   es-fk-tunnel.php sur woocommerce_review_order_after_submit. */
body #wfacp-e-form .es-fk-securite{
	margin: 12px 0 0;
	color: var(--es-fk-foret-500);
	font-size: 12.5px;
	line-height: 1.5;
	text-align: center;
}


/* ---- retour à l'étape précédente ---- */

/* Le gabarit centre ce bloc avec le bouton principal. La maquette le pose à
   gauche, sous le bouton : c'est une sortie de secours, pas une action de
   même rang. */
body #wfacp-e-form .wfacp_main_form .btm_btn_sec,
body #wfacp-e-form .wfacp_main_form .wfacp-back-btn-wrap{
	margin-top: 18px;
	text-align: left;
}

/* Le display est forcé : sans lui, une règle du gabarit remet le lien en
   `inline`, et un pseudo-élément d'élément inline ignore width et height —
   l'inspecteur les montre alors barrées et la flèche n'apparaît pas. */
body #wfacp-e-form .wfacp_main_form .wfacp-back-btn-wrap a.wfacp_back_page_button{
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	color: var(--es-fk-foret-500);
	font-family: var(--es-fk-font);
	font-size: 14.5px;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--es-fk-filet-fonce);
	text-underline-offset: .22em;
	transition: color .18s var(--es-fk-ease);
}

body #wfacp-e-form .wfacp_main_form .wfacp-back-btn-wrap a.wfacp_back_page_button::before{
	content: "";
	display: block;
	width: 15px;
	height: 15px;
	flex: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C5138' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H5m6-6-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .18s var(--es-fk-ease);
}

body #wfacp-e-form .wfacp_main_form .wfacp-back-btn-wrap a.wfacp_back_page_button:hover{
	color: var(--es-fk-foret);
	text-decoration-color: var(--es-fk-foret);
}

body #wfacp-e-form .wfacp_main_form .wfacp-back-btn-wrap a.wfacp_back_page_button:hover::before{
	transform: translateX(-3px);
}


/* ==========================================================================
   6. Récapitulatif de droite — articles
   ========================================================================== */

body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_mini_cart_items{
	width: 100%;
	border: 0;
	border-collapse: collapse;
}

/* Le filet est sur la ligne, pas sur chaque cellule. Posé cellule par
   cellule, il se décalait en hauteur d'une colonne à l'autre, chacune ayant
   son propre contenu. Le tableau étant en border-collapse, une bordure sur
   le <tr> est parfaitement rendue. */
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_mini_cart_items tr.cart_item{
	border-bottom: 1px solid var(--es-fk-filet);
}

body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_mini_cart_items tr.cart_item > td{
	padding: 18px 0;
	border: 0;
	vertical-align: top;
	background: transparent;
}

/* ---- vignette et pastille de quantité ---- */

body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp-pro-thumb{
	position: relative;
	width: 66px;
	height: 66px;
	border: 1px solid var(--es-fk-filet);
	border-radius: var(--es-fk-rayon);
	background: var(--es-fk-beige);
	overflow: visible;
}

/* Même précaution que sur le panier latéral : Imagify encapsule les images
   dans un <picture> et y remonte les attributs de l'<img>. */
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp-pro-thumb picture{
	display: block;
	width: 100%;
	height: 100%;
}

/* Sans remplissage : la vignette occupe tout le cadre. `contain` est conservé
   plutôt que `cover`, qui rognerait les packshots dont le format n'est pas
   exactement carré. */
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp-pro-thumb img{
	width: 100%;
	height: 100%;
	padding: 0;
	object-fit: contain;
	object-position: center;
	border-radius: var(--es-fk-rayon);
}

body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp-pro-thumb .wfacp-qty-ball{
	position: absolute;
	top: -8px;
	right: -8px;
	left: auto;
	width: 23px;
	height: 23px;
	display: grid;
	place-items: center;
	border: 2px solid var(--es-fk-blanc);
	border-radius: 50%;
	background: var(--es-fk-foret);
	color: var(--es-fk-blanc);
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1;
}

body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp-pro-thumb .wfacp-qty-count,
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp-pro-thumb .wfacp-pro-count{
	color: inherit;
	font: inherit;
}

/* ---- nom et variation ---- */

body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_mini_cart_item_title{
	color: var(--es-fk-foret);
	font-size: 14.8px;
	font-weight: 600;
	line-height: 1.35;
}

body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_mini_cart_item_title .product-quantity{
	color: var(--es-fk-foret-500);
	font-weight: 400;
}

/* Variation du produit, sur sa propre ligne sous le nom. Le rendu détaillé
   est activé par le filtre wfacp_mini_cart_show_variation_details dans
   es-fk-tunnel.php ; sans lui, FunnelKit colle tout dans le titre. */
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_pro_attr_single,
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_selected_attributes,
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) dl.variation{
	display: block;
	margin: 3px 0 0;
	color: var(--es-fk-foret-500);
	font-size: 12.8px;
	font-weight: 400;
	line-height: 1.4;
}

/* Le nom de l'attribut est masqué, seule la valeur reste. Sur ce catalogue il
   est rédigé comme une question posée au client sur la fiche produit
   (« Choisissez votre durée de cure: »), ce qui n'a plus de sens une fois le
   choix fait et récapitulé.

   Chaque valeur garde sa ligne : un produit à deux attributs resterait
   lisible, même sans ses intitulés. */
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) dl.variation dt{
	display: none;
}

body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) dl.variation dd,
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) dl.variation dd p{
	display: block;
	margin: 0;
	padding: 0;
	color: inherit;
	font: inherit;
}

/* Le lien « Choix des options » sort du même appel que le libellé de
   variation, activé par le filtre wfacp_mini_cart_show_variation_details dans
   es-fk-tunnel.php. On garde le libellé, on retire le lien : changer de
   variation depuis le récapitulatif ouvre un aperçu rapide au milieu du
   tunnel, ce que la maquette ne prévoit pas.

   Retrait en CSS faute de mieux : le gabarit n'offre aucun filtre sur ce
   morceau, et vider son libellé laisserait un lien vide, imprimé quand même.
   Le markup subsiste donc, inerte. */
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) a.wfacp_select_option,
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_product_select_options{
	display: none !important;
}

/* Économie réalisée sur l'article, posée par es-fk-tunnel.php. Vert lien,
   pas vert vif : c'est du texte de 12 px, il lui faut ses 4,18:1. */
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .es-fk-eco{
	display: inline-block;
	margin-top: 5px;
	color: var(--es-fk-lien);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}

/* Tout ce que wc_price() imbrique reprend la couleur de la mention. Viser
   .amount et bdi ne suffisait pas : le symbole monétaire est dans son propre
   span, .woocommerce-Price-currencySymbol, qui restait noir au milieu d'une
   phrase verte. Le sélecteur descendant les couvre tous, présents et à venir. */
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .es-fk-eco span,
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .es-fk-eco bdi{
	font: inherit;
	color: inherit;
}

/* Dépliant de code promo : « J'ai un code promo » suivi d'un chevron, comme
   dans le panier latéral. Le texte est raccourci en PHP. */
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) a.wfacp_main_showcoupon,
body #wfacp-e-form a.wfacp_main_showcoupon{
	/* display forcé : sans lui une règle du gabarit remet le lien en `inline`,
	   et un pseudo-élément d'élément inline ignore width et height. Le chevron
	   disparaît alors, ses deux déclarations barrées dans l'inspecteur. */
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	color: var(--es-fk-foret);
	font-family: var(--es-fk-font);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) a.wfacp_main_showcoupon::after,
body #wfacp-e-form a.wfacp_main_showcoupon::after{
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	flex: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C5138' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .25s var(--es-fk-ease);
}

body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) a.wfacp_main_showcoupon:hover::after,
body #wfacp-e-form a.wfacp_main_showcoupon:hover::after{
	transform: translateY(2px);
}

/* Le bandeau de notice WooCommerce qui enveloppe ce lien n'a plus lieu
   d'être : c'est un dépliant, pas un message. */
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .woocommerce-info:has(a.wfacp_main_showcoupon),
body #wfacp-e-form .woocommerce-info:has(a.wfacp_main_showcoupon){
	margin: 16px 0 0;
	padding: 0;
	border: 0;
	background: none;
}

body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .woocommerce-info:has(a.wfacp_main_showcoupon)::before,
body #wfacp-e-form .woocommerce-info:has(a.wfacp_main_showcoupon)::before{
	display: none;
}

/* ---- sélecteur de quantité ---- */

body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_quantity_selector{
	display: inline-flex;
	align-items: center;
	height: auto;
	margin-top: 8px;
	border: 1px solid var(--es-fk-filet-fonce);
	border-radius: 7px;
	overflow: hidden;
}

body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_quantity_selector .value-button{
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border: 0;
	background: var(--es-fk-blanc);
	color: var(--es-fk-foret-500);
	cursor: pointer;
}

body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_quantity_selector .value-button:hover{
	background: var(--es-fk-creme);
	color: var(--es-fk-foret);
}

body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_quantity_selector input{
	width: 32px;
	height: 28px;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--es-fk-foret);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	-moz-appearance: textfield;
}

body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_quantity_selector input::-webkit-inner-spin-button,
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_quantity_selector input::-webkit-outer-spin-button{
	margin: 0;
	-webkit-appearance: none;
}

/* ---- prix et retrait ---- */

/* Largeur des deux colonnes.

   Le widget Elementor pose un `width: 30%` sur la cellule de droite, en style
   inline, donc après cette feuille : les montants se coupaient au milieu du
   chiffre. Le !important est le seul recours contre du style inline.

   Surtout pas `width: 1%` ici, la formule habituelle pour une colonne qui se
   réduit à son contenu : elle suppose une cellule de tableau ordinaire, alors
   que celle-ci est passée en conteneur flex plus bas pour inverser le prix
   barré et le prix payé. Le calcul de largeur minimale n'y répond pas de la
   même façon, et le montant se retrouvait coupé caractère par caractère.

   D'où un partage explicite, 70 % au nom du produit et le reste au montant,
   avec une largeur plancher en pixels et le non-retour à la ligne forcé sur les
   montants eux-mêmes : l'hériter de la cellule ne suffisait pas, quelque chose
   le remet à `normal` en descendant.

   Le même réglage existe dans l'éditeur du widget, sous la largeur de colonne :
   le corriger là serait plus propre, et ce bloc deviendrait inutile. */
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_mini_cart_items tr > td.product-name-area{
	width: 70% !important;
}

body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_mini_cart_items tr > td.product-total{
	width: auto !important;
	min-width: 96px;
	white-space: nowrap !important;
}

body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_mini_cart_items td.product-total del,
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_mini_cart_items td.product-total ins,
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_mini_cart_items td.product-total .amount,
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_mini_cart_items td.product-total bdi,
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_mini_cart_items td.product-total small{
	white-space: nowrap !important;
	word-break: normal !important;
	overflow-wrap: normal !important;
}

/* wc_format_sale_price() sort le prix barré avant le prix payé. La maquette
   fait l'inverse : le montant dû se lit en premier, l'ancien prix en dessous,
   en retrait. Colonne flex plutôt qu'un simple `order` sur deux éléments,
   pour que le bouton de retrait reste rangé après les deux. */
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_mini_cart_items td.product-total{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	color: var(--es-fk-foret);
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	text-align: right;
}

body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_mini_cart_items td.product-total ins{
	order: 1;
	background: none;
	text-decoration: none;
}

body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_mini_cart_items td.product-total del{
	order: 2;
	color: var(--es-fk-foret-300);
	font-size: 12.5px;
	font-weight: 400;
	text-decoration-thickness: 1px;
}

body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_mini_cart_items td.product-total .wfacp_cart_product_name_h{
	order: 3;
}

/* La ligne de tarif barré et la mention lue à voix haute sortent du même
   appel : celle-ci reste dans le flux pour les lecteurs d'écran, invisible. */
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_mini_cart_items td.product-total .screen-reader-text{
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_delete_item_wrap a{
	display: inline-flex;
	margin-top: 8px;
	border: 0;
	color: var(--es-fk-foret-300);
}

body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_delete_item_wrap a:hover{
	color: var(--es-fk-foret);
}

body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_delete_item_wrap svg{
	width: 16px;
	height: 16px;
}


/* ==========================================================================
   7. Récapitulatif de droite — coupon
   ========================================================================== */

body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp-coupon-page .wfacp_coupon_row{
	display: flex;
	align-items: stretch;
	gap: 8px;
	margin: 16px 0 4px;
}

body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp-coupon-page .wfacp_coupon_input{
	flex: 1;
	min-width: 0;
	height: 48px;
	border: 1px solid var(--es-fk-filet-fonce);
	border-radius: var(--es-fk-rayon);
	background: var(--es-fk-blanc);
	box-shadow: none;
	color: var(--es-fk-foret);
	font-family: var(--es-fk-font);
	font-size: 14.5px;
}

body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp-coupon-page .wfacp_coupon_input::placeholder{
	color: var(--es-fk-foret-300);
}

/* Bouton secondaire : contour vert forêt. Le vert vif reste à l'action
   principale, un seul aplat vif par écran. Fond forcé en blanc pour couvrir
   l'accent posé en ligne par le plugin sur ce bouton précis. */
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp-coupon-page .wfacp-coupon-field-btn,
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp-coupon-page .wfacp-coupon-btn,
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp-coupon-page button[type="button"]{
	height: 48px;
	flex: none;
	padding: 0 20px;
	border: 1px solid var(--es-fk-foret);
	border-radius: var(--es-fk-rayon);
	background-color: var(--es-fk-blanc);
	box-shadow: none;
	color: var(--es-fk-foret);
	font-family: var(--es-fk-font);
	font-size: 14.5px;
	font-weight: 600;
	text-transform: none;
	cursor: pointer;
}

body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp-coupon-page .wfacp-coupon-field-btn:hover,
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp-coupon-page .wfacp-coupon-btn:hover,
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp-coupon-page button[type="button"]:hover{
	background-color: var(--es-fk-foret);
	color: var(--es-fk-blanc);
}

body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_coupon_msg .woocommerce-message{
	border: 0;
	background: var(--es-fk-vif-050);
	border-radius: var(--es-fk-rayon);
	color: var(--es-fk-foret);
	font-size: 13px;
}


/* ==========================================================================
   8. Récapitulatif de droite — totaux
   ========================================================================== */

body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_mini_cart_reviews{
	width: 100%;
	border: 0;
	border-collapse: collapse;
}

body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_mini_cart_reviews tr > th,
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_mini_cart_reviews tr > td{
	padding: 8px 0;
	border: 0;
	background: transparent;
	font-size: 15px;
	line-height: 1.4;
	vertical-align: baseline;
}

/* Alignement par position, pas par balise : le plugin met la ligne
   d'expédition en deux <td> là où le sous-total utilise <th> puis <td>.
   Raisonner sur th/td décalait « Expédition » vers la droite, en gras. */
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_mini_cart_reviews tr > :first-child{
	color: var(--es-fk-foret-500);
	font-weight: 400;
	text-align: left;
}

body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_mini_cart_reviews tr > :last-child{
	color: var(--es-fk-foret);
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
}

/* Livraison offerte : le seul signal de gain de la colonne. Vert lien, pas
   vert vif, sur du texte de 15 px. */
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_mini_cart_reviews tr.shipping_total_fee > :last-child,
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_mini_cart_reviews tr.cart-discount > :last-child{
	color: var(--es-fk-lien);
}

body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_mini_cart_reviews tr.order-total > :first-child,
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_mini_cart_reviews tr.order-total > :last-child{
	padding-top: 16px;
	border-top: 1px solid var(--es-fk-filet);
	color: var(--es-fk-foret);
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -.02em;
}

/* Mention de TVA sous le total : elle reste, en retrait. */
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_mini_cart_reviews tr.order-total .includes_tax,
body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_mini_cart_reviews tr.order-total small{
	display: block;
	margin-top: 4px;
	color: var(--es-fk-foret-500);
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: 0;
}


/* ==========================================================================
   9. Moyens de paiement, et carte bancaire PayPlug
   --------------------------------------------------------------------------
   Chaque champ de carte est une iframe servie par secure.payplug.com. Son
   contenu est hors d'atteinte, origine différente : ni la police ni le texte
   de substitution ne sont modifiables. Restent les conteneurs.

   LA MISE EN PAGE RESTE CELLE DE PAYPLUG.

   Sa feuille fait déjà ce que demande la maquette : `.IntegratedPayment` est
   un conteneur flex à retour à la ligne, chaque champ prend `width:100%`, et
   l'expiration et le cryptogramme se posent côte à côte par un
   `max-width: calc(50% - 2px)`. Une première version imposait ici une grille
   à deux colonnes, une hauteur et un remplissage : les deux mises en page se
   sont superposées et le bloc a cassé.

   Trois pièges relevés dans sa feuille, à ne pas réintroduire :

   - `padding: 0 16px 0 50px` sur les champs réserve la place d'une icône en
     ::before positionnée à `left:16px`. Remplacer ce remplissage fait passer
     l'icône sous le texte de l'iframe.
   - `.IntegratedPayment_scheme input { display: none }` masque les boutons
     radio de réseau ; le choix se lit par un logo couleur révélé en
     `input:checked + span:before`. Toute autre technique de masquage les fait
     réapparaître en ronds nus.
   - `.IntegratedPayment.-loaded { display: flex }` porte toute la mise en
     page. Y toucher défait le reste.

   Ne sont donc repris ici que la largeur, la hauteur, le filet, le rayon et
   les couleurs.
   ========================================================================== */

/* ---- la liste des moyens de paiement ----
   Reprise de `.opts` / `.opt` de la maquette : un cadre unique, une ligne par
   moyen, filet entre les lignes, et l'option retenue sur fond vert pâle.

   Le vert est porté par la ligne entière, pas par l'encart déplié : sinon
   PayPal ou Alma, qui n'en ont pas, resteraient blancs une fois choisis. Le
   `:has()` lit l'état du bouton radio, donc l'affichage suit le clic sans
   qu'aucun JavaScript ait à poser de classe. */

body #wfacp-e-form #payment{
	padding: 0;
	background: transparent;
}

body #wfacp-e-form #payment ul.payment_methods{
	margin: 14px 0 0;
	padding: 0;
	border: 1px solid var(--es-fk-filet-fonce);
	border-radius: 10px;
	background: var(--es-fk-blanc);
	list-style: none;
	overflow: hidden;
}

body #wfacp-e-form #payment ul.payment_methods li.wc_payment_method{
	margin: 0;
	padding: 16px 18px;
	border-bottom: 1px solid var(--es-fk-filet);
	background: var(--es-fk-blanc);
	transition: background .18s var(--es-fk-ease);
}

body #wfacp-e-form #payment ul.payment_methods li.wc_payment_method:last-child{
	border-bottom: 0;
}

/* Le fond de la ligne retenue. Le !important est nécessaire : le gabarit pose
   un fond blanc sur ces lignes en style inline, après cette feuille. Sans lui,
   seul le bouton radio prenait la couleur d'accent et la ligne restait
   blanche, ce qui ne signale rien. */
body #wfacp-e-form #payment ul.payment_methods li.wc_payment_method:has(input.input-radio:checked){
	background-color: var(--es-fk-vif-050) !important;
}

body #wfacp-e-form #payment ul.payment_methods li.wc_payment_method > label{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0;
	color: var(--es-fk-foret);
	font-family: var(--es-fk-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	cursor: pointer;
}

body #wfacp-e-form #payment ul.payment_methods li.wc_payment_method > label img{
	max-height: 22px;
	width: auto;
	margin: 0;
	vertical-align: middle;
}

/* L'encart déplié n'a plus de fond propre : la ligne le porte déjà. Le fond
   gris et la flèche de WooCommerce sont retirés, le remplissage horizontal
   vient de la ligne. */
body #wfacp-e-form #payment ul.payment_methods li.wc_payment_method .payment_box,
body #wfacp-e-form .payment_box.payment_method_payplug{
	margin: 0;
	padding: 16px 0 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--es-fk-foret);
	font-family: var(--es-fk-font);
	font-size: 14px;
	line-height: 1.5;
}

body #wfacp-e-form #payment ul.payment_methods li.wc_payment_method .payment_box::before,
body #wfacp-e-form .payment_box.payment_method_payplug::before{
	display: none;
}

/* PayPlug plafonne son bloc à 400 px. Dans la colonne du tunnel, ça laissait
   les champs de carte plus étroits que ceux de l'adresse, juste au-dessus. */
body #wfacp-e-form .payment_box .payplug.IntegratedPayment{
	max-width: none;
	margin-top: 0;
}

/* 52 px, comme tous les autres champs du tunnel. La hauteur porte aussi
   l'iframe, qui la reprend par son `height: inherit`. */
body #wfacp-e-form .payment_box .payplug.IntegratedPayment_container.-cardHolder,
body #wfacp-e-form .payment_box .payplug.IntegratedPayment_container.-pan,
body #wfacp-e-form .payment_box .payplug.IntegratedPayment_container.-exp,
body #wfacp-e-form .payment_box .payplug.IntegratedPayment_container.-cvv{
	height: 52px;
	line-height: 52px;
	margin-bottom: 12px;
	border: 1px solid var(--es-fk-filet-fonce);
	border-radius: var(--es-fk-rayon);
	background: var(--es-fk-blanc);
}

/* L'icône est un masque de 24 px calé par le haut : à 40 px de champ, les 20 %
   de PayPlug la centraient, à 52 px elles la remontent. On la recentre, et on
   passe son gris #95999E au vert-gris de la charte. */
body #wfacp-e-form .payment_box .payplug.IntegratedPayment_container.-cardHolder::before,
body #wfacp-e-form .payment_box .payplug.IntegratedPayment_container.-pan::before,
body #wfacp-e-form .payment_box .payplug.IntegratedPayment_container.-exp::before,
body #wfacp-e-form .payment_box .payplug.IntegratedPayment_container.-cvv::before{
	top: calc(50% - 12px);
	background-color: var(--es-fk-foret-300);
}

/* L'écart entre expiration et cryptogramme. PayPlug laisse 4 px, la maquette
   en veut 12 : le conteneur est en `justify-content: space-between`, donc
   réduire la largeur maximale suffit à ouvrir la gouttière. */
body #wfacp-e-form .payment_box .payplug.IntegratedPayment_container.-exp,
body #wfacp-e-form .payment_box .payplug.IntegratedPayment_container.-cvv,
body #wfacp-e-form .payment_box .payplug.IntegratedPayment_error.-exp,
body #wfacp-e-form .payment_box .payplug.IntegratedPayment_error.-cvv{
	max-width: calc(50% - 6px);
}

/* Focus au vert de la charte, erreur au rouge de PayPlug : un champ de carte
   invalide doit rester rouge, c'est une convention que personne ne relit. */
body #wfacp-e-form .payment_box .payplug.IntegratedPayment_container.-cardHolder.-focus,
body #wfacp-e-form .payment_box .payplug.IntegratedPayment_container.-pan.-focus,
body #wfacp-e-form .payment_box .payplug.IntegratedPayment_container.-exp.-focus,
body #wfacp-e-form .payment_box .payplug.IntegratedPayment_container.-cvv.-focus{
	border-color: var(--es-fk-vif);
	box-shadow: 0 0 0 3px rgba(51, 159, 91, .16);
}

/* Intitulé « VOTRE CARTE ». Les boutons de réseau qui le suivent sont laissés
   entièrement à PayPlug, masquage des radios compris. */
body #wfacp-e-form .payment_box .payplug.IntegratedPayment_container.-scheme > div:first-child{
	color: var(--es-fk-foret-500);
	font-family: var(--es-fk-font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
}

/* ---- erreurs ---- */

body #wfacp-e-form .payment_box .payplug.IntegratedPayment_error{
	margin: 0;
	color: #B00C0C;
	font-size: 12.5px;
	line-height: 1.4;
}

body #wfacp-e-form .payment_box .payplug.IntegratedPayment_error.-payment{
	padding: 10px 12px;
	border-radius: 6px;
	background: #FDEFEF;
}

/* ---- mentions de bas de bloc ---- */

body #wfacp-e-form .payment_box .payplug.IntegratedPayment_container.-transaction{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 4px 0 0;
	border: 0;
	background: none;
	color: var(--es-fk-foret-500);
	font-size: 12.5px;
}

body #wfacp-e-form .payment_box .payplug.IntegratedPayment_container.-transaction .transaction-label{
	margin: 0;
	color: inherit;
	font-size: inherit;
	font-weight: 400;
}

body #wfacp-e-form .payment_box .payplug.IntegratedPayment_container.-transaction .lock-icon{
	width: 13px;
	height: auto;
}

body #wfacp-e-form .payment_box .payplug.IntegratedPayment_container.-transaction .payplug-logo{
	width: auto;
	height: 15px;
}

body #wfacp-e-form .payment_box .payplug.IntegratedPayment_container.-privacy-policy{
	padding: 0;
	border: 0;
	background: none;
	text-align: center;
}

body #wfacp-e-form .payment_box .payplug.IntegratedPayment_container.-privacy-policy a{
	color: var(--es-fk-foret-500);
	font-size: 12px;
	text-decoration: underline;
	text-underline-offset: .18em;
}

body #wfacp-e-form .payment_box .payplug.IntegratedPayment_container.-privacy-policy a:hover{
	color: var(--es-fk-foret);
}


/* ==========================================================================
   10. Récapitulatif repliable, sous 1200 px
   Le même contenu, présenté en accordéon au-dessus du formulaire.
   ========================================================================== */

body .wfacp_collapsible_order_summary_wrap,
body .wfacp_mb_mini_cart_wrap{
	font-family: var(--es-fk-font);
	color: var(--es-fk-foret);
}

body .wfacp_mb_cart_accordian{
	border: 1px solid var(--es-fk-filet);
	border-radius: var(--es-fk-rayon);
	background: var(--es-fk-creme);
	color: var(--es-fk-foret);
	font-size: 14.5px;
	font-weight: 600;
}


/* ==========================================================================
   11. Écrans étroits
   ========================================================================== */

@media (max-width: 640px){

	body #wfacp-e-form .wfacp_form_steps .wfacp-payment-tab-wrapper{
		gap: 6px;
		margin-bottom: 22px;
	}

	body #wfacp-e-form .wfacp_form_steps .wfacp-payment-tab-list,
	body #wfacp-e-form .wfacp_form_steps .wfacp-order2StepTitle{
		font-size: 13px;
	}

	body #wfacp-e-form .wfacp_main_form .wfacp_section_heading,
	body #wfacp-e-form .wfacp_main_form .wfacp_section_title{
		font-size: 17px;
	}

	body #wfacp-e-form .wfacp_main_form button.button.wfacp_next_page_button,
	body #wfacp-e-form .wfacp_main_form #payment #place_order{
		padding: 16px 18px;
		font-size: 15.5px;
	}

	body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_mini_cart_reviews tr.order-total > th,
	body :is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .wfacp_mini_cart_reviews tr.order-total > td{
		font-size: 19px;
	}
}


/* ---- note sous le champ téléphone ----
   Rendue par WooCommerce dans l'enveloppe de saisie, après le champ. Le
   sélecteur reste sur l'enveloppe et non sur l'identifiant du champ : la
   description existe aussi sur shipping_phone quand ce champ est activé. */
body #wfacp-e-form .woocommerce-input-wrapper > .description{
	display: block;
	margin-top: 7px;
	color: var(--es-fk-foret-300);
	font-family: var(--es-fk-font);
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.45;
}


/* ==========================================================================
   Compte client : se connecter, ou en créer un
   --------------------------------------------------------------------------
   Deux invitations, l'une au-dessus du formulaire, l'autre sous le courriel.
   Toutes deux étaient correctes et invisibles : du texte de la taille de tout
   le reste, dans un écran qu'on remplit vite.

   On les sort de la file par la couleur et le cadre, jamais par un bouton :
   un bouton ici entrerait en concurrence avec « Continuer », et ni la
   connexion ni la création de compte ne doivent paraître être l'étape
   suivante du parcours.
   ========================================================================== */

/* ---- « Créer mon compte », sous le courriel ---- */

body #wfacp-e-form .woocommerce-account-fields{
	margin: 4px 0 0;
	padding: 14px 16px 12px;
	border: 1px solid var(--es-fk-vif-100);
	border-radius: var(--es-fk-rayon);
	background: var(--es-fk-vif-050);
}

/* Le sélecteur porte sur le paragraphe : la classe create-account est aussi
   celle du bloc des champs, juste en dessous. */
body #wfacp-e-form .woocommerce-account-fields p.create-account{
	margin: 0;
	padding: 0;
}

body #wfacp-e-form .woocommerce-account-fields p.create-account label{
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	cursor: pointer;
}

body #wfacp-e-form .woocommerce-account-fields p.create-account input[type="checkbox"]{
	width: 18px;
	height: 18px;
	margin: 0;
	flex: none;
	accent-color: var(--es-fk-vif);
	cursor: pointer;
}

body #wfacp-e-form .woocommerce-account-fields p.create-account label span{
	color: var(--es-fk-foret);
	font-family: var(--es-fk-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

/* Retrait aligné sur le libellé, pas sur la case : la liste se lit comme la
   suite de la phrase qu'on vient de cocher. */
body #wfacp-e-form .es-fk-compte{
	margin: 8px 0 0;
	padding: 0 0 0 28px;
	list-style: none;
}

body #wfacp-e-form .es-fk-compte__item{
	display: flex;
	align-items: flex-start;
	gap: 7px;
	margin: 0;
	padding: 3px 0;
	color: var(--es-fk-foret-500);
	font-family: var(--es-fk-font);
	font-size: 12.5px;
	line-height: 1.45;
}

body #wfacp-e-form .es-fk-compte__ic{
	width: 13px;
	height: 13px;
	flex: none;
	margin-top: 3px;
	color: var(--es-fk-vif);
}

/* Les champs du compte, une fois la case cochée. Ils restent dans la carte,
   détachés par un filet plutôt que par une marge, pour qu'on voie qu'ils
   appartiennent à ce qui vient d'être accepté. */
body #wfacp-e-form .woocommerce-account-fields div.create-account{
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--es-fk-vif-100);
}


/* ==========================================================================
   Case d'abonnement Brevo
   --------------------------------------------------------------------------
   FunnelKit range les champs déclarés par les extensions tierces dans le
   groupe de facturation, et masque ce groupe tant que la facturation suit
   l'adresse de livraison :

       .wfacp_billing_fields.wfacp_billing_field_hide { display: none !important; }

   Sa compatibilité Brevo tente pourtant d'éviter ce classement, par une ligne
   qui n'a aucun effet : elle accroche `wfacp_add_billing_shipping_wrapper`,
   un point d'entrée que le plugin ne déclenche nulle part. Soixante-dix
   fichiers de compatibilité portent la même ligne morte, et l'add_action sur
   ce qui devrait être un filtre dit assez qu'elle n'a jamais été relue.

   Le champ hérite donc du masquage où qu'on le place dans l'éditeur. On le
   rétablit ici, pour lui seul, en ciblant son identifiant : il vit dans sa
   propre section « Newsletter », il n'a rien à voir avec l'adresse de
   facturation, et doit rester visible en toutes circonstances.

   À retirer si une version future de FunnelKit déclenche enfin ce point
   d'entrée — le champ sortirait alors du groupe, et cette règle n'aurait plus
   d'objet.
   ========================================================================== */

body #wfacp-e-form p#ws_opt_in_field.wfacp_billing_field_hide{
	display: block !important;
}