/**
 * Renov About Daily Gallery
 * --------------------------------------------------------------
 * Section "Notre univers au quotidien"
 *
 * Architecture :
 * - fond toujours full-width
 * - contenu : Container / Fluide
 * - galerie desktop premium
 * - slider natif JS
 * - responsive tablette / mobile
 * - animations légères GPU-friendly
 */

.renov-el-about-daily-gallery {
	--renov-daily-dark: #1A1D3E;
	--renov-daily-accent: #FF7246;
	--renov-daily-bg: #FFFFFF;
	--renov-daily-text: #62697A;
	--renov-daily-border: rgba(26, 29, 62, 0.08);
	--renov-daily-shadow: 0 18px 45px rgba(26, 29, 62, 0.10);

	position: relative;
	width: 100%;
	overflow: hidden;

	background: var(--renov-daily-bg);
	color: var(--renov-daily-dark);
}

.renov-el-about-daily-gallery,
.renov-el-about-daily-gallery * {
	box-sizing: border-box;
}

/* =========================================================
   FULL-WIDTH BACKGROUND
   ========================================================= */

.renov-el-about-daily-gallery__background {
	position: absolute;
	inset: 0;
	z-index: 0;

	overflow: hidden;
	pointer-events: none;
}

.renov-el-about-daily-gallery__background-image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;

	opacity: 0.1;
}

/* Soft atmosphere */

.renov-el-about-daily-gallery::before {
	content: "";

	position: absolute;
	inset: 0;
	z-index: 1;

	pointer-events: none;

	
}

/* =========================================================
   CONTENT
   ========================================================= */

.renov-el-about-daily-gallery__inner {
	position: relative;
	z-index: 2;

	width: 100%;
	margin-inline: auto;

	padding: 64px 36px 68px;
}

.renov-el-about-daily-gallery__inner.is-container {
	max-width: 1600px;
}

.renov-el-about-daily-gallery__inner.is-fluid {
	max-width: none;
}

/* =========================================================
   HEADER
   ========================================================= */

.renov-el-about-daily-gallery__header {
	position: relative;
	z-index: 5;

	width: min(900px, 100%);

	margin: 0 auto 50px;

	text-align: center;
}

.renov-el-about-daily-gallery__kicker {
	margin: 0;

	color: var(--renov-daily-accent);

	font-size: 13px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.renov-el-about-daily-gallery__line {
	display: block;

	width: 44px;
	height: 3px;

	margin: 15px auto 18px;

	border-radius: 999px;

	background: var(--renov-daily-accent);
}

.renov-el-about-daily-gallery__title {
	margin: 0;

	color: var(--renov-daily-dark) !important;

	font-size: clamp(2.3rem, 3.6vw, 3.7rem);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.045em;
}

.renov-el-about-daily-gallery__description {
	width: min(800px, 100%);

	margin: 20px auto 0;

	color: var(--renov-daily-text);

	font-size: 16px;
	font-weight: 400;
	line-height: 1.65;
}

/* =========================================================
   VIEWPORT
   ========================================================= */

.renov-el-about-daily-gallery__viewport {
	position: relative;
	z-index: 4;

	width: 100%;

	overflow: hidden;

	padding:
		14px
		6px
		28px;
}

/* =========================================================
   TRACK
   ========================================================= */

.renov-el-about-daily-gallery__track {
	display: flex;
	align-items: stretch;

	gap: 14px;

	width: 100%;

	transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);

	will-change: transform;
}

/* =========================================================
   CARD
   ========================================================= */

.renov-el-about-daily-gallery__card {
	position: relative;

	flex:
		0
		0
		calc((100% - 42px) / 4);

	min-width: 0;
	height: 390px;

	overflow: hidden;

	border: 1px solid var(--renov-daily-border);
	border-radius: 14px;

	background: #f2f2f2;

	box-shadow: var(--renov-daily-shadow);

	transform: translateZ(0);

	transition:
		transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 420ms ease;
}

/*
 * Slight organic layout like the reference,
 * without expensive runtime JS transforms.
 */

.renov-el-about-daily-gallery__card:nth-child(4n + 1) {
	transform: rotate(-1.2deg) translateY(3px);
}

.renov-el-about-daily-gallery__card:nth-child(4n + 2) {
	transform: rotate(0.6deg);
}

