/**
 * Grille + fiche des actualités/recrutement — composant partagé par tous
 * les sites du réseau (contenu servi depuis le hub caché, voir
 * class-nc-repository.php). Palette pilotée par les variables --ebnc-*
 * définies sur .ebrioo-nc-scope : valeurs par défaut ici (charte Ebrioo),
 * surchargées par network-content-digit.css — même principe que
 * forms.css/forms-digit.css et formations.css/formations-digit.css.
 */
.ebrioo-nc-scope {
	--ebnc-accent: #E5239C;      /* Rose Magenta — liens, "lire la suite" */
	--ebnc-accent-hover: #A31770;
	--ebnc-muted: #829696;       /* Gris vert — date, texte secondaire */
	--ebnc-ink: #323532;         /* Gris foncé — titres */
	--ebnc-border: #C3C8CC;
	--ebnc-placeholder-from: #E5239C;  /* Dégradé de secours (article sans photo) */
	--ebnc-placeholder-to: #501E96;
	/* Titres d'article : deux teintes de la charte plutot qu'un gris uniforme.
	   Un article se parcourt d'abord des yeux, de titre en titre — la couleur
	   y sert de repere, pas de decoration. */
	--ebnc-titre: #501E96;         /* Violet Infini — h1 et h3 */
	--ebnc-titre-section: #A31770; /* Prune — h2, la coupure de section */
	--ebnc-citation: #46B5AA;      /* Turquoise — filet des citations */
	--ebnc-carte: #FEFEFE;
}

.ebrioo-nc-empty { text-align: center; color: var(--ebnc-muted); }

/* --- Grille --- */
.ebrioo-nc-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1.75rem;
}
.ebrioo-nc-card {
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(50, 53, 50, .08);
	transition: transform .18s ease, box-shadow .18s ease;
}
.ebrioo-nc-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(50, 53, 50, .13); }
.ebrioo-nc-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.ebrioo-nc-card__image {
	aspect-ratio: 16 / 9;
	background-size: cover;
	background-position: center;
	background-color: var(--ebnc-border);
}
/* Article publié sans image mise en avant : dégradé de marque plutôt qu'un
   bloc vide/gris, pour que la grille reste homogène quel que soit le cas. */
