/* ==========================================================================
   Section styles — Accueil
   ========================================================================== */

/* --------------------------------------------------------------- masthead */

/* The masthead is not a full-width bar: it is a black pill floating over the
   page, in a fixed wrapper that takes no layout space. Transcribed from the
   original's .wl-menu-bg rule and confirmed by measurement at 1440x900 —
   600 x 101 at y=30, background #060606, 50px corners, logo inverted white.
   It is collapsed at the top of the page and slides in once scrolled. */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 8;
	transform: translateY(-140%);
	transition: transform .3s ease;
	pointer-events: none;
}
.site-header.is-stuck {
	transform: none;
	pointer-events: auto;
}

.site-header__bar {
	width: calc(100% - 30px);   /* keeps a gutter once narrower than the pill */
	max-width: 600px;
	margin: 30px auto 0;        /* the original's margin, at every width */
	padding: 0 10px 10px;
	background: #060606;
	border-radius: 50px;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 95%;
	max-width: none;
	padding: 40px 15px 20px;
}

.site-header__logo {
	display: block;
	flex: none;
	line-height: 0;
}
/* the source mark is black artwork, inverted to sit on the black pill */
.site-header__logo img {
	display: block;
	width: 34.58px;
	height: 31.2px;
	object-fit: contain;
	filter: invert(1);
}

/* The two thin "I" bars — one after the mark, one after the menu. The box is
   collapsed to zero width, which is what produces the 40px gap on either side;
   the glyph itself deliberately overflows it and *is* visible. Measured on the
   original: box at x 554.23 / 888.33 with a 3.5 x 15 glyph, Gotham Book 12/16.8
   in --light-shade — which is what .t-caption .t--light already gives. */
.site-header__sep {
	flex: none;
	max-width: 0;
	height: 15px;
	margin: 0 20px;
	overflow: visible;
	color: var(--light-shade);
}

/* The call button on the right end of the pill. Measured: a 32px-wide hit area
   around a 24px glyph, so 4px of inset on each side. */
.site-header__phone {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 32px;
	height: 24px;
	margin: 0;
	color: var(--light-shade);
}
.site-header__phone svg {
	display: block;
	width: 24px;
	height: 24px;
}
.site-header__phone:hover {
	color: #fff;
}

/* Measured: 17.5px of margin on each side of every item (35px between them),
   with the list pulled back by 17.5px on *both* ends so the row starts and ends
   flush. Cancelling the trailing margin matters: it keeps the <nav> element box
   equal to the visual row (294.09px), which is what lets the separator after it
   land on the original's x 888.33 with a plain 20px margin. */
.site-header__nav .nav__list--row {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0 -17.5px;
}
.site-header__nav .nav__list--row .nav__item {
	margin: 0 17.5px;
}

.nav__link {
	display: inline-block;
	font-family: var(--font-text);
	font-weight: 400;
	font-size: 12px;
	line-height: normal;
	color: #f1f1f1;   /* measured */
}
.nav__link:hover {
	color: #fff;
}

/* The header never occupies layout space, so the spacer stays collapsed —
   it exists only to mirror the original's zero-height sticky wrapper. */
.site-header-spacer { display: none; }

/* ----------------------------------------------------------------- burger */

.burger {
	display: none;
	flex: none;
	width: 40px;
	height: 40px;
	padding: 12px 8px;
	margin-left: auto;
	background: none;
	border: 0;
	cursor: pointer;
}
.burger__line {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--light-shade);
	transition: transform .25s ease, opacity .25s ease;
}
.burger__line + .burger__line { margin-top: 5px; }

.burger[aria-expanded="true"] .burger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__line:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
	width: calc(100% - 30px);
	max-width: 600px;
	margin: 0 auto;
	background: #060606;
	border-radius: 0 0 25px 25px;
}
.mobile-nav[hidden] { display: none; }

.mobile-nav__inner {
	padding: 10px 0 30px;
}
.nav__list--column {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.nav__list--column .nav__item { margin-bottom: 1.4375em; }
.nav__list--column .nav__item:last-child { margin-bottom: 0; }

@media (max-width: 991px) {
	.site-header__nav { display: none; }
	/* the original hides both bars and the call button at this breakpoint too */
	.site-header__sep,
	.site-header__phone { display: none; }
	.burger { display: block; }
	.site-header__inner {
		justify-content: space-between;
		gap: 8px;
		padding: 20px 15px;
	}
}

/* -------------------------------------------------------------------- hero */

/* Measured on the original at 1440x900: the block is exactly viewport-tall and
   the artwork (1170 x 601) sits centred inside the 1200px container. */

.hero {
	display: flex;
	align-items: center;
	min-height: 100vh;
	padding-top: 0;
	padding-bottom: 0;
}

.hero .section__inner { width: 100%; }

.hero__media {
	display: block;
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: 5px;
}
/* the original reserves the media box by aspect ratio, then contains the art */
.hero__media::before {
	content: "";
	display: block;
	padding-top: 51.37%;
}
.hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: 51.168% 50%;
}

