/* =========================================================================
   PFE Catalogue — grille de couvertures
   Les sélecteurs commencent par .pfe-cat et certains utilisent !important :
   ça évite que le thème (tailles d'images, champs, listes) casse l'affichage.
   ========================================================================= */
.pfe-cat {
	--pfe-accent: #57BFE2;      /* couleur principale du site (comme la page Stages PFE) */
	--pfe-accent-dark: #57BFE2; /* texte accent (liens, choix actif) */
	--pfe-accent-soft: #E8F6FB;
	--pfe-button: #57BFE2;       /* bouton Rechercher : même couleur que la page Stages PFE */
	--pfe-button-hover: #3FAED4;
	--pfe-text: #1B2333;
	--pfe-muted: #4A5468;
	--pfe-border: #E1E3E8;      /* bordures (mesurées sur Stages PFE) */
	--pfe-gray: #58697E;        /* textes secondaires : libellés, nombres, ligne d'état */
	--pfe-gray-light: #8899AE;  /* icônes, chevrons, valeur par défaut des listes */
	--pfe-placeholder: #8E9091;
	--pfe-ink: #101725;         /* texte des pastilles */
	--pfe-surface: #FFFFFF;
	--pfe-soft: #F3F5F9;
	--pfe-radius: 16px;
	--pfe-shadow: 0 1px 2px rgba(20, 30, 60, .04), 0 4px 16px rgba(20, 30, 60, .06);
	color: var(--pfe-text);
	max-width: 1400px;
	margin: 0 auto;
	padding: 12px 0 72px;
	line-height: 1.5;
}
.pfe-cat *, .pfe-cat *::before, .pfe-cat *::after { box-sizing: border-box; }
.pfe-cat a { text-decoration: none; }
.pfe-cat svg { flex: none; }
.pfe-cat .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.pfe-cat :focus-visible { outline: 3px solid var(--pfe-accent); outline-offset: 2px; }

