/* Theme of 366 Ladies, loaded after Bootstrap.
   The public pages are wrapped in .ladies (with data-bs-theme="dark") : every rule stays under it, the signed-in area keeps
   the plain Bootstrap of atom. Black, white and one colour : the fuchsia of the logo. The portraits are black and white. */

/* The two typefaces of the site, served from this folder (no call to another site). Licences : fonts/OFL-*.txt */
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 200;
	font-display: swap;
	src: url(fonts/poppins-200.woff2) format("woff2");
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url(fonts/poppins-300.woff2) format("woff2");
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/poppins-400.woff2) format("woff2");
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(fonts/poppins-600.woff2) format("woff2");
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-weight: 400 500;
	font-display: swap;
	src: url(fonts/cormorant-garamond-italic.woff2) format("woff2");
}

.ladies {
	--ladies-pink: #f200ec;
	--ladies-pink-dark: #c800c3;
	--ladies-bg: #070707;
	--ladies-surface: #111111;
	--ladies-line: rgba(255, 255, 255, 0.12);
	--ladies-text: #f4f4f4;
	--ladies-muted: #a3a3a3;
	--bs-body-bg: var(--ladies-bg);
	--bs-body-color: var(--ladies-text);
	--bs-secondary-color: var(--ladies-muted);
	--bs-border-color: var(--ladies-line);
	--bs-link-color-rgb: 242, 0, 236;
	--bs-link-hover-color-rgb: 255, 92, 251;
	background-color: var(--ladies-bg);
	color: var(--ladies-text);
	font-family: "Poppins", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

.ladies ::selection {
	background: var(--ladies-pink);
	color: #ffffff;
}

.text-fuchsia { color: #f200ec; }
.bg-fuchsia { background-color: #f200ec; }

.ladies-w-800 { max-width: 800px; }
.ladies-w-860 { max-width: 860px; }
.ladies-w-960 { max-width: 960px; }
.ladies-justify { text-align: justify; }
.ladies-muted { color: var(--ladies-muted); }

/* TYPE : wide capitals, light weight, as on the logo */

.ladies-eyebrow {
	margin-bottom: 1rem;
	color: var(--ladies-pink);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
}

.ladies-display {
	margin-bottom: 1.25rem;
	font-size: clamp(2.6rem, 8vw, 6.5rem);
	font-weight: 200;
	letter-spacing: 0.08em;
	line-height: 1.02;
	text-transform: uppercase;
}

.ladies-display-sm {
	font-size: clamp(2.2rem, 5vw, 4rem);
}

.ladies-title {
	margin-bottom: 1.25rem;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	font-weight: 300;
	letter-spacing: 0.04em;
	line-height: 1.2;
}

.ladies-subtitle {
	margin-bottom: 2rem;
	color: var(--ladies-muted);
	font-size: 1.1rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}

.ladies .lead {
	color: #dcdcdc;
	font-weight: 300;
}

.ladies-link {
	border-bottom: 1px solid var(--ladies-pink);
	padding-bottom: 0.35rem;
	color: var(--ladies-text);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 0.2s;
}

.ladies-link:hover {
	color: var(--ladies-pink);
}

/* BUTTONS AND FIELDS : square, capitals */

.ladies .btn {
	--bs-btn-border-radius: 0;
	--bs-btn-padding-x: 1.6rem;
	--bs-btn-padding-y: 0.85rem;
	--bs-btn-font-size: 0.8rem;
	--bs-btn-font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ladies .btn-lg {
	--bs-btn-padding-x: 2.2rem;
	--bs-btn-padding-y: 1.1rem;
	--bs-btn-font-size: 0.85rem;
}

.ladies .btn-sm {
	--bs-btn-padding-x: 1.1rem;
	--bs-btn-padding-y: 0.55rem;
	--bs-btn-font-size: 0.7rem;
}

.ladies .btn-primary {
	--bs-btn-color: #ffffff;
	--bs-btn-bg: var(--ladies-pink);
	--bs-btn-border-color: var(--ladies-pink);
	--bs-btn-hover-color: #ffffff;
	--bs-btn-hover-bg: var(--ladies-pink-dark);
	--bs-btn-hover-border-color: var(--ladies-pink-dark);
	--bs-btn-active-color: #ffffff;
	--bs-btn-active-bg: var(--ladies-pink-dark);
	--bs-btn-active-border-color: var(--ladies-pink-dark);
	--bs-btn-focus-shadow-rgb: 242, 0, 236;
	--bs-btn-disabled-bg: var(--ladies-pink);
	--bs-btn-disabled-border-color: var(--ladies-pink);
}

.ladies .form-label {
	margin-bottom: 0.4rem;
	color: var(--ladies-muted);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.ladies .form-control,
.ladies .form-select {
	border-color: var(--ladies-line);
	border-radius: 0;
	padding: 0.9rem 1rem;
	background-color: rgba(255, 255, 255, 0.04);
	color: var(--ladies-text);
}

.ladies .form-select {
	padding-right: 2.25rem;
}

.ladies .form-control:focus,
.ladies .form-select:focus {
	border-color: var(--ladies-pink);
	box-shadow: 0 0 0 0.2rem rgba(242, 0, 236, 0.2);
}

.ladies .form-select option {
	background-color: #151515;
	color: var(--ladies-text);
}

.ladies .modal-content {
	border: 1px solid var(--ladies-line);
	border-radius: 0;
	background-color: var(--ladies-surface);
}

.ladies .modal-header,
.ladies .modal-footer {
	border: 0;
}

.ladies .modal-title {
	font-weight: 300;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* TOP BAR : transparent over the banner of the home page, solid once the page is scrolled and on the other pages */

/* the bar has one height, on every page and whether the page is scrolled or not : only its background changes */
.ladies-navbar {
	min-height: 76px;
	border-bottom: 1px solid transparent;
	padding-top: 0.9rem;
	padding-bottom: 0.9rem;
	transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
}

.ladies-navbar.scroll {
	border-bottom-color: var(--ladies-line);
	background-color: rgba(7, 7, 7, 0.82);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.ladies-navbar .navbar-brand img {
	display: block;
	height: auto;
}

.ladies-navbar .nav-link {
	--bs-nav-link-color: rgba(255, 255, 255, 0.75);
	--bs-navbar-active-color: #ffffff;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.ladies-navbar .nav-link.active {
	box-shadow: inset 0 -1px 0 var(--ladies-pink);
}

.ladies-navbar .navbar-toggler {
	border: 0;
	border-radius: 0;
	background-color: var(--ladies-pink);
}

@media (max-width: 991.98px) {
	.ladies-navbar .navbar-collapse {
		margin: 0.75rem -0.75rem -0.9rem;
		padding: 0.5rem 1.25rem 1rem;
		background-color: rgba(7, 7, 7, 0.96);
	}

	.ladies-navbar .nav-link.active {
		box-shadow: none;
		color: var(--ladies-pink);
	}
}

/* HERO of the home page */

.ladies-hero .carousel-item {
	height: min(92vh, 860px);
	min-height: 560px;
	background-color: #000000;
	background-position: 62% 30%;
	background-size: cover;
}

.ladies-hero .carousel-item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0) 70%), linear-gradient(0deg, var(--ladies-bg) 0%, rgba(7, 7, 7, 0) 30%);
}

.ladies-hero .carousel-caption {
	color: #ffffff; /* Bootstrap turns the captions black under data-bs-theme="dark" */
	left: 0;
	right: 0;
	bottom: 16%;
	z-index: 2;
	padding: 0;
}

.ladies-hero-text {
	max-width: 34rem;
	margin-bottom: 2rem;
	color: #e6e6e6;
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	font-weight: 300;
}

.ladies [data-ladies-banner="1"] { background-image: url(../../../datas/banners/1.jpg); }
.ladies [data-ladies-banner="2"] { background-image: url(../../../datas/banners/2.jpg); }
.ladies [data-ladies-banner="3"] { background-image: url(../../../datas/banners/3.jpg); }

/* SECTIONS */

.ladies-section {
	padding: clamp(3.5rem, 8vw, 7rem) 0;
}

.ladies-section-alt {
	border-top: 1px solid var(--ladies-line);
	border-bottom: 1px solid var(--ladies-line);
	background-color: var(--ladies-surface);
}

.ladies-page {
	padding: clamp(7rem, 12vw, 10rem) 0 clamp(3rem, 6vw, 5rem);
}

.ladies-page-head {
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

/* THE CALENDAR of the project : today, the progress, the 366 days */

.ladies-today {
	max-width: 267px;
}

.ladies-figure {
	margin-bottom: 0;
	font-size: clamp(3.2rem, 8vw, 5.5rem);
	font-weight: 200;
	line-height: 1;
}

.ladies-figure-total {
	color: var(--ladies-muted);
	font-size: 0.4em;
	letter-spacing: 0.1em;
}

.ladies-progress-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1.25rem;
	margin-bottom: 1.5rem;
}

.ladies .ladies-progress {
	--bs-progress-height: 2px;
	--bs-progress-bg: var(--ladies-line);
	--bs-progress-bar-bg: var(--ladies-pink);
	--bs-progress-border-radius: 0;
	margin-bottom: 2rem;
}

.ladies .ladies-progress .progress-bar {
	width: 0;
	transition: width 1.4s ease-out;
}

.ladies-year {
	display: grid;
	gap: 7px;
}

.ladies-month {
	display: flex;
	align-items: center;
	gap: 0.9rem;
}

.ladies-month-name {
	flex: 0 0 2.8rem;
	color: var(--ladies-muted);
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ladies-dots {
	display: grid;
	flex: 1 1 auto;
	grid-template-columns: repeat(31, minmax(0, 1fr));
	gap: 4px;
	max-width: 620px;
}

.ladies-dot {
	display: inline-block;
	aspect-ratio: 1;
	width: 100%;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.13);
}

.ladies-dot.is-done {
	background-color: var(--ladies-pink);
}

.ladies-dot.is-today {
	box-shadow: 0 0 0 2px var(--ladies-bg), 0 0 0 3px #ffffff;
}

.ladies-legend {
	margin: 1.5rem 0 0;
	color: var(--ladies-muted);
	font-size: 0.75rem;
}

.ladies-legend .ladies-dot {
	width: 9px;
	vertical-align: middle;
	margin-right: 0.35rem;
}

/* PORTRAITS : black and white, the day and the first name over the picture */

.ladies-portrait {
	position: relative;
	overflow: hidden;
	margin: 0;
	aspect-ratio: 2 / 3;
	background-color: #000000;
}

.ladies-portrait img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease, opacity 0.4s ease;
}

.ladies-portrait figcaption {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 2.5rem 0.9rem 0.85rem;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.ladies-portrait-day {
	color: var(--ladies-pink);
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.ladies-portrait-name {
	font-size: 1rem;
	font-weight: 300;
	letter-spacing: 0.08em;
}

.ladies-portrait:hover img,
.ladies-portrait:focus-within img {
	transform: scale(1.06);
}

.ladies-portrait:hover figcaption,
.ladies-portrait:focus-within figcaption,
.ladies-today .ladies-portrait figcaption {
	opacity: 1;
	transform: none;
}

/* on a screen without a pointer nothing hovers : the captions are always there */
@media (hover: none) {
	.ladies-portrait figcaption {
		opacity: 1;
		transform: none;
	}
}

.ladies-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 0.75rem;
}

@media (min-width: 992px) {
	.ladies-grid {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: 1rem;
	}
}

/* COUNTERS */

.ladies .counter-box {
	height: 100%;
	border: 1px solid var(--ladies-line);
	padding: 2.25rem 1rem;
	text-align: center;
}

.ladies .counter-box .display-4 {
	font-weight: 200 !important;
	line-height: 1;
}

.ladies .counter-box p {
	margin: 0.75rem 0 0;
	color: var(--ladies-muted);
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.ladies .counter-box strong {
	color: var(--ladies-text);
	font-weight: 600;
}

/* THE PROJECT : three numbered texts */

.ladies-pillar {
	display: flex;
	gap: 1.5rem;
	padding: 1.75rem 0;
	border-top: 1px solid var(--ladies-line);
}

.ladies-pillar:first-child {
	padding-top: 0;
	border-top: 0;
}

.ladies-pillar-number {
	flex: 0 0 auto;
	color: var(--ladies-pink);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 2.2;
}

.ladies-pillar h3 {
	margin-bottom: 0.6rem;
	font-size: 1.3rem;
	font-weight: 400;
	letter-spacing: 0.03em;
}

.ladies-pillar p {
	margin: 0;
	color: #c9c9c9;
	font-size: 0.98rem;
	font-weight: 300;
}

/* CALL : a banner behind the invitation to apply */

.ladies-cta {
	position: relative;
	padding: clamp(4.5rem, 10vw, 8rem) 0;
	background-position: 60% 30%;
	background-size: cover;
}

.ladies-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.72);
}

.ladies-cta > .container {
	position: relative;
}

/* APPLICATION FORM */

.ladies-aside {
	height: 220px;
	margin-bottom: 2.5rem;
	background-color: #000000;
	background-position: 72% 28%;
	background-size: cover;
}

@media (min-width: 992px) {
	.ladies-aside {
		height: 340px;
	}
}

.ladies-card {
	border: 1px solid var(--ladies-line);
	padding: clamp(1.5rem, 4vw, 3rem);
	background-color: var(--ladies-surface);
}

/* LEGAL PAGES : long texts */

.ladies-prose h2 {
	margin-bottom: 1rem;
	font-size: 1.5rem;
	font-weight: 400 !important;
	letter-spacing: 0.04em;
}

.ladies-prose h4 {
	margin-top: 2rem;
	color: var(--ladies-pink);
	font-size: 0.8rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.ladies-prose p,
.ladies-prose li {
	color: #cfcfcf;
	font-weight: 300;
}

.ladies-prose strong {
	color: var(--ladies-text);
	font-weight: 600;
}

/* FOOTER */

.ladies-footer {
	border-top: 1px solid var(--ladies-line);
	padding: 4rem 1rem 3rem;
	color: var(--ladies-muted);
	font-size: 0.8rem;
	text-align: center;
}

.ladies-footer .footer-menu a {
	color: var(--ladies-text);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-decoration: none;
	text-transform: uppercase;
}

.ladies-footer .footer-menu a:hover {
	color: var(--ladies-pink);
}

.ladies-footer .footer-menu .list-inline-item:not(:last-child) {
	margin-right: 1.75rem;
}

.ladies-footer .social-buttons ul {
	margin: 0.5rem 0 1.75rem;
	padding: 0;
	list-style: none;
}

.ladies-footer .social-buttons li {
	display: inline-block;
	margin: 0 10px;
}

.ladies-footer .btn-social-min {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	padding: 0.4rem;
	color: var(--ladies-text);
	font-size: 1rem; /* the icons are 2em wide : 32px */
	letter-spacing: 0;
	transition: color 0.2s, transform 0.3s var(--ladies-ease);
}

.ladies-footer .btn-social-min:hover {
	color: var(--ladies-pink);
	transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
	.ladies *,
	.ladies *::before,
	.ladies *::after {
		transition: none !important;
	}
}

@media (max-width: 575.98px) {
	.ladies-navbar .navbar-brand img {
		width: 150px;
	}
}

/* ---------------------------------------------------------------- MOTION
   Slow and quiet : things rise, the pictures are unveiled, nothing bounces. Only transform, opacity and clip-path move.
   What needs a script (assets/js/app.js) is under .ladies-motion, the class the script puts on .ladies : without the script,
   or for a visitor who asked for less motion, the page is simply there. */

.ladies {
	--ladies-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ladies-serif {
	font-family: "Cormorant Garamond", "Playfair Display", "Bodoni MT", Didot, "Hoefler Text", Garamond, Georgia, "Times New Roman", serif;
	font-style: italic;
	font-weight: 400;
}

.ladies-subtitle.ladies-serif {
	font-size: 1.6rem;
	letter-spacing: 0.02em;
	text-transform: none;
}

@keyframes ladies-rise {
	from { opacity: 0; transform: translateY(28px); }
	to { opacity: 1; transform: none; }
}

@keyframes ladies-unmask {
	from { transform: translateY(105%); }
	to { transform: none; }
}

@keyframes ladies-kenburns {
	from { transform: scale(1.14); }
	to { transform: scale(1); }
}

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

@keyframes ladies-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* the page arrives */
.ladies > main,
.ladies-navbar {
	animation: ladies-fade 0.7s ease-out both;
}

/* what is on screen when a page opens rises once, without a script */
.ladies-rise {
	animation: ladies-rise 0.9s var(--ladies-ease) 0.1s both;
}

.ladies-rise-2 {
	animation-delay: 0.25s;
}

/* a line of text that comes up from behind its own baseline */
.ladies-mask {
	display: block;
	overflow: hidden;
	padding-bottom: 0.08em;
}

.ladies-mask > span {
	display: block;
}

/* HERO : the picture settles slowly, the words come one after the other, again at each slide */
.ladies-hero .carousel-item {
	overflow: hidden;
	background-image: none;
}

.ladies-hero-image {
	position: absolute;
	inset: 0;
	background-color: #000000;
	background-position: 62% 30%;
	background-size: cover;
}

.ladies-hero-image {
	will-change: transform;
	backface-visibility: hidden;
}

/* A slide moves from the moment it starts to come in (.carousel-item-next / -prev), not only once Bootstrap has made it .active
   at the end of the cross-fade : started then, the picture and the words would jump back to their first frame in full view. */
.ladies-hero .carousel-item:is(.active, .carousel-item-next, .carousel-item-prev) .ladies-hero-image {
	animation: ladies-kenburns 12s cubic-bezier(0.25, 0.5, 0.5, 1) both;
}

.ladies-hero .carousel-item:is(.active, .carousel-item-next, .carousel-item-prev) .ladies-mask > span {
	animation: ladies-unmask 1.1s var(--ladies-ease) 0.7s both;
}

.ladies-hero .carousel-item:is(.active, .carousel-item-next, .carousel-item-prev) .ladies-hero-line {
	animation: ladies-rise 0.9s var(--ladies-ease) both;
}

.ladies-hero .carousel-item:is(.active, .carousel-item-next, .carousel-item-prev) .ladies-eyebrow { animation-delay: 0.6s; }
.ladies-hero .carousel-item:is(.active, .carousel-item-next, .carousel-item-prev) .ladies-hero-text { animation-delay: 1.05s; }
.ladies-hero .carousel-item:is(.active, .carousel-item-next, .carousel-item-prev) p:last-child { animation-delay: 1.25s; }

/* The cross-fade : the slide that comes in fades over the one that leaves, which stays whole underneath and is hidden only when
   the fade is over. (Bootstrap hides it after 0.6s, the length of its own fade : with a longer fade it must wait as long.) */
.ladies-hero .carousel-fade .carousel-item {
	transition: opacity 1.4s ease-in-out;
}

.ladies-hero .carousel-fade .active.carousel-item-start,
.ladies-hero .carousel-fade .active.carousel-item-end {
	transition: opacity 0s 1.4s;
}

/* BAND of words that drifts under the banner */
.ladies-marquee {
	overflow: hidden;
	border-top: 1px solid var(--ladies-line);
	border-bottom: 1px solid var(--ladies-line);
	padding: 1.4rem 0;
	white-space: nowrap;
}

.ladies-marquee-track {
	display: inline-flex;
	align-items: center;
	gap: 2.5rem;
	padding-right: 2.5rem;
	animation: ladies-marquee 38s linear infinite;
}

.ladies-marquee span {
	color: transparent;
	font-size: clamp(1.6rem, 4vw, 3rem);
	font-weight: 200;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.55);
}

.ladies-marquee span.ladies-serif {
	color: var(--ladies-text);
	letter-spacing: 0.02em;
	text-transform: none;
	-webkit-text-stroke: 0;
}

.ladies-marquee i {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--ladies-pink);
}

/* REVEALS on scroll (the script adds .is-in when the element comes on screen, --ladies-delay staggers a group) */
.ladies-motion [data-ladies-reveal] {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 0.9s var(--ladies-ease), transform 0.9s var(--ladies-ease);
	transition-delay: var(--ladies-delay, 0s);
}

.ladies-motion [data-ladies-reveal].is-in {
	opacity: 1;
	transform: none;
}

/* the days of the calendar light up one after the other (the script gives each its delay) */
.ladies-motion [data-ladies-wave] .ladies-dot.is-done {
	background-color: rgba(255, 255, 255, 0.13);
	transform: scale(0.6);
	transition: background-color 0.5s ease, transform 0.5s var(--ladies-ease);
}

.ladies-motion [data-ladies-wave].is-in .ladies-dot.is-done {
	background-color: var(--ladies-pink);
	transform: none;
}

/* SMALL GESTURES */

/* a button fills with white from the left */
.ladies .btn-primary {
	background-image: linear-gradient(#ffffff, #ffffff);
	background-repeat: no-repeat;
	background-size: 0% 100%;
	transition: background-size 0.45s var(--ladies-ease), color 0.3s ease, border-color 0.45s ease;
}

/* (only under the pointer : a button that was just clicked keeps the focus, and must not stay white) */
.ladies .btn-primary:hover {
	--bs-btn-hover-color: #000000;
	--bs-btn-hover-bg: var(--ladies-pink);
	--bs-btn-hover-border-color: #ffffff;
	background-size: 100% 100%;
	color: #000000;
}

/* a link of the menu is underlined from the left */
@media (min-width: 992px) {
	.ladies-navbar .nav-link {
		position: relative;
	}

	.ladies-navbar .nav-link::after {
		content: "";
		position: absolute;
		right: 0.5rem;
		bottom: 0.2rem;
		left: 0.5rem;
		height: 1px;
		background-color: var(--ladies-pink);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.4s var(--ladies-ease);
	}

	.ladies-navbar .nav-link:hover::after,
	.ladies-navbar .nav-link.active::after {
		transform: scaleX(1);
	}

	.ladies-navbar .nav-link.active {
		box-shadow: none;
	}
}

/* an arrow follows the text links */
.ladies-link::after {
	content: "\2192";
	display: inline-block;
	margin-left: 0.6rem;
	transition: transform 0.3s var(--ladies-ease);
}

.ladies-link:hover::after {
	transform: translateX(6px);
}

.ladies .counter-box:hover {
	border-color: var(--ladies-pink);
}

.ladies-pillar-number {
	font-family: "Cormorant Garamond", "Playfair Display", "Bodoni MT", Didot, Georgia, serif;
	font-size: 2rem;
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1;
}

.ladies-figure-total {
	font-family: "Cormorant Garamond", "Playfair Display", "Bodoni MT", Didot, Georgia, serif;
	font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
	.ladies *,
	.ladies *::before,
	.ladies *::after {
		animation: none !important;
	}
}


/* ---------------------------------------------------------------- THE EMBEDDED TYPEFACES
   Cormorant Garamond is small for its size : where it is used it is set larger. */

.ladies-serif {
	font-size: 1.18em;
	font-weight: 500;
}

.ladies-subtitle.ladies-serif {
	font-size: 2rem;
}

.ladies-pillar-number {
	font-size: 2.4rem;
}

.ladies-figure-total {
	font-size: 0.5em;
	letter-spacing: 0.04em;
}

.ladies-marquee span.ladies-serif {
	font-size: clamp(2rem, 4.8vw, 3.6rem);
}

/* ---------------------------------------------------------------- THE CALENDAR IS A MENU
   Every day is a link : to its portrait, or to the application form when it is free. */

a.ladies-dot {
	transition: transform 0.2s var(--ladies-ease), background-color 0.2s ease;
}

a.ladies-dot:hover,
a.ladies-dot:focus-visible,
.ladies-motion [data-ladies-wave].is-in a.ladies-dot.is-done:hover,
.ladies-motion [data-ladies-wave].is-in a.ladies-dot.is-done:focus-visible {
	outline: 0;
	background-color: #ffffff;
	transform: scale(1.7);
	transition-delay: 0s !important;
}

/* "is my day free ?" */

.ladies-finder {
	margin-top: 2.5rem;
	border-top: 1px solid var(--ladies-line);
	padding-top: 2rem;
}

.ladies-finder-title {
	margin-bottom: 1rem;
	font-size: 1.15rem;
	font-weight: 300;
	letter-spacing: 0.03em;
}

.ladies-finder-answer {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.5s var(--ladies-ease), transform 0.5s var(--ladies-ease);
}

.ladies-finder-answer.is-shown {
	margin-top: 1.5rem;
	opacity: 1;
	transform: none;
}

.ladies-finder-answer.is-taken {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.ladies-finder-answer img {
	flex: 0 0 auto;
	width: 80px;
	height: 120px;
	object-fit: cover;
}

.ladies-finder-day {
	margin-bottom: 0.25rem;
	color: var(--ladies-pink);
	font-size: 1.25rem;
	font-weight: 300;
}

/* ---------------------------------------------------------------- GALLERY, month by month */

.ladies-portrait {
	scroll-margin-top: 130px;
}

.ladies-portrait > a {
	display: block;
	height: 100%;
	cursor: zoom-in;
}

.ladies-portrait figcaption {
	pointer-events: none;
}

.ladies-portrait.is-target {
	overflow: visible;
	outline: 2px solid var(--ladies-pink);
	outline-offset: 4px;
}

.ladies-portrait.is-target > a {
	overflow: hidden;
}

.ladies-portrait.is-target figcaption {
	opacity: 1;
	transform: none;
}

.ladies-months {
	position: sticky;
	top: 75px; /* just under the top bar, which is 76px high on every screen */
	z-index: 5;
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	margin: 0 -0.75rem 2.5rem;
	border-bottom: 1px solid var(--ladies-line);
	padding: 1rem 0.75rem;
	background-color: rgba(7, 7, 7, 0.92);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	scrollbar-width: none;
	white-space: nowrap;
}

.ladies-months::-webkit-scrollbar {
	display: none;
}

.ladies-months a,
.ladies-months > span {
	color: var(--ladies-text);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 0.2s;
}

.ladies-months a:hover {
	color: var(--ladies-pink);
}

.ladies-months a span {
	margin-left: 0.2rem;
	color: var(--ladies-pink);
	font-weight: 400;
	letter-spacing: 0;
}

.ladies-months .is-empty {
	color: rgba(255, 255, 255, 0.28);
}

.ladies-month-block {
	margin-bottom: clamp(3rem, 6vw, 5rem);
	scroll-margin-top: 130px;
}

.ladies-month-title {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	margin-bottom: 1.5rem;
	font-size: clamp(1.6rem, 3.5vw, 2.6rem);
	font-weight: 200;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ladies-month-title .ladies-serif {
	color: var(--ladies-muted);
	font-size: 0.6em;
	letter-spacing: 0.02em;
	text-transform: none;
}

/* ---------------------------------------------------------------- FULL SCREEN VIEWER */

.ladies-viewer-open {
	overflow: hidden;
}

.ladies-viewer {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 3.5rem 1rem 1.5rem;
	background-color: rgba(0, 0, 0, 0.96);
	opacity: 0;
	transition: opacity 0.35s ease;
}

.ladies-viewer[hidden] {
	display: none;
}

.ladies-viewer.is-open {
	opacity: 1;
}

.ladies-viewer-image {
	flex: 0 1 auto;
	min-height: 0;
	max-width: 100%;
	max-height: calc(100vh - 9rem);
	max-height: calc(100dvh - 9rem);
	aspect-ratio: 2 / 3;
	object-fit: contain;
	filter: blur(6px);
	transform: scale(0.985);
	transition: filter 0.5s ease, transform 0.7s var(--ladies-ease);
}

.ladies-viewer-image.is-loaded {
	filter: none;
	transform: none;
}

.ladies-viewer-caption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 0.35rem 1.25rem;
	margin: 0;
}

.ladies-viewer-name {
	font-size: 1.3rem;
	font-weight: 300;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ladies-viewer-count {
	color: var(--ladies-muted);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
}

.ladies-viewer button {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--ladies-line);
	border-radius: 50%;
	padding: 0;
	background-color: rgba(0, 0, 0, 0.5);
	color: #ffffff;
	font-size: 1.3rem;
	line-height: 1;
	transition: border-color 0.2s, color 0.2s;
}

.ladies-viewer button:hover,
.ladies-viewer button:focus-visible {
	outline: 0;
	border-color: var(--ladies-pink);
	color: var(--ladies-pink);
}

.ladies-viewer-close {
	top: 1rem;
	right: 1rem;
	font-size: 1.7rem;
}

.ladies-viewer-arrow {
	top: 50%;
	margin-top: -24px;
}

.ladies-viewer-previous { left: 1rem; }
.ladies-viewer-next { right: 1rem; }

@media (max-width: 575.98px) {
	.ladies-viewer {
		padding-bottom: 5rem;
	}

	.ladies-viewer-arrow {
		top: auto;
		bottom: 1rem;
		margin-top: 0;
	}
}

/* the wide gutters of some rows (g-5) reach past the padding of their container : nothing may widen the page */
.ladies > main {
	overflow-x: clip;
}

/* ---------------------------------------------------------------- THE PORTRAITS, QUIETLY
   One gesture, the one of the photographer : a portrait comes into focus. It is there, soft, then sharp, and it does not move
   again. Under the pointer the picture breathes in a little, a hairline frame settles inside it and its name is written ; the
   portraits around it step back half a tone, no more. Nothing slides, tilts or flashes. */

/* the row of the home page : the portraits side by side, aligned */
.ladies-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

@media (min-width: 576px) {
	.ladies-row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.ladies-row {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 1.25rem;
	}
}

/* coming into focus (the script adds .is-in when the portrait reaches the screen ; those of a same line follow one another) */
.ladies-motion [data-ladies-reveal="focus"] {
	opacity: 0;
	filter: blur(16px);
	transform: scale(1.04);
	transition: opacity 1.4s ease, filter 1.4s ease, transform 1.8s var(--ladies-ease);
	transition-delay: var(--ladies-delay, 0s);
}

.ladies-motion [data-ladies-reveal="focus"].is-in {
	opacity: 1;
	filter: none;
	transform: none;
}

/* once it is sharp a portrait answers the pointer at once : the delay of its arrival is over */
.ladies-motion [data-ladies-reveal="focus"].is-settled {
	transition: opacity 0.6s ease, filter 0.6s ease, transform 0.6s var(--ladies-ease);
	transition-delay: 0s;
}

/* the picture breathes in, slowly */
.ladies-portrait img {
	transition: transform 1.6s var(--ladies-ease);
}

.ladies-portrait:hover img,
.ladies-portrait:focus-within img {
	transform: scale(1.045);
}

/* a hairline frame settles inside the picture */
.ladies-portrait::after {
	content: "";
	position: absolute;
	inset: 12px;
	z-index: 2;
	border: 1px solid rgba(255, 255, 255, 0.6);
	opacity: 0;
	transform: scale(1.03);
	transition: opacity 0.6s ease, transform 0.8s var(--ladies-ease);
	pointer-events: none;
}

.ladies-portrait:hover::after,
.ladies-portrait:focus-within::after {
	opacity: 1;
	transform: none;
}

/* the name is written : the day in small capitals, the first name in italics */
.ladies-portrait figcaption {
	z-index: 3;
	padding: 4rem 1.6rem 1.5rem;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0) 100%);
	transform: none;
	transition: opacity 0.7s ease;
}

.ladies-portrait-day,
.ladies-portrait-name {
	transform: translateY(8px);
	transition: transform 0.9s var(--ladies-ease);
}

.ladies-portrait-name {
	font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
	font-size: 1.7rem;
	font-style: italic;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.1;
	transition-delay: 0.06s;
}

.ladies-portrait:hover .ladies-portrait-day,
.ladies-portrait:hover .ladies-portrait-name,
.ladies-portrait:focus-within .ladies-portrait-day,
.ladies-portrait:focus-within .ladies-portrait-name,
.ladies-today .ladies-portrait-day,
.ladies-today .ladies-portrait-name,
.ladies-portrait.is-target .ladies-portrait-day,
.ladies-portrait.is-target .ladies-portrait-name {
	transform: none;
}

@media (hover: none) {
	.ladies-portrait-day,
	.ladies-portrait-name {
		transform: none;
	}

	.ladies-portrait-name {
		font-size: 1.25rem;
	}

	.ladies-portrait figcaption {
		padding: 2.5rem 0.8rem 0.7rem;
	}
}

/* the portraits around the one that is looked at step back half a tone (only while one of them is under the pointer) */
@media (hover: hover) {
	.ladies-row:has(.ladies-portrait:hover) .ladies-portrait.is-settled:not(:hover),
	.ladies-grid:has(.ladies-portrait:hover) .ladies-portrait.is-settled:not(:hover) {
		opacity: 0.55;
	}
}

/* GALLERY : the month that is on screen is marked in the bar of the months */
.ladies-months a {
	position: relative;
	padding-bottom: 0.35rem;
}

.ladies-months a::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1px;
	background-color: var(--ladies-pink);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.5s var(--ladies-ease);
}

.ladies-months a.is-current::after,
.ladies-months a:hover::after {
	transform: scaleX(1);
}

.ladies-months a.is-current {
	color: var(--ladies-pink);
}

/* the title of a month : a hairline draws itself after it */
.ladies-month-title::after {
	content: "";
	flex: 1 1 auto;
	align-self: center;
	height: 1px;
	background-color: var(--ladies-line);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 1.4s var(--ladies-ease) 0.3s;
}

.ladies-month-title.is-in::after,
.ladies:not(.ladies-motion) .ladies-month-title::after {
	transform: scaleX(1);
}

/* ---------------------------------------------------------------- THE PAGE OF A DAY : "Miss 14 Juillet"
   The portrait on one side, on the other its name in very large letters and a few sentences. Under them the day before and the
   day after, the month in dots, who shares the day, and the days that follow. */

.ladies-miss-portrait {
	max-width: 520px;
	margin: 0 auto;
}

/* on its own page the portrait is the subject : it does not answer the pointer, its name is in the title */
.ladies-miss-portrait .ladies-portrait figcaption,
.ladies-miss-portrait .ladies-portrait::after {
	display: none;
}

.ladies-miss-portrait .ladies-portrait:hover img,
.ladies-miss-portrait .ladies-portrait:focus-within img {
	transform: none;
}

.ladies-miss-portrait .ladies-portrait {
	box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.95);
}

/* a day that is free : its number, very large, in a frame of the size of a portrait */
.ladies-miss-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	max-width: 520px;
	margin: 0 auto;
	aspect-ratio: 2 / 3;
	border: 1px solid var(--ladies-line);
	background-color: var(--ladies-surface);
	text-align: center;
}

