/* ==========================================================================
   Tech For You — Page d'accueil (V8 — composition éditoriale continue,
   3 mouvements visuels, graphite/bleu/violet assumés du hero au contact.)
   ========================================================================== */

/* En-tête, pied de page, container--wide, barre CTA mobile, bande CTA de
   clôture (.tfy-contact-final) et canevas graphite (.tfy-flow) ont été
   déplacés dans techforyou-layout.css (composants/fondations partagés
   entre toutes les pages du thème, pas seulement l'accueil). Ne pas les
   redéfinir ici. */

/* ---------------------------------------------------------------------- */
/* MOUVEMENT 1 — Hero → Services                                          */
/* ---------------------------------------------------------------------- */
.tfy-hero {
	position: relative;
	overflow: visible;
	color: var(--tfy-white);
	padding-block: clamp(4.5rem, 9vw, 7rem) clamp(2.5rem, 5vw, 4rem);
	min-height: min(82vh, 740px);
	display: flex;
	align-items: center;
}

.tfy-hero__glow {
	position: absolute;
	top: -10%;
	left: -8%;
	width: min(46vw, 520px);
	height: min(46vw, 520px);
	background: radial-gradient(circle, rgba(108, 83, 224, 0.28), transparent 70%);
	filter: blur(10px);
	pointer-events: none;
	z-index: 0;
}

.tfy-hero__media {
	position: absolute;
	top: 0;
	left: 36%;
	right: 0;
	bottom: -150px;
	z-index: 0;
	overflow: hidden;
	clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%);
	-webkit-mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 220px), transparent 100%);
	mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 220px), transparent 100%);
}

.tfy-hero__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		#0a0b10 0%,
		rgba(10, 11, 16, 0.74) 20%,
		rgba(10, 11, 16, 0.18) 50%,
		transparent 72%
	);
}

.tfy-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% 42%;
	filter: saturate(0.92) contrast(1.05) brightness(0.85);
}

.tfy-hero__inner {
	position: relative;
	z-index: 2;
}

/* Eyebrow traité comme un élément secondaire, nettement détaché du H1 */
.tfy-hero__inner .tfy-eyebrow {
	font-size: 0.78rem;
	margin-bottom: 1.65rem;
	color: rgba(255, 255, 255, 0.82);
}

.tfy-hero__title {
	font-size: clamp(2.15rem, 4.4vw, 3.75rem);
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -0.02em;
	max-width: 22ch;
	color: var(--tfy-blue-bright);
}

.tfy-hero__title .tfy-text-accent {
	display: block;
	color: var(--tfy-blue-bright);
}

.tfy-hero__lead {
	max-width: 30rem;
	font-size: 1.08rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
}

/* IMPORTANT — spécificité : .tfy-body h1/p{margin:0} (techforyou-base.css)
   a une spécificité supérieure à un simple .tfy-hero__title{margin-bottom}
   (1 classe + 1 élément > 1 classe) et l'emportait silencieusement, quel
   que soit le rem choisi — cause réelle de "toujours trop tassé" malgré
   plusieurs passes d'augmentation. Fix : scoper avec le parent, comme déjà
   fait pour .tfy-hero__inner .tfy-eyebrow juste au-dessus. */
.tfy-hero__inner .tfy-hero__title {
	margin-bottom: 3.25rem;
}

.tfy-hero__inner .tfy-hero__lead {
	margin-bottom: 4.75rem;
}

.tfy-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}

.tfy-hero__mention {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.88rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.75);
}

.tfy-hero__mention svg {
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--tfy-blue-bright);
}

/* ---------------------------------------------------------------------- */
/* Services — le premier rang chevauche visuellement le bas du hero        */
/* ---------------------------------------------------------------------- */
.tfy-services {
	position: relative;
	z-index: 1;
	padding-block: clamp(5rem, 7vw, 7rem) clamp(4.5rem, 8vw, 6.5rem);
}

.tfy-services__head {
	position: relative;
	z-index: 2;
	max-width: var(--tfy-measure);
	margin-bottom: clamp(2.75rem, 5vw, 4rem);
}

.tfy-services__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: clamp(1.75rem, 3vw, 3rem);
	row-gap: clamp(2.5rem, 4vw, 3.25rem);
}

.tfy-service {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	padding-top: 1.35rem;
	transition: border-color var(--tfy-duration) var(--tfy-ease);
}

.tfy-service:hover {
	border-top-color: rgba(255, 255, 255, 0.32);
}

.tfy-service:hover h3 {
	color: var(--tfy-blue-bright);
}

.tfy-service:nth-child(even):hover h3 {
	color: var(--tfy-indigo-bright);
}

.tfy-services__list > .tfy-service:nth-child(3n + 2) {
	margin-top: 2.25rem;
}

.tfy-service__icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	margin-bottom: 1.1rem;
	transition: transform var(--tfy-duration) var(--tfy-ease), filter var(--tfy-duration) var(--tfy-ease);
}

.tfy-service:hover .tfy-service__icon-wrap {
	transform: translateY(-3px) scale(1.05);
	filter: brightness(1.2);
}

.tfy-service:nth-child(odd) .tfy-service__icon-wrap {
	background: radial-gradient(circle at 32% 30%, rgba(90, 162, 255, 0.38), rgba(90, 162, 255, 0.05) 72%);
}

.tfy-service:nth-child(even) .tfy-service__icon-wrap {
	background: radial-gradient(circle at 32% 30%, rgba(164, 139, 255, 0.38), rgba(164, 139, 255, 0.05) 72%);
}

.tfy-service:nth-child(odd) .tfy-service__icon {
	color: var(--tfy-blue-bright);
}

.tfy-service:nth-child(even) .tfy-service__icon {
	color: var(--tfy-indigo-bright);
}

.tfy-service__icon {
	width: 27px;
	height: 27px;
}

.tfy-service h3 {
	font-size: 1.06rem;
	font-weight: 700;
	color: var(--tfy-white);
	line-height: 1.3;
	margin-bottom: 0.45rem;
	transition: color var(--tfy-duration) var(--tfy-ease);
}

.tfy-service p {
	font-size: 0.9rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.66);
	max-width: 24rem;
}

.tfy-services .tfy-services__foot {
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

/* Légère amélioration de visibilité (demandée explicitement) : le lien reste
   un lien texte, pas un bouton — juste un peu plus grand/affirmé pour être
   mieux identifié comme un accès à la page dépannage. */
.tfy-services__foot a.tfy-link-arrow {
	font-size: clamp(1.02rem, 1.2vw, 1.1rem);
	font-weight: 800;
}

/* ---------------------------------------------------------------------- */
/* MOUVEMENT 2 — Photo + Particuliers/Professionnels : vraie composition
   en grille dans le container wide (comme Services), plus d'absolute
   positioning fragile. La photo (~42%) et le contenu (~58%) sont deux
   vraies colonnes qui occupent réellement le container à toute largeur,
   y compris sur très grand écran.                                        */
/* ---------------------------------------------------------------------- */
.tfy-work {
	position: relative;
	z-index: 0;
	padding-block: clamp(3.5rem, 6vw, 5rem) clamp(3.5rem, 6vw, 5rem);
	overflow: visible;
}

/* Respiration + repère perceptible entre Services et Solutions, même
   principe sobre que la transition précédente. */
.tfy-work::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(56%, 620px);
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
	z-index: 2;
}

