/* =========================================================
   HERO
   ========================================================= */
.cn-hero {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1086 / 1448;
}
@media (min-width: 701px) {
	.cn-hero { aspect-ratio: 1672 / 941; }
}
.cn-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}
.cn-hero__actions {
	position: absolute;
	z-index: 1;
	left: 50%;
	transform: translateX(-50%);
	bottom: clamp(1rem, 5vw, 2.5rem);
	display: flex;
	justify-content: center;
	gap: var(--cn-space-3);
	flex-wrap: wrap;
}

/* =========================================================
   DEUX FAÇONS DE SE RÉGALER
   ========================================================= */
.cn-two-ways { padding-top: 0; }
.cn-two-ways__banner { display: block; width: 100%; height: auto; }
.cn-two-ways__grid {
	display: grid;
	gap: var(--cn-space-5);
	margin-top: var(--cn-space-6);
}
.cn-way {
	position: relative;
	display: block;
	border-radius: var(--cn-radius-l);
	overflow: hidden;
	aspect-ratio: 3 / 2;
	box-shadow: var(--cn-shadow-m);
	transition: transform 0.2s ease;
}
.cn-way:hover { transform: translateY(-4px); }
.cn-way img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.cn-way__arrow {
	position: absolute;
	right: var(--cn-space-4);
	bottom: var(--cn-space-4);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--cn-jaune);
	color: var(--cn-noir);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	font-weight: 800;
	box-shadow: var(--cn-shadow-m);
}

@media (min-width: 720px) {
	.cn-two-ways__grid { grid-template-columns: repeat(3, 1fr); }
}

.cn-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cn-space-4);
	margin-bottom: var(--cn-space-6);
}

/* =========================================================
   RECHERCHE RESTAURANT + DERNIÈRES OUVERTURES
   ========================================================= */
.cn-finder-section { padding-top: var(--cn-space-6); }
.cn-finder-section__banner { position: relative; }
.cn-finder-section__banner img { display: block; width: 100%; height: auto; }
.cn-finder-section__cta { position: absolute; right: 6%; top: 68%; transform: translateY(-50%); }
@media (max-width: 700px) {
	.cn-finder-section__cta { position: static; transform: none; display: block; width: max-content; margin: 1rem auto 0; }
}

.cn-finder {
	background: #fff;
	border-radius: var(--cn-radius-l);
	padding: var(--cn-space-6);
	box-shadow: var(--cn-shadow-m);
	display: grid;
	gap: var(--cn-space-6);
}
.cn-finder__search {
	display: flex;
	flex-direction: column;
	gap: var(--cn-space-3);
}
.cn-finder__search-row {
	display: flex;
	flex-direction: column;
	gap: var(--cn-space-3);
}
.cn-finder__search-row input[type="search"] {
	flex: 1;
	min-height: 52px;
	padding-inline: var(--cn-space-5);
	border-radius: var(--cn-radius-pill);
	border: 2px solid rgba(18,16,20,0.15);
	font: inherit;
}
.cn-finder__restaurants {
	display: grid;
	gap: var(--cn-space-4);
	grid-template-columns: 1fr;
}
.cn-finder__restaurant {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cn-space-3);
	padding: var(--cn-space-4);
	border-radius: var(--cn-radius-m);
	background: var(--cn-ivoire);
}
.cn-finder__restaurant-name { font-weight: 800; }
.cn-finder__restaurant-addr { color: var(--cn-text-muted-on-ivoire); font-size: 0.875rem; }

@media (min-width: 720px) {
	.cn-finder { grid-template-columns: 1fr 1fr; }
	.cn-finder__search-row { flex-direction: row; }
}
@media (min-width: 960px) {
	.cn-finder__restaurants { grid-template-columns: repeat(3, 1fr); }
	.cn-finder { grid-template-columns: 1fr 2fr; }
}

/* =========================================================
   AMBIANCE
   ========================================================= */
.cn-ambiance {
	display: grid;
	gap: var(--cn-space-4);
	grid-template-columns: 1fr;
	align-items: center;
}
.cn-ambiance__media {
	border-radius: var(--cn-radius-l);
	overflow: hidden;
	box-shadow: var(--cn-shadow-m);
	max-width: 420px;
	margin-inline: auto;
}
.cn-ambiance__media img { width: 100%; display: block; }
@media (min-width: 860px) {
	.cn-ambiance { grid-template-columns: 1fr 1.2fr; }
	.cn-ambiance__media { margin-inline: 0; }
}

/* =========================================================
   FRANCHISE CTA
   ========================================================= */
.cn-franchise-cta {
	position: relative;
	border-radius: var(--cn-radius-l);
	overflow: hidden;
}
@media (min-width: 720px) {
	.cn-franchise-cta {
		width: 100vw;
		max-width: none;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		padding-inline: 12px;
	}
}
.cn-franchise-cta img { display: block; width: 100%; height: auto; }
.cn-franchise-cta__arrow {
	position: absolute;
	left: 89%;
	top: 46%;
	transform: translate(-50%, -50%);
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--cn-jaune);
	color: var(--cn-noir);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	font-weight: 800;
	box-shadow: var(--cn-shadow-m);
	text-decoration: none;
}
@media (max-width: 700px) {
	.cn-franchise-cta__arrow { left: auto; right: 1rem; top: auto; bottom: 1rem; transform: none; }
}

/* =========================================================
   SOCIAL HIGHLIGHTS
   ========================================================= */
.cn-social__grid {
	display: grid;
	gap: var(--cn-space-4);
	grid-template-columns: repeat(3, 1fr);
}
.cn-social__item {
	border-radius: var(--cn-radius-m);
	overflow: hidden;
	aspect-ratio: 1;
	box-shadow: var(--cn-shadow-s);
}
.cn-social__item img { width: 100%; height: 100%; object-fit: cover; }