/* ==========================================================================
   Entrée « Mon compte » dans le menu principal

   Même dessin que le panier, juste à côté : rond de 36 px, silhouette de 20 px,
   vert de la marque. Les deux se lisent comme une paire, ce qui est l'usage
   attendu en haut à droite d'une boutique.

   Couleurs prises dans le logo officiel : vert #397441, or #D19334.
   ========================================================================== */

.gg-compte-item {
	display: flex;
	align-items: center;
}

.gg-compte-item .gg-compte {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Le même écart que le panier, sinon les deux ronds de survol se touchent. */
	margin-inline-start: 2px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: #2f5c36;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.gg-compte-item .gg-compte:hover,
.gg-compte-item .gg-compte:focus-visible {
	background: rgba(57, 116, 65, 0.1);
	color: #04251e;
}

.gg-compte-item .gg-compte:focus-visible {
	outline: 2px solid #397441;
	outline-offset: 2px;
}

/* Même raison que pour le sac du panier : sans `flex: 0 0 auto`, le SVG se
   laisse comprimer par le conteneur flexible et se réduit à un trait. */
.gg-compte__icone {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	display: block;
}

/* --------------------------------------------------------------------------
   Un repli, sans plus

   Cette valeur de 6 px date de l'époque où le menu se battait pour tenir sur
   une ligne, avant que les icônes ne sortent du flux. Elle ne sert plus qu'à
   deux choses : sous 1 025 px, où les entrées de texte sont de toute façon
   masquées au profit du bandeau compact, et comme filet si le bloc de réglages
   plus bas venait à ne pas s'appliquer. Les vraies valeurs sont là-bas.

   Sélecteurs identiques à ceux du thème, donc à poids égal : c'est l'ordre de
   chargement qui tranche, et cette feuille est enfilée après la sienne.
   -------------------------------------------------------------------------- */

[data-elementor-type="header"] .elementor-nav-menu--main .elementor-nav-menu > li:not(:first-child) > a.elementor-item {
	margin-inline-start: 6px;
}

[data-elementor-type="header"] .elementor-nav-menu--main .elementor-nav-menu > li:not(:last-child) > a.elementor-item {
	margin-inline-end: 6px;
}

/*
 * Le libellé « Mon compte » est du TEXTE, pas un `aria-label`.
 *
 * Le nom accessible du lien se calcule donc à partir de son contenu : il ne
 * dépend d'aucun état de visiteur, ce qui le met à l'abri du cache de page, et
 * le libellé visible du menu déroulant y figure mot pour mot, comme l'exige le
 * critère 2.5.3 des WCAG. Sur ordinateur il est simplement masqué à l'œil, par
 * la technique habituelle qui le laisse dans l'arbre d'accessibilité.
 */
.gg-compte__titre {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ==========================================================================
   L'EN-TÊTE : petites capitales, et les icônes calées à droite

   Proposition retenue parmi cinq maquettées. Deux changements, un de style et
   un de structure.

   ---------------------------------------------------------------------------
   UNE ERREUR À CORRIGER D'ABORD, PARCE QU'ELLE CHANGE LE RAISONNEMENT
   ---------------------------------------------------------------------------
   La maquette annonçait que les petites capitales libéraient environ 90 px, au
   motif qu'un texte de 13 px est plus étroit qu'un texte de 16. C'est faux, et
   la mesure le dit : « Demandez Vos Gants » occupait 178 px en 16 px casse
   normale, et 195 px en 13 px capitales espacées.

   La raison est que trois effets se composent, et deux vont dans le mauvais
   sens : la réduction de corps fait gagner environ 19 %, mais les capitales
   sont environ 15 % plus larges que la casse mixte, et l'espacement des lettres
   en rajoute 9 %. Le solde est légèrement défavorable.

   Les petites capitales sont donc un choix de STYLE, et il COÛTE de la place :
   environ 85 px sur les six entrées. Ce qui fait tenir l'ensemble, c'est
   uniquement le second changement, qui en libère 155.

   ---------------------------------------------------------------------------
   LE STYLE
   ---------------------------------------------------------------------------
   13 px, graisse 600, capitales, et un espacement de 0,06 em plutôt que 0,09 :
   l'écriture reste celle d'une maison de tradition, et les 3 % économisés sont
   pris là où ils ne se voient pas.

   ---------------------------------------------------------------------------
   LA STRUCTURE
   ---------------------------------------------------------------------------
   Le panier et le compte quittent le flux de la navigation et se calent à
   droite, à l'aplomb de « Mon blog » et des réseaux sociaux du bandeau doré,
   une rangée plus bas.

   La méthode n'est PAS une position absolue, essayée puis abandonnée : les
   décalages auraient dépendu de la largeur des deux icônes, or celle du panier
   change avec son compteur. C'est une marge automatique dans la rangée
   flexible, la solution canonique : elle absorbe tout l'espace libre et pousse
   la paire au bord, quelle que soit sa largeur.

   Pour que cette marge ait de l'espace à absorber, la liste doit occuper toute
   la largeur : d'où le `width: 100%`. Et une marge intérieure garantit un écart
   minimal avant le panier, même quand il ne reste plus rien à distribuer.

   L'ordre de tabulation ne change pas : les deux icônes restent les derniers
   éléments du menu dans le document, ce qui est leur place logique.

   Tout ceci ne vaut qu'à partir de 1 025 px. En dessous, le bandeau compact
   plus bas dans ce fichier reprend la main et remet les deux icônes à côté du
   bouton hamburger.
   ========================================================================== */

@media (min-width: 1025px) {
	[data-elementor-type="header"] .elementor-nav-menu--main a.elementor-item {
		/*
		 * `!important` sur trois propriétés, et pas par confort.
		 *
		 * Elementor écrit la typographie de ce widget dans sa propre feuille, avec
		 * un sélecteur qui empile l'identifiant du modèle et celui de l'élément :
		 * aucune spécificité raisonnable ne le reprend.
		 *
		 * Mesuré après un premier essai sans : la taille passait, mais la graisse
		 * restait à 400 et la casse à `capitalize`. L'espacement des lettres, lui,
		 * n'en a pas besoin : le widget ne le déclare pas.
		 */
		font-size: 13px !important;
		font-weight: 600 !important;
		letter-spacing: 0.06em;
		text-transform: uppercase !important;
	}

	/* Le bouton « Boutique » suit la même écriture, en un cran plus appuyé : il
	   reste l'action principale de la rangée. Sa marge intérieure reste à 16 px
	   de chaque côté, celle du thème : l'élargir mangeait l'air gagné ailleurs. */
	[data-elementor-type="header"] .boutique-cta > a.elementor-item {
		font-size: 12.5px !important;
		font-weight: 700 !important;
		letter-spacing: 0.08em;
		text-transform: uppercase !important;
		padding: 14px 16px;
	}

	/* L'écart entre entrées. 16 px de chaque côté font 32 px entre deux voisines
	   sur les écrans larges, ce que la place permet une fois les icônes sorties. */
	[data-elementor-type="header"] .elementor-nav-menu--main .elementor-nav-menu > li:not(:first-child) > a.elementor-item {
		margin-inline-start: 8px;
	}

	[data-elementor-type="header"] .elementor-nav-menu--main .elementor-nav-menu > li:not(:last-child) > a.elementor-item {
		margin-inline-end: 8px;
	}

	/* La liste occupe toute la largeur : sans quoi la marge automatique n'a rien
	   à absorber, la liste étant sinon dimensionnée par son contenu. */
	[data-elementor-type="header"] .elementor-nav-menu--main .elementor-nav-menu {
		width: 100%;
	}

	/* La paire d'icônes est poussée au bord droit. La marge intérieure garantit
	   un écart avec le bouton « Boutique » même quand il ne reste plus d'espace
	   libre à distribuer. */
	[data-elementor-type="header"] .elementor-nav-menu--main .elementor-nav-menu > li.gg-panier-item {
		margin-inline-start: auto;
		padding-inline-start: 22px;
	}

	[data-elementor-type="header"] .elementor-nav-menu--main .elementor-nav-menu > li.gg-compte-item {
		padding-inline-start: 6px;
	}
}

/* --------------------------------------------------------------------------
   Entre 1 025 et 1 200 px, il faut resserrer encore

   Le conteneur du menu n'y fait plus que 909 px, mesuré, contre 1 080 sur un
   grand écran. Six entrées en capitales et deux icônes n'y tiennent pas aux
   valeurs ci-dessus : le corps descend d'un cran et les écarts se referment.
   C'est la largeur de beaucoup d'ordinateurs portables, elle mérite son
   réglage.
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) and (max-width: 1200px) {
	/* Une réduction PROGRESSIVE, et non un palier.
	   Un palier fixe à 11,5 px réduisait le texte autant à 1 180 px qu'à 1 030,
	   alors qu'il restait 186 px de libre à 1 180 : mesuré, et laid. La taille
	   suit donc la largeur, entre 11,5 px quand la place manque et 13 px dès
	   qu'elle revient, où le réglage général reprend la main. */
	[data-elementor-type="header"] .elementor-nav-menu--main a.elementor-item {
		font-size: clamp(11.5px, 1.09vw, 13px) !important;
		letter-spacing: 0.04em;
	}

	[data-elementor-type="header"] .boutique-cta > a.elementor-item {
		font-size: 11px !important;
		padding: 13px 13px;
	}

	/* Les écarts suivent la même logique fluide que la taille. Sans cela ils
	   sautaient de 3 à 8 px en franchissant 1 200 px, et l'espace avant le
	   panier RÉTRÉCISSAIT quand la fenêtre grandissait : 121 px à 1 180, puis
	   50 px à 1 280. Mesuré. */
	[data-elementor-type="header"] .elementor-nav-menu--main .elementor-nav-menu > li:not(:first-child) > a.elementor-item {
		margin-inline-start: clamp(3px, 0.5vw, 8px);
	}

	[data-elementor-type="header"] .elementor-nav-menu--main .elementor-nav-menu > li:not(:last-child) > a.elementor-item {
		margin-inline-end: clamp(3px, 0.5vw, 8px);
	}

	[data-elementor-type="header"] .elementor-nav-menu--main .elementor-nav-menu > li.gg-panier-item {
		padding-inline-start: 12px;
	}

	.gg-compte-item .gg-compte,
	.gg-panier-item .gg-panier {
		width: 32px;
		height: 32px;
	}
}

/* --------------------------------------------------------------------------
   Sur téléphone, le panier reste dans le bandeau

   Relevé en recette : sous 1 024 px, Elementor masque la barre de menu entière
   et tout passe derrière le bouton hamburger. Nos deux icônes disparaissaient
   avec, et le panier n'était plus atteignable qu'en deux gestes, alors que
   c'est l'élément qu'un acheteur cherche en premier.

   On rouvre donc la barre, mais UNIQUEMENT pour nos deux entrées : toutes les
   autres restent masquées et continuent de vivre dans le menu déroulant. Les
   trois éléments se rangent sur la même ligne que le hamburger.

   Les deux entrées restent AUSSI dans le menu déroulant, avec leur libellé.
   C'est volontairement redondant : le jour où une mise à jour d'Elementor
   change ce balisage, la règle ci-dessous cesse d'agir et le panier reste
   joignable par le menu, au lieu de disparaître sans bruit.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	[data-elementor-type="header"] .elementor-widget-nav-menu > .elementor-widget-container {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center;
		justify-content: flex-end;
		gap: 4px;
		/* Le passage en conteneur flexible faisait dépasser le bouton hamburger de
		   16 px hors de son conteneur : mesuré au contrôle final, il atteignait le
		   bord de l'écran alors que le logo respire de 15 px à gauche. On rend
		   cette marge, pour que l'en-tête soit symétrique. */
		padding-inline-end: 15px;
		box-sizing: border-box;
	}

	[data-elementor-type="header"] nav.elementor-nav-menu--main {
		display: flex !important;
		align-items: center;
		flex: 0 0 auto;
	}

	[data-elementor-type="header"] nav.elementor-nav-menu--main .elementor-nav-menu {
		display: flex !important;
		align-items: center;
		flex-wrap: nowrap;
		gap: 2px;
	}

	[data-elementor-type="header"] nav.elementor-nav-menu--main .elementor-nav-menu > li:not(.gg-panier-item):not(.gg-compte-item) {
		display: none !important;
	}

	[data-elementor-type="header"] .elementor-menu-toggle {
		flex: 0 0 auto;
	}
}

