/*
 * Charte graphique NTS · Nexus Tech Stacks (version 2.0, 2026) appliquée au thème Avista.
 *
 * Bleu nuit en masse, blanc en respiration, bleu Nexus en impulsion (60 / 30 / 10).
 * Poppins pour la voix, JetBrains Mono pour les chiffres, la diagonale à 45° pour la signature.
 * Le thème code ses noirs et ses gris en dur dans chaque section : ils sont remappés ici, classe
 * par classe, sur les couleurs de la charte.
 */

:root {
	--nts-nuit: #010d1a;
	--nts-surface: #0f172a;
	--nts-nexus: #0362fa;
	--nts-ciel: #3b82f6;
	--nts-nexus-fonce: #0250d6;    /* survol des boutons : le texte blanc garde 6,7:1 (3,7:1 sur le ciel) */
	--nts-ardoise: #94a3b8;
	--nts-brume: #eef3fa;
	--nts-blanc: #ffffff;
	--nts-texte: #3a4658;          /* bleu nuit adouci pour le texte courant sur fond clair */
	--nts-trait: rgba(1, 13, 26, 0.12);

	/* Variables du thème Avista */
	--as-font-1: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--as-font-2: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
	--as-font-3: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--as-clr-pr-1: var(--nts-nexus);
	--as-clr-pr-3: var(--nts-nuit);
	--as-clr-h-1: var(--nts-nuit);
	--as-clr-h-2: var(--nts-nuit);
	--as-clr-p-1: var(--nts-texte);
	--as-clr-p-2: var(--nts-texte);
}

body {
	background-color: var(--nts-brume) !important;   /* le thème fixe #DCDCDC avec un sélecteur plus fort */
	color: var(--nts-nuit);
	font-family: var(--as-font-1);
}

/* Les blocs Elementor natifs (titres, listes, textes) suivent la charte, pas les défauts d'Elementor. */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor,
.elementor-widget-icon-list .elementor-icon-list-text {
	font-family: var(--as-font-1);
}

/* ------------------------------------------------------------------ fonds */

/* Sections sombres : noir du thème → bleu nuit. */
.as-hero-1-marquee,
.as-marquee-text-1-wrap-1,
.as-cta-1-bg,
.as-process-1-area,
.as-faqs-1-area,
.as-cta-2-projects,
.as-cta-2-form-wrap:not(.wa-p-relative),
.as-footer-1-area,
.as-services-3-area,
.as-partner-3-area,
.as-hero-3-active {
	background-color: var(--nts-nuit) !important;
}

/* Cartes posées sur un fond sombre : surface. */
.as-process-1-card,
.as-accordion-item,
.as-faqs-1-area .accordion-item,
.as-faqs-1-area .as-faqs-1-item {
	background-color: var(--nts-surface) !important;
}

/* Gris clairs du thème → brume (fonds) et blanc (cartes). */
.as-hero-3-height,
.as-about-3-area {
	background-color: var(--nts-brume) !important;
}
.as-services-1-item,
.as-cta-2-form-wrap.wa-p-relative {
	background-color: var(--nts-blanc) !important;
}

/* ---------------------------------------------------------------- boutons */

/* Primaire : bleu Nexus, angles en pilule. Survol : bleu Nexus foncé (SITE-28 : sur le bleu ciel,
   le texte blanc tombait à 3,7:1 de contraste). */
.as-pr-btn-1,
.as-pr-btn-1-v2,
.as-pr-btn-3,
.frm_forms .frm_button_submit,
.frm_forms button[type="submit"] {
	background-color: var(--nts-nexus) !important;
	border-color: var(--nts-nexus) !important;
	color: var(--nts-blanc) !important;
	border-radius: 999px !important;
	font-family: var(--as-font-1);
	font-weight: 500;
}
.as-pr-btn-1:hover,
.as-pr-btn-1-v2:hover,
.as-pr-btn-3:hover,
.frm_forms .frm_button_submit:hover,
.frm_forms button[type="submit"]:hover {
	background-color: var(--nts-nexus-fonce) !important;
	border-color: var(--nts-nexus-fonce) !important;
}

/* --------------------------------------------------- héros de l'accueil */

.as-hero-1-bg-color {
	background: var(--nts-nuit) !important;
	overflow: hidden;
}
/*
 * La signature : la diagonale du N, à 45°, en bas à droite, comme sur la couverture de la charte.
 * Une bande translucide et un filet bleu Nexus. C'est le seul décor du héros.
 */
.as-hero-1-bg-color::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(135deg, transparent 0 84%, var(--nts-nexus) 84% 84.3%, transparent 84.3%),
		linear-gradient(135deg, transparent 0 79%, rgba(3, 98, 250, 0.16) 79% 90%, transparent 90%);
}