.ladies-miss-empty .ladies-serif {
	color: var(--ladies-pink);
	font-size: clamp(7rem, 22vw, 14rem);
	line-height: 1;
}

.ladies-miss-empty p {
	margin: 1rem 0 0;
	color: var(--ladies-muted);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.ladies-miss-title {
	margin-bottom: 1.75rem;
	font-size: clamp(2.8rem, 7.5vw, 6.5rem);
	font-weight: 200;
	letter-spacing: 0.06em;
	line-height: 1;
	text-transform: uppercase;
}

.ladies-miss-title .ladies-serif {
	display: block;
	margin-bottom: 0.1em;
	color: var(--ladies-pink);
	font-size: 0.5em;
	letter-spacing: 0.02em;
	text-transform: none;
}

.ladies-miss-text {
	max-width: 38rem;
}

.ladies-miss-text sup {
	font-size: 0.6em;
}

/* a word of the photographer */
.ladies-miss-note {
	max-width: 38rem;
	margin: 2rem 0 0;
	border-left: 1px solid var(--ladies-pink);
	padding-left: 1.5rem;
}

.ladies-miss-note p {
	margin-bottom: 0.5rem;
	font-size: 1.5rem;
	line-height: 1.35;
}

.ladies-miss-note footer {
	color: var(--ladies-muted);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* share */
.ladies-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.5rem;
	margin-top: 2.5rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.ladies-share span {
	color: var(--ladies-muted);
}

.ladies-share a,
.ladies-share button {
	border: 0;
	border-bottom: 1px solid var(--ladies-line);
	padding: 0 0 0.3rem;
	background: none;
	color: var(--ladies-text);
	font: inherit;
	letter-spacing: inherit;
	text-decoration: none;
	text-transform: inherit;
	transition: color 0.2s, border-color 0.2s;
}

.ladies-share a:hover,
.ladies-share button:hover,
.ladies-share button.is-done {
	border-color: var(--ladies-pink);
	color: var(--ladies-pink);
}

/* the day before, the day after */
.ladies-miss-nav {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	margin: clamp(3rem, 7vw, 5.5rem) 0;
	border-top: 1px solid var(--ladies-line);
	border-bottom: 1px solid var(--ladies-line);
	padding: 1.75rem 0;
}

.ladies-miss-nav a {
	color: var(--ladies-text);
	font-size: clamp(1.05rem, 2.4vw, 1.6rem);
	font-weight: 200;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 0.3s;
}

.ladies-miss-nav a:last-child {
	text-align: right;
}

.ladies-miss-nav a span {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--ladies-pink);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.22em;
}

.ladies-miss-nav a:hover {
	color: var(--ladies-pink);
}

/* the month in dots, larger than on the home page */
.ladies-miss-month,
.ladies-miss-almanac,
.ladies-miss-around {
	margin-bottom: clamp(3rem, 7vw, 5.5rem);
}

.ladies-month-wide .ladies-dots {
	max-width: none;
	gap: 6px;
}

.ladies-dot.is-current {
	box-shadow: 0 0 0 3px var(--ladies-bg), 0 0 0 4px #ffffff;
}

/* who shares the day, what happened on it */
.ladies-miss-births {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ladies-miss-births li {
	display: flex;
	align-items: baseline;
	gap: 1.5rem;
	border-top: 1px solid var(--ladies-line);
	padding: 1rem 0;
}

.ladies-miss-births li:first-child {
	border-top: 0;
	padding-top: 0;
}

.ladies-miss-births .ladies-serif,
.ladies-miss-event .ladies-serif {
	flex: 0 0 4rem;
	color: var(--ladies-pink);
	font-size: 1.6rem;
	line-height: 1;
}

.ladies-miss-births strong {
	font-weight: 400;
	letter-spacing: 0.03em;
}

.ladies-miss-births .ladies-muted {
	font-size: 0.85rem;
}

.ladies-miss-event {
	margin: 0;
	color: #d6d6d6;
	font-weight: 300;
}

.ladies-miss-event .ladies-serif {
	display: block;
	margin-bottom: 0.6rem;
}

.ladies-miss-credit {
	margin: 2rem 0 0;
	color: rgba(255, 255, 255, 0.35);
	font-size: 0.7rem;
}

.ladies-miss-credit a {
	color: inherit;
}

/* the days that follow : four portraits */
@media (min-width: 992px) {
	.ladies-row.ladies-row-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 576px) and (max-width: 991.98px) {
	.ladies-row.ladies-row-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* in the viewer : the link to the page of the day */
.ladies-viewer-page {
	font-size: 0.68rem;
}

/* a portrait that leads to the page of its day is a link like another ; only the one that opens the viewer shows a magnifier */
.ladies-portrait > a {
	cursor: pointer;
}

.ladies-portrait > a[data-ladies-zoom] {
	cursor: zoom-in;
}

/* ---------------------------------------------------------------- QUESTIONS of the home page (Bootstrap accordion)
   Lines, no boxes : a question in light capitals, a fuchsia cross that turns when it opens, the answer under it. */

.ladies-questions {
	--bs-accordion-bg: transparent;
	--bs-accordion-color: var(--ladies-text);
	--bs-accordion-border-color: var(--ladies-line);
	--bs-accordion-btn-color: var(--ladies-text);
	--bs-accordion-btn-bg: transparent;
	--bs-accordion-active-color: #ffffff;
	--bs-accordion-active-bg: transparent;
	--bs-accordion-btn-padding-x: 0;
	--bs-accordion-btn-padding-y: 1.4rem;
	--bs-accordion-body-padding-x: 0;
	--bs-accordion-body-padding-y: 0;
	--bs-accordion-btn-focus-box-shadow: none;
	--bs-accordion-btn-icon: none;
	--bs-accordion-btn-active-icon: none;
	border-top: 1px solid var(--ladies-line);
}

.ladies-questions .accordion-button {
	font-size: 1.1rem;
	font-weight: 300;
	letter-spacing: 0.03em;
	box-shadow: none;
	transition: color 0.3s;
}

.ladies-questions .accordion-button:hover,
.ladies-questions .accordion-button:focus-visible {
	color: var(--ladies-pink);
}

/* the cross : two hairlines, one of which lies down when the answer is open */
.ladies-questions .accordion-button::after {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	margin-left: auto;
	background-image: linear-gradient(var(--ladies-pink), var(--ladies-pink)), linear-gradient(var(--ladies-pink), var(--ladies-pink));
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 1px, 1px 100%;
	transform: none;
	transition: transform 0.4s var(--ladies-ease);
}

.ladies-questions .accordion-button:not(.collapsed)::after {
	transform: rotate(45deg);
}

.ladies-questions .accordion-body {
	max-width: 44rem;
	padding-bottom: 1.6rem;
	color: #cfcfcf;
	font-weight: 300;
}

/* ---------------------------------------------------------------- THE LAST CALL of the home page
   Like the banner that opens the page : the words on the left, in the dark, the face on the right in the light. No veil over
   the whole picture, no text laid on the face. */

.ladies-cta {
	position: relative;
	overflow: hidden;
	padding: clamp(5rem, 12vw, 10rem) 0;
	background: #000000;
}

.ladies-cta::before {
	content: none;
}

.ladies-cta-image {
	position: absolute;
	inset: 0;
	background-position: 78% 28%;
	background-size: cover;
}

.ladies-cta-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0.92) 30%, rgba(0, 0, 0, 0.45) 58%, rgba(0, 0, 0, 0) 80%), linear-gradient(180deg, var(--ladies-bg) 0%, rgba(7, 7, 7, 0) 22%, rgba(7, 7, 7, 0) 78%, var(--ladies-bg) 100%);
}

