/* ==========================================================================
   CONTROL. landing page sections + motion system.
   Mobile-first; breakpoints 30em / 48em / 60em / 64em.

   ROUND 11 (2026-09-23): the site moved into Corentin's burgundy universe.
   Every section is dark now and carries one of the client's numbered grounds,
   handed to it inline by PHP through cp_fond_style() as --cp-fond, so the
   beige and wine alternation of round 6 went with the beige. The treatments
   his mockups share live in the foundations block: the ground, the
   highlighted line, the tag, the centred head. Everything section specific
   follows in page order.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Motion system.
   Reveals never fully hide content (partial opacity slivers) and JS adds a
   4s force-reveal net; without JS nothing is hidden at all.
   -------------------------------------------------------------------------- */

/* Scroll reveals, default: soft rise */
html.has-js .cp-reveal {
	opacity: 0.12;
	transform: translateY(28px);
	transition:
		opacity var(--cp-dur-reveal) var(--cp-ease-out),
		transform var(--cp-dur-reveal) var(--cp-ease-out);
	transition-delay: calc(var(--reveal-i, 0) * var(--cp-stagger));
}

html.has-js .cp-reveal.is-in {
	opacity: 1;
	transform: translateY(0);
}

/* Variant: heading lines glide up further (line-mask feel without full hide) */
html.has-js .cp-line.cp-reveal {
	transform: translateY(0.6em);
}

/* Hero intro cascade, plays once on load */
html.has-js .cp-intro {
	opacity: 0.1;
	transform: translateY(26px);
	transition:
		opacity var(--cp-dur-intro) var(--cp-ease-out),
		transform var(--cp-dur-intro) var(--cp-ease-out);
	transition-delay: calc(0.25s + var(--intro-i, 0) * 140ms);
}

html.has-js.cp-intro-go .cp-intro {
	opacity: 1;
	transform: translateY(0);
}

/* Force-reveal net: after 4s JS flips this on and everything settles */
html.cp-reveal-all .cp-reveal,
html.cp-reveal-all .cp-intro {
	opacity: 1 !important;
	transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
	/* The line variant is repeated because it out-specifies the base reset
	   (audit finding 14): it carries its own transform at (0,3,x). */
	html.has-js .cp-reveal,
	html.has-js .cp-intro,
	html.has-js .cp-line.cp-reveal {
		transform: none;
		transition-delay: 0s;
	}
}

/* --------------------------------------------------------------------------
   Round 11 foundations: the ground, the highlighted line, the tag.
   -------------------------------------------------------------------------- */

/* A section's ground is the client's numbered texture, set inline as
   --cp-fond. The colour underneath is the section token, so a ground that has
   not arrived yet, or fails to load, is still burgundy and never a hole. The
   longhands matter: .cp-section--dark sets the background shorthand in
   base.css, and these override it property by property from the later sheet. */
.cp-fond {
	position: relative;
	background-color: var(--cp-section-deep);
	background-image: var(--cp-fond);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.cp-fond > .cp-container {
	position: relative;
	z-index: 1;
}

/* THE HIGHLIGHTED LINE, the device every heading in his mockups carries: a
   translucent box a shade lighter than the ground, behind one run of display
   type. Inline, with the box cloned across breaks, so a line that wraps on a
   phone gets a box on each fragment instead of one slab around the block.
   Lighter over burgundy composites to the rose his boxes are. */
.cp-hl {
	display: inline;
	padding: 0.06em 0.3em;
	background: var(--cp-hl);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* The solid form, from the Evidences heading: cream box, burgundy type. The
   colour is declared with the dark section in the selector because that scope
   redirects every em to white, one class more specific than h1 em. */
.cp-hl--solid,
.cp-section--dark .cp-hl--solid {
	background: var(--cp-creme);
	color: var(--cp-bourgogne);
	font-style: italic;
	font-weight: 600;
}

/* The small filled label under a name ("Patisserie", "8 Postes"). */
.cp-tag {
	display: inline-block;
	margin: 0 0 var(--cp-s2);
	padding: 0.3em 0.85em;
	font-family: var(--cp-font-display);
	font-size: var(--cp-fs-body);
	line-height: 1.3;
	color: var(--cp-creme);
	background: var(--cp-cta);
	border-radius: 3px;
}

.cp-section-head--center {
	text-align: center;
}

.cp-section-head--center .cp-eyebrow {
	justify-content: center;
}

.cp-section-head--center .cp-h2 {
	margin-inline: auto;
	max-width: 24ch;
}

/* The first section of a section page starts under a fixed header that grew
   in round 11, and the section padding alone no longer clears it: at 390 the
   clamp gives 64px against a 92px bar, at 768 it gives 69 against 108, and
   the eyebrow was printing across the lockup's descriptor. Same arithmetic
   the two full bleed openings already carry. */
.cp-sectionpage > .cp-section:first-child {
	padding-top: calc(var(--cp-header-h) + var(--cp-s5));
}

/* --------------------------------------------------------------------------
   Hero: a still, with his headline set as type over it.

   Round 11 switched the motion layer off at the client's request and put the
   headline back, both explained in hero.php. The still fills the viewport,
   the copy sits centred on it: two lines of display serif each on its own
   box, the second stepped to the right, and the four tags under them. The
   veil under the copy is dark rather than light, for the reason recorded at
   .cp-regcard: a light wash over this red takes cream text under AA.
   -------------------------------------------------------------------------- */
.cp-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	padding-block: calc(var(--cp-header-h) + var(--cp-s5)) var(--cp-s6);
	/* Burgundy under everything, so any paint gap reads as the ground. */
	background: var(--cp-bourgogne);
	color: var(--cp-text-light);
}

.cp-hero__still {
	position: absolute;
	inset: 0;
}

.cp-hero__wall {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Slightly above centre: the photograph's faces sit in its upper half. */
	object-position: 50% 40%;
}

.cp-hero__still::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(40, 4, 14, 0.42) 0%, rgba(40, 4, 14, 0.18) 45%, rgba(40, 4, 14, 0.6) 100%);
}