.as-hero-1-area .hero-title {
	color: var(--nts-blanc);
	font-weight: 700;
	font-size: clamp(2.1rem, 1rem + 2.9vw, 3.75rem);
	line-height: 1.06;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.as-hero-1-area .hero-disc {
	color: var(--nts-ardoise);
	font-size: 1.05rem;
	line-height: 1.6;
	max-width: 34ch;
}
.as-hero-1-area .guaranteed {
	color: var(--nts-blanc);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
	width: auto;
	white-space: nowrap;   /* l'animation du thème découpe le texte lettre par lettre */
}
.as-hero-1-area .guaranteed i {
	color: var(--nts-nexus);
}

/* Encart d'action : carte de contenu de la charte (surface, filet bleu à gauche). */
.as-hero-1-content-box {
	background: var(--nts-surface) !important;
	border: 0 !important;
	border-left: 3px solid var(--nts-nexus) !important;
	border-radius: 14px !important;
	box-shadow: none !important;
}
.as-hero-1-content-box::before,
.as-hero-1-content-box::after {
	display: none !important;
}
.as-hero-1-content-box .box-title {
	color: var(--nts-blanc);
	font-weight: 500;
	line-height: 1.45;
}
.as-hero-1-content-box .box-address {
	color: var(--nts-ardoise);
}
.as-hero-1-content-box .box-address a {
	color: var(--nts-blanc);
	font-weight: 600;
	letter-spacing: 0.01em;
}

.as-hero-1-copyright-bg {
	background-color: rgba(15, 23, 42, 0.85) !important;
}
.as-hero-1-marquee .text-elm {
	color: var(--nts-ardoise);
}
.as-hero-1-marquee .text-elm span {
	color: var(--nts-nexus);
}

/*
 * Le thème place l'encart d'action au centre, en absolu : le titre reste dans la colonne de droite,
 * avec une largeur et une taille adaptées à chaque gabarit (vérifié à 1024, 1280 et 1440 px).
 */
@media (min-width: 1400px) {
	.as-hero-1-area .hero-title {
		max-width: 450px;
		margin-left: auto;
	}
}
@media (min-width: 768px) and (max-width: 1399px) {
	.as-hero-1-content-box {
		min-width: 260px;   /* sinon une colonne de 170 px */
	}
	.as-hero-1-area .hero-title {
		max-width: 360px;
		margin-left: auto;
		font-size: clamp(2.4rem, 1rem + 2.2vw, 2.8rem);
	}
	.as-hero-1-area .guaranteed {
		font-size: 0.875rem;
	}
}
@media (min-width: 768px) and (max-width: 1199px) {
	.as-hero-1-content-box {
		min-width: 290px;
	}
}

/* Sous 1200 px, le thème affiche deux boutons de menu : on garde celui du menu mobile. */
@media (max-width: 1199px) {
	.as-header-1-menu-toggle-btn {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.as-hero-1-area .hero-title,
	.as-hero-1-area .hero-disc,
	.as-hero-1-content-box,
	.as-hero-1-content-box .box-title,
	.as-hero-1-content-box .box-address {
		text-align: left;
	}
	.as-hero-1-area .guaranteed {
		white-space: normal;
	}
}

/* ------------------------------------------------- étiquettes et décors */

/*
 * Les étiquettes « {•} … » au-dessus de chaque titre n'apportent rien (la plupart valaient « NTS ») :
 * retirées. Le compteur « {20+} projets » est masqué tant qu'il n'a pas de chiffre (Pascal le donnera).
 */
.as-subtitle-1,
.as-cta-2-form-wrap .subtitle,
.as-portfolio-1-counter:not(:has(.odometer)) {
	display: none !important;
}

/* Pied de page : le gros bouton e-mail brillait en orange (couleur du thème de démo). */
.as-footer-1-big-email {
	box-shadow: none !important;
	background-color: var(--nts-nexus) !important;
}
.as-footer-1-big-email:hover {
	background-color: var(--nts-nexus-fonce) !important;
}

/* Bandeau des étiquettes de services : brume plutôt que gris. */
.as-cta-1-tags,
.as-cta-1-tag-wrap {
	background-color: var(--nts-brume) !important;
}

/* ------------------------------------------------------ chiffres et étapes */

.as-process-1-card .sub-title,
.as-process-1-card [class*="count"],
.odometer {
	font-family: var(--as-font-2);
}

/* ------------------------------------------------------------ formulaires */

/* Formulaire posé sur une carte sombre : textes lisibles (ils étaient gris foncé sur noir). */
.as-cta-2-form-wrap:not(.wa-p-relative) .frm_forms,
.as-cta-2-form-wrap:not(.wa-p-relative) .frm_forms .frm_checkbox label,
.as-cta-2-form-wrap:not(.wa-p-relative) .frm_forms .frm_description {
	color: #cbd5e1;
}
.as-cta-2-form-wrap:not(.wa-p-relative) .frm_forms .frm_description a,
.as-cta-2-form-wrap:not(.wa-p-relative) .frm_forms .frm_message {
	color: var(--nts-blanc);
}
.frm_forms .frm_description a {
	text-decoration: underline;
	text-underline-offset: 2px;
}
.frm_forms select {
	color: var(--nts-nuit);
}
.frm_forms .frm_message {
	border-left: 3px solid var(--nts-nexus);
	padding-left: 14px;
}

/* ------------------------------------------------- coordonnées (Contact) */

.nts-coordonnees {
	padding-block: clamp(40px, 6vw, 72px);
}
.nts-coordonnees .elementor-heading-title {
	color: var(--nts-nuit);
	font-weight: 600;
	font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem);
	line-height: 1.2;
	margin-bottom: 8px;
}
.nts-coordonnees .elementor-widget-icon-list .elementor-icon-list-items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
}
.nts-coordonnees .elementor-widget-icon-list .elementor-icon-list-item {
	align-items: flex-start;
	margin: 0 !important;
	padding: 18px 20px !important;
	background: var(--nts-blanc);
	border-left: 3px solid var(--nts-nexus);
	border-radius: 12px;
}
.nts-coordonnees .elementor-icon-list-icon i,
.nts-coordonnees .elementor-icon-list-icon svg {
	color: var(--nts-nexus);
	fill: var(--nts-nexus);
	font-size: 18px;
	margin-top: 3px;
}
.nts-coordonnees .elementor-icon-list-text {
	color: var(--nts-nuit);
	font-size: 15px;
	line-height: 1.55;
}
.nts-coordonnees a:hover .elementor-icon-list-text {
	color: var(--nts-nexus);
}

