/* ==========================================================================
   Catalogue — XD « Formation SIG - Formations » (1920 x 4327)
   Formations (gris) · Indicateurs de l'accueil (components.css) · FAQ (gris)
   ========================================================================== */

/* ---------- En-tête : titre à gauche ; recherche puis onglets à droite ---------- */
.catalogue { --c-card: var(--c-bg); padding-block: clamp(48px, 4.84vw, 93px) clamp(40px, 3.1vw, 59px); }
.catalogue__head {
	display: flex;
	justify-content: space-between;
	gap: 32px 40px;
	margin-bottom: clamp(28px, 4.9vw, 95px);
}
.catalogue__head .section-head__titles { max-width: 700px; }
/* Page Événements (actualités) : titre sur une seule ligne tant qu'il y a la place (retour client du 03/11/2026) */
.catalogue--actus .catalogue__head .section-head__titles { max-width: none; }
/* Catalogue des formations : titre limité à 43 % de la largeur (retour client du 20/10/2026) ;
   en dessous de 1140px, l'en-tête passe en colonne et le titre reprend toute la largeur */
@media (min-width: 1141px) {
	.catalogue--formations .catalogue__head .section-head__titles { max-width: 43%; }
}
.catalogue__tools {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding-top: clamp(0px, 1.05vw, 20px);
}
/* Pilule 575 x 66 : blanc à 90 %, filet #5F5F5F, sans ombre. Survol : vert à 80 %, sans filet. */
.catalogue__search { position: relative; z-index: 3; width: clamp(280px, 30vw, 575px); }
.catalogue .search-pill {
	border: 1px solid var(--c-text-strong);
	background: color-mix(in srgb, var(--c-bg) 90%, transparent);
	box-shadow: none;
	transition: background-color .3s ease-out, border-color .3s ease-out;
}
.catalogue .search-pill:hover { border-color: transparent; background: color-mix(in srgb, var(--c-green) 80%, transparent); }
.catalogue .is-open .search-pill { border-color: var(--c-text-strong); background: var(--c-bg); }

.catalogue__inner { position: relative; }
.catalogue:has(.is-open) { position: relative; z-index: 20; }
.catalogue .search-panel {
	position: absolute;
	z-index: 2;
	top: calc(clamp(0px, 1.05vw, 20px) + clamp(50px, 3.44vw, 66px) + clamp(16px, 2.34vw, 45px));
	left: calc(var(--gutter) - 7px);
	right: calc(var(--gutter) - 7px);
}
.catalogue__filters { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 46px); }
.catalogue .tabs { justify-content: flex-end; }

/* ---------- Page Actualités (home.php) : cartes de l'accueil (texte au-dessus de l'image), hauteurs alignées par rangée ---------- */
.catalogue--actus .catalogue__grid > .card { height: 100%; }

/* ---------- Termes de l'onglet ouvert ---------- */
.catalogue__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
	margin: calc(clamp(12px, 3vw, 58px) * -1) 0 clamp(24px, 2.2vw, 42px);
}
.catalogue__chips[hidden] { display: none; }
/* Sans JavaScript, les onglets n'ouvrent rien : tous les termes restent visibles */
html:not(.js) .catalogue__chips[hidden] { display: flex; }
.chip {
	display: block;
	padding: 7px 18px;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-pill);
	background: var(--c-bg);
	font-size: var(--fs-16);
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-text);
	transition: color .2s, border-color .2s, background-color .2s;
}
.chip:hover { border-color: var(--c-green); color: var(--c-green); }
.chip.is-active,
.chip.is-active:hover { border-color: var(--c-green); background: var(--c-green); color: #fff; }

.catalogue__empty { padding-block: clamp(24px, 4vw, 80px); font-size: var(--fs-24); font-weight: 700; text-align: center; }

/* ---------- Cartes : 2 rangées qui défilent (colonnes de 452px, 41 x 48px d'écart) ---------- */
.catalogue__grid {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(2, auto);
	/* Même largeur de carte que les autres sliders : 4 / 3 / 2 / 1 colonnes entières dans le conteneur */
	grid-auto-columns: calc((100% - (var(--cards-per-view) - 1) * var(--slider-gap)) / var(--cards-per-view));
	gap: clamp(20px, 2.5vw, 48px) var(--slider-gap);
}
.catalogue__grid[data-rows="1"] { grid-template-rows: auto; }
.catalogue__grid > .card { width: auto; }
.catalogue__grid > .card[hidden] { display: none; }

/* Vue « tout afficher » (carré à droite des onglets) : grille complète, sans défilement */
.catalogue .see-all[aria-pressed="true"] { color: var(--c-green); }
.catalogue.is-grid .catalogue__grid {
	grid-auto-flow: row;
	grid-template-rows: none;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-columns: auto;
	margin: 0;
	padding: 0;
	overflow: visible;
}
.catalogue.is-grid .slider__arrow { display: none; }

/* ---------- FAQ ---------- */
.faq { padding-block: clamp(48px, 4.84vw, 93px) clamp(64px, 11.5vw, 222px); }
.faq .section-head { margin-bottom: clamp(32px, 5.9vw, 114px); }

/* ---------- Tablette ---------- */
@media (max-width: 1140px) {
	.catalogue__head { flex-direction: column; }
	.catalogue__tools { align-items: flex-start; width: 100%; padding-top: 0; }
	.catalogue__search { width: 100%; max-width: 575px; }
	.catalogue .search-panel { position: relative; top: auto; left: auto; right: auto; margin: -8px 0 24px; }
	.catalogue .tabs,
	.catalogue__chips { justify-content: flex-start; }
	.catalogue__chips { margin-top: -8px; }
	.catalogue.is-grid .catalogue__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Page Événements, 1141-1279px : titre + recherche ne tiennent pas sur une ligne (« faire » passait seul à la ligne) ;
   on empile comme en tablette : titre sur une ligne, puis recherche et onglets dessous (retour client du 03/11/2026) */
@media (min-width: 1141px) and (max-width: 1279px) {
	.catalogue--actus .catalogue__head { flex-direction: column; }
	.catalogue--actus .catalogue__tools { align-items: flex-start; width: 100%; padding-top: 0; }
	.catalogue--actus .catalogue__search { width: 100%; max-width: 575px; }
	.catalogue--actus .tabs { justify-content: flex-start; }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
	.catalogue__filters { align-items: flex-start; justify-content: space-between; width: 100%; }
	.catalogue.is-grid .catalogue__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 568px) {
	.catalogue.is-grid .catalogue__grid { grid-template-columns: minmax(0, 1fr); }
}