.renov-el-about-daily-gallery__card:nth-child(4n + 3) {
	transform: rotate(-0.6deg) translateY(4px);
}

.renov-el-about-daily-gallery__card:nth-child(4n) {
	transform: rotate(1.1deg) translateY(5px);
}

/* hover */

.renov-el-about-daily-gallery__card:hover {
	z-index: 6;

	transform:
		translateY(-7px)
		rotate(0deg)
		scale(1.012);

	box-shadow:
		0 25px 60px rgba(26, 29, 62, 0.16);
}

/* =========================================================
   IMAGE
   ========================================================= */

.renov-el-about-daily-gallery__image {
	position: absolute;
	inset: 0;

	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: var(
		--renov-daily-image-position,
		center center
	);

	transform: scale(1.002);

	transition:
		transform 750ms cubic-bezier(0.22, 1, 0.36, 1),
		filter 500ms ease;
}

.renov-el-about-daily-gallery__card:hover
.renov-el-about-daily-gallery__image {
	transform: scale(1.055);
}

/* =========================================================
   IMAGE OVERLAY
   ========================================================= */

.renov-el-about-daily-gallery__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;

	pointer-events: none;

	background:
		linear-gradient(
			180deg,
			transparent 42%,
			rgba(8, 13, 31, 0.04) 58%,
			rgba(8, 13, 31, 0.38) 100%
		);

	transition: opacity 350ms ease;
}

.renov-el-about-daily-gallery__card:hover
.renov-el-about-daily-gallery__overlay {
	opacity: 0.88;
}

/* =========================================================
   CARD CTA
   ========================================================= */

.renov-el-about-daily-gallery__link {
	position: absolute;

	left: 20px;
	bottom: 20px;

	z-index: 3;

	display: inline-flex;
	align-items: center;

	gap: 12px;

	max-width: calc(100% - 40px);
	min-height: 52px;

	padding:
		7px
		15px
		7px
		8px;

	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 999px;

	background: rgba(18, 24, 48, 0.94);

	color: #ffffff;

	text-decoration: none;

	box-shadow:
		0 9px 28px rgba(0, 0, 0, 0.16);

	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);

	transition:
		background 250ms ease,
		transform 250ms ease,
		box-shadow 250ms ease;
}

a.renov-el-about-daily-gallery__link:hover {
	color: #ffffff;

	background: var(--renov-daily-dark);

	transform: translateY(-2px);

	box-shadow:
		0 13px 32px rgba(0, 0, 0, 0.22);
}

/* =========================================================
   ICON
   ========================================================= */

.renov-el-about-daily-gallery__icon {
	flex: 0 0 auto;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 38px;
	height: 38px;

	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 50%;

	color: #ffffff;
}

.renov-el-about-daily-gallery__icon i {
	font-size: 17px;
}

.renov-el-about-daily-gallery__icon svg {
	display: block;

	width: 18px;
	height: 18px;

	fill: currentColor;
}

/* =========================================================
   LABEL
   ========================================================= */

.renov-el-about-daily-gallery__label {
	min-width: 0;

	overflow: hidden;

	color: #ffffff;

	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;

	white-space: nowrap;
	text-overflow: ellipsis;
}

/* =========================================================
   ARROW
   ========================================================= */

.renov-el-about-daily-gallery__arrow {
	flex: 0 0 auto;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	margin-left: 5px;

	transition: transform 220ms ease;
}

.renov-el-about-daily-gallery__arrow svg {
	display: block;

	width: 21px;
	height: 21px;

	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.renov-el-about-daily-gallery__link:hover
.renov-el-about-daily-gallery__arrow {
	transform: translateX(4px);
}

/* =========================================================
   BADGE
   ========================================================= */

.renov-el-about-daily-gallery__badge {
	position: absolute;

	top: 34px;
	right: 6%;

	z-index: 6;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	width: 142px;
	height: 142px;

	padding: 17px;

	border: 2px solid var(--renov-daily-accent);
	border-radius: 50%;

	background: rgba(255, 255, 255, 0.86);

	color: var(--renov-daily-accent);

	text-align: center;

	box-shadow:
		0 12px 30px rgba(26, 29, 62, 0.06);

	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);

	transform: rotate(-7deg);

	transition:
		transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 400ms ease;
}

