/* =========================================================================
   Bloc Liste — apparence par défaut et styles
   -------------------------------------------------------------------------
   Par défaut : la puce des listes à puces est orange.

   « Numérotée » : chaque entrée devient une carte crème arrondie, son rang
   posé dans un trapèze de couleur à cheval sur le bord — à gauche pour les
   entrées impaires, à droite pour les paires. Les couleurs tournent sur
   trois : jaune, vert, violet.

   Relevés sur la capture (échelle 1) :
     carte     602 × 138, texte à 32 px du bord et 21 px des bords haut
               et bas, hauteur de ligne 32 px pour un corps de 22 px
     interstice 20 à 25 px entre deux cartes
     trapèze   50 × 58, chiffre haut de 30 px, soit un corps d'environ 42 px
     débord    37 px à gauche, 21 px à droite

   Trois écarts assumés avec le relevé :
     — rayon 16 px et non 18, celui des cartes du bloc Détails ; 2 px sur un
       aplat crème ne se voient pas, une seconde valeur de rayon dans la
       charte, si ;
     — un seul débord, 60 % de la largeur du trapèze, au lieu de deux valeurs
       différentes selon le côté ;
     — tout est exprimé à partir du corps du chiffre, préréglage « Titre 3 »
       (32 → 40 px) : le trapèze et son débord suivent donc la fluidité du
       thème sans une seule requête média.
   ========================================================================= */

/* --- Par défaut : la puce ---------------------------------------------------

   La règle vit ici plutôt que dans theme.json : ce dernier ne sait pas viser
   ::marker, il n'expose que les éléments qu'il connaît (lien, titre, légende).

   ::marker n'accepte qu'une poignée de propriétés — color en fait partie, le
   texte de l'entrée garde donc la sienne. La puce est un élément non textuel :
   son seuil RGAA est de 3:1, et l'orange sur blanc donne 3,43:1.

   Deux sélecteurs pour ne viser que les puces, à n'importe quelle profondeur :
   une entrée dont le parent est un <ul>. Les numéros d'une liste ordonnée,
   imbriquée ou non, gardent la couleur du texte. */