.ladies-cta > .container-xxl {
	position: relative;
}

.ladies-cta-text {
	max-width: 36rem;
}

.ladies-cta .ladies-display .ladies-serif {
	color: var(--ladies-pink);
	font-size: 1.15em;
	letter-spacing: 0;
	text-transform: none;
}

.ladies-cta .lead {
	margin-bottom: 2.5rem;
}

.ladies-cta-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem 2.5rem;
}

/* on a phone the face is behind the words : it is dimmed all over so that they read */
@media (max-width: 767.98px) {
	.ladies-cta-image::after {
		background: linear-gradient(180deg, var(--ladies-bg) 0%, rgba(0, 0, 0, 0.72) 25%, rgba(0, 0, 0, 0.72) 75%, var(--ladies-bg) 100%);
	}
}

/* a link inside the page (the calendar) stops under the top bar, not behind it */
.ladies section[id] {
	scroll-margin-top: 76px;
}

.ladies {
	scroll-behavior: smooth;
}

/* "vous ?" has its own line under "Et si c etait", and its question mark never leaves it */
.ladies-cta .ladies-display .ladies-serif {
	display: block;
	margin-top: 0.05em;
	white-space: nowrap;
}

/* the line that signs the site reads clearly ; the copyright under it stays discreet */
.ladies-footer .copyright p:first-child {
	color: var(--ladies-text);
	font-size: 0.9rem;
}

