/**
 * Section — Modèles de document (accueil).
 *
 * Cartes alimentées par le CPT « modele_document ». Même mise en page que la
 * section originale (rail de cartes à icône).
 *
 * Géométrie relevée sur la maquette (cadre de 1920 px), section 2881 → 4372 :
 *   forme sombre  gauche −600, largeur 1840 (courbe du hero, retournée)
 *   suptitre      y 229   titre y 278   intro y 404
 *   cartes        y 704, 426 × 492, écart 70, première à x 207
 */

.documents {
	position: relative;
	background-color: var(--anidjar-fond);
	padding-block: clamp(3rem, 11.927vw, 229px) clamp(3rem, 15.365vw, 295px);

	/* La forme déborde à gauche ; on coupe l'axe horizontal seulement. */
	overflow-x: clip;
	overflow-y: visible;
}

/* ---------------------------------------------------------------------------
 * Forme sombre — la courbe du hero, retournée
 * ------------------------------------------------------------------------ */

.documents__decor {
	position: absolute;
	top: 0;
	left: -31.25vw; /* −600 / 1920 */
	z-index: 0;
	width: 95.8333vw; /* 1840 / 1920 */
	aspect-ratio: 2102 / 1221; /* ratio d'origine : la courbe n'est pas étirée */
	pointer-events: none;
}

.documents__decor-svg {
	display: block;
	width: 100%;
	height: 100%;

	/* Le seul écart avec le hero : un miroir horizontal. La forme reste
	   strictement la même, l'image du drapé se retourne avec elle. */
	transform: scaleX(-1);
}

/* ---------------------------------------------------------------------------
 * En-tête
 * ------------------------------------------------------------------------ */

.documents__header {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	max-width: var(--anidjar-contenu-max);
	margin-inline: auto;
	padding-inline: var(--anidjar-gouttiere);
	text-align: center;
}

.documents__eyebrow {
	margin: 0;
	color: var(--anidjar-texte-accent);
	font-size: var(--anidjar-fs-sm);
	line-height: normal;
	letter-spacing: var(--anidjar-interlettre-capitales);
	text-transform: uppercase;

	/* compense l'espace ajoutée après la dernière lettre par l'interlettrage */
	margin-right: calc(-1 * var(--anidjar-interlettre-capitales));
}

.documents__title {
	margin: var(--anidjar-espace-md) auto 0;
	max-width: 372px;
	font-size: var(--anidjar-fs-lg);
}

.documents__intro {
	margin: var(--anidjar-espace-lg) auto 0;
	max-width: 438px;
}

.documents__intro p {
	margin: 0;
	font-size: var(--anidjar-fs-sm);
	line-height: var(--anidjar-interligne-texte);
}

/* Bouton vers l'archive : centré par le text-align de l'en-tête. */
.documents__cta {
	margin: var(--anidjar-espace-lg) 0 0;
}

/* ---------------------------------------------------------------------------
 * Rail de cartes — défilement horizontal, la dernière carte est coupée
 * ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
 * Carrousel : flèches centrées au-dessus + rail défilant
 * ------------------------------------------------------------------------ */

.documents__carousel {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	max-width: 1712px;
	margin-inline: auto;
	margin-top: clamp(2rem, 8.073vw, 155px);
	padding-inline: var(--anidjar-gouttiere);
}

.documents__nav {
	display: flex;
	justify-content: center;
	gap: var(--anidjar-espace-sm);
	margin-bottom: var(--anidjar-espace-lg);
}

.documents__nav[hidden] {
	display: none;
}

.documents__arrow {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--anidjar-ivoire);
	color: var(--anidjar-brun);
	box-shadow: var(--anidjar-ombre-carte);
	cursor: pointer;
	transition: background-image var(--anidjar-transition), color var(--anidjar-transition),
		transform var(--anidjar-transition), opacity var(--anidjar-transition);
}

.documents__arrow svg {
	display: block;
	width: 18px;
	height: auto;
}

/* hello-elementor/Elementor peignent le fond des <button> en framboise au
   survol, au focus et au clic : on neutralise TOUS les états, y compris quand
   la flèche est désactivée. */
.documents__arrow:hover,
.documents__arrow:focus,
.documents__arrow:focus-visible,
.documents__arrow:active,
.documents__arrow:disabled,
.documents__arrow:disabled:hover {
	background-color: var(--anidjar-ivoire);
	background-image: none;
	color: var(--anidjar-brun);
}

/* État actif (flèche utilisable) : pastille dorée. Plus spécifique que les
   neutralisations ci-dessus, donc elle l'emporte. */
.documents__arrow:hover:not(:disabled),
.documents__arrow:focus-visible:not(:disabled) {
	background-color: var(--anidjar-ivoire);
	background-image: var(--anidjar-degrade-or);
	color: var(--anidjar-texte-sur-or);
	transform: translateY(-2px);
}

.documents__arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

.documents__arrow:focus-visible {
	outline: 2px solid var(--anidjar-brun);
	outline-offset: 3px;
}

.documents__rail {
	display: flex;
	gap: clamp(1.5rem, 3.6458vw, 70px); /* 70 / 1920, plafonné */
	/* Les 20px de padding vertical laissent respirer l'ombre des cartes ; on les
	   reprend en marge négative pour ne pas gonfler la section. */
	margin: 0 0 -20px;
	padding: 20px 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	scroll-padding-inline: 0;
}

.documents__rail::-webkit-scrollbar {
	display: none;
}