/* Zone de profondeur : cette section ("Pour qui") reçoit un fond bleu nuit
   très sourd, en plus du gris/graphite ambiant — un des rares "grands
   moments" plus profonds de la page. Deux halos décentrés (pas un rectangle,
   pas une bande) donnent une limite volontairement irrégulière en haut et en
   bas plutôt qu'une ligne horizontale franche. */
.tfy-work::after {
	content: "";
	position: absolute;
	inset: -8% -2% -6% -2%;
	z-index: -1;
	background:
		radial-gradient(120% 70% at 28% 0%, rgba(19, 25, 45, 0.65), transparent 62%),
		radial-gradient(120% 70% at 76% 100%, rgba(15, 19, 33, 0.55), transparent 64%),
		linear-gradient(180deg, transparent 0%, rgba(13, 17, 29, 0.42) 24%, rgba(13, 17, 29, 0.46) 76%, transparent 100%);
	pointer-events: none;
}

/* La colonne photo est plafonnée en valeur absolue (620px) en plus du
   pourcentage : sans ce plafond, 42% d'un container très large (2260px)
   donnerait une photo ~950px de large, donc ~1190px de haut en 4/5 — bien
   plus haute que le contenu, recréant du vide au lieu de le combler. */
.tfy-work__grid {
	display: grid;
	grid-template-columns: minmax(280px, min(42%, 620px)) 1fr;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: center;
}

.tfy-work__media {
	position: relative;
	border-radius: var(--tfy-radius-md);
	overflow: hidden;
	aspect-ratio: 4 / 5;
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
}

.tfy-work__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 38%;
	filter: saturate(0.92) contrast(1.05) brightness(0.85);
}

.tfy-work__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(200deg, rgba(10, 11, 16, 0.05) 0%, rgba(20, 18, 40, 0.32) 100%);
}

.tfy-work__content {
	position: relative;
}

/* Court texte sur la manière de conseiller (budget/réparation plutôt que
   remplacement) — ne répète pas les textes Particuliers/Professionnels. */
.tfy-work__lead {
	font-size: 1rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.72);
	max-width: 32rem;
}

/* .tfy-work__lead est un <p> : .tfy-body p{margin:0} (techforyou-base.css)
   l'emporterait sans ce scope parent (même piège que pour le hero). */
.tfy-work__content .tfy-work__lead {
	margin-top: 1.1rem;
	margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

/* Particuliers / Professionnels : deux blocs légers côte à côte sous le
   paragraphe, séparés par un simple filet — jamais un grand panneau. */
.tfy-work__panel {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1px 1fr;
	gap: clamp(1.75rem, 3vw, 3rem);
	align-items: start;
	padding-top: clamp(1.5rem, 3vw, 2rem);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.tfy-audiences__divider {
	background: rgba(255, 255, 255, 0.14);
	align-self: stretch;
}

.tfy-audience__icon {
	width: 30px;
	height: 30px;
	color: var(--tfy-indigo-bright);
	margin-bottom: 0.9rem;
}

.tfy-audience h3 {
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--tfy-white);
	margin-bottom: 0.6rem;
}

.tfy-audience p {
	font-size: 0.94rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.72);
	max-width: 22rem;
}

/* ---------------------------------------------------------------------- */
/* VOCABULAIRE GRAPHIQUE TECH FOR YOU — motif "circuit" abstrait :
   pistes à angles 45°, nœuds, pastilles, micro-grille de points.
   Un seul SVG léger (data URI) réutilisé partout via .tfy-deco ; graphite
   légèrement plus clair que le fond + quelques pistes/nœuds bleu
   électrique + un seul accent indigo. Toujours masqué en fondu : il
   enrichit les zones vides, il ne remplit jamais la page.                 */
/* ---------------------------------------------------------------------- */
:root {
	--tfy-circuit: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 480' fill='none' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'><path stroke='rgb(170,182,210)' stroke-opacity='.22' d='M0 72H168L216 120H408L456 72H720M0 168H96L144 216H312L360 264H552L600 312H720M120 480V384L168 336H336L384 384H480M504 480V432L552 384H720M0 408H48L96 360M240 0V24L264 48H360M600 168H648L672 144H720M24 264H72'/><path stroke='rgb(90,162,255)' stroke-opacity='.6' d='M216 120H408M360 264H552'/><path stroke='rgb(164,139,255)' stroke-opacity='.5' d='M168 336H336'/><g stroke='rgb(90,162,255)' stroke-opacity='.75'><circle cx='408' cy='120' r='4'/><circle cx='552' cy='264' r='4'/></g><circle cx='336' cy='336' r='4' stroke='rgb(164,139,255)' stroke-opacity='.7'/><g stroke='rgb(170,182,210)' stroke-opacity='.32'><circle cx='168' cy='72' r='3.5'/><circle cx='312' cy='216' r='3.5'/><circle cx='480' cy='384' r='3.5'/><circle cx='96' cy='360' r='3.5'/><circle cx='360' cy='48' r='3.5'/><circle cx='600' cy='168' r='3.5'/><circle cx='72' cy='264' r='3.5'/></g><g fill='rgb(90,162,255)' fill-opacity='.85'><circle cx='216' cy='120' r='2'/><circle cx='360' cy='264' r='2'/></g><circle cx='168' cy='336' r='2' fill='rgb(164,139,255)' fill-opacity='.85'/><g fill='rgb(170,182,210)' fill-opacity='.38'><circle cx='144' cy='216' r='2'/><circle cx='600' cy='312' r='2'/><circle cx='552' cy='384' r='2'/><circle cx='264' cy='48' r='2'/><circle cx='456' cy='72' r='2'/><circle cx='640' cy='216' r='1.5'/><circle cx='40' cy='120' r='1.5'/><circle cx='280' cy='432' r='1.5'/></g></svg>");
	--tfy-microgrid: radial-gradient(circle, rgba(190, 200, 225, 0.16) 1px, transparent 1.4px);
}

.tfy-deco {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	background-image: var(--tfy-circuit);
	background-repeat: no-repeat;
	background-size: cover;
}

/* Micro-grille de points, portée par chaque décor (même masque). */
.tfy-deco::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--tfy-microgrid);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent);
	mask-image: radial-gradient(closest-side, #000 20%, transparent);
}

/* Solutions : zone vide à droite du contenu, jusqu'au bord de l'écran. */
.tfy-work > .tfy-container {
	position: relative;
	z-index: 1;
}

