/* ==========================================================================
   Tech For You — Page locale Talant (page locale MODÈLE).
   Réutilise les fondations (techforyou-base.css) et les composants partagés
   (techforyou-layout.css : en-tête, pied de page, .tfy-flow, bande CTA de
   clôture). Composition propre à cette page, pensée comme gabarit pour les
   futures pages locales : rythme volontairement varié (pas de répétition
   systématique titre-gauche/contenu-droite, pas de numérotation 01-06/01-03).
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* 1. Hero — pas de photo (page sans image), léger halo diffus            */
/* ---------------------------------------------------------------------- */
.tfy-tal-intro {
	position: relative;
	overflow: hidden;
	padding-block: clamp(4rem, 8vw, 6.5rem) clamp(2.25rem, 4vw, 3.25rem);
	color: var(--tfy-white);
}

.tfy-tal-intro::before {
	content: "";
	position: absolute;
	top: -14%;
	right: -8%;
	width: min(32vw, 420px);
	height: min(32vw, 420px);
	background: radial-gradient(circle, rgba(0, 103, 255, 0.14), transparent 72%);
	pointer-events: none;
	z-index: 0;
}

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

.tfy-tal-intro__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
	align-items: center;
	gap: clamp(2.5rem, 5vw, 4.5rem);
}

/* ---- Composition droite : pictogrammes + mot-repère "TALANT" en fond ---- */
.tfy-tal-intro__visual {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	min-height: clamp(300px, 28vw, 420px);
	padding-top: clamp(0.5rem, 2vw, 1.25rem);
}

.tfy-tal-intro__visual-word {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 62%;
	padding-bottom: clamp(0.25rem, 1.5vw, 1rem);
	font-size: clamp(5.5rem, 10vw, 10rem);
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1;
	color: rgba(255, 255, 255, 0.045);
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}

/* Modificateur pour un nom de commune long (ex. "ST-APOLLINAIRE") qui
   déborde sinon du conteneur avec la taille de base : réduit uniquement
   la taille de ce mot précis, sans toucher à .tfy-tal-intro__visual-word
   (partagée par les autres communes). */
.tfy-tal-intro__visual-word--long {
	font-size: clamp(2.7rem, 4.9vw, 4.9rem);
}

.tfy-tal-intro__visual-compo {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto clamp(1.5rem, 3vw, 2.25rem) auto;
	align-items: center;
	justify-items: center;
	column-gap: clamp(1.5rem, 3vw, 2.5rem);
	width: min(100%, 300px);
}

.tfy-tal-intro__visual-label {
	grid-column: 1 / -1;
	grid-row: 1;
	max-width: 14rem;
	text-align: center;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.82);
}

.tfy-tal-intro__visual-icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	grid-row: 3;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.035);
	color: var(--tfy-blue-bright);
}

.tfy-tal-intro__visual-icon svg {
	width: 32px;
	height: 32px;
}

.tfy-tal-intro__visual-icon--a {
	grid-column: 1;
}

.tfy-tal-intro__visual-icon--b {
	grid-column: 3;
}

.tfy-tal-intro__visual-icon--c {
	grid-column: 2;
	width: 30px;
	height: 30px;
	border: none;
	background: none;
	color: var(--tfy-indigo-bright);
	opacity: 0.75;
}

.tfy-tal-intro__visual-icon--c svg {
	width: 20px;
	height: 20px;
}

.tfy-tal-intro__visual-line--1 {
	grid-column: 1 / -1;
	grid-row: 2;
	align-self: center;
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(90, 162, 255, 0.42) 22%, rgba(164, 139, 255, 0.38) 78%, transparent);
}

.tfy-tal-intro__visual-line--2 {
	grid-column: 2;
	grid-row: 2 / 4;
	justify-self: center;
	width: 1px;
	height: 100%;
	background: linear-gradient(180deg, rgba(90, 162, 255, 0.4), transparent 85%);
}

.tfy-tal-intro__visual-dot {
	grid-column: 2;
	grid-row: 2;
	justify-self: center;
	align-self: center;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--tfy-blue-bright);
	box-shadow: 0 0 14px 3px rgba(90, 162, 255, 0.55);
}

.tfy-tal-intro__title {
	/* Hiérarchie typographique — H1 volontairement au-dessus du plafond des H2
	   (.tfy-section-title plafonne à 2.35rem) : même principe que le correctif
	   appliqué sur Contact, pour que le H1 reste dominant sur grand écran. */
	max-width: 34rem;
	font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.85rem);
	line-height: 1.14;
}

.tfy-tal-intro__lead {
	margin-top: 1.35rem;
	max-width: var(--tfy-measure);
	font-size: 1.05rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
}

.tfy-tal-intro__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: 2rem;
	margin-bottom: 1.25rem;
}

