/* ==========================================================================
   Tech For You — Page Création de sites internet à Dijon.
   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). Cette page vend une prestation de conception web : composition
   volontairement plus démonstrative et rythmée que Dépannage/Professionnels,
   avec de vraies captures d'écran (Gloria Massage, SOS Pocket) mises en scène
   dans des cadres "navigateur" sobres.
   1. Hero — deux cadres navigateur en chevauchement maîtrisé (pas de photo
      stock, pas de mockup gadget).
   2. Un site pensé pour votre activité — liste éditoriale asymétrique (pas
      3 cartes identiques).
   3. Réalisations — temps fort de la page : Gloria Massage / SOS Pocket,
      compositions miroir et proportions différentes, univers contrastés.
   4. Offre à 990 € — panneau de prix + liste, pas de grille Basic/Pro/Premium.
   5. Autonomie — section entièrement CSS/typographie (aucune fausse capture).
   6. Création / Refonte / Besoin particulier — progression à poids dégressif.
   7. Déroulement du projet — frise verticale alternée (pas 6 cartes).
   8. Contact final (composant commun).
   + Lightbox (captures Réalisations cliquables), voir juste avant les
     media queries grand écran.
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* 1. Hero                                                                 */
/* ---------------------------------------------------------------------- */
.tfy-cs-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(3.5rem, 6vw, 5rem);
	color: var(--tfy-white);
}

.tfy-cs-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: center;
	max-width: var(--tfy-content-wide, var(--tfy-content));
	margin-inline: auto;
}

.tfy-cs-hero__title {
	max-width: 28rem;
}

.tfy-cs-hero__lead {
	margin-top: 1.1rem;
	font-size: 1.02rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.75);
	max-width: 32rem;
}

.tfy-cs-hero__lead + .tfy-cs-hero__lead {
	margin-top: 0.85rem;
}

.tfy-cs-hero__price {
	margin-top: 1.5rem;
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.82);
}

.tfy-cs-hero__price strong {
	color: var(--tfy-blue-bright);
	font-size: 1.2rem;
}

.tfy-cs-hero__actions {
	margin-top: 1.85rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

/* ---- Composition visuelle : deux fenêtres "navigateur" en chevauchement ---- */
.tfy-cs-hero__visual {
	position: relative;
	justify-self: end;
	width: 100%;
	max-width: 30rem;
	aspect-ratio: 1 / 0.95;
}

.tfy-cs-hero__glow {
	position: absolute;
	inset: -18%;
	z-index: 0;
	background: radial-gradient(circle at 45% 40%, rgba(90, 162, 255, 0.22), transparent 65%);
	filter: blur(30px);
	pointer-events: none;
}

.tfy-cs-browser {
	border-radius: var(--tfy-radius-md);
	overflow: hidden;
	background: #e7e9ee;
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.45);
	transition: transform var(--tfy-duration) var(--tfy-ease), box-shadow var(--tfy-duration) var(--tfy-ease);
}

.tfy-cs-browser__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--tfy-white);
}

.tfy-cs-browser__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.tfy-cs-hero__visual .tfy-cs-browser--primary {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	width: 78%;
}

.tfy-cs-hero__visual .tfy-cs-browser--secondary {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	width: 54%;
}

.tfy-cs-hero__visual:hover .tfy-cs-browser--primary {
	transform: translateY(-4px);
}

.tfy-cs-hero__visual:hover .tfy-cs-browser--secondary {
	transform: translateY(-4px);
}

/* ---------------------------------------------------------------------- */
/* 2. Un site pensé pour votre activité — liste éditoriale asymétrique     */
/* ---------------------------------------------------------------------- */
.tfy-cs-approach {
	padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.tfy-cs-approach__head {
	max-width: var(--tfy-measure);
	margin-inline: auto;
	text-align: center;
}

.tfy-cs-approach__lead {
	margin-top: 1rem;
	font-size: 1rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.75);
}

.tfy-cs-approach__lead + .tfy-cs-approach__lead {
	margin-top: 0.75rem;
}

.tfy-cs-approach__list {
	/* Rangée à 3 colonnes divisées par un filet vertical (même principe que
	   .tfy-pro-setup__row sur la page Professionnels) : exploite la largeur
	   disponible au lieu d'empiler les 3 items dans une colonne étroite.
	   --tfy-content-wide n'existe qu'à partir de 1920px (repli automatique
	   sur --tfy-content en dessous, aucun changement de comportement). */
	margin-top: clamp(3rem, 5vw, 4rem);
	max-width: var(--tfy-content-wide, var(--tfy-content));
	margin-inline: auto;
	display: flex;
	align-items: flex-start;
	gap: clamp(2.5rem, 4vw, 4rem);
}