.tfy-deco--work {
	top: 4%;
	bottom: 4%;
	right: 0;
	width: min(56vw, 1200px);
	background-position: 0 50%;
	-webkit-mask-image: radial-gradient(ellipse 72% 62% at 68% 50%, #000 30%, transparent 100%);
	mask-image: radial-gradient(ellipse 72% 62% at 68% 50%, #000 30%, transparent 100%);
}

/* ---------------------------------------------------------------------- */
/* Besoins courants — langage graphique DIFFÉRENT de Services : grands
   pictogrammes linéaires (48 viewBox, ~52px) sans cercle, "pattes" de
   composant (pistes + nœuds) de part et d'autre, composition centrée
   3x2 dans une largeur maîtrisée, séparation par pistes partielles.       */
/* ---------------------------------------------------------------------- */
.tfy-cases {
	position: relative;
	z-index: 1;
	padding-block: clamp(4rem, 7vw, 6rem);
}

.tfy-cases > .tfy-container {
	position: relative;
	z-index: 1;
}

.tfy-cases::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(56%, 620px);
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
}

/* Respiration : graphite à peine plus clair, très feathered, pour marquer
   une pause entre le bleu nuit de "Pour qui" (au-dessus) et "Pourquoi Tech
   For You" (en dessous) — pas une bande, pas un nouveau fond, juste un
   soupçon de lumière en plus. */
.tfy-cases::after {
	content: "";
	position: absolute;
	inset: -6% 0 -6% 0;
	z-index: -1;
	background: linear-gradient(180deg,
		transparent 0%,
		rgba(255, 255, 255, 0.028) 22%,
		rgba(255, 255, 255, 0.034) 50%,
		rgba(255, 255, 255, 0.028) 78%,
		transparent 100%);
	pointer-events: none;
}

.tfy-cases__head {
	max-width: 36rem;
	margin: 0 auto clamp(3.25rem, 6vw, 4.75rem);
	text-align: center;
}

.tfy-cases__list {
	position: relative;
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 76rem;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(2rem, 4vw, 4rem);
}

/* Scopé par la section : `.tfy-body ul{margin:0}` (base) écrasait le
   margin auto de la liste, qui restait collée à gauche du container dès
   que celui-ci dépasse la max-width de la grille. */
.tfy-cases .tfy-cases__list {
	margin-inline: auto;
}

/* Micro-grille très légère derrière la composition. */
.tfy-cases__list::before {
	content: "";
	position: absolute;
	inset: -3rem -5rem;
	z-index: -1;
	background-image: var(--tfy-microgrid);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(closest-side, rgba(0, 0, 0, 0.7), transparent);
	mask-image: radial-gradient(closest-side, rgba(0, 0, 0, 0.7), transparent);
	pointer-events: none;
}

.tfy-case {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-inline: clamp(0.5rem, 1.5vw, 1.5rem);
}

.tfy-case__pic {
	position: relative;
	display: grid;
	place-items: center;
	width: 84px;
	height: 72px;
	margin-bottom: 1.35rem;
}

/* Variation de lumière douce (pas un cercle délimité). */
.tfy-case__pic::before {
	content: "";
	position: absolute;
	inset: -16px -30px;
	z-index: -1;
	background: radial-gradient(closest-side, rgba(90, 162, 255, 0.17), transparent);
	opacity: 0.8;
	transition: opacity var(--tfy-duration) var(--tfy-ease);
}

.tfy-case:nth-child(3n + 2) .tfy-case__pic::before {
	background: radial-gradient(closest-side, rgba(164, 139, 255, 0.15), transparent);
}

/* "Pattes" du composant : deux pistes partielles terminées par un nœud. */
.tfy-case__pic::after {
	content: "";
	position: absolute;
	left: -5.5rem;
	right: -5.5rem;
	top: 50%;
	height: 7px;
	margin-top: -3.5px;
	z-index: -1;
	background:
		radial-gradient(circle, rgba(90, 162, 255, 0.8) 0 1.6px, transparent 2.2px) 0 50% / 7px 7px no-repeat,
		radial-gradient(circle, rgba(90, 162, 255, 0.8) 0 1.6px, transparent 2.2px) 100% 50% / 7px 7px no-repeat,
		linear-gradient(
			90deg,
			transparent 3px,
			rgba(90, 162, 255, 0.42) 3px,
			rgba(170, 182, 210, 0.12) 27%,
			transparent 30%,
			transparent 70%,
			rgba(170, 182, 210, 0.12) 73%,
			rgba(90, 162, 255, 0.42) calc(100% - 3px),
			transparent calc(100% - 3px)
		) 50% 50% / 100% 1px no-repeat;
	pointer-events: none;
}

.tfy-case__icon {
	width: 52px;
	height: 52px;
	color: rgba(225, 230, 242, 0.82);
	transition: transform var(--tfy-duration) var(--tfy-ease);
}

.tfy-case__icon .tfy-pic-a {
	stroke: var(--tfy-blue-bright);
}

.tfy-case__icon .tfy-pic-b {
	stroke: var(--tfy-indigo-bright);
}

.tfy-case__icon .tfy-pic-fa {
	fill: var(--tfy-blue-bright);
	stroke: none;
}

.tfy-case__icon .tfy-pic-fb {
	fill: var(--tfy-indigo-bright);
	stroke: none;
}

.tfy-case__icon .tfy-pic-bg {
	fill: #181a21;
}

.tfy-case:hover .tfy-case__icon {
	transform: translateY(-3px);
}

.tfy-case:hover .tfy-case__pic::before {
	opacity: 1;
}

.tfy-cases__list .tfy-case h3 {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--tfy-white);
	line-height: 1.35;
	max-width: 19rem;
	margin-bottom: 0.5rem;
}

.tfy-cases__list .tfy-case p {
	font-size: 0.92rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.64);
	max-width: 20rem;
}

/* Rangée 2 : piste partielle + nœud central au-dessus de chaque item,
   jamais un filet continu d'un bord à l'autre. */
.tfy-case:nth-child(n + 4) {
	margin-top: clamp(2.75rem, 4.5vw, 3.75rem);
	padding-top: clamp(2.75rem, 4.5vw, 3.75rem);
}

.tfy-case:nth-child(n + 4)::before {
	content: "";
	position: absolute;
	top: -3px;
	left: 10%;
	right: 10%;
	height: 7px;
	background:
		radial-gradient(circle, rgba(90, 162, 255, 0.65) 0 1.8px, transparent 2.4px) 50% 50% / 7px 7px no-repeat,
		linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.11) 30%, rgba(255, 255, 255, 0.11) 70%, transparent) 50% 50% / 100% 1px no-repeat;
}

/* ---------------------------------------------------------------------- */
/* Pourquoi Tech For You + preuve Google — UNE séquence de réassurance :
   titre | engagements sur un axe technique vertical (nœuds numérotés) |
   preuve Google reliée à l'axe par une piste.                            */
/* ---------------------------------------------------------------------- */
.tfy-why {
	position: relative;
	z-index: 1;
	/* Bas réduit par rapport au haut : l'espace avant les tarifs était
	   trop généreux comparé à celui qui suit les tarifs. */
	padding-block: clamp(4.5rem, 8vw, 7rem) clamp(3.25rem, 5.5vw, 4.75rem);
}

.tfy-why::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(56%, 620px);
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
}

.tfy-why > .tfy-container {
	position: relative;
	z-index: 1;
}

.tfy-deco--why {
	left: 0;
	top: 30%;
	bottom: -4%;
	width: min(40vw, 900px);
	transform: scaleX(-1);
	background-position: 0 50%;
	opacity: 0.8;
	-webkit-mask-image: radial-gradient(ellipse 80% 65% at 30% 60%, #000 20%, transparent 100%);
	mask-image: radial-gradient(ellipse 80% 65% at 30% 60%, #000 20%, transparent 100%);
}

.tfy-why__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr) minmax(300px, 0.85fr);
	column-gap: clamp(3rem, 5vw, 6rem);
	row-gap: 3rem;
	align-items: start;
}

