@charset "UTF-8";
/*!
 * Nexus Systems IT — feuille de style du site
 * -------------------------------------------------------------------------
 * Remplace les ~34 Ko de CSS qui étaient injectés en ligne sur chaque page via
 * l'outil de personnalisation. Servie en fichier statique : mise en cache par
 * le navigateur, versionnée par date de modification.
 *
 * Sommaire
 *   1. Jetons de design
 *   2. Réinitialisations et accessibilité globale
 *   3. Intégration au thème WoodMart
 *   4. En-tête et marque
 *   5. Typographie du site
 *   6. Boutons et actions
 *   7. Hero
 *   8. Sections génériques
 *   9. Cartes, listes et blocs de contenu
 *  10. Bandeau technologies (défilement CSS)
 *  11. FAQ, fil d'Ariane, maillage
 *  12. Articles et cartes d'actualités
 *  13. Contact et formulaire
 *  14. WooCommerce sur devis
 *  15. Pied de page
 *  16. Page 404
 *  17. Réactivité
 *  18. Mouvement réduit et impression
 * ------------------------------------------------------------------------- */

/* ======================================================================
   1. Jetons de design
   ====================================================================== */

:root {
	--nsi-bg-deep: #050F1C;
	--nsi-bg: #071522;
	--nsi-bg-slate: #0B1D2D;
	--nsi-bg-panel: #0A2035;
	--nsi-bg-raise: #102C43;

	--nsi-accent: #35DACB;
	--nsi-accent-soft: #70EFE2;
	--nsi-accent-ink: #071522;

	--nsi-text: #EAF3F8;
	--nsi-text-muted: #B6C7D4;
	--nsi-text-dim: #92A7B6;
	--nsi-border: rgba(147, 178, 193, .24);
	--nsi-border-accent: rgba(53, 218, 203, .34);

	--nsi-wrap: 1200px;
	--nsi-gutter: 24px;
	--nsi-radius: 0;

	--nsi-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--nsi-font-display: Georgia, "Times New Roman", serif;

	--nsi-tap: 44px;
}

/* ======================================================================
   2. Réinitialisations et accessibilité globale
   ====================================================================== */

.nx-site,
.nx-site *,
.nx-footer,
.nx-footer * {
	box-sizing: border-box;
}

/* Lien d'évitement — visible dès qu'il reçoit le focus clavier. */
.nsi-skip-link {
	position: fixed;
	z-index: 100000;
	top: -100px;
	left: 12px;
	padding: 14px 20px;
	background: var(--nsi-accent);
	color: var(--nsi-accent-ink);
	font: 700 14px/1 var(--nsi-font);
	text-decoration: none;
	transition: top .18s ease;
}