.tfy-cs-approach__item {
	/* Chiffre → pictogramme → titre → texte, empilés dans le flux normal
	   (plus d'élément en position absolute) : la hiérarchie est garantie
	   par l'ordre du document, pas par un calage pixel fragile — aucune
	   collision possible entre le chiffre et le pictogramme, à aucune
	   largeur d'écran. */
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 1 0;
	padding-left: clamp(1.5rem, 2.5vw, 2rem);
	border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.tfy-cs-approach__item:first-child {
	padding-left: 0;
	border-left: none;
}

.tfy-cs-approach__item--indent {
	/* Asymétrie conservée, mais en décalage vertical (plutôt qu'un margin-left
	   horizontal) puisque les items sont maintenant en rangée : procédé
	   distinct de celui de la section "Création / Refonte / Besoin particulier"
	   plus bas (poids dégressif par largeur + accent typographique). */
	margin-top: clamp(2rem, 4vw, 3rem);
}

.tfy-cs-approach__num {
	font-size: clamp(1.75rem, 2.2vw, 2.25rem);
	font-weight: 800;
	line-height: 1;
	color: rgba(255, 255, 255, 0.24);
	margin-bottom: 1rem;
}

.tfy-cs-approach__icon {
	flex: none;
	width: 40px;
	height: 40px;
	margin-bottom: 1.1rem;
	color: var(--tfy-blue-bright);
}

.tfy-cs-approach__item--indent .tfy-cs-approach__icon {
	color: var(--tfy-indigo-bright);
}

.tfy-cs-approach__icon svg {
	width: 100%;
	height: 100%;
}

.tfy-cs-approach__body h3 {
	font-size: 1.12rem;
	font-weight: 700;
	color: var(--tfy-white);
	margin-bottom: 0.5rem;
}

.tfy-cs-approach__body p {
	font-size: 0.94rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.72);
	/* Plafond de lecture : même si la colonne s'élargit (rangée à 3 sur
	   grand écran), le paragraphe ne s'étire jamais sur une largeur
	   inconfortable. */
	max-width: 22rem;
}

/* ---------------------------------------------------------------------- */
/* 3. Réalisations — temps fort de la page                                */
/* ---------------------------------------------------------------------- */
.tfy-cs-projects {
	/* Temps fort de la page : seule vraie rupture asymétrique du site (pas de
	   diagonale répétée ailleurs) + nuance de graphite légèrement différente
	   du reste de la page. Purement décoratif (::before/::after), aucune
	   incidence sur le flux du contenu. */
	position: relative;
	isolation: isolate;
	padding-block: clamp(4rem, 7vw, 6rem);
}

.tfy-cs-projects::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.05) 0%,
		rgba(255, 255, 255, 0.018) 55%,
		rgba(255, 255, 255, 0) 100%
	);
	pointer-events: none;
}

.tfy-cs-projects::after {
	/* Rupture asymétrique en entrée de section : coin sombre qui s'estompe en
	   diagonale de gauche à droite, sur le haut de la section uniquement. */
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: clamp(70px, 7vw, 130px);
	z-index: -1;
	background: linear-gradient(180deg, rgba(9, 10, 14, 0.5), transparent);
	clip-path: polygon(0 0, 100% 0, 100% 22%, 0 100%);
	pointer-events: none;
}

.tfy-cs-projects__head {
	max-width: var(--tfy-measure);
	margin-inline: auto;
	text-align: center;
	margin-bottom: clamp(3.5rem, 6vw, 5rem);
}

.tfy-cs-projects__intro {
	margin-top: 1rem;
	font-size: 1rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.75);
}

.tfy-cs-projects__list {
	display: flex;
	flex-direction: column;
	gap: clamp(5.5rem, 9vw, 7.5rem);
	max-width: var(--tfy-content-wide, var(--tfy-content));
	margin-inline: auto;
}

.tfy-cs-project {
	display: grid;
	align-items: center;
	gap: clamp(3rem, 5vw, 4.5rem);
}

.tfy-cs-project--gloria {
	grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.9fr);
}

.tfy-cs-project--sospocket {
	grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.35fr);
	margin-top: clamp(-1.5rem, -2vw, -0.5rem);
}

.tfy-cs-project--sospocket .tfy-cs-project__visual {
	order: 2;
}

.tfy-cs-project--sospocket .tfy-cs-project__content {
	order: 1;
}

.tfy-cs-project__visual {
	position: relative;
}