.renov-el-about-daily-gallery__badge:hover {
	transform:
		rotate(-2deg)
		scale(1.035);

	box-shadow:
		0 17px 36px rgba(26, 29, 62, 0.10);
}

.renov-el-about-daily-gallery__badge span {
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.renov-el-about-daily-gallery__badge strong {
	margin-top: 7px;

	font-size: 37px;
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.04em;
}

.renov-el-about-daily-gallery__badge i {
	display: block;

	width: 20px;
	height: 2px;

	margin: 9px auto 7px;

	border-radius: 999px;

	background: var(--renov-daily-accent);
}

.renov-el-about-daily-gallery__badge small {
	font-size: 9px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: 0.025em;
	text-transform: uppercase;
}

/* =========================================================
   HANDWRITTEN NOTES
   ========================================================= */

.renov-el-about-daily-gallery__note {
	position: absolute;
	z-index: 3;

	color: #536079;

	font-family:
		"Segoe Print",
		"Bradley Hand",
		"Comic Sans MS",
		cursive;

	font-size: 17px;
	font-weight: 500;
	line-height: 1.28;

	pointer-events: none;

	opacity: 0.92;
}

.renov-el-about-daily-gallery__note i {
	display: block;

	height: 3px;

	margin-top: 9px;

	border-radius: 999px;

	background: var(--renov-daily-accent);
}

/* left */

.renov-el-about-daily-gallery__note--left {
	top: 54px;
	left: 2%;

	width: 190px;

	transform: rotate(-9deg);
}

.renov-el-about-daily-gallery__note--left i {
	width: 135px;

	margin-left: 35px;

	transform: rotate(-5deg);
}

/* right */

.renov-el-about-daily-gallery__note--right {
	right: 2%;
	bottom: 30px;

	width: 210px;

	text-align: right;

	transform: rotate(-7deg);
}

.renov-el-about-daily-gallery__note--right i {
	width: 135px;

	margin-left: auto;

	transform: rotate(-4deg);
}

/* =========================================================
   DOTS
   ========================================================= */

.renov-el-about-daily-gallery__dots {
	position: relative;
	z-index: 7;

	display: flex;
	align-items: center;
	justify-content: center;

	gap: 8px;

	min-height: 18px;

	margin-top: 14px;
}

/* Reset complet des boutons de pagination */
.renov-el-about-daily-gallery__dot {
	-webkit-appearance: none;
	appearance: none;

	display: block;
	flex: 0 0 auto;

	width: 8px;
	height: 8px;

	min-width: 0 !important;
	min-height: 0 !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;
	border-radius: 999px;

	background: rgba(255, 114, 70, 0.20);

	box-shadow: none !important;

	font-size: 0;
	line-height: 0;

	cursor: pointer;

	transform: none;

	transition:
		width 220ms ease,
		background-color 220ms ease,
		transform 220ms ease;
}

/* Neutralise thème / Elementor */
.renov-el-about-daily-gallery__dots button,
.renov-el-about-daily-gallery__dots button:hover,
.renov-el-about-daily-gallery__dots button:focus,
.renov-el-about-daily-gallery__dots button:active {
	min-width: 0 !important;
	min-height: 0 !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;

	box-shadow: none !important;

	line-height: 0 !important;
}

/* Hover */
.renov-el-about-daily-gallery__dot:hover {
	background: rgba(255, 114, 70, 0.55);

	transform: scale(1.15);
}

/* Dot actif */
.renov-el-about-daily-gallery__dot.is-active,
.renov-el-about-daily-gallery__dot[aria-current="true"] {
	width: 32px;
	height: 8px;

	background: var(--renov-daily-accent);

	transform: none;
}

/* Focus accessibilité */
.renov-el-about-daily-gallery__dot:focus-visible {
	outline: 2px solid rgba(255, 114, 70, 0.38);
	outline-offset: 3px;
}

/* =========================================================
   MOBILE DOTS
   ========================================================= */

@media (max-width: 700px) {

	.renov-el-about-daily-gallery__dots {
		gap: 7px;

		margin-top: 10px;
	}

	.renov-el-about-daily-gallery__dot {
		width: 7px;
		height: 7px;
	}

	.renov-el-about-daily-gallery__dot.is-active,
	.renov-el-about-daily-gallery__dot[aria-current="true"] {
		width: 26px;
		height: 7px;
	}
}
/*
 * JS generates:
 * <button class="...__dot">
 */

.renov-el-about-daily-gallery__dot {
	display: block;

	width: 20px;
	height: 7px;

	padding: 0;

	border: 0;
	border-radius: 999px;

	background: rgba(26, 29, 62, 0.12);

	cursor: pointer;

	transition:
		width 280ms ease,
		background-color 280ms ease,
		transform 280ms ease;
}

.renov-el-about-daily-gallery__dot:hover {
	background: rgba(255, 114, 70, 0.45);
}

.renov-el-about-daily-gallery__dot.is-active,
.renov-el-about-daily-gallery__dot[aria-current="true"] {
	width: 52px;

	background: var(--renov-daily-accent);
}

/* =========================================================
   FOCUS
   ========================================================= */

.renov-el-about-daily-gallery__link:focus-visible,
.renov-el-about-daily-gallery__dot:focus-visible {
	outline: 3px solid rgba(255, 114, 70, 0.38);
	outline-offset: 4px;
}

/* =========================================================
   REVEAL ANIMATION SUPPORT
   ========================================================= */

.renov-el-about-daily-gallery [data-renov-reveal] {
	transition-delay:
		var(
			--renov-el-reveal-delay,
			0ms
		);
}

/* =========================================================
   LARGE LAPTOP
   ========================================================= */

@media (max-width: 1350px) {

	.renov-el-about-daily-gallery__inner {
		padding-inline: 28px;
	}

	.renov-el-about-daily-gallery__header {
		width: min(760px, 70%);

		margin-bottom: 44px;
	}

	.renov-el-about-daily-gallery__card {
		height: 350px;
	}

	.renov-el-about-daily-gallery__badge {
		right: 3%;

		width: 122px;
		height: 122px;
	}

	.renov-el-about-daily-gallery__badge strong {
		font-size: 31px;
	}

	.renov-el-about-daily-gallery__note {
		font-size: 14px;
	}

	.renov-el-about-daily-gallery__note--left {
		left: 1%;

		width: 150px;
	}

	.renov-el-about-daily-gallery__note--right {
		width: 170px;
	}
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

	.renov-el-about-daily-gallery__inner {
		padding:
			55px
			24px
			58px;
	}

	.renov-el-about-daily-gallery__header {
		width: min(700px, 100%);

		margin-bottom: 35px;
	}

	.renov-el-about-daily-gallery__title {
		font-size: clamp(2.2rem, 5vw, 3.2rem);
	}

	.renov-el-about-daily-gallery__description {
		font-size: 15px;
	}

	.renov-el-about-daily-gallery__note {
		display: none;
	}

	.renov-el-about-daily-gallery__badge {
		position: relative;

		top: auto;
		right: auto;

		width: 105px;
		height: 105px;

		margin:
			-15px
			20px
			18px
			auto;
	}

	.renov-el-about-daily-gallery__badge strong {
		font-size: 27px;
	}

	.renov-el-about-daily-gallery__badge small {
		font-size: 7px;
	}

	.renov-el-about-daily-gallery__viewport {
		overflow: hidden;

		margin-inline: -5px;
		padding-inline: 5px;
	}

	.renov-el-about-daily-gallery__card {
		flex:
			0
			0
			calc((100% - 14px) / 2);

		height: 390px;
	}
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

	.renov-el-about-daily-gallery__inner {
		padding:
			45px
			16px
			48px;
	}

	.renov-el-about-daily-gallery__header {
		margin-bottom: 30px;
	}

	.renov-el-about-daily-gallery__kicker {
		font-size: 11px;
	}

	.renov-el-about-daily-gallery__line {
		width: 38px;

		margin:
			12px
			auto
			15px;
	}

	.renov-el-about-daily-gallery__title {
		font-size: clamp(2rem, 9vw, 2.8rem);

		line-height: 1.08;
	}

	.renov-el-about-daily-gallery__description {
		margin-top: 15px;

		font-size: 14px;
		line-height: 1.6;
	}

	.renov-el-about-daily-gallery__badge {
		width: 92px;
		height: 92px;

		margin:
			-6px
			8px
			15px
			auto;

		padding: 12px;
	}

	.renov-el-about-daily-gallery__badge span {
		font-size: 8px;
	}

	.renov-el-about-daily-gallery__badge strong {
		margin-top: 5px;

		font-size: 24px;
	}

	.renov-el-about-daily-gallery__badge i {
		margin:
			6px
			auto
			5px;
	}

	.renov-el-about-daily-gallery__badge small {
		font-size: 6px;
	}

	/* cards */

	.renov-el-about-daily-gallery__track {
		gap: 12px;
	}

	.renov-el-about-daily-gallery__card {
		flex:
			0
			0
			calc(88% - 8px);

		height: 390px;

		border-radius: 13px;
	}

	/*
	 * Remove scrapbook rotations on small screens.
	 * Gives cleaner swipe behaviour.
	 */

	.renov-el-about-daily-gallery__card:nth-child(n) {
		transform: none;
	}

	.renov-el-about-daily-gallery__card:hover {
		transform: translateY(-3px);
	}

	.renov-el-about-daily-gallery__link {
		left: 15px;
		bottom: 15px;

		max-width: calc(100% - 30px);
		min-height: 49px;

		padding:
			6px
			14px
			6px
			7px;
	}

	.renov-el-about-daily-gallery__icon {
		width: 36px;
		height: 36px;
	}

	.renov-el-about-daily-gallery__label {
		font-size: 14px;
	}

	.renov-el-about-daily-gallery__dots {
		margin-top: 9px;
	}

	.renov-el-about-daily-gallery__dot {
		width: 16px;
		height: 6px;
	}

	.renov-el-about-daily-gallery__dot.is-active,
	.renov-el-about-daily-gallery__dot[aria-current="true"] {
		width: 38px;
	}
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

	.renov-el-about-daily-gallery__inner {
		padding-inline: 12px;
	}

	.renov-el-about-daily-gallery__header {
		margin-bottom: 24px;
	}

	.renov-el-about-daily-gallery__title {
		font-size: clamp(1.9rem, 9.5vw, 2.45rem);
	}

	.renov-el-about-daily-gallery__description {
		font-size: 13px;
	}

	.renov-el-about-daily-gallery__badge {
		width: 82px;
		height: 82px;

		margin-right: 4px;
	}

	.renov-el-about-daily-gallery__badge strong {
		font-size: 21px;
	}

	.renov-el-about-daily-gallery__card {
		flex-basis: 91%;

		height: 350px;
	}

	.renov-el-about-daily-gallery__link {
		gap: 9px;

		min-height: 46px;
	}

	.renov-el-about-daily-gallery__icon {
		width: 33px;
		height: 33px;
	}

	.renov-el-about-daily-gallery__icon svg {
		width: 16px;
		height: 16px;
	}

	.renov-el-about-daily-gallery__label {
		font-size: 13px;
	}
}

/* =========================================================
   NON-SLIDER MODE
   ========================================================= */

.renov-el-about-daily-gallery[data-slider="no"]
.renov-el-about-daily-gallery__track {
	display: grid;

	grid-template-columns:
		repeat(4, minmax(0, 1fr));

	transform: none !important;
}

.renov-el-about-daily-gallery[data-slider="no"]
.renov-el-about-daily-gallery__card {
	width: 100%;

	flex: none;
}

@media (max-width: 1024px) {

	.renov-el-about-daily-gallery[data-slider="no"]
	.renov-el-about-daily-gallery__track {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {

	.renov-el-about-daily-gallery[data-slider="no"]
	.renov-el-about-daily-gallery__track {
		grid-template-columns: 1fr;
	}

	.renov-el-about-daily-gallery[data-slider="no"]
	.renov-el-about-daily-gallery__card {
		height: 340px;
	}
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.renov-el-about-daily-gallery__track,
	.renov-el-about-daily-gallery__card,
	.renov-el-about-daily-gallery__image,
	.renov-el-about-daily-gallery__link,
	.renov-el-about-daily-gallery__arrow,
	.renov-el-about-daily-gallery__badge,
	.renov-el-about-daily-gallery__dot {
		transition: none !important;
	}

	.renov-el-about-daily-gallery__card:nth-child(n),
	.renov-el-about-daily-gallery__card:hover,
	.renov-el-about-daily-gallery__badge,
	.renov-el-about-daily-gallery__badge:hover {
		transform: none;
	}

	.renov-el-about-daily-gallery__card:hover
	.renov-el-about-daily-gallery__image {
		transform: none;
	}
}