/* Micro-grille autour de la preuve Google. */
.tfy-why__grid::after {
	content: "";
	position: absolute;
	top: -3rem;
	bottom: -3rem;
	right: -4rem;
	width: 34%;
	z-index: -1;
	background-image: var(--tfy-microgrid);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(closest-side, #000, transparent);
	mask-image: radial-gradient(closest-side, #000, transparent);
	pointer-events: none;
}

.tfy-why__head .tfy-section-title {
	font-size: clamp(2.2rem, 3.4vw, 3.5rem);
	line-height: 1.08;
}

.tfy-why__head .tfy-why__lead {
	margin-top: 1.25rem;
	font-size: 1.05rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.7);
	max-width: 24rem;
}

.tfy-why__head::after {
	content: "";
	display: block;
	width: 4.5rem;
	height: 2px;
	margin-top: 2rem;
	background: linear-gradient(90deg, var(--tfy-blue-bright), var(--tfy-indigo-bright));
}

.tfy-why__list {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0 0 0 4.25rem;
}

/* Axe technique vertical. */
.tfy-why__list::before {
	content: "";
	position: absolute;
	left: 1.375rem;
	top: 1rem;
	bottom: 1rem;
	width: 1px;
	background: linear-gradient(180deg, transparent, rgba(90, 162, 255, 0.5) 12%, rgba(164, 139, 255, 0.4) 88%, transparent);
}

.tfy-why__item {
	position: relative;
	padding-block: 1.15rem;
}

.tfy-why__item + .tfy-why__item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 62%;
	height: 1px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.09), transparent);
}

.tfy-why__node {
	position: absolute;
	left: -4.25rem;
	top: 1.05rem;
	width: 2.75rem;
	height: 2.75rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
	color: var(--tfy-blue-bright);
	background: #191b22;
	border: 1px solid rgba(90, 162, 255, 0.45);
	box-shadow: 0 0 0 5px #191b22, 0 0 22px rgba(90, 162, 255, 0.18);
}

.tfy-why__item:nth-child(even) .tfy-why__node {
	color: var(--tfy-indigo-bright);
	border-color: rgba(164, 139, 255, 0.45);
	box-shadow: 0 0 0 5px #191b22, 0 0 22px rgba(164, 139, 255, 0.16);
}

/* Petite piste reliant le nœud à son intitulé. */
.tfy-why__node::after {
	content: "";
	position: absolute;
	left: 100%;
	top: 50%;
	width: 1.1rem;
	height: 1px;
	background: rgba(90, 162, 255, 0.4);
}

.tfy-why__list .tfy-why__item h3 {
	padding-top: 0.6rem;
	margin-bottom: 0.45rem;
	font-size: clamp(1.2rem, 1.5vw, 1.45rem);
	font-weight: 800;
	line-height: 1.25;
	color: var(--tfy-white);
}

.tfy-why__list .tfy-why__item p {
	font-size: 0.95rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.68);
	max-width: 34rem;
}

/* Preuve Google : une vraie masse visuelle, identité Google intacte
   (logo "G" officiel sur pastille blanche, couleurs d'origine). */
.tfy-google {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-top: -0.85rem;
	padding: clamp(2.25rem, 3vw, 3rem) clamp(1.75rem, 2.5vw, 2.75rem);
	border-radius: var(--tfy-radius-md);
	background:
		radial-gradient(80% 50% at 50% 0%, rgba(251, 188, 4, 0.07), transparent 70%),
		linear-gradient(165deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015) 60%);
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7);
}

/* Piste reliant l'axe des engagements à la preuve Google. */
.tfy-google::before {
	content: "";
	position: absolute;
	right: 100%;
	top: 50%;
	width: clamp(3rem, 5vw, 6rem);
	height: 7px;
	margin-top: -3.5px;
	background:
		radial-gradient(circle, rgba(90, 162, 255, 0.8) 0 1.8px, transparent 2.4px) 0 50% / 7px 7px no-repeat,
		linear-gradient(90deg, rgba(90, 162, 255, 0.45), rgba(255, 255, 255, 0.14)) 50% 50% / 100% 1px no-repeat;
	pointer-events: none;
}

.tfy-google__brand {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-bottom: 1.5rem;
}

.tfy-google__g {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	flex: none;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.6);
}

.tfy-google__g svg {
	width: 28px;
	height: 28px;
}

.tfy-google .tfy-google__title {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--tfy-white);
}

.tfy-google__stars {
	width: 170px;
	height: auto;
	margin-bottom: 1rem;
	filter: drop-shadow(0 0 12px rgba(251, 188, 4, 0.22));
}

.tfy-google .tfy-google__score {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	line-height: 1;
}

.tfy-google__value {
	font-size: clamp(3.5rem, 5vw, 4.75rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--tfy-white);
}

.tfy-google__max {
	font-size: 1.5rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.55);
}

.tfy-google .tfy-google__count {
	margin-top: 0.6rem;
	font-size: 1rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.75);
}

/* Témoignages Google réels (extension "Widgets for Google Reviews" /
   Trustindex, shortcode [trustindex no-registration=google]) : intégrés
   DANS la carte .tfy-google, sous la note/le nombre d'avis, pour former un
   seul ensemble Google cohérent (plus de second bloc concurrent en dessous
   de la grille). La mise en forme interne des avis (carrousel, etc.) vient
   de l'extension elle-même ; on habille seulement le contour. */
.tfy-google__reviews {
	width: 100%;
	margin-top: clamp(1.5rem, 2.5vw, 2rem);
	padding-top: clamp(1.5rem, 2.5vw, 2rem);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Le badge "EXCELLENT" / "Basée sur XX avis" injecté par le widget
   Trustindex est en noir par défaut (CSS du plugin, mis en cache dans
   wp-content/uploads/), illisible sur notre fond sombre. Override ciblé,
   scopé à ce bloc uniquement (ne touche pas les cartes d'avis individuelles,
   qui utilisent d'autres classes). Repose sur les classes ti-rating-text /
   ti-rating / ti-rating-large observées en production le 2026-09-29 :
   à revérifier si une mise à jour du plugin Trustindex change ce balisage.
   Le nombre d'avis affiché ici vient du cache/de la configuration du
   plugin, pas de ce fichier — non modifiable ici.
   IMPORTANT : le CSS du plugin fixe la couleur noire directement sur les
   <span>/<strong> internes (pas seulement sur le conteneur .ti-rating-text),
   donc un enfant avec sa propre couleur déclarée ne peut pas hériter de la
   couleur du conteneur, même en !important — il faut cibler CES enfants
   explicitement, sinon "Basée sur XX avis" reste noir malgré l'override du
   conteneur (cause du problème constaté le 2026-09-29). */
.tfy-google__reviews .ti-rating-text,
.tfy-google__reviews .ti-rating-text span,
.tfy-google__reviews .ti-rating-text strong:not(.ti-rating-large) {
	color: rgba(255, 255, 255, 0.75) !important;
}

.tfy-google__reviews .ti-rating.ti-rating-large {
	color: var(--tfy-indigo-bright) !important;
}

/* Emplacement représentatif affiché uniquement dans la prévisualisation
   statique (le widget réel ne peut se charger que dans WordPress). */
.tfy-google__reviews--placeholder {
	display: grid;
	place-items: center;
	min-height: 8rem;
	border: 1px dashed rgba(255, 255, 255, 0.22);
	border-radius: var(--tfy-radius-sm);
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.85rem;
	font-style: italic;
	padding: 1rem;
	text-align: center;
}

/* Les deux actions distinctes (consulter / laisser un avis) empilées et
   pleine largeur : plus lisible qu'un côte-à-côte dans une carte étroite. */
.tfy-google__actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
	margin-top: 1.75rem;
}

.tfy-google__actions .tfy-google__cta {
	width: 100%;
	justify-content: center;
}

@media (max-width: 1360px) {
	.tfy-why__grid {
		grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.8fr);
	}

	.tfy-why__head {
		grid-column: 1 / -1;
		max-width: var(--tfy-measure);
	}
}


