/* Formulaire de connexion par lien magique */

.bfo-connexion { max-width: 460px; }

.bfo-connexion__label {
	display: block;
	margin-bottom: .5rem;
	font-size: .9375rem;
	font-weight: 600;
}

.bfo-connexion__ligne {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.bfo-connexion__ligne input[type="email"] {
	flex: 1 1 220px;
	min-width: 0;
}
.bfo-connexion__ligne button { flex: 0 0 auto; cursor: pointer; }

.bfo-connexion__aide {
	margin-top: .75rem;
	font-size: .8125rem;
	line-height: 1.5;
	color: #6B6060;
}

.bfo-message {
	margin-bottom: 1rem;
	padding: .75rem 1rem;
	border-radius: 10px;
	font-size: .9375rem;
	line-height: 1.5;
}
.bfo-message--ok     { background: #E4F4EA; color: #17693F; }
.bfo-message--erreur { background: #FDE7E9; color: #A3182A; }

.bfo-connexion__ou {
	position: relative;
	margin: 2rem 0 1.5rem;
	text-align: center;
	border-top: 1px solid #E5DEDE;
}
.bfo-connexion__ou span {
	position: relative;
	top: -.7em;
	padding: 0 .875rem;
	background: #fff;
	font-size: .8125rem;
	color: #6B6060;
}

.bfo-connexion-woo { margin-bottom: 1rem; }

/* Économie affichée sous le prix soldé */
.bfo-economie {
	display: block;
	margin-top: .375rem;
	font-family: inherit;
	font-size: .8125rem;
	font-weight: 600;
	color: #17693F;
}

/* Encart de retrait sur la confirmation de commande */
.bfo-retrait {
	margin-bottom: 2rem;
	padding: 1.25rem 1.5rem;
	background: #FDEDEE;
	border-left: 3px solid #EF3341;
	border-radius: 0 12px 12px 0;
}
.bfo-retrait h2 { margin-top: 0; font-size: 1.125rem; }
.bfo-retrait p:last-child { margin-bottom: 0; }

/* ==================================================================
   ESPACE CLIENT
   ================================================================== */

.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: 236px minmax(0, 1fr);
	gap: 2.5rem;
	align-items: start;
}

/* --- Menu latéral --- */

.woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: .375rem;
	list-style: none;
	border: 1px solid #E5DEDE;
	border-radius: 14px;
	background: #fff;
}
.woocommerce-MyAccount-navigation li { margin: 0; }

.woocommerce-MyAccount-navigation a {
	display: flex;
	align-items: center;
	gap: .625rem;
	padding: .625rem .75rem;
	border-radius: 9px;
	color: #1A1416;
	font-size: .9375rem;
	font-weight: 500;
	text-decoration: none;
	transition: background 180ms cubic-bezier(.2,.7,.3,1), color 180ms cubic-bezier(.2,.7,.3,1);
}
.woocommerce-MyAccount-navigation a:hover {
	background: #F9F5F5;
	color: #1A1416;
	text-decoration: none;
}
.woocommerce-MyAccount-navigation .is-active > a {
	background: #FDEDEE;
	color: #EF3341;
	font-weight: 600;
}

/* Pictogramme par rubrique, dessiné en masque pour suivre la couleur */
.woocommerce-MyAccount-navigation a::before {
	content: "";
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	background: currentColor;
	-webkit-mask: var(--ic) no-repeat center / contain;
	mask: var(--ic) no-repeat center / contain;
}
.bfo-compte__item--dashboard      { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); }
.bfo-compte__item--orders         { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E"); }
.bfo-compte__item--edit-address   { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.bfo-compte__item--edit-account   { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.8 20a7.2 7.2 0 0 1 14.4 0'/%3E%3C/svg%3E"); }
.bfo-compte__item--customer-logout{ --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3'/%3E%3Cpath d='M10 17 5 12l5-5'/%3E%3Cpath d='M5 12h11'/%3E%3C/svg%3E"); }

/* La déconnexion est une action, pas une rubrique : on la détache */
.bfo-compte__item--customer-logout {
	margin-top: .375rem;
	padding-top: .375rem;
	border-top: 1px solid #E5DEDE;
}
.bfo-compte__item--customer-logout a { color: #6B6060; }

/* --- Tableau de bord --- */

.bfo-compte-tdb__salut {
	margin: 0 0 1.5rem;
	font-size: 1.25rem;
}

.bfo-compte-derniere {
	display: block;
	margin-bottom: 1.5rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid #E5DEDE;
	border-left: 3px solid #EF3341;
	border-radius: 0 14px 14px 0;
	background: #fff;
	color: #1A1416;
	text-decoration: none;
	transition: box-shadow 180ms cubic-bezier(.2,.7,.3,1), transform 180ms cubic-bezier(.2,.7,.3,1);
}
.bfo-compte-derniere:hover {
	text-decoration: none;
	color: #1A1416;
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(26,20,22,.06), 0 18px 40px -16px rgba(26,20,22,.18);
}
.bfo-compte-derniere__label {
	display: block;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #6B6060;
}
.bfo-compte-derniere__num {
	display: flex;
	align-items: center;
	gap: .625rem;
	margin-top: .25rem;
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -.02em;
}
.bfo-compte-derniere__meta {
	display: block;
	margin-top: .1875rem;
	font-size: .875rem;
	color: #6B6060;
}

.bfo-etat-commande {
	padding: .25rem .625rem;
	border-radius: 999px;
	background: #F9F5F5;
	color: #6B6060;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.bfo-etat-commande--processing { background: #FFF1D6; color: #8A5A00; }
.bfo-etat-commande--completed  { background: #E4F4EA; color: #17693F; }
.bfo-etat-commande--cancelled,
.bfo-etat-commande--refunded   { background: #FDE7E9; color: #A3182A; }

.bfo-compte-vide {
	margin-bottom: 1.5rem;
	padding: 2rem 1.5rem;
	border: 1px dashed #E5DEDE;
	border-radius: 14px;
	text-align: center;
	background: #F9F5F5;
}
.bfo-compte-vide p { margin: 0 0 1rem; color: #6B6060; }

.bfo-compte-cartes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
	gap: .75rem;
}
.bfo-compte-carte {
	display: block;
	padding: 1.125rem;
	border: 1px solid #E5DEDE;
	border-radius: 14px;
	background: #fff;
	color: #1A1416;
	text-decoration: none;
	transition: border-color 180ms cubic-bezier(.2,.7,.3,1), transform 180ms cubic-bezier(.2,.7,.3,1);
}
.bfo-compte-carte:hover {
	border-color: #EF3341;
	color: #1A1416;
	text-decoration: none;
	transform: translateY(-2px);
}
.bfo-compte-carte__icone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-bottom: .75rem;
	border-radius: 999px;
	background: #FDEDEE;
	color: #EF3341;
}
.bfo-compte-carte__icone svg { width: 1.125rem; height: 1.125rem; }
.bfo-compte-carte__titre { display: block; font-weight: 600; font-size: .9375rem; }
.bfo-compte-carte__texte { display: block; margin-top: .1875rem; font-size: .8125rem; color: #6B6060; }

/* --- Tableaux et formulaires de l'espace client --- */

.woocommerce-MyAccount-content table.shop_table {
	width: 100%;
	border: 1px solid #E5DEDE;
	border-radius: 14px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: .9375rem;
}
.woocommerce-MyAccount-content table.shop_table th {
	padding: .875rem 1rem;
	background: #F9F5F5;
	font-size: .75rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: left;
	color: #6B6060;
}
.woocommerce-MyAccount-content table.shop_table td {
	padding: .875rem 1rem;
	border-top: 1px solid #E5DEDE;
}

.woocommerce-MyAccount-content .woocommerce-Address {
	padding: 1.25rem;
	border: 1px solid #E5DEDE;
	border-radius: 14px;
	background: #fff;
}

@media (max-width: 781px) {
	.woocommerce-account .woocommerce { grid-template-columns: 1fr; gap: 1.5rem; }
	.woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: .25rem; }
	.woocommerce-MyAccount-navigation li { flex: 1 1 auto; }
	.bfo-compte__item--customer-logout { margin-top: 0; padding-top: 0; border-top: 0; }
}

/* WooCommerce fait flotter ses deux colonnes et leur impose une largeur
   en pourcentage. Tant qu'on ne les neutralise pas, la grille ci-dessus
   n'a aucun effet. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
}
.woocommerce-account .entry-content > .woocommerce,
.woocommerce-account .woocommerce {
	max-width: 1080px;
	margin-inline: auto;
}
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after { content: none; }

/* WooCommerce pose deux pseudo-éléments de clearfix sur .woocommerce.
   Dans un conteneur en grille ils comptent comme des cellules, ce qui
   décale le menu d'une colonne et renvoie le contenu à la ligne. On les
   neutralise et on place les deux colonnes explicitement. */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
	display: none;
}
.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation {
	grid-column: 1;
	grid-row: 1;
}
.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
	grid-column: 2;
	grid-row: 1;
}
@media (max-width: 781px) {
	.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
		grid-column: 1;
		grid-row: auto;
	}
}

/* ==================================================================
   PANIER VIDE
   Le visage en pleurs de WooCommerce dramatise un non-événement.
   Un panier au trait suffit à dire la même chose.
   ================================================================== */

.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	content: "";
	display: block;
	width: 3.5rem;
	height: 3.5rem;
	margin: 0 auto 1.25rem;
	background: var(--wp--preset--color--bordure, #E5DEDE);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* WooCommerce impose width:30% aux deux colonnes avec exactement la même
   spécificité que nos règles, et sa feuille est chargée après la nôtre.
   On ajoute le sélecteur d'élément pour reprendre la main sans !important. */
body.woocommerce-account .woocommerce > nav.woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce > div.woocommerce-MyAccount-content {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
}

/* WooCommerce remet padding:0 sur cette liste avec la même spécificité
   que notre règle : sans le sélecteur d'élément, la pastille de survol
   vient toucher les bords de la carte. */
body.woocommerce-account nav.woocommerce-MyAccount-navigation > ul {
	padding: .375rem;
}
body.woocommerce-account nav.woocommerce-MyAccount-navigation li > a,
body.woocommerce-account nav.woocommerce-MyAccount-navigation li > a:hover {
	text-decoration: none;
}

/* La rubrique active porte déjà une pastille : le soulignement en plus
   fait redondant. La règle de WooCommerce ayant la même spécificité que
   la nôtre, on ajoute la classe d'état pour trancher. */
body.woocommerce-account nav.woocommerce-MyAccount-navigation ul li.is-active > a {
	text-decoration: none;
}

/* ==================================================================
   ESPACE CLIENT EN VUE MOBILE
   Le menu passait en éléments de largeurs et de hauteurs inégales.
   On le range en grille de deux colonnes, toutes les cases au même
   gabarit, et la déconnexion cesse d'occuper une ligne entière.
   ================================================================== */

@media (max-width: 781px) {
	body.woocommerce-account nav.woocommerce-MyAccount-navigation > ul {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .375rem;
		padding: .375rem;
	}
	body.woocommerce-account nav.woocommerce-MyAccount-navigation li {
		display: flex;
	}
	body.woocommerce-account nav.woocommerce-MyAccount-navigation li > a {
		flex: 1;
		justify-content: flex-start;
		align-items: center;
		min-height: 2.875rem;
		padding: .5rem .625rem;
		border: 1px solid #E5DEDE;
		border-radius: 10px;
		font-size: .875rem;
		line-height: 1.2;
	}
	body.woocommerce-account nav.woocommerce-MyAccount-navigation .is-active > a {
		border-color: #EF3341;
	}
	/* Plus de séparateur : dans une grille il coupait la colonne */
	.bfo-compte__item--customer-logout {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}
	.bfo-compte-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bfo-compte-carte { padding: .875rem; }
	.bfo-compte-carte__texte { display: none; }
}
@media (max-width: 420px) {
	.bfo-compte-cartes { grid-template-columns: minmax(0, 1fr); }
	.bfo-compte-carte__texte { display: block; }
}

/* ==================================================================
   PAGE « MON COMPTE » DÉCONNECTÉE
   La grille à deux colonnes ne vaut que pour l'espace client connecté,
   qui a un menu latéral. Sans lui, le formulaire se retrouvait comprimé
   dans la colonne de 236 px prévue pour la navigation.
   ================================================================== */

.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) {
	display: block;
	max-width: 480px;
	margin-inline: auto;
}

.bfo-connexion-page { width: 100%; }

.bfo-connexion-woo {
	padding: 1.75rem;
	border: 1px solid #E5DEDE;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(26, 20, 22, .04), 0 8px 24px -12px rgba(26, 20, 22, .10);
}
.bfo-connexion-woo h2 {
	margin: 0 0 .5rem;
	font-size: 1.375rem;
	line-height: 1.2;
}
.bfo-connexion-woo__chapo {
	margin: 0 0 1.25rem;
	font-size: .9375rem;
	line-height: 1.5;
	color: #6B6060;
}
.bfo-connexion-woo .bfo-connexion { max-width: none; }
.bfo-connexion-woo .bfo-connexion__ligne { flex-direction: column; align-items: stretch; }
.bfo-connexion-woo .bfo-connexion__ligne button { width: 100%; }

/* Le mot de passe devient une porte secondaire, repliée par défaut. */
.bfo-connexion-page .woocommerce-form-login {
	margin-top: 1.25rem;
	padding: 0;
	border: 0;
}
.bfo-repli {
	margin-top: 1.25rem;
	border: 1px solid #E5DEDE;
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
}
.bfo-repli > summary {
	list-style: none;
	cursor: pointer;
	padding: .875rem 1.25rem;
	font-size: .9375rem;
	font-weight: 600;
	color: #6B6060;
}
.bfo-repli > summary::-webkit-details-marker { display: none; }
.bfo-repli > summary::after {
	content: "";
	float: right;
	width: 1rem;
	height: 1rem;
	margin-top: .1875rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform 160ms ease;
}
.bfo-repli[open] > summary::after { transform: rotate(180deg); }
.bfo-repli > .bfo-repli__corps { padding: 0 1.25rem 1.25rem; }

/* En passant la ligne en colonne, la base flex de 220 px prévue pour la
   largeur du champ s'appliquait à sa hauteur : il faisait 370 px. */
.bfo-connexion-woo .bfo-connexion__ligne input[type="email"] {
	flex: 0 0 auto;
	width: 100%;
	box-sizing: border-box;
}

/* ==================================================================
   PRÉFÉRENCES D'AFFICHAGE
   ================================================================== */

.fo-a11y { position: fixed; right: 1rem; bottom: 1rem; z-index: 90; }

.fo-a11y__bouton {
	display: flex; align-items: center; justify-content: center;
	width: 3rem; height: 3rem; padding: 0;
	border: 0; border-radius: 999px;
	background: #1A1416; color: #fff; cursor: pointer;
	box-shadow: 0 4px 14px rgba(26,20,22,.28);
	transition: background 180ms, transform 180ms;
}
.fo-a11y__bouton:hover { background: #EF3341; transform: translateY(-2px); }
.fo-a11y__bouton[aria-expanded="true"] { background: #EF3341; }

.fo-a11y__panneau {
	position: absolute; right: 0; bottom: calc(100% + .75rem);
	width: min(88vw, 330px);
	padding: 1.125rem;
	border: 1px solid #E5DEDE; border-radius: 16px;
	background: #fff;
	box-shadow: 0 18px 44px -18px rgba(26,20,22,.42);
}
.fo-a11y__panneau[hidden] { display: none; }

.fo-a11y__entete { display: flex; align-items: center; justify-content: space-between; margin-bottom: .875rem; }
.fo-a11y__entete h2 { margin: 0; font-size: 1rem; }
.fo-a11y__fermer {
	display: flex; width: 1.75rem; height: 1.75rem; padding: 0;
	align-items: center; justify-content: center;
	border: 0; border-radius: 999px; background: #F9F5F5; color: #6B6060; cursor: pointer;
}
.fo-a11y__fermer:hover { background: #FDEDEE; color: #EF3341; }

.fo-a11y__groupe { margin: 0 0 .875rem; padding: 0; border: 0; }
.fo-a11y__groupe legend { padding: 0 0 .5rem; font-size: .8125rem; font-weight: 600; }
.fo-a11y__tailles { display: flex; gap: .375rem; }
.fo-a11y__taille {
	flex: 1; padding: .5rem .25rem;
	border: 1px solid #E5DEDE; border-radius: 9px;
	background: #fff; font-family: inherit; font-size: .8125rem; cursor: pointer;
	transition: border-color 180ms, background 180ms, color 180ms;
}
.fo-a11y__taille:hover { border-color: #EF3341; }
.fo-a11y__taille[aria-checked="true"] { border-color: #EF3341; background: #FDEDEE; color: #EF3341; font-weight: 600; }

.fo-a11y__ligne {
	display: flex; align-items: center; gap: .75rem;
	padding: .625rem 0; border-top: 1px solid #F0E8E8; cursor: pointer;
}
.fo-a11y__texte { flex: 1; min-width: 0; }
.fo-a11y__titre { display: block; font-size: .875rem; font-weight: 600; }
.fo-a11y__aide { display: block; margin-top: .0625rem; font-size: .75rem; line-height: 1.35; color: #6B6060; }

/* Interrupteur : la vraie case reste focalisable, on la masque visuellement */
.fo-a11y__ligne input { position: absolute; opacity: 0; width: 0; height: 0; }
.fo-a11y__bascule {
	flex: none; position: relative; width: 2.25rem; height: 1.3125rem;
	border-radius: 999px; background: #DDD2D2; transition: background 180ms;
}
.fo-a11y__bascule::after {
	content: ""; position: absolute; top: 2px; left: 2px;
	width: 1.0625rem; height: 1.0625rem; border-radius: 999px; background: #fff;
	transition: transform 180ms;
}
.fo-a11y__ligne input:checked ~ .fo-a11y__bascule { background: #EF3341; }
.fo-a11y__ligne input:checked ~ .fo-a11y__bascule::after { transform: translateX(.9375rem); }
.fo-a11y__ligne input:focus-visible ~ .fo-a11y__bascule { outline: 2px solid #EF3341; outline-offset: 2px; }

.fo-a11y__reset {
	width: 100%; margin-top: .875rem; padding: .5rem;
	border: 1px solid #E5DEDE; border-radius: 999px;
	background: #fff; font-family: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer;
}
.fo-a11y__reset:hover { border-color: #EF3341; color: #EF3341; }
.fo-a11y__note { margin: .75rem 0 0; font-size: .6875rem; line-height: 1.4; color: #6B6060; }

@media print { .fo-a11y { display: none; } }

/* ------------------------------------------------------------------
   Effets des préférences, portés par la racine du document
------------------------------------------------------------------ */

html[data-fo-taille="grand"] { font-size: 112.5%; }
html[data-fo-taille="xl"]    { font-size: 125%; }

html[data-fo-espacement] body {
	line-height: 1.8 !important;
	letter-spacing: .06em !important;
	word-spacing: .16em !important;
}
html[data-fo-espacement] p { margin-bottom: 1.6em !important; }

html[data-fo-contraste] {
	--wp--preset--color--gris-texte: #4A4040;
	--wp--preset--color--bordure: #B9AAAA;
}
html[data-fo-contraste] body { color: #000; }

html[data-fo-liens] a:not(.wp-element-button):not(.fo-bouton-panier):not(.fo-categorie):not(.fo-mega__tuile) {
	text-decoration: underline;
	text-underline-offset: .18em;
}

html[data-fo-animations="0"] *,
html[data-fo-animations="0"] *::before,
html[data-fo-animations="0"] *::after {
	animation-duration: .001ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: .001ms !important;
	scroll-behavior: auto !important;
}

/* Carte non consentie : on explique pourquoi et on propose une issue. */
.fo-carte__refus {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: .75rem; height: 100%; min-height: 260px; padding: 1.5rem;
	background: #F9F5F5; text-align: center;
}
.fo-carte__refus p { margin: 0; font-size: .875rem; line-height: 1.5; color: #6B6060; max-width: 30ch; }
.fo-carte__accepter {
	padding: .625rem 1.25rem; border: 0; border-radius: 999px;
	background: #EF3341; color: #fff; font-family: inherit; font-size: .875rem; font-weight: 600; cursor: pointer;
}
.fo-carte__accepter:hover { background: #C4212D; }
.fo-carte__secours a { font-size: .75rem; }

/* ==================================================================
   BANDEAU DE CONSENTEMENT AUX COULEURS FO
   Les styles fournis par Tarteaucitron sont volontairement neutres
   (boutons jaunes, fond clair). On les reprend entièrement : un bandeau
   qui ne ressemble pas au site est pris pour une publicité et ignoré.
   ================================================================== */

#tarteaucitronAlertBig {
	box-sizing: border-box !important;
	padding: 1.375rem 1.5rem !important;
	background: #1A1416 !important;
	color: #fff !important;
	box-shadow: 0 -8px 32px -12px rgba(0, 0, 0, .45) !important;
	font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
}
#tarteaucitronAlertBig * { font-family: inherit !important; }

#tarteaucitronDisclaimerAlert,
#tarteaucitronDisclaimerAlert strong {
	display: block !important;
	max-width: 62ch;
	margin: 0 auto .875rem !important;
	color: #EDE4E4 !important;
	font-size: .9375rem !important;
	line-height: 1.55 !important;
	text-align: center !important;
}

/* Les trois actions partagent un même gabarit : refuser doit être
   aussi accessible qu'accepter, c'est une exigence de la CNIL. */
#tarteaucitronAlertBig button,
#tarteaucitronAlertBig #tarteaucitronCloseAlert {
	margin: .25rem .1875rem !important;
	padding: .6875rem 1.375rem !important;
	border: 1px solid transparent !important;
	border-radius: 999px !important;
	font-size: .9375rem !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	cursor: pointer !important;
	transition: background 180ms, border-color 180ms, color 180ms !important;
}

#tarteaucitronPersonalize,
#tarteaucitronPersonalize2 {
	background: #EF3341 !important;
	color: #fff !important;
}
#tarteaucitronPersonalize:hover,
#tarteaucitronPersonalize2:hover { background: #C4212D !important; }

#tarteaucitronAllDenied2,
#tarteaucitronAlertBig #tarteaucitronCloseAlert {
	background: transparent !important;
	border-color: rgba(255, 255, 255, .38) !important;
	color: #fff !important;
}
#tarteaucitronAllDenied2:hover,
#tarteaucitronAlertBig #tarteaucitronCloseAlert:hover {
	background: rgba(255, 255, 255, .12) !important;
	border-color: #fff !important;
}

#tarteaucitronPrivacyUrl,
#tarteaucitronPrivacyUrlDialog {
	background: none !important;
	border: 0 !important;
	color: #C9BFC1 !important;
	font-weight: 500 !important;
	text-decoration: underline !important;
}
#tarteaucitronPrivacyUrl:hover { color: #fff !important; }

#tarteaucitronAlertBig button:focus-visible {
	outline: 2px solid #fff !important;
	outline-offset: 2px !important;
}

/* Panneau de réglage détaillé */
#tarteaucitronAlertSmall #tarteaucitronManager,
#tarteaucitron #tarteaucitronServices .tarteaucitronMainLine { background: #1A1416 !important; }
#tarteaucitron #tarteaucitronClosePanel { background: #EF3341 !important; }
#tarteaucitron .tarteaucitronAllow { background: #17693F !important; }
#tarteaucitron .tarteaucitronDeny { background: #A3182A !important; }

/* Le bouton de réglages d'affichage doit rester atteignable : sans ça
   il passe sous le bandeau, exactement pour les personnes qui en ont
   le plus besoin. */
.fo-a11y { z-index: 2147483000; }
.fo-a11y[data-decale] { bottom: calc(1rem + var(--fo-bandeau-h, 0px)); }

@media (max-width: 600px) {
	#tarteaucitronAlertBig { padding: 1.125rem 1rem !important; }
	#tarteaucitronAlertBig button { display: block !important; width: 100% !important; margin: .25rem 0 !important; }
}

/* Correctif : « Tout refuser » se rendait sans fond ni bordure, donc
   bien moins visible qu'« Accepter ». La CNIL impose que refuser soit
   aussi simple et aussi apparent qu'accepter : on lui donne le même
   gabarit, en bouton contourné. « Personnaliser » redevient un lien,
   c'est une action secondaire. */
#tarteaucitronAlertBig #tarteaucitronAllDenied2 {
	background: transparent !important;
	border: 1px solid #fff !important;
	color: #fff !important;
	font-weight: 600 !important;
}
#tarteaucitronAlertBig #tarteaucitronAllDenied2:hover {
	background: #fff !important;
	color: #1A1416 !important;
}

#tarteaucitronAlertBig #tarteaucitronCloseAlert {
	background: transparent !important;
	border: 0 !important;
	color: #C9BFC1 !important;
	font-weight: 500 !important;
	text-decoration: underline !important;
}
#tarteaucitronAlertBig #tarteaucitronCloseAlert:hover { color: #fff !important; }

/* Le pictogramme seul n'était pas compris : on affiche le mot. Un
   bouton d'accessibilité qu'il faut deviner rate sa cible. */
.fo-a11y__bouton {
	width: auto;
	height: auto;
	gap: .5rem;
	padding: .6875rem 1.125rem;
	border-radius: 999px;
	font-family: Inter, ui-sans-serif, system-ui, sans-serif;
	font-size: .875rem;
	font-weight: 600;
}
.fo-a11y__libelle { white-space: nowrap; }

@media (max-width: 480px) {
	.fo-a11y__bouton { padding: .625rem .875rem; font-size: .8125rem; }
}

/* ==================================================================
   PANNEAU DÉTAILLÉ DE GESTION DES COOKIES
   Le thème par défaut de Tarteaucitron pose du texte sombre sur un fond
   sombre à plusieurs endroits. On reprend l'ensemble, en gardant le
   vert et le rouge pour autoriser/interdire : ce sont des conventions
   comprises, mais on les assombrit pour que le texte blanc passe.
   ================================================================== */

#tarteaucitron,
#tarteaucitron * { font-family: Inter, ui-sans-serif, system-ui, sans-serif !important; }

#tarteaucitron {
	border-radius: 16px !important;
	overflow: hidden !important;
	box-shadow: 0 24px 60px -20px rgba(26, 20, 22, .5) !important;
	max-width: min(94vw, 780px) !important;
}

/* --- Bandeau de tête --- */
#tarteaucitron #tarteaucitronServices .tarteaucitronMainLine,
#tarteaucitron #tarteaucitronInfo,
#tarteaucitron .tarteaucitronBorder > .tarteaucitronTitle {
	background: #1A1416 !important;
	border-color: #1A1416 !important;
	color: #fff !important;
}
#tarteaucitron #tarteaucitronServices .tarteaucitronMainLine *,
#tarteaucitron .tarteaucitronMainLine .tarteaucitronH1,
#tarteaucitron .tarteaucitronMainLine .tarteaucitronH2,
#tarteaucitron .tarteaucitronMainLine b,
#tarteaucitron .tarteaucitronMainLine span { color: #fff !important; }

#tarteaucitron #tarteaucitronInfo {
	background: rgba(255, 255, 255, .06) !important;
	border: 1px solid rgba(255, 255, 255, .18) !important;
	border-radius: 12px !important;
	color: #EDE4E4 !important;
	font-size: .9375rem !important;
	line-height: 1.55 !important;
}
#tarteaucitron #tarteaucitronInfo a,
#tarteaucitron #tarteaucitronPrivacyUrlDialog { color: #fff !important; text-decoration: underline !important; }

/* --- Corps du panneau --- */
#tarteaucitron .tarteaucitronBorder,
#tarteaucitron #tarteaucitronServices,
#tarteaucitron ul#tarteaucitronServices li { background: #fff !important; border-color: #E5DEDE !important; }

#tarteaucitron .tarteaucitronLine { background: #fff !important; border-bottom: 1px solid #F0E8E8 !important; }
#tarteaucitron .tarteaucitronLine:hover { background: #FDF8F8 !important; }

#tarteaucitron .tarteaucitronName,
#tarteaucitron .tarteaucitronName *,
#tarteaucitron .tarteaucitronListCookies,
#tarteaucitron .tarteaucitronTitle,
#tarteaucitron .tarteaucitronH3,
#tarteaucitron p, #tarteaucitron span, #tarteaucitron b, #tarteaucitron div { color: #1A1416 !important; }

#tarteaucitron .tarteaucitronName .tarteaucitronReadmoreSeparator,
#tarteaucitron .tarteaucitronDetails { color: #6B6060 !important; }

/* --- Boutons autoriser / interdire --- */
#tarteaucitron .tarteaucitronAsk button,
#tarteaucitron button.tarteaucitronAllow,
#tarteaucitron button.tarteaucitronDeny,
#tarteaucitron #tarteaucitronAllAllowed,
#tarteaucitron #tarteaucitronAllDenied,
#tarteaucitron #tarteaucitronSaveButton {
	padding: .5rem .875rem !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-size: .8125rem !important;
	font-weight: 600 !important;
	opacity: 1 !important;
	cursor: pointer !important;
}
#tarteaucitron button.tarteaucitronAllow,
#tarteaucitron #tarteaucitronAllAllowed,
#tarteaucitron #tarteaucitronSaveButton {
	background: #146138 !important;
	color: #fff !important;
}
#tarteaucitron button.tarteaucitronDeny,
#tarteaucitron #tarteaucitronAllDenied {
	background: #961626 !important;
	color: #fff !important;
}
#tarteaucitron button.tarteaucitronAllow:hover,
#tarteaucitron #tarteaucitronAllAllowed:hover { background: #0F4C2C !important; }
#tarteaucitron button.tarteaucitronDeny:hover,
#tarteaucitron #tarteaucitronAllDenied:hover { background: #78101E !important; }