/* Dans le menu déroulant du mobile, les entrées sont empilées en pleine
   largeur : une silhouette isolée n'y voudrait rien dire, le libellé reprend
   donc sa place normale. */
.elementor-nav-menu--dropdown .gg-compte-item {
	display: block;
}

.elementor-nav-menu--dropdown .gg-compte__titre {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
	font-size: 15px;
}

/* Centrées comme les autres entrées du déroulant, qui le sont toutes : alignées
   à gauche, elles collaient au bord et cassaient la colonne. */
.elementor-nav-menu--dropdown .gg-compte-item .gg-compte {
	width: auto;
	height: auto;
	padding: 12px 20px;
	gap: 10px;
	border-radius: 0;
	justify-content: center;
}

/* ==========================================================================
   Bouton d'impression sur le détail d'une commande
   ========================================================================== */

.gg-imprimer {
	margin: 18px 0 0;
}

.gg-imprimer__bouton {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	padding: 11px 22px;
	border: 1px solid #4f7345;
	border-radius: 4px;
	background: #fff;
	/* Le vert du thème enfant, #4f7345, et non celui du logo : cette page est
	   habillée par la section « WooCommerce My Account » de son style.css, et
	   un bouton isolé dans une autre nuance de vert se verrait. */
	color: #4f7345;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.gg-imprimer__bouton:hover {
	background: #4f7345;
	color: #fff;
}

