/*
 * NTS · le site sur téléphone (SITE-28, relecture du 05/11/2026).
 *
 * Pascal lit le site sur son téléphone : « tout le design mobile est à revoir, position des
 * images, lisibilité des textes, disposition, accessibilité, taille de la police, animation ».
 * Le thème Avista réduit ses pages de bureau sans les recomposer : marges de 100 à 160 px,
 * titres alignés à droite ou centrés selon les sections, cartes de 165 px pour un logo, champs de
 * 36 px, images posées en absolu qui tombent au mauvais endroit. Cette feuille recompose chaque
 * section en une colonne lisible.
 *
 * Règles communes : marges de section de 64 px, titres et textes alignés à gauche, texte courant
 * de 16 px au moins, zones à toucher de 44 px au moins, aucune animation qui retarde la lecture.
 */

@media (max-width: 767px) {

	/* ------------------------------------------------------------- base */

	html {
		-webkit-text-size-adjust: 100%;
	}
	body {
		font-size: 16px;
	}
	a,
	button {
		touch-action: manipulation;
	}

	/* Marge de page de 16 px (12 px dans le thème : le texte touchait presque le bord). */
	.container,
	.as-container-1,
	.as-container-2,
	.e-con-boxed > .e-con-inner {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* Rythme vertical : 64 px entre les sections (le thème en met de 100 à 160). */
	.pt-70, .pt-80, .pt-90, .pt-100, .pt-110, .pt-120, .pt-130, .pt-140, .pt-150, .pt-160 {
		padding-top: 64px !important;
	}
	.pb-70, .pb-80, .pb-90, .pb-100, .pb-110, .pb-120, .pb-130, .pb-140, .pb-150, .pb-160 {
		padding-bottom: 64px !important;
	}
	.mb-50, .mb-60, .mb-70, .mb-80, .mb-90 {
		margin-bottom: 32px !important;
	}

	/* Titres de section : une seule taille, alignés à gauche, interlettrage moins serré. */
	.as-sec-title-1,
	.as-h-1.tx-title:not(h1):not(.as-breadcrumb-title) {
		font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2rem) !important;
		line-height: 1.15 !important;
		letter-spacing: -0.015em !important;
		text-wrap: balance;
	}
	.as-sec-title-1,
	.sec-disc,
	[class*="-sec-title"],
	[class*="-sec-title"] .left,
	[class*="-sec-title"] .right {
		text-align: left !important;
	}
	.sec-disc,
	.as-p-1 {
		font-size: 16px;
		line-height: 1.6;
	}
	/* Le thème resserre les lettres de 4 % : à cette taille, des trous apparaissaient dans les
	   mots (« grat uit »). Texte courant et petits titres à l'interlettrage normal. */
	.as-p-1,
	p,
	li,
	h4.as-h-1,
	h5.as-h-1,
	h6.as-h-1,
	.as-pr-btn-1,
	.as-pr-btn-1-v2 {
		letter-spacing: 0 !important;
	}

	/* Animations d'entrée : courtes, et rien ne reste invisible si elles ne se déclenchent pas. */
	.wow {
		animation-duration: 0.45s !important;
		animation-delay: 0s !important;
	}

	/* Boutons flottants : le retour en haut faisait doublon avec la bulle WhatsApp, et passait
	   sur le texte. */
	.wa-back-to-top {
		display: none !important;
	}

	/* ---------------------------------------------------------- en-tête */

	.as-header-1-area {
		top: 18px;
	}
	.as-header-1-logo {
		top: -18px;
	}
	.as-header-1-logo .tx-logo {
		width: 78px;
	}
	.as-header-1-action-link .as-pr-btn-1 {
		min-height: 44px;
		padding: 8px 16px !important;
		font-size: 15px;
	}
	.sr-offcanvas-btn-1 {
		width: 44px;
		height: 44px;
	}

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

	/* Le texte commençait 120 px sous l'en-tête. */
	.as-hero-1-wrap {
		padding: 104px 0 0 !important;
	}
	.as-hero-1-right {
		margin-top: 0 !important;
		position: relative;
		z-index: 2;
	}
	.as-hero-1-area .hero-disc {
		font-size: 16px;
		line-height: 1.55;
		max-width: none;
		margin-bottom: 14px !important;
	}
	.as-hero-1-area .hero-title {
		font-size: clamp(2.1rem, 1.1rem + 5vw, 2.6rem) !important;
		line-height: 1.08;
	}
	.as-hero-1-content-inner {
		display: block !important;
		margin-top: 28px !important;
	}
	/* Encart de l'audit : pleine largeur, texte aligné sur le bouton (il était décalé de 46 px). */
	.as-hero-1-content-box {
		width: 100% !important;
		min-width: 0 !important;
		min-height: 0 !important;
		padding: 22px 20px 20px !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		gap: 0 !important;
		text-align: left !important;
		transform: none !important;
	}
	/* L'encart de l'audit est le premier bouton d'action : il s'affiche tout de suite (il entrait
	   en zoom, encore pâle au chargement sur iPhone). */
	.as-hero-1-content-box.wow {
		visibility: visible !important;
		animation: none !important;
		opacity: 1 !important;
	}
	.as-hero-1-content-box .box-title {
		max-width: none !important;
		width: auto !important;
		margin: 0 0 18px !important;
		font-size: 18px !important;
		line-height: 1.45;
		letter-spacing: 0 !important;
	}
	.as-hero-1-content-box .as-pr-btn-1-v2 {
		min-height: 48px;
	}
	.as-hero-1-content-box .box-address {
		margin: 14px 0 0 !important;
		letter-spacing: 0 !important;
		font-size: 15px;
		line-height: 1.5;
	}
	.as-hero-1-content-box .box-address a {
		display: inline-block;
		padding: 6px 0;
	}
	/* « Créateurs de Sama Ticket, Lyzy et Cahier Bi » à gauche, le consultant à droite qui le
	   présente de la main ouverte (il tombait sous l'encart, coupé à la tête). */
	.as-hero-1-area .guaranteed {
		display: block !important;
		width: 52%;
		min-height: 250px;
		margin: 0 !important;
		padding: 40px 0 32px;
		font-size: 18px;
		font-weight: 600;
		line-height: 1.4;
		font-style: normal;
		white-space: normal;
		text-align: left !important;
	}
	.as-hero-1-area .guaranteed i {
		display: inline-block;
		margin-left: 6px;
	}
	.as-hero-1-img {
		position: absolute !important;
		top: auto !important;
		left: auto !important;
		right: -8px !important;
		bottom: 0 !important;
		width: 50% !important;
		height: auto !important;
		z-index: 1;
		pointer-events: none;
	}
	.as-hero-1-img img,
	.as-hero-1-img .hero-main-img {
		width: 100% !important;
		height: auto !important;
		max-height: 300px;
		object-fit: contain;
		object-position: bottom right;
		-webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
		mask-image: linear-gradient(to bottom, #000 82%, transparent);
		transform: scaleX(-1);   /* il présente de la main le texte placé à sa gauche */
	}
	.as-hero-1-img canvas {
		display: none !important;
	}

	/* -------------------------------------------- « Votre partenaire… » */

	.as-about-1-area .as-p-1 {
		font-size: 16px;
	}

	/* ------------------------------------------- « Nos solutions digitales » */

	/* Les trois cartes : textes alignés à gauche ; l'objet 3D passait sous le texte de la carte
	   bleue. */
	.as-features-1-wrap {
		padding: 8px !important;
		border-radius: 18px;
	}
	.as-features-1-creative,
	.as-features-1-quality,
	.as-features-1-result {
		padding: 28px 22px !important;
		border-radius: 14px;
		text-align: left !important;
	}
	.as-features-1-wrap .title {
		font-size: 24px !important;
		line-height: 1.2;
		text-align: left !important;
	}
	.as-features-1-wrap .disc {
		width: auto !important;
		max-width: none !important;
		margin-left: 0 !important;
		text-align: left !important;
	}
	.as-features-1-quality {
		min-height: 0 !important;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	.as-features-1-quality .img-elm {
		position: static !important;
		width: 150px !important;
		margin: 8px 0 0 auto;
		transform: none !important;
	}
	.as-features-1-result {
		min-height: 360px;
	}

	/* ---------------------------------------- « Les technologies… » */

	/* Six logos : une grille de deux colonnes (une carte de 165 px de haut par logo, avant). */
	.as-partner-1-logo {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0;
	}
	.as-partner-1-logo-single {
		width: auto !important;
		height: 96px !important;
		min-height: 0 !important;
		padding: 12px !important;
		margin: 0 !important;
		display: grid;
		place-items: center;
	}
	.as-partner-1-logo-single img {
		max-width: 120px !important;
		max-height: 30px !important;
		width: auto !important;
		height: auto !important;
	}
	.as-partner-1-logo-single .number {
		position: absolute;
		right: 10px;
		bottom: 6px;
		font-size: 13px !important;
		line-height: 1;
		opacity: 0.6;
	}
	.as-partner-1-wrap > img,
	.as-partner-1-wrap .img-elm,
	.as-partner-1-wrap [class*="-shape"] {
		display: none !important;
	}

	/* ------------------------------------------- « Nos services principaux » */

	.as-services-1-sec-title {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.as-services-1-sec-title .img-elm {
		display: none !important;
	}
	.as-services-1-item {
		padding: 22px 18px !important;
		border-radius: 16px;
	}
	.as-services-1-item .tx-title,
	.as-services-1-item h3,
	.as-services-1-item h4 {
		font-size: 22px !important;
		line-height: 1.25;
	}

	/* -------------------------------------------------- réalisations */

	.as-portfolio-1-area .as-sec-title-1,
	.as-portfolio-1-area .as-portfolio-1-content {
		text-align: left !important;
		justify-content: flex-start !important;
	}
	.as-portfolio-1-area .as-portfolio-1-content {
		flex-direction: column;
		align-items: flex-start !important;
		gap: 16px;
	}

	/* ------------------------------------------- « Ils nous ont fait confiance » */

	.as-partner-3-area .as-partner-3-big-title,
	.as-partner-3-area .nts-titre-confiance {
		text-align: left;
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Étiquettes des services : plus petites, en ligne, au lieu d'une pile centrée de six blocs. */
	.as-cta-1-experi {
		padding: 24px 16px !important;
		border-radius: 18px;
	}
	.as-cta-1-experi-services {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: flex-start !important;
		gap: 8px !important;
	}
	.as-cta-1-experi-services .tx-cta-tag {
		width: auto !important;
		font-size: 15px !important;
		line-height: 1.3;
		padding: 10px 14px !important;
		margin: 0 !important;
		border-radius: 999px;
		transform: none !important;
	}

	/* -------------------------------------------- « Travaillons ensemble » */

	.as-cta-1-bg {
		padding-top: 72px !important;
	}
	.as-cta-1-content .title-1 {
		font-size: 48px !important;
		line-height: 1.05;
	}
	.as-cta-1-content .title-2 {
		font-size: 40px !important;
	}
	.as-cta-1-content .btn-wrap {
		gap: 12px !important;
		flex-direction: column;
		align-items: flex-start;
	}
	.as-cta-1-content .as-pr-btn-1 {
		min-height: 48px;
	}
	.as-cta-1-img-1,
	.as-cta-1-img-2 {
		max-width: 46%;
	}

	/* ----------------------------------------------- « Notre méthode » */

	.as-process-1-sec-title .left,
	.as-process-1-sec-title .left * {
		text-align: left !important;
	}
	.as-process-1-sec-title .as-sec-title-1,
	.as-process-1-sec-title h2 {
		white-space: normal !important;
	}
	.as-process-1-card {
		padding: 24px 20px !important;
		min-height: 0 !important;
		height: auto !important;
		margin-bottom: 12px;
	}
	.as-process-1-card .title,
	.as-process-1-card h3,
	.as-process-1-card h4 {
		font-size: 24px !important;
		line-height: 1.2;
		margin-top: 16px !important;
		margin-bottom: 16px !important;
	}
	.as-process-1-card p {
		color: #cbd5e1 !important;
	}

	/* ---------------------------------------- « Ce qui nous distingue », FAQ */

	.as-faqs-1-area .as-sec-title-1 {
		text-align: left !important;
	}
	.as-faqs-1-area .nav-link {
		min-height: 44px;
		font-size: 16px !important;
	}
	.as-faqs-1-area .accordion-button,
	.as-faqs-1-area [class*="accordion"] h3,
	.as-faqs-1-area [class*="accordion"] h4 {
		font-size: 17px !important;
		line-height: 1.35;
	}

	/* ------------------------------------- « Votre projet commence ici » */

	/* Le cadre gris de 10 px autour des deux cartes blanches : retiré. */
	.as-cta-2-left-top {
		background: transparent !important;
		padding: 0 !important;
		gap: 12px;
	}
	.as-cta-2-booking,
	.as-cta-2-manager {
		border-radius: 18px !important;
		border: 1px solid var(--nts-trait);
	}
	.as-cta-2-booking {
		padding: 28px 22px !important;
	}
	.as-cta-2-manager {
		margin-top: 12px;
		display: flex;
		align-items: center;
		gap: 16px;
		text-align: left !important;
	}
	.as-cta-2-manager .img-elm {
		flex: 0 0 72px;
		width: 72px !important;
		height: 72px !important;
		margin: 0 !important;
	}
	.as-cta-2-manager .text-elm {
		font-size: 18px !important;
		line-height: 1.35;
		text-align: left !important;
		margin: 0 !important;
	}
	.as-cta-2-projects {
		padding: 28px 22px !important;
		border-radius: 18px !important;
	}
	.as-cta-2-projects .title-x-btn {
		margin-bottom: 28px !important;
	}
	.as-cta-2-form-wrap {
		padding: 32px 20px !important;
		border-radius: 18px !important;
	}
	.as-cta-2-form-wrap .title {
		font-size: 24px !important;
		line-height: 1.25;
	}
	.as-cta-2-form-content {
		margin-bottom: 20px !important;
	}

	/* -------------------------------------------------------- pied de page */

	.as-footer-1-wrap {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 16px !important;
		margin-bottom: 40px !important;
	}
	.as-footer-1-widget {
		width: auto !important;
	}
	.as-footer-1-widget:last-child {
		grid-column: 1 / -1;
	}
	.as-footer-1-widget-title {
		font-size: 19px !important;
		margin-bottom: 12px !important;
	}
	.as-footer-1-menu a {
		display: inline-flex;
		align-items: center;
		min-width: 44px;
		min-height: 44px;
		padding: 0;
		font-size: 16px;
	}
	.as-footer-1-big-email {
		font-size: 22px !important;
		padding: 12px 22px !important;
	}
	.as-footer-1-logo,
	.as-footer-1-logo img {
		width: 150px !important;
		height: auto !important;
	}
	.as-footer-1-bottom {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
	.as-footer-1-bottom .as-p-1,
	.as-footer-1-bottom-link a {
		font-size: 14px !important;
	}
	.as-footer-1-bottom-link {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 18px;
	}
	.as-footer-1-bottom-link a {
		padding: 10px 0;
	}

	/* ------------------------------------------------ pages intérieures */

	/* Bandeau de titre : moins haut, titre à une taille qui tient dans la largeur. */
	.as-breadcrumb-area {
		padding-top: 128px !important;
		padding-bottom: 56px !important;
	}
	.as-breadcrumb-title {
		font-size: clamp(2rem, 1.2rem + 4vw, 2.5rem) !important;
		line-height: 1.12 !important;
		overflow-wrap: anywhere;
	}
	.as-breadcrumb-wrap {
		gap: 16px !important;
	}
	.as-breadcrumb-list a,
	.as-breadcrumb-list a span,
	.as-breadcrumb-list span {
		font-size: 15px !important;
		line-height: 24px !important;
	}
	.as-breadcrumb-list a {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.as-breadcrumb-list a::after {
		top: 50% !important;
	}
	.as-breadcrumb-list .tx-breadIcon {
		margin-top: 10px;
	}
	.page-area.pt-120 {
		padding-top: 40px !important;
	}
	/* Fil d'Ariane : le titre de la page en cours répète le grand titre juste au-dessus ; sur
	   téléphone, il passait à la ligne sous l'icône. Il reste « NTS / Rubrique ». */
	.as-breadcrumb-list .taBcrumb-end {
		display: none !important;
	}
	.as-breadcrumb-list li:nth-last-child(2) a::after {
		content: none !important;
	}
	/* Le thème centre les éléments du fil : un long nom de rubrique passait à la ligne, centré,
	   loin de l'icône. Alignés à gauche, sur une ligne si possible. */
	.as-breadcrumb-list .bread-crumb {
		justify-content: flex-start !important;
		row-gap: 0;
	}
	.as-breadcrumb-list .bread-crumb li {
		max-width: 100%;
	}
	.as-breadcrumb-list .bread-crumb li a span {
		white-space: normal;
	}

	/* Pages de service : la grande phrase d'introduction faisait dix lignes de 29 px. */
	.as-about-3-sec-title {
		font-size: 22px !important;
		line-height: 1.35 !important;
	}
	.as-about-3-illus-1 {
		display: none !important;
	}
	/* Liste sombre « Nos services » : les intitulés tiennent sur la largeur (ils s'effaçaient
	   en fondu au bord de l'écran). */
	.as-services-3-accordion .item-title .text {
		font-size: 20px !important;
		line-height: 1.3;
	}

	/* Nos projets : « Fonctionnalités » en police à chasse fixe de 40 px se coupait en
	   « Fonctionnalité / s ». */
	.as-price-1-wrap .title,
	.as-price-1-wrap h3,
	.as-price-1-wrap h4 {
		font-family: var(--as-font-1) !important;
		font-size: 20px !important;
		line-height: 1.3;
		overflow-wrap: anywhere;
	}
	.as-price-1-wrap {
		gap: 16px !important;
	}

	/* Pages de service : héros. Le titre « Développement sur mesure » sortait de l'écran et le
	   grand « NTS » décoratif passait sur le texte. */
	.as-hero-3-area .title,
	.as-hero-3-area h1 {
		font-size: clamp(2rem, 1.1rem + 4.6vw, 2.5rem) !important;
		line-height: 1.1 !important;
		overflow-wrap: anywhere;
	}
	/* La photo du héros entrait en glissant depuis la gauche : une coupure verticale restait à
	   l'écran pendant plus d'une seconde. Sur téléphone, elle est là tout de suite. */
	.as-hero-3-area [class*="as-hero-3-img-"] img {
		transform: none !important;
		translate: none !important;
	}
	/* Le texte du héros passe sur la photo entière : un voile bleu nuit le garde lisible. */
	.as-hero-3-img-1::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgba(1, 13, 26, 0.6) 0%, rgba(1, 13, 26, 0.8) 100%);
		pointer-events: none;
	}
	.as-hero-3-area .big-title,
	.as-hero-3-area [class*="big-title"] {
		display: none !important;
	}

	/* « Une seule expertise, quatre leviers » : les vignettes en orbite deviennent une grille
	   de trois, sous le titre. */
	.as-faqs-3-top {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px;
		height: auto !important;
		min-height: 0 !important;
		padding: 0 !important;
	}
	.as-faqs-3-top-bg-circle {
		display: none !important;
	}
	.as-faqs-3-top-content {
		grid-column: 1 / -1;
		order: -1;
		position: static !important;
		transform: none !important;
		text-align: left !important;
		margin-bottom: 8px;
	}
	.as-faqs-3-top [class*="as-faqs-3-top-img-"] {
		position: static !important;
		width: auto !important;
		height: auto !important;
		aspect-ratio: 1;
		border-radius: 14px;
		overflow: hidden;
		transform: none !important;
		margin: 0 !important;
	}
	.as-faqs-3-top .as-faqs-3-top-img-1 {
		display: none !important;
	}
	.as-faqs-3-top [class*="as-faqs-3-top-img-"] img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover;
	}

	/* Articles du blog : lecture confortable. */
	.single-post .tx-page-content p,
	.blog-details-content p,
	.as-blog-details p {
		font-size: 17px;
		line-height: 1.7;
	}

	/* Études de cas : intro et faits. */
	.nts-cas {
		font-size: 16px;
	}
	.nts-cas .nts-cas-intro {
		font-size: 18px;
	}
	.nts-cas-cta {
		margin-top: 40px;
	}
	.nts-btn {
		min-height: 48px;
	}
	/* Titres de cartes cliquables (pages de service) : une ligne de 20 px de haut ; la zone de
	   toucher passe à 44 px sans déplacer le texte. */
	h3.as-h-1.title > a,
	h4.as-h-1.title > a {
		display: inline-block;
		padding: 12px 0;
		margin: -12px 0;
	}

	/* Fiche du projet : le lien vers le site du produit, seul dans sa case. */
	.nts-cas-faits dd a {
		display: inline-block;
		padding: 11px 0;
		margin: -11px 0;
	}

	/* Formulaire : case de consentement de 24 px, texte d'aide lisible. */
	.frm_forms.with_frm_style .frm_checkbox input[type="checkbox"] {
		width: 24px !important;
		height: 24px !important;
		margin-right: 8px !important;
		vertical-align: -6px;
	}
	.frm_forms .frm_description,
	.frm_forms .frm_description a {
		font-size: 14px !important;
		line-height: 1.5 !important;
	}
}

/* Très petits écrans (360 px) : le bouton de l'en-tête et le menu tiennent sur une ligne. */
@media (max-width: 380px) {
	.as-header-1-action-link .as-pr-btn-1 {
		padding: 8px 12px !important;
		font-size: 14px;
	}
	.as-hero-1-area .guaranteed {
		font-size: 16px;
	}
}

/* L'appareil demande moins d'animations : aucune, sur toutes les tailles d'écran. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.wow {
		visibility: visible !important;
	}
}