/* OVERRIDES DESKTOP */


/* ============================================================
   3. BASE
   ============================================================ */

html, body {
	font-size: 19px;
	line-height: 1.2em;
}


/* ============================================================
   4. LIENS & BOUTONS
   ============================================================ */

a, button {
	transition: color .5s ease !important;
	cursor: pointer;
}
a:hover, button:hover {
	text-decoration: none !important;
	transition: color .2s ease !important;
}
a:hover { color: var(--c-accent) !important; }
button:hover, .link:hover { color: black !important; }

a.pill_button {
	padding: .9em 1.3em 1em 1.3em;
	transition: all .3s ease;
}
a.pill_button::after {
	width: 0;
	margin: 0;
	opacity: 0;
}
a.pill_button:hover::after {
	width: .8em;
	opacity: 1;
	margin: 0 0 0 .4em;
}
a.pill_button:hover {
	color: white !important;
}


/* ============================================================
   5. TYPOGRAPHIE
   ============================================================ */

h2 {
	font-size: 1.5rem;
	line-height: 1.4em;
}


/* ============================================================
   7. LAYOUT — container / grille
   ============================================================ */

.container-fluid {
	padding: 1.5dvh 3vw 2.5dvh 3vw !important;
}


/* ============================================================
   8. NAVIGATION
   ============================================================ */

nav * {
	font-size: 1rem !important;
}

.navbar-brand::before {
	margin: .25em .4em 0 0;
}

.lang-toggle a {
	width: 30px;
	height: 30px;
}

nav.stick {
	padding: 0 3vw;
}
nav.stick .navbar-brand::before {
	margin-top: .25em !important; /* fix */
}

nav.footer, .portfolio nav.footer {
	left: 3vw;
	width: 94vw;
}
nav.footer .nav-link:first-child::before {
	float: left;
	content: "";
	background-size: 100% 100%;
	width: .82em;
	height: .82em;
	margin: .2em .5em 0 0;
}
nav.footer span {
	display: inline-block;
}
nav.footer a.icon::before {
	width: 1.3em;
	height: 1em;
}
nav.footer a.icon.ig::before {
	width: 1em;
	height: 1em;
}


/* ============================================================
   10. HOME — intro / hero
   ============================================================ */

.home .intro {
	position: relative;
	height: 96dvh;
}

.home h1 {
	min-height: 70vh;
	max-width: 1700px;
	margin: 3vh 0 0 0;

	font-size: clamp(3.2rem, calc(2rem + 2.5vw), 5.2rem) !important; /* Min — Adaptive — Max */
	text-align: center;
	text-transform: uppercase;
	line-height: 1em !important;
}

.home .intro p {
	position: absolute;
	bottom: 0;
	width: 80% !important;
	left: 10% !important;
	text-align: center;
	margin: 0;
}


/* ============================================================
   11. HOME — Instagram badge
   ============================================================ */

section#insta {
	position: absolute;
	bottom: 0;
	margin: 0;
}
section#insta a {
	width: 80px;
	height: 80px;
}
section#insta a:hover:after {
	opacity: .4;
	animation-play-state: running;
}


/* ============================================================
   12. HOME — badge "disponible"
   ============================================================ */

#available {
	width: 25vw;
	height: 25vw;
	max-width: 350px;
	max-height: 350px;
	top: 32vh;
	right: 6vw;
	font-size: .7rem;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: all ease .5s !important;
}
#available:hover {
	box-shadow: 0 2px 60px rgba(5, 25, 35, 0.3);
}
#available span {
	height: 9px;
	width: 9px;
}


/* ============================================================
   13. HOME — Bio
   ============================================================ */

#bio {
	flex-flow: row wrap;
	gap: 3vw;
	height: auto;
	margin-top: 10vh;
}
#bio div {
	padding: 3vw 2.5vw;
	border-radius: 3vw;
}
#bio * {
	font-size: clamp(2rem, calc(1rem + 1.8vw), 2.8rem); /* Min — Adaptive — Max */
}
#bio div a {
	margin: 5vw 0 0 0;
}


/* ============================================================
   14. HOME — Featured work (cards)
   ============================================================ */

.home .card {
	margin-bottom: 4vw; //target seulement les cards de la home
}
.card .img-container {
	transform-origin: center;
	transition: all .5s var(--ease-out-snap);
	backface-visibility: hidden;
	border-radius: .1vw;
}
.card:hover .img-container {
	transition: all .5s var(--ease-out-snap);
}
.card .img-container img {
	transition: transform .5s var(--ease-out-snap);
	backface-visibility: hidden;
}
.card:hover .img-container img {
	transform: translateZ(0) scale(1.048, 1.048);
	transition: transform 1s var(--ease-out-snap);
}
.card .img-container .new_tag {
	font-size: 1rem;
	padding: .4em .5em;
	padding-bottom: .5em;	
}
.card-body {
	margin-top: 1.2vw;
	backface-visibility: hidden;
}
.card .card-title {
	font-size: 1.2rem;
}
.card .btn-link {
	font-size: 1.2rem !important;
}
.card p.condensed {
	margin-top: 1.5em;
	transition: all .2s cubic-bezier(.57,0,.83,.67);
	backface-visibility: hidden;
}
.card:hover p.condensed {
	opacity: 1;
	transform: translateY(-.2em);
	transition: all .2s var(--ease-out-snap) .2s;
}


/* ============================================================
   15. CV
   ============================================================ */

#about h2 {
	font-size: 1.3rem;
}
.cv a.contact, .cv a.ig, .cv a.cv {
	font-size: 1em;
	padding: .6em .5em .6em 0;
	margin-top: 0;
}
.cv .clients {
	margin-top: .4rem !important;
}
.cv .clients * {
	font-size: .95em;
}


