/**
 * Styles des composants NexGen Consulting.
 *
 * Traduction directe des composants validés dans la charte graphique
 * (maquettes/charte.html, section « 04 — Composants validés »).
 * Les couleurs, tailles et espacements ne sont pas réinventés ici : ce sont
 * ceux définis dans theme.json (palette et échelle typographique) ou, à
 * défaut, les valeurs exactes de la charte pour les composants qui ne
 * peuvent pas être exprimés par les réglages de blocs natifs.
 */

/* -- Identité : logo & signature ------------------------------------- */
.nx-lockup {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	background: var(--wp--preset--color--navy);
	border-radius: var(--wp--custom--radius--lg);
	padding: 2.25rem 2.5rem;
}
.nx-mark {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	height: 34px;
}
.nx-mark span {
	display: block;
	width: 9px;
	background: var(--wp--preset--color--corail);
	border-radius: 2px 2px 0 0;
}
.nx-mark span:nth-child(1) { height: 40%; }
.nx-mark span:nth-child(2) { height: 68%; }
.nx-mark span:nth-child(3) { height: 100%; }
.nx-wordmark {
	font-family: "Space Grotesk", sans-serif;
	font-weight: 700;
	font-size: 1.9rem;
	color: var(--wp--preset--color--blanc);
	line-height: 1;
}
.nx-wordmark small {
	display: block;
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 0.68rem;
	letter-spacing: 0.28em;
	color: var(--wp--preset--color--corail-clair);
	margin-top: 0.4rem;
}
.nx-tagline {
	color: var(--wp--preset--color--gris-texte);
	font-size: 0.95rem;
	font-style: italic;
}

/* -- En-tête ----------------------------------------------------------- */
.nx-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.1rem 1.75rem;
	background: var(--wp--preset--color--blanc);
	border-bottom: 1px solid var(--wp--preset--color--ligne);
}
.nx-header .nx-lockup-sm {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.nx-header .nx-mark-sm {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 18px;
}
.nx-header .nx-mark-sm span {
	display: block;
	width: 5px;
	background: var(--wp--preset--color--corail);
	border-radius: 1px;
}
.nx-header .nx-mark-sm span:nth-child(1) { height: 40%; }
.nx-header .nx-mark-sm span:nth-child(2) { height: 68%; }
.nx-header .nx-mark-sm span:nth-child(3) { height: 100%; }
.nx-header .nx-wordmark-sm {
	font-family: "Space Grotesk", sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--wp--preset--color--navy);
}

/* -- Surface foncée (fond des composants sur navy) --------------------- */
.nx-dark-surface {
	background: var(--wp--preset--color--navy);
	padding: 1.75rem;
	border-radius: var(--wp--custom--radius--lg);
}

/* -- Carte consultant ---------------------------------------------------- */
.nx-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.25rem;
}
.nx-card {
	border: 1px solid var(--wp--preset--color--ligne);
	border-radius: var(--wp--custom--radius--lg);
	padding: 1.5rem;
	background: var(--wp--preset--color--creme);
	cursor: pointer;
	transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.nx-card:hover {
	border-color: var(--wp--preset--color--corail);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(11, 31, 59, 0.1);
}
.nx-card .nx-card-name {
	font-weight: 700;
	font-size: 1rem;
	color: var(--wp--preset--color--navy);
	margin-bottom: 0;
}
.nx-card .nx-card-role {
	font-size: 0.82rem;
	color: var(--wp--preset--color--gris-texte);
	margin-bottom: 0.6rem;
	margin-top: 0rem;
}
.nx-card .nx-card-bio {
	font-size: 0.85rem;
	color: var(--wp--preset--color--gris-texte);
	line-height: 1.5;
}

/* -- Avatar -------------------------------------------------------------- */
.nx-avatar,
.nx-avatar-lg {
	border-radius: 50%;
	background: var(--wp--preset--color--navy);
	border: 2px solid var(--wp--preset--color--corail);
	color: var(--wp--preset--color--blanc);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Space Grotesk", sans-serif;
	font-weight: 700;
	flex-shrink: 0;
}
.nx-avatar {
	width: 48px;
	height: 48px;
	font-size: 1rem;
	margin-bottom: 1rem;
}
.nx-avatar-lg {
	width: 76px;
	height: 76px;
	font-size: 1.5rem;
	border-width: 3px;
}

/* -- Pastille (pôle / statut) --------------------------------------------- */
.nx-tag {
	display: inline-block;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--corail-clair);
	border-radius: var(--wp--custom--radius--pilule);
	padding: 0.25rem 0.65rem;
}

/* -- Bouton retour --------------------------------------------------------- */
.nx-back-link {
	display: inline-block;
	color: #8D96AC;
	font-size: 0.85rem;
	text-decoration: none;
}
.nx-back-link:hover {
	color: #B9C2D6;
}

/* -- Filtre par pôle --------------------------------------------------------- */
.nx-filter-bar {
	display: inline-flex;
	background: var(--wp--preset--color--blanc);
	border-radius: var(--wp--custom--radius--pilule);
	padding: 0.65rem;
}
.nx-filter-group {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
}
.nx-filter {
	display: inline-flex;
	align-items: center;
	padding: 0.6rem 1.2rem;
	border-radius: var(--wp--custom--radius--pilule);
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 0.85rem;
	border: 1.5px solid var(--wp--preset--color--ligne);
	color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--blanc);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.nx-filter:hover {
	border-color: var(--wp--preset--color--corail);
}
.nx-filter.is-active {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--blanc);
	border-color: var(--wp--preset--color--navy);
}
.nx-filter.is-active:hover {
	border-color: var(--wp--preset--color--navy);
}