/* who is celebrated that day : the first names, in italics */
.ladies-miss-feast {
	margin-bottom: 1rem;
	color: var(--ladies-text);
	font-size: 1.9rem;
	line-height: 1.15;
}

.ladies-miss-event strong {
	color: var(--ladies-text);
	font-weight: 400;
}

/* ---------------------------------------------------------------- THE APPLICATION PAGE
   Two halves of the height of the screen : on the left a portrait with the words laid at its foot, as on a magazine cover ; on the
   right the form, in three numbered steps, its fields drawn with a single line. */

.ladies-apply {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	padding-top: 76px; /* the top bar */
}

@media (min-width: 992px) {
	.ladies-apply {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		min-height: 100vh;
	}
}

.ladies-apply-side {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 420px;
	overflow: hidden;
	background-color: #000000;
}

@media (min-width: 992px) {
	/* the picture stays in place while the form scrolls */
	.ladies-apply-side {
		position: sticky;
		top: 76px;
		height: calc(100vh - 76px);
		min-height: 560px;
	}
}

.ladies-apply-image {
	position: absolute;
	inset: 0;
	background-position: 64% 30%;
	background-size: cover;
}

.ladies-apply-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.55) 32%, rgba(0, 0, 0, 0) 62%);
}

.ladies-apply-words {
	position: relative;
	padding: clamp(1.5rem, 4vw, 3.5rem);
}