#tarteaucitron .tarteaucitronIsAllowed .tarteaucitronAllow,
#tarteaucitron .tarteaucitronIsDenied .tarteaucitronDeny { outline: 2px solid #1A1416 !important; outline-offset: 1px !important; }

/* --- Fermeture --- */
#tarteaucitron #tarteaucitronClosePanel {
	background: #EF3341 !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 0 0 0 12px !important;
	font-weight: 600 !important;
	padding: .625rem 1.125rem !important;
}
#tarteaucitron #tarteaucitronClosePanel:hover { background: #C4212D !important; }

#tarteaucitronRoot button:focus-visible { outline: 2px solid #EF3341 !important; outline-offset: 2px !important; }

/* Voile d'arrière-plan */
#tarteaucitronBack { background: rgba(26, 20, 22, .72) !important; opacity: 1 !important; }

@media (max-width: 600px) {
	#tarteaucitron { max-width: 100vw !important; border-radius: 0 !important; }
	#tarteaucitron .tarteaucitronAsk { display: flex !important; gap: .375rem !important; }
	#tarteaucitron .tarteaucitronAsk button { flex: 1 !important; }
}

/* ==================================================================
   PAGE DE CONNEXION : DEUX COLONNES
   La carte seule au centre laissait un grand vide et le titre « Se
   connecter » de WooCommerce restait orphelin au-dessus du panneau
   replié. On équilibre : action à gauche, arguments à droite.
   ================================================================== */

