/* Liste de documents — Metaconcept Core.
   Charte metaconcept : OR #D5AE05, GRIS FONCÉ #4D4D4D. Les tokens du site
   (--c-link, --c-base) priment ; les valeurs de charte sont le repli.
   Aucune règle ne cible un sélecteur Divi : ce fichier survit au passage
   en Divi 5. */

.mc-docs {
	--mc-gold: var(--c-link, #D5AE05);
	--mc-dark: var(--c-base, #4D4D4D);
	--mc-muted: #6E757C;
	--mc-border: rgba(77, 77, 77, 0.14);
	--mc-ease: 0.2s ease;
}

/* ------------------------------------------------------------------
   Recherche et filtres
   ------------------------------------------------------------------ */

.mc-docs__tools {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	margin-bottom: 26px;
}

.mc-docs__search {
	position: relative;
	flex: 0 1 320px;
}

.mc-docs__q {
	width: 100%;
	padding: 11px 16px;
	border: 1px solid var(--mc-border);
	border-radius: 100px;
	font-family: inherit;
	font-size: 14px;
	color: var(--mc-dark);
	background: #fff;
	transition: border-color var(--mc-ease);
}

.mc-docs__q:focus {
	outline: none;
	border-color: var(--mc-gold);
}

.mc-docs__chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.mc-docs__chip {
	padding: 8px 16px;
	border: 1px solid var(--mc-border);
	border-radius: 100px;
	background: #fff;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--mc-muted);
	cursor: pointer;
	transition: color var(--mc-ease), border-color var(--mc-ease), background var(--mc-ease);
}

.mc-docs__chip:hover {
	border-color: var(--mc-gold);
	color: var(--mc-dark);
}

.mc-docs__chip.is-on {
	background: var(--mc-gold);
	border-color: var(--mc-gold);
	color: #fff;
}

.mc-docs__chip:focus-visible {
	outline: 2px solid var(--mc-gold);
	outline-offset: 2px;
}

.mc-docs__count {
	margin: 0 0 0 auto;
	font-size: 13px;
	color: var(--mc-muted);
}

/* ------------------------------------------------------------------
   La liste
   ------------------------------------------------------------------ */

.mc-docs__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mc-docs__item {
	background: #fff;
	border: 1px solid var(--mc-border);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color var(--mc-ease), box-shadow var(--mc-ease);
}

.mc-docs__item:hover {
	border-color: rgba(213, 174, 5, 0.45);
}

.mc-docs__item.is-open {
	border-color: var(--mc-gold);
	box-shadow: 0 8px 22px rgba(213, 174, 5, 0.12);
}

.mc-docs__head {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px 22px;
}

/* Une pastille par type, tous en gris : le sens vient du mot, pas de la
   couleur — indispensable pour qui ne distingue pas les teintes. */
/* La pastille a quitté la rangée pour le corps, au-dessus du titre :
   elle n'est donc plus un élément flex et n'a plus à se caler elle-même.
   inline-block pour qu'elle garde la largeur de son mot. */
.mc-docs__tag {
	display: inline-block;
	margin-bottom: 8px;
	padding: 4px 11px;
	border-radius: 6px;
	background: rgba(77, 77, 77, 0.06);
	border: 1px solid var(--mc-border);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--mc-muted);
	white-space: nowrap;
}

.mc-docs__body {
	flex: 1;
	min-width: 0;
}

.mc-docs__title {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--mc-dark);
}

.mc-docs__resume {
	margin: 0 0 4px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--mc-muted);
}

.mc-docs__meta {
	margin: 0;
	font-size: 11.5px;
	color: var(--mc-muted);
	opacity: 0.8;
}

.mc-docs__action {
	flex: 0 0 auto;
}

.mc-docs__dl,
.mc-docs__open {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border-radius: 100px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--mc-ease), color var(--mc-ease), border-color var(--mc-ease);
	text-decoration: none;
	white-space: nowrap;
}