.ladies-apply-words .ladies-display {
	margin-bottom: 1rem;
}

.ladies-apply-words .ladies-display .ladies-serif {
	display: block;
	margin-top: 0.05em;
	color: var(--ladies-pink);
	font-size: 1.1em;
	letter-spacing: 0;
	text-transform: none;
}

.ladies-apply-words .lead {
	max-width: 26rem;
	margin: 0;
}

.ladies-apply-form {
	padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 6vw, 5.5rem);
}

.ladies-apply-form form {
	max-width: 40rem;
}

.ladies-apply-form fieldset {
	margin: 0 0 3rem;
	border: 0;
	padding: 0;
}

.ladies-apply-form legend {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	float: none;
	width: 100%;
	margin-bottom: 1.75rem;
	border-bottom: 1px solid var(--ladies-line);
	padding-bottom: 0.9rem;
	font-size: 1.35rem;
	font-weight: 200;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ladies-apply-form legend span {
	color: var(--ladies-pink);
	font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
	font-size: 1.5rem;
	font-style: italic;
	font-weight: 500;
	letter-spacing: 0;
}

/* a field is a line : no box, the text sits on it */
.ladies-apply-form .form-control,
.ladies-apply-form .form-select {
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.28);
	padding: 0.5rem 0 0.7rem;
	background-color: transparent;
	font-size: 1.15rem;
	font-weight: 300;
	transition: border-color 0.3s;
}

