/* MOBILE-FIRST */

/* ============================================================
   1. VARIABLES GLOBALES
   ============================================================ */

:root {
	/* Couleurs de marque */
	--c-ink:    #12171A;  /* texte / fond sombre (panels, footer portfolio) */
	--c-cream:  #FFF7F4;  /* fond clair / texte sur fond sombre */
	--c-accent: #00A600;  /* vert — liens, accents, hover */
	--c-blush:  #EED9D1;  /* rose pâle — outline focus */
	--c-tag:    #ec0cdb;  /* rose vif — badge "new" */
	--c-muted:  #818181;  /* gris — sous-titres bio */

	/* Variantes transparentes réutilisées telles quelles dans le site */
	--c-ink-04:   rgba(5, 25, 35, .04);
	--c-ink-20:   rgba(5, 25, 35, .2);
	--c-ink-40:   rgba(5, 25, 35, .4);
	--c-cream-50: rgba(255, 247, 244, .5);
	--c-cream-85: rgba(255, 247, 244, .85);
	--c-white-50: rgba(255, 255, 255, .5);

	/* Typographie */
	--font-main: 'NeueMontreal', sans-serif;

	/* Timings d'easing récurrents */
	--ease-out-snap: cubic-bezier(.13,.32,.37,1);   /* cards, hovers image */
	--ease-elastic:  cubic-bezier(.57,.05,.71,.74);  /* logo, panel */
}


/* ============================================================
   2. FONTS (@font-face)
   ============================================================ */

@font-face {
	font-family: 'NeueMontreal';
	font-weight: normal; font-style: normal; font-display: fallback;
	src: url('_fonts/NeueMontreal-Medium.woff2') format('woff2'), url('_fonts/NeueMontreal-Medium.woff') format('woff');
}

@font-face {
	font-family: 'NeueMontreal';
	font-weight: 200; font-style: 200; font-display: fallback;
	src: url('_fonts/NeueMontreal-Regular.woff2') format('woff2'), url('_fonts/NeueMontreal-Regular.woff') format('woff');
}


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

html { scroll-behavior: smooth; } /* Animate anchoring */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* motion-sickness cure */

html, body {
	font-size: 16px;
	line-height: 1.4em;
}

body {
	background-color: var(--c-cream);
	padding: 0;
}

* {
	text-decoration: none !important;
	color: var(--c-ink);
	font-family: var(--font-main);
	font-weight: normal;
	letter-spacing: -.005em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background-color: none;
	color: var(--c-accent);
}

/* all Bootstrap columns paddings */
[class*='col-'] {
	padding: 0;
}

.row {
	margin: auto;
}


.bg-dark { /* Classe Bootstrap pour éléments sombres */
	background-color: var(--c-ink) !important;
}


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

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

.card, .btn, .form-control { border-radius: 0; }

.link {
	color: var(--c-ink) !important;
	border-bottom: .07em dotted rgba(0,0,0,.4);
}
.link:hover {
	border-bottom: .07em solid var(--c-ink);
}
.link, .btn-link {
	color: var(--c-accent);
}
.btn-link {
	font-size: 1.2rem;
}

a.read-more {
	padding: .8em 3em .8em 0 !important;
	color: var(--c-accent) !important;
}
a.read-more[aria-expanded="true"] {
	opacity: 0;
	transform: translateY(.3rem) !important;
	transition: all .2s ease !important;
}

/* Bouton pilule (CTA principal) */
a.pill_button {
	display: block;
	float: left;
	width: auto;
	height: auto;
	background-color: var(--c-ink);
	border-radius: 100px;
	font-size: 1.1rem !important;
	color: white !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	padding: .8em 1em 1em 1em;
}
a.pill_button::after {
	display: inline-block;
	content: "";
	background: url('../img/arrow2.svg') no-repeat;
	background-size: 100% 100%;
	transform: rotate(-45deg);
	width: .75em;
	height: .75em;
	margin: 0 0 0 .4em;
	vertical-align: middle;
	transition: all .3s ease-in-out;
}
a.pill_button.down::after {
	transform: rotate(90deg) !important;
}

/* Petite flèche animée (cards, liens "voir plus") */
.arrow {
	width: .55rem;
	height: .55rem;
	box-sizing: border-box;
	float: right;
	margin: .6rem 0 0 1rem;
	transform: rotate(135deg);
}
.arrow::before {
	content: '';
	width: 100%;
	height: 100%;
	border-width: .1em .1em 0 0;
	border-style: solid;
	border-color: var(--c-accent);
	display: block;
	transform-origin: 100% 0;
}
.arrow::after {
	content: '';
	float: left;
	position: relative;
	top: -100%;
	width: 100%;
	height: 100%;
	border-width: 0 .1em 0 0;
	border-style: solid;
	border-color: var(--c-accent);
	transform-origin: 65% 0;
	transition: transform .2s ease;
}
a:hover .arrow::after {
	transform: rotate(45deg);
	height: 100%;
}


