/* ==========================================================================
   Tech For You — Page Dépannage & réparation.
   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). Six ensembles éditoriaux, composition propre à chacun :
   1. Intro asymétrique texte/photo. 2. Prestations en 3 rangées alternées
   texte/illustration vectorielle (pas de numéros, pas de cartes).
   3. Problèmes courants en grille à marqueurs (4 colonnes pleine largeur en
   grand écran, 2×2 en tablette, empilée en mobile). 4. Déroulement + rappel
   tarifaire en un seul bloc (prose + véritable panneau de prix).
   5. Zone d'intervention / questions pratiques en deux colonnes
   complémentaires (FAQ en panneau). 6. Contact final (composant commun).
   ========================================================================== */

/* Largeur de colonne de contenu partagée par les blocs éditoriaux de cette
   page (intro, prestations, déroulement, zone+FAQ) : le conteneur global
   (.tfy-container--wide) peut atteindre ~2260px sur très grand écran, mais
   ces blocs restent lisibles et centrés dans cette largeur plutôt que de
   s'étirer ou de rester plaqués à gauche avec du vide à droite. Les
   Problèmes courants (grille 4 colonnes) restent volontairement en dehors :
   ils exploitent toute la largeur du conteneur, sans ce plafond.
   Palier "Composition" partagé : --tfy-content (techforyou-base.css), 78rem
   — valeur inchangée, ancienne variable locale --tfy-dep-content supprimée. */

/* ---------------------------------------------------------------------- */
/* 1. Introduction — texte à gauche, photo à droite                        */
/* ---------------------------------------------------------------------- */
.tfy-dep-intro {
	padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(3rem, 6vw, 4.5rem);
	color: var(--tfy-white);
}

.tfy-dep-intro__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: center;
	/* Seule composition texte/photo de la page à bénéficier du palier
	   élargi (--tfy-content-wide, jusqu'à 90rem sur très grand écran) :
	   c'est la seule association illustration/texte de premier plan de
	   Dépannage. Sous 1920px, --tfy-content-wide n'existe pas → repli
	   strict sur --tfy-content (78rem), aucun changement. */
	max-width: var(--tfy-content-wide, var(--tfy-content));
	margin-inline: auto;
}

.tfy-dep-intro__title {
	max-width: 32rem;
}

.tfy-dep-intro__lead {
	margin-top: 1rem;
	font-size: 1.02rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.75);
	max-width: 34rem;
}

.tfy-dep-intro__lead + .tfy-btn {
	margin-top: 1.75rem;
}

.tfy-dep-intro__media {
	position: relative;
	aspect-ratio: 3 / 4.6;
	max-width: 26rem;
	max-height: 32rem;
	justify-self: end;
	border-radius: var(--tfy-radius-md);
	overflow: hidden;
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
}

.tfy-dep-intro__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
	filter: saturate(0.94) contrast(1.05) brightness(0.9);
}

.tfy-dep-intro__media::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 40%;
	height: 40%;
	border-top: 1px solid rgba(90, 162, 255, 0.55);
	border-right: 1px solid rgba(90, 162, 255, 0.55);
	margin: 14px;
	pointer-events: none;
}

/* Très grands écrans : la photo grossit avec le conteneur élargi — on
   réduit légèrement sa hauteur relative pour éviter un cadrage trop long. */
@media (min-width: 1920px) {
	.tfy-dep-intro__media {
		aspect-ratio: 3 / 3.9;
	}
}

/* ---------------------------------------------------------------------- */
/* 2. Prestations — 3 rangées éditoriales, numéros fantômes, alternance    */
/* ---------------------------------------------------------------------- */
.tfy-dep-services {
	padding-block: clamp(3rem, 6vw, 5rem);
}

.tfy-dep-services__inner {
	max-width: var(--tfy-content);
	margin-inline: auto;
}

.tfy-dep-services__head {
	max-width: 34rem;
	margin-left: clamp(0rem, 3vw, 2.25rem);
}

.tfy-dep-services__list {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.tfy-dep-services__item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(2rem, 4vw, 3.5rem);
	padding-block: clamp(2rem, 4vw, 3rem);
}

/* Séparation rangée 1 → 2 : trait fin dégradé (accent ponctuel, pas une
   simple ligne grise uniforme). */
.tfy-dep-services__item:nth-child(2)::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(90, 162, 255, 0.4) 50%, transparent);
}

/* Séparation rangée 2 → 3 : variation de fond très discrète, sans trait
   (volontairement différente de la séparation précédente). */
.tfy-dep-services__item:nth-child(3) {
	background: rgba(255, 255, 255, 0.02);
}

.tfy-dep-services__body {
	flex: 0 1 34rem;
	max-width: 34rem;
}

.tfy-dep-services__body h3 {
	font-size: clamp(1.15rem, 1.6vw, 1.3rem);
	font-weight: 700;
	color: var(--tfy-white);
	margin-bottom: 0.65rem;
}

