/*
 * Fichier : intemporris-releves.css
 * Emplacement : designs/intemporris/assets/css/
 *
 * Responsabilité :
 * L'espace Relevés et rapports des titulaires de droits, dans le compte :
 * la tête de page, le choix du titulaire, le menu des sections, les
 * onglets, les filtres, les chiffres, les tableaux, les formulaires et les
 * coordonnées de l'éditeur.
 *
 * Parti pris :
 *   La page est un relevé de comptes, et la feuille de l'extension le dit
 *   déjà : les surfaces de lecture restent plates et réglées, les surfaces
 *   d'action prennent du relief. Les chiffres et les tableaux se posent
 *   donc à même la nuit, tenus par des filets ; le verre est réservé à ce
 *   qui s'actionne : le choix du titulaire, le menu, les onglets, les
 *   filtres, les formulaires et les commandes.
 *
 * Couleur :
 *   Le clair de lune de l'espace de compte, pour les filets, les contours
 *   et les surfaces. Le texte reste blanc ou gris.
 *
 * Accessibilité : WCAG 2.1 niveau AA strict.
 *   - L'ordre de lecture reste celui du balisage.
 *   - Les contours des commandes et des champs gardent 3 pour 1.
 *   - Les cibles gardent 2,75 rem de haut.
 *   - Le focus garde le contour du thème.
 *   - Un état ne change ni la graisse ni l'épaisseur d'un contour.
 */