.tfy-tal-intro__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-tal-intro__mention svg {
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--tfy-blue-bright);
}

/* ---------------------------------------------------------------------- */
/* 2. Intervention à domicile — bloc éditorial ample + annotation latérale */
/* ---------------------------------------------------------------------- */
.tfy-tal-home {
	position: relative;
	isolation: isolate;
	padding-block: clamp(4rem, 7vw, 6rem);
}

/* Rupture oblique hero → section : masse bleu nuit légèrement plus claire qui
   entre par une grande diagonale douce depuis le coin haut-gauche. */
.tfy-tal-home::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
	background: linear-gradient(200deg, rgba(58, 90, 168, 0.22) 0%, rgba(58, 90, 168, 0.07) 45%, transparent 68%);
	pointer-events: none;
}

.tfy-tal-home__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(180px, 0.42fr);
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: start;
	max-width: var(--tfy-content-wide, var(--tfy-content));
	margin-inline: auto;
}

.tfy-tal-home__editorial {
	max-width: 46rem;
}

.tfy-tal-home__title {
	margin-top: 0.9rem;
	max-width: 30rem;
	font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem);
	font-weight: 800;
	line-height: 1.16;
	color: var(--tfy-white);
}

.tfy-tal-home__lead {
	margin-top: 1.1rem;
	max-width: 42rem;
	font-size: 1.02rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.8);
}

/* Annotation secondaire, pas une carte concurrente : simple filet + texte. */
.tfy-tal-home__note {
	align-self: end;
	padding-left: clamp(1.1rem, 1.6vw, 1.4rem);
	border-left: 2px solid rgba(90, 162, 255, 0.4);
	font-size: 0.9rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.68);
}

.tfy-tal-home__note-label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tfy-indigo-bright);
}

/* ---------------------------------------------------------------------- */
/* 3. Besoins — grille ouverte 3x2, sans numérotation                     */
/* ---------------------------------------------------------------------- */
.tfy-tal-needs {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(3.5rem, 6vw, 5rem);
}

/* Variation de fond n°1 — graphite bleuté, halo très diffus, décentré haut-gauche. */
.tfy-tal-needs::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(ellipse 70% 60% at 8% 0%, rgba(58, 90, 168, 0.16), transparent 70%);
	pointer-events: none;
}

.tfy-tal-needs__head {
	max-width: 34rem;
	margin-bottom: clamp(2.25rem, 4vw, 3rem);
}

/* Desktop large : le titre reste dans une colonne dédiée à gauche, mais la
   grille des 6 prestations occupe désormais toute la largeur restante à
   droite (2 colonnes x 3 lignes) au lieu de s'étaler seule sous le titre. */
@media (min-width: 1025px) {
	.tfy-tal-needs__layout {
		display: grid;
		grid-template-columns: minmax(230px, 0.56fr) minmax(0, 1fr);
		align-items: center;
		gap: clamp(2.5rem, 5vw, 4rem);
		max-width: var(--tfy-content-wide, var(--tfy-content));
		margin-inline: auto;
	}

	.tfy-tal-needs__head {
		max-width: none;
		margin-bottom: 0;
	}

	.tfy-tal-needs__grid {
		grid-template-columns: repeat(2, 1fr);
		max-width: none;
		margin-inline: 0;
	}

	/* Léger décalage vertical en quinconce : casse l'alignement trop
	   "tableau" sans transformer les items en cartes. */
	.tfy-tal-needs__item:nth-child(even) {
		margin-top: clamp(1.5rem, 3vw, 2.25rem);
	}
}

.tfy-tal-needs__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: clamp(2.25rem, 4vw, 3.5rem);
	row-gap: clamp(2.5rem, 4vw, 3.25rem);
	max-width: var(--tfy-content-wide, var(--tfy-content));
	margin-inline: auto;
}

.tfy-tal-needs__item {
	padding-top: clamp(1.25rem, 2vw, 1.5rem);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.tfy-tal-needs__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-bottom: 0.9rem;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.035);
	color: var(--tfy-blue-bright);
}

.tfy-tal-needs__icon svg {
	width: 20px;
	height: 20px;
}

.tfy-tal-needs__item h3 {
	font-size: 1rem;
	font-weight: 700;
	color: var(--tfy-white);
}

.tfy-tal-needs__item p {
	margin-top: 0.4rem;
	font-size: 0.9rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.68);
}

.tfy-tal-needs__note {
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
	max-width: 34rem;
	font-size: 0.85rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.52);
}

.tfy-tal-needs__link {
	display: inline-block;
	margin-top: 0.85rem;
}