.tfy-cs-project__visual::before {
	content: "";
	position: absolute;
	inset: -14%;
	z-index: 0;
	background: radial-gradient(circle, rgba(90, 162, 255, 0.16), transparent 70%);
	filter: blur(32px);
	pointer-events: none;
}

.tfy-cs-project--sospocket .tfy-cs-project__visual::before {
	background: radial-gradient(circle, rgba(164, 139, 255, 0.18), transparent 70%);
}

.tfy-cs-project__visual-primary {
	position: relative;
	z-index: 1;
	width: 84%;
}

.tfy-cs-project__visual-secondary {
	position: absolute;
	z-index: 2;
	width: 48%;
	right: -5%;
	bottom: -9%;
	box-shadow: 0 34px 64px -20px rgba(0, 0, 0, 0.6), 0 12px 28px -12px rgba(0, 0, 0, 0.45);
}

.tfy-cs-project--sospocket .tfy-cs-project__visual-primary {
	margin-left: auto;
}

.tfy-cs-project--sospocket .tfy-cs-project__visual-secondary {
	right: auto;
	left: -5%;
}

.tfy-cs-project:hover .tfy-cs-project__visual-primary {
	transform: translateY(-4px);
}

.tfy-cs-project--sospocket:hover .tfy-cs-project__visual-primary {
	transform: translateY(-4px);
}

.tfy-cs-project__eyebrow {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tfy-blue-bright);
	margin-bottom: 0.6rem;
}

.tfy-cs-project--sospocket .tfy-cs-project__eyebrow {
	color: var(--tfy-indigo-bright);
}

.tfy-cs-project__content h3 {
	font-size: clamp(1.4rem, 2.2vw, 1.75rem);
	font-weight: 800;
	color: var(--tfy-white);
	margin-bottom: 0.85rem;
}

.tfy-cs-project__content p {
	font-size: 1rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.78);
	max-width: 30rem;
}

.tfy-cs-project__cta {
	margin-top: 1.1rem;
}

/* ---- Captures cliquables (lightbox) — voir section Lightbox plus bas ---- */
button.tfy-cs-browser__frame {
	display: block;
	width: 100%;
	border: 0;
	margin: 0;
	padding: 0;
	font: inherit;
	text-align: left;
	cursor: zoom-in;
}

button.tfy-cs-browser__frame img {
	transition: filter var(--tfy-duration) var(--tfy-ease);
}

button.tfy-cs-browser__frame:hover img,
button.tfy-cs-browser__frame:focus-visible img {
	filter: brightness(1.05);
}

button.tfy-cs-browser__frame:focus-visible {
	outline: 2px solid var(--tfy-blue-bright);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------- */
/* 4. Offre à 990 €                                                        */
/* ---------------------------------------------------------------------- */
.tfy-cs-offer {
	/* Ambiance légèrement différente du reste de la page (graphite très
	   légèrement bleuté + halo diffus + texture technologique presque
	   imperceptible) : cf. .tfy-cs-autonomy juste après, même traitement,
	   pas de bande/rectangle délimité (dégradés progressifs uniquement). */
	position: relative;
	padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.tfy-cs-offer::before,
.tfy-cs-autonomy::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		radial-gradient(circle at 50% 0%, rgba(90, 162, 255, 0.06), transparent 62%),
		linear-gradient(180deg, rgba(120, 140, 255, 0.03), rgba(120, 140, 255, 0.012) 55%, transparent 100%),
		radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.4px);
	background-size: auto, auto, 34px 34px;
	pointer-events: none;
}

.tfy-cs-offer__inner {
	display: grid;
	grid-template-columns: minmax(200px, 0.55fr) minmax(0, 1.45fr);
	gap: clamp(3rem, 5vw, 4.5rem);
	/* stretch (au lieu de start) : le panneau de prix épouse la hauteur du
	   contenu (liste + hébergement) pour former un seul ensemble visuel,
	   au lieu d'un petit encart isolé en haut d'une colonne vide. */
	align-items: stretch;
	max-width: var(--tfy-content-wide, var(--tfy-content));
	margin-inline: auto;
}

.tfy-cs-offer__price {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(2.25rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2rem);
	border-radius: var(--tfy-radius-md);
	background: linear-gradient(160deg, rgba(90, 162, 255, 0.12), rgba(255, 255, 255, 0.02));
	border: 1px solid rgba(255, 255, 255, 0.14);
	text-align: center;
}

.tfy-cs-offer__price-texture {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.7;
}