/* Le halo à 15 % d'opacité de la charte « Mon compte » est fait pour un champ à
   bordure grise, où le passage au vert se voit. Sur ce bouton, la bordure est
   DÉJÀ verte : au focus, rien ne bougeait. D'où un liseré franc, comme partout
   ailleurs dans l'extension. */
.gg-imprimer__bouton:focus-visible {
	outline: 2px solid #4f7345;
	outline-offset: 2px;
}

.gg-imprimer__bouton::before {
	content: "";
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	border: 1.5px solid currentColor;
	border-top-width: 4px;
	border-radius: 2px;
}

/* ==========================================================================
   Les avis de WooCommerce, partout sur le site

   WooCommerce accroche une icône en `::before` à chacun de ses avis, tirée de sa
   propre police d'icônes. Sur ce site, le caractère demandé, U+E028, ne sort pas
   en icône mais en rectangle de secours : un petit carré cassé, collé devant le
   texte. Relevé sur « Mon compte > Commandes », devant « Confirmez votre adresse
   e-mail ».

   Le tunnel de commande est déjà traité par sa propre feuille. Il restait tout
   le reste du site : l'espace client, la boutique, les fiches produit. Cette
   feuille étant chargée partout, la correction l'est aussi.

   On retire l'icône plutôt que d'en dessiner une : un avis se reconnaît à son
   fond et à son filet, et une icône de plus n'ajoute rien à « Confirmez votre
   adresse e-mail ».

   Deux autres cas au même endroit, relevés sur le détail d'une commande : les
   petites icônes que WooCommerce accroche au téléphone et à l'adresse e-mail du
   client, dans le bloc des coordonnées. Même police, même rectangle cassé.
   ========================================================================== */

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-customer-details--phone::before,
.woocommerce-customer-details--email::before,
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-error::before {
	display: none !important;
}