/* ----------------------------------------- pages de texte (légal, politique) */

.nts-legal {
	max-width: 760px;
	margin-inline: auto;
	color: var(--nts-texte);
	font-size: 17px;
	line-height: 1.7;
}
.nts-legal h2 {
	color: var(--nts-nuit);
	font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 8px;
}
.nts-legal h3 {
	color: var(--nts-nuit);
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 36px 0 10px;
}
.nts-legal a {
	color: var(--nts-nexus);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ------------------------------------------------------------ téléphone */

/* Nos projets : la grille avait une colonne fixe de 386 px et la page glissait de côté. */
@media (max-width: 767px) {
	.as-price-1-wrap {
		grid-template-columns: minmax(0, 1fr) !important;
	}
	.as-price-1-left,
	.as-price-1-ss {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* ------------------------------------------------------- études de cas */

.nts-cas {
	max-width: 860px;
	margin-inline: auto;
	color: var(--nts-texte);
	font-size: 17px;
	line-height: 1.7;
}
.nts-cas .nts-cas-intro {
	color: var(--nts-nuit);
	font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem);
	line-height: 1.55;
	font-weight: 500;
	max-width: 62ch;
}
.nts-cas h2 {
	color: var(--nts-nuit);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 600;
	line-height: 1.2;
	margin: 48px 0 12px;
}
.nts-cas h3 {
	color: var(--nts-nuit);
	font-size: 1.15rem;
	font-weight: 600;
	margin: 24px 0 6px;
}
.nts-cas ul {
	padding-left: 1.1em;
}
.nts-cas li {
	margin-bottom: 6px;
}
.nts-cas li::marker {
	color: var(--nts-nexus);
}
.nts-cas a {
	color: var(--nts-nexus);
}
.nts-cas-capture {
	margin: 32px 0;
}
.nts-cas-capture img {
	width: 100%;
	height: auto;
	border-radius: 14px;
	box-shadow: 0 18px 40px rgba(1, 13, 26, 0.18);
}
/* Fiche du projet : une grille de faits, chacun avec le filet bleu de la charte. */
.nts-cas-faits {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 12px;
	margin: 0 0 8px;
}
.nts-cas-faits > div {
	background: var(--nts-blanc);
	border-left: 3px solid var(--nts-nexus);
	border-radius: 10px;
	padding: 14px 16px;
}
.nts-cas-faits dt {
	color: var(--nts-texte);
	font-size: 13px;
	font-weight: 500;
	margin: 0 0 2px;
}
.nts-cas-faits dd {
	color: var(--nts-nuit);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.45;
	margin: 0;
}
/* Appel à l'action en fin d'étude : carte bleu nuit, bouton primaire et bouton contour (charte). */
.nts-cas-cta {
	margin: 56px 0 8px;
	padding: clamp(24px, 4vw, 40px);
	background: var(--nts-nuit);
	border-radius: 18px;
	color: #cbd5e1;
	background-image: linear-gradient(135deg, transparent 0 78%, rgba(3, 98, 250, 0.18) 78% 90%, transparent 90%);
}
.nts-cas-cta .nts-cas-cta-titre {
	color: var(--nts-blanc);
	font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 8px;
}
.nts-cas-boutons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 20px 0 0;
}
.nts-btn {
	display: inline-flex;
	align-items: center;
	padding: 12px 22px;
	border-radius: 999px;
	background: var(--nts-nexus);
	color: var(--nts-blanc) !important;
	font-weight: 500;
	text-decoration: none !important;
	border: 1px solid var(--nts-nexus);
}
.nts-btn:hover {
	background: var(--nts-nexus-fonce);
	border-color: var(--nts-nexus-fonce);
}
.nts-btn-ligne {
	background: transparent;
	border-color: var(--nts-blanc);
}
.nts-btn-ligne:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--nts-blanc);
}

/* Pages de service : bloc « concrètement », posé sur la brume entre deux sections. */
.nts-service-plus {
	padding-block: clamp(48px, 7vw, 96px);
}
/* Elementor impose max-width: 100% aux widgets des conteneurs avec un sélecteur plus fort. */
.nts-service-plus .elementor-widget.nts-cas {
	width: 100%;
	max-width: 860px !important;
	margin-inline: auto !important;
}
.nts-cas ol {
	padding-left: 1.3em;
}
.nts-cas ol li::marker {
	color: var(--nts-nexus);
	font-family: var(--as-font-2);
	font-weight: 500;
}

/* --------------------------------------------------------- accessibilité */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--nts-ciel) !important;
	outline-offset: 3px;
}

