/*
 * Talents Chrétiens — one horizontal grid for the whole site (desktop).
 *
 * Each page of the validated package was authored with its own container width
 * (1056, 1120, 1140, 1180, and the header full-bleed at 28px), so on a wide screen the
 * logo, the page content and the footer each started at a different place. The client
 * asked for a single alignment across the site, so every shell container is brought to
 * the same one here: 1140px wide with a 40px gutter, which is what the home page, the
 * directory heading, "Nous rejoindre" and the press page already used.
 *
 * Desktop only. Below 901px every page keeps its own mobile layout untouched, which is
 * deliberate — the mobile gutters are narrower and were validated as they are.
 *
 * This file is loaded last, so it overrides the page stylesheets without editing them.
 */

@media (min-width: 901px) {

	:root {
		--tc-shell-max: 1140px;
		--tc-shell-pad: 40px;
	}

	/* Header and footer: the two pieces shared by every page. */
	.tc-global-topbar {
		max-width: var(--tc-shell-max) !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: var(--tc-shell-pad) !important;
		padding-right: var(--tc-shell-pad) !important;
	}
	.tc-ft-inner {
		max-width: var(--tc-shell-max) !important;
		padding-left: var(--tc-shell-pad) !important;
		padding-right: var(--tc-shell-pad) !important;
	}

	/* Page bodies. */
	.tc-page-home .page,
	.tc-page-join .page,
	.tc-page-presse .page,
	.tc-page-contact .page,
	.tc-page-contact .hero-inner,
	.tc-page-annuaire .results-head,
	.tc-page-annuaire .page,
	.tc-page-dirigeant .hero-inner,
	.tc-page-dirigeant .main,
	.tc-page-fiche .page,
	.tc-page-fiche .breadcrumb {
		max-width: var(--tc-shell-max) !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: var(--tc-shell-pad) !important;
		padding-right: var(--tc-shell-pad) !important;
	}

	/*
	 * The landing page is the one exception: its supplied design uses a 1180px container with
	 * a 20px gutter, and the client asked for that page to be reproduced exactly as delivered.
	 * So instead of pulling the page onto the site grid, the shared footer follows the page's
	 * own container here, which keeps the two aligned with each other.
	 */
	.tc-page-landing .tc-ft-inner {
		width: min(1180px, calc(100% - 40px)) !important;
		max-width: none !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/*
	 * The business page's hero text, logo and sticky action bar are positioned against the
	 * window rather than sitting in the container, so they follow the same edge by formula.
	 */
	.tc-page-fiche {
		--tc-fiche-gutter: max(var(--tc-shell-pad), calc((100% - var(--tc-shell-max)) / 2 + var(--tc-shell-pad)));
	}
}

/* ---------------------------------------------------------------------------
 * Links.
 *
 * None of the validated pages style a bare <a>: every link in the design carries
 * its own class. Anything added on top of that — a consent sentence, a link inside
 * body copy — therefore fell back to the browser's blue and purple. Those links now
 * take the colour of the text around them, and the consent lines use the same
 * discreet underlined style the contact and submit pages already define, so the
 * "Politique de confidentialité" link looks the same everywhere.
 *
 * Links that carry a design class are not touched by any of this.
 * ------------------------------------------------------------------------- */
/*
 * :where() carries no specificity, so this is the weakest possible rule: it replaces the
 * browser's blue/purple with the surrounding text colour, and every rule the design
 * writes — a class, an id, anything — still wins over it. The underline is left alone, so
 * a link inside body copy is still recognisable as one.
 *
 * The press page is excluded because its own stylesheet sets a colour on bare <a>, which
 * has the same weight and would otherwise be decided by load order rather than intent.
 */
:where(.tc-template:not(.tc-page-presse)) a {
	color: inherit;
}
.tc-template .rgpd-txt a,
.tc-template .form-label a,
.tc-template .tc-modal-consent a {
	color: var(--navy-60, #3A506B);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.tc-template .rgpd-txt a:hover,
.tc-template .form-label a:hover,
.tc-template .tc-modal-consent a:hover {
	color: var(--gold-dk, #A8893C);
}

/* A telephone number is a link too, and must never look like a browser default. */
.tc-template a[href^="tel:"] {
	text-decoration: none;
}