/* ---------------------------------------------------------------------- */
/* MOUVEMENT 3 — Tarifs + Humain + SOS Pocket + Contact final              */
/* ---------------------------------------------------------------------- */
.tfy-pricing-human {
	position: relative;
	z-index: 1;
	padding-block: clamp(3rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3rem);
	overflow: clip;
}

/* Accent indigo ponctuel (pas une nappe) — juste assez pour teinter le coin
   des cartes tarifs, la base reste graphite. */
.tfy-pricing-human::before {
	content: "";
	position: absolute;
	top: 4%;
	right: 2%;
	width: min(20vw, 280px);
	height: min(20vw, 280px);
	background: radial-gradient(circle, rgba(108, 83, 224, 0.14), transparent 72%);
	pointer-events: none;
	z-index: -1;
}

/* Second accent, plus bas et à gauche, bleu cette fois : fil graphique très
   discret qui poursuit celui de Besoins courants et évite que toute la
   zone tarifs + Tech For You/SOS Pocket paraisse plate sur 32". */
.tfy-pricing-human::after {
	content: "";
	position: absolute;
	bottom: 6%;
	left: -4%;
	width: min(22vw, 300px);
	height: min(22vw, 300px);
	background: radial-gradient(circle, rgba(90, 162, 255, 0.06), transparent 72%);
	pointer-events: none;
	z-index: -1;
}

/* Tarifs : en-tête centré (variation volontaire par rapport aux titres
   alignés à gauche des autres séquences), la grille de prix reste centrée
   en dessous. */
.tfy-pricing-human__head {
	max-width: 34rem;
	margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
	text-align: center;
}

/* Tarifs et séquence humaine (Tech For You/Jérémy) restent toujours
   empilés verticalement — jamais côte à côte — quelle que soit la largeur :
   les tarifs forment leur propre séquence, le bloc humain vient après.
   La grille est plus large que les tarifs eux-mêmes pour laisser la
   séquence Tech For You/SOS Pocket respirer (portrait plus grand) ; les
   tarifs restent contenus et centrés dans leur propre colonne étroite. */
.tfy-pricing-human__grid {
	display: grid;
	grid-template-columns: 1fr;
	max-width: 76rem;
	margin-inline: auto;
	/* Espace après les tarifs volontairement PLUS GRAND que l'espace avant
	   (Pourquoi Tech For You → Tarifs, inchangé, cf. .tfy-why/.tfy-pricing-
	   human padding). Un gap égal (9,25rem) restait visuellement collé car
	   le halo de transition (.tfy-pricing::after) débordait dessus (voir
	   plus bas) ; le gap est maintenant plus grand et le halo recentré et
	   réduit pour laisser un vrai vide graphite des deux côtés de la ligne. */
	gap: clamp(7rem, 12vw, 11.5rem);
}

.tfy-pricing {
	position: relative;
	max-width: 42rem;
	margin-inline: auto;
}

/* Transition Tarifs → Tech For You/SOS Pocket : ligne partielle lumineuse
   (bleue au centre, fondue aux extrémités) EXACTEMENT au milieu du gap de
   la grille (translateY -50% en plus du top à mi-gap : avant, seul le haut
   de ce bloc était positionné au milieu, et sa hauteur débordait vers le
   bas jusque dans le bloc Tech For You, ce qui annulait la respiration).
   Hauteur volontairement plus modeste que le gap pour laisser du vide
   graphite visible au-dessus et en dessous de la ligne. Pas de bande, pas
   de carte, pas de circuit. */
.tfy-pricing::after {
	content: "";
	position: absolute;
	/* Toujours exactement la moitié du gap de .tfy-pricing-human__grid. */
	top: calc(100% + clamp(3.5rem, 6vw, 5.75rem));
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(92vw, 62rem);
	height: clamp(5rem, 8vw, 7rem);
	z-index: -1;
	background:
		radial-gradient(circle, rgba(150, 197, 255, 1) 0 2.1px, transparent 3px) 50% 50% / 9px 9px no-repeat,
		linear-gradient(
			90deg,
			transparent,
			rgba(255, 255, 255, 0.16) 14%,
			rgba(90, 162, 255, 0.75) 50%,
			rgba(255, 255, 255, 0.16) 86%,
			transparent
		) 50% 50% / 100% 1.5px no-repeat,
		radial-gradient(ellipse 50% 100% at 50% 50%, rgba(150, 165, 200, 0.1), rgba(90, 162, 255, 0.04) 55%, transparent 100%) 50% 50% / 100% 100% no-repeat;
	pointer-events: none;
}

.tfy-price-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}

.tfy-price {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.85rem 2rem;
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--tfy-radius-md);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55);
	height: 100%;
}

.tfy-price__tag {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--tfy-indigo-bright);
}

.tfy-price__amount {
	font-size: 2.5rem;
	font-weight: 800;
	color: var(--tfy-white);
}

.tfy-price__unit {
	font-size: 0.86rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.72);
}

.tfy-price__extra {
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.5);
	margin-top: 0.15rem;
}

.tfy-pricing .tfy-pricing__note {
	margin-top: 1rem;
}

.tfy-pricing__note {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.5);
}

/* CTA tarifs : appartient visuellement à .tfy-pricing (sous les cartes),
   ne touche pas au gap fixe de .tfy-pricing-human__grid ni à la ligne de
   transition (.tfy-pricing::after), qui restent calculés depuis le bas de
   .tfy-pricing quelle que soit sa hauteur. */
.tfy-pricing__cta {
	margin-top: clamp(1.75rem, 3vw, 2.25rem);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}

/* Grille explicite à 3 colonnes (reconstruite depuis la maquette de
   référence, plus fiable que des ajustements de flex-grow/basis) :
   .tfy-founder__primary (portrait + Tech For You, ~moitié gauche) |
   .tfy-founder__divider (filet fin légèrement incliné + point lumineux) |
   .tfy-founder__secondary (mention SOS Pocket + téléphone). Base graphite
   continue, pas de nouvelle boîte/carte. */
.tfy-founder {
	position: relative;
	display: grid;
	/* Composition asymétrique ~60/40 : Tech For You dominant, SOS Pocket
	   identité secondaire mais réellement présente (voir logos/portrait
	   ci-dessous). Ratio volontairement 1.3:1 (pas 1.5:1) pour laisser assez
	   de place au texte SOS Pocket à côté du téléphone (cf. bug de
	   compression déjà corrigé une fois, à ne pas réintroduire). */
	grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 1fr);
	align-items: center;
	column-gap: clamp(2.25rem, 4vw, 3.5rem);
}