/* ---------------------------------------------------------------------- */
/* 4. Déroulement — intro éditoriale + 3 zones ouvertes, sans numérotation */
/* ---------------------------------------------------------------------- */
.tfy-tal-process {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* Haut resserré (remonte le titre dans l'espace auparavant vide),
	   bas inchangé (rythme conservé avant la section Tarif). */
	padding-top: clamp(2.25rem, 4vw, 3.25rem);
	padding-bottom: clamp(3.5rem, 6vw, 5rem);
}

/* Variation de fond n°2 — bleu nuit très sombre avec pointe de violet,
   décentré à l'opposé de celui des Besoins (bas-droite). */
.tfy-tal-process::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(ellipse 65% 65% at 92% 100%, rgba(30, 20, 60, 0.32), transparent 72%);
	pointer-events: none;
}

/* Le prétitre reste un simple repère aligné à gauche ; le titre et la
   phrase locale, eux, sont centrés dans la même largeur que le parcours
   des 3 étapes juste en dessous (cf. .tfy-tal-process__flow). */
.tfy-tal-process__head {
	max-width: var(--tfy-content-wide, var(--tfy-content));
	margin-inline: auto;
	/* Respiration clairement perceptible avant les 3 étapes (compensée par
	   le padding-top resserré ci-dessus pour ne pas grandir la section). */
	margin-bottom: clamp(2.5rem, 4.5vw, 3.25rem);
}

.tfy-tal-process__head .tfy-section-title {
	max-width: 34rem;
	margin-inline: auto;
	text-align: center;
}

/* Phrase locale reprise de l'ancienne section « Moment local » : rattachée
   ici à l'intro éditoriale (prétitre → titre → phrase → étapes), centrée
   sous le titre, sur le même axe. Largeur volontairement généreuse pour
   tenir sur une seule ligne sur grand écran (mesuré ~50.5rem en rendu
   réel avec la police du site). */
/* p.tfy-tal-process__intro (élément+classe) : nécessaire pour égaler la
   spécificité de « .tfy-body p{margin:0} » et gagner sur ordre de
   déclaration (sinon ce reset écrase silencieusement margin-inline:auto,
   même mécanisme que p.tfy-eyebrow plus haut dans ce fichier). */
p.tfy-tal-process__intro {
	margin-top: 1rem;
	max-width: 54rem;
	margin-inline: auto;
	text-align: center;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.68);
}

.tfy-tal-process__flow {
	display: flex;
	align-items: flex-start;
	gap: clamp(2rem, 5vw, 4rem);
	max-width: var(--tfy-content-wide, var(--tfy-content));
	margin-inline: auto;
}

.tfy-tal-process__step {
	flex: 1 1 0;
	max-width: none;
	text-align: left;
}

/* Léger décalage vertical en escalier : casse l'alignement trop régulier
   sans recourir à une timeline ni à une numérotation. Desktop uniquement,
   la version tablette/mobile empile les étapes sans décalage. */
@media (min-width: 1025px) {
	.tfy-tal-process__step:nth-child(2) {
		margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
	}

	.tfy-tal-process__step:nth-child(3) {
		margin-top: clamp(2.5rem, 5vw, 3.25rem);
	}
}

.tfy-tal-process__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 1.4rem;
	color: var(--tfy-blue-bright);
	filter: drop-shadow(0 0 12px rgba(90, 162, 255, 0.2));
}

.tfy-tal-process__icon svg {
	width: 100%;
	height: 100%;
}

/* Trait d'accent court sous chaque pictogramme, au lieu d'un cercle ou
   d'une timeline reliant les trois étapes. */
.tfy-tal-process__icon::after {
	content: "";
	position: absolute;
	left: 1px;
	bottom: -0.75rem;
	width: 26px;
	height: 2px;
	background: linear-gradient(90deg, rgba(90, 162, 255, 0.55), transparent);
}

.tfy-tal-process__step h3 {
	margin-bottom: 0.5rem;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--tfy-white);
}

.tfy-tal-process__step p {
	max-width: 22rem;
	font-size: 0.9rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.68);
}

/* ---------------------------------------------------------------------- */
/* 6. Tarif — bande intégrée (pas de carte isolée)                        */
/* ---------------------------------------------------------------------- */
.tfy-tal-price {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(4.5rem, 8vw, 6.5rem);
}

.tfy-tal-price::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(115deg, rgba(36, 26, 68, 0.4) 0%, rgba(10, 11, 16, 0) 45%),
		radial-gradient(ellipse 60% 90% at 78% 25%, rgba(90, 162, 255, 0.1), transparent 70%),
		radial-gradient(ellipse 55% 70% at 12% 90%, rgba(164, 139, 255, 0.12), transparent 65%);
	background-repeat: no-repeat;
	pointer-events: none;
}

.tfy-tal-price__head {
	max-width: 30rem;
	margin-bottom: clamp(2.5rem, 4vw, 3.25rem);
}

.tfy-tal-price__band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1.75rem, 3vw, 3rem);
	max-width: var(--tfy-content-wide, var(--tfy-content));
	margin-inline: auto;
}