.ladies-apply-form .form-select {
	padding-right: 1.75rem;
	background-position: right 0 center;
}

.ladies-apply-form .form-control:focus,
.ladies-apply-form .form-select:focus {
	border-color: var(--ladies-pink);
	box-shadow: 0 1px 0 0 var(--ladies-pink);
}

/* a browser that fills the form in must not paint its own background on the line */
.ladies-apply-form .form-control:-webkit-autofill {
	-webkit-text-fill-color: var(--ladies-text);
	box-shadow: 0 0 0 1000px var(--ladies-bg) inset;
	caret-color: var(--ladies-text);
}

.ladies-apply-form .form-label {
	margin-bottom: 0.1rem;
}

/* what the calendar says of the day that was chosen */
.ladies-apply-day {
	min-height: 1.6rem;
	margin: 1.25rem 0 0;
	opacity: 0;
	color: var(--ladies-muted);
	font-size: 0.95rem;
	transform: translateY(6px);
	transition: opacity 0.5s var(--ladies-ease), transform 0.5s var(--ladies-ease);
}

.ladies-apply-day.is-shown {
	opacity: 1;
	transform: none;
}

.ladies-apply-day strong {
	color: var(--ladies-pink);
	font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
	font-size: 1.5rem;
	font-style: italic;
	font-weight: 500;
	margin-right: 0.5rem;
}