body.woocommerce-mes-releves .discovery-entry-compte {
	--intemporris-releves-lune: var(--intemporris-compte-lune, #7f95c0);
	--intemporris-releves-nuit: var(--intemporris-compte-nuit, #05070c);
	--intemporris-releves-filet: color-mix(in srgb, var(--discovery-color-text, #ffffff) 14%, transparent);
	--intemporris-releves-filet-lune: color-mix(in srgb, var(--intemporris-releves-lune) 55%, transparent);
	--intemporris-releves-contour: color-mix(in srgb, var(--discovery-color-text, #ffffff) 46%, var(--discovery-color-background, #000000));
	--intemporris-releves-plaque: color-mix(in srgb, var(--intemporris-releves-lune) 7%, var(--intemporris-releves-nuit));
	--intemporris-releves-verre: color-mix(in srgb, var(--intemporris-releves-lune) 26%, var(--intemporris-releves-nuit));
	--intemporris-releves-doux: var(--discovery-color-muted, #b3b3b3);
	--intemporris-releves-rond: var(--discovery-radius-full, 9999px);
	--intemporris-releves-rayon: var(--discovery-radius-lg, 1rem);
	--intemporris-releves-champ-rayon: var(--discovery-radius-md, 0.5rem);
	--intemporris-releves-duree: var(--discovery-duration-normal, 240ms);
	--intemporris-releves-trait: var(--intemporris-trait-fin, 1.5px);
	position: relative;
	padding-block-end: var(--discovery-space-16, 4rem);
}


/* La nuit de verre */

/* Le noir d'Intemporris, que traverse par endroits une lumière nocturne :
   la même que dans le reste de l'espace de compte. Rien ne bouge au repos. */
body.woocommerce-mes-releves {
	overflow-x: clip;
}

body.woocommerce-mes-releves .discovery-entry-compte::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block: calc(-1 * var(--intemporris-releves-remontee, 9rem)) 0;
	inset-inline: calc(50% - 50vw);
	pointer-events: none;
	background:
		radial-gradient(ellipse 34rem 18rem at 80% 9rem, color-mix(in srgb, var(--intemporris-releves-lune) 20%, transparent), transparent 70%),
		radial-gradient(ellipse 30rem 12rem at 82% 9.5rem, color-mix(in srgb, var(--intemporris-compte-lune-claire, #b8c6e0) 10%, transparent), transparent 60%),
		radial-gradient(ellipse 40rem 22rem at 12% 62%, color-mix(in srgb, var(--intemporris-compte-lune-sombre, #4f6896) 16%, transparent), transparent 72%);
	-webkit-mask-image: linear-gradient(transparent, var(--intemporris-masque, #000) 9rem);
	mask-image: linear-gradient(transparent, var(--intemporris-masque, #000) 9rem);
}


/* La tête de page */

/* Le titre, puis un filet qui part du clair de lune et se perd vers la
   droite. */
body.woocommerce-mes-releves .discovery-entry-compte > .discovery-entry-header {
	position: relative;
	margin-block-end: var(--discovery-space-6, 1.5rem);
	padding-block-end: var(--discovery-space-5, 1.25rem);
}

body.woocommerce-mes-releves .discovery-entry-compte > .discovery-entry-header::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: var(--intemporris-releves-trait);
	background: linear-gradient(90deg, var(--intemporris-releves-lune), var(--intemporris-releves-filet-lune) 40%, transparent 85%);
}

body.woocommerce-mes-releves .discovery-entry-compte .discovery-entry-title {
	font-size: var(--intemporris-releves-titre-page, clamp(2rem, 1.4rem + 2vw, 2.9rem));
	letter-spacing: -0.025em;
	line-height: 1.05;
}


/* Les commandes et les champs */

/* Une commande : une capsule de verre au contour net. */
body.woocommerce-mes-releves .discovery-entry-compte :is(.abs-releves-espace, .abs-releves-modification) :is(.discovery-bouton, .discovery-disclosure, button[type="submit"], .abs-releves-lien-action):not([hidden], .abs-releves-menu-bouton, .rle-ea-bouton) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--intemporris-releves-cible, 2.75rem);
	padding: var(--discovery-space-2, 0.5rem) var(--discovery-space-5, 1.25rem);
	border: 1px solid var(--intemporris-releves-contour);
	border-radius: var(--intemporris-releves-rond);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--discovery-color-text, #ffffff) 8%, transparent), transparent 46%),
		transparent;
	color: var(--discovery-color-text, #ffffff);
	font-size: var(--discovery-text-sm, 0.875rem);
	text-decoration: none;
	transition: border-color var(--intemporris-releves-duree), background-color var(--intemporris-releves-duree);
}

body.woocommerce-mes-releves .discovery-entry-compte :is(.abs-releves-espace, .abs-releves-modification) :is(.discovery-bouton, .discovery-disclosure, button[type="submit"], .abs-releves-lien-action):not([hidden], .abs-releves-menu-bouton, .rle-ea-bouton):is(:hover, :focus-visible) {
	border-color: var(--discovery-color-text, #ffffff);
	background-color: color-mix(in srgb, var(--intemporris-releves-lune) 18%, transparent);
}

/* La commande qui valide un choix ou produit un document prend la surface
   de lune et une graisse plus forte. */
body.woocommerce-mes-releves .discovery-entry-compte :is(.abs-releves-espace, .abs-releves-modification) :is(.abs-releves-filtres, .abs-releves-releve-formulaire, .abs-releves-coordonnees-formulaire, .abs-releves-modification) :is(.discovery-bouton, button[type="submit"]):not([hidden]) {
	border-color: color-mix(in srgb, var(--intemporris-releves-lune) 70%, transparent);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--intemporris-blanc, #ffffff) 12%, transparent), transparent 55%),
		var(--intemporris-releves-verre);
	font-weight: var(--discovery-weight-semibold, 600);
}

body.woocommerce-mes-releves .discovery-entry-compte :is(.abs-releves-espace, .abs-releves-modification) :is(.abs-releves-filtres, .abs-releves-releve-formulaire, .abs-releves-coordonnees-formulaire, .abs-releves-modification) :is(.discovery-bouton, button[type="submit"]):not([hidden]):is(:hover, :focus-visible) {
	border-color: var(--discovery-color-text, #ffffff);
	background-color: color-mix(in srgb, var(--intemporris-releves-lune) 40%, var(--intemporris-releves-nuit));
}

/* Un lien : en clair, souligné de lune. */
body.woocommerce-mes-releves .discovery-entry-compte :is(.abs-releves-espace, .abs-releves-modification) a:not(.discovery-bouton, .discovery-compte-onglet-bouton, .abs-releves-lien-action, .abs-releves-facture-deposer a) {
	color: var(--discovery-color-text, #ffffff);
	text-decoration-line: underline;
	text-decoration-color: var(--intemporris-releves-lune);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

/* Une liste déroulante, un champ de saisie : du verre aux coins arrondis,
   de la hauteur des commandes, au contour à 3 pour 1. Le chevron de la
   liste est dessiné par la feuille. */
body.woocommerce-mes-releves .discovery-entry-compte :is(.abs-releves-espace, .abs-releves-modification) :is(select, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], textarea) {
	box-sizing: border-box;
	max-inline-size: 100%;
	min-block-size: var(--intemporris-releves-cible, 2.75rem);
	padding-block: var(--discovery-space-2, 0.5rem);
	padding-inline: var(--discovery-space-4, 1rem);
	border: 1px solid var(--intemporris-releves-contour);
	border-radius: var(--intemporris-releves-champ-rayon);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--intemporris-blanc, #ffffff) 6%, transparent), transparent 60%),
		var(--discovery-color-background, #000000);
	color: var(--discovery-color-text, #ffffff);
	font: inherit;
	line-height: 1.3;
	transition: border-color var(--intemporris-releves-duree);
}

body.woocommerce-mes-releves .discovery-entry-compte :is(.abs-releves-espace, .abs-releves-modification) select:not([multiple]) {
	padding-block: 0;
	padding-inline-end: var(--discovery-space-10, 2.5rem);
	background:
		linear-gradient(45deg, transparent 50%, currentColor 50%) right 1.15rem center / 0.4rem 0.4rem no-repeat,
		linear-gradient(-45deg, transparent 50%, currentColor 50%) right 0.75rem center / 0.4rem 0.4rem no-repeat,
		linear-gradient(180deg, color-mix(in srgb, var(--intemporris-blanc, #ffffff) 6%, transparent), transparent 60%),
		var(--discovery-color-background, #000000);
	appearance: none;
	cursor: pointer;
}

body.woocommerce-mes-releves .discovery-entry-compte :is(.abs-releves-espace, .abs-releves-modification) :is(select, input, textarea):hover {
	border-color: var(--discovery-color-text, #ffffff);
}

body.woocommerce-mes-releves .discovery-entry-compte :is(.abs-releves-espace, .abs-releves-modification) :is(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--intemporris-releves-lune);
}

/* Une case à cocher et son libellé sur une même ligne, centrés l'un sur
   l'autre ; la case prend une taille qui se vise sans peine. */
body.woocommerce-mes-releves .discovery-entry-compte :is(.abs-releves-espace, .abs-releves-modification) form p:has(> input[type="checkbox"]) {
	display: flex;
	align-items: center;
	gap: var(--discovery-space-3, 0.75rem);
}

body.woocommerce-mes-releves .discovery-entry-compte :is(.abs-releves-espace, .abs-releves-modification) form p > input[type="checkbox"] {
	flex: none;
	inline-size: var(--intemporris-releves-case, 1.125rem);
	block-size: var(--intemporris-releves-case, 1.125rem);
	margin: 0;
}

body.woocommerce-mes-releves .discovery-entry-compte :is(.abs-releves-espace, .abs-releves-modification) form p > input[type="checkbox"] + label {
	margin: 0;
}

/* Une aide sous un champ : grise et plus petite. */
body.woocommerce-mes-releves .discovery-entry-compte :is(.abs-releves-espace, .abs-releves-modification) :is(.description, .abs-coord-aide) {
	color: var(--intemporris-releves-doux);
	font-size: var(--discovery-text-sm, 0.875rem);
}


/* Le titulaire de droits */

/* Le choix du titulaire est une commande : une plaque de verre, la liste
   et Afficher sur une même ligne quand la place le permet. */
body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-titulaire {
	padding: var(--discovery-space-4, 1rem) var(--discovery-space-5, 1.25rem);
	border: 1px solid var(--intemporris-releves-filet);
	border-block-start-color: var(--intemporris-releves-filet-lune);
	border-radius: var(--intemporris-releves-rayon);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--intemporris-blanc, #ffffff) 4%, transparent), transparent 40%),
		var(--intemporris-releves-plaque);
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-titulaire label {
	color: var(--intemporris-releves-doux);
	font-size: var(--discovery-text-sm, 0.875rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}


/* Le menu des sections */

/* Une colonne de verre sur un écran large, des capsules sur un téléphone.
   La section ouverte porte la surface de lune, un contour plus clair et un
   court filet à gauche. */
body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-menu ul {
	gap: var(--discovery-space-1, 0.25rem);
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-menu-bouton.discovery-bouton {
	position: relative;
	min-block-size: var(--intemporris-releves-cible, 2.75rem);
	border: 1px solid var(--intemporris-releves-filet);
	border-radius: var(--intemporris-releves-champ-rayon);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--intemporris-blanc, #ffffff) 4%, transparent), transparent 46%),
		var(--intemporris-releves-plaque);
	color: var(--intemporris-releves-doux);
	text-align: start;
	transition: color var(--intemporris-releves-duree), border-color var(--intemporris-releves-duree), background-color var(--intemporris-releves-duree);
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-menu-bouton.discovery-bouton:is(:hover, :focus-visible) {
	border-color: var(--intemporris-releves-contour);
	color: var(--discovery-color-text, #ffffff);
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-menu-bouton.discovery-bouton[aria-current="page"] {
	border-color: var(--intemporris-releves-filet-lune);
	background:
		linear-gradient(90deg, var(--intemporris-releves-lune) 0 var(--intemporris-releves-barre, 3px), transparent var(--intemporris-releves-barre, 3px)),
		linear-gradient(180deg, color-mix(in srgb, var(--intemporris-blanc, #ffffff) 10%, transparent), transparent 55%),
		var(--intemporris-releves-verre);
	color: var(--discovery-color-text, #ffffff);
	text-shadow: 0 0 0.02em currentColor, 0.02em 0 0 currentColor;
}


/* La section et ses onglets */

/* Le titre de la section porte un court filet de lune. */
body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-section-titre {
	position: relative;
	padding-block-start: var(--discovery-space-3, 0.75rem);
	letter-spacing: -0.015em;
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-section-titre::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: var(--discovery-space-8, 2rem);
	block-size: var(--intemporris-releves-trait);
	background: var(--intemporris-releves-lune);
}

/* L'introduction se lit dans la colonne de lecture ; le second paragraphe
   passe au gris. */
body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-section > .abs-releves-introduction {
	max-inline-size: var(--discovery-lecture-max, 42rem);
	line-height: 1.65;
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-section > .abs-releves-introduction + .abs-releves-introduction {
	color: var(--intemporris-releves-doux);
}

/* Un rail de verre ; l'onglet choisi porte sa surface et son contour. Le
   rail défile de gauche à droite s'il dépasse, et ne suit pas le
   défilement de la page. */
body.woocommerce-mes-releves .discovery-entry-compte .discovery-compte-onglets {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--discovery-space-1, 0.25rem);
	inline-size: fit-content;
	max-inline-size: 100%;
	margin-inline: 0;
	padding: var(--discovery-space-1, 0.25rem);
	overflow-x: auto;
	border: 1px solid var(--intemporris-releves-filet);
	border-radius: var(--intemporris-releves-rond);
	background: var(--intemporris-releves-plaque);
	list-style: none;
	scrollbar-width: none;
}

body.woocommerce-mes-releves .discovery-entry-compte .discovery-compte-onglet {
	flex: 0 0 auto;
	margin: 0;
}

body.woocommerce-mes-releves .discovery-entry-compte .discovery-compte-onglet-bouton {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--intemporris-releves-cible, 2.75rem);
	padding-inline: var(--discovery-space-5, 1.25rem);
	border: 1px solid transparent;
	border-radius: var(--intemporris-releves-rond);
	background: none;
	color: var(--intemporris-releves-doux);
	font-size: var(--discovery-text-sm, 0.875rem);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--intemporris-releves-duree), background-color var(--intemporris-releves-duree);
}

body.woocommerce-mes-releves .discovery-entry-compte .discovery-compte-onglet-bouton:hover {
	color: var(--discovery-color-text, #ffffff);
}

body.woocommerce-mes-releves .discovery-entry-compte .discovery-compte-onglet-bouton[aria-selected="true"] {
	border-color: var(--intemporris-releves-filet-lune);
	background-color: var(--intemporris-releves-verre);
	color: var(--discovery-color-text, #ffffff);
	text-shadow: 0 0 0.02em currentColor, 0.02em 0 0 currentColor;
}


/* Les filtres et les formulaires */

/* Une plaque de verre : la légende en petites capitales grises, les
   listes et leurs aides dessous. */
body.woocommerce-mes-releves .discovery-entry-compte :is(.abs-releves-filtres fieldset, .abs-releves-releve-formulaire, .abs-releves-coordonnees-groupe, .abs-releves-resiliation-demande fieldset) {
	padding: var(--discovery-space-5, 1.25rem);
	border: 1px solid var(--intemporris-releves-filet);
	border-block-start-color: var(--intemporris-releves-filet-lune);
	border-radius: var(--intemporris-releves-rayon);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--intemporris-blanc, #ffffff) 4%, transparent), transparent 40%),
		var(--intemporris-releves-plaque);
}

body.woocommerce-mes-releves .discovery-entry-compte :is(.abs-releves-filtres, .abs-releves-coordonnees-groupe, .abs-releves-resiliation-demande) legend {
	padding-inline: var(--discovery-space-2, 0.5rem);
	color: var(--intemporris-releves-doux);
	font-size: var(--discovery-text-sm, 0.875rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

body.woocommerce-mes-releves .discovery-entry-compte :is(.abs-releves-filtres, .abs-releves-releve-formulaire, .abs-releves-coordonnees-formulaire) label {
	color: var(--discovery-color-text, #ffffff);
}


/* Les commandes d'un formulaire de relevé : un peu d'air au-dessus d'elles,
   sous les listes, et entre elles. */
body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-releve-formulaire > p:has(> button[type="submit"]) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--intemporris-releves-air-commandes, var(--discovery-space-3, 0.75rem));
	margin-block-start: var(--discovery-space-3, 0.75rem);
}

/* Les titres d'un panneau */

/* Le titre du panneau, puis ses parties : chacune ouverte par un court
   filet de lune. */
body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-panneau :is(.abs-releves-panneau-titre, h4) {
	position: relative;
	padding-block-start: var(--discovery-space-3, 0.75rem);
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-panneau :is(.abs-releves-panneau-titre, h4)::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: var(--discovery-space-6, 1.5rem);
	block-size: var(--intemporris-releves-trait);
	background: var(--intemporris-releves-filet-lune);
}


/* Les chiffres */

/* Un registre posé sur la nuit : un filet de lune au-dessus, puis chaque
   chiffre dans sa colonne, son libellé en petites capitales grises, sa
   valeur en grand, en chasse tabulaire. */
body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-chiffres {
	padding-block-start: var(--discovery-space-4, 1rem);
	border-block-start: var(--intemporris-releves-trait) solid var(--intemporris-releves-filet-lune);
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-chiffres dt {
	color: var(--intemporris-releves-doux);
	font-size: var(--discovery-text-xs, 0.75rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-chiffres dd {
	color: var(--discovery-color-text, #ffffff);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

/* L'avertissement des ventes en cours est tenu par un filet de lune à
   gauche ; son texte et ses chiffres gardent leur couleur. */
body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-avertissement {
	padding-inline-start: var(--discovery-space-4, 1rem);
	border-inline-start: var(--intemporris-releves-trait) solid var(--intemporris-releves-filet-lune);
}


/* Les tableaux */

/* Un tableau de relevé reste plat : pas de plaque, pas de carte. La tête
   en petites capitales grises sur un filet de lune, une ligne par filet
   discret, la tête de ligne en clair, les nombres en chasse tabulaire. Le
   tableau trop large défile dans son cadre, sans se replier. */
body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-tableau caption {
	color: var(--intemporris-releves-doux);
	font-size: var(--discovery-text-sm, 0.875rem);
	text-align: start;
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-tableau thead th {
	border-block-end: var(--intemporris-releves-trait) solid var(--intemporris-releves-filet-lune);
	color: var(--intemporris-releves-doux);
	font-size: var(--discovery-text-xs, 0.75rem);
	font-weight: var(--discovery-weight-semibold, 600);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-tableau tbody :is(th, td) {
	border-block-end: 1px solid var(--intemporris-releves-filet);
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-tableau tbody th {
	color: var(--discovery-color-text, #ffffff);
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-tableau tbody tr:hover :is(th, td) {
	background-color: color-mix(in srgb, var(--intemporris-releves-lune) 7%, transparent);
}

/* Les nombres, que l'extension aligne à droite, gardent de l'air derrière
   eux : un montant ne touche jamais le bord du tableau. */
body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-tableau tbody td.abs-releves-nombre {
	padding-inline-end: var(--intemporris-releves-air-nombre, var(--discovery-space-4, 1rem));
	font-variant-numeric: tabular-nums;
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-defilant:focus-visible {
	outline-color: var(--intemporris-releves-lune);
}


/* Le registre des accès, seul tableau d'un panneau sans onglets : la date
   et l'heure de chaque accès prennent le clair de lune. */
body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-panneau--seul .abs-releves-tableau tbody th {
	color: var(--intemporris-compte-lune-claire, #b8c6e0);
	font-variant-numeric: tabular-nums;
}

/* Les encadrés */

/* Le calendrier des redditions et les messages : une information de
   contexte, tenue par un filet de lune à gauche, sur une lueur à peine
   visible. */
body.woocommerce-mes-releves .discovery-entry-compte :is(.abs-releves-cycle, .abs-releves-message) {
	padding: var(--discovery-space-4, 1rem) var(--discovery-space-5, 1.25rem);
	border: 0;
	border-inline-start: var(--intemporris-releves-trait) solid var(--intemporris-releves-lune);
	border-radius: 0 var(--intemporris-releves-champ-rayon) var(--intemporris-releves-champ-rayon) 0;
	background: linear-gradient(90deg, color-mix(in srgb, var(--intemporris-releves-lune) 12%, transparent), transparent 80%);
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-vide {
	color: var(--intemporris-releves-doux);
}


/* Les coordonnées de l'éditeur */

body.woocommerce-mes-releves .abs-releves-nos-coordonnees {
	position: relative;
	padding-block-start: var(--discovery-space-5, 1.25rem);
}

body.woocommerce-mes-releves .abs-releves-nos-coordonnees::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: var(--intemporris-releves-filet-fin, 1px);
	background: linear-gradient(90deg, var(--intemporris-compte-lune, #7f95c0), transparent 70%);
}

body.woocommerce-mes-releves .abs-releves-nos-coordonnees :is(.discovery-bouton, .discovery-disclosure):not([hidden]) {
	min-block-size: var(--intemporris-releves-cible, 2.75rem);
	padding: var(--discovery-space-2, 0.5rem) var(--discovery-space-5, 1.25rem);
	border: 1px solid color-mix(in srgb, var(--discovery-color-text, #ffffff) 46%, var(--discovery-color-background, #000000));
	border-radius: var(--discovery-radius-full, 9999px);
	background: transparent;
	color: var(--discovery-color-text, #ffffff);
}


/* Les contrats, les fichiers et les comptes */

/* Un contrat porte ses commandes, télécharger et demander la résiliation :
   c'est une plaque de verre, comme un fichier à demander et le solde d'un
   compte. Leurs renseignements, eux, restent réglés à même la plaque. */
body.woocommerce-mes-releves .discovery-entry-compte :is(.abs-releves-contrat, .abs-releves-fichier, .abs-mouvements-compte) {
	border: 1px solid var(--intemporris-releves-filet);
	border-block-start-color: var(--intemporris-releves-filet-lune);
	border-radius: var(--intemporris-releves-rayon);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--intemporris-blanc, #ffffff) 4%, transparent), transparent 40%),
		var(--intemporris-releves-plaque);
}

/* Une fiche de renseignements : la même écriture que les chiffres. Un
   filet de lune ouvre la fiche ; sous chaque ligne, un filet qui part de
   la gauche et s'efface vers la droite ; le libellé en petites capitales
   grises, la valeur en clair. */
body.woocommerce-mes-releves :is(.discovery-entry-compte, .discovery-compte-apres) .abs-releves-fiche-ligne {
	align-items: baseline;
	padding-block: var(--discovery-space-3, 0.75rem);
	border: 0;
	background: linear-gradient(90deg, var(--intemporris-releves-filet-ligne, color-mix(in srgb, var(--discovery-color-text, #ffffff) 16%, transparent)), transparent 85%) left bottom / 100% 1px no-repeat;
}

body.woocommerce-mes-releves :is(.discovery-entry-compte, .discovery-compte-apres) .abs-releves-fiche {
	border-block-start: var(--intemporris-trait-fin, 1.5px) solid color-mix(in srgb, var(--intemporris-compte-lune, #7f95c0) 55%, transparent);
}

body.woocommerce-mes-releves :is(.discovery-entry-compte, .discovery-compte-apres) .abs-releves-fiche dt {
	color: var(--discovery-color-muted, #b3b3b3);
	font-size: var(--discovery-text-xs, 0.75rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

body.woocommerce-mes-releves :is(.discovery-entry-compte, .discovery-compte-apres) .abs-releves-fiche dd {
	color: var(--discovery-color-text, #ffffff);
}

/* L'adresse se lit comme une étiquette, tenue par un court filet de lune à
   gauche. */
body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-adresse {
	padding-inline-start: var(--discovery-space-4, 1rem);
	border-inline-start: var(--intemporris-trait-fin, 1.5px) solid var(--intemporris-compte-lune, #7f95c0);
}

body.woocommerce-mes-releves .discovery-entry-compte :is(.abs-releves-fichier-identifiant, .abs-releves-fichier-indisponible, .abs-mouvements-numero, .abs-mouvements-position) {
	color: var(--intemporris-releves-doux);
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-mouvements-solde {
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

/* Les opérations d'un compte : le même registre que les relevés. La tête
   en petites capitales grises sur un filet de lune, une ligne par filet,
   les soldes d'ouverture et de clôture repérés par une lueur. */
body.woocommerce-mes-releves .discovery-entry-compte .abs-mouvements-table thead th {
	border-block-end: var(--intemporris-releves-trait) solid var(--intemporris-releves-filet-lune);
	color: var(--intemporris-releves-doux);
	font-size: var(--discovery-text-xs, 0.75rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-mouvements-table :is(tbody, tfoot) :is(th, td) {
	border-block-end: 1px solid var(--intemporris-releves-filet);
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-mouvements-table .abs-mouvements-repere :is(th, td) {
	background-color: color-mix(in srgb, var(--intemporris-releves-lune) 9%, transparent);
}

/* Les colonnes de montants ont une largeur fixée par l'extension : leur
   espacement reste le sien, pour qu'un grand montant tienne dans sa
   colonne. */
body.woocommerce-mes-releves .discovery-entry-compte .abs-mouvements-table .abs-mouvements-nombre {
	font-variant-numeric: tabular-nums;
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-mouvements-ref {
	color: var(--intemporris-releves-doux);
}

/* Chaque compte s'ouvre par son titre, posé sur un bandeau tenu par un
   filet de lune à gauche, avec de l'air au-dessus pour le détacher du
   compte précédent ; sa période et son nombre d'opérations se lisent en
   gris dessous. */
body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-section .abs-mouvements-titre {
	margin-block-start: var(--intemporris-releves-air-compte, var(--discovery-space-12, 3rem));
	padding: var(--discovery-space-3, 0.75rem) var(--discovery-space-4, 1rem);
	border-inline-start: var(--intemporris-releves-trait) solid var(--intemporris-releves-lune);
	border-radius: 0 var(--intemporris-releves-champ-rayon) var(--intemporris-releves-champ-rayon) 0;
	background: linear-gradient(90deg, color-mix(in srgb, var(--intemporris-releves-lune) 14%, transparent), transparent 85%);
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-section .abs-mouvements-titre::before {
	display: none;
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-mouvements-legende {
	padding-inline-start: var(--discovery-space-4, 1rem);
	color: var(--intemporris-releves-doux);
	font-size: var(--discovery-text-sm, 0.875rem);
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-mouvements-defile:focus-visible {
	outline-color: var(--intemporris-releves-lune);
}


/* La résiliation */

/* La demande de résiliation est une action sans retour : une plaque ouverte
   par un filet dans la couleur d'erreur du thème, et une commande de
   confirmation qui en porte le contour et la teinte. */
body.woocommerce-mes-releves .discovery-entry-compte form.abs-releves-resiliation-demande {
	padding: var(--discovery-space-5, 1.25rem);
	border: 1px solid var(--intemporris-releves-filet);
	border-block-start-color: color-mix(in srgb, var(--discovery-color-erreur, #ff6b6b) 60%, transparent);
	border-radius: var(--intemporris-releves-rayon);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--discovery-color-erreur, #ff6b6b) 6%, transparent), transparent 40%),
		var(--intemporris-releves-plaque);
}

body.woocommerce-mes-releves .discovery-entry-compte form.abs-releves-resiliation-demande :is(.discovery-bouton, button[type="submit"]):not([hidden]) {
	border-color: var(--discovery-color-erreur, #ff6b6b);
	background: color-mix(in srgb, var(--discovery-color-erreur, #ff6b6b) 16%, var(--intemporris-releves-nuit));
	font-weight: var(--discovery-weight-semibold, 600);
}

body.woocommerce-mes-releves .discovery-entry-compte form.abs-releves-resiliation-demande :is(.discovery-bouton, button[type="submit"]):not([hidden]):is(:hover, :focus-visible) {
	border-color: var(--discovery-color-text, #ffffff);
	background-color: color-mix(in srgb, var(--discovery-color-erreur, #ff6b6b) 28%, var(--intemporris-releves-nuit));
}

body.woocommerce-mes-releves .discovery-entry-compte form.abs-releves-resiliation-demande label {
	color: var(--discovery-color-text, #ffffff);
}

/* Le titre de la page de demande porte le court filet des titres. */
body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-page-titre {
	position: relative;
	padding-block-start: var(--discovery-space-3, 0.75rem);
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-page-titre::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: var(--discovery-space-6, 1.5rem);
	block-size: var(--intemporris-releves-trait);
	background: var(--intemporris-releves-filet-lune);
}

/* Un état de la demande : la réussite tenue par un filet de la couleur de
   succès, le refus par un filet de la couleur d'erreur. L'état d'une
   résiliation dans un contrat est tenu par un filet de lune. */
body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-etat,
body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-contrat-resiliation:has(> .abs-releves-contrat-etat) {
	padding: var(--discovery-space-3, 0.75rem) var(--discovery-space-4, 1rem);
	border-inline-start: var(--intemporris-releves-trait) solid var(--discovery-color-succes, #6fcf97);
	border-radius: 0 var(--intemporris-releves-champ-rayon) var(--intemporris-releves-champ-rayon) 0;
	background: linear-gradient(90deg, color-mix(in srgb, var(--discovery-color-succes, #6fcf97) 12%, transparent), transparent 80%);
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-etat.abs-releves-etat--refus {
	border-inline-start-color: var(--discovery-color-erreur, #ff6b6b);
	background: linear-gradient(90deg, color-mix(in srgb, var(--discovery-color-erreur, #ff6b6b) 14%, transparent), transparent 80%);
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-contrat-resiliation:has(> .abs-releves-contrat-etat) {
	border-inline-start-color: var(--intemporris-releves-lune);
	background: linear-gradient(90deg, color-mix(in srgb, var(--intemporris-releves-lune) 12%, transparent), transparent 80%);
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-contrat-resiliation p:last-child {
	margin-block-end: 0;
}

/* Les redditions, les factures et les fichiers */

/* Un bordereau porte ses documents à télécharger : une plaque de verre. Son
   détail se déplie par un sommaire tenu par la lune. */
body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-bordereau {
	border: 1px solid var(--intemporris-releves-filet);
	border-block-start-color: var(--intemporris-releves-filet-lune);
	border-radius: var(--intemporris-releves-rayon);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--intemporris-blanc, #ffffff) 4%, transparent), transparent 40%),
		var(--intemporris-releves-plaque);
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-bordereau summary {
	cursor: pointer;
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.2em;
	transition: text-decoration-color var(--intemporris-releves-duree);
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-bordereau summary:is(:hover, :focus-visible) {
	text-decoration-color: var(--intemporris-releves-lune);
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-bordereau summary::marker {
	color: var(--intemporris-releves-lune);
}

/* Déposer une facture est une commande : une capsule, comme les autres. */
body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-facture-deposer {
	margin-block-start: var(--discovery-space-4, 1rem);
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-facture-deposer a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--intemporris-releves-cible, 2.75rem);
	padding: var(--discovery-space-2, 0.5rem) var(--discovery-space-5, 1.25rem);
	border: 1px solid color-mix(in srgb, var(--intemporris-releves-lune) 70%, transparent);
	border-radius: var(--intemporris-releves-rond);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--intemporris-blanc, #ffffff) 12%, transparent), transparent 55%),
		var(--intemporris-releves-verre);
	font-size: var(--discovery-text-sm, 0.875rem);
	font-weight: var(--discovery-weight-semibold, 600);
	text-decoration: none;
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-facture-deposer a:is(:hover, :focus-visible) {
	border-color: var(--discovery-color-text, #ffffff);
}

/* Le formulaire de dépôt, sous le titre de sa page : une plaque de verre. */
body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-page-titre ~ form:not([class]) {
	padding: var(--discovery-space-5, 1.25rem);
	border: 1px solid var(--intemporris-releves-filet);
	border-block-start-color: var(--intemporris-releves-filet-lune);
	border-radius: var(--intemporris-releves-rayon);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--intemporris-blanc, #ffffff) 4%, transparent), transparent 40%),
		var(--intemporris-releves-plaque);
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-page-titre ~ form:not([class]) :is(.discovery-bouton, button[type="submit"]):not([hidden]) {
	border-color: color-mix(in srgb, var(--intemporris-releves-lune) 70%, transparent);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--intemporris-blanc, #ffffff) 12%, transparent), transparent 55%),
		var(--intemporris-releves-verre);
	font-weight: var(--discovery-weight-semibold, 600);
}

/* Le détail d'un bordereau : une ligne par contrat, aérée et tenue par un
   filet discret ; sur un écran large, le texte à gauche et ses documents
   alignés dans une même colonne à droite ; sur un téléphone, les
   documents passent sous le texte. */
body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-bordereau details ul:has(> li > .abs-releves-actions) {
	margin: var(--discovery-space-3, 0.75rem) 0 0;
	padding: 0;
	list-style: none;
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-bordereau details li:has(> .abs-releves-actions) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--discovery-space-2, 0.5rem);
	align-items: center;
	padding-block: var(--discovery-space-3, 0.75rem);
	background: linear-gradient(90deg, color-mix(in srgb, var(--discovery-color-text, #ffffff) 14%, transparent), transparent 85%) left bottom / 100% 1px no-repeat;
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-bordereau details li:has(> .abs-releves-actions):last-child {
	background: none;
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-bordereau details li > .abs-releves-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--discovery-space-2, 0.5rem);
	margin: 0;
}

@media (min-width: 48rem) {

	body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-bordereau details li:has(> .abs-releves-actions) {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--discovery-space-5, 1.25rem);
	}

	body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-bordereau details li > .abs-releves-actions {
		justify-content: flex-end;
	}
}

/* Les périodes des factures : de l'air entre chacune. */
body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-facture {
	padding-block: var(--discovery-space-5, 1.25rem);
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-facture > :last-child {
	margin-block-end: 0;
}

/* Dans le formulaire de dépôt, la commande prend un peu d'air sous le choix
   du fichier. */
body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-page-titre ~ form:not([class]) p:has(> button[type="submit"]) {
	margin-block-start: var(--discovery-space-5, 1.25rem);
}

/* Sous le titre d'une page de demande, la ligne qui nomme le contrat prend
   de l'air avant la plaque. */
body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-page-titre + p {
	margin-block-end: var(--discovery-space-5, 1.25rem);
}

/* Le choix d'un fichier : son bouton prend la forme d'une capsule. */
body.woocommerce-mes-releves .discovery-entry-compte input[type="file"]::file-selector-button {
	min-block-size: var(--intemporris-releves-cible, 2.75rem);
	margin-inline-end: var(--discovery-space-3, 0.75rem);
	padding: var(--discovery-space-2, 0.5rem) var(--discovery-space-5, 1.25rem);
	border: 1px solid var(--intemporris-releves-contour);
	border-radius: var(--intemporris-releves-rond);
	background: transparent;
	color: var(--discovery-color-text, #ffffff);
	font: inherit;
	font-size: var(--discovery-text-sm, 0.875rem);
	cursor: pointer;
}

body.woocommerce-mes-releves .discovery-entry-compte input[type="file"]:hover::file-selector-button {
	border-color: var(--discovery-color-text, #ffffff);
}

/* Les liens d'un fichier : le lien personnel tenu par un filet de lune, le
   lien de partage par un filet de lune plus clair, chacun sur une lueur. */
body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-lien {
	padding-block: var(--discovery-space-3, 0.75rem);
	border-inline-start: var(--intemporris-releves-trait) solid var(--intemporris-releves-lune);
	border-radius: 0 var(--intemporris-releves-champ-rayon) var(--intemporris-releves-champ-rayon) 0;
	background: linear-gradient(90deg, color-mix(in srgb, var(--intemporris-releves-lune) 10%, transparent), transparent 80%);
}

body.woocommerce-mes-releves .discovery-entry-compte .abs-releves-lien--partage {
	border-inline-start-color: var(--intemporris-compte-lune-claire, #b8c6e0);
	background: linear-gradient(90deg, color-mix(in srgb, var(--intemporris-compte-lune-claire, #b8c6e0) 8%, transparent), transparent 80%);
}

body.woocommerce-mes-releves .discovery-entry-compte :is(.abs-releves-lien-contrat, .abs-releves-fichier-partage .description) {
	color: var(--intemporris-releves-doux);
}

/* Préférences du système */

@media (prefers-reduced-motion: reduce) {

	body.woocommerce-mes-releves .discovery-entry-compte :is(button, a, select, input, textarea, summary) {
		transition: none;
	}
}

@media (prefers-contrast: more) {

	body.woocommerce-mes-releves .discovery-entry-compte::before {
		display: none;
	}

	body.woocommerce-mes-releves .discovery-entry-compte :is(.abs-releves-titulaire, .abs-releves-filtres fieldset, .abs-releves-releve-formulaire, .abs-releves-coordonnees-groupe, .abs-releves-cycle, .abs-releves-message, .abs-releves-menu-bouton.discovery-bouton, .discovery-compte-onglets, .abs-releves-contrat, .abs-releves-fichier, .abs-mouvements-compte, form.abs-releves-resiliation-demande, .abs-releves-bordereau, .abs-releves-page-titre ~ form:not([class]), .abs-releves-lien, .abs-releves-etat, .abs-releves-contrat-resiliation:has(> .abs-releves-contrat-etat)) {
		background: var(--discovery-color-background, #000000);
	}
}