/* ============================================================
   5. TYPOGRAPHIE (titres, texte courant)
   ============================================================ */

h1 {
	font-size: 12vw;
	font-family: var(--font-main);
	font-weight: 200;
	line-height: 1em !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h2 {
	font-size: 1.6rem;
	line-height: 2rem;
}

h3 {
	font-size: 1rem;
	line-height: 1.3rem;
}

p.condensed {
	font-family: var(--font-main);
	font-size: 1rem;
	text-transform: none !important;
	letter-spacing: normal;
	text-align: center;
}


/* ============================================================
   6. IMAGES — fixs génériques
   ============================================================ */

/* :has(> img[loading="lazy"]:not(.loaded)),
   :has(> video[loading="lazy"]:not(.loaded)) {
	   background-color: var(--c-ink-04);
	   border-radius: .3em;
   }
   
   img[loading="lazy"],
   video[loading="lazy"] {
	   opacity: 0;
	   transition: opacity .5s ease;
   }
   
   img[loading="lazy"].loaded,
   video[loading="lazy"].loaded {
	   opacity: 1;
   } */
   
   
   
   
:has(> .style-lazy:not(.loaded)) {
	   background-color: var(--c-ink-04);
	   border-radius: .3em;
	   overflow: hidden;
	   
	   /* 
	   
	   animation-duration: 2s;
		  animation-fill-mode: forwards;
		  animation-iteration-count: infinite;
		  animation-name: placeHolderShimmer;
		  animation-timing-function: linear;
		  background: var(--c-ink-04);
		  background: linear-gradient(to right, transparent 10%, rgba(255,255,255,.2) 18%, transparent 33%);
		  height: 100%; */
   }
   
   
   /* 
   @keyframes placeHolderShimmer{
	   0%{
		   background-position: -468px 0
	   }
	   100%{
		   background-position: 468px 0
	   }
   }
   */
   
   
   
   
   .style-lazy {
	   width: 100%;
	   height: auto;
	   display: block;
	   opacity: 0;
	   transition: opacity .5s ease;
   }
   
   .style-lazy.loaded {
	   opacity: 1;
   }
   
   
   
   
   


img.p-1 { /* fix padding color sur les .card */
	background-color: var(--c-cream);
}


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

.container-fluid {
	padding: 1vh 6vw !important;
	overflow: auto;
}


/* ============================================================
   8. NAVIGATION 
   header (.navbar), nav fixe (.stick), lang switch, footer (.footer)
   ============================================================ */

nav p, nav em, nav .nav-link {
	color: var(--c-ink);
	font-size: 1rem;
	font-style: normal;
}

.navbar-brand::before {
	float: left;
	content: "";
	background: url('../img/loguito.svg') no-repeat;
	background-size: 100% 100%;
	width: .82em;
	height: .82em;
	margin: .4em .4em 0 0;
	transition: transform .5s cubic-bezier(0.65,-0.24,0.32,1.42);
}
a.navbar-brand:hover { color: var(--c-ink) !important; }
a.navbar-brand:hover::before {
	transform: rotate(180deg);
	transition: transform .15s var(--ease-elastic);
}

.navbar .nav-link {
	padding: 0 .5em;
}

/* Logo qui tourne en boucle dans le footer */
.footer .navbar-brand::before {
	animation: rotation 4s infinite cubic-bezier(0.65,-0.55,0.32,1.42) !important;
	margin: .45em .5em 0 0;
}
@keyframes rotation { 15%, 50% {transform: rotate(360deg);} 65%, 100% {transform: rotate(360deg);} }

/* ------------------------------------------------------------
   Nav fixe basse (mobile) — .stick
   État par défaut fixé en CSS pur (règle de base ci-dessous),
   Le JS pilote les CHANGEMENTS après un scroll réel :
	 .nav-visible (Home)      : ajoutée pour montrer la nav
	 .nav-hidden  (Portfolio) : ajoutée pour cacher la nav
	 .nav-shadow  (Portfolio) : ajoutée pour l'ombre en réapparition
   ------------------------------------------------------------ */
nav.stick {
	position: fixed;
	width: 100vw;
	height: 70px;
	left: 0;
	bottom: -70px;
	display: flex !important;
	align-items: center !important;
	z-index: 9999;

	transform: translateY(0);
	background-color: var(--c-cream-50);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	transition: transform .25s ease-in-out;
}

/* HOME : apparition (le JS ajoute .nav-visible au scroll down) + ombre systématique */
.home.nav-visible nav.stick {
	transform: translateY(-70px);
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}
/* PORTFOLIO : ombre uniquement pilotée par le JS (nav-shadow) */
body.nav-shadow nav.stick {
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

nav.stick .details {
	height: 100%;
	margin: 0;
	display: flex;
	align-items: center;
	text-transform: lowercase;
}
nav.stick .details::before {
	content: none;
}
nav.stick .navbar-brand::before {
	margin-top: .4em !important; /* fix */
}


.portfolio nav.stick .nav-link span {
	display: block;
	width: .8em;
	height: .8em;
	margin: 0 0 0 .4em;
	background: url("../img/arrow.svg") left center no-repeat;
	transition: all .2s ease-in-out;
	transform: rotate(0deg);
}
.portfolio nav.stick .nav-link:first-child::before {
	margin-top: .12em;
}


/* Switch de langues */
.lang-toggle {
	display: inline-flex;
	border-radius: 100px;
	align-items: center;
}
.lang-toggle a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	font-size: .6em !important;
	font-weight: 500;
	letter-spacing: .08em;
	color: var(--c-ink-40);
	text-decoration: none !important;
	border-radius: 100px;
	margin-left: .3em;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.lang-toggle a:hover:not(.active) {
	color: var(--c-ink) !important;
}
.lang-toggle a.active {
	border: 1.1px solid var(--c-ink);
	color: var(--c-ink) !important;
	pointer-events: none;
}


/* Footer  */
nav.footer {
	/* position: fixed;
	left: 6vw;
	bottom: -70px; 
	width: 88vw;*/
	height: 70px;

	border-top: 1px solid var(--c-ink);
	z-index: 9000 !important;
	opacity: 0;
}
nav.footer > * {
	margin: .5rem 0 0 0;
	font-size: .8rem;
}
nav.footer .navbar-brand {
	padding-right: 0;
}
nav.footer .nav-link:last-child {
	padding-right: 0;
}
nav.footer a.icon::before {
	display: inline-block;
	content: "";
	background-size: 100%;
	width: 1.9em;
	height: 1.4em;
	margin: 0 .3em 0 0;
	vertical-align: middle;
	filter: none;
	transition: all .3s;
}
nav.footer a.icon.msg::before {
	background: url('../img/contact-mini.svg') no-repeat;
	background-position: center;
}
nav.footer a.icon.ig::before {
	width: 1.4em;
	height: 1.4em;
	background: url('../img/IG.svg') no-repeat;
	background-size: 100%;
}
nav.footer a span {
	transition: all .3s;
}
nav.footer a:hover span {
	color: var(--c-accent);
}
nav.footer a.icon:hover::before {
	filter: brightness(0) saturate(100%) invert(43%) sepia(55%) saturate(6730%) hue-rotate(104deg) brightness(103%) contrast(104%);
}


/* ============================================================
   9. SCROLL EVENTS (classes ajoutées en JS au scroll, mobile)
   ============================================================ */

/* On affiche le footer tout en bas */
body.isbottom nav.footer {
	opacity: 1;
	/* transform: translateY(-70px); */
	transition: all 0.5s cubic-bezier(0.9, 0, 0.1, 1);
}


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


.home .container-fluid {
	   padding-bottom: 0 !important;
}
   
.home .intro {
	position: relative;
	height: 98svh; /* svh = smallest vh (mobile) */
}

.home h1 {
	font-size: clamp(1.8rem, calc(1.5rem + 2.5vw), 2.2rem) !important; /* Min — Ideal — Max */
	line-height: 1.15em !important;
	letter-spacing: -.02em;
	font-weight: 400;
	margin: 3vh 0 0 0;
}

.home .intro p {
	font-size: .9em;
	line-height: 1.4em;
	position: absolute;
	left: 0;
	bottom: 0;
	margin: 0;
}

/* Forme SVG découpée (clip-path) derrière la vidéo hero */
.svg-mask {
	position: absolute;
	width: 0; height: 0; /* masquage du SVG */
}
.clipped {
	position: absolute;
	top: 40vw;
	left: calc(50vw - 200px);
	width: 400px;
	height: 520px;
	clip-path: url(#my-clip-path);
	z-index: -99;
}
.clipped video { z-index: -1; }
.clipped svg { z-index: 1; } /* stroke au-dessus de la vidéo */


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

section#insta {
	float: left;
	margin-top: 2vh;
	margin-left: -5px !important;
}
section#insta a {
	display: block;
	position: relative;
	width: 60px;
	height: 60px;
	background: url('../img/IG.svg') no-repeat center center var(--c-cream);
	background-size: 24%;
	border-radius: 50%;
}
section#insta a:after {
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	height: 100%;
	width: 100%;
	background: url('../img/dotted-circle-IG.svg') no-repeat center center;
	background-size: 90%;
	filter: none;
	transition: opacity .2s ease-in-out;

	animation:
		r linear infinite 30s,
		r linear infinite 70s
		reverse paused;
	animation-composition: add;
}
@keyframes r { to { rotate: 1turn; } }


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

