/*
 * core/list — listes du socle.
 * La coche est dessinée en CSS plutôt qu'écrite en caractère : un glyphe dans
 * ::before est annoncé par certains lecteurs d'écran, une bordure ne l'est pas.
 */

.wp-block-list.is-style-gaia-checklist {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-gaia-checklist > li {
	position: relative;
	padding-left: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--30);
}

.wp-block-list.is-style-gaia-checklist > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 0.5em;
	height: 0.85em;
	border-right: 2px solid var(--wp--preset--color--secondary);
	border-bottom: 2px solid var(--wp--preset--color--secondary);
	transform: translateY(-40%) rotate(45deg);
}

/* Sur un fond sombre ou sur le fond `secondary`, la coche prenait la couleur du fond. */
.is-style-gaia-panel .wp-block-list.is-style-gaia-checklist > li::before,
.has-secondary-background-color .wp-block-list.is-style-gaia-checklist > li::before {
	border-color: currentcolor;
}

.wp-block-list.is-style-gaia-plain {
	list-style: none;
	padding-left: 0;
}

/*
 * Sommaire : une liste de liens d'ancre, posée sur deux colonnes dès la
 * tablette. Le 782 est le point de bascule de WordPress, recopié en dur parce
 * qu'une media query ne sait pas lire une variable CSS.
 */
.wp-block-list.is-style-gaia-toc {
	list-style: none;
	padding-left: 0;
	border-top: var(--wp--custom--rule--hairline) solid var(--wp--preset--color--border);
	border-bottom: var(--wp--custom--rule--hairline) solid var(--wp--preset--color--border);
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--40);
}

.wp-block-list.is-style-gaia-toc > li {
	margin-bottom: var(--wp--preset--spacing--20);
	break-inside: avoid;
}

.wp-block-list.is-style-gaia-toc > li:last-child {
	margin-bottom: 0;
}

@media (min-width: 782px) {

	.wp-block-list.is-style-gaia-toc {
		columns: 2;
		column-gap: var(--wp--preset--spacing--60);
	}

	/*
	 * Dans un bloc qui colle au défilement, le sommaire est une colonne
	 * latérale (gaia/toc-sidebar) : deux colonnes dans un cinquième de page
	 * coupaient chaque libellé sur deux lignes (vu à la recette).
	 */
	.is-position-sticky > .wp-block-list.is-style-gaia-toc {
		columns: auto;
	}
}

/*
 * Liste barrée : le pendant de la liste cochée, pour ce qu'une offre NE fait
 * pas (tableau comparatif, « nous / les autres »). Une croix dessinée par deux
 * bordures, pour la même raison que la coche : rien d'annoncé à voix haute.
 * La croix seule ne porte pas le sens (WCAG 1.4.1) — le titre de la liste doit
 * le dire.
 */
.wp-block-list.is-style-gaia-crosslist {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-gaia-crosslist > li {
	position: relative;
	padding-left: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--30);
}

.wp-block-list.is-style-gaia-crosslist > li::before,
.wp-block-list.is-style-gaia-crosslist > li::after {
	content: "";
	position: absolute;
	left: 0.1em;
	top: 0.75em;
	width: 0.8em;
	border-top: 2px solid var(--wp--preset--color--muted);
	transform: rotate(45deg);
}

.wp-block-list.is-style-gaia-crosslist > li::after {
	transform: rotate(-45deg);
}

/*
 * Classement numéroté (gaia-rank-list, socle 3.34.0) : rang en pastille, nom à gauche, valeur
 * poussée à droite, lignes sur fond de surface. Relevé sur la colonne communauté d'un portail.
 */
.wp-block-list.gaia-rank-list {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: gaia-rank;
}

.wp-block-list.gaia-rank-list > li {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--md);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 7%, var(--wp--preset--color--surface));
	counter-increment: gaia-rank;
}

.wp-block-list.gaia-rank-list > li::before {
	content: counter(gaia-rank);
	display: inline-grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
	font-weight: 800;
}

.wp-block-list.gaia-rank-list > li strong { color: var(--wp--preset--color--primary); }

.wp-block-list.gaia-rank-list > li span { margin-inline-start: auto; color: var(--wp--preset--color--primary); }

/* Index de liens en colonnes (gaia-links-columns) : une longue liste de liens courts (villes, sujets) répartie en colonnes
   qui se remplissent de haut en bas, un filet sous chaque lien. Socle 3.38.0, né de conseil-en-renovation.com (« Rénover par ville »). */
.wp-block-list.gaia-links-columns { list-style: none; padding-inline-start: 0; columns: 4 13rem; column-gap: var(--wp--preset--spacing--50); }

.wp-block-list.gaia-links-columns > li { break-inside: avoid; margin: 0; padding-block: .55em; border-bottom: 1px solid var(--wp--preset--color--border); }