/* -------------------------------------- visuels des études de cas (SITE-25) */
/* La scène du produit en tête de page, le gros plan sur téléphone dans le texte : des images
   générées dont les écrans sont de vraies captures. */
.nts-cas-visuel {
	max-width: 1100px;
	margin: 0 auto 8px;
}
.nts-cas-visuel img {
	width: 100%;
	height: auto;
	border-radius: 18px;
	box-shadow: 0 24px 50px rgba(1, 13, 26, 0.22);
}
.nts-cas-tel {
	margin: 36px 0;
}
.nts-cas-tel img {
	width: 100%;
	height: auto;
	border-radius: 14px;
	box-shadow: 0 18px 40px rgba(1, 13, 26, 0.18);
}

/* ------------------------------------------------------------------ 404 */
/* Le gabarit du thème affiche toujours le cône de la démo (il ignore le réglage d'image) :
   l'illustration de la charte (images/outils/dessins/F2-404.html) prend sa place. */
.as-not-found-img {
	background: url(img/nts-404.webp) center / contain no-repeat;
}
.as-not-found-img img {
	visibility: hidden;
}

/* --------------------------------------------- héros : personnage devant (SITE-25) */
/* Le consultant présente l'offre de la main ; la bande verticale des services passe derrière lui
   au lieu de lui barrer le visage. Le canevas du thème est transparent hors du personnage et ne
   capte pas les clics. */
@media (min-width: 1200px) {
	.as-hero-1-wrap .as-hero-1-img {
		z-index: 1;
	}
}
/* Entre 1200 et 1399 px, l'encadré de l'audit est plus près : la main s'arrêtait sur son texte. */
@media (min-width: 1200px) and (max-width: 1399px) {
	.as-hero-1-wrap .as-hero-1-img {
		translate: -45px 0;
	}
}

/* ------------------------------------- bandeau « Ils nous ont fait confiance » (SITE-4) */
/* Le bandeau de logos du thème (tx_brand, style 3) : le titre passe au-dessus des logos et à une
   taille de titre de section (le thème le prévoit en dessous, en 180 px), le fond couvre toute la
   largeur, et les logos des clients (silhouettes blanches) tiennent dans les tuiles. */
.as-partner-3-area {
	display: flex;
	flex-direction: column;
}
.as-partner-3-area .as-partner-3-big-title {
	order: -1;
	margin: 0;
	padding: clamp(48px, 6vw, 88px) 16px clamp(28px, 3vw, 44px);
	font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem) !important;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
}
.as-partner-3-bg-img {
	height: 100%;
}
.as-partner-3-bg-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.as-partner-3-logo .single-logo img {
	max-width: 200px;
	max-height: 110px;
	width: auto;
	height: auto;
	opacity: 0.88;
}
@media (max-width: 1199px) {
	.as-partner-3-logo .single-logo img {
		max-width: 150px;
		max-height: 72px;
	}
}
/* Le thème fait glisser ce titre de côté au défilement : sur téléphone, il sortait de l'écran. */
.as-partner-3-area .as-partner-3-big-title {
	transform: none !important;
	translate: none !important;
}
/* Accueil : la carte des étiquettes de la section suivante chevauche le haut de sa section ; on
   lui laisse la place sous les logos. */
.elementor-element-0ccb574 .as-partner-3-area {
	padding-bottom: clamp(120px, 11vw, 160px) !important;
}

/* ------------------------------------------------------ réseaux sociaux (SITE-2) */
/* Pied de page : l'icône du réseau était collée à son nom. */
.as-footer-1-menu .tx-widget-link i {
	width: 1.1em;
	margin-right: 8px;
	text-align: center;
}
/* « Nos coordonnées » : les cartes d'une rangée prennent la hauteur de la plus haute ; le texte
   d'une carte courte était centré en hauteur, loin de son icône restée en haut. */
.nts-coordonnees .elementor-icon-list-item > a {
	align-items: flex-start;
}
.nts-coordonnees .elementor-icon-list-icon,
.nts-coordonnees .elementor-icon-list-text {
	align-self: flex-start !important;
}

/* =====================================================================================
 * Relecture du 05/11/2026 (SITE-28)
 * ===================================================================================== */

/* ---------------------------------------------------------------- en-tête */
/* L'onglet qui porte le logo prend la couleur du fond de page (brume). Le thème le dessine avec
   une image blanche : sur la brume, il se détachait en rectangle blanc. La même forme sert de
   masque, remplie de brume. */
.as-header-1-logo .bg-shape {
	opacity: 0;
}
.as-header-1-logo::before {
	content: "";
	position: absolute;
	top: -5px;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background: var(--nts-brume);
	-webkit-mask: url(img/onglet-logo.webp) 0 0 / 100% 100% no-repeat;
	mask: url(img/onglet-logo.webp) 0 0 / 100% 100% no-repeat;
}
.as-header-1-logo .tx-logo {
	width: 95px;
	height: auto;
}

/* ---------------------------------------------------------------- boutons */
/* Bouton à flèche (« Réserver mon audit », « Contactez nous »…) : au survol, le carré blanc de
   la flèche s'étend sur tout le bouton. Le texte, forcé en blanc par la charte, disparaissait
   (blanc sur blanc) : il passe en bleu nuit, la flèche en bleu Nexus. */