.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) {
	max-width: 920px;
}

.bfo-connexion-page {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}

@media (min-width: 861px) {
	.bfo-connexion-page {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
		gap: 2.5rem;
	}
	/* La carte et le repli occupent la colonne de gauche, les atouts
	   la colonne de droite sur toute la hauteur. */
	.bfo-connexion-woo { grid-column: 1; grid-row: 1; }
	.bfo-repli { grid-column: 1; grid-row: 2; margin-top: 0; }
	.bfo-atouts { grid-column: 2; grid-row: 1 / span 2; }
}

/* --- Colonne d'arguments --- */
.bfo-atouts { padding-top: .5rem; }
.bfo-atouts ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.25rem; }
.bfo-atouts li { display: flex; align-items: flex-start; gap: .875rem; }

.bfo-atouts__icone {
	flex: none;
	display: flex; align-items: center; justify-content: center;
	width: 2.5rem; height: 2.5rem;
	border-radius: 999px;
	background: #FDEDEE; color: #C4212D;
}
.bfo-atouts__icone svg { width: 1.125rem; height: 1.125rem; }

.bfo-atouts__texte { display: flex; flex-direction: column; gap: .1875rem; }
.bfo-atouts__texte strong {
	font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
	font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
}
.bfo-atouts__texte span { font-size: .875rem; line-height: 1.5; color: #6B6060; }

.bfo-atouts__aide {
	margin: 1.5rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid #E5DEDE;
	font-size: .8125rem;
	color: #6B6060;
}

/* Le titre « Se connecter » de WooCommerce rejoint le panneau replié
   plutôt que de flotter au-dessus (voir le script). */
.bfo-repli__corps > h2 {
	margin: 0 0 1rem;
	font-size: 1.125rem;
}

/* Titre centré sur la page de connexion. WordPress pose la classe
   `logged-in` sur le corps du document : on cible donc l'inverse, ce
   qui laisse l'espace client connecté aligné à gauche comme le reste
   du site. */
body.woocommerce-account:not(.logged-in) .wp-block-post-title {
	text-align: center;
}
body.woocommerce-account:not(.logged-in) .bfo-connexion-page {
	margin-top: .5rem;
}

/* ==================================================================
   PAGE « MES ADRESSES »
   WooCommerce fait flotter ses deux colonnes à 48 %, ce qui produisait
   un effet d'escalier : la seconde carte décalée sous la première.
   On repasse en grille, et on habille les blocs en cartes comme le
   reste de l'espace client.
   ================================================================== */

body.woocommerce-account .woocommerce-Addresses.col2-set {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 1.25rem 0 0;
}
body.woocommerce-account .woocommerce-Addresses .col-1,
body.woocommerce-account .woocommerce-Addresses .col-2 {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
}

body.woocommerce-account .woocommerce-Address {
	display: flex;
	flex-direction: column;
	padding: 1.25rem 1.375rem 1.375rem;
	border: 1px solid #E5DEDE;
	border-radius: 14px;
	background: #fff;
}

/* Le titre et le lien d'édition sur une même ligne */
body.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	margin-bottom: .875rem;
	padding-bottom: .75rem;
	border-bottom: 1px solid #F0E8E8;
}
body.woocommerce-account .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-Address-title h3 {
	margin: 0;
	font-size: 1.0625rem !important;
	line-height: 1.25;
}
body.woocommerce-account .woocommerce-Address-title .edit {
	flex: none;
	font-size: .8125rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
body.woocommerce-account .woocommerce-Address-title .edit:hover { text-decoration: underline; }

body.woocommerce-account .woocommerce-Address address {
	margin: 0;
	font-style: normal;
	font-size: .9375rem;
	line-height: 1.6;
	color: #6B6060;
}

/* Le formulaire d'édition d'une adresse occupe toute la largeur */
body.woocommerce-account .woocommerce-address-fields { max-width: 560px; }
body.woocommerce-account .woocommerce-address-fields .form-row { margin-bottom: 1rem; }
body.woocommerce-account .woocommerce-address-fields label {
	display: block;
	margin-bottom: .3125rem;
	font-size: .875rem;
	font-weight: 600;
}
body.woocommerce-account .woocommerce-address-fields input,
body.woocommerce-account .woocommerce-address-fields select {
	width: 100%;
	box-sizing: border-box;
}

@media (max-width: 781px) {
	body.woocommerce-account .woocommerce-Addresses.col2-set { grid-template-columns: minmax(0, 1fr); }
}

/* Les pseudo-éléments de clearfix de WooCommerce comptent comme des
   cellules dans une grille : ils poussaient la seconde carte à la ligne
   suivante. Même piège que dans le menu de l'espace client. */
body.woocommerce-account .woocommerce-Addresses.col2-set::before,
body.woocommerce-account .woocommerce-Addresses.col2-set::after {
	display: none;
}

/* --------------------------------------------------------------
   Connexion e-FO
   -------------------------------------------------------------- */
.bfo-efo {
	margin-top: 1.75rem;
	text-align: center;
}

/* Séparateur « ou » : un trait de part et d'autre du mot. */
.bfo-efo__ou {
	display: flex;
	align-items: center;
	gap: .9rem;
	margin: 0 0 1.25rem;
	color: var(--wp--preset--color--gris-texte, #6B6060);
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .08em;
}

.bfo-efo__ou::before,
.bfo-efo__ou::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--wp--preset--color--bordure, #E5DEDE);
}

.bfo-efo__bouton {
	display: block;
	padding: .85rem 1.25rem;
	border: 2px solid var(--wp--preset--color--rouge-fonce, #C4212D);
	border-radius: 6px;
	color: var(--wp--preset--color--rouge-fonce, #C4212D);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

.bfo-efo__bouton:hover,
.bfo-efo__bouton:focus {
	background: var(--wp--preset--color--rouge-fonce, #C4212D);
	color: #fff;
}

.bfo-efo__aide {
	margin: .75rem 0 0;
	color: var(--wp--preset--color--gris-texte, #6B6060);
	font-size: .85rem;
}