#available {
	position: absolute;
	display: flex;
	width: 28vh;
	height: 28vh;
	min-width: 140px;
	min-height: 140px;
	max-width: 250px;
	max-height: 250px;

	top: 30vh;
	right: 5vw;
	font-size: .8rem;
	line-height: 1em;
	font-weight: 200;
	text-transform: uppercase;
	text-align: center;
	border-radius: 30em;
	background-color: var(--c-cream-50);
	box-shadow: 0 2px 60px rgba(5, 25, 35, 0.2);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	border: 1px solid var(--c-white-50);
	animation: float 6s ease-in-out infinite;

	/* Fix pour éviter le flickering derrière */
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	will-change: transform, backdrop-filter;
}
#available div {
	width: auto;
	height: auto;
	margin: auto;
	color: var(--c-ink);
}
#available span {
	display: block;
	height: 10px;
	width: 10px;
	background-color: var(--c-ink);
	border-radius: 50%;
	margin: 0 auto .5em auto;
}
@keyframes float {
	0%   { transform: translatey(0px); }
	50%  { transform: translatey(-15px); }
	100% { transform: translatey(0px); }
}


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

#bio {
	display: flex;
	flex-flow: column wrap;
	width: 100%;
	height: auto;
	gap: 2rem;
	margin: 5rem 0 15vh 0;
}
#bio * {
	font-size: clamp(1.8rem, calc(1.6rem + 1vw), 3.5rem); /* Min — Adaptive — Max */
	line-height: 1.15em;
	font-weight: 200;
}
#bio div {
	position: relative;
	display: inline-block;
	flex: 1;
	background: white;
	padding: 6vw 7vw;
	border-radius: 8vw;
}
#bio div h3, #bio div:nth-child(2) {
	color: var(--c-muted);
}
#bio ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#bio ul li::before {
	content: '';
	display: inline-block;
	height: .75em;
	width: .75em;
	vertical-align: middle;
	background: url('../img/tick.svg') no-repeat center;
	margin-right: .4em;
	margin-top: -.15em;
}
#bio div a {
	margin: 8vw 0 2vw 0;
}