/* Lumière d'ensemble très diffuse derrière toute la composition : ce qui
   relie visuellement les deux ensembles, sans nappe violette ni nouvelle
   boîte — juste une respiration commune. */
.tfy-founder::before {
	content: "";
	position: absolute;
	inset: -14% -4%;
	z-index: -1;
	background: radial-gradient(ellipse 62% 78% at 50% 50%, rgba(90, 162, 255, 0.065), transparent 72%);
	pointer-events: none;
}

/* Ensemble principal : portrait + Tech For You, associés étroitement pour
   former un seul bloc visuel plutôt que deux éléments indépendants. Largeur
   pilotée par la colonne de grille du parent, plus de flex-basis à ajuster
   à la main. */
.tfy-founder__primary {
	display: flex;
	align-items: center;
	gap: clamp(1.75rem, 3.5vw, 2.5rem);
	min-width: 0;
}

/* Ensemble secondaire : SOS Pocket (mention + texte + lien) directement lié
   au téléphone, immédiatement à sa droite. Largeur pilotée par la colonne
   de grille du parent (volontairement un peu plus étroite que l'ensemble
   Tech For You, sans jamais écraser le texte : voir la colonne de
   .tfy-founder ci-dessus). */
.tfy-founder__secondary {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
	min-width: 0;
}

/* Séparation graphique fine et légèrement inclinée entre les deux ensembles,
   avec une petite touche lumineuse bleue en son centre — accompagne la
   coupure entre Tech For You et SOS Pocket sans nouvelle boîte/carte. */
.tfy-founder__divider {
	position: relative;
	align-self: center;
	flex: none;
	width: 1px;
	height: clamp(7rem, 13vw, 11rem);
	background: linear-gradient(
		180deg,
		transparent,
		rgba(255, 255, 255, 0.13) 24%,
		rgba(90, 162, 255, 0.48) 50%,
		rgba(255, 255, 255, 0.13) 76%,
		transparent
	);
	transform: rotate(9deg);
}

.tfy-founder__divider::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	background: rgba(150, 197, 255, 1);
	box-shadow: 0 0 14px 3px rgba(90, 162, 255, 0.5);
}

/* Ligne horizontale très discrète sous l'ensemble, pour clore
   graphiquement la section Tech For You/SOS Pocket (reste dans l'espace de
   respiration existant avant Contact final, ne touche pas ce dernier). */
.tfy-founder::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: clamp(-1.5rem, -2.5vw, -2rem);
	transform: translateX(-50%);
	width: min(60%, 40rem);
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12) 50%, transparent);
	pointer-events: none;
}

/* Portrait nettement plus grand et recadré PAR CSS (tête, épaules, haut du
   buste) — la photo elle-même n'est jamais modifiée : le conteneur est
   proche du carré, donc object-fit:cover + object-position ancré en haut
   coupe naturellement le bas de l'image (bras/buste croisés) plutôt que de
   les inclure. Qualité de la source déjà confirmée propre — cadrage validé. */
.tfy-founder__photo {
	position: relative;
	z-index: 1;
	flex: none;
	width: clamp(250px, 25vw, 345px);
	aspect-ratio: 1 / 1.08;
	border-radius: var(--tfy-radius-md);
	box-shadow: 0 30px 64px -22px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(90, 162, 255, 0.18);
}

/* Halo derrière le RECTANGLE complet (jamais autour du sujet) : lumière
   bleue diffuse, agrandie pour mieux fondre le portrait dans le fond
   graphite. Overflow retiré du conteneur (voir img ci-dessous) pour que ce
   halo ne soit plus rogné par le cadrage de la photo. */
.tfy-founder__photo::before {
	content: "";
	position: absolute;
	inset: -46px;
	z-index: -1;
	border-radius: calc(var(--tfy-radius-md) + 34px);
	/* Halo très légèrement renforcé (demande explicite) : mêmes proportions,
	   juste un peu plus de présence (0.22→0.27 / 0.08→0.11). */
	background: radial-gradient(closest-side, rgba(90, 162, 255, 0.27), rgba(90, 162, 255, 0.11) 60%, transparent 85%);
	filter: blur(34px);
	pointer-events: none;
}

/* Encadrement partiel très fin (angle haut-gauche seulement) : accompagne
   le cadre sans le doubler complètement, discret. */
.tfy-founder__photo::after {
	content: "";
	position: absolute;
	top: -10px;
	left: -10px;
	width: 34%;
	height: 34%;
	border-top: 1px solid rgba(150, 197, 255, 0.4);
	border-left: 1px solid rgba(150, 197, 255, 0.4);
	border-top-left-radius: calc(var(--tfy-radius-md) * 0.6);
	pointer-events: none;
	z-index: 1;
}

/* border-radius appliqué directement à l'image (remplace l'overflow:hidden
   du conteneur, retiré ci-dessus) : un <img> se clippe nativement à son
   propre border-radius, donc le cadrage/recadrage reste strictement
   identique, seul le halo derrière redevient visible. */
img.tfy-human__portrait {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 8%;
	display: block;
	border-radius: var(--tfy-radius-md);
}

/* Contenu de l'ensemble principal : nom + texte Tech For You. */
.tfy-founder__content {
	flex: 1;
	min-width: 0;
}

.tfy-human__name {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: clamp(1.3rem, 2vw, 1.7rem);
	font-weight: 800;
	color: var(--tfy-white);
}

.tfy-founder__content .tfy-human__name {
	margin-bottom: 1rem;
}

/* Le logo horizontal complet (déjà utilisé en nav/footer) sert ici de
   véritable signature — plus une petite icône devant un texte répétant le
   nom, qui est déjà inclus dans ce logo. */
.tfy-human__logo {
	width: clamp(130px, 10vw, 175px);
	height: auto;
	flex: none;
	display: block;
}

.tfy-human__text {
	font-size: 1rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.72);
	max-width: 28rem;
}

/* Lien "Me contacter" associé à la présentation Tech For You : réutilise le
   motif .tfy-link-arrow--light (couleur/flèche/hover déjà validés ailleurs
   sur le site) avec juste une taille/marge scopées pour rester sobre à côté
   du lien "Découvrir SOS Pocket". */
.tfy-founder__content a.tfy-founder__contact-link {
	margin-top: 0.85rem;
	font-size: clamp(0.95rem, 1.05vw, 1.02rem);
}

.tfy-human__sospocket-copy {
	max-width: 27rem;
}

/* Fait office de titre secondaire (« Également fondateur de SOS Pocket »),
   pas d'un simple eyebrow : taille et graisse augmentées pour lui donner la
   présence d'un vrai titre, comme sur la maquette de référence. */
.tfy-human__sospocket-label {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	font-size: clamp(1.05rem, 1.5vw, 1.2rem);
	line-height: 1.3;
	font-weight: 800;
	color: var(--tfy-indigo-bright);
}

.tfy-human__sospocket-copy .tfy-human__sospocket-label {
	margin-bottom: 0.75rem;
}