.cp-hero__copy {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Two lines, the second stepped: an inline flex column takes the width of its
   widest line, so aligning the second to the end steps it right by exactly
   the difference, whatever the words are in either language. The extra
   inline margin keeps a step even when the two lines happen to measure
   nearly the same. */
.cp-hero__title {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.14em;
	margin: 0 0 var(--cp-s4);
	font-size: clamp(2.5rem, 8vw, 6.25rem);
	line-height: 1.02;
	letter-spacing: -0.015em;
	color: #fbf5ec;
}

.cp-hero__title .cp-line {
	display: block;
}

.cp-hero__line--step {
	align-self: flex-end;
	margin-inline-start: 1.2em;
}

.cp-hero__tags {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem 0.5rem;
	max-width: 34rem;
}

.cp-hero__tag {
	padding: 0.3em 0.8em;
	font-family: var(--cp-font-display);
	font-size: clamp(1rem, 1.9vw, 1.5rem);
	line-height: 1.2;
	color: #fbf5ec;
	background: rgba(60, 4, 22, 0.8);
	border-radius: 2px;
}

/* The motion layer, dormant since round 11 but kept wired. main.js picks the
   source by aspect and flips is-live only once playback has actually started,
   so the still never disappears under a stalled download. Reduced motion
   never gets the layer at all. */
.cp-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.6s var(--cp-ease-out);
}

.cp-hero__video.is-live {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.cp-hero__video {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   LES PREMIERS: copy left, the registration card right, on FOND 11.
   -------------------------------------------------------------------------- */

/* The mat rolls in from the lower left of FOND 11; anchoring the ground
   there keeps it in the picture on the shapes this section takes. */
.cp-waitlist {
	background-position: 35% 60%;
}

.cp-waitlist__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cp-s6);
}

@media (min-width: 64em) {
	.cp-waitlist__grid {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
		column-gap: var(--cp-s7);
		align-items: center;
	}
}

.cp-waitlist__lead .cp-h2 {
	max-width: 20ch;
}

.cp-waitlist__sub {
	color: var(--cp-text-light-muted);
	font-size: var(--cp-fs-lead);
	line-height: 1.7;
	max-width: 38ch;
}

/* THE REGISTRATION CARD, AS HIS MOCKUP DRAWS IT. A solid near-black red
   sheet (#3c0101, measured), square-cornered, resting on a second, paler
   sheet turned a couple of degrees; inside it a small line of welcome, three
   narrow ivory fields stacked with the prompt written inside each, the
   question in the display face, and the answers as ivory pills. The first
   build had beige fields, captions above them, two fields side by side and
   outlined pills, and read as a generic form on his ground (Daffa,
   2026-09-23). Ivory on this card is deliberate: the fields are the one
   light object in the section and that is what makes the card legible as a
   form from across the room. Ink on ivory: 15:1. */
.cp-regcard {
	position: relative;
	z-index: 1;
	background: var(--cp-regcard);
	border: 0;
	border-radius: var(--cp-radius);
	padding: clamp(1.5rem, 3.5vw, 2.75rem);
	box-shadow: 0 30px 60px -32px rgba(0, 0, 0, 0.7);
	color: var(--cp-text-light);
}