.as-pr-btn-1-v2:hover,
.as-pr-btn-1-v2:focus-visible {
	color: var(--nts-nuit) !important;
}
.as-pr-btn-1-v2 .text {
	position: relative;
	z-index: 1;
}
/* Le carré blanc de la flèche dépassait de l'arrondi de la pilule : il devient un rond, qui
   s'étire en pilule au survol. */
.as-pr-btn-1-v2::after {
	border-radius: 999px !important;
}

/* Bandeau « Travaillons ensemble » : le second bouton est un lien sur fond sombre. La charte en
   faisait une pilule bleue sans marge intérieure ; il devient un bouton à contour blanc. */
.as-cta-1-content .as-pr-btn-1:nth-child(2) {
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.55) !important;
	color: var(--nts-blanc) !important;
	padding: 10px 22px !important;
	gap: 10px;
}
.as-cta-1-content .as-pr-btn-1:nth-child(2) i {
	color: var(--nts-ciel);
}
.as-cta-1-content .as-pr-btn-1:nth-child(2):hover {
	background: rgba(255, 255, 255, 0.1) !important;
	border-color: var(--nts-blanc) !important;
	color: var(--nts-blanc) !important;
}
/* Le premier : carré de la flèche en bleu nuit (noir pur dans la démo). */
.as-cta-1-content .as-pr-btn-1:nth-child(1) .icon {
	background: var(--nts-nuit);
}

/* En-tête : au survol, le bouton « Audit gratuit » passait au noir pur. */
.as-header-1-action-link .as-pr-btn-1:hover {
	background: var(--nts-nexus-fonce) !important;
}

/* Page 404 : bouton gris anthracite de la démo → bouton primaire de la charte. */
.as-not-found-btn {
	background: var(--nts-nexus);
}
.as-not-found-btn:hover {
	background: var(--nts-nexus-fonce);
}

/* ------------------------------------------------------------- formulaire */
/* Champs de 48 px et texte de 16 px (en dessous, Safari sur iPhone zoome la page au toucher),
   libellés visibles au-dessus de chaque champ, espacement régulier. */
.with_frm_style {
	--font-size: 14px;
	--label-padding: 0 0 6px;
	--field-font-size: 16px;
	--field-height: 48px;
	--line-height: 1.4;
	--field-pad: 10px 14px;
	--field-margin: 18px;
	--border-color: #cbd5e1;
	--text-color: var(--nts-nuit);
	--border-color-active: var(--nts-nexus);
}
.frm_forms .frm_primary_label {
	font-family: var(--as-font-1);
	font-weight: 500;
}
.frm_forms .frm_required {
	color: var(--nts-nexus);
}
.frm_forms input[type="text"],
.frm_forms input[type="email"],
.frm_forms input[type="tel"],
.frm_forms select,
.frm_forms textarea {
	border-radius: 10px !important;
}
.frm_forms ::placeholder {
	color: #64748b;
	opacity: 1;
}
.as-cta-2-form-wrap:not(.wa-p-relative) .frm_forms .frm_primary_label {
	color: #e2e8f0;
}
.frm_forms .frm_button_submit,
.frm_forms button[type="submit"] {
	min-height: 50px;
	font-size: 16px !important;
	padding: 12px 28px !important;
}

/* ----------------------------------------------------- carte « Pascal » */
/* La main qui salue (GIF) est retirée : la phrase tient sur deux lignes nettes. */
.as-cta-2-manager .text-elm {
	text-wrap: balance;
}

/* -------------------------------------------- fil d'Ariane des pages intérieures */
/* La page en cours, bleu Nexus sur le bandeau bleu, se lisait mal ; l'icône de la maison était
   rouge (démo). Sur téléphone, le titre long de la page en cours passait sous l'icône. */
.as-breadcrumb-list {
	align-items: flex-start;
}
.as-breadcrumb-list .taBcrumb-end span {
	color: #cbd5e1;
}
.as-breadcrumb-list a:hover,
.as-breadcrumb-list a:hover span {
	color: var(--nts-ciel);
}
.as-breadcrumb-list .tx-breadIcon {
	flex: 0 0 auto;
	margin-top: 2px;
}
.as-breadcrumb-list .tx-breadIcon svg path {
	fill: var(--nts-ciel);
	stroke: var(--nts-ciel);
}

/* ------------------------------------------- restes orange de la démo (#FD3F00) */
/* Blog : lien « Lire l'article » et icône de date ; À propos et Développement : les points du
   dessin décoratif (SVG au remplissage orange écrit en dur). */
.read_more,
.read_more i,
.fa-calendar,
.fa-regular.fa-calendar {
	color: var(--nts-nexus) !important;
}
.read_more:hover,
.read_more:hover i {
	color: var(--nts-nexus-fonce) !important;
}
svg [fill="rgb(253, 63, 0)"],
svg [fill="#FD3F00"],
svg [fill="#fd3f00"] {
	fill: var(--nts-ciel) !important;
}

/* ------------------------------------------------ listes à coches (articles) */
/* Sur deux lignes, la coche se centrait entre les lignes et semblait appartenir à l'élément
   voisin : elle s'aligne sur la première ligne, et les éléments respirent. */
