/* =====================================================================================================================
   TAKE-TECH Nova 2.0.0 — couche moderne posée sur le thème TAKE-TECH (mêmes contenus, même charte : marine / or,
   Archivo, angles droits, filets de 2 px). Profondeur (verre, lueurs), mouvement (bordures animées, cascades, 3D)
   et finitions — sur ordinateur ET téléphone. Tout est désactivé quand le système demande moins d'animations.
   ===================================================================================================================== */

@property --nova-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.nova {
	--nova-or: var(--color-accent);
	--nova-marine: var(--color-accent-2-800);
	--nova-verre: color-mix(in srgb, #ffffff 9%, transparent);
	--nova-verre-bord: color-mix(in srgb, #ffffff 22%, transparent);
	--nova-lueur: 0 0 0 1px color-mix(in srgb, var(--color-accent) 55%, transparent), 0 10px 40px -8px color-mix(in srgb, var(--color-accent) 55%, transparent);
	--nova-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------------------------------------------------------------------------------------- Barre de lecture, en-tête */

.nova-lecture {
	position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 9999; pointer-events: none;
	background: linear-gradient(90deg, var(--color-accent-600), var(--color-accent), var(--color-accent-300));
	box-shadow: 0 0 12px color-mix(in srgb, var(--color-accent) 70%, transparent);
	transform-origin: left; transform: scaleX(0);
}
.nova .tt-entete { transition: background .35s, box-shadow .35s, border-color .35s; }
.nova.nova-defile .tt-entete {
	background: color-mix(in srgb, var(--color-bg) 78%, transparent);
	-webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
	box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--nova-marine) 60%, transparent);
	border-bottom-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
}

/* ----------------------------------------------------------------------------------------------- Apparitions */

.nova.tt-js [data-reveal], .tt-js .nova [data-reveal] { transition: opacity 1s var(--nova-ease), transform 1s var(--nova-ease), filter 1s var(--nova-ease); }
.tt-js [data-reveal].tt-cache { filter: blur(8px); }
.tt-js [data-reveal] > * { transition: opacity .8s var(--nova-ease), transform .8s var(--nova-ease); transition-delay: calc(var(--i, 0) * 70ms); }
.tt-js [data-reveal].tt-cache > * { opacity: 0; transform: translateY(18px); }

/* --------------------------------------------------------------------------------------------------- Boutons */

.nova .btn { position: relative; overflow: hidden; isolation: isolate; transition: transform .35s var(--nova-ease), box-shadow .35s, background .25s, color .25s; }
.nova .btn-primary::after, .nova .tt-btn-marine::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, #ffffff 55%, transparent) 50%, transparent 70%);
	transform: translateX(-120%);
}
.nova .btn-primary:hover::after, .nova .tt-btn-marine:hover::after, .nova .btn-primary:focus-visible::after { transform: translateX(120%); transition: transform .8s var(--nova-ease); }
.nova .btn-primary:hover { box-shadow: var(--nova-lueur); }
.nova .tt-btn-marine:hover { box-shadow: 0 10px 34px -10px color-mix(in srgb, var(--nova-marine) 80%, transparent); }
.nova-aimant { will-change: transform; }

/* ------------------------------------------------------------------------------------------------- Lueur des cartes */

.nova-spot { position: relative; isolation: isolate; }
.nova-spot::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s;
	background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 60%);
}
.nova-spot:hover::before, .nova-spot:focus-within::before { opacity: 1; }
/* Bordure qui s'allume au survol, en suivant le pointeur. */
.nova-spot::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
	padding: 1px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
	background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), var(--color-accent), transparent 70%);
}
.nova-spot:hover::after { opacity: 1; }

/* --------------------------------------------------------------------------------------------------------- Héros */