/* ============================================================
   14. HOME — Featured work 
   ============================================================ */

#projects {
	margin-bottom: 10vh;
	width: auto;
	margin: auto;
}

#projects h2 {
	text-transform: capitalize;
}

.card {
	position: relative !important;
	padding: 0;
	background: none;
	font-size: 1rem;
	border: none;
	visibility: visible;
	opacity: 1;
	transition: transform 1s var(--ease-out-snap), opacity 1s var(--ease-out-snap) .4s;
	overflow: auto !important;
}
.home .card {
	margin-bottom: 5vw; //target seulement les cards de la home
}
.card.no-show {
	visibility: hidden;
	height: 0 !important;
	margin: 0 !important;
	opacity: 0;
	padding: 0 !important;
	transform: translateY(-3rem);
}
.card * {
	border-radius: 0;
	margin: 0;
	font-family: var(--font-main);
	letter-spacing: .01em;
}
.card .img-container {
	overflow: hidden;
	background-color: var(--c-ink-04);
	border-radius: 3vw;
	position: relative;
}
.card .img-container img {
	display: block;
	width: 100%;
}
.card .img-container .new_tag {
	position: absolute;
	top: .8rem;
	right: .6rem;
	padding: .2em .5em;
	padding-bottom: .3em;

	background: var(--c-tag);
	color: var(--c-cream);
	border-radius: .55rem;

	font-size: .9rem;
	font-weight: 400;
	box-shadow: 0 4px 30px rgba(107, 0, 124, 0.5);
	animation: rebond .4s ease-out infinite alternate;
}
@keyframes rebond {
	0%       { transform: translateY(0); } /* délai artificiel */
	80%,100% { transform: translateY(-4px); }
}

