/* ============================================================
   Technologia — Home (sombre premium). Mobile-first.
   Classes .tec-. Consomme les tokens --tec-*.
   Le nœud est scopé sous .tec-home pour ne pas heurter le header.
   ============================================================ */

.tec-home { background: var(--tec-home-bg, #070C16); color: #fff; font-family: var(--tec-font-sans); overflow-x: hidden; }
.tec-home * { box-sizing: border-box; }

/* ---- Header en variante SOMBRE sur la Home ---------------- */
body.tec-home-tpl { background: var(--tec-home-bg, #070C16); }
body.tec-home-tpl .tec-header { background: rgba(7,12,22,.80); border-bottom-color: rgba(255,255,255,.07); -webkit-backdrop-filter: saturate(140%) blur(16px); backdrop-filter: saturate(140%) blur(16px); }
/* AUCUN filtre sur le logo : la version « fond sombre » (logotype clair, symbole
   en bleus de marque) est servie directement par le header — cf.
   tec_header_logo_url(). Repeindre le logo fond clair avec
   `brightness(0) invert(1)` écrasait les facettes bleues du symbole en un bloc
   blanc uni. La maquette de référence n'applique aucun filtre non plus. */
/* Liens de premier niveau uniquement : les panneaux mega ont leur propre
   habillage sombre (megamenu.css) et ne doivent RIEN hériter d'ici. */
body.tec-home-tpl .tec-menu > li > a { color: rgba(255,255,255,.85); }
/* Menu CENTRÉ dans le header (maquette). Possible ici parce que la barre agent
   du header est masquée sur la Home ; ailleurs elle occupe le centre. */
@media (min-width: 1040px) {
	body.tec-home-tpl .tec-nav { margin-inline: auto; }
	body.tec-home-tpl .tec-actions { margin-left: 0; }
}
/* Survol : la COULEUR seule porte l'état, jamais une pastille grise claire
   (maquette « Home Sombre v4 »). */
body.tec-home-tpl .tec-menu > li > a:hover,
body.tec-home-tpl .tec-menu > li.current-menu-item > a { background: none; color: #fff; }
/* Emphase « Offres » en cyan signal sur fond sombre */
body.tec-home-tpl .tec-menu .tec-offres > a { color: var(--tec-agent-signal, #00C2FF); }
body.tec-home-tpl .tec-icon-btn, body.tec-home-tpl .tec-cart { color: #EAF0F8; }
body.tec-home-tpl .tec-icon-btn:hover, body.tec-home-tpl .tec-cart:hover { background: rgba(255,255,255,.08); }
body.tec-home-tpl .tec-burger-bar { background: #fff; }
/* La barre agent du header fait doublon avec le hero → on la masque sur la Home */
body.tec-home-tpl .tec-header .tec-agentbar { display: none; }
/* Le widget flottant WhatsApp (wp-whatsapp) n'existe pas dans le design de la Home
   → masqué uniquement ici (les autres pages le gardent). Réversible, sans
   désactiver le plugin. */
body.tec-home-tpl #wa { display: none !important; }

/* ---- Tiroir mobile (burger) en variante SOMBRE sur la Home ---
   Le drawer par défaut (header.css) est blanc : parfait sur les pages
   claires, mais il jurait sur la Home sombre. On l'aligne ici sur le
   même habillage que les panneaux méga desktop (#0C1526). Scopé
   body.tec-home-tpl → aucune incidence sur les autres pages. */
body.tec-home-tpl .tec-drawer {
	background: #0C1526;
	color: rgba(255,255,255,.82);
	box-shadow: 0 0 0 1px rgba(255,255,255,.06), 24px 0 60px rgba(0,0,0,.5);
}
body.tec-home-tpl .tec-drawer-title { color: #fff; }
body.tec-home-tpl .tec-drawer-close { color: #EAF0F8; }
body.tec-home-tpl .tec-drawer-close:hover { background: rgba(255,255,255,.08); }
body.tec-home-tpl .tec-drawer-menu > li { border-bottom-color: rgba(255,255,255,.08); }
body.tec-home-tpl .tec-drawer-menu a { color: rgba(255,255,255,.85); }
body.tec-home-tpl .tec-drawer-menu a:hover { color: #fff; }
body.tec-home-tpl .tec-drawer-menu .sub-menu a { color: rgba(255,255,255,.6); }
body.tec-home-tpl .tec-drawer-menu .tec-offres > a { color: var(--tec-agent-signal, #00C2FF); }
body.tec-home-tpl .tec-drawer-agent .search-field,
body.tec-home-tpl .tec-drawer-agent input[type="search"] {
	background: rgba(255,255,255,.06);
	border-color: rgba(255,255,255,.14);
	color: #fff;
}
body.tec-home-tpl .tec-drawer-agent input::placeholder { color: rgba(255,255,255,.5); }
body.tec-home-tpl .tec-drawer-scrim { background: rgba(0,0,0,.6); }

/* ---- HERO ------------------------------------------------- */
.tec-hero {
	position: relative; max-width: var(--tec-container-wide, 1200px); margin: 0 auto;
	padding: clamp(22px,4vw,44px) clamp(16px,5vw,40px) clamp(34px,5vw,58px);
	display: flex; flex-direction: column; align-items: center; text-align: left;
	background:
		radial-gradient(54% 56% at 50% 20%, rgba(0,194,255,.16), rgba(0,194,255,0) 60%),
		radial-gradient(90% 100% at 50% 120%, rgba(39,63,126,.45), rgba(39,63,126,0) 55%);
}
/* Badge d'intro : c'est un h1 (SEO/a11y) mais il doit garder l'apparence d'une
   petite ligne de texte — d'où la neutralisation des styles de titre du thème
   (police display, capitales, interlettrage). */
.tec-hero-badge {
	align-self: flex-start; margin: 0; display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--tec-font-sans); font-size: 13px; font-weight: 600; line-height: 1.3;
	text-transform: none; letter-spacing: normal; color: rgba(255,255,255,.85);
}
/* Puce hexagonale cyan contenant le check */
.tec-hero-badge-mark {
	flex: none; width: 30px; height: 30px; display: grid; place-items: center;
	clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
	background: rgba(0,194,255,.16); color: var(--tec-agent-signal, #00C2FF);
}
.tec-hero-flag { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: var(--tec-radius-pill); padding: 2px 9px; font-size: 11px; line-height: 1.7; color: rgba(255,255,255,.82); }

/* Produit hero.
   z-index:2 > celui du wrapper de la barre agent (1) : même si le halo
   elliptique cyan déborde vers le haut, il passe DERRIÈRE la ligne titre/prix,
   jamais devant le texte. */
.tec-hero-product { position: relative; z-index: 2; margin: clamp(8px,2vw,16px) 0 clamp(10px,2vw,20px); width: min(600px, 92vw); }
/* Le FLOTTEMENT et l'ombre portée sont sur le bloc entier (carte + méta) :
   c'est le geste de la maquette, la carte ne décolle pas seule de son libellé. */
.tec-hero-product-float { position: relative; animation: tec-float 6.5s ease-in-out infinite; filter: drop-shadow(0 28px 46px rgba(0,0,0,.62)); }
.tec-hero-card-wrap { position: relative; width: 100%; }
/* Halo cyan derrière la carte — 120%×150%, comme la référence. */
.tec-hero-product-glow { position: absolute; left: 50%; top: 42%; transform: translate(-50%,-50%); width: 120%; height: 150%; border-radius: 50%; background: radial-gradient(circle, rgba(0,194,255,.28), rgba(0,194,255,0) 68%); pointer-events: none; }
/* Aucun ratio imposé à la carte : la photo occupe TOUTE la largeur et la carte
   prend sa hauteur (width:100% / height:auto). C'est ce qui supprime les bandes
   latérales — le fond dégradé n'est plus jamais visible autour de l'image.
   Coins arrondis identiques en haut et en bas (22px + overflow:hidden). */
.tec-hero-card { position: relative; display: block; width: 100%; border-radius: 22px; background: linear-gradient(180deg,#FFFFFF,#EDF2F8); border: 1px solid rgba(255,255,255,.5); box-shadow: 0 0 0 1px rgba(0,194,255,.25), 0 30px 60px rgba(0,0,0,.5), 0 0 50px rgba(0,194,255,.18); overflow: hidden; }
.tec-hero-card-img { display: block; width: 100%; height: auto; }
.tec-hero-card-node { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-grid; place-items: center; width: 34px; height: 34px; }
.tec-hero-card-node img { position: relative; z-index: 2; height: 22px; width: auto; filter: drop-shadow(0 0 4px rgba(0,194,255,.55)); }
/* Le halo du nœud sur la carte produit PULSE (animation tec-halo), contrairement
   à celui de la barre agent qui reste fixe.
   Sélecteur préfixé .tec-home : sans ça, la règle générique `.tec-home
   .tec-node-halo` (80px, déclarée plus bas) l'emporte et le halo déborde. */
.tec-home .tec-hero-card-node .tec-node-halo { width: 40px; height: 40px; background: radial-gradient(circle, rgba(0,194,255,.5), rgba(0,194,255,0) 68%); animation: tec-halo 3.4s ease-in-out infinite; }
.tec-hero-card-badge { position: absolute; top: 14px; right: 14px; z-index: 2; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tec-agent-ink,#0B7BA6); background: rgba(0,194,255,.12); border: 1px solid rgba(0,194,255,.32); border-radius: var(--tec-radius-pill); padding: 4px 10px; }
/* Ligne titre/prix : MÊME largeur que la carte, bases alignées (align-items:
   flex-end). flex-wrap:wrap → sur écran étroit le bloc prix passe dessous
   plutôt que d'écraser le titre ; jamais de débordement latéral. */
.tec-hero-card-meta { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; width: min(600px,92vw); margin-top: 16px; text-align: left; }
.tec-hero-card-meta-left { min-width: 0; }
/* margin-left:auto : quand la ligne passe sur deux rangées (mobile), le bloc
   prix reste collé au bord droit de la carte au lieu de retomber à gauche.
   Sans effet en desktop, où space-between le place déjà à droite. */
.tec-hero-card-meta-right { margin-left: auto; text-align: right; }
/* Titre d'affichage COURT : il tient sur une ligne parce qu'il est court à la
   source (champ « titre court » ou nom coupé avant les specs côté PHP).
   Aucune troncature CSS — ni text-overflow:ellipsis, ni -webkit-line-clamp :
   un titre ne doit jamais se terminer par « … ». */
.tec-hero-card-name { font-family: var(--tec-font-display); font-size: clamp(17px,2vw,20px); font-weight: 800; color: #fff; letter-spacing: -.01em; line-height: 1.25; text-align: left; text-transform: none; }
/* Micro-ligne de caractéristiques (produits sans variante) : équilibre la
   colonne gauche face aux deux lignes du bloc prix. */
.tec-hero-card-specs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-size: 12px; color: rgba(255,255,255,.7); }
.tec-hero-card-specs .tec-dot { opacity: .5; }
.tec-hero-card-swatches { display: flex; align-items: center; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.tec-hero-card-swatch { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.55); }
.tec-hero-card-swatch.is-active { color: #fff; }
.tec-hero-card-swatch-dot { width: 15px; height: 15px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.tec-hero-card-swatch.is-active .tec-hero-card-swatch-dot { box-shadow: 0 0 0 2px var(--tec-home-bg,#070C16), 0 0 0 4px var(--tec-agent-signal,#00C2FF); }
.tec-hero-card-price { display: flex; align-items: baseline; gap: 5px; justify-content: flex-end; }
.tec-hero-card-price .tec-price-num, .tec-hero-card-price .amount, .tec-hero-card-price bdi { font-family: var(--tec-font-price); font-weight: 800; font-size: 26px; color: #4FD6FF; font-variant-numeric: tabular-nums; text-shadow: 0 0 16px rgba(0,194,255,.4); }
/* « DT » : symbole monétaire de WooCommerce, ramené à la taille de la maquette. */
.tec-hero-card-price .tec-price-cur,
.tec-hero-card-price .woocommerce-Price-currencySymbol { font-family: var(--tec-font-sans); font-size: 14px; font-weight: 700; color: rgba(255,255,255,.7); text-shadow: none; }
.tec-hero-card-note { font-size: 11px; color: rgba(255,255,255,.68); margin-top: 3px; }

/* Barre agent (hero).
   Le wrapper ne contient QUE le halo elliptique, ses points et la barre : c'est
   ce qui garantit que les ellipses restent centrées sur la barre et ne croisent
   jamais la ligne de chips (qui est un frère du wrapper, pas un enfant). */
.tec-hero-agentwrap { position: relative; z-index: 1; width: min(760px,100%); margin: 0 auto; display: grid; place-items: center; padding-block: clamp(14px,2vw,22px); }
/* Décor pur : jamais cliquable, et sous le contenu (la barre est en z-index:5). */
.tec-hero-orbit { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }
.tec-hero-orbit--1 { width: min(720px,100%); height: clamp(112px,15vw,144px); border: 1px solid rgba(0,194,255,.24); box-shadow: 0 0 64px rgba(0,194,255,.14), inset 0 0 56px rgba(0,194,255,.06); }
.tec-hero-orbit--2 { width: min(540px,84%); height: clamp(86px,12vw,108px); border: 1px solid rgba(0,194,255,.12); }
/* Points lumineux posés sur les orbites (décor de la maquette) */
.tec-hero-spark { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }
.tec-hero-spark--1 { left: 8%; top: 44%; width: 7px; height: 7px; background: var(--tec-agent-signal,#00C2FF); box-shadow: 0 0 12px var(--tec-agent-signal,#00C2FF); }
.tec-hero-spark--2 { right: 9%; top: 32%; width: 5px; height: 5px; background: #7FE3FF; box-shadow: 0 0 9px #00C2FF; }
.tec-hero-spark--3 { right: 17%; bottom: 24%; width: 4px; height: 4px; background: #7FE3FF; box-shadow: 0 0 8px #00C2FF; }

/* Le nœud vit À L'INTÉRIEUR du pill : pas d'overflow:hidden ici (le halo flou
   doit pouvoir diffuser au-delà de la bordure), mais aucun élément net du nœud
   n'est posé à cheval sur elle. */
.tec-home .tec-agentbar {
	position: relative; z-index: 5; display: flex; align-items: center; gap: 13px;
	width: min(600px,92vw); margin: 0 auto; max-width: none;
	background: rgba(8,14,28,.86); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
	border: 1px solid rgba(0,194,255,.58); border-radius: var(--tec-radius-pill);
	padding: 9px 10px 9px 11px; box-shadow: 0 0 0 4px rgba(0,194,255,.11), 0 0 38px rgba(0,194,255,.18), 0 22px 50px rgba(0,0,0,.58);
}
.tec-home .tec-agentbar:focus-within { box-shadow: 0 0 0 4px rgba(0,194,255,.2), 0 0 38px rgba(0,194,255,.28); }
.tec-home .tec-agentbar .tec-agent-input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0; background: transparent; color: #fff; font: 500 clamp(15px,1.6vw,17px) var(--tec-font-sans); }
.tec-agent-input::placeholder { color: rgba(255,255,255,.5); }
/* min-height:auto — le thème impose 50px aux boutons, la maquette est à 42px. */
.tec-home .tec-agentbar .tec-agent-go { flex: none; display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; border-radius: var(--tec-radius-pill); padding: 12px 23px; min-height: auto; font: 700 14px/1.25 var(--tec-font-sans); color: #fff; background: linear-gradient(135deg,#0B7BA6,#00A6E0); white-space: nowrap; transition: filter var(--tec-dur-fast); }
.tec-agent-go:hover { filter: brightness(1.08); }
.tec-agent-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
/* Ligne « l'agent réfléchit » : révélée uniquement quand la barre a le focus. */
.tec-agent-thinking { display: none; align-items: center; justify-content: center; gap: 9px; margin-top: 14px; font-size: 13px; font-weight: 600; color: #7FE3FF; }
.tec-hero.is-agent-thinking .tec-agent-thinking { display: flex; }
.tec-agent-thinking i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tec-agent-signal,#00C2FF); box-shadow: 0 0 10px var(--tec-agent-signal,#00C2FF); animation: tec-breathe 1s ease-in-out infinite; }
.tec-chip { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.82); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); border-radius: var(--tec-radius-pill); padding: 7px 14px; text-decoration: none; transition: border-color var(--tec-dur-fast), color var(--tec-dur-fast), background var(--tec-dur-fast); }
.tec-chip:hover { border-color: var(--tec-agent-signal,#00C2FF); color: #fff; background: rgba(0,194,255,.1); }
.tec-hero-reassure { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; justify-content: center; margin-top: 13px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.72); }
.tec-hero-reassure-item { display: inline-flex; align-items: center; gap: 6px; }
.tec-hero-reassure .tec-dot { opacity: .35; }

/* ---- Nœud (scopé sous .tec-home) -------------------------- */
.tec-home .tec-node { position: relative; flex: none; display: grid; place-items: center; width: 54px; height: 54px; }
.tec-home .tec-node--sm { width: 26px; height: 26px; }
.tec-home .tec-node-core { position: relative; z-index: 2; height: 34px; width: auto; filter: brightness(0) invert(1) drop-shadow(0 0 7px rgba(0,194,255,.95)) drop-shadow(0 0 3px rgba(0,194,255,.85)); animation: tec-breathe 3.4s ease-in-out infinite; }
.tec-home .tec-node--sm .tec-node-core { height: 15px; }
.tec-home .tec-node-halo { position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle,rgba(0,194,255,.34),rgba(0,194,255,0) 70%); transform: translate(-50%,-50%); }
.tec-home .tec-node--sm .tec-node-halo { width: 34px; height: 34px; animation: tec-halo 3.4s ease-in-out infinite; }
/* Variante « bande agent » : 40px, halo 60px, cœur 26px — mêmes proportions que
   le nœud de base (34/54) donc cohérent avec les autres nœuds de la page.
   Aucun nœud redessiné : on ne fait que dimensionner le composant. */
.tec-home .tec-node--band { width: 40px; height: 40px; }
.tec-home .tec-node--band .tec-node-halo { width: 60px; height: 60px; animation: tec-halo 3.4s ease-in-out infinite; }
.tec-home .tec-node--band .tec-node-core { height: 26px; }
/* Petites orbites : elles restent à l'échelle du nœud (74/96px), jamais à celle
   du hero. Les puces sont accrochées dessus et tournent avec. */
.tec-home .tec-node-orbit { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(0,194,255,.4); transform: translate(-50%,-50%); pointer-events: none; }
.tec-home .tec-node-orbit.o1 { width: 74px; height: 74px; animation: tec-orbit 9s linear infinite; }
.tec-home .tec-node-orbit.o2 { width: 96px; height: 96px; border-color: rgba(0,194,255,.22); animation: tec-orbit-rev 14s linear infinite; }
.tec-home .tec-node-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--tec-agent-signal,#00C2FF); box-shadow: 0 0 8px var(--tec-agent-signal,#00C2FF); }
.tec-home .tec-node-dot--top { top: -3px; left: 50%; margin-left: -3px; }
.tec-home .tec-node-dot--bottom { bottom: -3px; left: 50%; margin-left: -3px; width: 4px; height: 4px; }
.tec-home .tec-node-dot--right { top: 50%; right: -3px; margin-top: -3px; width: 5px; height: 5px; }

/* Anneau « vivant » : respiration lente de l'ellipse inclinée. Le translate ET
   le rotate sont répétés dans CHAQUE keyframe — sans ça l'ellipse perd son
   centrage en cours d'animation et se retrouve à cheval sur la barre. */
.tec-home .tec-node--live .tec-node-live {
	position: absolute; left: 50%; top: 50%; width: 120px; height: 52px;
	border-radius: 50%; border: 1px solid rgba(0,194,255,.18); pointer-events: none;
	transform: translate(-50%,-50%) rotate(-14deg);
	animation: tec-live 3.6s cubic-bezier(.22,1,.36,1) infinite;
}
/* Ellipse statique inclinée (donne l'axe/la perspective au nœud) */
.tec-home .tec-node--live .tec-node-ring {
	position: absolute; left: 50%; top: 50%; width: 86px; height: 38px;
	border-radius: 50%; border: 1px solid rgba(0,194,255,.26); pointer-events: none;
	transform: translate(-50%,-50%) rotate(-14deg);
}
@keyframes tec-live {
	0%,100% { opacity: .35; transform: translate(-50%,-50%) rotate(-14deg) scale(.94); }
	50%     { opacity: .9;  transform: translate(-50%,-50%) rotate(-14deg) scale(1.06); }
}

/* ---- État « l'agent réfléchit » (focus de la barre) -------- */
/* Arc rotatif : inerte et invisible tant que le nœud ne pense pas. */
.tec-home .tec-node-think {
	position: absolute; left: 50%; top: 50%; width: 50px; height: 50px;
	border-radius: 50%; border: 2px solid rgba(0,194,255,.25);
	border-top-color: var(--tec-agent-signal,#00C2FF);
	transform: translate(-50%,-50%); pointer-events: none; opacity: 0;
}
.tec-home .tec-node.is-thinking .tec-node-think { opacity: 1; animation: tec-think .8s linear infinite; }
.tec-home .tec-node.is-thinking .tec-node-core { animation: tec-thinkpulse 1s ease-in-out infinite; }
.tec-home .tec-node.is-thinking .tec-node-orbit.o1 { animation-duration: 2.4s; }
.tec-home .tec-node.is-thinking .tec-node-orbit.o2 { animation-duration: 3.6s; }

@keyframes tec-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes tec-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes tec-halo { 0%,100% { opacity: .5; transform: translate(-50%,-50%) scale(1); } 50% { opacity: .9; transform: translate(-50%,-50%) scale(1.14); } }
@keyframes tec-orbit { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes tec-orbit-rev { to { transform: translate(-50%,-50%) rotate(-360deg); } }
@keyframes tec-think { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes tec-thinkpulse {
	0%,100% { transform: scale(1); filter: brightness(0) invert(1) drop-shadow(0 0 7px rgba(0,194,255,.95)) drop-shadow(0 0 3px rgba(0,194,255,.85)); }
	50%     { transform: scale(1.12); filter: brightness(0) invert(1) drop-shadow(0 0 13px rgba(0,194,255,1)) drop-shadow(0 0 5px rgba(0,194,255,.9)); }
}

/* ---- Bande confiance -------------------------------------- */
.tec-trustband { max-width: var(--tec-container-wide,1200px); margin: 0 auto; padding: clamp(4px,1vw,10px) clamp(16px,5vw,40px) clamp(22px,3vw,32px); }
.tec-trustband-grid { display: grid; grid-template-columns: 1fr; gap: 14px 26px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); border-radius: var(--tec-radius-2xl,18px); padding: clamp(18px,3vw,24px) clamp(20px,3vw,30px); }
.tec-trustband-item { display: flex; align-items: center; gap: 13px; }
.tec-trustband-ic { flex: none; width: 42px; height: 42px; border-radius: var(--tec-radius-md); background: rgba(0,194,255,.10); border: 1px solid rgba(0,194,255,.3); display: grid; place-items: center; color: #7FD6F2; }
.tec-trustband-t { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.95); line-height: 1.2; }
.tec-trustband-s { font-size: 12px; color: rgba(255,255,255,.68); }

/* ---- Sections --------------------------------------------- */
.tec-section { max-width: var(--tec-container-wide,1200px); margin: 0 auto; padding: clamp(26px,4vw,44px) clamp(16px,5vw,40px); }
.tec-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: clamp(18px,3vw,26px); }
/* En-tête univers : titre + sous-titre à gauche, flèches + « Voir tout » à droite */
.tec-section-head--univers { align-items: flex-end; }
.tec-section-head-main { min-width: 0; }
.tec-section-title { display: flex; align-items: center; gap: 10px; }
.tec-section-sub { margin-top: 7px; font-size: 14px; color: rgba(255,255,255,.7); }
.tec-univers-nav { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.tec-rail-arrow { flex: none; width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer;
	border-radius: 50%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16);
	color: rgba(255,255,255,.8); transition: border-color var(--tec-dur-fast), background var(--tec-dur-fast), color var(--tec-dur-fast); }
.tec-rail-arrow:hover { border-color: rgba(0,194,255,.5); background: rgba(0,194,255,.1); color: #fff; }
.tec-rail-arrow:disabled { opacity: .35; cursor: default; }
.tec-rail-arrow:disabled:hover { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.05); color: rgba(255,255,255,.8); }
/* Rail non défilable : les flèches restent visibles (présentes dans la maquette)
   mais inertes — l'état désactivé le signale. */
.tec-univers-nav[data-idle] .tec-rail-arrow { opacity: .35; pointer-events: none; }
.tec-univers-nav .tec-section-link { margin-left: 0; }
.tec-h2 { font-family: var(--tec-font-display); font-weight: 800; letter-spacing: -.02em; font-size: clamp(21px,3.4vw,30px); margin: 0; color: #fff; }
.tec-section-link { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--tec-agent-signal,#00C2FF); text-decoration: none; white-space: nowrap; }

/* Univers — rail scroll mobile */
.tec-univers-rail { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; scroll-snap-type: x mandatory; }
.tec-univers-rail::-webkit-scrollbar { display: none; }
.tec-univers-card { flex: 0 0 auto; width: clamp(150px,42vw,178px); scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 13px; background: #0C1424; border: 1px solid rgba(255,255,255,.08); border-radius: var(--tec-radius-lg); padding: 22px 12px; text-decoration: none; transition: transform var(--tec-dur-base) var(--tec-ease-out), border-color var(--tec-dur-base), box-shadow var(--tec-dur-base); }
.tec-univers-card:hover { transform: translateY(-4px); border-color: rgba(var(--uni,0,194,255),.45); box-shadow: 0 0 28px rgba(var(--uni,0,194,255),.14); }
/* Pastille : couleur d'accent propre à chaque univers, injectée par --uni.
   Le pictogramme reste clair (#EAF0F8) — c'est le fond et la bordure qui
   portent la couleur, conformément à la maquette. */
.tec-univers-badge { width: 54px; height: 54px; border-radius: 15px; background: rgba(var(--uni,0,194,255),.12); border: 1px solid rgba(var(--uni,0,194,255),.4); color: #EAF0F8; display: grid; place-items: center; }
.tec-univers-label { font-size: 13.5px; font-weight: 700; color: #EAF0F8; line-height: 1.25; text-align: center; }

/* ---- Sélection : grille + adaptation cartes WooCommerce Blocksy ------- */
/* La grille est sur .tec-selection ; les deux wrappers WC (div.woocommerce + ul.products)
   sont dissous (display:contents) pour que les li.product et .tec-catalogue
   soient des items directs de la même grille. */
.tec-selection {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
	gap: clamp(14px, 2vw, 20px);
}
#selection .tec-selection .woocommerce,
#selection .tec-selection ul.products { display: contents; list-style: none; margin: 0; padding: 0; }

/* Carte */
#selection .tec-selection li.product {
	display: flex; flex-direction: column;
	background: #0D1626 !important; border: 1px solid rgba(255,255,255,.09) !important;
	border-radius: 18px !important; overflow: hidden; padding: 0 !important;
	transition: transform var(--tec-dur-base) var(--tec-ease-out), border-color var(--tec-dur-base);
}
#selection .tec-selection li.product:hover { transform: translateY(-4px); border-color: rgba(0,194,255,.35); }

/* Zone image = PUITS PHOTO CLAIR (décision 2026-07-26).
   Pourquoi clair et non le gradient sombre du spec : 92% du catalogue (836/920)
   est photographié en studio sur fond BLANC opaque (JPG). Sur un puits sombre,
   chacune de ces photos posait un bloc blanc → cartes incohérentes entre elles.
   Un puits clair uniforme rend les 920 produits identiques, sans retoucher une
   seule image. La carte reste sombre premium (fond, chips, prix cyan, CTA).

   Teinte = BLANC PUR (--tec-surface-card) et non une teinte grisée : les photos
   studio étant en #FFFFFF, un puits #F4F8FC ferait réapparaître un rectangle
   blanc visible au centre. Le blanc pur les fond sans couture.

   Ratio 1:1 sur toutes les cartes → les titres démarrent à la même ligne dans la
   grille ; le CTA reste aligné en bas via margin-top:auto sur les actions.
   Blocksy force display:inline sur wp-post-image → override en block. */
#selection .tec-selection li.product figure {
	position: relative; margin: 0; flex-shrink: 0;
	aspect-ratio: 1 / 1;
	background: var(--tec-surface-card, #FFFFFF);
	overflow: hidden;
	/* Coins hauts alignés sur le rayon de la carte ; bas droit (le corps suit). */
	border-radius: var(--tec-radius-lg, 16px) var(--tec-radius-lg, 16px) 0 0;
	/* Le produit ne touche jamais les bords du puits. */
	padding: clamp(12px, 5%, 20px);
}
#selection .tec-selection li.product figure .ct-media-container {
	display: block; width: 100%; height: 100%;
}
#selection .tec-selection li.product figure img {
	display: block;
	width: 100%; height: 100%; object-fit: contain;
}

/* Titre */
#selection .tec-selection .woocommerce-loop-product__title {
	font-family: var(--tec-font-sans) !important; font-size: 16px !important;
	font-weight: 700 !important; color: #fff !important; line-height: 1.25 !important;
	padding: 16px 16px 0 !important; margin: 0 !important; text-transform: none !important;
}
#selection .tec-selection .woocommerce-LoopProduct-link { color: #fff !important; text-decoration: none !important; }

/* Chips bénéfices (injectées par hook) */
#selection .tec-selection .tec-pc-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 16px 0; }
#selection .tec-selection .tec-pc-chip {
	display: inline-flex; align-items: center; font-size: 10.5px;
	color: rgba(255,255,255,.68); background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 3px 9px;
}

/* Zone actions (prix + bouton) — border-top sépare image du corps */
#selection .tec-selection .ct-woo-card-actions {
	display: flex !important; flex-direction: column !important; gap: 8px !important;
	padding: 12px 16px 16px !important; border-top: 1px solid rgba(255,255,255,.09) !important;
	margin-top: auto !important;
}

/* Prix */
#selection .tec-selection li.product .price {
	font-family: var(--tec-font-price) !important; font-size: 28px !important;
	font-weight: 800 !important; color: #4FD6FF !important;
	font-variant-numeric: tabular-nums !important; line-height: 1 !important;
	margin: 0 !important; display: flex !important; align-items: baseline !important; gap: 5px !important;
}
#selection .tec-selection li.product .price .woocommerce-Price-amount,
#selection .tec-selection li.product .price bdi { color: #4FD6FF !important; font-size: 28px !important; }
#selection .tec-selection li.product .price .woocommerce-Price-currencySymbol {
	font-size: 14px !important; font-weight: 700 !important;
	color: rgba(255,255,255,.6) !important; font-family: var(--tec-font-sans) !important;
}

/* Bouton */
#selection .tec-selection li.product .button {
	display: inline-flex !important; align-items: center !important;
	justify-content: center !important; gap: 7px !important;
	background: rgba(255,255,255,.06) !important; color: #fff !important;
	border: 1px solid rgba(255,255,255,.16) !important; border-radius: 12px !important;
	padding: 12px !important; font-size: 14px !important; font-weight: 700 !important;
	min-height: auto !important; text-decoration: none !important; width: 100% !important;
	transition: background var(--tec-dur-fast), border-color var(--tec-dur-fast) !important;
}
#selection .tec-selection li.product .button:hover {
	background: rgba(0,194,255,.14) !important; border-color: rgba(0,194,255,.45) !important; color: #fff !important;
}

/* Masquer la ligne de réassurance simple dans la sélection home */
#selection .tec-selection .tec-loop-reassure { display: none; }

.tec-note { color: rgba(255,255,255,.6); font-size: 14px; }

.tec-pc { display: flex; flex-direction: column; background: #0D1626; border: 1px solid rgba(255,255,255,.09);
	border-radius: 18px; overflow: hidden; transition: transform var(--tec-dur-base) var(--tec-ease-out), border-color var(--tec-dur-base); }
.tec-pc:hover { transform: translateY(-4px); border-color: rgba(0,194,255,.35); }

/* Média = PUITS PHOTO CLAIR, même règle que les cartes WooCommerce ci-dessus
   (blanc pur, ratio 1:1, coins hauts au rayon de la carte, padding interne).
   Les deux implémentations doivent rester identiques. */
.tec-pc__media {
	position: relative; aspect-ratio: 1 / 1;
	background: var(--tec-surface-card, #FFFFFF);
	border-radius: var(--tec-radius-lg, 16px) var(--tec-radius-lg, 16px) 0 0;
	overflow: hidden;
	padding: clamp(12px, 5%, 20px);
}
.tec-pc__link { display: block; width: 100%; height: 100%; }
.tec-pc__img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Badge stock en pilule (spec). Couleurs = variantes SOLIDES du design system
   (Succès #1E9E62 / Attention #C9821A) : le puits étant clair, les teintes
   claires prévues pour fond sombre (#3FD89A, #F5B544, blanc) seraient
   illisibles — le blanc devenait même invisible sur blanc. */
.tec-pc__stock { position: absolute; top: 14px; left: 14px; font-size: 11px; font-weight: 700;
	letter-spacing: .01em; border-radius: 999px; padding: 4px 10px; }
.tec-pc__stock--in { color: #14764A; background: rgba(30,158,98,.14); }
.tec-pc__stock--backorder { color: #9A6412; background: rgba(201,130,26,.16); }
.tec-pc__stock--out { color: #4A5568; background: rgba(20,28,45,.09); }
.tec-pc__fav { position: absolute; right: 13px; bottom: 12px; width: 34px; height: 34px; display: grid; place-items: center;
	border: 0; cursor: pointer; border-radius: 50%; background: rgba(8,14,28,.66); color: #fff;
	transition: background var(--tec-dur-fast), color var(--tec-dur-fast); }
.tec-pc__fav:hover { background: rgba(8,14,28,.85); color: #4FD6FF; }

/* Corps : nom, bénéfices, prix, CTA */
.tec-pc__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px 17px 17px; }
.tec-pc__name { margin: 0; font-family: var(--tec-font-sans); font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: normal; text-transform: none; }
.tec-pc__name a { color: #fff; text-decoration: none; }
.tec-pc__benefits { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tec-pc__benefits li { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: rgba(255,255,255,.68); }
.tec-pc__check { display: inline-flex; color: #3FD89A; flex: none; }
.tec-pc__price { display: flex; align-items: baseline; gap: 5px; margin-top: auto; padding-top: 14px; }
.tec-pc__amount { font-family: var(--tec-font-price); font-size: 28px; font-weight: 800; color: #4FD6FF; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tec-pc__cur { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.62); }
.tec-pc__cta { display: flex; align-items: center; justify-content: center; margin-top: 12px; min-height: 44px; padding: 12px;
	border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
	color: #fff; font-size: 14px; font-weight: 700; text-decoration: none;
	transition: background var(--tec-dur-fast), border-color var(--tec-dur-fast); }
.tec-pc__cta:hover { background: rgba(0,194,255,.14); border-color: rgba(0,194,255,.45); color: #fff; }

/* 4e cellule : carte « Tout le catalogue » (bloc distinct, pas un produit) */
.tec-catalogue { display: flex; flex-direction: column; padding: 24px; border-radius: 18px; text-decoration: none;
	background: linear-gradient(160deg,#10254A,#0A1730); border: 1px solid rgba(0,194,255,.3);
	transition: border-color var(--tec-dur-base), transform var(--tec-dur-base) var(--tec-ease-out); }
.tec-catalogue:hover { transform: translateY(-4px); border-color: rgba(0,194,255,.55); }
.tec-catalogue__eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .55px; color: var(--tec-agent-signal,#00C2FF); }
.tec-catalogue__title { margin-top: 10px; font-family: var(--tec-font-display); font-size: 21px; font-weight: 800; color: #fff; line-height: 1.2; }
.tec-catalogue__desc { margin-top: 8px; font-size: 13px; color: rgba(255,255,255,.7); }
.tec-catalogue__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 18px; font-size: 14px; font-weight: 700; color: var(--tec-agent-signal,#00C2FF); }

/* ---- TUNNEL AGENT (carte contenue) ------------------------
   Remplace l'ancienne bande CTA pleine largeur à 2 boutons (supprimée :
   « Je découvre tout » doublait le CTA catalogue juste au-dessus).
   Réf. design : section « TUNNEL AGENT ».

   Même fond #070C16 que la section produits au-dessus et AUCUN border-top :
   la carte est le seul élément visible, pas de couture entre les sections.
   Aucun aplat dégradé bleu→cyan sous du texte blanc : le liseré cyan reste un
   accent (contraste + règle de marque). */
.tec-agentband { background: #070C16; padding-bottom: clamp(36px,5vw,60px); }
.tec-agentband-inner { width: 100%; max-width: var(--tec-container-wide,1200px); margin: 0 auto; padding-inline: clamp(16px,4vw,40px); }
.tec-agentband-card {
	position: relative; overflow: hidden;
	display: flex; flex-direction: column; align-items: center; gap: 13px;
	background: linear-gradient(120deg,#0B1730,#0A1426);
	/* 18px littéral : --tec-radius-2xl vaut 32px (panneaux) et --tec-radius-lg 16px.
	   Aucun token ne porte 18px, qui est le rayon des cartes de la Home
	   (.tec-catalogue, li.product) → on aligne sur elles, comme le demande le design. */
	border: 1px solid rgba(0,194,255,.28); border-radius: 18px;
	padding: clamp(15px,2.2vw,19px) clamp(20px,3vw,28px);
	box-shadow: inset 0 0 50px rgba(0,194,255,.08);
}
/* Halo cyan diffus en haut de carte (décor, sous le contenu). */
.tec-agentband-card::before {
	content: ""; position: absolute; left: 50%; top: -60px; transform: translateX(-50%);
	width: 240px; height: 200px; pointer-events: none;
	background: radial-gradient(circle, rgba(0,194,255,.15), rgba(0,194,255,0) 70%);
}
/* width:100% borne l'en-tête à la largeur utile de la carte : les items passent
   à la ligne au lieu de déborder sous overflow:hidden (la pastille « En ligne »
   se faisait rogner quand la police rendait plus large que prévu). */
.tec-agentband-head { position: relative; width: 100%; display: flex; align-items: center; gap: 11px; justify-content: center; flex-wrap: wrap; }
/* Volontairement plus discret que .tec-h2 (titres de section).
   min-width:0 → le titre se rétrécit et son texte passe à la ligne au lieu de
   pousser la pastille hors du cadre. */
.tec-agentband-title { min-width: 0; font-family: var(--tec-font-display); font-size: clamp(15px,1.7vw,18px); font-weight: 700; color: #fff; letter-spacing: -.01em; }
.tec-agentband-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: #7FE3FF; }
.tec-agentband-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--tec-agent-signal,#00C2FF);
	box-shadow: 0 0 8px var(--tec-agent-signal,#00C2FF); animation: tec-breathe 1.4s ease-in-out infinite; }

/* Rangée omnicanal. Couleur/teinte/bordure de chaque plateforme sont posées en
   inline (une couleur officielle par canal) ; la forme est ici. */
.tec-agentband-chan { position: relative; display: flex; align-items: center; gap: 11px; justify-content: center; flex-wrap: wrap; }
.tec-agentband-chan a { display: inline-flex; text-decoration: none; }
.tec-agentband-chan a span {
	width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
	border-width: 1.5px; border-style: solid; box-shadow: 0 6px 16px rgba(0,0,0,.35);
	transition: transform var(--tec-dur-fast), box-shadow var(--tec-dur-fast);
}
.tec-agentband-chan a:hover span { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.45); }
.tec-agentband-chan a:focus-visible span { outline: 2px solid var(--tec-agent-signal,#00C2FF); outline-offset: 3px; }

/* ---- Desktop ---------------------------------------------- */
@media (min-width: 900px) {
	.tec-trustband-grid { grid-template-columns: repeat(4,1fr); }
	.tec-univers-rail { display: grid; grid-template-columns: repeat(6,1fr); overflow: visible; }
	.tec-univers-card { width: auto; }
}

/* ---- Réduction de mouvement ------------------------------- */
@media (prefers-reduced-motion: reduce) {
	/* Respiration, anneau vivant, orbites et arc « réfléchit » : tout est figé.
	   L'état de focus reste lisible par le texte sous les chips, pas par le
	   mouvement. */
	.tec-hero-product-float,
	.tec-home .tec-node-core, .tec-home .tec-node-halo, .tec-home .tec-node-orbit,
	.tec-home .tec-node-live, .tec-home .tec-node-think,
	.tec-agent-thinking i { animation: none !important; }
	/* Bande agent : halo du nœud + pastille « En ligne » figés ; la pastille
	   reste visible (couleur + lueur), seule la pulsation s'arrête. */
	.tec-agentband-live i { animation: none !important; }
	.tec-agentband-chan a span { transition: none !important; }
	.tec-agentband-chan a:hover span { transform: none; }
}