/* THE SHEETS UNDER THE CARD, three of them, read off his mockup: a pale one
   above, tilted a couple of degrees clockwise and overhanging the left; a
   brighter, narrower one below, tilted the same way and reaching further
   out; a faint one to the right. Translucent, so the fabric shows through
   them the way tracing paper would. Offsets in rem rather than per cent so
   a tall card does not throw its sheets further than a short one. */
.cp-waitlist__formwrap {
	position: relative;
}

.cp-regcard__sheets {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.cp-regcard__sheets i {
	position: absolute;
	inset: 0;
	border-radius: var(--cp-radius);
	background: rgba(255, 232, 224, 0.12);
	transform: translate(-0.6rem, -1.1rem) rotate(2.4deg);
	transform-origin: 50% 50%;
}

.cp-regcard__sheets i:nth-child(2) {
	right: 18%;
	background: rgba(255, 226, 216, 0.17);
	transform: translate(-1.1rem, 1.6rem) rotate(2.8deg);
	transform-origin: 0 100%;
}

.cp-regcard__sheets i:nth-child(3) {
	left: 40%;
	background: rgba(255, 232, 224, 0.06);
	transform: translate(1.2rem, 0.8rem) rotate(-1.6deg);
	transform-origin: 100% 100%;
}

/* The sheets may poke past the container on a phone; clip the section rather
   than widen the document. */
.cp-waitlist {
	overflow-x: clip;
}

@media (prefers-reduced-motion: no-preference) {
	.cp-regcard__sheets i {
		transition: transform 0.6s var(--cp-ease-out);
	}
}

.cp-regcard__title {
	margin: 0 0 var(--cp-s3);
	font-family: var(--cp-font-display);
	font-weight: 400;
	font-size: 1.1rem;
	line-height: 1.3;
	color: var(--cp-peach);
}

/* His fields: ivory, softly rounded, the prompt inside in the display italic,
   and narrower than the card so the card keeps air on its right, which is
   how his sheet is composed. Full width again where the card is narrow. */
.cp-regcard .cp-field__input {
	max-width: 22rem;
	min-height: 2.75rem;
	padding: 0.55rem 0.95rem;
	background: var(--cp-field-bg);
	border: 1px solid rgba(60, 1, 1, 0.14);
	border-radius: 7px;
	color: var(--cp-ink);
	font-family: var(--cp-font-display);
	font-size: 1.05rem;
}

.cp-regcard .cp-field__input::placeholder {
	color: var(--cp-taupe);
	font-style: italic;
	opacity: 1;
}

.cp-regcard .cp-field__input:focus {
	background: #ffffff;
	border-color: var(--cp-cta);
	box-shadow: 0 0 0 3px rgba(161, 27, 71, 0.28);
}

.cp-regcard__ask {
	padding: 0;
	margin-bottom: 0.75rem;
	font-family: var(--cp-font-display);
	font-size: 1.05rem;
	color: var(--cp-peach);
}

.cp-regcard .cp-pill span {
	min-height: 2.5rem;
	padding: 0.4rem 1.15rem;
	background: var(--cp-field-bg);
	border: 1px solid transparent;
	border-radius: 7px;
	font-family: var(--cp-font-display);
	font-style: italic;
	font-size: 1rem;
	color: var(--cp-taupe);
}

/* The chosen answer takes the Rejoindre red: on this dark card a burgundy
   pill would vanish, and his mockup shows no chosen state at all. */
.cp-regcard .cp-pill input:checked + span {
	background: var(--cp-cta);
	border-color: var(--cp-cta);
	color: #ffffff;
}

.cp-regcard .cp-pill input:focus-visible + span {
	outline: 2px solid var(--cp-field-bg);
	outline-offset: 3px;
}

.cp-regcard .cp-check {
	color: var(--cp-text-light-muted);
}

.cp-form__row {
	margin-bottom: var(--cp-s3);
}

.cp-form__row--split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cp-s3);
}