.card-body {
	margin-top: 5.5vw;
	padding: 0;
}
.card .card-title {
	font-size: 1.3rem;
	line-height: 1.2em;
	font-weight: 200;
	letter-spacing: -.007em;
	/* text-transform: capitalize; */
}
.card .btn-link {
	font-size: 1.1rem !important;
	font-weight: 200 !important;
	text-transform: none;
	opacity: .5;
	letter-spacing: -.007em;
	color: var(--c-ink) !important;
	width: 100%;
	float: left;
	clear: both;
	margin-top: .2em;
	text-align: left;
}
.card p.condensed {
	font-family: var(--font-main);
	width: auto !important;
	display: inline-block !important;
	background: rgba(69, 62, 43, 0.08);
	color: rgba(5,25,36,1);
	font-size: .6rem;
	letter-spacing: 0;
	text-transform: uppercase !important;
	margin-top: 1.5em;
	text-align: left;
	opacity: 0;
	padding: .03em .4em 0em .4em;
	border-radius: .25em;
}


/* ============================================================
   15. HOME - CV
   ============================================================ */

.row.cv {
	margin: 10vh 0 40vh 0;
}
.row.cv button {
	padding: .3rem .3rem .3rem 0;
}
.cv ul {
	padding: 0;
}
.cv ul li {
	list-style: none;
	font-size: .8em;
	line-height: 1.7em;
}
.cv h2 {
	margin-bottom: .3rem;
}
.cv small {
	display: block;
	margin-top: 1.5em;
	font-size: .9em;
	line-height: 1.5em;
}
.cv .clients * {
	text-transform: uppercase;
	font-size: .9rem;
	line-height: 1.6em;
}
.cv .clients ul li a {
	text-decoration: none;
	color: inherit;
}

/* Bloc "expériences" dépliable */
.collapse {
	opacity: 0;
	transform: translateY(-3.8em);
	transition: all .2s ease .2s;
	overflow: auto;
}
.collapse.show {
	visibility: visible;
	opacity: 1;
}
.collapsing {
	opacity: 0;
	transform: translateY(-4.1rem);
	transition: all .2s ease-out;
}
.cv div.collapse h2:nth-child(2)::after {
	display: inline-block;
	content: "";
	background: url('../img/fierce.png') no-repeat;
	background-size: 100% 100%;
	width: .9em;
	height: .9em;
	margin: 0 0 0 .2em;
	vertical-align: middle;
	animation: fierce 1s infinite ease-in alternate;
}
@keyframes fierce { 60%,70% {transform: scale(1);} 90%,100% {transform: scale(1.2);} }
.cv div.collapse figure {
	background-color: var(--c-cream);
}
.cv div.collapse figure img {
	border-radius: 1rem !important;
	mix-blend-mode: multiply;
	opacity: .95;
}
.cv div.collapse figure figcaption {
	font-size: 1em;
	line-height: 1.2em;
	color: rgba(0,0,0,.7);
}

/* Icônes de contact (mail / instagram / cv) */
.cv a.contact, .cv a.ig, .cv a.cv {
	width: auto;
	font-size: 1.2em;
	color: var(--c-ink);
	padding: .8em .5em .8em 0;
	transition: all .5s !important;
}
.cv a.contact::before, .cv a.ig::before, .cv a.cv::before {
	display: inline-block;
	content: "";
	background-repeat: no-repeat;
	background-position: center;
	background-size: 90% 90%;
	width: 1em;
	height: 1em;
	margin: 0 .3em 0 0;
	vertical-align: middle;
	transition: all .5s;
}
.cv a.contact::before { background-image: url('../img/contact-mini.svg'); }
.cv a.ig::before      { background-image: url('../img/IG.svg'); }
.cv a.cv::before      { background-image: url('../img/cv.svg'); }

.cv a.contact:hover::before, .cv a.ig:hover::before, .cv a.cv:hover::before {
	filter: brightness(0) saturate(100%) invert(43%) sepia(55%) saturate(6730%) hue-rotate(104deg) brightness(103%) contrast(104%);
	transition: all .2s;
}
.cv a.contact:hover, .cv a.ig:hover, .cv a.cv:hover {
	transition: all .2s !important;
}


/* ============================================================
   16. PORTFOLIO — page projet (structure générale)
   ============================================================ */

body.portfolio {
	padding: 0;
}
.portfolio.noscroll {
	overflow: hidden;
}
.no-bg {
	background-color: transparent !important;
}

/* ------------------------------------------------------------
   PORTFOLIO : nav.stick visible par défaut, sans ombre
   .nav-hidden fait disparaître la nav (scroll down)
   .nav-shadow ajoute l'ombre (réapparition en scroll up uniquement)
   ------------------------------------------------------------ */
.portfolio nav.stick {
	bottom: 0;
	transform: translateY(0);
	animation-fill-mode: forwards;
	transition: all .25s ease-in-out;
}
.portfolio.nav-hidden nav.stick {
	transform: translateY(70px);
}

.portfolio nav.stick .nav-link {
	color: var(--c-ink);
}
.portfolio nav.stick .nav-link:hover {
	color: var(--c-ink) !important;
}