.ebrioo-nc-card__image--placeholder {
	background-image: linear-gradient(135deg, var(--ebnc-placeholder-from) 0%, var(--ebnc-placeholder-to) 100%);
}
.ebrioo-nc-card__body { display: flex; flex-direction: column; padding: 1.25rem 1.35rem 1.5rem; flex: 1; }
.ebrioo-nc-card__date { font-size: .82rem; color: var(--ebnc-muted); }
.ebrioo-nc-card__title { font-weight: 700; font-size: 1.1rem; line-height: 1.3; color: var(--ebnc-ink); margin: .3rem 0 .5rem; }
.ebrioo-nc-card__link:hover .ebrioo-nc-card__title { color: var(--ebnc-accent); }
.ebrioo-nc-card__excerpt { font-size: .93rem; line-height: 1.55; color: #4a4d4a; margin-bottom: .75rem; }
.ebrioo-nc-card__more { margin-top: auto; font-weight: 700; font-size: .9rem; color: var(--ebnc-accent); }
.ebrioo-nc-card__link:hover .ebrioo-nc-card__more { color: var(--ebnc-accent-hover); }

/* --- Pagination --- */
.ebrioo-nc-pagination { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 2.5rem; font-weight: 700; }
.ebrioo-nc-pagination a { color: var(--ebnc-accent); text-decoration: none; }
.ebrioo-nc-pagination a:hover { color: var(--ebnc-accent-hover); }
.ebrioo-nc-pagination__current { color: var(--ebnc-muted); font-weight: 400; font-size: .9rem; }

/* --- Fiche : l'article comme un document posé sur la page ---------------
   Refonte du 2026-08-25, d'après les maquettes HTML fournies par JP. Ce qui
   les rend agréables n'est pas leur largeur mais trois choses : l'article est
   posé sur une CARTE blanche avec de vraies marges intérieures, les titres
   sont COLORÉS et servent de repères de parcours, et les respirations sont
   généreuses. Une bande de texte pleine largeur sur fond clair, même bien
   composée, se lit comme un document administratif.

   La largeur reste alignée sur l'en-tête — 1280 px, du logo au bouton de
   contact. C'est la carte qui crée la mesure de lecture confortable, par ses
   marges intérieures, sans rétrécir le bloc. */
.ebrioo-nc-single {
	--ebnc-mesure: 100%;
	--ebnc-large: 100%;
	/* Cette valeur est posée ICI, sur l'élément, et non laissée au parent : la
	   règle de mise en page du cœur `.wp-container-XXX > :where(:not(.alignfull))`
	   a la même spécificité que `.ebrioo-nc-single` — `:where()` ne compte pour
	   rien — et cette feuille est chargée après. Un `max-width` posé ici gagne
	   donc toujours ; un `max-width: none` y annulait silencieusement le
	   plafond du parent, ce qui a coûté trois correctifs le 2026-08-25. */
	max-width: 1280px;
	margin-inline: auto;
	/* Composition resserree, demandee le 2026-08-25 : l'article etait juge
	   difficilement lisible — texte trop gros, interligne trop lache, titres
	   trop imposants. Corps a 15,5 px et interligne a 1,6 : le texte se lit
	   en continu au lieu de se disperser. */
	font-size: .97rem;
	line-height: 1.6;
	color: #43474a;
}
.ebrioo-nc-single__back { margin: 0 0 1.1rem; font-size: .95rem; }
.ebrioo-nc-single__back a { color: var(--ebnc-accent); text-decoration: none; font-weight: 700; }
.ebrioo-nc-single__back a:hover { color: var(--ebnc-accent-hover); }

/* Avancement de lecture : un filet fin en haut de l'écran, aux couleurs de la
   marque. Sur un guide de plusieurs milliers de mots, il répond à la seule
   question du lecteur qui arrive : combien il m'en reste. */
.ebrioo-nc-progres {
	position: fixed; inset: 0 0 auto; height: 4px; z-index: 30;
	background: transparent; pointer-events: none;
}
.ebrioo-nc-progres > span {
	display: block; height: 100%; width: 100%;
	transform: scaleX(0); transform-origin: left;
	background: linear-gradient(90deg, var(--ebnc-citation), var(--ebnc-accent));
	transition: transform .1s linear;
}

/* La carte : c'est elle qui fait la différence à l'œil. */
.ebrioo-nc-single__carte {
	display: block;
	background: var(--ebnc-carte);
	border-radius: 18px;
	box-shadow: 0 16px 50px rgba(50, 53, 50, .09);
	padding: clamp(1.4rem, 2.4vw, 2.4rem) clamp(1.2rem, 3vw, 3rem) clamp(1.6rem, 2.6vw, 2.6rem);
}

.ebrioo-nc-single__image {
	aspect-ratio: 21 / 9;
	max-height: 17rem;
	background-size: cover;
	background-position: center;
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba(50, 53, 50, .1);
	margin-bottom: 1.5rem;
}
.ebrioo-nc-single__date {
	font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--ebnc-muted); margin: 0 0 .5rem;
}
.ebrioo-nc-single__title {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 700; line-height: 1.18; letter-spacing: -.02em;
	color: var(--ebnc-titre); margin: 0 0 1.2rem;
	text-wrap: balance;
}