@media (min-width: 30em) {
	.cp-form__row--split {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.cp-form__row--submit {
	margin-top: var(--cp-s4);
	margin-bottom: 0;
}

.cp-form-success {
	border: 1px solid rgba(244, 236, 226, 0.3);
	border-radius: var(--cp-radius);
	padding: clamp(2rem, 5vw, 3.5rem);
}

.cp-form-success__dot {
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--cp-peach);
	margin-bottom: var(--cp-s3);
}

.cp-form-success__title {
	font-size: var(--cp-fs-h2);
	margin-bottom: var(--cp-s2);
}

.cp-form-success__text {
	color: var(--cp-text-light-muted);
	max-width: 44ch;
	margin: 0;
}

/* --------------------------------------------------------------------------
   The partners: one editorial block each, image and card alternating sides.
   Serves LE CHOIX DE L'EXCELLENCE on the homepage (FOND 5, portrait card
   photographs, a button) and the Partenaires page (FOND 6, landscape plates,
   two paragraphs, no button). The markup is partner.php in both places.

   THE PHOTOGRAPH OVERLAPS THE CARD, tilted a degree and a half and lifted by
   its shadow, which is what makes his blocks read as pinned to the page
   rather than as two columns. The tilt exists only where there is room for
   it: stacked on a phone the picture sits square above its card and the card
   tucks under it instead.
   -------------------------------------------------------------------------- */
.cp-supp {
	/* The tilt and the overlap poke past the container's edge by a few
	   pixels at the grid's rim; clip it rather than widen the document. */
	overflow-x: clip;
}

.cp-partners {
	display: grid;
	gap: clamp(3rem, 7vw, 5.5rem);
}

.cp-partner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.cp-partner__shot {
	position: relative;
	z-index: 1;
	width: min(100%, 22rem);
	margin: 0 auto;
	border-radius: var(--cp-radius-card);
	overflow: hidden;
	box-shadow: 0 26px 54px -26px rgba(0, 0, 0, 0.75);
}

.cp-partner__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* One shape for all five, declared rather than inherited from whichever
	   file is there: Chiara's replacement plate was 1055x1491 where the others
	   are 1000x1450, and inheriting the ratio left one card shorter than its
	   row. The crop it costs that file is 1.27 per cent a side of backdrop. */
	aspect-ratio: 1000 / 1450;
}

.cp-partner--page .cp-partner__shot {
	width: min(100%, 34rem);
}

.cp-partner--page .cp-partner__shot img {
	aspect-ratio: 1428 / 1101;
}


/* The card is LIGHTER than its ground, on both pages: measured on his
   mockups at #6b0521 over #36010f (Partenaires) and about #6e1430 over
   #3a0210 (homepage). The first build used the translucent dark card here,
   which read on FOND 5 and vanished on FOND 6, and the two pages then looked
   like two different designs (Daffa, 2026-09-23). One token now. */
.cp-partner__card {
	margin-top: -2rem;
	padding: calc(clamp(1.5rem, 4vw, 3rem) + 2rem) clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
	background: var(--cp-card-raised);
	border-radius: var(--cp-radius-card);
	color: var(--cp-text-light);
}

.cp-partner__name {
	margin: 0 0 var(--cp-s2);
	font-size: var(--cp-fs-exp);
	line-height: 1.12;
}

.cp-partner__lead {
	margin: 0 0 var(--cp-s3);
	font-family: var(--cp-font-display);
	font-style: italic;
	font-size: var(--cp-fs-lead);
	line-height: 1.4;
	color: var(--cp-creme);
}

.cp-partner__text {
	margin: 0;
	font-size: var(--cp-fs-body);
	line-height: 1.75;
	color: var(--cp-text-light-muted);
}

.cp-partner__text + .cp-partner__text {
	margin-top: var(--cp-s3);
}

.cp-partner__cta {
	margin-top: var(--cp-s3);
}