/* Écran d'intro (titre du projet en plein écran) */
.portfolio .intro {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 0 !important;
	padding: 3.5vh 5vw;
	height: 100vh;
	background-color: var(--c-cream);
	animation: .5s ease-out .5s 1 entrance;
	animation-fill-mode: both;
}
.portfolio .intro div {
	margin-top: -10vh;
}
.portfolio .intro h1 {
	font-family: var(--font-main);
	text-align: center;
	font-size: 15vw;
	text-transform: uppercase;
	letter-spacing: -.03em;
	max-width: inherit;
	margin: 0;
	margin-top: -10vh;
}
.portfolio .intro p.condensed {
	display: block;
	font-family: var(--font-main);
	font-size: 1rem;
	text-transform: none;
	letter-spacing: 0;
	margin: .5em auto !important;
}
@keyframes entrance {
	0%   { transform: scale(.95); opacity: 0; }
	20%  { opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}

.portfolio blockquote p {
	font-size: clamp(3.2rem, 8vw, 7rem) !important; /* Min — Adaptive — Max */
	letter-spacing: -.01em;
	font-family: var(--font-main);
	line-height: .9em;
	font-weight: 200;
}

.portfolio .container-fluid {
	position: relative;
	background: var(--c-cream);
	z-index: 8000 !important;
	padding: 0 !important;
}
.portfolio .container-fluid.full-width {
	padding-left: 0;
	padding-right: 0;
	margin-top: 100vh;
}

.portfolio figure {
	margin-bottom: 30vw;
}
.portfolio figure.dark-bg {
	background-color: var(--c-ink);
}
.portfolio .mb-2 {
	margin-bottom: 10vw !important;
}
.portfolio .mb-3 {
	margin-bottom: 15vw !important;
}
.portfolio figure img {
	width: 100%;
}

.portfolio p.condensed {
	margin-bottom: 6vh;
	line-height: 1.3em !important;
}
.portfolio .container-fluid p.condensed {
	display: inline;
	text-align: center;
	font-size: 1em;
	letter-spacing: -.005em;
	text-transform: none;
	border-bottom: .075em solid var(--c-ink);
}
.portfolio .container-fluid p.condensed::before { /* Trick pour multilignes */
	content: ' ';
	display: block;
}

.portfolio figcaption {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 0 .4em;
	font-size: .6rem;
	line-height: 2em;
	color: var(--c-cream);
	background: var(--c-ink);
	opacity: 0;
	transform: translateY(1em);
	transition: all .1s ease-in;
}
.portfolio figure:hover > figcaption,
.portfolio figure div:hover > figcaption {
	opacity: 1;
	transform: translateY(0);
	transition: all .2s ease-out .5s;
}
.portfolio figcaption.out {
	width: 100%;
	height: 40px;
	bottom: -40px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-ink);
	background: none;
	text-align: center;
}
.portfolio figcaption.in {
	background: none !important;
	color: var(--c-ink);
	width: 100%;
	text-align: center;
}

.portfolio .card {
	/* background-color: var(--c-ink-04); */
	overflow: hidden !important;
}
.portfolio .card .no-bg {
	background-color: transparent;
}
.portfolio .card.rounded figcaption {
	width: 100%;
	text-align: center;
	padding: .2em .4em;
	background: none;
}

/* Ratios vidéo custom */
.embed-responsive-3by2 { padding-bottom: 66% !important; }
.embed-responsive-16by20 { padding-bottom: 125% !important; }

.portfolio .sm-fullwidth {
	display: block;
	height: auto;
	/* aspect-ratio: 4 / 3; */
	/* height: 100%; */
}
.portfolio .sm-fullwidth:nth-of-type(1) { /* Première image du projet */
	aspect-ratio: 5 / 6;
}
.portfolio .sm-fullwidth:nth-of-type(1) div, .portfolio .sm-fullwidth:nth-of-type(1) img { 
	height: 100%;
}


.portfolio .sm-fullwidth > div,
/* .portfolio .sm-fullwidth > div > div, */
.portfolio .sm-fullwidth .style-lazy {
	display: block;
	width: auto;
	/* height: 100%; */
	aspect-ratio: auto;
	object-fit: cover;
	max-height: 100%;
	border-radius: 1px; /* fix anti-artefact */
	/* transition: height .5s ease-in-out; */
}

/* Code suivant À SUPPRIMER une fois tous les case studies migrés vers render_media() (.style-lazy suffira) */
.portfolio .sm-fullwidth video,
.portfolio .sm-fullwidth img {
	display: block;
	width: auto;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	max-height: 100%;
	border-radius: 1px;
}






.portfolio div.embed-responsive, .portfolio video {
	background-color: var(--c-cream);
}
.portfolio video {
	position: relative;
}