ul.wp-block-list > li::marker,
.wp-block-list ul > li::marker {
	color: var( --wp--preset--color--orange, #EB5C37 );
}

/* --- Styles « Carré noir » et « Carré orange » ------------------------------

   Deux variations qui ne touchent que la puce : sa forme et sa couleur.

   Le carré s'applique à tous les niveaux. La feuille du navigateur fait
   normalement alterner disque, cercle puis carré selon la profondeur, et cette
   alternance ne s'hérite pas — elle est redéclarée niveau par niveau. Une
   variation nommée « Carré » qui ne le serait qu'au premier niveau tromperait
   la rédaction ; en contrepartie, les niveaux ne se distinguent plus que par
   leur retrait.

   Une liste ordonnée imbriquée garde ses numéros : la feuille du navigateur
   déclare decimal sur <ol>, et une déclaration l'emporte sur un héritage. */

.wp-block-list.is-style-carre-noir,
.wp-block-list.is-style-carre-noir ul,
.wp-block-list.is-style-carre-orange,
.wp-block-list.is-style-carre-orange ul {
	list-style-type: square;
}

.wp-block-list.is-style-carre-noir li::marker {
	/* Le noir de la charte, pas #000. */
	color: var( --wp--preset--color--encre, #1D1D1B );
}

.wp-block-list.is-style-carre-orange li::marker {
	color: var( --wp--preset--color--orange, #EB5C37 );
}

/* --- Style « Numérotée » --------------------------------------------------- */

.wp-block-list.is-style-numerotee {
	--cdp-jaune:  var( --wp--preset--color--jaune, #FFDF44 );
	--cdp-vert:   var( --wp--preset--color--vert, #00963F );
	--cdp-violet: var( --wp--preset--color--violet, #502D87 );
	--cdp-creme:  var( --wp--preset--color--creme, #F7EEE7 );
	--cdp-blanc:  var( --wp--preset--color--blanc, #FFFFFF );
	--cdp-encre:  var( --wp--preset--color--encre, #1D1D1B );

	--cdp-font-titre: var( --wp--preset--font-family--acumin-condensed,
	                  "acumin-pro-extra-condensed", "Arial Narrow", sans-serif );

	/* Le corps du chiffre commande toute la géométrie du trapèze. */
	--cdp-liste-corps:    var( --wp--preset--font-size--titre-3, 2.5rem );
	--cdp-liste-largeur:  calc( var( --cdp-liste-corps ) * 1.25 );
	--cdp-liste-hauteur:  calc( var( --cdp-liste-corps ) * 1.45 );
	--cdp-liste-debord:   calc( var( --cdp-liste-largeur ) * 0.6 );

	--cdp-liste-rayon:    16px;
	--cdp-liste-espace:   1.5rem;

	/* Découpe relevée coin par coin sur la capture, comme les étiquettes.
	   Même famille que le trapèze des boutons, tracé légèrement différent. */
	--cdp-liste-decoupe: polygon( 8% 26%, 100% 0, 100% 100%, 0 90% );

	/* Les trapèzes tiennent dans ce retrait au lieu de déborder du bloc :
	   la carte perd 60 px de large, le visiteur ne gagne jamais de barre de
	   défilement horizontale sur un petit écran. */
	padding-inline: var( --cdp-liste-debord );

	margin-block: 0;
	list-style: none;
	counter-reset: cdp-liste;
}

/* Une liste imbriquée retrouve ses puces : list-style s'hérite, sans cela
   elle sortirait nue de la carte. */
.wp-block-list.is-style-numerotee ul,
.wp-block-list.is-style-numerotee ol {
	list-style: revert;
}

/* --- La carte -------------------------------------------------------------- */

.wp-block-list.is-style-numerotee > li {
	position: relative;
	counter-increment: cdp-liste;
	background: var( --cdp-creme );
	border-radius: var( --cdp-liste-rayon );
	padding: 1.25rem 2rem;
	color: var( --cdp-encre );

	/* 1,45 et non le 1,65 du thème : les cartes de la charte resserrent leur
	   interligne — l'export d'intégration fait de même sur .cdp-services__carte,
	   et la capture donne 32 px de ligne pour un corps de 22. */
	line-height: 1.45;
}

.wp-block-list.is-style-numerotee > li + li {
	margin-block-start: var( --cdp-liste-espace );
}

/* --- Le rang --------------------------------------------------------------- */

.wp-block-list.is-style-numerotee > li::before {
	content: counter( cdp-liste );
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	display: grid;
	place-items: center;
	width: var( --cdp-liste-largeur );
	height: var( --cdp-liste-hauteur );
	clip-path: var( --cdp-liste-decoupe );
	font-family: var( --cdp-font-titre );
	font-size: var( --cdp-liste-corps );
	/* 800 : la seule graisse du kit en condensée — cf. blocks/README.md. */
	font-weight: 800;
	line-height: 1;
}

/* Le trapèze mord la carte de 40 % de sa largeur, soit 20 px au plus : la
   carte a 32 px de retrait intérieur, le texte reste dégagé sans règle. */
.wp-block-list.is-style-numerotee > li:nth-child(odd)::before {
	left: calc( -1 * var( --cdp-liste-debord ) );
}

.wp-block-list.is-style-numerotee > li:nth-child(even)::before {
	right: calc( -1 * var( --cdp-liste-debord ) );
}

/* Cycle de trois. Les trois associations retenues passent le seuil RGAA de
   3:1 des grands textes — violet sur jaune 7,69:1, blanc sur vert 3,86:1,
   blanc sur violet 10,16:1. Ne pas en improviser d'autres sans vérifier. */
.wp-block-list.is-style-numerotee > li:nth-child(3n+1)::before {
	background: var( --cdp-jaune );
	color: var( --cdp-violet );
}

.wp-block-list.is-style-numerotee > li:nth-child(3n+2)::before {
	background: var( --cdp-vert );
	color: var( --cdp-blanc );
}

.wp-block-list.is-style-numerotee > li:nth-child(3n)::before {
	background: var( --cdp-violet );
	color: var( --cdp-blanc );
}