/* ------------------------------------------------------------------- intro */

/* Measured: 200px above the text, 100px below — i.e. one extra section
   step on top, which scales with --section-v. */
.intro { padding-top: calc(var(--section-v) * 2); }

.intro__text { text-align: left; }

/* ------------------------------------------------------------------ slider */

.slider { position: relative; }

.slider__viewport {
	overflow: hidden;
	width: 100%;
}

.slider__track {
	display: flex;
	align-items: stretch;
	will-change: transform;
}

.slider__slide {
	flex: 0 0 auto;
	min-width: 0;
}

.slider__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 30px;
	margin-top: 20px;
}

.slider__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(6, 6, 6, .25);
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.slider__dot.is-active {
	background: var(--dark-accent);
	transform: scale(1.15);
}

/* Gallery and team run edge to edge rather than inside the 1200px container.
   Measured: the team list is 1410px wide in a 1440px window, the gallery list
   is the full 1440px. */
.section__inner--full {
	width: calc(100% - 30px);
	max-width: none;
	padding: 0;
}
.section__inner--bleed {
	width: 100%;
	max-width: none;
	padding: 0;
}

/* ----------------------------------------------------------------- gallery */

.gallery__item { display: flex; }

.gallery__link {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	line-height: 0;
	border-radius: 5px;
	overflow: hidden;
}

.gallery__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 930 / 1395;
	object-fit: cover;
}

/* ------------------------------------------------------------------- pitch */

.pitch__text { text-align: center; }

/* measured gap between the paragraph and the button row */
.pitch .btns-group { margin-top: 16px; }

/* ---------------------------------------------------------------- services */

/* Measured: a 500px photo slider, a 30px gutter, then a 670px text column.
   minmax(0, …) keeps the text column from taking its max-content width and
   pushing the page into horizontal overflow. */
.services__grid {
	display: grid;
	grid-template-columns: 500px minmax(0, 1fr);
	align-items: center;
	gap: 30px;
}

.services__media { min-width: 0; }
.services__body { min-width: 0; }

@media (max-width: 991px) {
	.services__grid { grid-template-columns: 40% minmax(0, 1fr); }
}

.services__slide { line-height: 0; }

.services__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 930 / 1395;
	object-fit: cover;
	border-radius: 5px;
}

.services__eyebrow {
	color: rgb(157, 157, 157);
	margin-bottom: 0;
	text-align: center;
}

/* Measured: 31px between services, and the number sits directly on the title. */
.services__list {
	display: flex;
	flex-direction: column;
	gap: 31px;
	text-align: center;
}

.services__eyebrow + .services__list { margin-top: 29px; }

.services__num { margin-bottom: 0; }

.services__item--soon {
	opacity: .45;
	pointer-events: none;
}

.services__link { display: block; color: inherit; }

@media (max-width: 767px) {
	.services__grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------- avis */

.avis__slider { margin: 0 auto; }

.avis__item { text-align: center; }

/* columnSize 7, but the theme overrides testimonial items to 90% */
.avis__figure {
	max-width: 90%;
	margin: 0 auto;
}

.avis__icon {
	width: 50px;
	height: 50px;
	margin: 0 auto 20px;   /* measured 20px below the icon panel */
	display: flex;
	align-items: center;
	justify-content: center;
}
.avis__icon img {
	width: 24px;
	height: 24px;
}

.avis__quote { margin-bottom: 15px; }   /* measured */

.avis__author { margin-bottom: 5px; }   /* measured */

.avis__footer {
	display: flex;
	justify-content: center;
	margin-top: 55px;   /* measured from the dots row to the button */
}

@media (max-width: 767px) {
	.avis__figure { max-width: 100%; }
}

/* ------------------------------------------------------------------ equipe */

.equipe__figure { margin: 0; }

.equipe__media {
	overflow: hidden;
	border-radius: 5px;
	line-height: 0;
}

/* The source photos are 930x1395 portrait; the original crops them to a
   440x294 landscape box, which is what object-position is tuned for. */
.equipe__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 440 / 294;
	object-fit: cover;
}