.nsi-skip-link:focus {
	top: 12px;
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.nsi-content-anchor {
	display: block;
	scroll-margin-top: 90px;
}

/* Focus clavier homogène et toujours visible sur fond sombre. */
.nx-site a:focus-visible,
.nx-site button:focus-visible,
.nx-site input:focus-visible,
.nx-site select:focus-visible,
.nx-site textarea:focus-visible,
.nx-site summary:focus-visible,
.nx-footer a:focus-visible,
.nsi-breadcrumb a:focus-visible {
	outline: 3px solid var(--nsi-accent-soft);
	outline-offset: 3px;
}

.nsi-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ======================================================================
   3. Intégration au thème WoodMart
   ====================================================================== */

/* Les pages construites avec le système NSI occupent toute la largeur.
   Sélection par classe de corps (et non par identifiant de page) pour rester
   valable quand de nouvelles pages sont créées. */
body.nsi-custom-layout {
	background: var(--nsi-bg) !important;
}

body.nsi-custom-layout .wd-page-wrapper,
body.nsi-custom-layout .website-wrapper,
body.nsi-custom-layout .main-page-wrapper,
body.nsi-custom-layout .wd-page-content,
body.nsi-custom-layout .wd-content-area,
body.nsi-custom-layout .wd-content-layout,
body.nsi-custom-layout .content-layout-wrapper,
body.nsi-custom-layout .site-content,
body.nsi-custom-layout #main-content,
body.nsi-custom-layout article.entry-content,
body.nsi-custom-layout .entry-content {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

body.nsi-custom-layout .wd-page-wrapper,
body.nsi-custom-layout .website-wrapper {
	background: var(--nsi-bg) !important;
}

body.nsi-custom-layout .entry-content > p:empty,
body.nsi-custom-layout .entry-content > p:has(> .nsi-content-anchor:only-child) {
	display: none !important;
	margin: 0 !important;
}

/* Le <main class="nx-site"> devient la cible du lien d'évitement : on neutralise
   le contour par défaut sans supprimer le focus (voir :focus-visible). */
.nx-site[tabindex="-1"]:focus {
	outline: none;
}

.nx-site[tabindex="-1"]:focus-visible {
	outline: 3px solid var(--nsi-accent-soft);
	outline-offset: -3px;
}

/* Le conteneur de pied de page du thème est vide : on l'écarte pour ne pas
   laisser deux repères « contentinfo » dans l'arbre d'accessibilité. */
.wd-footer.footer-container {
	display: none !important;
}

/* Barre d'outils mobile et éléments boutique du thème (voir nsi/shop.php). */
body .wd-toolbar,
body .whb-column .wd-header-wishlist,
body .whb-column .wd-header-compare,
body .whb-column .wd-header-cart,
body .whb-column .wd-header-my-account {
	display: none !important;
}

/* ======================================================================
   4. En-tête et marque
   ====================================================================== */

body .nexus-brand {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: #F6FBFC;
	line-height: 1;
	text-decoration: none;
}

body .nexus-brand-mark {
	display: inline-grid;
	place-items: center;
	min-width: 30px;
	height: 30px;
	padding: 0 5px;
	border: 1px solid var(--nsi-accent);
	color: var(--nsi-accent);
	font-family: var(--nsi-font-display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .02em;
}

body .nexus-brand-type {
	display: grid;
	gap: 2px;
	letter-spacing: .15em;
}

body .nexus-brand-type strong {
	color: #F6FBFC;
	font-size: 14px;
	font-weight: 700;
}

body .nexus-brand-type small {
	color: var(--nsi-accent);
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .28em;
	white-space: nowrap;
}

body .nexus-header-cta {
	display: inline-flex;
	align-items: center;
	min-height: var(--nsi-tap);
	padding: 11px 17px;
	border: 1px solid var(--nsi-accent);
	color: var(--nsi-accent);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	text-decoration: none;
}

body .nexus-header-cta:hover,
body .nexus-header-cta:focus-visible {
	background: var(--nsi-accent);
	color: var(--nsi-accent-ink);
}

/* ======================================================================
   5. Typographie du site
   ====================================================================== */

.nx-site,
.nx-footer {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	overflow: hidden;
	color: var(--nsi-text);
	font-family: var(--nsi-font);
}

.nx-wrap {
	width: min(var(--nsi-wrap), calc(100% - (var(--nsi-gutter) * 2)));
	margin: 0 auto;
}

.nx-site h1,
.nx-site h2,
.nx-site h3,
.nx-site h4,
.nx-site p,
.nx-site ul,
.nx-site ol {
	margin-top: 0;
}

.nx-site h1,
.nx-site h2 {
	letter-spacing: -.03em;
}

.nx-site h1 {
	max-width: 15ch;
	max-width: min(800px, 18ch);
	color: #fff;
	font-size: clamp(34px, 5vw, 66px);
	line-height: 1.04;
}

.nx-site h2 {
	color: #fff;
	font-size: clamp(28px, 3.2vw, 48px);
	line-height: 1.08;
}

.nx-site h3 {
	color: #fff;
	font-size: 21px;
	line-height: 1.2;
}

.nx-site p {
	color: var(--nsi-text-muted);
	font-size: 17px;
	line-height: 1.72;
}

.nx-kicker {
	display: block;
	margin-bottom: 16px;
	color: var(--nsi-accent);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .17em;
	text-transform: uppercase;
}

/* ======================================================================
   6. Boutons et actions
   ====================================================================== */

.nx-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.nx-button {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	min-height: var(--nsi-tap);
	padding: 14px 22px;
	border: 1px solid var(--nsi-accent);
	background: var(--nsi-accent);
	color: var(--nsi-accent-ink);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.nx-button:hover,
.nx-button:focus-visible {
	border-color: var(--nsi-accent-soft);
	background: var(--nsi-accent-soft);
	color: var(--nsi-accent-ink);
}

.nx-button-ghost {
	background: transparent;
	color: var(--nsi-accent);
}

.nx-button-ghost:hover,
.nx-button-ghost:focus-visible {
	background: var(--nsi-accent);
	color: var(--nsi-accent-ink);
}

.nx-card-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: var(--nsi-tap);
	color: var(--nsi-accent);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .04em;
	text-decoration: none;
}

.nx-card-link:hover,
.nx-card-link:focus-visible {
	color: var(--nsi-accent-soft);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ======================================================================
   7. Hero
   ====================================================================== */

.nx-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 640px;
	background-color: var(--nsi-bg);
	background-position: center;
	background-size: cover;
}

.nx-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(4, 15, 28, .96) 0%, rgba(4, 15, 28, .78) 40%, rgba(4, 15, 28, .18) 78%);
}

/* Hero de l'accueil.
   L'original pesait 1,5 Mo et était téléchargé deux fois (une fois par la
   règle CSS, une fois par le preload qui visait une autre taille). On sert
   désormais du WebP dimensionné, avec repli JPEG pour les rares navigateurs
   sans WebP, et le preload cible exactement les mêmes fichiers.
   Les URL sont relatives à cette feuille : aucune adaptation à la migration. */
.nx-hero-home {
	background-image: url(../../../uploads/2026/07/nsi-hero-circuit-1920.jpg);
	background-image: image-set(
		url(../../../uploads/2026/07/nsi-hero-circuit-1920.webp) type("image/webp"),
		url(../../../uploads/2026/07/nsi-hero-circuit-1920.jpg) type("image/jpeg")
	);
}

@media (max-width: 1100px) {
	.nx-hero-home {
		background-image: url(../../../uploads/2026/07/nsi-hero-circuit-1024.jpg);
		background-image: image-set(
			url(../../../uploads/2026/07/nsi-hero-circuit-1024.webp) type("image/webp"),
			url(../../../uploads/2026/07/nsi-hero-circuit-1024.jpg) type("image/jpeg")
		);
	}
}

@media (max-width: 700px) {
	.nx-hero-home {
		background-image: url(../../../uploads/2026/07/nsi-hero-circuit-640.jpg);
		background-image: image-set(
			url(../../../uploads/2026/07/nsi-hero-circuit-640.webp) type("image/webp"),
			url(../../../uploads/2026/07/nsi-hero-circuit-640.jpg) type("image/jpeg")
		);
	}
}

.nx-hero-panel {
	position: relative;
	max-width: var(--nsi-wrap);
	padding: 104px 0 76px;
}

.nx-hero-panel > .nx-kicker,
.nx-hero-panel > h1,
.nx-hero-panel > p,
.nx-hero-panel > .nx-actions,
.nx-hero-panel > .nsi-hero-signature {
	max-width: 640px;
}

.nsi-hero-signature {
	margin: 26px 0 0;
	color: var(--nsi-accent);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.nx-page-hero {
	padding: 132px 0 92px;
	border-bottom: 1px solid var(--nsi-border-accent);
	background: radial-gradient(circle at 81% 20%, rgba(41, 218, 203, .17), transparent 28%), linear-gradient(135deg, #071522, #0A2843);
}

.nx-page-hero .nsi-hero-intro {
	max-width: 700px;
	font-size: 19px;
}

.nx-hero-infra { background-image: radial-gradient(circle at 80% 26%, rgba(34, 102, 214, .3), transparent 34%), linear-gradient(130deg, #071522, #0A2843); }
.nx-hero-cyber { background-image: radial-gradient(circle at 80% 26%, rgba(41, 218, 203, .26), transparent 34%), linear-gradient(130deg, #071522, #08303C); }
.nx-hero-digital { background-image: radial-gradient(circle at 80% 26%, rgba(94, 129, 244, .26), transparent 34%), linear-gradient(130deg, #071522, #12233F); }
.nx-hero-support { background-image: radial-gradient(circle at 80% 26%, rgba(16, 165, 133, .27), transparent 34%), linear-gradient(130deg, #071522, #072B33); }
.nx-hero-web { background-image: radial-gradient(circle at 78% 26%, rgba(44, 216, 196, .2), transparent 34%), linear-gradient(130deg, #071522, #0A2843); }
.nx-hero-products { background-image: radial-gradient(circle at 78% 26%, rgba(120, 190, 255, .2), transparent 34%), linear-gradient(130deg, #071522, #0C2440); }
.nx-hero-solutions,
.nx-hero-about,
.nx-hero-news,
.nx-hero-contact { background-image: radial-gradient(circle at 80% 22%, rgba(41, 218, 203, .18), transparent 30%), linear-gradient(135deg, #071522, #0A2843); }

/* ======================================================================
   8. Sections génériques
   ====================================================================== */

.nx-section {
	padding: 100px 0;
}

.nx-section-dark { background: var(--nsi-bg); }
.nx-section-slate { background: var(--nsi-bg-slate); }

.nx-section-title {
	max-width: 760px;
	margin-bottom: 44px;
}

.nx-section-title p {
	max-width: 660px;
}

.nx-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 72px;
	align-items: start;
}

.nx-split > div > p {
	max-width: 560px;
}

.nx-strip {
	border-top: 1px solid var(--nsi-border-accent);
	border-bottom: 1px solid var(--nsi-border-accent);
	background: var(--nsi-bg-panel);
}

.nx-strip .nx-wrap {
	display: flex;
	gap: 14px;
	align-items: center;
	justify-content: space-between;
	min-height: 72px;
	color: var(--nsi-text);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
}

.nx-strip i {
	flex: none;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--nsi-accent);
}

.nx-cta {
	padding: 76px 0;
	background: linear-gradient(110deg, #0B4A8F 0%, #06635F 58%, #08725B 100%);
}

.nx-cta .nx-wrap {
	display: flex;
	gap: 40px;
	align-items: center;
	justify-content: space-between;
}

.nx-cta h2 {
	margin-bottom: 10px;
	font-size: clamp(28px, 3.3vw, 46px);
}

.nx-cta p {
	color: #F0FEFB;
}

.nx-cta .nx-button-ghost {
	border-color: #fff;
	color: #fff;
}

.nx-cta .nx-button-ghost:hover,
.nx-cta .nx-button-ghost:focus-visible {
	background: #fff;
	color: #06373A;
}

/* ======================================================================
   9. Cartes, listes et blocs de contenu
   ====================================================================== */

.nx-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.nx-card-grid-four {
	grid-template-columns: repeat(4, 1fr);
}

.nx-card {
	display: flex;
	flex-direction: column;
	padding: 30px;
	border: 1px solid var(--nsi-border);
	background: linear-gradient(145deg, rgba(18, 48, 70, .78), rgba(9, 26, 42, .95));
	transition: border-color .22s ease, transform .22s ease;
}

.nx-card:hover,
.nx-card:focus-within {
	border-color: var(--nsi-accent);
	transform: translateY(-3px);
}

.nx-card-icon {
	margin-bottom: 22px;
	color: var(--nsi-accent);
	font-family: var(--nsi-font-display);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: .04em;
}

.nx-card h3 {
	margin-bottom: 12px;
}

.nx-card p {
	flex: 1 1 auto;
	font-size: 16px;
}

.nsi-card-list {
	margin: 4px 0 18px;
	padding: 0;
	list-style: none;
}

.nsi-card-list li {
	position: relative;
	padding: 6px 0 6px 20px;
	color: var(--nsi-text-dim);
	font-size: 14px;
	line-height: 1.5;
}

.nsi-card-list li::before {
	content: "";
	position: absolute;
	top: 14px;
	left: 0;
	width: 8px;
	height: 1px;
	background: var(--nsi-accent);
}

/* Constats client */
.nsi-problem-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--nsi-border-accent);
	list-style: none;
}

.nsi-problem-list li {
	padding: 26px 30px 26px 0;
	border-bottom: 1px solid var(--nsi-border);
}

.nsi-problem-list strong {
	display: block;
	margin-bottom: 8px;
	color: #fff;
	font-size: 18px;
	line-height: 1.3;
}

.nsi-problem-list span {
	color: var(--nsi-text-muted);
	font-size: 16px;
	line-height: 1.65;
}

/* Liste à cocher */
.nsi-checklist {
	display: grid;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--nsi-border-accent);
	list-style: none;
}

.nsi-checklist li {
	position: relative;
	padding: 19px 0 19px 32px;
	border-bottom: 1px solid var(--nsi-border);
	color: var(--nsi-text);
	font-size: 16px;
	line-height: 1.6;
}

.nsi-checklist li::before {
	content: "✓";
	position: absolute;
	top: 18px;
	left: 0;
	color: var(--nsi-accent);
	font-weight: 800;
}

/* Bénéfices */
.nsi-benefit-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2px;
	background: var(--nsi-border);
}

.nsi-benefit {
	padding: 32px;
	background: var(--nsi-bg-slate);
}

.nsi-benefit h3 {
	margin-bottom: 10px;
	color: var(--nsi-accent);
	font-size: 19px;
}

.nsi-benefit p {
	margin: 0;
	font-size: 16px;
}

/* Méthode */
.nx-method,
.nsi-method {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.nx-method > li,
.nx-method > div {
	padding: 22px 0;
	border-top: 1px solid var(--nsi-border-accent);
}

.nx-method b {
	color: var(--nsi-accent);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
}

.nx-method h3 {
	margin: 18px 0 9px;
}

.nx-method p {
	margin: 0;
	font-size: 16px;
}

.nsi-approach .nx-method {
	grid-template-columns: 1fr;
	gap: 0;
}

/* Encart d'information */
.nsi-notice {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	align-items: baseline;
	padding: 26px 30px;
	border-left: 3px solid var(--nsi-accent);
	background: rgba(53, 218, 203, .07);
}

.nsi-notice strong {
	color: #fff;
	font-size: 18px;
}

.nsi-notice span {
	color: var(--nsi-text-muted);
	font-size: 16px;
	line-height: 1.65;
}

.nsi-quote-notice {
	padding: 46px 0;
}

/* Sommaire des prestations web */
.nsi-web-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.nsi-web-nav a {
	display: inline-flex;
	align-items: center;
	min-height: var(--nsi-tap);
	padding: 12px 20px;
	border: 1px solid var(--nsi-border);
	color: var(--nsi-text);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.nsi-web-nav a:hover,
.nsi-web-nav a:focus-visible {
	border-color: var(--nsi-accent);
	color: var(--nsi-accent);
}

.nsi-web-offer {
	scroll-margin-top: 90px;
}

/* ======================================================================
   10. Bandeau technologies (défilement CSS, sans JavaScript)
   ====================================================================== */

.nsi-tech-section .nx-tech-groups {
	display: grid;
	gap: 40px;
	margin-top: 8px;
}

.nsi-tech-head {
	display: grid;
	justify-items: center;
	margin-bottom: 24px;
	text-align: center;
}

.nsi-tech-head h3 {
	max-width: 640px;
	font-size: 20px;
}

.nsi-marquee {
	display: flex;
	width: 100%;
	overflow: hidden;
	padding: 16px 0;
	border-top: 1px solid var(--nsi-border-accent);
	border-bottom: 1px solid var(--nsi-border-accent);
	background: rgba(3, 17, 28, .4);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.nsi-marquee-track {
	display: flex;
	flex: 0 0 auto;
	gap: 14px;
	margin: 0;
	padding: 0 7px;
	list-style: none;
	animation: nsi-marquee 38s linear infinite;
	will-change: transform;
}

.nsi-marquee-reverse .nsi-marquee-track {
	animation-direction: reverse;
	animation-duration: 46s;
}

.nsi-marquee:hover .nsi-marquee-track,
.nsi-marquee:focus-within .nsi-marquee-track {
	animation-play-state: paused;
}

.nsi-marquee-item {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	min-width: clamp(146px, 12vw, 196px);
	min-height: 62px;
	padding: 16px 20px;
	border: 1px solid var(--nsi-border);
	background: #091A2A;
	color: var(--nsi-text);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	white-space: nowrap;
}

@keyframes nsi-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

.nsi-tech-note {
	margin: 34px 0 0;
	color: var(--nsi-text-dim);
	font-size: 14px;
	text-align: center;
}

/* ======================================================================
   11. FAQ, fil d'Ariane, maillage
   ====================================================================== */

.nsi-faq {
	display: grid;
	border-top: 1px solid var(--nsi-border-accent);
}

.nsi-faq-item {
	border-bottom: 1px solid var(--nsi-border);
}

.nsi-faq-item > summary {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--nsi-tap);
	padding: 22px 46px 22px 0;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
}

.nsi-faq-item > summary::-webkit-details-marker {
	display: none;
}

.nsi-faq-item > summary::after {
	content: "+";
	position: absolute;
	right: 6px;
	color: var(--nsi-accent);
	font-size: 26px;
	font-weight: 400;
	line-height: 1;
	transition: transform .2s ease;
}

.nsi-faq-item[open] > summary::after {
	content: "−";
}

.nsi-faq-item > summary:hover {
	color: var(--nsi-accent);
}

.nsi-faq-answer {
	padding: 0 46px 24px 0;
}

.nsi-faq-answer p {
	margin: 0;
	max-width: 78ch;
	font-size: 16px;
}

/* Fil d'Ariane */
.nsi-breadcrumb {
	background: var(--nsi-bg-deep);
	border-bottom: 1px solid var(--nsi-border);
	font-family: var(--nsi-font);
}

.nsi-breadcrumb-inner {
	width: min(var(--nsi-wrap), calc(100% - (var(--nsi-gutter) * 2)));
	margin: 0 auto;
}

.nsi-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin: 0;
	padding: 6px 0;
	list-style: none;
}

/* Cible tactile d'au moins 24 px de haut (WCAG 2.2 — 2.5.8). */
.nsi-breadcrumb li {
	display: flex;
	align-items: center;
	min-height: 26px;
	color: var(--nsi-text-dim);
	font-size: 13px;
}

.nsi-breadcrumb a {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 4px 2px;
}

.nsi-breadcrumb li + li::before {
	content: "›";
	margin-right: 8px;
	color: var(--nsi-accent);
}

.nsi-breadcrumb a {
	color: var(--nsi-text-muted);
	text-decoration: none;
}

.nsi-breadcrumb a:hover,
.nsi-breadcrumb a:focus-visible {
	color: var(--nsi-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Maillage interne */
.nsi-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.nsi-related-card {
	display: grid;
	gap: 10px;
	padding: 28px;
	border: 1px solid var(--nsi-border);
	background: var(--nsi-bg-panel);
	color: var(--nsi-text);
	text-decoration: none;
	transition: border-color .2s ease, background .2s ease;
}

.nsi-related-card:hover,
.nsi-related-card:focus-visible {
	border-color: var(--nsi-accent);
	background: var(--nsi-bg-raise);
}

.nsi-related-label {
	color: var(--nsi-accent);
	font-size: 16px;
	font-weight: 800;
}

.nsi-related-text {
	color: var(--nsi-text-muted);
	font-size: 15px;
	line-height: 1.6;
}

.nsi-related-arrow {
	color: var(--nsi-accent);
	font-size: 18px;
}

/* ======================================================================
   12. Articles et cartes d'actualités
   ====================================================================== */

.nsi-post-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.nsi-post-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 30px;
	border: 1px solid var(--nsi-border);
	background: linear-gradient(145deg, rgba(18, 48, 70, .7), rgba(9, 26, 42, .95));
	transition: border-color .2s ease, transform .2s ease;
}

.nsi-post-card:hover,
.nsi-post-card:focus-within {
	border-color: var(--nsi-accent);
	transform: translateY(-3px);
}

.nsi-post-card time {
	color: var(--nsi-accent);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.nsi-post-card h3 {
	margin: 0;
	font-size: 20px;
	line-height: 1.28;
}

.nsi-post-card h3 a {
	color: #fff;
	text-decoration: none;
}

.nsi-post-card h3 a:hover,
.nsi-post-card h3 a:focus-visible {
	color: var(--nsi-accent);
}

.nsi-post-card p {
	flex: 1 1 auto;
	margin: 0;
	font-size: 15px;
}

.nsi-post-more {
	color: var(--nsi-accent);
	font-size: 13px;
	font-weight: 800;
}

.nsi-news-more {
	margin: 28px 0 0;
}

.nsi-empty {
	color: var(--nsi-text-dim);
}

/* Corps d'article : la mise en avant du lien interne */
.nsi-article-lead {
	color: #0a5f66 !important;
	font-size: 19px !important;
	font-weight: 600;
}

.nsi-article-inline-cta a {
	display: inline-block;
	padding: 13px 20px;
	border: 1px solid #0a7d78;
	color: #0a5f66;
	font-weight: 700;
	text-decoration: none;
}

.nsi-article-inline-cta a:hover,
.nsi-article-inline-cta a:focus-visible {
	background: #0a7d78;
	color: #fff;
}

/* ======================================================================
   13. Contact et formulaire
   ====================================================================== */

.nx-contact-layout {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 64px;
	align-items: start;
}

.nsi-contact-list {
	display: grid;
	gap: 12px;
	margin: 30px 0 0;
}

.nsi-contact-item {
	display: flex;
	gap: 18px;
	align-items: center;
	min-height: 76px;
	padding: 18px 22px;
	border: 1px solid var(--nsi-border);
	background: var(--nsi-bg-panel);
	color: var(--nsi-text);
	text-decoration: none;
	transition: border-color .2s ease, background .2s ease;
}

a.nsi-contact-item:hover,
a.nsi-contact-item:focus-visible {
	border-color: var(--nsi-accent);
	background: var(--nsi-bg-raise);
}

.nsi-contact-icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--nsi-border-accent);
	color: var(--nsi-accent);
	font-family: var(--nsi-font-display);
	font-size: 15px;
	font-weight: 700;
}

.nsi-contact-copy {
	display: grid;
	gap: 4px;
}

.nsi-contact-copy small {
	color: var(--nsi-accent);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .16em;
}

.nsi-contact-copy b {
	color: #fff;
	font-size: 16px;
	font-weight: 700;
}

.nsi-contact-arrow {
	margin-left: auto;
	color: var(--nsi-accent);
}

.nsi-contact-note {
	margin-top: 24px;
	color: var(--nsi-text-dim);
	font-size: 15px;
}

.nx-form-panel {
	padding: 40px;
	border: 1px solid var(--nsi-border-accent);
	background: rgba(7, 23, 34, .82);
}

.nsi-form-intro {
	font-size: 15px !important;
}

.nx-contact-form .nx-form-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}

.nx-contact-form label {
	display: grid;
	gap: 8px;
}

.nx-contact-form .nx-form-wide {
	grid-column: 1 / -1;
}

.nx-label-line {
	color: var(--nsi-text);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
}

.nx-required {
	color: var(--nsi-accent);
}

.nx-contact-form input,
.nx-contact-form select,
.nx-contact-form textarea {
	width: 100%;
	min-height: var(--nsi-tap);
	padding: 12px 14px;
	border: 1px solid var(--nsi-border) !important;
	background: #071722 !important;
	color: #F5FBFA !important;
	font-family: var(--nsi-font);
	font-size: 15px;
}

.nx-contact-form textarea {
	min-height: 150px;
	resize: vertical;
}

.nx-contact-form input:focus,
.nx-contact-form select:focus,
.nx-contact-form textarea:focus {
	border-color: var(--nsi-accent) !important;
	outline: 3px solid rgba(112, 239, 226, .55);
	outline-offset: 1px;
}

.nx-contact-form select option {
	background: #f4f9f8;
	color: #09202a;
}

.nx-contact-form textarea::placeholder {
	color: rgba(215, 234, 231, .62);
}

.nx-contact-form .nx-button {
	margin-top: 22px;
	border: 0;
	cursor: pointer;
	font-family: var(--nsi-font);
}

.nx-form-notice {
	margin-bottom: 20px;
	padding: 16px 20px;
	border-left: 3px solid var(--nsi-accent);
	background: rgba(53, 218, 203, .1);
	color: var(--nsi-text);
	font-size: 16px;
}

.nx-form-error {
	border-left-color: #FF8A7A;
	background: rgba(255, 138, 122, .12);
}

.nsi-honeypot {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ======================================================================
   14. WooCommerce sur devis
   ====================================================================== */

.nsi-quote-price {
	display: inline-block;
	color: var(--nsi-accent);
	font-size: 20px;
	font-weight: 800;
	letter-spacing: .02em;
}

.nsi-quote-action {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	margin: 24px 0 12px;
}

.woocommerce .nsi-quote-button,
.nsi-quote-button {
	display: inline-flex;
	align-items: center;
	min-height: var(--nsi-tap);
	padding: 14px 24px;
	border-radius: 0 !important;
	background: var(--nsi-accent) !important;
	color: var(--nsi-accent-ink) !important;
	font-weight: 800 !important;
	text-decoration: none;
}

.woocommerce .nsi-quote-button:hover,
.nsi-quote-button:hover,
.nsi-quote-button:focus-visible {
	background: var(--nsi-accent-soft) !important;
}

.nsi-quote-secondary {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 4px 2px;
	color: #0a7d78;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nsi-quote-note {
	max-width: 62ch;
	color: #4a626e;
	font-size: 14px;
	line-height: 1.6;
}

.single-product .wd-wishlist-btn,
.single-product .yith-wcwl-add-to-wishlist,
.single-product .wd-compare-btn,
.woocommerce .added_to_cart {
	display: none !important;
}

/* ======================================================================
   15. Pied de page
   ====================================================================== */

.nx-footer {
	padding: 72px 0 24px;
	background: var(--nsi-bg-deep);
	color: var(--nsi-text-muted);
}

.nx-footer-grid {
	display: grid;
	grid-template-columns: 1.5fr repeat(4, 1fr);
	gap: 40px;
}

.nsi-footer-identity p {
	margin: 18px 0 0;
	color: var(--nsi-text-dim);
	font-size: 15px;
	line-height: 1.65;
}

.nsi-footer-signature {
	color: var(--nsi-accent) !important;
	font-size: 13px !important;
	font-weight: 700;
	letter-spacing: .05em;
}

.nsi-footer-contact {
	display: grid;
	gap: 6px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.nsi-footer-contact a {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	color: var(--nsi-text);
	font-size: 14px;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.nsi-footer-heading {
	margin: 0 0 16px;
	color: var(--nsi-accent);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.nsi-footer-column ul {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nsi-footer-column a,
.nx-footer a {
	color: var(--nsi-text-muted);
	text-decoration: none;
}

.nsi-footer-column a {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	font-size: 14px;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.nx-footer a:hover,
.nx-footer a:focus-visible {
	color: var(--nsi-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nx-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	justify-content: space-between;
	margin-top: 48px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, .09);
	color: var(--nsi-text-dim);
	font-size: 13px;
}

/* ======================================================================
   16. Page 404
   ====================================================================== */

.nsi-404-hero {
	min-height: 0;
	padding: 120px 0 90px;
	background: radial-gradient(circle at 78% 22%, rgba(53, 218, 203, .18), transparent 30%), linear-gradient(135deg, #071522, #0A2843);
}

.nsi-404-hero::before {
	display: none;
}

.nsi-404-search {
	margin-top: 48px;
	padding-top: 34px;
	border-top: 1px solid var(--nsi-border);
}

.nsi-404-search label {
	display: block;
	margin-bottom: 12px;
	color: var(--nsi-text);
	font-size: 14px;
	font-weight: 700;
}

.nsi-404-search-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.nsi-404-search input {
	flex: 1 1 280px;
	min-height: var(--nsi-tap);
	padding: 12px 16px;
	border: 1px solid var(--nsi-border);
	background: #071722;
	color: #F5FBFA;
	font-family: var(--nsi-font);
	font-size: 15px;
}

.nsi-404-search button {
	border: 0;
	cursor: pointer;
	font-family: var(--nsi-font);
}

/* ======================================================================
   17. Réactivité
   ====================================================================== */

@media (max-width: 1200px) {
	.nx-footer-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 1024px) {
	.nx-section { padding: 78px 0; }
	.nx-card-grid,
	.nx-card-grid-four { grid-template-columns: repeat(2, 1fr); }
	.nsi-related-grid,
	.nsi-post-grid { grid-template-columns: repeat(2, 1fr); }
	.nx-split { gap: 44px; }
	.nx-contact-layout { grid-template-columns: 1fr; gap: 44px; }
	.nx-strip .nx-wrap { flex-wrap: wrap; justify-content: center; padding: 16px 0; }
	.nx-page-hero { padding: 108px 0 76px; }
	.nx-hero-panel { padding: 88px 0 62px; }
}

@media (max-width: 767px) {
	:root { --nsi-gutter: 16px; }

	.nx-hero { min-height: 560px; background-position: 64% center; }
	.nx-hero::before { background: linear-gradient(90deg, rgba(4, 15, 28, .96), rgba(4, 15, 28, .72)); }
	.nx-hero-panel { padding: 72px 0 48px; }
	.nx-page-hero { padding: 78px 0 58px; }

	.nx-section { padding: 58px 0; }
	.nx-section-title { margin-bottom: 32px; }

	.nx-card-grid,
	.nx-card-grid-four,
	.nx-split,
	.nx-method,
	.nsi-method,
	.nsi-related-grid,
	.nsi-post-grid,
	.nsi-benefit-grid,
	.nsi-problem-list { grid-template-columns: 1fr; }

	.nsi-problem-list li { padding-right: 0; }
	.nx-card { padding: 24px; }
	.nx-form-panel { padding: 24px; }
	.nx-contact-form .nx-form-grid { grid-template-columns: 1fr; }

	.nx-cta { padding: 58px 0; }
	.nx-cta .nx-wrap { display: grid; gap: 26px; }

	.nx-strip .nx-wrap {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		padding: 14px 0;
	}

	.nx-strip i { display: none; }

	.nx-strip .nx-wrap span {
		display: flex;
		min-height: var(--nsi-tap);
		align-items: center;
		justify-content: center;
		padding: 9px 10px;
		border: 1px solid var(--nsi-border-accent);
		background: rgba(8, 31, 44, .76);
		font-size: 10px;
		line-height: 1.25;
		text-align: center;
	}

	.nx-footer { padding: 52px 0 20px; }
	.nx-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
	.nsi-footer-identity { grid-column: 1 / -1; }
	.nx-footer-bottom { margin-top: 34px; }

	.nsi-marquee-item { min-width: 132px; min-height: 54px; font-size: 13px; }
	.nsi-marquee-track { animation-duration: 30s; }
	.nsi-marquee-reverse .nsi-marquee-track { animation-duration: 36s; }

	.nsi-faq-item > summary { font-size: 16px; padding-right: 40px; }
	.nsi-faq-answer { padding-right: 0; }

	.nsi-web-nav a { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 420px) {
	.nx-actions { display: grid; }
	.nx-button { justify-content: space-between; }
	.nx-footer-grid { grid-template-columns: 1fr; }
}

/* ======================================================================
   18. Mouvement réduit et impression
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	.nsi-marquee {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.nsi-marquee-track {
		animation: none !important;
	}

	/* La copie décorative n'a plus d'utilité sans animation. */
	.nsi-marquee-track[aria-hidden="true"] {
		display: none;
	}

	.nx-card:hover,
	.nsi-post-card:hover {
		transform: none;
	}
}

@media print {
	.nsi-skip-link,
	.nx-cta,
	.nsi-marquee,
	.nx-actions { display: none !important; }

	.nx-site,
	.nx-footer {
		width: auto;
		margin-left: 0;
		color: #000;
		background: #fff;
	}

	.nx-site h1,
	.nx-site h2,
	.nx-site h3,
	.nx-site p { color: #000; }
}