@media (min-width: 60em) {
	/* His homepage block, measured: the photograph takes 34 per cent of the
	   row and the card 62, the card shorter than the photograph and centred
	   on it. The first build gave the photograph 40 per cent, which at 1440
	   made it 480 by 700 and the card a footnote beside it. */
	.cp-partner {
		grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
		align-items: center;
	}

	.cp-partner__shot {
		grid-column: 1;
		grid-row: 1;
		width: 100%;
		margin: 0 -1.5rem 0 0;
		transform: rotate(-1.5deg);
	}

	.cp-partner__card {
		grid-column: 2;
		grid-row: 1;
		margin: 0;
		padding: clamp(2rem, 4vw, 3.5rem);
		padding-inline-start: calc(clamp(2rem, 4vw, 3.5rem) + 1.5rem);
	}

	.cp-partner--flip {
		grid-template-columns: minmax(0, 66fr) minmax(0, 34fr);
	}

	.cp-partner--flip .cp-partner__shot {
		grid-column: 2;
		margin: 0 0 0 -1.5rem;
		transform: rotate(1.5deg);
	}

	.cp-partner--flip .cp-partner__card {
		grid-column: 1;
		padding-inline: clamp(2rem, 4vw, 3.5rem) calc(clamp(2rem, 4vw, 3.5rem) + 1.5rem);
	}

	/* A landscape plate wants nearer to half the row than a portrait one. */
	.cp-partner--page {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	}

	.cp-partner--page.cp-partner--flip {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cp-partner__shot,
	.cp-partner--flip .cp-partner__shot {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   TOUT EXISTAIT DEJA. SAUF CONTROL. Three photograph cards under a centred
   heading, on FOND 10. One card is lit; the others wait under a burgundy
   veil until the pointer reaches them. Where there is no pointer, nothing is
   veiled, because a card that can never be lit is text nobody can read.
   -------------------------------------------------------------------------- */
.cp-positioning__head {
	max-width: 46rem;
	margin: 0 auto clamp(2.5rem, 6vw, 4rem);
	text-align: center;
}

.cp-positioning__head .cp-eyebrow {
	justify-content: center;
}

/* Peach for the first line, cream for "sauf", the brush mark white and a
   size up, which is the lockup on his card: the wordmark is the second line's
   whole weight. */
.cp-positioning__title {
	max-width: none;
	margin-inline: auto;
	font-size: var(--cp-fs-display);
	line-height: 1.08;
	color: var(--cp-peach);
}

.cp-positioning__title .cp-line {
	display: block;
}

.cp-positioning__l2 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
}

.cp-positioning__except {
	font-size: 0.5em;
	color: var(--cp-creme);
}

.cp-positioning__l2 .cp-h2__mark {
	height: 1.35em;
	margin-inline-start: 0;
}

.cp-positioning__sub {
	max-width: 52ch;
	margin-inline: auto;
	color: var(--cp-text-light-muted);
	font-size: var(--cp-fs-lead);
	line-height: 1.7;
}

/* Stacked and capped until there is room for three abreast: at 768 three
   columns gave each card 210px, and her paragraph filled the card to its
   edges. 60em is where a card gets the 290px it reads comfortably at. */
.cp-pos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cp-s4);
	max-width: 26rem;
	margin-inline: auto;
}

@media (min-width: 60em) {
	.cp-pos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(1rem, 2.5vw, 2rem);
		align-items: start;
		max-width: none;
	}
}

.cp-pos__card {
	position: relative;
	aspect-ratio: 3 / 4.4;
	border: 2px solid transparent;
	border-radius: 6px;
	overflow: hidden;
	transition: border-color 0.45s var(--cp-ease-out);
}

/* cp_visual()'s frame fills the card. The radius belongs to the card. */
.cp-pos__visual {
	position: absolute;
	inset: 0;
	border-radius: 0;
}

.cp-pos__visual .cp-visual__img,
.cp-pos__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The ramp that makes the type readable over any photograph she sends:
   almost nothing at the top, deep at the foot where the paragraph sits. */
.cp-pos__card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(40, 4, 14, 0.2) 0%, rgba(40, 4, 14, 0.25) 40%, rgba(40, 4, 14, 0.92) 100%);
	pointer-events: none;
}

/* The veil, opacity 0 at rest; only a hover-capable device raises it. */
.cp-pos__card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: rgba(82, 14, 31, 0.62);
	opacity: 0;
	transition: opacity 0.45s var(--cp-ease-out);
	pointer-events: none;
}

.cp-pos__text {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: clamp(1.25rem, 3vw, 2rem);
	color: var(--cp-text-light);
}

.cp-pos__title {
	margin: 0;
	font-size: var(--cp-fs-h3);
	line-height: 1.15;
}

.cp-pos__body {
	margin: 0;
	max-width: 30ch;
	font-size: var(--cp-fs-small);
	line-height: 1.55;
	color: var(--cp-text-light);
}

@media (hover: hover) {
	.cp-pos__card:not(.is-lit)::after,
	.cp-pos:hover .cp-pos__card::after {
		opacity: 1;
	}

	.cp-pos:hover .cp-pos__card:hover::after {
		opacity: 0;
	}

	.cp-pos__card.is-lit,
	.cp-pos:hover .cp-pos__card:hover {
		border-color: var(--cp-peach);
	}

	.cp-pos:hover .cp-pos__card:not(:hover) {
		border-color: transparent;
	}
}