.equipe__caption {
	margin-top: 20px;
	text-align: center;
}

/* The role is body text in the original, not a heading: measured off the
   capture at Lato 400 / 16px / 1.6, against the name's Gotham 900 / 24px /
   1.3. That is exactly .t-text, so the caption carries the token rather than
   a bespoke rule here. */

/* ----------------------------------------------------------------- contact */

/* The original stacks the three contact items in a single centred column
   (measured: flex-direction column, 1170px wide). */

.contact { background: var(--light-shade); }

.contact__list {
	display: flex;
	flex-direction: column;
	text-align: center;
}

/* Measured item heights 291 / 223 / 156 with 16px between them. */
.contact { padding-bottom: 61px; }

.contact__item { padding: 0 0 57px; }

@media (max-width: 767px) {
	.contact { padding-bottom: 40px; }
	.contact__item { padding-bottom: 30px; }
}
.contact__item + .contact__item { margin-top: 16px; }

.contact__label { margin-bottom: 15px; }

.contact__value a { color: inherit; }

/* ------------------------------------------------------------------ footer */

/* Every value below is measured off the capture at 1440. One text line is
   16px x 1.6 = 25.6px, and the original's vertical rhythm is built from it:
   label and first day are consecutive lines, day groups are separated by one
   blank line, and the block gaps are whole multiples on top of that. */
.site-footer {
	position: relative;
	padding-top: 18px;
	padding-bottom: 24px;
	background: url("../img/bg-texture.jpg") repeat left top;
	--footer-line: calc(var(--text-size) * var(--text-lh));
}

/* Not centred: the mark sits on the left edge of the middle column. */
.site-footer__logo {
	display: block;
	width: 180px;
	height: auto;
	margin-left: calc((100% - 60px) / 3 + 30px);
	margin-bottom: 76px;
}

/* Row-major: three hours cells, then three content cells, so the second row
   shares one baseline across all columns. */
.site-footer__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 30px;
	row-gap: 81px;
}

/* Only the first hours cell carries the HORAIRES label; the other two start
   one line lower so all three day pairs align. */
.site-footer__cell--hours:not(:first-child) {
	padding-top: var(--footer-line);
}

.site-footer__label {
	font-weight: 700;
	margin-bottom: 0;
}

.site-footer__line { margin-bottom: 0; }

.site-footer__line a { color: inherit; }
.site-footer__line a:hover { opacity: .7; }

/* The original stacks the day over its hours — both are block-level spans on
   their own line, not a label/value pair sharing one line — and the day is
   bold while the hours are not. */
.site-footer__day,
.site-footer__time {
	display: block;
}
.site-footer__day { font-weight: 700; }

/* One blank line between the two day groups in a column. */
.site-footer__line--day + .site-footer__line--day {
	margin-top: var(--footer-line);
}

.site-footer__legal {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 30px;
	margin-top: 76px;
}

.site-footer__legal .site-footer__line {
	font-size: 12px;
	font-weight: 700;
	line-height: normal;
}

.site-footer__links { align-items: flex-start; }
.site-footer__links .nav__item { margin-bottom: 4px; }

.site-footer__link {
	color: var(--dark-shade);
	font-family: var(--font-text);
	font-size: var(--text-size);
}
.site-footer__link:hover { color: var(--dark-shade); opacity: .7; }

.site-footer__credit {
	margin-top: 75px;
	text-align: center;
	font-family: var(--font-text);
	font-size: 10px;
	font-weight: 700;
	line-height: normal;
}
.site-footer__credit a {
	color: inherit;
	font-weight: 700;
}

@media (max-width: 767px) {
	.site-footer__grid,
	.site-footer__legal { grid-template-columns: 1fr; }

	/* Once everything is in one column the 81px gap between the two desktop
	   rows would apply between all six cells; and the one-line offset that
	   lines the day pairs up under the HORAIRES label only makes sense while
	   they sit side by side. */
	.site-footer__grid { row-gap: 30px; }
	.site-footer__legal { row-gap: 30px; }
	.site-footer__cell--hours:not(:first-child) { padding-top: 0; }

	.site-footer__logo { margin-left: auto; margin-right: auto; }
}

/* ---------------------------------------------------------------- lightbox */

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5vh 5vw;
	background: rgba(6, 6, 6, .9);
}
.lightbox[hidden] { display: none; }

.lightbox__image {
	max-width: 100%;
	max-height: 90vh;
	object-fit: contain;
	border-radius: 5px;
}

.lightbox__close {
	position: absolute;
	top: 16px;
	right: 20px;
	width: 44px;
	height: 44px;
	background: none;
	border: 0;
	color: var(--light-shade);
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
}