.tfy-cs-offer__price-value {
	position: relative;
	z-index: 1;
	display: block;
	font-size: clamp(2.75rem, 5vw, 3.75rem);
	font-weight: 800;
	line-height: 1;
	color: var(--tfy-blue-bright);
	text-shadow: 0 0 28px rgba(90, 162, 255, 0.35);
}

.tfy-cs-offer__price-note {
	position: relative;
	z-index: 1;
	display: block;
	margin-top: 0.6rem;
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.55);
}

.tfy-cs-offer__lead {
	margin-top: 1rem;
	font-size: 1rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.78);
	max-width: 38rem;
}

.tfy-cs-offer__list-title {
	margin-top: clamp(2rem, 3vw, 2.5rem);
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--tfy-blue-bright);
}

.tfy-cs-offer__list {
	margin-top: 1rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.65rem 2rem;
	list-style: none;
	padding: 0;
}

.tfy-cs-offer__list li {
	position: relative;
	padding-left: 1.6rem;
	font-size: 0.92rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.82);
}

.tfy-cs-offer__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 14px;
	height: 14px;
	border-radius: 4px;
	border: 2px solid var(--tfy-blue-bright);
}

.tfy-cs-offer__list li::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.48em;
	width: 7px;
	height: 4px;
	border-left: 2px solid var(--tfy-blue-bright);
	border-bottom: 2px solid var(--tfy-blue-bright);
	transform: rotate(-45deg);
}

.tfy-cs-offer__hosting {
	margin-top: clamp(2.25rem, 3.5vw, 2.75rem);
	padding-top: clamp(1.75rem, 3vw, 2.25rem);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	gap: 1.1rem;
}

.tfy-cs-offer__hosting-icon {
	flex: none;
	width: 40px;
	height: 40px;
	color: var(--tfy-indigo-bright);
}

.tfy-cs-offer__hosting-icon svg {
	width: 100%;
	height: 100%;
}

.tfy-cs-offer__hosting-title {
	font-weight: 700;
	color: var(--tfy-white);
	margin-bottom: 0.4rem;
}

.tfy-cs-offer__hosting p:not(.tfy-cs-offer__hosting-title) {
	font-size: 0.92rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.72);
	max-width: 32rem;
}

/* ---------------------------------------------------------------------- */
/* 5. Autonomie — CSS/typographie uniquement                              */
/* ---------------------------------------------------------------------- */
.tfy-cs-autonomy {
	position: relative;
	padding-block: clamp(3.5rem, 6vw, 5rem);
}

.tfy-cs-autonomy__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr);
	gap: clamp(3rem, 5vw, 4.5rem);
	align-items: center;
	max-width: var(--tfy-content-wide, var(--tfy-content));
	margin-inline: auto;
}

.tfy-cs-autonomy__content > p {
	margin-top: 1rem;
	font-size: 1rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.78);
	max-width: 34rem;
}

.tfy-cs-autonomy__content > p.tfy-cs-autonomy__quote {
	margin-top: clamp(2rem, 3vw, 2.5rem);
	padding-left: 1.25rem;
	border-left: 3px solid var(--tfy-blue-bright);
	font-size: clamp(1.15rem, 1.8vw, 1.35rem);
	font-weight: 700;
	line-height: 1.5;
	color: var(--tfy-white);
	max-width: 26rem;
}

.tfy-cs-autonomy__visual {
	position: relative;
	justify-self: center;
	width: 100%;
	max-width: 19rem;
}

.tfy-cs-autonomy__visual::before {
	content: "";
	position: absolute;
	inset: -16%;
	z-index: 0;
	background: radial-gradient(circle, rgba(90, 162, 255, 0.15), transparent 70%);
	filter: blur(28px);
	pointer-events: none;
}

.tfy-cs-autonomy__panel {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: clamp(1.5rem, 2.5vw, 2rem);
	border-radius: var(--tfy-radius-md);
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 26px 54px -18px rgba(0, 0, 0, 0.55);
}

.tfy-cs-autonomy__panel-row {
	height: 10px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.14);
}

.tfy-cs-autonomy__panel-row--title {
	width: 62%;
	height: 14px;
	background: linear-gradient(90deg, var(--tfy-blue-bright), var(--tfy-indigo-bright));
	opacity: 0.85;
}

.tfy-cs-autonomy__panel-row--short {
	width: 42%;
}

.tfy-cs-autonomy__panel-media {
	margin-block: 0.25rem;
	height: 84px;
	border-radius: 6px;
	background: linear-gradient(135deg, rgba(90, 162, 255, 0.16), rgba(164, 139, 255, 0.12));
	border: 1px dashed rgba(255, 255, 255, 0.18);
}