/* --------------------------------------------------------------------------
   The countdown, on FOND 9, the section that ends every page.

   THE FILE IS SPLIT IN TWO AND THE LETTERING IS IN THE FLOW. FOND 9 is a
   1920 square: burgundy ground for its top half, the chrome "Control." from
   row 968 down. That row was measured on the file; the lettering starts at
   50.4% of the height, not the "about a third" this block once assumed, and
   that guess is why the copy sat on the letters at every width from 1024 up.
   So fond-09.webp now holds rows 0 to 967 as the ground behind the copy,
   fitted to the width and anchored to the box's bottom edge, and
   fond-09-mark.webp holds rows 968 to 1919 as a plain <img> after it, full
   width. It cannot overlap the copy because it comes after the copy in the
   flow, with or without the form; the seam is the file's own row 967
   meeting row 968 at the same scale. Above the ground file, on the tall
   variants, the colour is the file's top row, measured, so the gradient
   continues upward. No crop on phones either: the whole mark, edge to edge.
   -------------------------------------------------------------------------- */
.cp-count {
	padding-block: 0;
	/* The file's bottom edge, measured, in case a subpixel shows under the mark. */
	background: #250303;
	text-align: center;
}

.cp-count__ground {
	padding-top: var(--cp-section-pad);
	padding-bottom: clamp(2rem, 4vw, 3.5rem);
	/* Measured: the mean of the file's top eight rows is #520d20. */
	background-color: #520d20;
	background-size: 100% auto;
	background-position: center bottom;
}

.cp-count__mark {
	display: block;
	width: 100%;
	margin: 0;
}

.cp-count__mark img {
	display: block;
	width: 100%;
	height: auto;
}

.cp-count__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.cp-count__title {
	max-width: none;
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
	color: var(--cp-peach);
}

.cp-count__clock {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.6rem, 2vw, 1.5rem);
	width: min(100%, 44rem);
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.cp-count__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
}

.cp-count__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1.15;
	border: 1px solid rgba(225, 51, 72, 0.55);
	border-radius: 12px;
	background: rgba(20, 0, 6, 0.72);
	font-family: var(--cp-font-sans);
	font-weight: 600;
	font-size: clamp(1.6rem, 5vw, 3.6rem);
	font-variant-numeric: tabular-nums;
	color: var(--cp-peach);
}

/* The seconds arrive through a blur, his mockup's one hint of motion.
   Re-triggered by main.js on every change; reduced motion never sees it.
   ON THE DIGITS ONLY: the box around them holds still. The first build put
   the class on the box and the whole tile blinked every second. */
.cp-count__digits {
	display: inline-block;
}

@keyframes cp-tick {
	from { filter: blur(6px); opacity: 0.4; }
	to { filter: blur(0); opacity: 1; }
}

.cp-count__digits.is-tick {
	animation: cp-tick 0.45s var(--cp-ease-out);
}

@media (prefers-reduced-motion: reduce) {
	.cp-count__digits.is-tick {
		animation: none;
	}
}

.cp-count__label {
	font-family: var(--cp-font-display);
	font-size: clamp(0.95rem, 2vw, 1.5rem);
	color: var(--cp-creme);
}

.cp-count__line {
	max-width: 34ch;
	margin: 0 auto;
	font-family: var(--cp-font-display);
	font-size: var(--cp-fs-lead);
	line-height: 1.5;
	color: var(--cp-creme);
}

.cp-count__line--where {
	margin-top: var(--cp-s3);
}

/* --------------------------------------------------------------------------
   La Vision: the opening on FOND 7, held still, the statement over it.
   -------------------------------------------------------------------------- */
.cp-vision {
	display: flex;
	align-items: center;
	min-height: 100vh;
	min-height: 100svh;
	padding-top: calc(var(--cp-header-h) + var(--cp-s5));
	background-position: center 35%;
}

.cp-vision::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(40, 4, 14, 0.42) 0%, rgba(40, 4, 14, 0.2) 45%, rgba(40, 4, 14, 0.62) 100%);
}

/* Centred on the page like the homepage headline, the block itself
   ragged left with its second line stepped, which is his composition. */
.cp-vision__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.cp-vision__inner .cp-eyebrow {
	justify-content: center;
}

.cp-vision__title {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.1em;
	max-width: 24ch;
	margin: 0;
	font-size: clamp(2rem, 5vw, 4.25rem);
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: #fbf5ec;
}

.cp-vision__title .cp-line {
	display: block;
}

.cp-vision__line--step {
	align-self: flex-end;
	margin-inline-start: 1.5em;
}

/* --------------------------------------------------------------------------
   La Vision, the article: her three paragraphs, the Founder, the closing
   line, in one measured column on FOND 12. The plate that stood beside the
   copy left with the composition it belonged to.
   -------------------------------------------------------------------------- */
.cp-concept {
	overflow: clip;
}

.cp-concept__ghost {
	top: 0.05em;
	right: -0.06em;
}

.cp-concept__col {
	max-width: 58ch;
	margin-inline: auto;
}