.nova .tt-hero::after {
	content: ""; position: absolute; inset: auto 0 0 0; height: 40%; pointer-events: none; z-index: 0;
	background: linear-gradient(to top, color-mix(in srgb, var(--color-bg) 85%, transparent), transparent);
}
.nova .tt-hero__titre .tt-surligne { position: relative; overflow: hidden; }
.nova .tt-hero__titre .tt-surligne::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, #ffffff 65%, transparent) 50%, transparent 65%);
	transform: translateX(-130%); animation: nova-reflet 6s 1.2s var(--nova-ease) infinite;
}
@keyframes nova-reflet { 0%, 55% { transform: translateX(-130%); } 80%, 100% { transform: translateX(130%); } }
.nova .tt-hero__chapo { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.nova .tt-chiffres { background: color-mix(in srgb, var(--color-bg) 80%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nova .tt-chiffre__valeur { background: linear-gradient(180deg, var(--color-text) 40%, var(--color-accent-2-500)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* --------------------------------------------------------------------------------- Bande des partenaires (clients) */

/* Ordinateur : bande inchangée. Téléphone : plus d'étiquette « Ils nous font confiance » figée sur la gauche ; logos plus serrés et plus lisibles. */
@media (max-width: 767px) {
	.nova .tt-clients { display: block; }
	.nova .tt-clients__libelle {
		position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
		clip: rect(0 0 0 0); white-space: nowrap; border: 0;
	}
	.nova .tt-clients__piste { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
	.nova .tt-clients__liste { animation-duration: 26s; }
	.nova .tt-client { width: 128px; height: 72px; padding: 12px 16px; border-right: 0; }
	.nova .tt-client img { max-height: 34px; max-width: 100%; filter: none; opacity: .9; }
}

/* -------------------------------------------------------------------- « En mouvement — Ce que nous construisons » */

.nova-diapo .tt-diapo__media img, .nova-diapo .tt-diapo__media video { object-position: 68% 50%; }
.nova-diapo .tt-diapo__media.is-actif img { animation: nova-zoom 9s ease-out both; }
@keyframes nova-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.nova-diapo .tt-diapo__voile {
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--nova-marine) 94%, transparent) 0%, color-mix(in srgb, var(--nova-marine) 82%, transparent) 34%, color-mix(in srgb, var(--nova-marine) 35%, transparent) 56%, transparent 74%),
		linear-gradient(0deg, color-mix(in srgb, var(--nova-marine) 80%, transparent) 0%, transparent 38%);
}
.nova-diapo__grain {
	position: absolute; inset: 0; pointer-events: none; opacity: .5;
	background-image: radial-gradient(color-mix(in srgb, #ffffff 9%, transparent) 1px, transparent 1.2px); background-size: 4px 4px;
	-webkit-mask-image: linear-gradient(90deg, #000, transparent 60%); mask-image: linear-gradient(90deg, #000, transparent 60%);
}
.nova-verre { background: var(--nova-verre); border-color: var(--nova-verre-bord) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Logos des technologies de la diapositive. */
.nova-technos { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; max-width: 640px; }
.nova-technos li {
	display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; font-size: 13px; font-weight: 600;
	color: var(--color-bg); background: var(--nova-verre); border: 1px solid var(--nova-verre-bord);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	opacity: 0; transform: translateY(10px); transition: opacity .6s var(--nova-ease), transform .6s var(--nova-ease), border-color .3s;
	transition-delay: calc(.25s + var(--i, 0) * 80ms);
}
.tt-diapo__texte.is-actif .nova-technos li { opacity: 1; transform: none; }
.nova-technos li:hover { border-color: var(--color-accent); }
.nova-technos .nova-logo { width: 26px; height: 26px; padding: 4px; background: #fff; fill: var(--logo, var(--nova-marine)); flex: none; }
.nova-logo--initiale { width: 26px; height: 26px; display: inline-grid; place-items: center; background: #fff; color: var(--nova-marine); font-weight: 800; font-size: 13px; }

/* Onglets : verre, pictogramme, bordure lumineuse qui tourne autour de l'onglet actif. */
.nova-onglets { gap: 10px; border-top: 0 !important; }
.nova-onglet {
	flex-direction: row !important; align-items: center; gap: 12px !important; padding: 14px 16px !important;
	background: var(--nova-verre); border: 1px solid var(--nova-verre-bord) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	transition: transform .4s var(--nova-ease), background .3s, border-color .3s, box-shadow .4s; isolation: isolate; overflow: hidden;
}
.nova-onglet:hover, .nova-onglet:focus-visible { transform: translateY(-3px); background: color-mix(in srgb, #ffffff 14%, transparent); }
.nova-onglet::before {
	content: ""; position: absolute; inset: -1px; z-index: -1; padding: 1.5px; opacity: 0; transition: opacity .4s;
	background: conic-gradient(from var(--nova-angle), transparent 0 60%, var(--color-accent-300), var(--color-accent), transparent 90%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
	animation: nova-tour 3.2s linear infinite;
}
.nova-onglet[aria-current="true"] { background: color-mix(in srgb, var(--nova-marine) 55%, transparent); box-shadow: 0 18px 50px -20px color-mix(in srgb, var(--color-accent) 70%, transparent); }
.nova-onglet[aria-current="true"]::before { opacity: 1; }
@keyframes nova-tour { to { --nova-angle: 360deg; } }
.nova-onglet .tt-diapo__barre { left: 0; right: 0; top: auto; bottom: 0; height: 2px; }
.nova-onglet .tt-diapo__barre span { box-shadow: 0 0 10px var(--color-accent); }
.nova-onglet__picto {
	flex: none; width: 42px; height: 42px; display: grid; place-items: center; color: var(--color-accent-300);
	border: 1px solid var(--nova-verre-bord); background: color-mix(in srgb, var(--nova-marine) 40%, transparent); transition: color .3s, background .3s, transform .5s var(--nova-ease);
}
.nova-onglet__picto svg { width: 22px; height: 22px; }
.nova-onglet[aria-current="true"] .nova-onglet__picto { color: var(--nova-marine); background: var(--color-accent); transform: rotate(-6deg) scale(1.04); }
.nova-onglet__textes { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

@media (max-width: 767px) {
	.nova-diapo { height: auto; min-height: 640px; }
	.nova-diapo .tt-diapo__media img { object-position: 82% 50%; }
	.nova-diapo .tt-diapo__voile { background: linear-gradient(0deg, color-mix(in srgb, var(--nova-marine) 92%, transparent) 0%, color-mix(in srgb, var(--nova-marine) 72%, transparent) 55%, color-mix(in srgb, var(--nova-marine) 40%, transparent) 100%); }
	.nova-onglets { display: flex !important; overflow-x: auto; gap: 8px; margin: 0 calc(-1 * var(--tt-gouttiere, 16px)); padding: 4px var(--tt-gouttiere, 16px) 6px; scrollbar-width: none; scroll-snap-type: x mandatory; }
	.nova-onglets::-webkit-scrollbar { display: none; }
	.nova-onglet { flex: 0 0 auto !important; min-width: 148px; padding: 10px 12px !important; scroll-snap-align: start; }
	.nova-onglet__picto { width: 34px; height: 34px; }
	.nova-onglet__picto svg { width: 18px; height: 18px; }
	.nova-technos li { font-size: 12px; padding: 4px 10px 4px 4px; }
	.nova-technos .nova-logo, .nova-logo--initiale { width: 22px; height: 22px; padding: 3px; }
}

/* ------------------------------------------------------------------------------------------------- Effets 3D (three.js) */

.nova-a-3d { position: relative; isolation: isolate; }
.nova-3d { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--nova-ease); overflow: hidden; }
.nova-3d.is-pret { opacity: 1; }
.nova-3d canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.nova-a-3d > :not(.nova-3d):not(.tt-bandeau__fond) { position: relative; z-index: 1; }
.tt-bandeau.nova-a-3d .nova-3d { z-index: 1; mix-blend-mode: screen; }
.tt-bandeau.nova-a-3d > .tt-conteneur { z-index: 2; }
.tt-techno.nova-a-3d .nova-3d.is-pret { opacity: .85; }
.tt-poster.nova-a-3d .nova-3d.is-pret { opacity: 1; }
.tt-faq.nova-a-3d .nova-3d.is-pret { opacity: .55; }
@media (max-width: 879px) { .tt-techno.nova-a-3d .nova-3d.is-pret { opacity: .28; } }

/* ------------------------------------------------------------------------------------------ Services, méthode, projets */

.nova .tt-carte-service { transition: background .35s, color .35s, transform .45s var(--nova-ease), box-shadow .45s; }
.nova .tt-carte-service:hover, .nova .tt-carte-service:focus-visible { transform: translateY(-6px); box-shadow: 0 24px 50px -24px color-mix(in srgb, var(--nova-marine) 80%, transparent); z-index: 2; }
.nova .tt-methode { background:
	radial-gradient(900px 500px at 85% 0%, color-mix(in srgb, var(--color-accent-2-500) 45%, transparent), transparent 70%),
	var(--color-accent-2-800); }
.nova .tt-methode__grille > li { transition: background .35s, transform .45s var(--nova-ease); }
.nova .tt-methode__grille > li:hover { background: color-mix(in srgb, #ffffff 6%, transparent); transform: translateY(-4px); }
.nova .tt-carte-projet { transition: transform .5s var(--nova-ease), box-shadow .5s; transform-style: preserve-3d; }
.nova .tt-carte-projet:hover { box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--nova-marine) 85%, transparent); }
.nova .tt-carte-projet img { transition: transform 1.2s var(--nova-ease), filter .6s; }
.nova .tt-carte-projet:hover img { transform: scale(1.05); }
.nova .tt-titre-section { position: relative; }

/* --------------------------------------------------------------------------------------------------- Technologies */

.nova .tt-techno__liste li { background: color-mix(in srgb, var(--color-bg) 72%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); align-items: center; }
.nova .tt-techno__liste li > span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.nova .tt-techno__liste .nova-logo { width: 22px; height: 22px; fill: var(--logo, var(--nova-marine)); flex: none; transition: transform .5s var(--nova-ease); }
.nova .tt-techno__liste li:hover .nova-logo { transform: rotate(-8deg) scale(1.15); }
.nova .tt-techno__liste li:hover .nova-logo.is-noir, .nova .tt-techno__liste .nova-logo.is-noir { fill: var(--color-text); }
.nova .tt-techno__liste .nova-logo--initiale { width: 22px; height: 22px; font-size: 11px; background: var(--nova-marine); color: var(--color-bg); }

/* Technologies classées par domaine : titre fixé à gauche (ordinateur), domaines empilés à droite. */
.nova-techno .tt-techno__grille { align-items: start; }
@media (min-width: 881px) { .nova-techno .tt-techno__intro { position: sticky; top: calc(var(--tt-entete, 72px) + 24px); } }
.nova-techno__compte { margin: 20px 0 0; font-size: 15px; color: var(--color-neutral-700); }
.nova-techno__compte strong { font-size: 22px; color: var(--color-text); font-variant-numeric: tabular-nums; }
.nova-techno__domaines { border-left: 2px solid var(--color-divider); }
.nova-techno__domaine + .nova-techno__domaine { border-top: 2px solid var(--color-divider); }
.nova-techno__titre {
	display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0; padding: 16px 20px;
	font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--color-text);
	background: linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 70%);
	border-bottom: 1px solid var(--color-divider);
}
.nova-techno__titre::before { content: ""; width: 10px; height: 10px; background: var(--color-accent); flex: none; margin-right: -2px; }
.nova-techno__titre span { flex: 1; }
.nova-techno__titre small { font-size: 12px; color: var(--color-neutral-700); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.nova-techno .tt-techno__liste { border-left: 0; border-top: 0; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.nova-techno .tt-techno__liste li > span:first-child { min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
@media (max-width: 880px) {
	.nova-techno__domaines { border-left: 0; border-top: 2px solid var(--color-divider); }
	.nova-techno .tt-techno__liste { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
	.nova-techno .tt-techno__liste li { padding: 18px 14px; font-size: 15px; }
}

/* ----------------------------------------------------------------------------------------------- Appel final, pied */

.nova .tt-poster { background: radial-gradient(800px 400px at 90% 10%, var(--color-accent-300), transparent 70%), var(--color-accent); }
.nova .tt-pied { position: relative; }
.nova .tt-pied::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2;
	background: linear-gradient(90deg, transparent, var(--color-accent), transparent); background-size: 50% 100%; background-repeat: no-repeat;
	animation: nova-balaye 6s linear infinite;
}
@keyframes nova-balaye { from { background-position: -50% 0; } to { background-position: 150% 0; } }

/* Formulaire de devis de la page Contact : un peu de profondeur (jamais dans la fenêtre plein écran du téléphone). */
.nova .tt-bandeau--contact .tt-devis { box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--nova-marine) 70%, transparent); }
.nova .tt-popup .tt-devis { box-shadow: none; }
/* Téléphone : la fenêtre de devis couvre tout l'écran ; le flou du fond (coûteux) ne servirait à rien. */
@media (max-width: 900px) {
	.nova .tt-popup::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* --------------------------------------------------------------------------------------------------- Accessibilité */

@media (prefers-reduced-motion: reduce) {
	.nova *, .nova *::before, .nova *::after { animation: none !important; transition-duration: .01ms !important; }
	.nova-technos li { opacity: 1; transform: none; }
}
@media print { .nova-3d, .nova-lecture, .nova-diapo__grain { display: none !important; } }