/* ----------------------------------------------------------- cookie banner */

.cookie-banner {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 900;
	max-width: 340px;
	padding: 20px;
	background: var(--light-shade);
	border-radius: 5px;
	box-shadow: 0 6px 24px rgba(6, 6, 6, .18);
}
.cookie-banner[hidden] { display: none; }

.cookie-banner__text { margin-bottom: 15px; }

.cookie-banner__actions {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}

.cookie-banner__btn { padding: 8px 16px; }

@media (max-width: 479px) {
	.cookie-banner {
		right: 12px;
		left: 12px;
		max-width: none;
	}
}

/* ------------------------------------------------------------ promo popup */

/* Sits above the cookie banner (900) and the header: while the affiche is up
   it is the only thing on the page. */
.promo {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vh 20px;
}
.promo[hidden] { display: none; }

.promo__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(6, 6, 6, .78);
	opacity: 0;
	transition: opacity .35s ease;
}

/* Flex column so a tall affiche shrinks its own image rather than pushing the
   title and the button out of view. */
.promo__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 420px;
	max-height: 92vh;
	overflow: hidden;
	background: var(--light-shade);
	border-radius: 5px;
	box-shadow: 0 18px 50px rgba(6, 6, 6, .35);
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .35s cubic-bezier(.22, .61, .36, 1),
	            transform .35s cubic-bezier(.22, .61, .36, 1);
}

/* Entrance animations. Each modifier only sets the *closed* transform; they
   all land in the same place because .is-open resets it. These must stay
   ABOVE the .is-open rules — same specificity, so source order decides.
   The slug comes from ltdl_popup_animations() in functions.php. */
.promo--fade .promo__dialog { transform: none; }
.promo--slide-up .promo__dialog { transform: translateY(24px); }
.promo--slide-down .promo__dialog { transform: translateY(-24px); }
.promo--zoom .promo__dialog { transform: scale(.92); }

.promo--none .promo__dialog {
	transform: none;
	transition: none;
}
.promo--none .promo__backdrop { transition: none; }

.promo.is-open .promo__backdrop { opacity: 1; }
.promo.is-open .promo__dialog {
	opacity: 1;
	transform: none;
}

/* Dark disc so the close button reads over a photo and over the paper
   texture alike. */
.promo__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 36px;
	height: 36px;
	padding: 0;
	background: rgba(6, 6, 6, .55);
	border: 0;
	border-radius: 50%;
	color: var(--light-shade);
	font-family: var(--font-text);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease;
}
.promo__close:hover { background: var(--dark-accent); }

/* Fixed media box, so the dialog keeps its shape whatever the client uploads.
   The height comes from the box, never from the image's proportions: a 3840x2160
   landscape and a 930x1395 poster both produce a 420x732 affiche.

   Two limits, and the smaller wins. 4/5 is the intended shape and matches the
   portrait-or-square format the Customizer asks for; 50vh keeps the image from
   crowding out the text. At ordinary window heights the 50vh cap is the one that
   applies (450px against the ratio's 525px at a 900px viewport) — the ratio only
   takes over above roughly 1050px of viewport height. Both are independent of
   the image, which is the point.

   object-fit: cover fills the box without distorting. It does crop whatever does
   not match the box — switch to `contain` if the artwork must be shown whole, at
   the cost of bars against the background below. */
.promo__media {
	flex: 0 0 auto;
	width: 100%;
	aspect-ratio: 4 / 5;
	max-height: 50vh;
	overflow: hidden;
	background: var(--dark-shade);
}

.promo__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Same paper texture the sections carry, so the affiche belongs to the site
   even when the client's image does not. */
.promo__body {
	position: relative;
	flex: 0 1 auto;
	overflow-y: auto;
	padding: 28px 30px 32px;
	background: url("../img/bg-repeat.webp") repeat left top / 250px;
	text-align: center;
}

/* With no image behind it the close button would sit on the title, so the
   body opens lower. */
.promo__dialog--plain .promo__body { padding-top: 56px; }

.promo__title { margin-bottom: 12px; }

.promo__text p { margin: 0; }
.promo__text p + p { margin-top: 12px; }

.promo__btn { margin-top: 22px; }

@media (max-width: 479px) {
	.promo { padding: 20px 16px; }
	.promo__body { padding: 24px 20px 26px; }
}

@media (prefers-reduced-motion: reduce) {
	.promo__backdrop,
	.promo__dialog {
		opacity: 1;
		transform: none;
		transition: none;
	}
}