/* ═════════════════════════════════════════════════════════════════
   Ophtapod : page Documents (template-documents.php)
   Tailles en rem (voir la convention dans main.css) pour que le module
   d'accessibilité puisse mettre le texte à l'échelle.
   ═════════════════════════════════════════════════════════════════ */

/* Les classes partagées entre modèles (.op-eyebrow, .op-img-placeholder,
   .op-page-hero et ses variantes, .op-rule) sont définies dans main.css et
   effets.css, chargés sur toutes les pages. */

/* ── Liste des documents, par catégorie ──────────────────────────────── */

.op-doc-liste {
	background: var(--c-white);
	padding: 110px 0;
}

.op-doc-liste__separateur {
	max-width: var(--container);
	margin: 70px auto;
}

.op-doc-groupe__titre {
	margin: 0 0 40px;
	font-size: 2.1875rem;
	line-height: 1.085;
	letter-spacing: -0.01em;
	color: var(--c-navy);
}

.op-doc-grille {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
}

/* ── Carte document ────────────────────────────────────────────────────
   Une trame de points très discrète évite l'aplat gris trop plat d'une
   simple liste de fichiers. L'effet au survol joue sur la bordure et un
   léger soulèvement, jamais sur une ombre portée. */

.op-doc-carte {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 34px 30px;
	background-color: var(--c-white);
	background-image: radial-gradient(var(--c-gray-light) 1px, transparent 1px);
	background-size: 16px 16px;
	border: 1px solid var(--c-gray-light);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease;
}

.op-doc-carte:hover,
.op-doc-carte:focus-within {
	transform: translateY(-6px);
	border-color: var(--c-navy);
}

.op-doc-carte--indispo {
	border-style: dashed;
}

.op-doc-carte__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	margin-bottom: 22px;
	background: var(--c-blue-pale);
	color: var(--c-navy);
	transition: background-color 0.35s ease, color 0.35s ease;
}

.op-doc-carte:hover .op-doc-carte__icone,
.op-doc-carte:focus-within .op-doc-carte__icone {
	background: var(--c-navy);
	color: var(--c-gold);
}

.op-doc-carte--indispo .op-doc-carte__icone {
	background: var(--c-blue-pale);
	color: var(--c-gray);
}

.op-doc-carte--indispo:hover .op-doc-carte__icone,
.op-doc-carte--indispo:focus-within .op-doc-carte__icone {
	background: var(--c-blue-pale);
	color: var(--c-gray);
}

.op-doc-carte__nom {
	margin: 0 0 10px;
	font-size: 1.25rem;
	line-height: 1.5rem;
	letter-spacing: -0.01em;
	color: var(--c-navy);
}

.op-doc-carte__desc {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5rem;
	color: var(--c-gray);
}

.op-doc-carte__lien {
	display: inline-block;
	margin-top: auto;
	padding-top: 18px;
	font-family: var(--font-title);
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.5rem;
	color: var(--c-gold);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.op-doc-carte__poids {
	margin-left: 8px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 0.8125rem;
	color: var(--c-gray);
	text-decoration: none;
}

.op-doc-carte__bientot {
	margin: auto 0 0;
	padding-top: 18px;
	font-family: var(--font-title);
	font-weight: 500;
	font-size: 0.9375rem;
	color: var(--c-gray);
}

/* ── Aide : le secrétariat en relais ──────────────────────────────────── */

.op-doc-aide {
	background: var(--c-navy-footer);
	padding: 90px 0;
	text-align: center;
}

.op-doc-aide__titre {
	margin: 0 auto 14px;
	max-width: 20ch;
	font-size: 2.9375rem;
	line-height: 3.125rem;
	letter-spacing: -0.01em;
	color: var(--c-offwhite);
}

.op-doc-aide__texte {
	margin: 0 auto 30px;
	max-width: 56ch;
	font-size: 1rem;
	line-height: 1.625rem;
	color: var(--c-offwhite);
}

.op-doc-aide__btn {
	margin: 0;
}

/* ═════════════════════════════════════════════════════════════════
   Neutralisation du mouvement (soulèvement de carte)
   ═════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.op-doc-carte {
		transition: border-color 0.3s ease;
	}
	.op-doc-carte:hover,
	.op-doc-carte:focus-within {
		transform: none;
	}
}

html.op-a11y-reduire-anim .op-doc-carte:hover,
html.op-a11y-reduire-anim .op-doc-carte:focus-within {
	transform: none;
}

/* ═════════════════════════════════════════════════════════════════
   Responsive
   ═════════════════════════════════════════════════════════════════ */

@media (max-width: 1279px) {
	.op-doc-liste {
		padding: 80px 0;
	}
	.op-doc-liste__separateur {
		margin: 50px auto;
	}
	.op-doc-groupe__titre {
		margin-bottom: 30px;
	}
	.op-doc-aide {
		padding: 70px 0;
	}
}

@media (max-width: 767px) {
	.op-doc-liste {
		padding: 60px 0;
	}
	.op-doc-liste__separateur {
		margin: 40px auto;
	}
	.op-doc-groupe__titre {
		font-size: 1.6875rem;
		margin-bottom: 24px;
	}
	.op-doc-grille {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.op-doc-aide {
		padding: 50px 0;
	}
	.op-doc-aide__titre {
		font-size: 2.0625rem;
		line-height: 2.375rem;
	}
}