/* =========================================================================
   Bloc « Liste des offres d’emploi » — front + éditeur
   -------------------------------------------------------------------------
   Une carte, deux conteneurs. La carte (.cdp-liste-emploi__carte-inner) est
   identique en grille et en carrousel ; seule la piste
   (.cdp-liste-emploi__piste) change de mode d’affichage selon la classe
   --grille / --carrousel posée au rendu.

   Le carrousel reprend la mécanique du bloc « Témoignages » : piste en
   grid-auto-flow column + scroll-snap, deux flèches pilotées par view.js.
   Les mêmes pièges y valent — cf. blocks/temoignages/style.css et
   blocks/README.md :
     · grid-auto-columns SANS minmax(), sinon les colonnes se compriment
       au lieu de déborder et plus rien ne défile ;
     · calc() écrit À PLAT, sans var() ni calcul imbriqué à l’intérieur.
       Le minifieur d’Autoptimize casse sur `calc( 100% / var(…) - … )` :
       il supprime la déclaration ET laisse l’accolade ouverte, ce qui
       avale toutes les règles suivantes. D’où les largeurs de carrousel
       en classes `--cols-N` avec un calc littéral, comme Témoignages.

   Pas de relevé maquette au pixel ici : la liste des offres n’a pas
   d’export. Proportions et teintes reprennent le vocabulaire déjà posé
   (cartes blanches arrondies, titres en condensée violette, tags violets).
   ========================================================================= */