.tfy-cs-autonomy__panel-pin {
	position: absolute;
	z-index: 2;
	bottom: -14px;
	right: -14px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--tfy-blue), var(--tfy-indigo));
	color: var(--tfy-white);
	box-shadow: 0 14px 28px -10px rgba(0, 103, 255, 0.55);
}

.tfy-cs-autonomy__panel-pin svg {
	width: 20px;
	height: 20px;
}

/* ---------------------------------------------------------------------- */
/* 6. Création / Refonte / Besoin particulier                             */
/* ---------------------------------------------------------------------- */
.tfy-cs-paths {
	/* Retour progressif vers le fond sombre principal après la nuance bleutée
	   de l'offre/autonomie (dégradé qui s'estompe, pas de bande délimitée). */
	position: relative;
	padding-block: clamp(3.5rem, 6vw, 5rem);
}

.tfy-cs-paths::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(120, 140, 255, 0.018), transparent 65%);
	pointer-events: none;
}

.tfy-cs-paths__title {
	max-width: 34rem;
	margin-inline: auto;
	text-align: center;
	margin-bottom: clamp(2.75rem, 4.5vw, 3.5rem);
}

.tfy-cs-paths__list {
	display: flex;
	align-items: stretch;
	gap: clamp(1rem, 2vw, 1.5rem);
	/* --tfy-content-wide n'existe qu'à partir de 1920px (repli automatique
	   sur --tfy-content en dessous), même mécanisme que les autres sections. */
	max-width: var(--tfy-content-wide, var(--tfy-content));
	margin-inline: auto;
}

.tfy-cs-paths__item {
	/* Volontairement pas de fond/bordure/radius (pas de "carte") : l'accent
	   est un simple filet supérieur coloré + une échelle typographique
	   dégressive — procédé distinct de la section "Un site pensé pour votre
	   activité" plus haut (colonnes à filet vertical + pictogramme). */
	position: relative;
	padding-top: clamp(1.5rem, 2.5vw, 2rem);
	border-top: 2px solid rgba(90, 162, 255, 0.45);
}

.tfy-cs-paths__item--creation {
	flex: 1.15 1 0;
}

.tfy-cs-paths__item--refonte {
	flex: 1 1 0;
	border-top-color: rgba(164, 139, 255, 0.5);
}

.tfy-cs-paths__item--custom {
	flex: 0.9 1 0;
	border-top-color: rgba(164, 139, 255, 0.3);
	opacity: 0.92;
}

.tfy-cs-paths__marker {
	display: inline-flex;
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	color: var(--tfy-blue-bright);
	margin-bottom: 0.75rem;
}

.tfy-cs-paths__item--refonte .tfy-cs-paths__marker,
.tfy-cs-paths__item--custom .tfy-cs-paths__marker {
	color: var(--tfy-indigo-bright);
}

.tfy-cs-paths__item h3 {
	font-weight: 700;
	color: var(--tfy-white);
	margin-bottom: 0.6rem;
}

/* Échelle typographique dégressive du titre : le poids visuel (déjà porté
   par la largeur flex 1.15/1/0.9) est renforcé par la taille du texte,
   pas seulement par la taille de la boîte. */
.tfy-cs-paths__item--creation h3 {
	font-size: clamp(1.25rem, 1.6vw, 1.45rem);
}

.tfy-cs-paths__item--refonte h3 {
	font-size: 1.12rem;
}

.tfy-cs-paths__item--custom h3 {
	font-size: 1.02rem;
}

.tfy-cs-paths__item p {
	font-size: 0.92rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.72);
}

.tfy-cs-paths__connector {
	flex: none;
	align-self: center;
	width: clamp(1.5rem, 3vw, 2.5rem);
	height: 1px;
	position: relative;
	background: linear-gradient(to right, rgba(255, 255, 255, 0.25), rgba(90, 162, 255, 0.55));
}

.tfy-cs-paths__connector::after {
	content: "";
	position: absolute;
	right: -3px;
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tfy-blue-bright);
}

.tfy-cs-paths__note {
	margin-top: clamp(2rem, 3vw, 2.5rem);
	text-align: center;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.55);
}

/* ---------------------------------------------------------------------- */
/* 7. Déroulement du projet — frise verticale alternée                    */
/* ---------------------------------------------------------------------- */
.tfy-cs-process {
	position: relative;
	isolation: isolate;
	padding-block: clamp(4rem, 7vw, 6rem);
}

