/*
 * Cite des Arts : barre haute, pied de page et page Places a gagner.
 *
 * Feuille servie telle quelle depuis le theme. Le build webpack du theme
 * (webpack 4 + node-sass 4) ne tourne plus sur les versions de Node
 * actuelles : toute nouvelle classe Tailwind serait absente du CSS compile.
 * D'ou ce fichier autonome, charge apres Tailwind.
 */

:root {
	--cda-black: #151515;
	--cda-black-2: #1e1e1d;
	--cda-line: #2f2f2c;
	--cda-dim: #a6a6a0;
	--cda-highlight: #f09e38;
	--cda-badge-h: 40px;
}

/* ── Barre haute ───────────────────────────────────────────────────────── */

.cda-topbar {
	background: var(--cda-black);
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
}

.cda-topbar__in {
	max-width: 80rem;
	margin: 0 auto;
	padding: 8px 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.cda-topbar__side {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.cda-topbar__side--end {
	margin-left: auto;
}

.cda-topbar__label {
	color: var(--cda-dim);
	font-size: 13px;
	white-space: nowrap;
}

/* ── Reseaux sociaux ───────────────────────────────────────────────────── */

.cda-social {
	display: flex;
	align-items: center;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cda-social li {
	margin: 0;
}

.cda-social a {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #242422;
	color: #fff;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.cda-social a:hover,
.cda-social a:focus-visible {
	background: var(--cda-highlight);
	color: var(--cda-black);
}

.cda-social a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.cda-social svg,
.cda-social img {
	width: 16px;
	height: 16px;
	display: block;
}

.cda-social--bare a {
	width: 28px;
	height: 28px;
	background: transparent;
}

.cda-social--bare a:hover,
.cda-social--bare a:focus-visible {
	background: transparent;
	color: var(--cda-highlight);
}

.cda-social--bare svg,
.cda-social--bare img {
	width: 15px;
	height: 15px;
}

/* ── Boutons des stores ────────────────────────────────────────────────── */

.cda-stores {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.cda-store {
	display: inline-flex;
	border-radius: 8px;
	transition: opacity 0.15s ease;
}

.cda-store:hover {
	opacity: 0.82;
}

.cda-store:focus-visible {
	outline: 2px solid var(--cda-highlight);
	outline-offset: 3px;
}

.cda-badge {
	display: block;
	width: auto;
}

.cda-badge--apple {
	height: var(--cda-badge-h);
}

/* Le fichier Google embarque 15 px de marge transparente en haut et en bas
   (badge reel : 102 px sur 132). On agrandit donc de 29,4 % pour que les deux
   boutons aient exactement la meme hauteur visible. Mesure faite sur le
   fichier, pas a l'oeil. */
.cda-badge--play {
	height: calc(var(--cda-badge-h) * 1.294);
}

.cda-stores--sm {
	--cda-badge-h: 26px;
	gap: 8px;
}

.cda-stores--lg {
	--cda-badge-h: 48px;
}

/* ── Page Places a gagner ──────────────────────────────────────────────── */

.cda-places {
	padding: 56px 0 72px;
}

.cda-places__in {
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 1rem;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 56px;
	align-items: center;
}

.cda-places__title {
	font-family: ApercuMedium, sans-serif;
	font-size: clamp(28px, 3.6vw, 42px);
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin: 0 0 16px;
	color: var(--cda-black);
}

.cda-places__lead {
	font-size: 18px;
	line-height: 1.6;
	color: #4a4a46;
	margin: 0 0 24px;
	max-width: 46ch;
}

.cda-places__steps {
	list-style: none;
	counter-reset: cda-step;
	margin: 0 0 28px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cda-places__steps li {
	counter-increment: cda-step;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--cda-black);
	margin: 0;
}

.cda-places__steps li::before {
	content: counter(cda-step);
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--cda-black);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cda-places__note {
	font-size: 14px;
	color: #6b6c64;
	margin: 18px 0 0;
}

.cda-places__shots {
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.cda-places__shots img {
	display: block;
	height: auto;
	border-radius: 22px;
	border: 4px solid var(--cda-black);
	background: var(--cda-black);
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);
}

.cda-places__shot--side {
	width: 150px;
}

.cda-places__shot--mid {
	width: 186px;
	position: relative;
	z-index: 2;
	margin: 0 -22px;
}

.dark .cda-places__title,
.dark .cda-places__steps li {
	color: #fff;
}

.dark .cda-places__lead {
	color: var(--cda-dim);
}

.dark .cda-places__steps li::before {
	background: #fff;
	color: var(--cda-black);
}

.dark .cda-places__shots img {
	border-color: #33332f;
}

/* ── Adaptations ecrans ────────────────────────────────────────────────── */

@media (max-width: 900px) {
	.cda-places__in {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.cda-topbar__label {
		display: none;
	}

	.cda-topbar__in {
		justify-content: space-between;
	}
}

@media (max-width: 620px) {
	.cda-places__shot--side {
		width: 104px;
	}

	.cda-places__shot--mid {
		width: 132px;
		margin: 0 -16px;
	}

	.cda-stores--sm {
		--cda-badge-h: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cda-social a,
	.cda-store {
		transition: none;
	}
}

/* ── Pied de page ──────────────────────────────────────────────────────── */

.cda-f {
	position: relative;
	overflow: hidden;
	background: var(--cda-black);
	color: #fff;
}

.cda-f__decor {
	position: absolute;
	inset: 0;
	left: 0;
	right: 0;
	width: 100%;
	max-width: 80rem;
	margin: 0 auto;
	pointer-events: none;
}

.cda-f__forme {
	position: absolute;
	display: block;
	height: auto;
}

/* Chaque forme est posee dans une zone qui reste libre : marges exterieures
   du conteneur, bande vide entre le logo et la newsletter, bande vide sous
   les colonnes de liens. Le pied de page etant en overflow hidden, celles
   qui debordent sont cadrees par le bord. */
.cda-f__forme--rond-haut {
	left: 33%;
	top: 26px;
}

.cda-f__forme--triangle-haut {
	left: 52%;
	top: 8px;
}

.cda-f__forme--arc-gauche {
	left: -46px;
	top: 300px;
}

.cda-f__forme--arc-droit {
	right: -22px;
	top: 470px;
}

.cda-f__forme--triangle-bas {
	left: 44%;
	bottom: 130px;
}

.cda-f__forme--rond-bas {
	right: 13%;
	bottom: 160px;
}

@media (max-width: 1100px) {
	.cda-f__decor {
		display: none;
	}
}

.cda-f__in {
	position: relative;
	z-index: 1;
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 1rem;
}

.cda-f__head {
	display: flex;
	flex-wrap: wrap;
	gap: 28px 40px;
	align-items: flex-end;
	justify-content: space-between;
	padding-top: 56px;
}

.cda-f__logo {
	display: block;
	max-width: 260px;
	color: #fff;
}

.cda-f__logo-svg {
	width: 100%;
	height: auto;
	display: block;
}

.cda-f__tagline {
	color: var(--cda-dim);
	font-weight: 300;
	font-size: 18px;
	line-height: 1.4;
	margin: 14px 0 0;
	max-width: 32ch;
}

.cda-f__news {
	flex: 0 1 440px;
	min-width: 260px;
}

.cda-f__h {
	font-family: ApercuMedium, sans-serif;
	font-size: 14px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 14px;
}

.cda-f__grid {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 52px;
	align-items: start;
	padding: 44px 0 40px;
}

.cda-f__app {
	background: var(--cda-black-2);
	border: 1px solid var(--cda-line);
	border-radius: 16px;
	padding: 24px 22px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.cda-f__app-title {
	font-family: ApercuMedium, sans-serif;
	font-size: 20px;
	line-height: 1.25;
	margin: 0;
	color: #fff;
}

.cda-f__app-row {
	display: flex;
	align-items: center;
	gap: 18px;
}

.cda-f__phone {
	width: 96px;
	height: auto;
	flex: none;
	display: block;
	border-radius: 14px;
	border: 3px solid #33332f;
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
}

.cda-f__app-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--cda-dim);
}

.cda-f__cols {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px 28px;
	align-content: start;
}

.cda-f__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.cda-f__list li {
	margin: 0;
}

.cda-f__list a {
	color: var(--cda-dim);
	font-size: 16px;
	line-height: 1.35;
}

.cda-f__list a:hover,
.cda-f__list a:focus-visible {
	color: #fff;
}

.cda-f__contact {
	color: var(--cda-dim);
	font-size: 16px;
	line-height: 1.7;
}

.cda-f__contact p {
	margin: 0;
}

.cda-f__contact strong {
	color: #fff;
	font-weight: 600;
}

.cda-f__contact a {
	color: var(--cda-dim);
}

.cda-f__contact a:hover {
	color: #fff;
}

.cda-f__social {
	margin-top: 18px;
}

.cda-f__bottom {
	position: relative;
	z-index: 1;
	border-top: 1px solid var(--cda-line);
}

.cda-f__bottom-in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 26px;
	padding-top: 20px;
	padding-bottom: 24px;
}

.cda-f__copy {
	margin: 0;
	font-size: 14px;
	color: #8a8a83;
	white-space: nowrap;
}

.cda-f__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 4px 0;
}

.cda-f__legal li {
	margin: 0;
	font-size: 14px;
	color: var(--cda-dim);
}

.cda-f__legal li + li::before {
	content: "·";
	margin: 0 10px;
	color: #4a4a46;
}

.cda-f__legal a {
	color: var(--cda-dim);
}

.cda-f__legal a:hover,
.cda-f__legal a:focus-visible {
	color: #fff;
}

.cda-f__sign {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--cda-dim);
}

.cda-f__sign span {
	font-size: 12px;
	opacity: 0.75;
}

.cda-f__sign svg {
	color: #fff;
	opacity: 0.55;
	transition: opacity 0.15s ease;
}

.cda-f__sign:hover svg {
	opacity: 1;
}

@media (max-width: 1100px) {
	.cda-f__grid {
		grid-template-columns: 300px 1fr;
		gap: 36px;
	}

	.cda-f__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	.cda-f__grid {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.cda-f__app {
		max-width: 420px;
	}

	.cda-f__sign {
		margin-left: 0;
	}
}

@media (max-width: 600px) {
	.cda-f__cols {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.cda-f__head {
		padding-top: 40px;
	}

		.cda-f__decor {
		opacity: 0.12;
	}
}

/* ── Panneau de recherche du menu ──────────────────────────────────────── */

/*
 * Le panneau de recherche est masque par un decalage fixe de 80 px, calcule
 * quand l'en-tete commencait en haut de page. Il depassait deja de quelques
 * pixels avant la barre haute ; celle-ci decale l'en-tete de 44 px et le
 * rendait franchement visible. On repousse le panneau au-dela de sa hauteur
 * reelle. La classe disparait a l'ouverture, la descente n'est pas affectee.
 */
.mainHeader .-translate-y-20 {
	--tw-translate-y: -14rem;
}