.pfe-admin-notice {
	margin-bottom: 20px; padding: 12px 16px; border-radius: 10px;
	background: #FFF7E0; border: 1px solid #E8C25A; color: #5A4300; font-size: 14px;
}
.pfe-admin-notice a { color: #5A4300; font-weight: 600; margin-left: 6px; text-decoration: underline; }

/* ---------- En-tête (optionnel : shortcode titre="…") ---------- */
.pfe-hero { margin-bottom: 20px; }
.pfe-cat .pfe-title {
	margin: 0 0 6px; font-size: clamp(26px, 3.5vw, 36px); font-weight: 800; line-height: 1.15;
	color: var(--pfe-text);
}
.pfe-lead { margin: 0; max-width: 680px; font-size: 16px; color: var(--pfe-muted); }

/* ---------- Panneau de recherche (même structure que « Stages PFE ») ---------- */
.pfe-panel {
	background: var(--pfe-surface); border: 1px solid #DEE0E5; border-radius: 14px;
	box-shadow: 0 1px 3px rgba(20, 30, 60, .04); padding: 22px 13px 12px; margin-bottom: 20px;
}
.pfe-tools { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.pfe-row { margin-bottom: 10px; }

.pfe-row {
	display: grid; gap: 10px;
	grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(180px, .855fr);
}
.pfe-search, .pfe-field { position: relative; min-width: 0; }
.pfe-field-icon {
	position: absolute; left: 15px; top: 50%; transform: translateY(-50%); z-index: 1;
	display: flex; color: var(--pfe-gray-light); pointer-events: none;
}

/* Champ de recherche */
.pfe-cat .pfe-search input {
	-webkit-appearance: none !important; appearance: none !important;
	width: 100% !important; height: 50px !important; margin: 0 !important; padding: 0 44px 0 44px !important;
	border: 1px solid var(--pfe-border) !important; border-radius: 10px !important;
	background: #fff !important; box-shadow: none !important;
	font: inherit; font-size: 15px !important; color: var(--pfe-text) !important;
	transition: border-color .15s, box-shadow .15s;
}
.pfe-cat .pfe-search input::placeholder { color: var(--pfe-placeholder); opacity: 1; }
.pfe-cat .pfe-search input:hover { border-color: #C3C9D4 !important; }
.pfe-cat .pfe-search input:focus { outline: none; border-color: var(--pfe-accent) !important; box-shadow: 0 0 0 3px rgba(87, 191, 226, .25) !important; }
.pfe-cat .pfe-search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.pfe-cat .pfe-clear {
	position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
	width: 30px; height: 30px; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 50%;
	background: #EEF0F4; color: var(--pfe-text); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.pfe-cat .pfe-clear:hover { background: #E1E5EC; }
.pfe-cat .pfe-search input:placeholder-shown ~ .pfe-clear { display: none; }

/* Listes (promotion, tri) — sans JavaScript : liste stylée ; avec JavaScript : menu personnalisé */
.pfe-cat .pfe-field select {
	-webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
	width: 100% !important; height: 50px !important; min-height: 0 !important; margin: 0 !important;
	padding: 0 40px 0 44px !important; border: 1px solid var(--pfe-border) !important; border-radius: 10px !important;
	box-shadow: none !important; color: var(--pfe-text) !important; font: inherit; font-size: 15px !important; cursor: pointer;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234A5468' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 12px !important;
}
.pfe-cat .pfe-dd-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; }
.pfe-cat .pfe-dd-btn {
	display: flex; align-items: center; width: 100%; height: 50px; margin: 0; padding: 0 40px 0 44px;
	border: 1px solid var(--pfe-border); border-radius: 10px; background: #fff; color: var(--pfe-text);
	font: inherit; font-size: 15px; font-weight: 400; text-align: left; cursor: pointer; box-shadow: none;
	transition: border-color .15s, box-shadow .15s;
}
.pfe-cat .pfe-dd-btn:hover { border-color: #C3C9D4; background: #fff; color: var(--pfe-text); }
.pfe-cat .pfe-dd-btn[aria-expanded="true"], .pfe-cat .pfe-dd-btn:focus-visible {
	outline: none; border-color: var(--pfe-accent); box-shadow: 0 0 0 3px rgba(87, 191, 226, .25);
}
.pfe-cat .pfe-dd-btn.pfe-dd-default { color: var(--pfe-gray-light); }
.pfe-dd-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfe-dd-btn svg.pfe-dd-chev { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--pfe-gray-light); transition: transform .15s; }
.pfe-dd-btn[aria-expanded="true"] svg.pfe-dd-chev { transform: translateY(-50%) rotate(180deg); }
.pfe-cat .pfe-dd-list {
	position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none;
	background: #fff; border: 1px solid #E6E9EF; border-radius: 12px;
	box-shadow: 0 12px 32px rgba(20, 30, 60, .14), 0 2px 6px rgba(20, 30, 60, .06);
}
.pfe-cat .pfe-dd-list[hidden] { display: none; }
.pfe-cat .pfe-dd-list:focus, .pfe-cat .pfe-dd-list:focus-visible { outline: none; }
.pfe-cat .pfe-dd-list li {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	min-height: 42px; margin: 0; padding: 0 12px; border-radius: 8px;
	font-size: 15px; color: var(--pfe-text); cursor: pointer;
}
.pfe-cat .pfe-dd-list li::before { content: none; }
.pfe-cat .pfe-dd-list li.pfe-dd-active { background: var(--pfe-soft); }
.pfe-cat .pfe-dd-list li[aria-selected="true"] { color: var(--pfe-accent-dark); font-weight: 600; }
.pfe-dd-list li svg { color: var(--pfe-accent); visibility: hidden; }
.pfe-dd-list li[aria-selected="true"] svg { visibility: visible; }

/* Bouton Rechercher */
.pfe-cat .pfe-submit {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	height: 50px; margin: 0; padding: 0 20px; border: 0; border-radius: 10px; cursor: pointer;
	background: var(--pfe-button); color: #fff; font: inherit; font-size: 15px; font-weight: 600;
	transition: background .15s;
}
.pfe-cat .pfe-submit:hover { background: var(--pfe-button-hover); color: #fff; }

/* Domaines (comme « Niveau : » sur Stages PFE) */
.pfe-row2 { display: flex; align-items: flex-start; gap: 6px; padding: 0 2px; }
.pfe-inline-label {
	flex: none; display: inline-flex; align-items: center; height: 28px; padding-right: 6px;
	border-right: 1px solid var(--pfe-border); font-size: 13px; font-weight: 700; color: var(--pfe-gray);
}
.pfe-chips {
	display: flex; flex-wrap: nowrap; gap: 5px; flex: 1; min-width: 0;
	/* Une seule ligne, comme sur Stages PFE : défilement horizontal si l'écran est trop étroit */
	overflow-x: auto; scrollbar-width: none;
}
/* Fondu à droite seulement quand tout ne tient pas (classe ajoutée par le JS) */
.pfe-chips.pfe-chips-overflow {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.pfe-chips.pfe-chips-overflow.pfe-chips-end { -webkit-mask-image: none; mask-image: none; }
.pfe-chips::-webkit-scrollbar { display: none; }
.pfe-cat .pfe-chips a { flex: none; letter-spacing: normal; } /* espacement normal pour que les 6 domaines tiennent sur une ligne */
.pfe-cat .pfe-chips a {
	display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 9px;
	border: 1px solid var(--pfe-border); border-radius: 999px; background: #fff;
	font-size: 13px; font-weight: 500; color: var(--pfe-ink); white-space: nowrap;
	transition: border-color .15s, background .15s, color .15s;
}
.pfe-cat .pfe-chips a:hover { border-color: var(--pfe-accent); }
.pfe-cat .pfe-chips a[aria-current] { background: var(--pfe-accent); border-color: var(--pfe-accent); color: #fff; font-weight: 700; }
.pfe-cat .pfe-chips a.pfe-chip-empty { color: var(--pfe-gray); }
.pfe-chip-count {
	display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
	border-radius: 999px; background: #F1F3F6; color: var(--pfe-gray); font-size: 11px; font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.pfe-chips a[aria-current] .pfe-chip-count { background: rgba(255, 255, 255, .3); color: #fff; }

/* Ligne d'état : « Recherche terminée. N résultats… » + Réinitialiser */
.pfe-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 0 2px; min-height: 22px; }
.pfe-count { margin: 0; font-size: 13px; color: var(--pfe-gray); }
.pfe-cat .pfe-reset { font-size: 13px; font-weight: 700; color: var(--pfe-accent-dark); }
.pfe-cat .pfe-reset:hover { text-decoration: underline; color: var(--pfe-accent-dark); }

/* ---------- Résultats ---------- */
/* Grille de cartes */
.pfe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
/* Format livre (Réglages › Format des cartes : Portrait) */
.pfe-grid-portrait { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 22px 18px; }
.pfe-grid-portrait .pfe-cover { aspect-ratio: 3 / 4; }
.pfe-grid-portrait .pfe-card-body { padding: 12px 14px 14px; }
.pfe-grid-portrait .pfe-card-title { font-size: 16px; }
.pfe-cat .pfe-grid-portrait .pfe-portrait img { padding: 0 10px !important; }
.pfe-cat .pfe-card {
	display: flex; flex-direction: column; background: var(--pfe-surface); border-radius: var(--pfe-radius);
	box-shadow: var(--pfe-shadow); overflow: hidden; color: var(--pfe-text);
	transition: transform .2s ease, box-shadow .2s ease;
}
.pfe-cat .pfe-card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(20, 30, 60, .05), 0 16px 32px rgba(20, 30, 60, .12); color: var(--pfe-text); }
.pfe-cat .pfe-card:focus-visible { outline: 3px solid var(--pfe-accent); outline-offset: 3px; }

.pfe-cover { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #E8EBF1; }
.pfe-cat .pfe-cover img {
	position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
	max-width: none !important; margin: 0 !important; border-radius: 0 !important;
	object-fit: cover !important; object-position: center top !important; display: block;
	transition: transform .35s ease;
}
.pfe-cat .pfe-card:hover .pfe-cover img { transform: scale(1.03); }
/* Couverture portrait : entière, sur un fond flouté de la même image. */
.pfe-cover-blur {
	position: absolute; inset: -24px; background-size: cover; background-position: center;
	filter: blur(20px) saturate(1.1) brightness(.9); transform: scale(1.1);
}
.pfe-cat .pfe-portrait img {
	object-fit: contain !important; object-position: center !important;
	padding: 12px 0 !important; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35));
}
.pfe-cover-fallback {
	position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
	padding: 20px; background: linear-gradient(135deg, #57BFE2, #2E8FB5); color: #fff;
}
.pfe-cover-kicker { font-size: 11px; font-weight: 700; text-transform: uppercase; opacity: .85; }
.pfe-cover-title { font-size: 24px; font-weight: 700; line-height: 1.15; }

/* Badge « Nouveau » : même style que sur Stages PFE */
.pfe-badge {
	flex: none; display: inline-flex; align-items: center; height: 18px; padding: 1px 7px 0; border-radius: 5px;
	background: var(--pfe-accent); color: #fff; font-size: 10.5px; font-weight: 800; line-height: 1;
	text-transform: uppercase;
}

.pfe-card-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.pfe-card-title {
	min-width: 0; font-size: 17px; font-weight: 700; line-height: 1.3;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pfe-card-meta {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; margin-top: auto; padding-top: 6px;
	font-size: 13px; color: var(--pfe-muted);
}
/* « NOUVEAU il y a 3 h » sur la ligne du bas */
.pfe-card-when { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.pfe-card-stages { color: var(--pfe-accent-dark); font-weight: 600; white-space: nowrap; }

/* Chargement (recherche instantanée, filtres) : cartes en attente animées */
.pfe-cat.pfe-loading .pfe-card { position: relative; pointer-events: none; }
.pfe-cat.pfe-loading .pfe-card::after {
	content: ""; position: absolute; inset: 0; z-index: 3;
	background: linear-gradient(100deg, #EEF1F5 30%, #F8F9FB 50%, #EEF1F5 70%);
	background-size: 250% 100%; animation: pfe-shimmer 1.1s linear infinite;
}
.pfe-cat.pfe-loading .pfe-empty { opacity: .45; }
@keyframes pfe-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) {
	.pfe-cat.pfe-loading .pfe-card::after { animation: none; }
	.pfe-cat .pfe-card, .pfe-cat .pfe-cover img { transition: none; }
}

/* Charger plus / état vide */
.pfe-more-wrap { display: flex; justify-content: center; margin-top: 40px; }
.pfe-cat .pfe-more {
	display: inline-flex; align-items: center; height: 48px; padding: 0 28px; border-radius: 999px;
	border: 1.5px solid var(--pfe-accent); background: #fff; color: var(--pfe-accent-dark); font-weight: 600; font-size: 15px;
}
.pfe-cat .pfe-more:hover { background: var(--pfe-accent-soft); color: var(--pfe-accent-dark); }
.pfe-cat .pfe-more[aria-busy="true"] { opacity: .6; pointer-events: none; }
.pfe-empty {
	display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 56px 24px; text-align: center;
	background: var(--pfe-surface); border-radius: var(--pfe-radius); box-shadow: var(--pfe-shadow); color: var(--pfe-muted);
}
.pfe-empty svg { color: #9AA3B5; margin-bottom: 6px; }
.pfe-empty-title { margin: 0; font-size: 17px; font-weight: 600; color: var(--pfe-text); }
.pfe-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 8px 0 0; }
.pfe-cat .pfe-empty-actions a { color: var(--pfe-accent-dark); font-size: 15px !important; font-weight: 600; }
.pfe-cat .pfe-empty-actions a:hover { text-decoration: underline; }

/* ---------- Tablette / mobile ---------- */
@media (max-width: 1024px) {
	.pfe-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pfe-search { grid-column: 1 / -1; }
	.pfe-submit { grid-column: 1 / -1; }
}
@media (min-width: 641px) and (max-width: 900px) {
	.pfe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pfe-grid-portrait { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.pfe-cat { padding: 8px 0 48px; }
	.pfe-panel { padding: 12px; }
	.pfe-row { grid-template-columns: 1fr; }
	.pfe-row2 { flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; }
	.pfe-inline-label { height: auto; border-right: 0; padding-right: 0; }
	/* Les pastilles défilent horizontalement à l'intérieur du panneau, sans dépasser de l'écran */
	.pfe-chips {
		flex: none; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
		width: calc(100% + 28px); max-width: none; margin: 0 -14px; padding: 0 14px 4px; box-sizing: border-box;
	}
	.pfe-chips::-webkit-scrollbar { display: none; }
	.pfe-cat .pfe-chips a { flex: none; letter-spacing: normal; } /* espacement normal pour que les 6 domaines tiennent sur une ligne */
	.pfe-count-sub { display: none; }
	.pfe-grid { grid-template-columns: 1fr; gap: 16px; }
	.pfe-grid-portrait { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
	.pfe-grid-portrait .pfe-card-body { padding: 10px 10px 12px; }
	.pfe-grid-portrait .pfe-card-title { font-size: 14px; }
	/* Cartes étroites : le nombre de stages passe sur une deuxième ligne */
	.pfe-grid-portrait .pfe-card-meta { flex-direction: column; align-items: flex-start; }
	.pfe-grid-portrait .pfe-card-when { gap: 6px; }
}

/* =========================================================================
   [pfe_derniers] — bande « Derniers PFE Books » (page d'accueil)
   ========================================================================= */
/* La bande se centre sur la page (et non sur le bloc qui la contient), pour s'aligner
   sur le contenu de la page d'accueil (1380 px de large), quel que soit le conteneur du thème. */
.pfe-latest-bleed { box-sizing: border-box; } /* largeur et position réglées par un petit script (voir pfe-catalogue.php) */
.pfe-cat.pfe-latest { width: min(var(--pfe-latest-width, 1380px), 100% - 2 * var(--pfe-latest-gutter, 16px)); max-width: none; margin: 0 auto; padding: 0; }
.pfe-latest-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 0 2px; }
.pfe-cat .pfe-latest-title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; color: #1F2232; }
.pfe-cat .pfe-latest-all { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #007499; white-space: nowrap; } /* même couleur que « Voir les 559 offres » */
.pfe-cat .pfe-latest-all:hover { text-decoration: underline; color: #007499; }
.pfe-cat .pfe-latest-all svg { transition: transform .15s; }
.pfe-latest-all-short { display: none; }
.pfe-cat .pfe-latest-all:hover svg { transform: translateX(3px); }

.pfe-latest-grid { display: grid; grid-template-columns: repeat(var(--pfe-n, 6), minmax(0, 1fr)); gap: 14px; }
/* Cartes compactes */
.pfe-latest .pfe-card { border: 1px solid #E6E9EF; box-shadow: none; border-radius: 12px; }
.pfe-latest .pfe-card:hover { box-shadow: 0 10px 24px rgba(20, 30, 60, .10); }
.pfe-latest .pfe-card-body { padding: 10px 12px 12px; gap: 4px; }
.pfe-latest .pfe-card-title { font-size: 15px; -webkit-line-clamp: 1; }
.pfe-latest .pfe-card-meta { font-size: 12px; padding-top: 2px; }
.pfe-latest-portrait .pfe-cover { aspect-ratio: 3 / 4; } /* même format que le catalogue (réglage « Format des cartes ») */
.pfe-cat .pfe-latest-portrait .pfe-portrait img { padding: 0 8px !important; }
.pfe-latest .pfe-card-stages { display: none; } /* cartes compactes : « NOUVEAU il y a 3 h » seulement */

/* Écrans moyens et mobiles : rangée qui défile horizontalement */
@media (max-width: 1100px) {
	.pfe-latest-grid {
		display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
		margin: 0 -16px; padding: 2px 16px 8px; scroll-padding: 0 16px;
	}
	.pfe-latest-grid::-webkit-scrollbar { display: none; }
	.pfe-latest .pfe-card { flex: 0 0 220px; scroll-snap-align: start; }
	.pfe-latest-portrait .pfe-card { flex-basis: 180px; }
}
@media (max-width: 640px) {
	.pfe-latest .pfe-card { flex-basis: 70%; }
	.pfe-latest-portrait .pfe-card { flex-basis: 46%; }
	.pfe-cat .pfe-latest-title { font-size: 17px; }
	.pfe-latest-all-long { display: none; }
	.pfe-latest-all-short { display: inline; }
}