/* ==========================================================================
   Bloc enf/ressources-grid — la bibliothèque des membres
   --------------------------------------------------------------------------
   Ces règles servent aussi à la fiche d'une ressource et à l'écran de
   connexion : la feuille est donc demandée explicitement par inc/enqueue.php
   sur ces pages, plutôt que dupliquée ailleurs.
   ========================================================================== */

.enf-ressources__head {
	margin-bottom: var(--enf-space-6);
}

.enf-ressources__head > * + * {
	margin-top: var(--enf-space-3);
}

.enf-ressources__filtres {
	display: flex;
	flex-direction: column;
	gap: var(--enf-space-3);
	margin-bottom: var(--enf-space-7);
}

/* --------------------------------------------------------------------------
   Le cadenas
   --------------------------------------------------------------------------
   Il s'affiche même pour un membre connecté : il doit voir ce que son
   adhésion lui ouvre. L'emoji est décoratif, le mot « Membres » porte
   l'information — un pictogramme seul ne se lit pas à voix haute.
   -------------------------------------------------------------------------- */

.enf-tag--verrou {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: 6px;
	background-color: var(--enf-orange-soft-solid);
	color: var(--enf-orange);
}

.enf-card--ressource .enf-card__body {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* --------------------------------------------------------------------------
   Fiche d'une ressource
   -------------------------------------------------------------------------- */

.enf-ressource__sujets {
	display: flex;
	flex-wrap: wrap;
	gap: var(--enf-space-2);
	margin: 0;
}

.enf-ressource__sujets .enf-tag {
	text-decoration: none;
}

.enf-ressource__statut {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--enf-orange);
	font-size: var(--enf-fs-small);
	font-weight: var(--enf-fw-bold);
}

/* Cadre vidéo : un ratio fixe, pour que la page ne saute pas au chargement
   de l'iframe. */
.enf-ressource__video {
	margin-bottom: var(--enf-space-7);
	border-radius: var(--enf-radius);
	overflow: hidden;
	background-color: var(--enf-navy-deep);
	aspect-ratio: 16 / 9;
}

.enf-ressource__video iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.enf-ressource__fichier {
	margin-top: var(--enf-space-6);
}

/* --------------------------------------------------------------------------
   La carte de verrouillage
   --------------------------------------------------------------------------
   Elle vient après le teaser et doit se lire comme la suite du texte, pas
   comme une publicité posée à côté : d'où le filet orange qui la rattache au
   paragraphe qui précède.
   -------------------------------------------------------------------------- */

.enf-verrou {
	margin-top: var(--enf-space-7);
	border-top: 3px solid var(--enf-orange);
}

.enf-verrou__actions {
	margin-top: var(--enf-space-5);
}

.enf-encart__mention {
	margin-top: var(--enf-space-4);
	color: var(--enf-muted);
	font-size: var(--enf-fs-small);
}

.enf-membre__contact {
	margin: var(--enf-space-2) 0 0;
	font-size: var(--enf-fs-small);
	overflow-wrap: anywhere;
}

.enf-membre__tel {
	display: block;
	color: var(--enf-muted);
}

/* --------------------------------------------------------------------------
   Écran de connexion
   -------------------------------------------------------------------------- */

.enf-connexion__carte {
	max-width: 30rem;
	margin-inline: auto;
	padding: var(--enf-space-7);
	border: 1px solid var(--enf-line);
	border-radius: var(--enf-radius);
	background-color: var(--enf-bg);
}

.enf-connexion__carte h1 {
	margin: 0 0 var(--enf-space-5);
	font-size: var(--enf-fs-h3);
}

.enf-connexion__carte .login-username,
.enf-connexion__carte .login-password {
	margin-bottom: var(--enf-space-4);
}

.enf-connexion__carte label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--enf-fs-small);
	font-weight: var(--enf-fw-bold);
	color: var(--enf-ink);
}

.enf-connexion__carte input[type="text"],
.enf-connexion__carte input[type="password"] {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--enf-line);
	border-radius: var(--enf-radius-sm);
	background-color: var(--enf-bg);
	color: var(--enf-body);
	font: inherit;
}

.enf-connexion__carte input:focus-visible {
	border-color: var(--enf-orange);
	outline: 2px solid var(--enf-orange);
	outline-offset: 1px;
}

/* Le champ mot de passe et son bouton « œil » (assets/js/mot-de-passe.js).
   L'enveloppe n'existe qu'avec le script : sans lui, le champ est seul. */
.enf-mdp {
	position: relative;
	display: block;
}

.enf-mdp input[type="password"],
.enf-mdp input[type="text"] {
	padding-right: 48px;
}

.enf-mdp__bouton {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: var(--enf-radius-sm);
	background: none;
	color: var(--enf-muted);
	cursor: pointer;
}

.enf-mdp__bouton:hover,
.enf-mdp__bouton[aria-pressed="true"] {
	color: var(--enf-ink);
}

.enf-mdp__bouton:focus-visible {
	outline: 2px solid var(--enf-orange);
	outline-offset: -3px;
}

/* La case « rester connecté » : intitulé à côté de la case, pas au-dessus. */
.enf-connexion__carte .login-remember label {
	display: flex;
	align-items: center;
	gap: var(--enf-space-2);
	font-weight: 400;
	color: var(--enf-body);
}

.enf-connexion__carte .login-remember input {
	width: 18px;
	height: 18px;
	accent-color: var(--enf-orange);
}

.enf-connexion__carte .login-submit {
	margin-top: var(--enf-space-5);
}

.enf-connexion__carte .login-submit input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 12px 24px;
	border: 0;
	border-radius: var(--enf-radius-sm);
	background-color: var(--enf-orange);
	color: var(--enf-on-dark);
	font-family: var(--enf-font-display);
	font-size: var(--enf-fs-body);
	font-weight: var(--enf-fw-bold);
	cursor: pointer;
}

.enf-connexion__carte .login-submit input[type="submit"]:hover,
.enf-connexion__carte .login-submit input[type="submit"]:focus-visible {
	background-color: var(--enf-orange-2);
}

.enf-connexion__oubli,
.enf-connexion__adhesion {
	margin: var(--enf-space-4) 0 0;
	font-size: var(--enf-fs-small);
	color: var(--enf-body);
}

@media (min-width: 920px) {
	.enf-ressources__filtres {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}
}