.documents__item {
	/* Plafonnée : sans le max, la carte enflait indéfiniment sur grand écran. */
	flex: 0 0 clamp(260px, 22.1875vw, 426px); /* 426 / 1920 */
	scroll-snap-align: start;
}

.document-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	/* Plancher plafonné : les cartes s'égalisent de toute façon (flex stretch),
	   sans s'étirer démesurément sur grand écran. */
	min-height: min(25.625vw, 420px); /* 492 / 1920 */
	height: 100%;
	padding: 37px 56px 35px;
	border-radius: var(--anidjar-rayon-carte);
	background-color: var(--anidjar-surface-carte-opaque);
	box-shadow: var(--anidjar-ombre-carte);
	color: var(--anidjar-texte);
	text-align: center;
	text-decoration: none;
	transition: transform var(--anidjar-transition), box-shadow var(--anidjar-transition);
}

.document-card:hover {
	transform: translateY(-4px);
	color: var(--anidjar-texte); /* hello-elementor forcerait #336 */
}

.document-card:focus-visible {
	outline: 2px solid var(--anidjar-brun);
	outline-offset: 3px;
}

.document-card__icon {
	display: block;
	width: 94px;
	height: 94px;
	flex: 0 0 auto;
}

.document-card__icon-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.document-card__title {
	margin-top: 28px;
	font-family: var(--anidjar-police-titre);
	font-size: 1.5rem; /* 24px */
	font-weight: var(--anidjar-graisse-titre);
	line-height: var(--anidjar-interligne-titre);
}

.document-card__excerpt {
	margin-top: 21px;
	font-size: var(--anidjar-fs-sm);
	line-height: var(--anidjar-interligne-texte);
}

.document-card__link {
	margin-top: auto;
	padding-top: 25px;
	color: var(--anidjar-texte-accent);
	font-size: var(--anidjar-fs-xs);
	letter-spacing: var(--anidjar-interlettre-capitales);
	text-transform: uppercase;
	margin-right: calc(-1 * var(--anidjar-interlettre-capitales));
}

/* ---------------------------------------------------------------------------
 * Lisibilité : en largeur réduite, la courbe sombre remonte sous le titre et
 * l'intro (texte brun foncé) qui deviennent illisibles. On éclaircit alors la
 * photo, d'autant plus que l'écran est étroit.
 * ------------------------------------------------------------------------ */

/* Mêmes paliers que le hero des catégories. */
@media (max-width: 1400px) {
	.documents__decor-svg .anidjar-masked-veil {
		opacity: 0.7;
	}
}

@media (max-width: 1100px) {
	.documents__decor-svg .anidjar-masked-veil {
		opacity: 1;
	}
}

/* ---------------------------------------------------------------------------
 * Mobile et tablette
 * ------------------------------------------------------------------------ */

@media (max-width: 900px) {

	/* Voile uniforme et franc : en pleine largeur le texte couvre toute la forme. */
	.documents__decor-svg .anidjar-masked-veil {
		opacity: 0.8;
	}

	.documents__decor {
		left: -40vw;
		width: 160vw;
	}

	.documents__rail {
		gap: var(--anidjar-espace-md);
		padding-inline: 0; /* la gouttière est portée par .documents__carousel */
	}

	.documents__item {
		flex: 0 0 min(82vw, 340px);
	}

	.documents__arrow {
		width: 44px;
		height: 44px;
	}

	.document-card {
		min-height: 0;
		padding: var(--anidjar-espace-lg) var(--anidjar-espace-md);
	}
}

@media (prefers-reduced-motion: reduce) {
	.document-card {
		transition: none;
	}

	.document-card:hover {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * Archive — grille de tuiles (mêmes cartes que l'accueil)
 * ------------------------------------------------------------------------ */

.documents-archive {
	box-sizing: border-box;
	max-width: var(--anidjar-contenu-max);
	margin-inline: auto;
	padding: clamp(2rem, 4vw, 77px) var(--anidjar-gouttiere) clamp(3rem, 6vw, 116px);
}

.documents-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: clamp(1.5rem, 2vw, 40px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.documents-grid__item {
	display: flex; /* la carte remplit toute la hauteur de la cellule */
}

.documents-grid .document-card {
	width: 100%;
	height: 100%;
	min-height: 0; /* le rail impose 25vw ; en grille les cartes s'égalisent par ligne */
	padding: var(--anidjar-espace-xl) var(--anidjar-espace-lg);
}

/* Archive des articles : trois tuiles par ligne, alors que les modèles de
   document remplissent l'espace disponible (auto-fill). Les cartes n'ayant plus
   de visuel, une colonne de plus les rendrait trop étroites pour leur titre. */
.articles-archive .documents-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
	.articles-archive .documents-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.articles-archive .documents-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.documents-archive__empty {
	margin: 0;
	text-align: center;
	font-size: var(--anidjar-fs-sm);
}

/* Pagination de l'archive : réutilise le style des pastilles des articles. */
.documents-archive .pagination,
.documents-archive .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: clamp(2.5rem, 4vw, 58px);
}

.documents-archive .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 12px;
	background-color: var(--anidjar-ivoire);
	color: var(--anidjar-texte);
	font-family: var(--anidjar-police-texte);
	font-size: var(--anidjar-fs-sm);
	text-decoration: none;
	transition: background-color var(--anidjar-transition), color var(--anidjar-transition);
}

.documents-archive .page-numbers.current {
	background-color: var(--anidjar-creme);
}

.documents-archive a.page-numbers:hover {
	background-color: var(--anidjar-fond-sombre);
	color: var(--anidjar-texte-inverse);
}