/* ============================================================
   16. PORTFOLIO — page projet
   ============================================================ */

.portfolio .intro div {
	margin-top: -10vh;
	transform: translateY(0);
}
.portfolio .intro div.blur {
	transform: translateY(-3em);
}
.portfolio .intro h1 {
	line-height: .9em !important;
	margin: 0;
	text-indent: 0;
	max-width: none;
}
.portfolio h1 {
	font-size: clamp(4rem, calc(2rem + 3.5vw), 7rem) !important; /* Min — Adaptive — Max */
	max-width: 16ch !important; /* longueur de ligne max */
}
.portfolio.noscroll nav.stick .navbar-brand {
	color: inherit !important;
}

.portfolio blockquote p {
	font-size: 6vw;
}

.portfolio figure {
	margin-bottom: 30vh;
}
.portfolio .mb-2, .portfolio .mb-md-2 {
	margin-bottom: 10vh !important;
}
.portfolio .mb-3, .portfolio .mb-md-3 {
	margin-bottom: 17vh !important;
}

.portfolio p.condensed {
	margin-bottom: 11vh;
}
.portfolio .container-fluid p.condensed {
	font-size: 1.2em;
}
.portfolio figcaption {
	font-size: .55rem;
}






.portfolio .sm-fullwidth {
	height: auto !important;
	aspect-ratio: auto !important;
	/* aspect-ratio: 3 / 2 !important; */
}
.portfolio .sm-fullwidth > div,
.portfolio .sm-fullwidth .style-lazy {
	width: 100vw;
	/* height: 100%; */
}

/* Code À SUPPRIMER une fois tous les case studies migrés vers render_media() (.style-lazy suffira) */
.portfolio .sm-fullwidth video,
.portfolio .sm-fullwidth img {
	width: 100vw;
	/* height: auto; */ /* OLD? à surveiller */
	/* height: 100%; */
}




/* Galerie masonry — nombre de colonnes en desktop */
.portfolio figure.card-columns.four-col      { column-count: 4 !important; }
.portfolio figure.card-columns.three-col,
.portfolio figure.card-columns.three-col-md  { column-count: 3 !important; }
.portfolio figure.card-columns.two-col,
.portfolio figure.card-columns.two-col-md    { column-count: 2 !important; }

.portfolio .container-fluid.black .back-home a {
	max-width: 10ch;
	font-size: clamp(3rem, 5vw, 6rem) !important; /* Min — Adaptive — Max */
}

/* Slider "peppermint" utilisé sur certains projets (ex. Biches) */
.peppermint figure img {
	width: 100%; /* fix */
}
.peppermint ul.peppermint-dots {
	height: 4rem;
}
.peppermint.dark-controls ul.peppermint-dots {
	height: 6rem;
}


/* ============================================================
   17. PANEL
   ============================================================ */

.panel .panel-container {
	width: 66%;
	right: -66%;
}
.panel.open .panel-container {
	transform: translateX(-99.9%);
}
.panel .panel-container div {
	padding-bottom: 10vh;
}
.panel .panel-container div h3 {
	font-size: clamp(2rem, calc(4vw + .5em), 6rem); /* Min — Adaptive — Max */
	line-height: .9em;
	margin-bottom: calc(1em + 1vw);
}
.panel .panel-container div h3 em {
	font-size: clamp(1.5rem, 2.1vw, 3rem); /* Min — Adaptive — Max */
}
.panel .panel-container p {
	font-size: clamp(1.5rem, 2.1vw, 3rem); /* Min — Adaptive — Max */
	margin-top: .6em;
}
.panel a.details {
	/* BUG ORIGINAL corrigé : ';' manquant entre bottom et padding rendait
	   toute la déclaration invalide (donc bottom ET padding ignorés).
	   Si le rendu actuel te convient tel quel, remets juste bottom: 2vh; */
	bottom: 2vh;
	padding: 0 5vw;
}


/* ============================================================
   18. FONTS USED
   ============================================================ */

.fonts-used {
	margin-bottom: 25vh;
}
.fonts-used h3 {
	font-size: 1rem;
}


/* ============================================================
   EXTRA LARGE — 1200px et plus
   ============================================================ */
@media (min-width: 1200px) {
	.cv .clients ul li {
		font-size: .8em;
	}

	/* .portfolio .sm-fullwidth > div,
	.portfolio .sm-fullwidth video,
	.portfolio .sm-fullwidth > img {
		width: 100vw;
		height: auto;
	} */

	.portfolio figure.card-columns,
	.portfolio figure.card-columns.two-col-md {
		column-count: 3;
	}
	.portfolio figure.card-columns.four-col {
		column-count: 5;
	}
	.portfolio figure.card-columns.four-col-forced {
		column-count: 4;
	}
}


/* ============================================================
   XXL — 1400px et plus
   Ajout du support d'espacement xxl (absent de Bootstrap 4)
   ============================================================ */
@media (min-width: 1400px) {

	.container {
		max-width: 1320px;
	}

	.d-xxl-none         { display: none !important; }
	.d-xxl-block        { display: block !important; }
	.d-xxl-flex         { display: flex !important; }
	.d-xxl-inline-block { display: inline-block !important; }

	.col-xxl-3  { flex: 0 0 25%;       max-width: 25%; }
	.col-xxl-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.col-xxl-6  { flex: 0 0 50%;       max-width: 50%; }
	.col-xxl-10 { flex: 0 0 83%;       max-width: 83%; }
	.col-xxl-12 { flex: 0 0 100%;      max-width: 100%; }
}