.tfy-dep-services__body p {
	font-size: 0.94rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.68);
}

.tfy-dep-services__body p + p {
	margin-top: 0.65rem;
}

/* Illustration vectorielle sobre — occupe l'espace laissé vide à côté du
   texte, sans devenir une carte ni dominer la composition. */
.tfy-dep-services__visual {
	flex: 0 1 320px;
	max-width: 320px;
	aspect-ratio: 1;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tfy-dep-services__visual::before {
	content: "";
	position: absolute;
	inset: 8%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(90, 162, 255, 0.22), rgba(90, 162, 255, 0) 70%);
}

.tfy-dep-services__visual svg {
	position: relative;
	width: 62%;
	height: 62%;
	color: var(--tfy-blue-bright);
}

/* Rangée 2 : inversée (illustration à gauche, texte à droite). */
.tfy-dep-services__item:nth-child(2) {
	flex-direction: row-reverse;
}

.tfy-dep-services__item:nth-child(2) .tfy-dep-services__visual::before {
	background: radial-gradient(circle, rgba(164, 139, 255, 0.2), rgba(164, 139, 255, 0) 70%);
}

.tfy-dep-services__item:nth-child(2) .tfy-dep-services__visual svg {
	color: var(--tfy-indigo-bright);
}

/* ---------------------------------------------------------------------- */
/* 3. Problèmes courants — grille compacte 2×2 à marqueurs                 */
/* ---------------------------------------------------------------------- */
.tfy-dep-issues {
	position: relative;
	padding-block: clamp(3rem, 6vw, 4.5rem);
}

/* Transition diagonale très douce avec Prestations : léger changement de
   fond aux bords obliques (angle constant en vw), pas de rectangle net ni
   de trait horizontal. */
.tfy-dep-issues::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.045);
	clip-path: polygon(0 1.2vw, 100% 0, 100% calc(100% - 1.2vw), 0 100%);
	pointer-events: none;
	z-index: 0;
}

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

.tfy-dep-issues__head {
	max-width: 38rem;
	margin-inline: auto;
	text-align: center;
}

.tfy-dep-issues__grid {
	margin-top: clamp(2rem, 4vw, 2.75rem);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--tfy-radius-md);
	overflow: hidden;
}

.tfy-dep-issues__item {
	padding: clamp(1.5rem, 2.5vw, 2rem);
	border-top: none;
}

.tfy-dep-issues__item:not(:last-child) {
	border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.tfy-dep-issues__item h3 {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.98rem;
	font-weight: 700;
	color: var(--tfy-white);
	margin-bottom: 0.45rem;
}

.tfy-dep-issues__item h3::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--tfy-blue-bright);
}

.tfy-dep-issues__item:nth-child(even) h3::before {
	background: var(--tfy-indigo-bright);
}

.tfy-dep-issues__item p {
	font-size: 0.86rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.65);
}

.tfy-dep-issues__note {
	margin-top: clamp(1.5rem, 3vw, 2rem);
	max-width: 34rem;
	margin-inline: auto;
	text-align: center;
	font-size: 0.85rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.52);
}

/* ---------------------------------------------------------------------- */
/* 4. Déroulement d'une réparation + rappel tarifaire                      */
/* ---------------------------------------------------------------------- */
.tfy-dep-process {
	position: relative;
	padding-block: clamp(3rem, 6vw, 5rem);
	background: linear-gradient(to bottom, rgba(90, 162, 255, 0.05), transparent 45%);
}

/* Transition progressive avec Problèmes courants : dégradé vertical subtil
   (background ci-dessus) accompagné d'un halo bleu très diffus, sans
   agrandir ni déplacer le panneau tarifaire. */
.tfy-dep-process::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -55%);
	width: min(50vw, 640px);
	height: 200px;
	background: radial-gradient(ellipse at center, rgba(90, 162, 255, 0.1), transparent 70%);
	pointer-events: none;
	z-index: 0;
}

.tfy-dep-process__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr);
	gap: clamp(2.5rem, 5vw, 4rem);
	align-items: start;
	max-width: var(--tfy-content);
	margin-inline: auto;
}

.tfy-dep-process__main p {
	margin-top: 1rem;
	font-size: 1rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.78);
}

.tfy-dep-process__aside {
	position: relative;
	overflow: hidden;
	padding: clamp(2rem, 3.5vw, 2.75rem);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--tfy-radius-md);
}

.tfy-dep-process__aside::before {
	content: "";
	position: absolute;
	top: -30%;
	right: -20%;
	width: 70%;
	height: 70%;
	background: radial-gradient(circle, rgba(90, 162, 255, 0.16), rgba(90, 162, 255, 0) 70%);
	pointer-events: none;
}

.tfy-dep-process__aside-eyebrow {
	position: relative;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tfy-blue-bright);
	margin-bottom: 1rem;
}

