/*
 * Talents Chrétiens — WordPress adjustments for the public business page.
 * The mockup always has a logo, a rating and a full set of links; these rules cover the real
 * cases where a professional has not supplied everything.
 */

/* Real logos fill the circles the mockup drew with a letter. */
.hero-logo img, .cc-logo img, .sim-logo img {
	width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit;
}
.sim-logo .sim-initial {
	display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
	font-weight: 700; color: var(--gold-dk, #A8893C);
}
/* "Professionnels similaires" rows are links now. */
a.sim-item { text-decoration: none; color: inherit; display: flex; }

/* Reviews, rendered from real data. */
.review-item { padding: 14px 0; border-top: 1px solid var(--surface, #E8EDF2); }
.review-item:first-child { border-top: 0; }
.review-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.review-author { font-weight: 600; font-size: 14px; color: var(--navy, #0B132B); }
.review-stars { color: var(--gold, #C6A756); font-size: 13px; }
.review-date { font-size: 12px; color: var(--soft, #3D4F63); }
.review-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--txt, #0F1A2E); }

/* Form feedback inside the contact modals. */
.tc-modal-input.is-invalid, .tc-modal-textarea.is-invalid, .tc-modal-select.is-invalid {
	border-color: #C53030;
}
.tc-modal-error { color: #C53030; font-size: 12.5px; font-weight: 600; margin-top: 5px; }
.tc-modal-error[hidden] { display: none; }

/*
 * The sticky mobile bar is hidden by tc-fiche.css outside @media(max-width:900px) and
 * revealed inside it by the `is-active` class the script toggles. An unscoped
 * `display:none` used to live here and, loading after tc-fiche.css, it beat the media
 * query's `display:block` — which is why the mobile internal navigation never appeared.
 */

/*
 * The design's page grid is "1fr 300px". A "1fr" track still has a minimum size of its
 * content, so one wide child (a long business name, a phone number that cannot wrap) pushes
 * the whole grid past its container and the sidebar ends up off-screen. minmax(0, 1fr) lets
 * the column shrink as intended; the layout is otherwise unchanged.
 */
@media (min-width: 901px) {
	.tc-page-fiche .page { grid-template-columns: minmax(0, 1fr) 300px; }
}
.tc-page-fiche .page > * { min-width: 0; }

/* Star picker in the review form. */
.tc-rating-input { display: flex; gap: 4px; }
.tc-rating-star { position: relative; cursor: pointer; font-size: 26px; line-height: 1; color: #D9DEE5; }
.tc-rating-star input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tc-rating-star:hover span[aria-hidden], .tc-rating-star:has(input:checked) span[aria-hidden] { color: var(--gold, #C6A756); }
.tc-rating-input:hover .tc-rating-star span[aria-hidden] { color: var(--gold, #C6A756); }
.tc-rating-input .tc-rating-star:hover ~ .tc-rating-star span[aria-hidden] { color: #D9DEE5; }
.tc-rating-star input:focus-visible + span { outline: 2px solid var(--gold, #C6A756); outline-offset: 2px; }
.reviews-empty { margin: 0 0 16px; font-size: 14.5px; color: var(--soft, #3D4F63); }

/* Why a review is not possible, shown where the button would be. */
.reviews-note { margin: 4px 0 0; font-size: 13.5px; color: var(--soft, #3D4F63); font-style: italic; }
a.btn-avis { display: inline-block; text-decoration: none; }

/*
 * Desktop alignment.
 *
 * The page content sits in a centred 1120px column, while the hero text and the action bar are
 * full-bleed and pinned 32px from the window edge. On a wide screen the two therefore start at
 * very different places — the content looks pushed into the middle of the page while the hero
 * hugs the left edge. These rules give the hero and the action bar the same gutter as the
 * content column, so everything lines up on one vertical axis. Below 1120px nothing changes:
 * max() falls back to the design's original 32px.
 */
@media (min-width: 901px) {
	:root { --tc-fiche-gutter: max(32px, calc((100% - 1120px) / 2 + 32px)); }

	.tc-page-fiche .hero-body {
		left: var(--tc-fiche-gutter);
		right: var(--tc-fiche-gutter);
	}
	.tc-page-fiche .hero-logo {
		right: var(--tc-fiche-gutter);
	}
	.tc-page-fiche .abar {
		padding-left: var(--tc-fiche-gutter);
		padding-right: var(--tc-fiche-gutter);
	}
	.tc-page-fiche .mobile-profile-sticky .mps-summary,
	.tc-page-fiche .mobile-profile-sticky .mps-nav {
		padding-left: var(--tc-fiche-gutter);
		padding-right: var(--tc-fiche-gutter);
	}
}

/* ---------------------------------------------------------------------------
 * "Appeler maintenant" now dials instead of being a dead button, so the two
 * call-to-action buttons are anchors. Their design rules set the colour but
 * not the underline a browser adds to a link, hence these two lines.
 * ------------------------------------------------------------------------- */
.tc-page-fiche .abar-cta,
.tc-page-fiche .cc-phone-cta { text-decoration: none; }
.tc-page-fiche .abar-cta:hover,
.tc-page-fiche .cc-phone-cta:hover { color: #fff; text-decoration: none; }

/* ---------------------------------------------------------------------------
 * The manager card sits between "Moyens de paiement" and "Retours clients" but the
 * design gives it a top margin only, so the reviews section started flush against it
 * — no gap at all, on desktop as well as on mobile. It now has the same space below
 * as above: 28px in the desktop rhythm, 22px in the tighter mobile one.
 * ------------------------------------------------------------------------- */
.tc-page-fiche .dirigeant-block { margin-bottom: 28px; }
@media (max-width: 900px) {
	.tc-page-fiche .dirigeant-block { margin-bottom: 22px; }
}

/* ---------------------------------------------------------------------------
 * "Enregistrer" and "Partager" in the action bar.
 *
 * The design has no saved state for these two buttons, so on desktop a save
 * succeeded without anything on screen changing. The saved state is now the gold
 * of the brand, and every action confirms itself with a short message.
 * ------------------------------------------------------------------------- */
.tc-page-fiche .abar-ico.is-active {
	background: var(--gold-lt, #F4EEDF);
	border-color: var(--gold, #C6A756);
	color: var(--gold-dk, #A8893C);
}
.tc-page-fiche .abar-ico.is-active svg { fill: currentColor; }

.tc-toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	z-index: 2000;
	transform: translate(-50%, 12px);
	max-width: min(92vw, 420px);
	padding: 11px 18px;
	border-radius: 10px;
	background: var(--navy, #0B132B);
	color: #fff;
	font-size: 13.5px;
	line-height: 1.45;
	text-align: center;
	box-shadow: 0 8px 28px rgba(11, 19, 43, .28);
	opacity: 0;
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease;
}
.tc-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
	.tc-toast { transition: none; }
}

/* ---------------------------------------------------------------------------
 * Location.
 *
 * The design shipped a grey placeholder where the map goes and a "Voir sur Google
 * Maps" line that was a plain <div>, so nothing was shown and nothing was clickable.
 * There is now a real map — OpenStreetMap, which needs no key and sets no advertising
 * cookie — and the link opens the address in the visitor's own map application.
 * On a phone the sidebar is hidden, so the location has its own card in the flow.
 * ------------------------------------------------------------------------- */
.tc-page-fiche .map-frame {
	display: block;
	width: 100%;
	height: 150px;
	border: 0;
	background: var(--bg, #F7F8FA);
}
.tc-page-fiche a.map-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-decoration: none;
}

/* A day the business does not open reads as closed rather than as an empty line. */
.tc-page-fiche .h-time.is-closed { color: #C53030; font-weight: 600; }
.tc-page-fiche .open-pill.is-closed { color: #C53030; }
.tc-page-fiche .open-pill.is-closed .open-dot { background: #C53030; }

@media (max-width: 900px) {
	.tc-page-fiche .mobile-map-card {
		background: #fff;
		border: 1px solid rgba(0, 0, 0, .07);
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 1px 8px rgba(11, 19, 43, .04);
	}
	.tc-page-fiche .mobile-map-card .map-frame { height: 170px; }
	.tc-page-fiche .mobile-map-body { padding: 13px 16px 4px; }
	.tc-page-fiche .mobile-map-label {
		font-size: 10px;
		font-weight: 600;
		letter-spacing: .8px;
		text-transform: uppercase;
		color: var(--soft, #3D4F63);
		margin-bottom: 4px;
	}
	.tc-page-fiche .mobile-map-addr {
		font-size: 14px;
		line-height: 1.5;
		color: var(--navy, #0B132B);
	}
	.tc-page-fiche .mobile-map-card a.map-link {
		margin: 10px 0 0;
		padding: 13px;
		border-top: 1px solid rgba(0, 0, 0, .06);
		font-size: 13px;
		font-weight: 600;
		color: var(--navy-60, #3A506B);
	}
}

/* ---------------------------------------------------------------------------
 * Avis : deux sources distinctes, jamais fusionnées.
 * Les avis Talents Chrétiens d'un côté, la note Google de l'autre, chacune
 * avec son propre total. Le bloc Google n'apparaît que si le professionnel a
 * relié sa fiche Google.
 * ------------------------------------------------------------------------- */
.tc-reviews-sources {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin: 0 0 22px;
}
.tc-rsource {
	border: 1px solid var(--border, #E8EDF2);
	border-radius: 12px;
	padding: 16px 18px;
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.tc-rsource-google { background: rgba(247, 248, 250, .7); }
.tc-rsource-head {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--soft, #3D4F63);
	margin-bottom: 5px;
}
.tc-rsource-score {
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	color: var(--navy, #0B132B);
}
.tc-rsource-score span {
	font-size: 14px;
	font-weight: 600;
	color: var(--soft, #3D4F63);
}
.tc-rsource-count { font-size: 13px; color: var(--soft, #3D4F63); }
.tc-rsource-empty { font-size: 13px; color: var(--soft, #3D4F63); }
.tc-rsource-link {
	margin-top: auto;
	padding-top: 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--navy-60, #3A506B);
	text-decoration: none;
}
.tc-rsource-link:hover { color: var(--gold-dk, #A8893C); }

@media (max-width: 680px) {
	.tc-reviews-sources { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
 * « Notre activité en images »
 *
 * Bureau : une grande photo et deux secondaires. Mobile : une grande pleine
 * largeur, deux vignettes en dessous. La mise en page s'adapte de 1 à 6 photos
 * sans laisser d'emplacement vide. Vignettes recadrées ; dans la visionneuse la
 * photo est montrée entière.
 * ------------------------------------------------------------------------- */
.tc-gal {
	display: grid;
	gap: 10px;
	grid-template-columns: 2fr 1fr;
	grid-template-rows: 1fr 1fr;
}
.tc-gal-item {
	position: relative;
	padding: 0;
	border: 0;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	background: var(--bg, #F7F8FA);
	display: block;
	min-height: 0;
}
.tc-gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-gal-item:focus-visible { outline: 3px solid var(--gold, #C6A756); outline-offset: 2px; }
.tc-gal-item.is-extra { display: none; }

/* La première photo occupe la colonne de gauche sur les deux rangées. */
.tc-gal > .tc-gal-item:first-child { grid-row: span 2; min-height: 340px; }

/* Une seule photo : elle prend toute la largeur. */
.tc-gal-1 { grid-template-columns: 1fr; grid-template-rows: auto; }
.tc-gal-1 > .tc-gal-item:first-child { grid-row: auto; min-height: 300px; }
/* Deux photos : côte à côte, même hauteur. */
.tc-gal-2 { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
.tc-gal-2 > .tc-gal-item:first-child { grid-row: auto; min-height: 260px; }
.tc-gal-2 > .tc-gal-item { min-height: 260px; }

.tc-gal-more {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	background: rgba(11, 19, 43, .55);
	color: #fff; font-size: 22px; font-weight: 700;
}
.tc-gal-all {
	margin-top: 12px;
	padding: 10px 18px;
	border: 1px solid rgba(11, 19, 43, .14);
	border-radius: 9px;
	background: #fff;
	font-family: inherit; font-size: 13px; font-weight: 600;
	color: var(--navy, #0B132B);
	cursor: pointer;
}
.tc-gal-all:hover { border-color: var(--gold, #C6A756); color: var(--gold-dk, #A8893C); }

@media (max-width: 760px) {
	.tc-gal { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
	.tc-gal > .tc-gal-item:first-child { grid-column: span 2; grid-row: auto; min-height: 210px; }
	.tc-gal-item { min-height: 110px; }
	.tc-gal-1 > .tc-gal-item:first-child { min-height: 210px; }
}

/* ── La visionneuse ── */
.tc-lb { position: fixed; inset: 0; z-index: 3000; }
.tc-lb[hidden] { display: none; }
.tc-lb-backdrop { position: absolute; inset: 0; background: rgba(11, 19, 43, .92); }
.tc-lb-inner {
	position: relative; height: 100%;
	display: flex; align-items: center; justify-content: center;
	padding: 56px 64px;
}
.tc-lb-figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; }
/* La photo entière, jamais recadrée. */
.tc-lb-figure img { max-width: 100%; max-height: 82vh; width: auto; height: auto; object-fit: contain; display: block; border-radius: 8px; }
.tc-lb-close, .tc-lb-prev, .tc-lb-next {
	position: absolute; z-index: 2;
	border: 0; background: rgba(255, 255, 255, .12); color: #fff;
	cursor: pointer; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	transition: background .18s;
}
.tc-lb-close:hover, .tc-lb-prev:hover, .tc-lb-next:hover { background: rgba(255, 255, 255, .26); }
.tc-lb-close:focus-visible, .tc-lb-prev:focus-visible, .tc-lb-next:focus-visible {
	outline: 3px solid var(--gold, #C6A756); outline-offset: 2px;
}
.tc-lb-close { top: 16px; right: 16px; width: 42px; height: 42px; font-size: 26px; line-height: 1; }
.tc-lb-prev, .tc-lb-next { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; font-size: 30px; line-height: 1; }
.tc-lb-prev { left: 12px; }
.tc-lb-next { right: 12px; }
.tc-lb-prev[hidden], .tc-lb-next[hidden] { display: none; }
.tc-lb-count {
	position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
	color: rgba(255, 255, 255, .85); font-size: 13px; font-weight: 600;
}
@media (max-width: 600px) {
	.tc-lb-inner { padding: 56px 12px 56px; }
	.tc-lb-prev { left: 6px; }
	.tc-lb-next { right: 6px; }
	.tc-lb-figure img { max-height: 72vh; }
}

/* ---------------------------------------------------------------------------
 * Navigation interne de la fiche (bureau). Sur mobile elle existe déjà dans
 * l'en-tête collant ; ici c'est la même liste, sous la barre d'actions.
 * ------------------------------------------------------------------------- */
.tc-profile-nav {
	display: none;
	position: sticky;
	top: 198px;
	z-index: 250;
	background: #fff;
	border-bottom: 1px solid var(--border, #E8EDF2);
}
.tc-profile-nav-inner {
	display: flex;
	gap: 4px;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 40px;
}
.tc-profile-nav a {
	padding: 13px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--soft, #3D4F63);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.tc-profile-nav a:hover { color: var(--navy, #0B132B); }
.tc-profile-nav a.is-active {
	color: var(--gold-dk, #A8893C);
	border-bottom-color: var(--gold, #C6A756);
}
.tc-profile-nav a:focus-visible { outline: 2px solid var(--gold, #C6A756); outline-offset: -2px; }

@media (min-width: 901px) {
	.tc-profile-nav { display: block; }
}

/* Zone d'intervention — same tag family as the payment methods, with the type as a
   discreet suffix so "Nord (59)" reads as a department rather than as a town. */
.area-tags-public .payment-tag{display:inline-flex;align-items:baseline;gap:6px}
.area-tags-public .payment-tag small{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;opacity:.62}

/* The telephone is revealed on request, so the button must read as a button until then. */
button.abar-cta,button.cc-phone-cta,button.mobile-call-main{font-family:inherit;cursor:pointer;border:0}
button.mobile-call-main{width:100%;text-align:left}
.cc-phone-num[hidden]{display:none}

/* ─────────────────────────────────────────────────────────────────────────────
 * Avis clients — the two sources read as two distinct cards (client, 03/10/2026):
 * each carries its own score, stars and count, and the Talents Chrétiens card also
 * carries the star distribution once there are reviews to distribute.
 * ──────────────────────────────────────────────────────────────────────────── */
.tc-reviews-sources.is-single { grid-template-columns: 1fr; max-width: 420px; }

/* Ours is the one that belongs to the site, so it carries the site's accent. */
.tc-rsource-tc { border-left: 3px solid var(--gold, #C6A756); }
/* Google's is visibly someone else's: neutral, recessed, with its own edge. */
.tc-rsource-google { border-left: 3px solid #4285F4; background: rgba(247, 248, 250, .7); }

.tc-rsource-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.tc-rsource-stars {
	font-size: 14px;
	line-height: 1;
	color: var(--gold, #C6A756);
	letter-spacing: 1px;
}
.tc-rsource-google .tc-rsource-stars { color: #F4B400; }
.tc-rsource-main .tc-rsource-count { width: 100%; }
.tc-rsource-hint { font-size: 12px; color: var(--soft, #3D4F63); opacity: .8; }
.tc-rsource .r-bars { margin-top: 12px; }
.tc-rsource .rbar-l { width: 30px; }
.reviews-more-note { font-size: 12px; color: var(--soft, #3D4F63); margin: 8px 0 0; }