/* -- Panneau (conteneur générique) -------------------------------------------- */
.nx-panel-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.25rem;
}
.nx-panel {
	border: 1px solid var(--wp--preset--color--ligne);
	border-radius: var(--wp--custom--radius--xl);
	padding: 1.5rem;
	background: var(--wp--preset--color--blanc);
}
.nx-panel h4,
.nx-panel-dark h4 {
	font-family: "Space Grotesk", sans-serif;
	font-size: 1rem;
	margin-bottom: 0.75rem;
}
.nx-panel p {
	font-size: 0.92rem;
	line-height: 1.65;
	color: var(--wp--preset--color--encre);
}
.nx-panel-dark {
	border: none;
	border-radius: var(--wp--custom--radius--xl);
	padding: 1.5rem;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--blanc);
}
.nx-panel-dark h4 {
	color: var(--wp--preset--color--blanc);
}
.nx-row {
	display: flex;
	justify-content: space-between;
	font-size: 0.85rem;
}
.nx-row:first-of-type {
	border-top: none;
	padding-top: 0;
}
.nx-panel-dark .nx-row {
	border-top-color: rgba(255, 255, 255, 0.12);
}
.nx-panel-dark .nx-row span:first-child {
	color: #B9C2D6;
}
.nx-panel-dark .nx-row span:last-child {
	font-weight: 600;
}

/* -- Bulle d'information ------------------------------------------------------- */
.nx-bubble-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.25rem;
}
.nx-bubble {
	border-radius: var(--wp--custom--radius--bulle);
	padding: 1.5rem 1.75rem;
}
.nx-bubble h4 {
	font-family: "Space Grotesk", sans-serif;
	font-weight: 700;
	font-size: 1rem;
	margin-bottom: 0.6rem;
}
.nx-bubble p {
	font-size: 0.9rem;
	line-height: 1.6;
}
.nx-bubble-navy {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--blanc);
}
.nx-bubble-navy h4 {
	color: var(--wp--preset--color--blanc);
}
.nx-bubble-orange {
	background: var(--wp--preset--color--corail);
	color: var(--wp--preset--color--navy);
}
.nx-bubble-orange h4 {
	color: var(--wp--preset--color--navy);
}
.nx-bubble-white {
	background: var(--wp--preset--color--blanc);
	border: 1px solid var(--wp--preset--color--ligne);
	color: var(--wp--preset--color--encre);
}
.nx-bubble-white h4 {
	color: var(--wp--preset--color--navy);
}
.nx-bubble-white p {
	color: var(--wp--preset--color--gris-texte);
}

/* -- Carte d'étape numérotée ----------------------------------------------------- */
.nx-step {
	background: var(--wp--preset--color--blanc);
	border: 1px solid var(--wp--preset--color--ligne);
	border-radius: var(--wp--custom--radius--xl);
	padding: 1.5rem 1.75rem;
	max-width: 340px;
}
.nx-step-head {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin-bottom: 0.85rem;
}
.nx-step-num {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--blanc);
	font-family: "Space Grotesk", sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.nx-step-head h4 {
	font-family: "Space Grotesk", sans-serif;
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--wp--preset--color--navy);
}
.nx-step p {
	font-size: 0.88rem;
	color: var(--wp--preset--color--gris-texte);
	line-height: 1.6;
}

/* -- Pied de page ---------------------------------------------------------------- */
.nx-footer {
	background: var(--wp--preset--color--navy);
	color: #AEB8CC;
	padding: 1.75rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.82rem;
}
.nx-footer .nx-wordmark-sm {
	color: var(--wp--preset--color--blanc);
	font-family: "Space Grotesk", sans-serif;
	font-weight: 700;
}

/* -- Champs de formulaire (Forminator) -------------------------------------------- */
.nx-field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-width: 360px;
}
.nx-field label {
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 0.82rem;
	color: var(--wp--preset--color--navy);
}
.nx-input,
.nx-textarea,
.nx-select {
	font-family: "Inter", sans-serif;
	font-size: 0.9rem;
	color: var(--wp--preset--color--encre);
	background: var(--wp--preset--color--blanc);
	border: 1.5px solid var(--wp--preset--color--ligne);
	border-radius: var(--wp--custom--radius--md);
	padding: 0.65rem 0.9rem;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nx-input::placeholder,
.nx-textarea::placeholder {
	color: #9AA0AD;
}
.nx-textarea {
	resize: vertical;
	min-height: 90px;
	line-height: 1.5;
}
.nx-select {
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%230B1F3B' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	padding-right: 2.25rem;
}
.nx-input:focus,
.nx-textarea:focus,
.nx-select:focus {
	border-color: var(--wp--preset--color--corail);
	box-shadow: 0 0 0 3px rgba(255, 107, 74, 0.18);
}
.nx-file {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	flex-wrap: wrap;
}
.nx-file-btn {
	background: var(--wp--preset--color--creme);
	border: 1px solid var(--wp--preset--color--ligne);
	border-radius: var(--wp--custom--radius--sm);
	padding: 0.6rem 1.1rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--encre);
	font-family: inherit;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.nx-file-btn:hover {
	border-color: var(--wp--preset--color--corail);
	background: var(--wp--preset--color--blanc);
}
.nx-file-status {
	font-size: 0.85rem;
	color: var(--wp--preset--color--gris-texte);
}