/* Le filet épais que WooCommerce pose sur le dessus devient un filet à gauche,
   comme dans le panier et la commande : la même famille visuelle d'un bout à
   l'autre du parcours. Couleurs de la charte « Mon compte » du thème. */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
	margin: 0 0 20px;
	padding: 14px 18px;
	border: 1px solid #e0e0e0;
	border-top: 1px solid #e0e0e0;
	border-left: 3px solid #4f7345;
	border-radius: 6px;
	background: rgba(79, 115, 69, 0.06);
	color: #333;
	font-size: 14px;
	line-height: 1.5;
}

.woocommerce-account .woocommerce-error {
	border-left-color: #dc3545;
	background: #fdf3f4;
	color: #8f2b34;
}

/* --------------------------------------------------------------------------
   De l'air avant le pied de page

   Le thème ne prévoit aucune marge sous le contenu : ses pages ordinaires
   finissent par du texte, qui a la sienne. Sur les pages de WooCommerce, qui
   finissent par un tableau ou un bouton, le contenu venait toucher exactement
   le bandeau vert du pied de page. Mesuré : 0 px d'écart.
   -------------------------------------------------------------------------- */

.woocommerce-account .site-main,
.woocommerce-page .site-main {
	padding-block-end: clamp(36px, 5vw, 72px);
}