.ladies-apply-send {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem 2rem;
}

.ladies-apply-send p {
	flex: 1 1 16rem;
	margin: 0;
	color: var(--ladies-muted);
	font-size: 0.8rem;
	line-height: 1.6;
}

.ladies-apply-send a {
	color: var(--ladies-text);
}

/* the feast of the day, apart from the rest of the almanac : a frame, with its question written across the top edge */
.ladies-miss-frame {
	position: relative;
	height: 100%;
	border: 1px solid rgba(242, 0, 236, 0.55);
	padding: 2.5rem 2rem 2rem;
}

.ladies-miss-frame .ladies-eyebrow {
	position: absolute;
	top: 0;
	left: 1.25rem;
	margin: 0;
	padding: 0 0.75rem;
	background-color: var(--ladies-bg);
	transform: translateY(-50%);
}

.ladies-miss-frame .ladies-miss-feast {
	font-size: 2.2rem;
}

.ladies-miss-frame .ladies-miss-event {
	margin: 0;
}

/* ---------------------------------------------------------------- THE PROJECT, TOLD (/project/, /project/press/)
   A page that is read : a very large title, the manifesto in the voice of the photographer, then the calendar of today set against
   the one of the project, the rules, the steps of a session. */

.ladies-story-head {
	max-width: 62rem;
	margin-bottom: clamp(3rem, 8vw, 6rem);
}

.ladies-story-head .ladies-display .ladies-serif {
	display: block;
	color: var(--ladies-pink);
	font-size: 1.05em;
	letter-spacing: 0;
	text-transform: none;
}

.ladies-story-thesis {
	max-width: 44rem;
	margin: 2rem 0 0;
	font-size: clamp(1.2rem, 2.4vw, 1.75rem);
	font-weight: 200;
	line-height: 1.45;
}

.ladies-story-block {
	margin-bottom: clamp(4rem, 10vw, 8rem);
}

.ladies-story-intro {
	margin-bottom: 2.5rem;
}

/* the manifesto : a column of text, each sentence a paragraph, signed */
.ladies-manifesto {
	max-width: 46rem;
	margin: 0 auto clamp(4rem, 10vw, 8rem);
	border-left: 1px solid var(--ladies-pink);
	padding-left: clamp(1.25rem, 4vw, 3rem);
}

.ladies-manifesto p {
	margin-bottom: 1.4rem;
	font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
	font-size: clamp(1.45rem, 2.6vw, 2.1rem);
	font-style: italic;
	font-weight: 400;
	line-height: 1.35;
}

.ladies-manifesto p:first-child::first-letter {
	color: var(--ladies-pink);
	font-size: 1.6em;
}