.elementor-widget-icon-list .elementor-icon-list-item {
	align-items: flex-start !important;
}
.elementor-widget-icon-list:not(.nts-coordonnees *) .elementor-icon-list-icon {
	margin-top: 0.35em;
	align-self: flex-start !important;
}
.elementor-widget-icon-list:not(.nts-coordonnees *) .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child) {
	padding-bottom: 10px !important;
}

/* --------------------------------------- À propos : carte « L'expertise NTS » */
/* Fond bleu nuit (noir pur dans la démo) ; la texture de la charte couvre toute la carte au lieu
   d'un rectangle qui suivait la souris dans un coin. */
.as-blog-1-left {
	background: var(--nts-nuit) !important;
	isolation: isolate;
}
.as-blog-1-left-bg-img {
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	transform: none !important;
	z-index: -1;
}
.as-blog-1-left-bg-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.9;
}
.as-blog-1-left .logo-elm,
.as-blog-1-left .title {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------- FAQ de l'accueil : les onglets */
/* Bleu Nexus sur bleu nuit : 3,85:1, trop peu pour du texte de 20 px. Onglets en gris clair,
   l'onglet ouvert en blanc ; le trait bleu Nexus dessous marque toujours l'onglet ouvert. */
.as-faqs-1-area .tx-tab-btn {
	color: #cbd5e1 !important;
}
.as-faqs-1-area .tx-tab-btn.active,
.as-faqs-1-area .tx-tab-btn:hover {
	color: var(--nts-blanc) !important;
}

/* ------------------------------------------------ inspecteur de design (SITE-28) */
/* Cartes « Innovez avec NTS » et « La satisfaction avant tout » : texte clair posé sur une photo.
   Tant que la photo n'est pas chargée (ou si elle ne l'est jamais), le texte était blanc sur
   blanc : un fond bleu nuit sous la photo, et un voile qui garde le texte lisible sur toute la
   photo. */
.as-features-1-creative,
.as-features-1-result {
	background-color: var(--nts-nuit) !important;
	position: relative;
	isolation: isolate;
}
.as-features-1-creative::before,
.as-features-1-result::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(1, 13, 26, 0.78) 0%, rgba(1, 13, 26, 0.35) 55%, rgba(1, 13, 26, 0) 100%);
	pointer-events: none;
}
.as-features-1-creative .disc,
.as-features-1-result .disc {
	color: #e2e8f0 !important;
}

/* Numéros décoratifs sans ordre réel : 01 à 06 sous les logos des technologies, {01} à {03} sur
   les lignes de services. (Les étapes de la méthode gardent les leurs : c'est une suite.) */
.as-partner-1-logo-single .number,
.as-services-1-item [class*="number"] {
	display: none !important;
}

/* Étiquettes des services et boutons : à plat, sans ombre portée. */
.as-services-1-item .tx-service-tag,
li.tx-service-tag {
	box-shadow: none !important;
	background: var(--nts-brume) !important;
	border-color: transparent !important;
}
.as-pr-btn-1,
.as-pr-btn-1-v2,
.as-pr-btn-3,
.nts-btn,
.frm_forms .frm_button_submit {
	box-shadow: none !important;
}

/* Aucun texte de moins de 13 px : aide du formulaire. */
.frm_forms .frm_description,
.frm_forms .frm_description a {
	font-size: 13px;
}

/* ---------------------------------- héros des pages de service à une seule photo (SITE-28) */
/* Le thème montre la première photo sur 40 % de la largeur et la seconde sur le reste. Sans
   seconde photo (B2 et B4 retirées : écrans inventés), la première couvre tout le héros. */
.as-hero-3-area:not(:has(.as-hero-3-img-2 img)) .as-hero-3-img-1 {
	clip-path: none !important;
}
/* La pastille « disponible » des héros de service n'a pas de texte : un point vert seul. */
.as-hero-3-active {
	display: none !important;
}

/* ------------------------------------------- Contact : « Nos coordonnées » (SITE-28) */
/* Sept cartes dans une grille à colonnes automatiques : quatre puis trois, un trou en bout de
   deuxième ligne, des icônes à des hauteurs différentes. Les quatre moyens de contact forment une
   ligne, les trois réseaux sociaux la suivante, plus basse ; chaque icône est centrée sur la
   première ligne de son texte ; quand la carte mène quelque part (e-mail, réseaux), toute la carte
   est cliquable, pas seulement sa ligne de texte. Sélecteurs longs : ils passent devant les règles
   générales des listes d'Elementor. */