/* ==========================================================================
   Connexion et création de compte

   Le thème enfant habille « Mon compte » une fois connecté, dans sa section
   « WooCommerce My Account » : navigation, tableaux de commandes, formulaires
   d'adresse. Il ne dit RIEN de l'état déconnecté, vérifié par recherche dans
   son style.css : aucune occurrence de `login`, `register` ni
   `woocommerce-form`. Un visiteur qui arrive sur la page tombait donc sur le
   rendu nu de WooCommerce, au moment précis où on lui demande son mot de passe.

   Les valeurs ci-dessous reprennent la charte du thème pour cette page, et non
   celle du logo, pour que les deux états se ressemblent : vert #4f7345, survol
   #3d5a36, or #c9a962, rayon 4 px, bouton 12px 32px, halo de focus en
   rgba(79, 115, 69, 0.15).
   ========================================================================== */

.woocommerce-account:not(.logged-in) .woocommerce {
	max-width: 940px;
	margin-inline: auto;
}

/* WooCommerce sort les deux formulaires dans un `.col2-set` flottant. Sur
   grand écran ils se lisent côte à côte, connexion à gauche puisque c'est le
   cas le plus fréquent, création à droite. */
.woocommerce-account:not(.logged-in) .woocommerce .col2-set {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: start;
}

/* --------------------------------------------------------------------------
   Le piege du clearfix

   WooCommerce pose un clearfix sur ses conteneurs : `::before` et `::after`
   avec `content: " "` et `display: table`. Inoffensif tant que le conteneur
   coule normalement.

   Passé en grille, ce n'est plus le cas : un pseudo-élément qui produit une
   boîte DEVIENT un élément de la grille et consomme une case. Mesuré sur la
   page « Mon compte » d'un visiteur déconnecté : la case 1 était prise par le
   `::before`, le bloc de connexion se retrouvait en colonne de droite et la
   création de compte passait à la ligne suivante, à gauche. Deux formulaires
   en diagonale, dans une grille pourtant réglée sur deux colonnes égales.

   On les neutralise donc partout où l'on pose une grille, et seulement là.
   -------------------------------------------------------------------------- */

.woocommerce-account:not(.logged-in) .woocommerce .col2-set::before,
.woocommerce-account:not(.logged-in) .woocommerce .col2-set::after {
	display: none;
}

.woocommerce-account:not(.logged-in) .woocommerce .col2-set .col-1,
.woocommerce-account:not(.logged-in) .woocommerce .col2-set .col-2 {
	width: auto;
	float: none;
}

.woocommerce-account:not(.logged-in) .woocommerce h2 {
	margin: 0 0 16px;
	color: #1d2327;
	font-size: 20px;
	font-weight: 600;
}

.woocommerce-account:not(.logged-in) form.woocommerce-form-login,
.woocommerce-account:not(.logged-in) form.woocommerce-form-register,
.woocommerce-account:not(.logged-in) form.woocommerce-ResetPassword {
	margin: 0;
	padding: 24px;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	background: #fff;
}

.woocommerce-account:not(.logged-in) .woocommerce-form-row,
.woocommerce-account:not(.logged-in) form .form-row {
	margin: 0 0 20px;
	padding: 0;
	float: none;
	width: auto;
}

.woocommerce-account:not(.logged-in) form label {
	display: block;
	margin: 0 0 6px;
	color: #1d2327;
	font-size: 13px;
	font-weight: 600;
}

.woocommerce-account:not(.logged-in) form input.woocommerce-Input,
.woocommerce-account:not(.logged-in) form input[type="text"],
.woocommerce-account:not(.logged-in) form input[type="email"],
.woocommerce-account:not(.logged-in) form input[type="password"] {
	width: 100%;
	/* 16 px minimum : en dessous, iOS zoome sur le champ à la première frappe. */
	min-height: 46px;
	padding: 10px 14px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
	color: #333;
	font-family: inherit;
	font-size: 16px;
	box-shadow: none;
}