/* Le véritable logo SOS Pocket (fourni par l'utilisateur, jamais modifié) à
   une taille où il est réellement identifiable — l'ancienne icône de 26px
   ne rendait pas justice au dégradé/à la forme du logo réel. Hauteur en
   auto pour respecter son ratio d'origine (1350x1165, pas un carré). */
.tfy-human__sospocket-logo {
	width: clamp(46px, 4vw, 60px);
	height: auto;
	flex: none;
}

.tfy-human__sospocket-text {
	font-size: 0.92rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.6);
	max-width: 26rem;
}

/* Cadre de téléphone (même principe que le mockup SOS Pocket : coins très
   arrondis, encoche, une seule ombre neutre) pour que l'écran se lise
   immédiatement comme une vraie application sur smartphone. */
/* Enveloppe non recadrée, seulement pour porter la lumière douce derrière
   le téléphone (le cadre ci-dessous a overflow:hidden et couperait un halo
   placé directement dessus). */
.tfy-human__phone-wrap {
	position: relative;
	display: block;
	flex: none;
}

.tfy-human__phone-wrap::before {
	content: "";
	position: absolute;
	inset: -24px;
	border-radius: 48px;
	background: radial-gradient(closest-side, rgba(90, 162, 255, 0.24), rgba(10, 11, 16, 0) 75%);
	filter: blur(20px);
	z-index: 0;
	pointer-events: none;
}

/* Cadre agrandi : le diagnostic (résolution intrinsèque 720x1544, ratio de
   réduction à l'affichage précédent ~4.5:1) montrait une interface encore
   trop petite pour bien lire les libellés à l'écran — pas un problème de
   fichier ni d'effet, donc on donne réellement plus de place au téléphone
   plutôt que d'ajouter un traitement dessus. */
.tfy-phone-frame {
	position: relative;
	z-index: 1;
	display: block;
	width: clamp(195px, 19vw, 270px);
	aspect-ratio: 720 / 1544;
	border-radius: 32px;
	overflow: hidden;
	background: #0a0b10;
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: 0 26px 54px -18px rgba(0, 0, 0, 0.65);
	transform: rotate(1.5deg);
	transition: transform var(--tfy-duration) var(--tfy-ease), box-shadow var(--tfy-duration) var(--tfy-ease);
}

.tfy-phone-frame::after {
	content: "";
	position: absolute;
	top: 8px;
	left: 50%;
	width: 32%;
	height: 4px;
	transform: translateX(-50%);
	border-radius: 4px;
	background: rgba(10, 11, 16, 0.55);
	z-index: 1;
}

.tfy-founder:hover .tfy-phone-frame {
	transform: rotate(0deg);
	box-shadow: 0 30px 60px -18px rgba(0, 0, 0, 0.72);
}

img.tfy-human__sospocket-phone {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
}

/* .tfy-contact-final (bande CTA de clôture) déplacé dans techforyou-layout.css
   : composant de fin de page réutilisé tel quel sur les pages suivantes
   (Tarifs...), pas propre à l'accueil. */

/* ---------------------------------------------------------------------- */
/* Grand écran (≥1920px) — UN SEUL système, volontairement simple :
   - le container s'élargit de façon continue et symétrique
     (--tfy-container-wide, toujours centré par margin-inline:auto) ;
   - le container général (hero, services, tarifs...) s'élargit de façon
     continue et symétrique (--tfy-shell-margin) au lieu de laisser les
     visuels toucher le bord droit ;
   - MAIS les compositions internes qui étaient visuellement liées dans la
     version étroite (photo + bloc Particuliers/Professionnels ; tarifs +
     bloc Jérémy/SOS Pocket en dessous) gardent leurs propres relations et
     une largeur locale raisonnable — elles ne s'écartent PAS juste parce
     que le container général est plus large. C'est la version étroite qui
     sert de référence de composition, pas une redistribution sur 2560px.
   Sous 1920px, rien ne change (--tfy-container-wide garde sa valeur de
   base définie dans techforyou-base.css).                                */
/* ---------------------------------------------------------------------- */
@media (min-width: 1920px) {
	/* --tfy-container-wide est redéfini dans techforyou-layout.css (composant
	   partagé) ; --tfy-shell-margin reste ici, propre au hero de l'accueil. */
	:root {
		--tfy-shell-margin: calc((100vw - var(--tfy-container-wide)) / 2);
	}

	/* La photo va maintenant jusqu'au bord physique (right:0) au lieu de
	   s'arrêter à --tfy-shell-margin (ce qui laissait une bande de fond nue
	   entre la photo et le bord de l'écran) ; un fondu progressif sur sa
	   propre largeur de marge fait disparaître ce bord dans le fond du
	   hero, sans déformer la photo ni changer la composition.
	   (.tfy-logo img à 1920px est défini dans techforyou-layout.css) */
	.tfy-hero__media {
		right: 0;
	}

	.tfy-hero__media::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 2;
		background: linear-gradient(
			90deg,
			transparent 0%,
			transparent calc(100% - var(--tfy-shell-margin) - 60px),
			#0a0b10 100%
		);
		pointer-events: none;
	}

	.tfy-hero__title {
		font-size: clamp(3.75rem, 3vw, 4.35rem);
	}

	.tfy-service__icon-wrap {
		width: 62px;
		height: 62px;
	}

	.tfy-service__icon {
		width: 30px;
		height: 30px;
	}

	.tfy-cases__list {
		max-width: 84rem;
	}

	.tfy-case__icon {
		width: 56px;
		height: 56px;
	}

	.tfy-cases__list .tfy-case h3 {
		font-size: 1.2rem;
	}

	.tfy-cases__list .tfy-case p {
		font-size: 0.98rem;
	}

	.tfy-google {
		padding: 3.25rem 3rem;
	}

	/* Solutions n'a plus besoin d'override ici : .tfy-work__grid est une
	   vraie grille dans le container wide, elle occupe et se recentre avec
	   lui automatiquement à toute largeur. */

	.tfy-pricing-human__head #tfy-pricing-title {
		font-size: 2.8rem;
	}

	.tfy-pricing {
		max-width: 50rem;
	}

	.tfy-price {
		padding: 2.2rem 2.4rem;
	}

	.tfy-price__amount {
		font-size: 3rem;
	}

	.tfy-price__unit,
	.tfy-price__tag {
		font-size: 0.92rem;
	}

	/* La composition Tech For You/SOS Pocket restait cantonnée à 72rem alors
	   que le container général s'élargit bien au-delà : elle paraissait
	   minuscule et centrée sur les grands écrans. On lui donne plus de
	   largeur locale (les tarifs, eux, gardent leur propre max-width). */
	.tfy-pricing-human__grid {
		max-width: 92rem;
	}

	.tfy-founder__photo {
		width: clamp(280px, 16vw, 400px);
	}

	.tfy-human__logo {
		width: clamp(150px, 9vw, 195px);
	}

	.tfy-human__sospocket-logo {
		width: clamp(52px, 3.4vw, 66px);
	}
}