.nts-coordonnees .elementor-widget-icon-list .elementor-icon-list-items {
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 16px;
}
.nts-coordonnees .elementor-widget-icon-list .elementor-icon-list-items > .elementor-icon-list-item {
	grid-column: span 3;
	gap: 14px;
	min-height: 0;
	padding: 22px !important;
}
.nts-coordonnees .elementor-widget-icon-list .elementor-icon-list-items > .elementor-icon-list-item:nth-child(n + 5) {
	grid-column: span 4;
	padding: 16px 22px !important;
}
.nts-coordonnees .elementor-widget-icon-list .elementor-icon-list-items > .elementor-icon-list-item:nth-child(n):has(> a) {
	padding: 0 !important;
}
.nts-coordonnees .elementor-widget-icon-list .elementor-icon-list-item > a {
	gap: 14px;
	width: 100%;
	min-height: 44px;
	padding: 22px;
}
.nts-coordonnees .elementor-widget-icon-list .elementor-icon-list-item:nth-child(n + 5) > a {
	padding: 16px 22px;
}
.nts-coordonnees .elementor-widget-icon-list .elementor-icon-list-icon {
	flex: 0 0 22px;
	width: 22px;
	height: calc(15px * 1.55);
	margin: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
}
.nts-coordonnees .elementor-icon-list-icon i,
.nts-coordonnees .elementor-icon-list-icon svg {
	margin: 0 !important;
	font-size: 18px;
	width: 18px;
	height: 18px;
}
.nts-coordonnees .elementor-icon-list-text {
	padding-left: 0 !important;
}
@media (max-width: 1024px) {
	.nts-coordonnees .elementor-widget-icon-list .elementor-icon-list-items > .elementor-icon-list-item {
		grid-column: span 6;
	}
	.nts-coordonnees .elementor-widget-icon-list .elementor-icon-list-items > .elementor-icon-list-item:nth-child(n + 5) {
		grid-column: span 4;
	}
}
@media (max-width: 767px) {
	.nts-coordonnees .elementor-widget-icon-list .elementor-icon-list-items {
		gap: 10px;
	}
	.nts-coordonnees .elementor-widget-icon-list .elementor-icon-list-items > .elementor-icon-list-item,
	.nts-coordonnees .elementor-widget-icon-list .elementor-icon-list-items > .elementor-icon-list-item:nth-child(n + 5) {
		grid-column: 1 / -1;
	}
}

/* --------------------------------- « Ils nous ont fait confiance » sans animation (SITE-28) */
/* Le titre perd la classe du thème (as-partner-3-big-title) avant que son script ne le découpe
   (extension nts-site, partie 5 bis) : il reçoit ici le style que lui donnaient les règles SITE-4
   plus haut. */
.as-partner-3-area .nts-titre-confiance {
	order: -1;
	margin: 0;
	padding: clamp(48px, 6vw, 88px) 16px clamp(28px, 3vw, 44px);
	font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-align: center;
	color: var(--nts-blanc);
}

/* ------------------- pages de service : le formulaire en bas du bloc FAQ (SITE-28) */
/* À partir de 1 600 px, le thème fixe ce bloc à 1 600 px de haut. Le formulaire, plus haut depuis
   que ses libellés sont visibles, passait sous la section suivante : son bouton n'était jamais
   visible en entier. La hauteur suit désormais le contenu. */
.as-faqs-3-bottom-height {
	height: auto !important;
	min-height: 0 !important;
}
.as-faqs-3-bottom {
	padding-bottom: 40px;
}

/* ------------------------------------------ formulaire : message de confirmation (SITE-28) */
/* « Merci, votre demande est bien arrivée… » s'affichait en blanc sur le vert pâle de Formidable,
   dans la carte sombre : illisible. Confirmation aux couleurs de la charte : bleu nuit sur un voile
   bleu dans les cartes claires, blanc sur la surface dans les cartes sombres, filet bleu Nexus. */
.with_frm_style {
	--success-bg-color: rgba(3, 98, 250, 0.08);
	--success-border-color: transparent;
	--success-text-color: var(--nts-nuit);
	--success-font-size: 16px;
}
.as-cta-2-form-wrap:not(.wa-p-relative) .with_frm_style {
	--success-bg-color: var(--nts-surface);
	--success-text-color: var(--nts-blanc);
}
.frm_forms .frm_message,
.frm_forms .frm_message p {
	text-align: left;
	line-height: 1.6;
	font-weight: 500;
}
.frm_forms .frm_message {
	padding: 18px 20px !important;
	border-radius: 12px !important;
	color: var(--success-text-color) !important;
}

/* -------------------------------------------- images à dimensions annoncées (SITE-36) */
/* L'extension annonce largeur et hauteur des images (place réservée avant leur arrivée). Le thème
   limite leur largeur sans rétablir la hauteur : sans cette règle, elles s'écraseraient. Priorité
   nulle (:where) : les images que le thème recadre en hauteur gardent leur règle. */
:where(img[width][height]) {
	height: auto;
}

/* ------------------------------------------ intertitres des articles du blog (SITE-36) */
/* Passés de H3 à H2 pour Google : ils gardent la taille d'un intertitre d'article (le thème donne
   55 px à un H2). */
.single-post .elementor-widget-text-editor h2 {
	font-size: clamp(1.45rem, 1.15rem + 1vw, 1.9rem);
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 40px 0 14px;
}

/* ------------------------------------------------- articles du blog enrichis (SITE-37) */
/* Le corps de chaque article est un seul bloc de texte structuré : encadré « L'essentiel »,
   listes, étapes numérotées, tableaux, cas concret, questions dépliables. */