/* Bouton mute/unmute vidéo */
.mute-video, .mute-video:link, .mute-video:visited, .mute-video:focus {
	display: block;
	background-color: transparent;
	width: 6em;
	height: 3em;
	border: none;
	outline: none;
}
.mute-video::before {
	float: left;
	content: "";
	background: url('../img/mute.svg') no-repeat;
	background-size: 200% 200%;
	background-position: center bottom;
	width: 100%;
	height: 100%;
}
.mute-video.unmute-video::before {
	background-position: center top;
}

/* Galerie masonry (colonnes CSS) */
.portfolio figure.card-columns              { column-count: 2; }
.portfolio figure.card-columns.four-col-forced { column-count: 3; }
.portfolio figure.card-columns.four-col     { column-count: 3; }
.portfolio figure.card-columns.three-col    { column-count: 2; }
.portfolio figure.card-columns.two-col-sm   { column-count: 2 !important; }
.portfolio figure.card-columns.two-col      { column-count: 1; }
.portfolio figure.card-columns .card {
	display: block;
}
.portfolio figure .card.rounded {
	border-radius: .2rem !important;
}
.portfolio.veryrounded figure .card.rounded {
	border-radius: 1.5rem !important;
}
.portfolio iframe {
	background-color: var(--c-ink-04);
}

/* Nav / footer en mode "noscroll" (intro plein écran) sur fond sombre */
.portfolio.noscroll nav.stick {
	background-color: transparent;
}
.portfolio.noscroll nav.stick .nav-link {
	color: var(--c-cream) !important;
	transition: color .5s ease-in-out !important;
}
.portfolio.noscroll nav.stick .details span {
	filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(134deg) brightness(112%) contrast(101%);
	transform: rotate(180deg);
}
.portfolio.noscroll nav.navbar-brand {
	color: inherit !important;
}

.portfolio nav.footer {
	position: absolute;
	bottom: 0;
	left: 6vw;
	width: 88vw;
	border-color: var(--c-cream-85);
}
.portfolio nav.footer * {
	color: var(--c-cream-85);
}
.portfolio nav.footer a::before {
	filter: brightness(100%) saturate(100%) invert(100%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(100%) contrast(100%);
	opacity: .85;
	transition: filter .2s ease, opacity .2s ease;
}
.portfolio nav.footer a:last-child:hover::before {
	filter: brightness(0%) saturate(100%) invert(43%) sepia(55%) saturate(6730%) hue-rotate(104deg) brightness(103%) contrast(104%);
	opacity: 1;
}

/* Écran de fin de projet (fond sombre, retour à l'accueil) */
.portfolio .container-fluid.black {
	position: relative;
	width: 100vw;
	height: 100vh;
	margin-top: -1px; /* fix ligne blanche résiduelle */
	margin-bottom: 0 !important;
	padding: 0 3vw;
	background-color: var(--c-ink);
}
.portfolio .container-fluid.black .back-home {
	width: 100%;
}
.portfolio .container-fluid.black .back-home a {
	display: block;
	width: 100%;
	line-height: 1em;
	font-family: var(--font-main);
	font-weight: 200;
	text-align: center;
	font-size: 15vw;
	text-transform: uppercase;
	padding: 0 !important;
	color: var(--c-cream);
	margin: -100px auto 0 auto;
}
.portfolio .container-fluid.black nav {
	border-color: var(--c-cream);
}
.portfolio .container-fluid.black nav * {
	color: var(--c-cream);
}


/* ============================================================
   17. PANEL — menu plein écran (overlay)
   ============================================================ */

.panel {
	position: fixed;
	top: 0;
	right: 0;
	width: 100vw;
	height: 100vh;
	visibility: hidden;
	z-index: 9999;
	transition: visibility 0s .9s;
}
.panel.open {
	visibility: visible;
	transition: visibility 0s 0s;
}
.panel .bg { /* overlay */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--c-cream-85);
	cursor: pointer;
	z-index: 1000;
	opacity: 0;
	transition: opacity .3s ease .5s;
}
.panel.open .bg {
	opacity: 1;
	transition: opacity .3s ease;
}
.panel .panel-container {
	position: fixed;
	width: 100%;
	height: 100vh;
	right: -100%;
	background: var(--c-ink);
	z-index: 2000;
	color: var(--c-cream);
	overflow: auto;
	transform: translateX(0);
	transition: transform .2s var(--ease-elastic);
}
/* Masquer la scrollbar */
.panel-container::-webkit-scrollbar { display: none; }
.panel-container { scrollbar-width: none; }