.tfy-dep-process__aside-line {
	position: relative;
	font-size: 1rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
	margin-top: clamp(1.1rem, 2vw, 1.4rem);
	padding-top: clamp(1.1rem, 2vw, 1.4rem);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.tfy-dep-process__aside-line:first-of-type {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.tfy-dep-process__aside-line strong {
	display: block;
	font-size: clamp(2.1rem, 3.4vw, 2.75rem);
	font-weight: 800;
	line-height: 1.05;
	color: var(--tfy-blue-bright);
	text-shadow: 0 0 24px rgba(90, 162, 255, 0.35);
	margin-bottom: 0.3rem;
}

.tfy-dep-process__aside-link {
	position: relative;
	display: inline-block;
	margin-top: clamp(1.5rem, 2.5vw, 1.85rem);
}

/* ---------------------------------------------------------------------- */
/* 5. Zone d'intervention + Questions pratiques                            */
/* ---------------------------------------------------------------------- */
.tfy-dep-split {
	padding-block: clamp(3rem, 6vw, 5rem);
}

.tfy-dep-split__grid {
	position: relative;
}

/* Transition asymétrique avec Déroulement/tarifs : bande de fond partielle
   ancrée au bord gauche du contenu (décroché géométrique discret), pas de
   ligne centrée pleine largeur ni de bloc flottant déconnecté du texte. */
.tfy-dep-split__grid::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	transform: translateY(-58%);
	width: min(46%, 26rem);
	height: clamp(2.25rem, 4.5vw, 3.5rem);
	background: rgba(255, 255, 255, 0.03);
	border-left: 1px solid rgba(90, 162, 255, 0.16);
	pointer-events: none;
}

.tfy-dep-split__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: start;
	max-width: var(--tfy-content);
	margin-inline: auto;
}

.tfy-dep-split__zone p {
	margin-top: 1rem;
	font-size: 0.98rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.72);
	max-width: 30rem;
}

/* La FAQ reçoit un véritable panneau (fond + bordure) pour ne pas se
   perdre à côté du bloc Zone d'intervention. */
.tfy-dep-split__faq {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--tfy-radius-md);
	padding: clamp(1.75rem, 3vw, 2.5rem);
}

.tfy-dep-split__faq-list {
	margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
	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;
}

.tfy-faq__item p + p {
	margin-top: 0.5rem;
}

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

	.tfy-dep-intro__media {
		order: -1;
		aspect-ratio: 16 / 9;
		max-width: none;
		max-height: none;
		justify-self: stretch;
	}

	/* Écran intermédiaire : grille 2×2 (au lieu de 4 colonnes pleine largeur). */
	.tfy-dep-issues__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.tfy-dep-issues__item {
		border-right: none;
		border-top: 1px solid rgba(255, 255, 255, 0.1);
	}

	.tfy-dep-issues__item:nth-child(-n + 2) {
		border-top: none;
	}

	.tfy-dep-issues__item:nth-child(odd) {
		border-right: 1px solid rgba(255, 255, 255, 0.1);
	}

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

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

/* ---------------------------------------------------------------------- */
/* Mobile (≤640px)                                                        */
/* ---------------------------------------------------------------------- */
@media (max-width: 640px) {
	/* Grille icône/titre + texte : neutralise le flex desktop et son
	   flex-basis (320px) qui réservait une hauteur vide même icône réduite. */
	.tfy-dep-services__item,
	.tfy-dep-services__item:nth-child(2) {
		display: grid;
		grid-template-columns: 44px 1fr;
		column-gap: 14px;
		row-gap: 0;
		align-items: start;
	}

	.tfy-dep-services__visual {
		grid-column: 1;
		grid-row: 1;
		flex: none;
		width: 44px;
		height: 44px;
		max-width: 44px;
		aspect-ratio: 1;
		margin: 0;
	}

	.tfy-dep-services__visual::before {
		display: none;
	}

	.tfy-dep-services__body {
		grid-column: 2;
		grid-row: 1;
	}

	/* Continuité visuelle : le fond distinctif du 3ᵉ bloc (séparation
	   éditoriale desktop) crée une rupture inutile une fois les 3 blocs
	   compacts sur mobile. */
	.tfy-dep-services__item:nth-child(3) {
		background: none;
	}

	/* Éléments affichés successivement (empilés), pleine largeur. */
	.tfy-dep-issues__grid {
		grid-template-columns: 1fr;
	}

	.tfy-dep-issues__item {
		border-right: none;
		border-top: 1px solid rgba(255, 255, 255, 0.1);
	}

	.tfy-dep-issues__item:first-child {
		border-top: none;
	}

	/* Découpes simplifiées sur mobile : fonds plats, pas d'obliques ni de
	   décrochés partiels (lisibilité avant tout sur petit écran). */
	.tfy-dep-issues::before {
		clip-path: none;
	}

	.tfy-dep-split__grid::before {
		display: none;
	}
}