.single-post .nts-article {
	color: var(--nts-texte);
	font-size: 17px;
	line-height: 1.75;
}
.single-post .nts-article p {
	margin: 0 0 18px;
}
.single-post .nts-article h3 {
	color: var(--nts-nuit);
	font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);
	font-weight: 600;
	line-height: 1.35;
	margin: 28px 0 10px;
}
.single-post .nts-article a {
	color: var(--nts-nexus);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.single-post .nts-article a:hover {
	color: var(--nts-nexus-fonce);
}
.single-post .nts-article ul {
	list-style: none;
	padding: 0;
	margin: 0 0 22px;
}
.single-post .nts-article ul li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 10px;
}
.single-post .nts-article ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.55em;
	width: 14px;
	height: 8px;
	border-left: 2px solid var(--nts-nexus);
	border-bottom: 2px solid var(--nts-nexus);
	transform: rotate(-45deg);
}
.single-post .nts-article ol {
	counter-reset: etape;
	list-style: none;
	padding: 0;
	margin: 0 0 22px;
}
.single-post .nts-article ol > li {
	counter-increment: etape;
	position: relative;
	padding: 14px 18px 14px 62px;
	margin-bottom: 10px;
	background: var(--nts-blanc);
	border-radius: 12px;
}
.single-post .nts-article ol > li::before {
	content: counter(etape, decimal-leading-zero);
	position: absolute;
	left: 18px;
	top: 14px;
	font-family: var(--as-font-2);
	font-weight: 500;
	color: var(--nts-nexus);
}
.single-post .nts-article strong {
	color: var(--nts-nuit);
}
/* Encadré « L'essentiel en 30 secondes ». */
.single-post .nts-essentiel {
	margin: 8px 0 32px;
	padding: 22px 24px 8px;
	background: var(--nts-blanc);
	border-left: 3px solid var(--nts-nexus);
	border-radius: 12px;
}
.single-post .nts-essentiel .nts-essentiel-titre {
	font-family: var(--as-font-2);
	font-size: 14px;
	color: var(--nts-nexus);
	margin-bottom: 8px;
}
/* Cas concret : carte bleu nuit. */
.single-post .nts-cas-concret {
	margin: 32px 0;
	padding: clamp(22px, 4vw, 32px);
	background: var(--nts-nuit);
	background-image: linear-gradient(135deg, transparent 0 80%, rgba(3, 98, 250, 0.18) 80% 90%, transparent 90%);
	border-radius: 16px;
	color: #cbd5e1;
}
.single-post .nts-cas-concret h3,
.single-post .nts-cas-concret strong {
	color: var(--nts-blanc);
	margin-top: 0;
}
.single-post .nts-cas-concret a {
	color: #93c5fd;
}
.single-post .nts-cas-concret ul li::before {
	border-color: #93c5fd;
}
/* Tableaux : défilent dans leur cadre sur téléphone. */
.single-post .nts-tableau {
	margin: 8px 0 28px;
	overflow-x: auto;
	border-radius: 12px;
	background: var(--nts-blanc);
}
.single-post .nts-tableau table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.5;
}
.single-post .nts-tableau th,
.single-post .nts-tableau td {
	padding: 12px 14px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--nts-trait);
}
.single-post .nts-tableau th {
	background: var(--nts-nuit);
	color: var(--nts-blanc);
	font-weight: 600;
}
.single-post .nts-tableau tr:last-child td {
	border-bottom: 0;
}
/* Questions dépliables. */
.single-post .nts-faq details {
	margin-bottom: 10px;
	background: var(--nts-blanc);
	border-radius: 12px;
}
.single-post .nts-faq summary {
	cursor: pointer;
	list-style: none;
	padding: 16px 52px 16px 20px;
	position: relative;
	font-weight: 600;
	color: var(--nts-nuit);
	min-height: 44px;
}
.single-post .nts-faq summary::-webkit-details-marker {
	display: none;
}
.single-post .nts-faq summary::after {
	content: "+";
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--as-font-2);
	font-size: 22px;
	color: var(--nts-nexus);
}
.single-post .nts-faq details[open] summary::after {
	content: "–";
}
.single-post .nts-faq details > p {
	padding: 0 20px 18px;
	margin: 0;
}
.single-post .nts-article figure {
	margin: 32px 0;
}
.single-post .nts-article figure img {
	width: 100%;
	height: auto;
	border-radius: 14px;
}
.single-post .nts-article figcaption {
	margin-top: 8px;
	font-size: 14px;
	color: #64748b;
}
@media (max-width: 767px) {
	.single-post .nts-article {
		font-size: 16px;
	}
	.single-post .nts-article ol > li {
		padding-left: 52px;
	}
	.single-post .nts-article ol > li::before {
		left: 14px;
	}
}
/* Sur téléphone, chaque ligne de tableau devient une fiche : titre de colonne au-dessus de chaque
   valeur, première colonne en titre de la fiche. */
@media (max-width: 767px) {
	.single-post .nts-tableau {
		background: transparent;
		overflow: visible;
	}
	.single-post .nts-tableau table {
		min-width: 0;
	}
	.single-post .nts-tableau thead {
		display: none;
	}
	.single-post .nts-tableau tr {
		display: block;
		margin-bottom: 12px;
		padding: 16px 18px 6px;
		background: var(--nts-blanc);
		border-left: 3px solid var(--nts-nexus);
		border-radius: 12px;
	}
	.single-post .nts-tableau td {
		display: block;
		padding: 0 0 10px;
		border: 0;
	}
	.single-post .nts-tableau td::before {
		content: attr(data-label);
		display: block;
		font-size: 13px;
		font-weight: 500;
		color: #64748b;
	}
	.single-post .nts-tableau td:first-child {
		font-weight: 600;
		color: var(--nts-nuit);
		font-size: 16px;
	}
	.single-post .nts-tableau td:first-child::before {
		display: none;
	}
}