.tfy-cs-process::after {
	/* Ambiance abstraite et diffuse uniquement : pas de motif/symbole. Un
	   grand halo radial bleu nuit très diffus derrière la partie centrale
	   (accompagne visuellement l'axe 01→06), un second halo plus faible et
	   décentré, une très légère variation de graphite, et un fondu doux en
	   entrée/sortie de section. Pas de diagonale/rupture ici (contrairement
	   aux Réalisations, volontairement non répétée). */
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(ellipse 55% 75% at 50% 45%, rgba(24, 40, 74, 0.5), transparent 68%),
		radial-gradient(ellipse 38% 55% at 82% 70%, rgba(90, 162, 255, 0.035), transparent 72%),
		linear-gradient(180deg, transparent, rgba(120, 140, 255, 0.025) 45%, transparent 100%);
	pointer-events: none;
}

.tfy-cs-process__head {
	max-width: var(--tfy-measure);
	margin-inline: auto;
	text-align: center;
	margin-bottom: clamp(3.5rem, 6vw, 5rem);
}

.tfy-cs-process__intro {
	margin-top: 1rem;
	font-size: 1rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.75);
}

.tfy-cs-process__timeline {
	position: relative;
	list-style: none;
	margin: 0 auto;
	padding: 0;
	/* L'axe devient un vrai élément graphique sur grand écran : le parcours
	   s'élargit avec --tfy-content-wide (repli automatique sur
	   --tfy-content en dessous de 1920px), l'amplitude gauche/droite des
	   étapes suit. Chaque paragraphe reste plafonné ci-dessous pour ne
	   jamais s'étirer sur une largeur inconfortable. */
	max-width: var(--tfy-content-wide, var(--tfy-content));
	display: flex;
	flex-direction: column;
	gap: clamp(2.5rem, 4vw, 3.5rem);
}

.tfy-cs-process__timeline::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	transform: translateX(-50%);
	z-index: 0;
	/* Légèrement plus perceptible qu'avant (nuance bleutée au centre) sans
	   devenir une ligne pleine : l'axe appartient au même système graphique
	   que le halo/décor de fond. */
	background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.2) 8%, rgba(120, 172, 255, 0.3) 50%, rgba(255, 255, 255, 0.2) 92%, transparent);
}

.tfy-cs-process__step {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	/* start (et non center) : le haut du numéro s'aligne avec le haut du
	   titre pour CHAQUE étape, quelle que soit la longueur du texte — avec
	   un centrage vertical, une étape à texte court se retrouve avec son
	   titre bien plus bas que le numéro, ce qui donnait l'impression de
	   désalignement signalée sur écran 32". */
	align-items: start;
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.tfy-cs-process__num {
	grid-column: 2;
	grid-row: 1;
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--tfy-graphite-900);
	border: 1px solid rgba(255, 255, 255, 0.18);
	font-weight: 800;
	font-size: 1rem;
	color: var(--tfy-blue-bright);
	/* Halo extrêmement discret : le nœud reste un simple rond fin, jamais un
	   bouton lumineux. */
	box-shadow: 0 0 14px 1px rgba(90, 162, 255, 0.12);
}

.tfy-cs-process__body {
	grid-column: 1;
	/* grid-row explicite : sans ça, l'auto-placement CSS Grid fait "reculer"
	   cet élément (colonne 1) après le numéro placé en colonne 2 dans l'ordre
	   du DOM, et le pousse silencieusement sur une 2e ligne implicite pour
	   les étapes impaires (01/03/05) — c'était la vraie cause du
	   désalignement titre/numéro signalé sur écran 32", pas un problème
	   d'align-items. Les étapes paires (colonne 3, après le curseur) n'étaient
	   jamais affectées, d'où l'irrégularité observée une étape sur deux. */
	grid-row: 1;
	text-align: right;
	/* Plafond de lecture + calage au bord intérieur (côté axe) de sa
	   colonne : quand le parcours s'élargit (≥1920px), le texte ne s'étire
	   pas sur toute la largeur de la colonne, il reste ancré près de l'axe. */
	max-width: 26rem;
	margin-left: auto;
}

.tfy-cs-process__step:nth-child(even) .tfy-cs-process__body {
	grid-column: 3;
	text-align: left;
	margin-left: 0;
	margin-right: auto;
}

.tfy-cs-process__body h3 {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--tfy-white);
	margin-bottom: 0.5rem;
}

.tfy-cs-process__body p {
	font-size: 0.92rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.72);
}

/* ---------------------------------------------------------------------- */
/* Lightbox — agrandissement des captures Gloria Massage / SOS Pocket     */
/* (markup + logique JS dans techforyou-home.js, chargé sur toutes les    */
/* pages mais sans effet ailleurs : les sélecteurs data-tfy-lightbox-*    */
/* n'existent que sur cette page).                                       */
/* ---------------------------------------------------------------------- */
.tfy-lightbox {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1.5rem, 4vw, 3rem);
	background: rgba(6, 7, 10, 0.86);
	opacity: 0;
	transition: opacity 0.2s var(--tfy-ease);
}