/* Accès libre : bouton plein, c'est l'action la plus directe. */
.mc-docs__dl {
	background: var(--mc-action, #D87A00);
	border: 1.5px solid var(--mc-gold);
	color: #fff;
}

.mc-docs__dl:hover,
.mc-docs__dl:focus-visible {
	background: var(--mc-action-hover, #B86A00);
	border-color: var(--mc-action-hover, #B86A00);
	color: #fff;
}

/* Derrière formulaire : bouton contour, pour dire qu'une étape suit. */
.mc-docs__open {
	background: #fff;
	border: 1.5px solid var(--mc-dark);
	color: var(--mc-dark);
}

.mc-docs__open:hover,
.mc-docs__open[aria-expanded="true"] {
	border-color: var(--mc-gold);
	color: #B8940A;
}

.mc-docs__dl:focus-visible,
.mc-docs__open:focus-visible {
	outline: 2px solid var(--mc-gold);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------
   Le formulaire déplié
   ------------------------------------------------------------------ */

.mc-docs__panel {
	padding: 22px;
	border-top: 1px solid var(--mc-border);
	background: #FAFAFA;
}

.mc-docs__intro {
	margin: 0 0 16px;
	font-size: 13.5px;
	color: var(--mc-muted);
}

.mc-docs__empty,
.mc-docs__none {
	margin: 0;
	padding: 34px 0;
	text-align: center;
	font-size: 14px;
	color: var(--mc-muted);
}

/* ------------------------------------------------------------------
   Lien direct posé seul par [mc_document_form public="1"]
   ------------------------------------------------------------------ */

.mc-document-direct {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0;
}

.mc-document-direct__link {
	display: inline-flex;
	align-items: center;
	padding: 10px 20px;
	border-radius: 100px;
	background: var(--mc-action, #D87A00);
	color: #fff;
	font-weight: 600;
	font-size: 13.5px;
	text-decoration: none;
	transition: background 0.2s ease;
}

.mc-document-direct__link:hover {
	background: var(--mc-action-hover, #B86A00);
	color: #fff;
}

.mc-document-direct__title {
	font-size: 13px;
	color: #6E757C;
}

/* ------------------------------------------------------------------
   [mc_document_form repli="1"] — le formulaire seul, replié
   ------------------------------------------------------------------ */

.mc-dl {
	--mc-gold: var(--c-link, #D5AE05);
	--mc-dark: var(--c-base, #4D4D4D);
	--mc-muted: #6E757C;
	--mc-border: rgba(77, 77, 77, 0.14);
}

.mc-dl__open {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 26px;
	border: 1.5px solid var(--mc-dark);
	border-radius: 100px;
	background: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--mc-dark);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.mc-dl__open:hover,
.mc-dl__open[aria-expanded="true"] {
	border-color: var(--mc-gold);
	color: #B8940A;
}

.mc-dl__open:focus-visible {
	outline: 2px solid var(--mc-gold);
	outline-offset: 2px;
}

/* Le panneau est encadré : sans bordure, le formulaire se confond avec
   la fiche produit et on ne voit pas qu'il vient de s'ouvrir. */
.mc-dl__panel {
	margin-top: 18px;
	padding: 24px;
	border: 1px solid var(--mc-border);
	border-radius: 12px;
	background: #FAFAFA;
}

.mc-dl.is-open .mc-dl__panel {
	border-color: rgba(213, 174, 5, 0.45);
}

.mc-dl__intro {
	margin: 0 0 18px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--mc-muted);
}

/* Le bouton d'envoi reprend l'or de la charte. Portée limitée au
   panneau : les autres formulaires CF7 du site gardent leur style. */
.mc-dl__panel .wpcf7-submit,
.mc-docs__panel .wpcf7-submit {
	background: var(--mc-action, #D87A00);
	border: 1.5px solid var(--mc-action, #D87A00);
	border-radius: 100px;
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 13px 30px;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.mc-dl__panel .wpcf7-submit:hover,
.mc-docs__panel .wpcf7-submit:hover {
	background: var(--mc-action-hover, #B86A00);
	border-color: var(--mc-action-hover, #B86A00);
}

/* ------------------------------------------------------------------
   Petit écran
   ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.mc-docs__head {
		flex-wrap: wrap;
		gap: 12px;
		padding: 16px;
	}

	.mc-docs__action {
		width: 100%;
	}

	.mc-docs__dl,
	.mc-docs__open {
		width: 100%;
		justify-content: center;
	}

	.mc-docs__count {
		margin-left: 0;
	}

	.mc-docs__search {
		flex: 1 1 100%;
	}

	.mc-dl__open {
		width: 100%;
		justify-content: center;
	}

	.mc-dl__panel {
		padding: 18px 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mc-docs__item,
	.mc-docs__chip,
	.mc-docs__dl,
	.mc-docs__open,
	.mc-dl__open,
	.mc-dl__panel .wpcf7-submit,
	.mc-document-direct__link {
		transition: none;
	}
}

/* ------------------------------------------------------------------
   LA VIGNETTE DU DOCUMENT
   ------------------------------------------------------------------
   L'aperçu de la première page, que WordPress fabrique au dépôt du PDF.
   Il montre le document ; une icône générique ne montrerait que le
   format, que la pastille de type dit déjà.

   TAILLE FIXE ET object-fit:cover : les PDF n'ont pas tous le même
   rapport — A4 portrait, plaquette paysage, certificat carré. Sans
   contrainte, une rangée de cartes prendrait la hauteur du plus grand.
   On recadre par le haut, parce que c'est là qu'un document met son
   titre.

   .mc-docs__head est une rangée : la vignette s'y pose en premier
   élément, à gauche de la pastille de type, et ne se laisse ni étirer
   ni comprimer.

   La carte reste entière sans elle : un document sans aperçu n'a pas
   d'image dans son balisage, et rien ne réserve de place vide. */

.mc-docs__vignette {
	display: block;
	flex: 0 0 auto;
	width: 96px;
	height: 128px;
	object-fit: cover;
	object-position: top center;
	align-self: flex-start;
	border: 1px solid var(--mc-bord, #ECECEC);
	border-radius: 6px;
	background: #FFFFFF;
}

@media (max-width: 640px) {

	.mc-docs__vignette {
		width: 68px;
		height: 90px;
	}
}

/* ------------------------------------------------------------------
   CE QUI EST MARQUÉ CACHÉ DOIT DISPARAÎTRE
   ------------------------------------------------------------------
   Le script filtre en posant l'attribut hidden sur les documents qui ne
   correspondent pas. hidden vaut display:none — mais dans la feuille du
   NAVIGATEUR, la plus faible de toutes. N'importe quelle règle de thème
   qui donne un display à un <article> passe devant, et l'attribut ne
   fait plus rien.

   Mesuré le 05/10 sur /telechargement-public/ : un clic sur
   « Certification » marquait bien 73 documents en hidden et le compteur
   affichait « 9 documents » — pendant que les 82 restaient à l'écran.
   Le filtre fonctionnait ; c'est l'effacement qui ne suivait pas.

   La règle ne cible pas [hidden] en général : seulement les trois
   éléments que notre script manipule. Un hidden posé par Divi ou par une
   extension sur autre chose ne nous regarde pas. */

.mc-docs__item[hidden],
.mc-docs__panel[hidden],
.mc-docs__none[hidden] {
	display: none;
}