.wp-block-list.gaia-links-columns a { text-decoration: none; color: inherit; }

.wp-block-list.gaia-links-columns a:hover { color: var(--wp--preset--color--primary); text-decoration: underline; }

/* Liste de gros liens (gaia-links-giant, socle 3.39.0, famille « affiche ») : un lien par ligne au caractère des
   titres, une note courte à droite (<small>), un trait d'encre entre les lignes ; la ligne s'inverse au survol. */
.wp-block-list.gaia-links-giant { list-style: none; margin: 0; padding: 0; border-top: var(--gaia-bd, 3px solid var(--wp--preset--color--contrast)); }

.wp-block-list.gaia-links-giant > li { margin: 0; }

.wp-block-list.gaia-links-giant a { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: 1rem .25rem; border-bottom: var(--gaia-bd, 3px solid var(--wp--preset--color--contrast)); font-family: var(--wp--preset--font-family--serif); font-size: clamp(2.125rem, 4.6vw, 4rem); line-height: 1; text-transform: uppercase; text-decoration: none; color: inherit; transition: padding .25s, background-color .2s, color .2s; }

.wp-block-list.gaia-links-giant a small { font-family: var(--wp--preset--font-family--sans); font-size: .875rem; font-weight: 700; text-transform: none; }

.wp-block-list.gaia-links-giant a:hover,
.wp-block-list.gaia-links-giant a:focus-visible { padding-inline-start: 1.25rem; background-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }

/* Liens en pastilles (gaia-links-pills, famille « heure par heure ») : une rangée qui passe à la ligne de gros
   liens au caractère des titres dans une pilule à filet, une note courte en <small> ; la pilule se remplit de la
   couleur secondaire au survol. */
.wp-block-list.gaia-links-pills { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; padding: 0; list-style: none; }

.wp-block-list.gaia-links-pills > li { margin: 0; }

.wp-block-list.gaia-links-pills a { display: flex; align-items: baseline; gap: .75rem; padding: .875rem 1.625rem; border: 1px solid var(--wp--preset--color--border); border-radius: 100px; font-family: var(--wp--preset--font-family--serif); font-size: 1.875rem; line-height: 1; color: inherit; text-decoration: none; transition: background-color .25s, border-color .25s, color .25s; }

.wp-block-list.gaia-links-pills a small { font-family: var(--wp--preset--font-family--sans); font-size: .75rem; color: var(--wp--preset--color--muted); }

.wp-block-list.gaia-links-pills a:hover,
.wp-block-list.gaia-links-pills a:focus-visible { border-color: var(--wp--preset--color--secondary); background-color: var(--wp--preset--color--secondary); color: var(--wp--preset--color--base); }

.wp-block-list.gaia-links-pills a:hover small,
.wp-block-list.gaia-links-pills a:focus-visible small { color: var(--wp--preset--color--base); }

@media (max-width: 520px) {

	.wp-block-list.gaia-links-pills a { padding: .75rem 1.25rem; font-size: 1.5rem; }
}

/* Liens en grille (gaia-links-grid, socle 3.40.0) : trois gros liens par ligne à la seconde voix, une note
   courte en chasse fixe (<small>), des filets entre les cases ; la case s'éclaire au survol. 2 colonnes
   sous 980 px, 1 sous 520 px. */
.wp-block-list.gaia-links-grid { --gaia-line: color-mix(in srgb, currentColor 50%, transparent); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gaia-line); }

.wp-block-list.gaia-links-grid > li { margin: 0; border-right: 1px solid var(--gaia-line); border-bottom: 1px solid var(--gaia-line); }

.wp-block-list.gaia-links-grid > li:nth-child(3n) { border-right: 0; }

.wp-block-list.gaia-links-grid a { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: 1.5rem 1.25rem; color: inherit; font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.75rem, 3.2vw, 2.875rem); line-height: 1.1; letter-spacing: -.02em; text-decoration: none; transition: background-color .25s, color .25s; }

.wp-block-list.gaia-links-grid a small { font-family: var(--wp--preset--font-family--mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }

.wp-block-list.gaia-links-grid a:hover,
.wp-block-list.gaia-links-grid a:focus-visible { background-color: var(--wp--preset--color--surface); color: var(--wp--preset--color--swatch-4, var(--wp--preset--color--contrast)); }

@media (max-width: 980px) {

	.wp-block-list.gaia-links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.wp-block-list.gaia-links-grid > li:nth-child(3n) { border-right: 1px solid var(--gaia-line); }

	.wp-block-list.gaia-links-grid > li:nth-child(2n) { border-right: 0; }
}

@media (max-width: 520px) {

	.wp-block-list.gaia-links-grid { grid-template-columns: minmax(0, 1fr); }

	.wp-block-list.gaia-links-grid > li { border-right: 0 !important; }
}