.cp-concept__manifesto .cp-line {
	display: block;
}

/* Body size, not lead: at 20.8px against the 16px of every other page the
   same reader met two body sizes moving between them. */
.cp-concept__body {
	color: var(--cp-text-light-muted);
	font-size: var(--cp-fs-body);
	line-height: 1.8;
}

.cp-concept__body p + p {
	margin-top: var(--cp-s3);
}

/* The Founder's quote. Display face, larger than the body it interrupts, so
   it reads as the pull quote of an interview rather than one more paragraph. */
.cp-concept__quote {
	margin: var(--cp-s5) 0 0;
}

@media (min-width: 64em) {
	.cp-concept__quote {
		margin-left: 8%;
	}
}

.cp-concept__quote blockquote {
	margin: 0;
}

.cp-concept__quote p {
	font-family: var(--cp-font-display);
	font-size: var(--cp-fs-h3);
	font-style: italic;
	line-height: 1.34;
	color: var(--cp-text-light);
	margin: 0;
}

/* Quotation marks from the stylesheet, not from the copy, so one rule serves
   both languages: French takes the guillemets with their inner no break
   spaces, English the curly doubles, and the PHP source stays ASCII. */
.cp-concept__quote p {
	quotes: "\201C" "\201D";
}

.cp-concept__quote:lang(fr) p {
	quotes: "\00AB\00A0" "\00A0\00BB";
}

.cp-concept__quote p::before {
	content: open-quote;
}

.cp-concept__quote p::after {
	content: close-quote;
}

/* The mark sits inside an italic line, so it needs its own nudge rather than
   .cp-h2__mark: the italic slants the letters around it and the brush script
   does not slant, so matching the cap height alone reads as a stumble. */
.cp-quote__mark {
	display: inline-block;
	height: 1.05em;
	width: auto;
	vertical-align: -0.1em;
}

.cp-concept__quote figcaption {
	margin-top: var(--cp-s2);
	font-size: var(--cp-fs-eyebrow);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cp-text-light-muted);
}

.cp-concept__coda {
	margin-top: var(--cp-s5);
	max-width: 52ch;
	color: var(--cp-text-light-muted);
	font-size: var(--cp-fs-body);
	line-height: 1.8;
}

@media (min-width: 64em) {
	.cp-concept__coda {
		margin-left: 8%;
	}
}

/* --------------------------------------------------------------------------
   Marquee divider, the carriage glide. Deep burgundy since round 11: it was
   the one beige band left on a page that no longer has beige.
   -------------------------------------------------------------------------- */
.cp-marquee {
	overflow: hidden;
	border-block: 1px solid rgba(244, 236, 226, 0.14);
	padding-block: var(--cp-s3);
	background: var(--cp-bourgogne-deep);
}

.cp-marquee__track {
	display: flex;
	width: max-content;
	animation: cp-marquee 36s linear infinite;
}

.cp-marquee__group {
	display: flex;
	align-items: baseline;
	flex: 0 0 auto;
}

.cp-marquee__item {
	font-family: var(--cp-font-display);
	font-size: var(--cp-fs-marquee);
	white-space: nowrap;
	padding-inline: 0.6em 0.15em;
	color: var(--cp-creme);
}

.cp-marquee__dot {
	font-family: var(--cp-font-display);
	font-size: var(--cp-fs-marquee);
	color: var(--cp-peach);
}

@keyframes cp-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.cp-marquee__track {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   Les Evidences: his "Activites" layout on FOND 3. The statement, then the
   seven experiences as bordered cards, photograph on one side and the words
   on the other, sides swapping down the page. His cards are white; hers are
   the section's own dark card with the same cream hairline, because she asked
   for FOND 3 in place of his white ground and a white card on it would have
   been the one light object on the site.
   -------------------------------------------------------------------------- */
/* No measure cap: at 22ch the second line broke into two highlight boxes at
   1440 ("Rester pour toutes les" / "autres."), where his mockup sets it on
   one. Below about 1024 it wraps on its own, one box per line. */
.cp-experiences .cp-section-head .cp-h2 {
	max-width: none;
}

.cp-exp {
	display: grid;
	gap: clamp(1.5rem, 4vw, 2.5rem);
}

/* The same raised card as the partner blocks, no hairline: one card
   treatment across the site (Daffa, 2026-09-23). The translucent dark card
   this used to be sat fine on FOND 3 but was a second, different card next
   to the partner pages. */
.cp-exp__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	border-radius: var(--cp-radius-card);
	background: var(--cp-card-raised);
	overflow: hidden;
}

.cp-exp__shot {
	display: grid;
	margin: 0;
}