.ebrioo-nc-single__content { overflow-wrap: break-word; }
.ebrioo-nc-single__content p { margin: 0 0 .85rem; }
/* Chapô : il porte la réponse à la question du titre. */
.ebrioo-nc-single__content > p:first-of-type {
	font-size: 1.06em; line-height: 1.55; color: #3a3e3a;
	margin-bottom: 1.3rem;
}
.ebrioo-nc-single__content a {
	color: var(--ebnc-accent-hover);
	text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.ebrioo-nc-single__content a:hover { color: var(--ebnc-accent); }
.ebrioo-nc-single__content strong { color: #2c2f2c; font-weight: 700; }

/* Titres : la couleur fait le repère, l'espace fait la respiration. */
.ebrioo-nc-single__content h2,
.ebrioo-nc-single__content h3,
.ebrioo-nc-single__content h4 {
	font-family: var(--wp--preset--font-family--heading, inherit);
	line-height: 1.25; text-wrap: balance; scroll-margin-top: 5rem;
}
.ebrioo-nc-single__content h2 {
	font-size: clamp(1.18rem, 1.5vw, 1.38rem); font-weight: 700;
	letter-spacing: -.01em; color: var(--ebnc-titre-section);
	margin: 2.1rem 0 .7rem;
}
.ebrioo-nc-single__content h3 {
	font-size: 1.02rem; font-weight: 700;
	color: var(--ebnc-titre); margin: 1.4rem 0 .45rem;
}
.ebrioo-nc-single__content h4 {
	font-size: .84rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: var(--ebnc-muted); margin: 1.3rem 0 .4rem;
}

.ebrioo-nc-single__content ul,
.ebrioo-nc-single__content ol { margin: 0 0 1rem; padding-left: 1.35rem; }
.ebrioo-nc-single__content li { margin: .22rem 0; }
.ebrioo-nc-single__content li::marker { color: var(--ebnc-citation); font-weight: 700; }

/* Citation : filet turquoise et fond en dégradé très pâle. C'est, dans les
   maquettes, ce qui sort le mieux du texte courant sans crier. */
.ebrioo-nc-single__content blockquote {
	margin: 1.5rem 0; padding: .95rem 1.2rem;
	border-left: 6px solid var(--ebnc-citation);
	border-radius: 0 12px 12px 0;
	background: linear-gradient(100deg, rgba(70, 181, 170, .12), rgba(229, 35, 156, .05));
	font-size: 1em; color: #34383a;
}
.ebrioo-nc-single__content blockquote p:last-child { margin-bottom: 0; }

.ebrioo-nc-single__content figure,
.ebrioo-nc-single__content .wp-block-image { margin: 1.6rem 0 1.9rem; }
.ebrioo-nc-single__content img {
	display: block; width: 100%; height: auto;
	border-radius: 14px; box-shadow: 0 10px 30px rgba(50, 53, 50, .11);
}
.ebrioo-nc-single__content figcaption {
	margin-top: .6rem; text-align: center;
	font-size: .82rem; line-height: 1.45; color: var(--ebnc-muted);
}
/* Filet de séparation qui s'efface aux extrémités, comme dans les maquettes. */
.ebrioo-nc-single__content hr {
	border: 0; height: 1px; margin: 2rem 0;
	background: linear-gradient(90deg, transparent, var(--ebnc-border), transparent);
}

@media (max-width: 600px) {
	/* Sur mobile la carte perd ses coins et son ombre : elle prend toute la
	   largeur, comme dans les maquettes fournies. */
	.ebrioo-nc-single__carte { border-radius: 0; box-shadow: none; padding: 1.6rem 1.15rem 2rem; }
	.ebrioo-nc-single__content h2 { margin-top: 2.5rem; }
	.ebrioo-nc-single__image { border-radius: 10px; margin-bottom: 1.5rem; max-height: 14rem; }
	.ebrioo-nc-grid { grid-template-columns: 1fr; }
}

/* ── Relecture : brouillons visibles des seuls relecteurs (P4-9) ───────────
   Le trait discontinu et l'ocre disent « pas encore en ligne » sans imiter
   une erreur : on relit un texte, on ne corrige pas une panne. */
.ebrioo-nc-card--brouillon { outline: 2px dashed #C98A00; outline-offset: 3px; }
.ebrioo-nc-etat {
	display: inline-block; margin-left: .45rem; padding: .05rem .4rem;
	border-radius: 999px; background: #FBF0DC; color: #8A5A00;
	font-size: .72rem; font-style: normal; font-weight: 700;
	letter-spacing: .04em; text-transform: uppercase;
}
.ebrioo-nc-apercu {
	margin: 0 0 1.6rem; padding: .9rem 1.1rem;
	border-left: 4px solid #C98A00; border-radius: 8px;
	background: #FBF0DC; color: #5A3C00; font-size: .92rem; line-height: 1.55;
}