/* ---------------------------------------------------------------------- */
/* Petit desktop / tablette large (≤1180px)                              */
/* ---------------------------------------------------------------------- */
@media (max-width: 1180px) {
	.tfy-services__list {
		grid-template-columns: repeat(2, 1fr);
	}

	.tfy-services__list > .tfy-service:nth-child(3n + 2) {
		margin-top: 0;
	}

	.tfy-services__list > .tfy-service:nth-child(even) {
		margin-top: 2.25rem;
	}

	.tfy-work__grid {
		grid-template-columns: minmax(240px, 38%) 1fr;
		gap: clamp(2rem, 4vw, 3rem);
	}

	/* Besoins courants : 2 colonnes x 3 lignes — le filet de séparation doit
	   maintenant démarrer à la 2e ligne, qui commence à l'item 3 (pas 4). */
	.tfy-cases__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 52rem;
	}

	.tfy-case:nth-child(n + 4) {
		margin-top: 0;
		padding-top: 0;
	}

	.tfy-case:nth-child(n + 4)::before {
		content: none;
	}

	.tfy-case:nth-child(n + 3) {
		margin-top: clamp(2.5rem, 4vw, 3rem);
		padding-top: clamp(2.5rem, 4vw, 3rem);
	}

	.tfy-case:nth-child(n + 3)::before {
		content: "";
		position: absolute;
		top: -3px;
		left: 10%;
		right: 10%;
		height: 7px;
		background:
			radial-gradient(circle, rgba(90, 162, 255, 0.65) 0 1.8px, transparent 2.4px) 50% 50% / 7px 7px no-repeat,
			linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.11) 30%, rgba(255, 255, 255, 0.11) 70%, transparent) 50% 50% / 100% 1px no-repeat;
	}

	.tfy-deco--work {
		opacity: 0.6;
	}
}

/* ---------------------------------------------------------------------- */
/* Tablette (≤1024px)                                                     */
/* ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
	/* .tfy-nav / .tfy-header__actions / .tfy-burger à 1024px : voir techforyou-layout.css */
	.tfy-hero {
		min-height: 0;
		padding-block: 6rem 2.5rem 0;
		display: block;
	}

	.tfy-hero__media {
		position: relative;
		inset: auto;
		left: auto;
		right: auto;
		bottom: auto;
		width: 100%;
		height: clamp(240px, 52vw, 400px);
		margin-bottom: 2rem;
		clip-path: none;
		-webkit-mask-image: linear-gradient(to bottom, black 0%, black 78%, transparent 100%);
		mask-image: linear-gradient(to bottom, black 0%, black 78%, transparent 100%);
		order: -1;
	}

	.tfy-hero__media::before {
		background: linear-gradient(
			180deg,
			rgba(10, 11, 16, 0.15) 0%,
			rgba(10, 11, 16, 0.35) 70%,
			#0a0b10 100%
		);
	}

	.tfy-hero {
		display: flex;
		flex-direction: column;
	}

	.tfy-hero__glow {
		display: none;
	}

	.tfy-hero__title,
	.tfy-hero__lead {
		max-width: none;
	}

	.tfy-work__grid {
		grid-template-columns: 1fr;
	}

	.tfy-work__media {
		aspect-ratio: 16 / 9;
	}

	.tfy-work__lead {
		max-width: none;
	}

	.tfy-work__panel {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.tfy-audiences__divider {
		width: 100%;
		height: 1px;
	}

	.tfy-deco--work {
		display: none;
	}

	/* Pourquoi / Google : séquence verticale (titre, axe, preuve Google). */
	.tfy-why__grid {
		grid-template-columns: 1fr;
	}

	.tfy-google {
		justify-self: start;
		width: 100%;
		max-width: 30rem;
	}

	.tfy-google::before {
		display: none;
	}

	.tfy-why__grid::after {
		display: none;
	}

	/* Tech For You/SOS Pocket : la grille à 3 colonnes n'a plus la largeur
	   nécessaire pour rester lisible en dessous de 1024px ; on empile les
	   deux ensembles et on retire le filet vertical (qui n'aurait plus de
	   sens entre deux blocs superposés). */
	.tfy-founder {
		grid-template-columns: 1fr;
		row-gap: clamp(2.5rem, 5vw, 3.5rem);
	}

	.tfy-founder__divider {
		display: none;
	}
	/* .tfy-footer__grid à 1024px : voir techforyou-layout.css */
}

/* ---------------------------------------------------------------------- */
/* Mobile (≤640px)                                                        */
/* ---------------------------------------------------------------------- */
@media (max-width: 640px) {
	.tfy-hero {
		padding-block: 5.5rem 2rem 0;
	}

	.tfy-hero__actions .tfy-btn,
	.tfy-pricing__cta .tfy-btn {
		width: 100%;
		justify-content: center;
	}
	/* .tfy-contact-final__main .tfy-btn / .tfy-mobile-menu__actions .tfy-btn
	   à 640px : voir techforyou-layout.css (composants partagés) */

	.tfy-services__list {
		grid-template-columns: 1fr;
		row-gap: 1.75rem;
	}

	.tfy-services__list > .tfy-service:nth-child(even) {
		margin-top: 0;
	}

	.tfy-service {
		display: flex;
		align-items: flex-start;
		gap: 1rem;
	}

	.tfy-service__icon-wrap {
		margin-bottom: 0;
		width: 44px;
		height: 44px;
	}

	.tfy-service__icon {
		width: 22px;
		height: 22px;
	}


	.tfy-cases__head {
		max-width: none;
	}

	.tfy-cases__list {
		grid-template-columns: 1fr;
	}

	.tfy-cases__list::before {
		display: none;
	}

	/* grid (pas flex) : le pictogramme occupe la colonne 1 sur les 2 lignes,
	   le titre et la description s'empilent en colonne 2 — un flex simple
	   mettrait icône/titre/description côte à côte au lieu de icône puis
	   titre+description empilés. */
	.tfy-case {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 1rem;
		row-gap: 0.3rem;
		align-items: start;
		text-align: left;
		padding-inline: 0;
	}

	.tfy-case__pic {
		grid-row: 1 / 3;
		margin-bottom: 0;
		width: 52px;
		height: 52px;
	}

	.tfy-case__pic::after {
		display: none;
	}

	.tfy-case__icon {
		width: 42px;
		height: 42px;
	}

	.tfy-case:nth-child(n + 3) {
		margin-top: 0;
		padding-top: 0;
	}

	.tfy-case:nth-child(n + 3)::before {
		content: none;
	}

	.tfy-case:nth-child(n + 2) {
		margin-top: 1.5rem;
		padding-top: 1.5rem;
		border-top: 1px solid rgba(255, 255, 255, 0.07);
	}

	.tfy-price-row {
		grid-template-columns: 1fr;
	}

	.tfy-founder::before {
		display: none;
	}

	.tfy-founder__primary,
	.tfy-founder__secondary {
		flex-direction: column;
		align-items: flex-start;
	}

	.tfy-founder__secondary {
		margin-top: 0;
	}

	.tfy-founder__photo {
		width: clamp(180px, 46vw, 230px);
		aspect-ratio: 1 / 1.15;
	}

	.tfy-founder__photo::before,
	.tfy-founder__photo::after,
	.tfy-human__phone-wrap::before {
		display: none;
	}

	.tfy-human__phone-wrap {
		margin-top: 1.75rem;
	}

	.tfy-phone-frame {
		width: clamp(140px, 40vw, 190px);
	}

	/* .tfy-contact-final__inner / .tfy-footer__grid / .tfy-mobile-cta /
	   .tfy-footer padding à 640px : voir techforyou-layout.css */
}