.cdp-liste-emploi {
	--cdp-violet:       var( --wp--preset--color--violet, #502D87 );
	--cdp-violet-alt:   #3C2166;
	--cdp-vert:         var( --wp--preset--color--vert, #00963F );
	--cdp-orange:       var( --wp--preset--color--orange, #EB5C37 );
	--cdp-orange-fonce: var( --wp--preset--color--orange-fonce, #C7411D );
	--cdp-jaune:        var( --wp--preset--color--jaune, #FFDF44 );
	--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 );

	--cdp-gouttiere:  clamp( 1.25rem, 0.85rem + 1.75vw, 3.25rem );
	--cdp-container:  1624px;
	--cdp-colonnes:   3;   /* surchargé en style inline par le rendu (mode grille) */
	--cdp-vignette:   260px;   /* largeur max de la silhouette, centrée dans la carte */
	--cdp-transition: 180ms ease;
}

.cdp-liste-emploi__inner {
	width: min( 100% - ( var( --cdp-gouttiere ) * 2 ), var( --cdp-container ) );
	margin-inline: auto;
}

/* --- Titre de section ---------------------------------------------------- */

.cdp-liste-emploi__titre {
	margin: 0 0 var( --cdp-gouttiere );
	font-family: var( --cdp-font-titre );
	font-size: var( --wp--preset--font-size--titre-2, 3.75rem );
	font-weight: 800;
	line-height: 1.05;
	text-transform: uppercase;
	text-wrap: balance;
	color: var( --cdp-violet );
}

/* --- Piste : socle commun --------------------------------------------------- */

.cdp-liste-emploi__piste {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- Piste : grille ------------------------------------------------------- */

.cdp-liste-emploi--grille .cdp-liste-emploi__piste {
	display: grid;
	grid-template-columns: repeat( var( --cdp-colonnes ), minmax( 0, 1fr ) );
	gap: var( --cdp-gouttiere );
}

@media ( max-width: 1100px ) {
	.cdp-liste-emploi--grille .cdp-liste-emploi__piste {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 640px ) {
	.cdp-liste-emploi--grille .cdp-liste-emploi__piste {
		grid-template-columns: 1fr;
	}
}

/* --- Piste : carrousel -------------------------------------------------------- */

.cdp-liste-emploi__zone {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr ) auto;
	align-items: center;
	gap: 1rem;
}

.cdp-liste-emploi--carrousel .cdp-liste-emploi__piste {
	display: grid;
	grid-auto-flow: column;
	gap: 2rem;
	align-items: stretch;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 0.5rem 0.25rem 1.5rem;
	scrollbar-width: none;
}

.cdp-liste-emploi--carrousel.cdp-liste-emploi--cols-2 .cdp-liste-emploi__piste { grid-auto-columns: 47%; }
.cdp-liste-emploi--carrousel.cdp-liste-emploi--cols-3 .cdp-liste-emploi__piste { grid-auto-columns: 31%; }
.cdp-liste-emploi--carrousel.cdp-liste-emploi--cols-4 .cdp-liste-emploi__piste { grid-auto-columns: 22.5%; }

/* Cols-1 : une carte en pleine largeur, à toute taille d'écran — pas de
   palier « 2 puis 1 » comme les autres réglages, ça n'aurait pas de sens
   pour une seule carte. [class] répété pour peser plus que les règles des
   paliers 1100/700px plus bas (0,4,0 contre 0,3,0) : sans ce surpoids, ces
   paliers l'emporteraient sous 1100px et remonteraient à 2 cartes, un
   comportement absurde ici. */
.cdp-liste-emploi--carrousel.cdp-liste-emploi--cols-1[class] .cdp-liste-emploi__piste { grid-auto-columns: 100%; }

.cdp-liste-emploi--carrousel .cdp-liste-emploi__piste::-webkit-scrollbar {
	display: none;
}

.cdp-liste-emploi--carrousel .cdp-liste-emploi__carte {
	scroll-snap-align: start;
}

/* --- Carte -------------------------------------------------------------------- */

.cdp-liste-emploi__carte {
	margin: 0;
	display: flex;   /* la carte interne prend toute la hauteur de cellule */
}

.cdp-liste-emploi__carte-inner:before {
	content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  margin-top: 50px;
	background: var( --cdp-blanc );
clip-path:polygon( 3% 0, 100% 0, 100% 98%, 0% 100% )
}

.cdp-liste-emploi__carte-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	

	transition: transform var( --cdp-transition ), box-shadow var( --cdp-transition );
}

.cdp-liste-emploi__carte-inner:has( .cdp-liste-emploi__lien:hover ),
.cdp-liste-emploi__carte-inner:has( .cdp-liste-emploi__lien:focus-visible ) {
	
	
}

/* --- Média : photo découpée dans la forme de marque -------------------------
   Masque SVG en data URI — pas de clip-path: url(#id), qui se casse dès que le
   bloc est réutilisé ailleurs. La zone image est ~carrée (253/245) et suit la
   largeur de la carte ; la silhouette l'occupe entièrement (mask-size:
   contain). Le même masque s'applique à l'aplat crème des cartes sans photo.
   Repli en coins arrondis via @supports, pour ne jamais afficher un rectangle
   brut si mask-image n'est pas géré. */

.cdp-liste-emploi__media {
	position: relative;
	padding-top: 0rem;   /* laisse respirer les traits jaunes au-dessus */
}

.cdp-liste-emploi__media figure {
	position: relative;
	max-width: var( --cdp-vignette );
	margin: 0 auto;
	
}

/* Deux traits jaunes en haut à droite, à cheval sur la forme. Décoratif :
   fond CSS (hors DOM), aucun aria à poser, pointer-events coupés. */
.cdp-liste-emploi__media figure::after {
	content: "";
	position: absolute;
	top: -0.25rem;
	right: -0.75rem;
	width: 28%;
	aspect-ratio: 219 / 171;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 219 171'%3E%3Cpath fill='%23FFDF44' d='M219 72.8607L194.469 39.0273L48.6854 145.352L67.2842 171L219 72.8607Z'/%3E%3Cpath fill='%23FFDF44' d='M52.1887 0L0 111.301L28.6036 124.793L89.9232 17.8092L52.1887 0Z'/%3E%3C/svg%3E") no-repeat center / contain;
	pointer-events: none;
}

.cdp-liste-emploi__image {
	display: block;
	width: 100%;
	max-width: var( --cdp-vignette );
	margin-inline: auto;
	height: 210px;
	object-fit: cover;
	border-radius: 16px;
}

.cdp-liste-emploi__image--vide {
	background: var( --cdp-creme );
}

@supports ( mask-image: linear-gradient( #000, #000 ) ) or ( -webkit-mask-image: linear-gradient( #000, #000 ) ) {
	.cdp-liste-emploi__image {
		border-radius: 0;
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 253 245'%3E%3Cpath fill='%23fff' d='M133.013 0C129.397 0 125.723 0.184132 121.998 0.563228C109.358 1.85215 98.2496 6.68653 86.8412 11.8964C76.5635 16.5936 65.4802 18.7779 55.0725 23.7422C33.8127 33.884 13.9257 49.6219 5.33864 72.2304C-1.81058 91.0552 -0.260796 111.909 1.39014 131.98C3.36981 156.05 5.85524 181.508 20.2368 200.917C30.0954 214.225 44.7659 223.36 60.2637 229.223C74.4249 234.585 89.1785 239.072 104.113 241.849C114.423 243.766 124.813 244.863 135.155 244.871H135.419C154.454 244.845 173.318 241.109 191.139 231.927C210.354 222.027 230.382 213.037 241.537 189.01C257.22 155.234 254.77 113.942 240.62 79.9279C221.773 34.6313 182.534 0.00361044 133.017 0H133.013Z'/%3E%3C/svg%3E");
		        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 253 245'%3E%3Cpath fill='%23fff' d='M133.013 0C129.397 0 125.723 0.184132 121.998 0.563228C109.358 1.85215 98.2496 6.68653 86.8412 11.8964C76.5635 16.5936 65.4802 18.7779 55.0725 23.7422C33.8127 33.884 13.9257 49.6219 5.33864 72.2304C-1.81058 91.0552 -0.260796 111.909 1.39014 131.98C3.36981 156.05 5.85524 181.508 20.2368 200.917C30.0954 214.225 44.7659 223.36 60.2637 229.223C74.4249 234.585 89.1785 239.072 104.113 241.849C114.423 243.766 124.813 244.863 135.155 244.871H135.419C154.454 244.845 173.318 241.109 191.139 231.927C210.354 222.027 230.382 213.037 241.537 189.01C257.22 155.234 254.77 113.942 240.62 79.9279C221.773 34.6313 182.534 0.00361044 133.017 0H133.013Z'/%3E%3C/svg%3E");
		-webkit-mask-repeat: no-repeat;
		        mask-repeat: no-repeat;
		-webkit-mask-position: center;
		        mask-position: center;
		/* Zone ~carrée = ratio de la forme : contain la fait épouser le cadre
		   sans déformation. min()/calc() proscrits ici — Autoptimize supprime
		   la déclaration (cf. en-tête). */
		-webkit-mask-size: contain;
		        mask-size: contain;
	}
}

/* --- Corps ----------------------------------------------------------------- */

.cdp-liste-emploi__corps {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
    padding: 2.5rem 2rem;
}

/* Vert de marque #00963F sur blanc : 3,86:1 — au-dessus du seuil RGAA 3:1
   pour ce grand titre (titre-3, 800). Ne pas reprendre pour du texte courant. */
.cdp-liste-emploi__poste {
	margin: 0.25rem 0 0;
	font-family: var( --cdp-font-titre );
	font-size: var( --wp--preset--font-size--titre-3, 2.5rem );
	font-weight: 800;
	line-height: 1.1;
	text-transform: uppercase;
	color: var( --cdp-vert );
}

.cdp-liste-emploi__lien {
	color: inherit;
	text-decoration: none;
}

/* Lien étiré : toute la carte devient cliquable, sans imbriquer le balisage
   dans un <a> (titre, tags et description restent des éléments distincts pour
   les lecteurs d’écran). Le contour de focus est repris sur la carte. */
.cdp-liste-emploi__lien::after {
	content: "";
	position: absolute;
	inset: 0;
}

.cdp-liste-emploi__carte-inner:has( .cdp-liste-emploi__lien:focus-visible ) {
	outline: 3px solid var( --cdp-violet );
	outline-offset: 2px;
}

/* Contour reporté sur la carte : on l’enlève du lien lui-même. Sélecteur
   doublé pour repasser devant la règle de focus générique plus bas. */
.cdp-liste-emploi .cdp-liste-emploi__lien:focus-visible {
	outline: none;
}

.cdp-liste-emploi__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Étiquette : parallélogramme incliné (skewX), contour violet. Le libellé
   est remis d'aplomb par le <span> contre-incliné — d'où la balise dans
   render.php. skewX à une seule valeur, sans calc() : sinon Autoptimize
   supprime la règle. Violet sur blanc : 10,16:1. */
.cdp-liste-emploi__tag {
	display: inline-block;
	padding: 0.32em 1.1em;

	color: var( --cdp-violet );
	font-family: var( --cdp-font-titre );
	font-weight: 700;
	font-size: var( --wp--preset--font-size--petit, 1.125rem );
	line-height: 1.2;
	text-transform: uppercase;
	border: 1px solid var( --cdp-violet );
	transform: skewX( -6deg );
}

/* Contre-inclinaison : le texte reste droit dans le parallélogramme.
   inline-block obligatoire, sinon le transform est ignoré sur l'inline. */
.cdp-liste-emploi__tag > span {
	display: inline-block;
	transform: skewX( 6deg );
}
.cdp-liste-emploi__desc {
	margin: 0;
	font-size: var( --wp--preset--font-size--texte, 1.375rem );
	color: var( --cdp-encre );
	padding-bottom: 2rem;
}


.cdp-liste-emploi__cta {
    margin-top: auto;
    align-self: center;
    padding: 0.8em 1.8em;
    background: var(--cdp-orange);
    color: var(--cdp-blanc);
    font-weight: 700;
    font-size: var(--wp--preset--font-size--bouton, 1.25rem);
    line-height: 1.2;
    text-align: center;
    clip-path: polygon(0% 12%, 100% 0, 100% 100%, 0% 88%);
    position: absolute;
    bottom: -17px;
    text-decoration: none;
	transition: all ease-in 150ms;
}

.cdp-liste-emploi__cta:hover {
    background: var(--cdp-violet);

}

/* --- Flèches (carrousel) --------------------------------------------------- */

.cdp-liste-emploi__nav {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: var( --cdp-violet );
	color: var( --cdp-blanc );
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color var( --cdp-transition ), opacity var( --cdp-transition );
}

.cdp-liste-emploi__nav:hover     { background: var( --cdp-violet-alt ); }
.cdp-liste-emploi__nav[disabled] { opacity: 0.35; cursor: default; }
.cdp-liste-emploi__nav[hidden]   { display: none; }
.cdp-liste-emploi__nav svg       { width: 16px; height: 16px; fill: currentColor; }

/* Contour de focus homogène — RGAA 10.7 */
.cdp-liste-emploi :where( a, button, [tabindex] ):focus-visible {
	outline: 3px solid var( --cdp-violet );
	outline-offset: 2px;
	border-radius: 4px;
}

/* --- Message d’administration -------------------------------------------------- */

.cdp-liste-emploi__vide {
	margin: 0;
	font-size: var( --wp--preset--font-size--petit, 1.125rem );
	font-style: italic;
}

/* --- Adaptations ------------------------------------------------------------- */

/* Carrousel : deux cartes de front sous 1100 px, quel que soit le réglage
   « Colonnes » (3 → 2), puis une seule sous 700 px (bloc suivant). Mêmes
   paliers que la grille. [class] pour repasser devant les règles --cols-N
   (0,3,0), qui précèdent dans la feuille ; ce bloc doit rester AVANT celui
   des 700 px pour que le 85 % l'emporte en dessous. */
@media ( max-width: 1100px ) {
	.cdp-liste-emploi--carrousel[class] .cdp-liste-emploi__piste {
		grid-auto-columns: 47%;
	}
}

@media ( max-width: 700px ) {
	.cdp-liste-emploi__zone { grid-template-columns: 1fr; }

	/* [class] pour repasser devant les règles `--cols-N` (0,3,0) plus haut. */
	.cdp-liste-emploi--carrousel[class] .cdp-liste-emploi__piste {
		grid-auto-columns: 85%;
	}

	.cdp-liste-emploi__nav { display: none; }
}

@media ( prefers-reduced-motion: reduce ) {
	.cdp-liste-emploi--carrousel .cdp-liste-emploi__piste { scroll-behavior: auto; }
	.cdp-liste-emploi__carte-inner { transition: none; }

	.cdp-liste-emploi__carte-inner:has( .cdp-liste-emploi__lien:hover ),
	.cdp-liste-emploi__carte-inner:has( .cdp-liste-emploi__lien:focus-visible ) {
		transform: none;
	}
}