.tfy-lightbox[hidden] {
	display: none;
}

.tfy-lightbox.is-open {
	opacity: 1;
}

.tfy-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	display: block;
	border-radius: var(--tfy-radius-md);
	box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.65);
	transform: scale(0.97);
	transition: transform 0.2s var(--tfy-ease);
}

.tfy-lightbox.is-open .tfy-lightbox__img {
	transform: scale(1);
}

.tfy-lightbox__close {
	position: absolute;
	top: clamp(1rem, 3vw, 1.75rem);
	right: clamp(1rem, 3vw, 1.75rem);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.06);
	color: var(--tfy-white);
	cursor: pointer;
	transition: background var(--tfy-duration) var(--tfy-ease), border-color var(--tfy-duration) var(--tfy-ease);
}

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

.tfy-lightbox__close:hover,
.tfy-lightbox__close:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.4);
	outline: none;
}

body.tfy-scroll-lock {
	overflow: hidden;
}

/* ---------------------------------------------------------------------- */
/* Grand écran (≥1920px)                                                  */
/* ---------------------------------------------------------------------- */
@media (min-width: 1920px) {
	/* Amplitude horizontale commune à cette page pour ≥1920px : +16 % par
	   rapport à --tfy-content-wide (repli automatique en dessous de 1920px,
	   comme --tfy-content-wide lui-même). Variable propre à cette page (ce
	   fichier ne charge que sur Création de sites) : ne modifie ni le token
	   partagé ni aucune autre page. */
	:root {
		--tfy-cs-wide: calc(var(--tfy-content-wide) * 1.16);
	}

	/* Hero : les captures restent nettement secondaires par rapport au H1,
	   simple ajustement de présence (pas de redesign). */
	.tfy-cs-hero__grid {
		grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
	}

	.tfy-cs-hero__visual {
		max-width: 36rem;
	}

	/* Un site pensé pour votre activité : la rangée à 3 colonnes gagne en
	   amplitude, icônes/chiffre et paragraphe légèrement agrandis pour
	   occuper davantage l'espace sans casser leur alignement. */
	.tfy-cs-approach__list {
		max-width: var(--tfy-cs-wide);
		gap: clamp(3.5rem, 4.5vw, 5.5rem);
	}

	.tfy-cs-approach__icon {
		width: 46px;
		height: 46px;
	}

	.tfy-cs-approach__num {
		font-size: 2.4rem;
	}

	.tfy-cs-approach__body p {
		max-width: 25rem;
	}

	/* Réalisations : les captures sont le contenu principal de cette section
	   (temps fort de la page) — elles gagnent un peu plus de part relative
	   dans la grille sans devenir deux cartes identiques (alternance/miroir
	   déjà en place conservée). */
	.tfy-cs-projects__list {
		max-width: var(--tfy-cs-wide);
	}

	.tfy-cs-project--gloria {
		grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
	}

	.tfy-cs-project--sospocket {
		grid-template-columns: minmax(280px, 1fr) minmax(0, 1.7fr);
	}

	/* Offre 990 € : bloc commercial important — le prix gagne en présence,
	   le panneau et le contenu restent un seul ensemble visuel (align-items
	   stretch déjà appliqué en base). */
	.tfy-cs-offer__inner {
		max-width: var(--tfy-cs-wide);
		grid-template-columns: minmax(240px, 0.62fr) minmax(0, 1.38fr);
	}

	.tfy-cs-offer__price-value {
		font-size: clamp(3.5rem, 4vw, 4.5rem);
	}

	/* Autonomie : plus d'air entre le texte et le visuel, et le visuel gagne
	   en présence (le texte garde sa largeur de lecture, max-width déjà
	   plafonné sur les paragraphes, non touché ici). */
	.tfy-cs-autonomy__grid {
		max-width: var(--tfy-cs-wide);
		grid-template-columns: minmax(0, 1fr) minmax(260px, 1fr);
		gap: clamp(4.5rem, 6vw, 6.5rem);
	}

	.tfy-cs-autonomy__visual {
		max-width: 27rem;
	}

	/* Création / Refonte / Besoin particulier : les 3 entrées gagnent en
	   amplitude, sans redevenir des cartes. */
	.tfy-cs-paths__list {
		max-width: var(--tfy-cs-wide);
		gap: clamp(2rem, 3vw, 3rem);
	}

	/* Déroulement du projet : l'axe devient un vrai élément graphique — plus
	   d'amplitude entre les étapes, pastilles légèrement agrandies pour
	   rester lisibles sur ce plus grand parcours. */
	.tfy-cs-process__timeline {
		max-width: var(--tfy-cs-wide);
	}

	.tfy-cs-process__body {
		max-width: 29rem;
	}

	.tfy-cs-process__num {
		width: 60px;
		height: 60px;
		font-size: 1.1rem;
	}

	/* L'ambiance abstraite peut exploiter davantage l'espace horizontal sans
	   chercher à remplir le vide (qui fait partie de la composition). */
	.tfy-cs-process::after {
		background:
			radial-gradient(ellipse 50% 70% at 50% 45%, rgba(24, 40, 74, 0.58), transparent 70%),
			radial-gradient(ellipse 34% 50% at 84% 68%, rgba(90, 162, 255, 0.045), transparent 74%),
			linear-gradient(180deg, transparent, rgba(120, 140, 255, 0.03) 45%, transparent 100%);
	}
}