.ladies-manifesto footer {
	margin-top: 2.5rem;
	color: var(--ladies-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.ladies-manifesto footer::before {
	content: "";
	display: inline-block;
	width: 2.5rem;
	height: 1px;
	margin-right: 1rem;
	background-color: var(--ladies-pink);
	vertical-align: middle;
}

/* today : the saint of the calendar on one side, the Miss of the project on the other */
.ladies-versus {
	margin-bottom: clamp(4rem, 10vw, 8rem);
}

.ladies-versus > .row {
	border: 1px solid var(--ladies-line);
}

.ladies-versus-side {
	padding: clamp(1.75rem, 5vw, 3.5rem);
}

.ladies-versus-ours {
	border-top: 1px solid var(--ladies-line);
	background-color: var(--ladies-surface);
}

@media (min-width: 768px) {
	.ladies-versus-ours {
		border-top: 0;
		border-left: 1px solid var(--ladies-line);
	}
}

.ladies-versus-label {
	margin-bottom: 0.75rem;
	color: var(--ladies-muted);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.ladies-versus-name {
	margin-bottom: 0.75rem;
	font-size: clamp(2rem, 4.5vw, 3.4rem);
	line-height: 1.05;
}

.ladies-versus-ours .ladies-versus-name {
	color: var(--ladies-pink);
}

/* the steps of a session : four columns, a large italic number over each */
.ladies-steps {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem;
	margin: 0 0 3rem;
	padding: 0;
	list-style: none;
}

@media (min-width: 576px) {
	.ladies-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.ladies-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.ladies-steps li {
	border-top: 1px solid var(--ladies-line);
	padding-top: 1.5rem;
}

.ladies-steps .ladies-serif {
	display: block;
	margin-bottom: 0.75rem;
	color: var(--ladies-pink);
	font-size: 3.2rem;
	line-height: 1;
}

.ladies-steps h3 {
	margin-bottom: 0.6rem;
	font-size: 1.15rem;
	font-weight: 400;
	letter-spacing: 0.03em;
}

.ladies-steps p {
	margin: 0;
	color: #c9c9c9;
	font-size: 0.95rem;
	font-weight: 300;
}

/* three portraits in a row */
@media (min-width: 576px) {
	.ladies-row.ladies-row-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.25rem;
	}
}

@media (max-width: 575.98px) {
	.ladies-row.ladies-row-3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* press : the figures of the project, the angles of a story */
.ladies-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	border-top: 1px solid var(--ladies-line);
	border-left: 1px solid var(--ladies-line);
}

.ladies-facts > div {
	border-right: 1px solid var(--ladies-line);
	border-bottom: 1px solid var(--ladies-line);
	padding: 1.75rem 1.5rem;
}

.ladies-facts dt {
	margin-bottom: 0.6rem;
	color: var(--ladies-muted);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.ladies-facts dd {
	margin: 0;
	color: var(--ladies-pink);
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	font-weight: 200;
	line-height: 1;
}

.ladies-facts dd small {
	color: var(--ladies-muted);
	font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
	font-size: 0.5em;
	font-style: italic;
}

.ladies-angle {
	height: 100%;
	border-top: 1px solid var(--ladies-pink);
	padding-top: 1.5rem;
}

.ladies-angle h3 {
	margin-bottom: 0.75rem;
	font-size: 1.35rem;
	font-weight: 300;
	letter-spacing: 0.03em;
}

.ladies-angle p {
	margin: 0;
	color: #c9c9c9;
	font-weight: 300;
}

/* the footer has two links now */
.ladies-footer .footer-menu .list-inline-item {
	margin-bottom: 0.5rem;
}

/* ---------------------------------------------------------------- THE WALL OF THE 366 DAYS (/calendar/, the week of the home page)
   A day is a tile of the shape of a portrait : its picture when it has one, else an empty frame with its number, very large and
   very light, and under it what the applications say ("3 candidates", "Jamais demandé"). */

.ladies-wall {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	gap: 0.6rem;
}

@media (min-width: 768px) {
	.ladies-wall {
		grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
		gap: 0.9rem;
	}
}

.ladies-day {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	aspect-ratio: 2 / 3;
	border: 1px solid var(--ladies-line);
	background-color: rgba(255, 255, 255, 0.02);
	color: var(--ladies-text);
	text-align: center;
	text-decoration: none;
	transition: border-color 0.4s ease, background-color 0.4s ease;
}

.ladies-day img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.6s var(--ladies-ease);
}

.ladies-day-number {
	position: relative;
	color: rgba(255, 255, 255, 0.22);
	font-size: clamp(2rem, 5vw, 3.4rem);
	font-weight: 200;
	line-height: 1;
	transition: color 0.4s ease;
}

.ladies-day-month {
	position: relative;
	margin-top: 0.3rem;
	color: var(--ladies-muted);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.ladies-day-note {
	position: absolute;
	right: 0;
	bottom: 0.6rem;
	left: 0;
	padding: 0 0.3rem;
	color: var(--ladies-muted);
	font-size: 0.58rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* a day nobody asked for : the rarest frames of the wall */
.ladies-day.is-rare {
	border-style: dashed;
}

.ladies-day.is-rare .ladies-day-note {
	color: var(--ladies-pink);
}

/* a day that has its portrait : the number sits in a corner of the picture */
.ladies-day.is-done {
	align-items: flex-start;
	justify-content: flex-end;
	border-color: transparent;
	background-color: #000000;
}

.ladies-day.is-done .ladies-day-number,
.ladies-day.is-done .ladies-day-month {
	z-index: 1;
	margin: 0 0 0.45rem 0.6rem;
	color: #ffffff;
	font-size: 1.05rem;
	font-weight: 400;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

.ladies-day.is-done .ladies-day-month {
	position: absolute;
	bottom: 0;
	left: 2rem;
	font-size: 0.68rem;
}

.ladies-day.is-today {
	border-color: #ffffff;
}

.ladies-day:hover,
.ladies-day:focus-visible {
	outline: 0;
	border-color: var(--ladies-pink);
	background-color: rgba(242, 0, 236, 0.07);
}

.ladies-day:hover .ladies-day-number,
.ladies-day:focus-visible .ladies-day-number {
	color: var(--ladies-pink);
}

.ladies-day.is-done:hover .ladies-day-number,
.ladies-day.is-done:focus-visible .ladies-day-number {
	color: #ffffff;
}

.ladies-day:hover img,
.ladies-day:focus-visible img {
	transform: scale(1.05);
}

/* the week of the home page : seven tiles on one line (they scroll sideways on a phone) */
.ladies-wall-week {
	grid-template-columns: repeat(7, minmax(120px, 1fr));
	overflow-x: auto;
	padding-bottom: 0.5rem;
	scrollbar-width: none;
}

.ladies-wall-week::-webkit-scrollbar {
	display: none;
}

/* what the applications say of the calendar */
.ladies-ranking {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ladies-ranking li {
	border-top: 1px solid var(--ladies-line);
}

.ladies-ranking li:first-child {
	border-top: 0;
}

.ladies-ranking a {
	display: flex;
	align-items: baseline;
	gap: 1.25rem;
	padding: 0.7rem 0;
	color: var(--ladies-text);
	font-weight: 300;
	text-decoration: none;
	transition: color 0.2s;
}

.ladies-ranking a:hover {
	color: var(--ladies-pink);
}

.ladies-ranking .ladies-serif {
	flex: 0 0 2rem;
	color: var(--ladies-pink);
	font-size: 1.9rem;
	line-height: 1;
}

.ladies-never {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
}

.ladies-never a {
	border: 1px solid var(--ladies-line);
	padding: 0.3rem 0.7rem;
	color: var(--ladies-text);
	font-size: 0.8rem;
	font-weight: 300;
	text-decoration: none;
	transition: border-color 0.2s, color 0.2s;
}

.ladies-never a:hover {
	border-color: var(--ladies-pink);
	color: var(--ladies-pink);
}

.ladies-month-bars {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ladies-month-bars li {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.32rem 0;
}

.ladies-month-bars a {
	flex: 0 0 2.8rem;
	color: var(--ladies-muted);
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-decoration: none;
	text-transform: uppercase;
}

.ladies-month-bars a:hover {
	color: var(--ladies-pink);
}

.ladies .ladies-month-bars .ladies-progress {
	flex: 1 1 auto;
	margin: 0;
}

.ladies-month-count {
	flex: 0 0 3.2rem;
	color: var(--ladies-muted);
	font-size: 0.75rem;
	text-align: right;
}

/* the page of a day : "born that day too ?" */
.ladies-miss-also {
	max-width: 38rem;
	margin-top: 2.5rem;
	border-top: 1px solid var(--ladies-line);
	padding-top: 1.75rem;
}

/* PHONES : a bar that stays at the bottom of the public pages */
.ladies-bar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1020;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.95rem 1.25rem calc(0.95rem + env(safe-area-inset-bottom, 0px));
	background-color: var(--ladies-pink);
	color: #ffffff;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-decoration: none;
	text-transform: uppercase;
}

.ladies-bar:hover,
.ladies-bar:focus-visible {
	color: #ffffff;
}

@media (max-width: 991.98px) {
	/* the footer is not hidden by the bar */
	.ladies-bar + .ladies-footer {
		padding-bottom: 6.5rem;
	}
}

/* THE ERROR PAGE */
.ladies-error .display-1 {
	color: var(--ladies-pink);
	font-size: clamp(5rem, 22vw, 12rem);
	font-weight: 200 !important;
	letter-spacing: 0.06em;
	line-height: 1;
}

.ladies-error .display-6 {
	font-size: clamp(1.2rem, 3vw, 1.8rem);
	font-weight: 200 !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ladies-error code {
	color: var(--ladies-muted);
	font-size: 0.8rem;
}

/* share : the networks as icons, "copy the link" as an icon and its words */
.ladies-share .ladies-share-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	border: 1px solid var(--ladies-line);
	border-radius: 50%;
	padding: 0;
	font-size: 1.15rem;
	letter-spacing: 0;
}

.ladies-share .ladies-share-icon:hover {
	border-color: var(--ladies-pink);
}

.ladies-share button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.ladies-share button .bi {
	font-size: 1.2rem;
	letter-spacing: 0;
}

/* the icons of the networks : no circle, larger */
.ladies-share .ladies-share-icon {
	width: auto;
	height: auto;
	border: 0;
	border-radius: 0;
	font-size: 1.75rem;
	line-height: 1;
}

.ladies-share {
	gap: 0.75rem 1.75rem;
}

/* "copy the link" : an outline button */
.ladies-share button {
	border: 1px solid rgba(255, 255, 255, 0.55);
	padding: 0.6rem 1.1rem;
	transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.ladies-share button:hover,
.ladies-share button.is-done {
	border-color: var(--ladies-pink);
	background-color: rgba(242, 0, 236, 0.08);
	color: var(--ladies-pink);
}
.ladies-share button {
	line-height: 1;
}