.panel-container * {
	color: var(--c-cream);
}
.panel.open .panel-container {
	transform: translateX(-100%);
	transition: transform .5s ease .4s;
}
.panel .panel-container div {
	height: auto;
	padding: 6vh 8vw 30vh 8vw;
}
.panel .panel-container div h3 {
	font-size: clamp(2.6rem, calc(2.2rem + 2.6vw), 7rem); /* Min — Adaptive — Max */
	line-height: 1em;
	font-family: var(--font-main);
	font-weight: 200;
	font-style: normal;
	text-transform: none;
	margin-bottom: 7vh;
}
.panel .panel-container div h3 em {
	display: inline-block;
	font-size: clamp(1.2rem, 5.5vw, 2.2rem); /* Min — Adaptive — Max */
	font-family: var(--font-main);
	font-weight: 200;
	font-style: normal !important;
	line-height: 1.4em;
	text-transform: none;
	margin-top: .2em;
	opacity: .4;
}
.panel .panel-container p {
	font-weight: 200;
	font-size: clamp(1.2rem, 5.5vw, 2.2rem); /* Min — Adaptive — Max */
	line-height: 1.4em;
	margin-top: .25vh;
	width: 100%;
}
.panel .panel-container p a {
	font-weight: 200;
	color: var(--c-cream) !important;
	text-decoration: none !important;
	border-bottom: .07em dotted rgba(255,255,255,.4) !important;
}
.panel .panel-container p a:hover {
	border-bottom: .05em solid rgba(255,255,255,1) !important;
}


/* ============================================================
   18. FONTS USED (bloc crédits typographiques)
   ============================================================ */

.fonts-used {
	margin-bottom: 20vh;
}


/* ============================================================
   19. PEPPERMINT SLIDER (carrousel — styles requis par le plugin)
   ============================================================ */

.peppermint.peppermint-active {
	position: relative;
	overflow: hidden;
	padding-left: 0;
	padding-right: 0;
}
.peppermint.peppermint-active .peppermint-slides {
	position: relative;
	overflow: hidden; /* clearfix */
	touch-action: pan-y;
}
.peppermint.peppermint-active .peppermint-slides > * {
	float: left;
	margin: 0;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
	tap-highlight-color: transparent;
}
.peppermint.peppermint-active .peppermint-slides a:active,
.peppermint.peppermint-active .peppermint-slides a:active img {
	outline: none;
}
.peppermint.peppermint-active,
.peppermint.peppermint-active .peppermint-dots,
.peppermint.peppermint-active .peppermint-slides,
.peppermint.peppermint-active .peppermint-slides > * {
	transform: translate3d(0,0,0);
	backface-visibility: hidden;
}
.peppermint.peppermint-mouse .peppermint-slides {
	-webkit-user-select: none;
	user-select: none;
	cursor: move;
	cursor: grab;
}
.peppermint.peppermint-mouse .peppermint-slides:hover {
	cursor: move;
	cursor: grab;
}
.peppermint.peppermint-mouse.peppermint-drag .peppermint-slides * {
	cursor: move;
	cursor: grabbing;
}

/* Apparence par défaut */
.peppermint {
	position: relative;
	text-align: center;
	height: auto !important;
}
.peppermint > div {
	height: auto !important;
}
.peppermint figure {
	width: auto;
	height: auto;
}
.peppermint figure img {
	vertical-align: middle;
	max-width: 100%;
	width: 100%;
}

ul.peppermint-dots {
	margin-top: 1rem;
	padding: 0;
	text-align: center;
	list-style-type: none;
	width: 100%;
	height: 3rem;
}
ul.peppermint-dots > li {
	display: inline-block;
	position: relative;
	top: 20%;
	width: 2.2rem;
	height: 60%;
	margin: 0 .4vw;
	padding: 0.8rem 0.2rem;

	cursor: pointer;
	text-align: center;
	vertical-align: middle;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
ul.peppermint-dots > li.peppermint-mouse-clicked,
ul.peppermint-dots > li:active,
ul.peppermint-dots > li:focus {
	outline: 0;
}
ul.peppermint-dots > li > span {
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	margin-top: -1px;
	border-radius: 2px;
	background-color: var(--c-ink);
	opacity: .2;
}
ul.peppermint-dots > li.peppermint-active-dot > span {
	background-color: var(--c-accent);
	opacity: 1;
}

.peppermint.dark-controls ul.peppermint-dots {
	margin: 0 !important;
	position: absolute;
	height: 4rem;
	bottom: 0;
	background: linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 100%);
}
.peppermint.dark-controls ul.peppermint-dots > li > span {
	background-color: var(--c-cream);
	opacity: .4;
}
.peppermint.dark-controls li.peppermint-active-dot > span {
	opacity: 1 !important;
}