/* The file's own ratio while stacked, so nothing is cropped; stretched to
   the card's height beside the words, where a photograph and its caption at
   two heights would read as a table. object-fit covers either way, since a
   Customizer upload can be any shape. */
.cp-exp__shot .cp-visual {
	width: 100%;
	aspect-ratio: 1428 / 1101;
	border-radius: 0;
}

.cp-exp__say {
	padding: clamp(1.5rem, 4vw, 3rem);
	color: var(--cp-text-light);
}

.cp-exp__title {
	margin: 0 0 var(--cp-s2);
	font-size: var(--cp-fs-exp);
	line-height: 1.12;
}

/* The brand's own full stop, the same device as the wordmark, the only
   accent on the card. */
.cp-exp__dot {
	color: var(--cp-peach);
}

/* Her two line tagline splits between the tag and the line under it: the
   first line is the filled label of his card, the second stays her italic. */
.cp-exp__kick {
	margin: 0 0 var(--cp-s2);
	font-family: var(--cp-font-display);
	font-style: italic;
	font-size: var(--cp-fs-lead);
	line-height: 1.35;
	color: var(--cp-creme);
}

.cp-exp__text {
	margin: 0;
	font-size: var(--cp-fs-body);
	line-height: 1.75;
	color: var(--cp-text-light-muted);
}

@media (min-width: 60em) {
	.cp-exp__row {
		grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
		align-items: stretch;
	}

	.cp-exp__shot {
		grid-column: 1;
		grid-row: 1;
	}

	.cp-exp__shot .cp-visual {
		aspect-ratio: auto;
		height: 100%;
		min-height: 22rem;
	}

	.cp-exp__say {
		grid-column: 2;
		grid-row: 1;
		align-self: center;
	}

	.cp-exp__row:nth-child(even) {
		grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
	}

	.cp-exp__row:nth-child(even) .cp-exp__shot {
		grid-column: 2;
	}

	.cp-exp__row:nth-child(even) .cp-exp__say {
		grid-column: 1;
	}
}

/* --------------------------------------------------------------------------
   The wordmark set inside a heading, the client's standing rule that
   "CONTROL." be shown as the logo rather than as typed letters.

   Sized in em so it tracks the heading's own clamp, and 1.15em rather than
   1em because the brush script draws far smaller than its box. width auto
   against an explicit height, and the intrinsic attributes stay on the img,
   so the row reserves its space before the webp arrives.
   -------------------------------------------------------------------------- */
.cp-h2__mark {
	display: inline-block;
	height: 1.15em;
	width: auto;
	vertical-align: -0.12em;
	margin-inline-start: 0.12em;
}

.cp-h2__mark:first-child {
	margin-inline-start: 0;
}

/* --------------------------------------------------------------------------
   Collaborations band of the frozen v2 draft. Kept because /v2/ still
   renders collaborations.php; nothing on v1 uses these.
   -------------------------------------------------------------------------- */
.cp-collabs__lead {
	max-width: 54ch;
	margin: var(--cp-s3) 0 0;
	color: var(--cp-text-muted);
	font-size: var(--cp-fs-lead);
	line-height: 1.6;
}

.cp-collabs__grid {
	list-style: none;
	margin: var(--cp-s6) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--cp-border-light);
	border: 1px solid var(--cp-border-light);
}

@media (min-width: 48em) {
	.cp-collabs__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.cp-collabs__partner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.4rem;
	padding: var(--cp-s5) var(--cp-s3);
	background: var(--cp-plaster);
}

.cp-collabs__logo {
	display: block;
	width: 100%;
	max-width: 9rem;
	height: 2.75rem;
	margin-bottom: var(--cp-s2);
	background-color: var(--cp-ink);
	-webkit-mask: var(--logo) center / contain no-repeat;
	mask: var(--logo) center / contain no-repeat;
	opacity: 0.55;
	transition: opacity var(--cp-dur-ui) var(--cp-ease-out);
}

.cp-collabs__partner:hover .cp-collabs__logo,
.cp-collabs__partner:focus-within .cp-collabs__logo {
	opacity: 1;
}

.cp-collabs__name {
	font-size: var(--cp-fs-small);
	font-weight: 600;
	letter-spacing: 0.01em;
}

.cp-collabs__role {
	font-size: var(--cp-fs-eyebrow);
	color: var(--cp-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.cp-collabs__pending {
	margin: var(--cp-s4) 0 0;
	text-align: center;
	font-family: var(--cp-font-display);
	font-style: italic;
	font-size: var(--cp-fs-small);
	color: var(--cp-text-muted);
}