.tfy-tal-price__amount {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	font-size: clamp(3.25rem, 6vw, 4.75rem);
	font-weight: 800;
	line-height: 1;
	color: var(--tfy-blue-bright);
	text-shadow: 0 0 46px rgba(90, 162, 255, 0.32);
}

.tfy-tal-price__amount-unit {
	font-size: 1rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.68);
}

.tfy-tal-price__divider {
	flex: none;
	width: 1px;
	align-self: stretch;
	background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.22), transparent);
}

.tfy-tal-price__details {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.tfy-tal-price__extra {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--tfy-white);
}

.tfy-tal-price__free {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--tfy-indigo-bright);
}

.tfy-tal-price__link {
	margin-left: auto;
}

/* ---------------------------------------------------------------------- */
/* 7. FAQ — titre en intro pleine largeur, accordéons en grille 2x2       */
/* ---------------------------------------------------------------------- */
.tfy-tal-faq {
	padding-block: clamp(4rem, 7vw, 5.5rem);
}

.tfy-tal-faq__head {
	max-width: 34rem;
	margin-inline: auto;
	margin-bottom: clamp(2.5rem, 4vw, 3.25rem);
	text-align: center;
}

.tfy-tal-faq__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 clamp(2.5rem, 4vw, 4rem);
	max-width: 62rem;
	margin-inline: auto;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.tfy-faq__item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	padding-block: clamp(1.1rem, 2vw, 1.35rem);
}

.tfy-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
	list-style: none;
	font-size: 0.96rem;
	font-weight: 700;
	color: var(--tfy-white);
}

.tfy-faq__item summary::-webkit-details-marker {
	display: none;
}

.tfy-faq__item summary::after {
	content: "+";
	flex: none;
	font-size: 1.2rem;
	font-weight: 400;
	color: var(--tfy-blue-bright);
	transition: transform var(--tfy-duration) var(--tfy-ease);
}

.tfy-faq__item[open] summary::after {
	transform: rotate(45deg);
}

.tfy-faq__item p {
	margin-top: 0.7rem;
	font-size: 0.9rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.7);
	max-width: 42rem;
}

/* ---------------------------------------------------------------------- */
/* Grand écran (≥1920px) — exploite la largeur disponible                 */
/* ---------------------------------------------------------------------- */
@media (min-width: 1920px) {
	.tfy-tal-intro__visual-word {
		font-size: clamp(7rem, 9vw, 12rem);
	}

	.tfy-tal-intro__visual-word--long {
		font-size: clamp(3.4rem, 4.4vw, 5.85rem);
	}

	.tfy-tal-intro__visual-compo {
		width: min(100%, 360px);
	}

	.tfy-tal-home__editorial {
		max-width: 54rem;
	}

	.tfy-tal-home__title {
		max-width: 36rem;
	}

	.tfy-tal-faq__grid {
		max-width: 74rem;
	}

	/* Au-delà de 1920px, le container --tfy-container-wide s'élargit
	   beaucoup plus vite que --tfy-content-wide (colonne du titre) : sans
	   correction, le bloc "Vos besoins" se retrouve centré dans une colonne
	   bien plus étroite que le container, très à droite du lien "Découvrir
	   toutes les prestations..." posé, lui, contre le bord du container.
	   Ce décalage négatif ramène le bloc titre au même bord gauche que ce
	   lien (calcul basé sur les mêmes tokens que le reste du site, pas de
	   valeur devinée). */
	.tfy-tal-needs__head {
		margin-left: calc((var(--tfy-content-wide, var(--tfy-content)) - var(--tfy-container-wide)) / 2 + var(--tfy-gutter));
	}
}

/* ---------------------------------------------------------------------- */
/* Tablette (≤1024px)                                                     */
/* ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.tfy-tal-intro__grid {
		grid-template-columns: 1fr;
	}

	.tfy-tal-intro__visual {
		display: none;
	}

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

	.tfy-tal-home__note {
		align-self: auto;
		margin-top: 1.5rem;
	}

	.tfy-tal-needs__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.tfy-tal-process__flow {
		flex-direction: column;
		align-items: stretch;
	}

	.tfy-tal-process__step {
		max-width: none;
	}

	.tfy-tal-price__band {
		flex-direction: column;
		align-items: flex-start;
	}

	.tfy-tal-price__divider {
		display: none;
	}

	.tfy-tal-price__link {
		margin-left: 0;
	}

	.tfy-tal-faq__grid {
		grid-template-columns: 1fr;
		max-width: 42rem;
	}
}

/* ---------------------------------------------------------------------- */
/* Mobile (≤640px)                                                        */
/* ---------------------------------------------------------------------- */
@media (max-width: 640px) {
	.tfy-tal-intro__actions .tfy-btn {
		width: 100%;
		justify-content: center;
	}

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