.woocommerce-account:not(.logged-in) form input:focus {
	outline: none;
	border-color: #4f7345;
	box-shadow: 0 0 0 2px rgba(79, 115, 69, 0.15);
}

/* Le bouton : préfixé pour battre le rose #cc3366 que le `reset.css` du thème
   donne à tout bouton par un sélecteur d'attribut, de même poids qu'une
   classe. */
.woocommerce-account:not(.logged-in) .woocommerce button.button,
.woocommerce-account:not(.logged-in) .woocommerce input.button,
.woocommerce-account:not(.logged-in) .woocommerce a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 12px 32px;
	border: 1px solid transparent;
	border-radius: 4px;
	background: #4f7345;
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.woocommerce-account:not(.logged-in) .woocommerce button.button:hover,
.woocommerce-account:not(.logged-in) .woocommerce input.button:hover,
.woocommerce-account:not(.logged-in) .woocommerce a.button:hover {
	background: #3d5a36;
	color: #fff;
}

/* « Se souvenir de moi » : la case et son libellé sur une ligne, et le libellé
   revient à un poids normal, ce n'est pas un intitulé de champ. */
.woocommerce-account:not(.logged-in) label.woocommerce-form-login__rememberme,
.woocommerce-account:not(.logged-in) label.woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 400;
	color: #555;
	cursor: pointer;
}

.woocommerce-account:not(.logged-in) input[type="checkbox"] {
	width: 17px;
	height: 17px;
	min-height: 0;
	margin: 0;
	flex: 0 0 auto;
	accent-color: #4f7345;
}

.woocommerce-account:not(.logged-in) .woocommerce-form-login__submit {
	margin-top: 4px;
}

/* Les liens sortaient en rose : « Mot de passe perdu ? » est le lien qu'on
   cherche quand on n'arrive pas à entrer, il doit rester lisible et sobre. */
.woocommerce-account:not(.logged-in) .woocommerce a:not(.button) {
	color: #4f7345;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.woocommerce-account:not(.logged-in) .woocommerce a:not(.button):hover {
	color: #3d5a36;
}

.woocommerce-account:not(.logged-in) .lost_password {
	margin: 14px 0 0;
	font-size: 14px;
}

/* La mention de confidentialité sous la création de compte : c'est une note,
   pas un paragraphe de page. */
.woocommerce-account:not(.logged-in) .woocommerce-privacy-policy-text p {
	margin: 0 0 16px;
	color: #555;
	font-size: 13px;
	line-height: 1.5;
}

/* Les avis de WooCommerce, en particulier « identifiant ou mot de passe
   incorrect » : bandeau brut par défaut, avec un filet bleu. */
.woocommerce-account:not(.logged-in) .woocommerce-error,
.woocommerce-account:not(.logged-in) .woocommerce-info,
.woocommerce-account:not(.logged-in) .woocommerce-message {
	margin: 0 0 20px;
	padding: 14px 18px;
	border: 1px solid #e0e0e0;
	border-left: 3px solid #4f7345;
	border-radius: 4px;
	background: rgba(79, 115, 69, 0.06);
	color: #333;
	font-size: 14px;
	list-style: none;
}

.woocommerce-account:not(.logged-in) .woocommerce-error {
	border-left-color: #dc3545;
	background: #fdf3f4;
	color: #8f2b34;
}

.woocommerce-account:not(.logged-in) .woocommerce-error::before,
.woocommerce-account:not(.logged-in) .woocommerce-info::before,
.woocommerce-account:not(.logged-in) .woocommerce-message::before {
	display: none;
}

/* Le point de rupture du thème pour cette page est 768 px : on s'y range. */
@media screen and (max-width: 768px) {
	.woocommerce-account:not(.logged-in) .woocommerce .col2-set {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.woocommerce-account:not(.logged-in) form.woocommerce-form-login,
	.woocommerce-account:not(.logged-in) form.woocommerce-form-register,
	.woocommerce-account:not(.logged-in) form.woocommerce-ResetPassword {
		padding: 18px 16px;
	}
}