/* ---------------------------------------------------------------------- */
/* Tablette (≤1024px)                                                     */
/* ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
	/* Rupture asymétrique désactivée : géométrie pensée pour le grand écran,
	   simplifiée en dessous (nuance de fond ::before conservée). */
	.tfy-cs-projects::after {
		display: none;
	}

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

	.tfy-cs-hero__visual {
		order: -1;
		justify-self: center;
		max-width: 22rem;
		margin-bottom: 1rem;
	}

	.tfy-cs-approach__list {
		flex-direction: column;
		gap: clamp(2.25rem, 4vw, 3rem);
	}

	.tfy-cs-approach__item {
		padding-left: 0;
		border-left: none;
		padding-top: clamp(1.75rem, 3vw, 2.25rem);
		border-top: 1px solid rgba(255, 255, 255, 0.1);
	}

	.tfy-cs-approach__item:first-child {
		padding-top: 0;
		border-top: none;
	}

	.tfy-cs-approach__item--indent {
		margin-top: 0;
	}

	.tfy-cs-project,
	.tfy-cs-project--gloria,
	.tfy-cs-project--sospocket {
		grid-template-columns: 1fr;
		margin-top: 0;
	}

	.tfy-cs-project__content,
	.tfy-cs-project--sospocket .tfy-cs-project__content {
		order: 1;
	}

	.tfy-cs-project__visual,
	.tfy-cs-project--sospocket .tfy-cs-project__visual {
		order: 2;
		max-width: 28rem;
		margin-inline: auto;
	}

	.tfy-cs-project--sospocket .tfy-cs-project__visual-primary {
		margin-left: 0;
	}

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

	.tfy-cs-offer__price {
		max-width: 18rem;
		margin-inline: auto;
	}

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

	.tfy-cs-autonomy__visual {
		order: -1;
		max-width: 16rem;
		margin-bottom: 0.5rem;
	}

	.tfy-cs-paths__list {
		flex-direction: column;
	}

	.tfy-cs-paths__item {
		flex: none;
		width: 100%;
	}

	.tfy-cs-paths__connector {
		width: 1px;
		height: 1.75rem;
		align-self: center;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0.25), rgba(90, 162, 255, 0.55));
	}

	.tfy-cs-paths__connector::after {
		right: 50%;
		top: auto;
		bottom: -3px;
		transform: translateX(50%);
	}

	.tfy-cs-process__timeline::before {
		left: 26px;
	}

	.tfy-cs-process__step {
		grid-template-columns: 52px 1fr;
		gap: 1.25rem;
	}

	.tfy-cs-process__num {
		grid-column: 1;
		width: 44px;
		height: 44px;
	}

	.tfy-cs-process__body,
	.tfy-cs-process__step:nth-child(even) .tfy-cs-process__body {
		grid-column: 2;
		text-align: left;
		margin-left: 0;
		margin-right: 0;
	}
}

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

	.tfy-cs-hero__visual {
		max-width: 17rem;
	}

	.tfy-cs-hero__visual .tfy-cs-browser--primary {
		width: 82%;
	}

	.tfy-cs-hero__visual .tfy-cs-browser--secondary {
		width: 58%;
	}

	.tfy-cs-project__visual-secondary {
		width: 56%;
		right: -3%;
		bottom: -7%;
	}

	.tfy-cs-project--sospocket .tfy-cs-project__visual-secondary {
		left: -3%;
	}

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

	.tfy-cs-offer__hosting {
		flex-direction: column;
	}
}