/* Layout — psy-child. Hero, 2-cols, sticky mobile CTA. */

/* Hero fiche */

.psy-fiche__hero {
	display: flex;
	gap: 34px;
	align-items: center;
	padding: 26px 0 8px;
}
.psy-fiche__portrait {
	width: 148px;
	height: 172px;
	flex: none;
	border-radius: 18px;
	background: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-bg);
	font-family: var(--font-display);
	font-size: 46px;
	font-weight: 500;
	border: 5px solid var(--color-surface-2);
	overflow: hidden;
}
.psy-fiche__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.psy-fiche__body { min-width: 0; }
.psy-fiche__title {
	font-size: 40px;
	letter-spacing: -0.02em;
	margin-top: 8px;
}
.psy-fiche__role {
	font-size: 19px;
	color: var(--color-primary);
	font-family: var(--font-display);
	font-style: italic;
	margin-top: 4px;
}
.psy-fiche__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin-top: 16px;
	color: var(--color-ink-soft);
	font-size: 15px;
}
.psy-fiche__meta span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.psy-fiche__meta svg {
	width: 16px;
	height: 16px;
	color: var(--color-accent-soft);
}
.psy-fiche__hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 22px;
}

/* Layout 2 colonnes (fiche) */

.psy-fiche__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 30px;
	padding: 40px 0 8px;
	align-items: start;
}

/* Fiche inactive (psy validé sans abonnement actif) : pas de bloc contact
   commercial → la colonne aside est très courte, ce qui laissait un grand
   vide visuel. On passe en single column centrée pour redéployer le
   contenu sur toute la largeur de lecture. Les blocs aside (spécialités,
   publics, message "indisponible") passent dessous, ordre naturel. */
.psy-fiche__layout--inactive {
	grid-template-columns: minmax(0, 1fr);
	max-width: 760px;
	margin: 0 auto;
}

@media (max-width: 860px) {
	.psy-fiche__layout { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
	.psy-fiche__hero { flex-direction: column; align-items: flex-start; gap: 20px; }
	.psy-fiche__title { font-size: 32px; }
	.psy-fiche__portrait { width: 120px; height: 138px; font-size: 38px; }
}

/* Sticky mobile CTA — uniquement < 860px, position fixée bas écran. */

.psy-mobilecta { display: none; }

@media (max-width: 860px) {
	body { padding-bottom: 78px; }
	.psy-mobilecta {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 12px 16px;
		background: var(--color-surface);
		border-top: 1px solid var(--color-line);
		z-index: 20;
	}
	.psy-mobilecta .btn { width: 100%; }
}