/* VARIABLES */

:root {
  --coeff: 1;
  --coeff-nav: 1;
  --coeff-typo: 1;

  --xxxs: 0.375rem;
  --xxs: 0.625rem;
  --xs: 0.85rem;
  --s: 0.96rem;
  --m: calc(1.4rem * var(--coeff-typo));
  --l: calc(1.8rem * var(--coeff-typo));
  --xl: calc(2.4rem * var(--coeff-typo));
  --xxl: 3rem;
  --xxxl: 4rem;
  --gap: 36px;

  --fw100: 100;
  --fw200: 200;
  --fw300: 300;
  --fw400: 400;
  --fw500: 400;
  --fw600: 600;
  --fw700: 700;
  --fw800: 800;

  --light-grey: #e9ecec;
  --light-grey2: #c1caca;
  --medium-grey: #9c9e9f;
  --grey: #65696a;
  --dark-grey: #393b3a;
  --mustard: #d9c84b;
  --mustard2: #a3a521;
  --rasp: #d60d47;
  --rasp2: #9e0b2a;
  --green: #0c2b25;
}


/* GENERAL */

*, h1, h2, h3, h4, h5, h6, ::before, ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-radius: 0;
  border: none;
  box-sizing: border-box;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  font-size: var(--s);
  line-height: 1.5;
  color: var(--dark-grey);
  letter-spacing: 0;
  text-align: left;
  text-decoration: none;
  list-style: none;
  scroll-behavior: smooth;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  background: var(--white);
  font-family: "Ubuntu Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

body {
  counter-reset: compteur;
}

.titre {
  font-family: "Capriola", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: var(--xl);
  letter-spacing: -0.025rem;
  color: black;
}

p {
  margin-bottom: 10px;
}

strong {
  font-weight: 700;
}

figcaption {
  font-size: var(--xs);
  line-height: 1.2;
}

a:hover {
  color: var(--mustard);
}

img {
	border: none;
	max-width: 100%;
	object-fit: contain;
}

figcaption {
  color: var(--grey);
  font-style: oblique;
}

.btn,
input[type="submit"] {
	display: inline-block;
	color: white;
  background-color: var(--rasp);
	border-radius: var(--xxxs);
	padding: var(--xxxs) var(--xs);
  margin: 5px;
}

.btn:hover,
input[type="submit"]:hover {
  color: white;
  border-bottom-right-radius: 20px;
}

.center {text-align: center;}

.left {text-align: left;}

.right {text-align: right;}

.justify {
  text-align: justify;
  text-justify: inter-word;
}

.border {border: var(--medium-grey) solid 1px;}

.bt {border-top: var(--dark-grey) solid 1px;}

.bb {border-bottom: var(--dark-grey) solid 1px;}

.overflow-hidden {overflow: hidden;}


/* FONT SIZE */

.fsxxxs {font-size: var(--xxxs);}
.fsxxs {font-size: var(--xxs);}
.fsxs {font-size: var(--xs);}
.fss {font-size: var(--s);}
.fsm {font-size: var(--m);}
.fsl {font-size: var(--l);}
.fsxl {font-size: var(--xl);}
.fsxxl {font-size: var(--xxl);}
.fsxxxl {font-size: var(--xxxl);}


/* FONT WEIGHT */

.fw100 {
  font-family: "Ubuntu Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.fw200 {
  font-family: "Ubuntu Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.fw300 {
  font-family: "Ubuntu Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.fw400 {
  font-family: "Ubuntu Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.fw500 {
  font-family: "Ubuntu Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.fw600 {
  font-family: "Ubuntu Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.fw700 {
  font-family: "Ubuntu Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.fw800 {
  font-family: "Ubuntu Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}


/* COLORS */

.white {color: white;}
.black {color: black;}
.mustard {color: var(--mustard);}
.mustard2 {color: var(--mustard2);}
.rasp {color: var(--rasp);}
.rasp2 {color: var(--rasp2);}
.light-grey {color: var(--light-grey);}
.medium-grey {color: var(--medium-grey);}
.grey {color: var(--grey);}
.dark-grey {color: var(--dark-grey);}
.bg-white {background: white;}
.bg-black {background: black;}
.bg-grey {background: var(--grey);}
.bg-dark-grey {background: var(--dark-grey);}
.bg-green {background: var(--green);}


/* STRUCTURE */

.container {
  max-width: 1400px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: calc(var(--gap) * var(--coeff));
  margin: 0 auto;
  padding-left: calc(50px * var(--coeff));
  padding-right: calc(50px * var(--coeff));
  align-items: flex-start;
}

.mw800 {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.mt-nav {
  margin-top: calc(180px * var(--coeff-nav));
}

.mt0 {margin-top: 0;}
.mt10 {margin-top: calc(10px * var(--coeff));}
.mt25 {margin-top: calc(25px * var(--coeff));}
.mt50 {margin-top: calc(50px * var(--coeff));}
.mt75 {margin-top: calc(75px * var(--coeff));}
.mt100 {margin-top: calc(100px * var(--coeff));}

.mb0 {margin-bottom: 0;}
.mb10 {margin-bottom: calc(10px * var(--coeff));}
.mb25 {margin-bottom: calc(25px * var(--coeff));}
.mb50 {margin-bottom: calc(50px * var(--coeff));}
.mb75 {margin-bottom: calc(75px * var(--coeff));}
.mb100 {margin-bottom: calc(100px * var(--coeff));}

.ml0 {margin-left: 0;}
.ml10 {margin-left: calc(10px * var(--coeff));}
.ml25 {margin-left: calc(25px * var(--coeff));}
.ml50 {margin-left: calc(50px * var(--coeff));}
.ml75 {margin-left: calc(75px * var(--coeff));}
.ml100 {margin-left: calc(100px * var(--coeff));}

.mr0 {margin-right: 0;}
.mr10 {margin-right: calc(10px * var(--coeff));}
.mr25 {margin-right: calc(25px * var(--coeff));}
.mr50 {margin-right: calc(50px * var(--coeff));}
.mr75 {margin-right: calc(75px * var(--coeff));}
.mr100 {margin-right: calc(100px * var(--coeff));}

.pt0 {padding-top: 0;}
.pt10 {padding-top: calc(10px * var(--coeff));}
.pt25 {padding-top: calc(25px * var(--coeff));}
.pt50 {padding-top: calc(50px * var(--coeff));}
.pt75 {padding-top: calc(75px * var(--coeff));}
.pt100 {padding-top: calc(100px * var(--coeff));}

.pb0 {padding-bottom: 0;}
.pb10 {padding-bottom: calc(10px * var(--coeff));}
.pb25 {padding-bottom: calc(25px * var(--coeff));}
.pb50 {padding-bottom: calc(50px * var(--coeff));}
.pb75 {padding-bottom: calc(75px * var(--coeff));}
.pb100 {padding-bottom: calc(100px * var(--coeff));}

.pl0 {padding-left: 0;}
.pl10 {padding-left: calc(10px * var(--coeff));}
.pl25 {padding-left: calc(25px * var(--coeff));}
.pl50 {padding-left: calc(50px * var(--coeff));}
.pl75 {padding-left: calc(75px * var(--coeff));}
.pl100 {padding-left: calc(100px * var(--coeff));}

.pr0 {padding-right: 0;}
.pr10 {padding-right: calc(10px * var(--coeff));}
.pr25 {padding-right: calc(25px * var(--coeff));}
.pr50 {padding-right: calc(50px * var(--coeff));}
.pr75 {padding-right: calc(75px * var(--coeff));}
.pr100 {padding-right: calc(100px * var(--coeff));}


.flexrow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flexcolumn {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
}

.col100 {flex: 100%;}

.col75 {flex: 0 calc(75% - (var(--gap) * var(--coeff)) + calc(var(--gap) * calc(0.75 * var(--coeff))));}

.col70 {flex: 0 calc(70% - (var(--gap) * var(--coeff)) + calc(var(--gap) * calc(0.7 * var(--coeff))));}

.col66 {flex: 0 calc(66.6666% - (var(--gap) * var(--coeff)) + calc(var(--gap) * calc(0.6666 * var(--coeff))));}

.col60 {flex: 0 calc(60% - (var(--gap) * var(--coeff)) + calc(var(--gap) * calc(0.6 * var(--coeff))));}

.col50 {flex: 0 calc(50% - (var(--gap) * var(--coeff)) + calc(var(--gap) * calc(0.5 * var(--coeff))));}

.col33 {flex: 0 calc(33.3333% - (var(--gap) * var(--coeff)) + calc(var(--gap) * calc(0.3333 * var(--coeff))));}

.col30 {flex: 0 calc(30% - (var(--gap) * var(--coeff)) + calc(var(--gap) * calc(0.3 * var(--coeff))));}

.col25 {flex: 0 calc(25% - (var(--gap) * var(--coeff)) + calc(var(--gap) * calc(0.25 * var(--coeff))));}

.ancre {
  display: block;
  height: calc(180px * var(--coeff-nav));
  margin-top:calc(-180px * var(--coeff-nav));
  visibility: hidden;
}

section {
    /* Ajustez les 100px selon la hauteur réelle de votre header fixe */
    scroll-margin-top: calc(180px * var(--coeff-nav)); 
}


/* NAV */

nav {
  position: fixed;
  z-index: 100;
  top: 0;
  width: 100%;
  height: calc(180px * var(--coeff-nav));
  background: white;
  /*background: rgba(255,255,255,.8);
  backdrop-filter: blur(20px);*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  border-bottom: solid 1px;
  border-image: linear-gradient(90deg, rgba(0,0,0,0) 25%, rgba(0,0,0,.25) 50%, rgba(0,0,0,0) 75%) 1;
  border-image-outset: 1px;
}

nav .logo {
  float: left;
  max-width: calc(170px * var(--coeff-nav));
  padding: calc(25px * var(--coeff-nav)) 0 calc(5px * var(--coeff-nav));
}

.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
	color: #000;
  padding: 0 calc(20px * var(--coeff-nav)) calc(10px * var(--coeff-nav)) ;
}

.menu li {
	display: inline-block;
	margin: 0 calc(20px * var(--coeff));
}

.menu-boutique:hover {
  color: var(--rasp);
}


/* INTRO */

#accueil {
  background: linear-gradient(135deg, var(--green), black);
  border-radius: calc(25px * var(--coeff));
  border-bottom-right-radius: calc(150px * var(--coeff));
}

.intro {
  justify-content: center;
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  gap: calc(var(--gap) * var(--coeff));
  padding: calc(75px * var(--coeff-nav)) calc(50px * var(--coeff)) calc(75px * var(--coeff-nav)) calc(50px * var(--coeff));
}

.diaporama {
  position: relative;
  width: calc(clamp(1.5rem, 0.25rem + 3vw, 4rem) * 7);
  height: calc(clamp(1.5rem, 0.25rem + 3vw, 4rem) * 7);
  /*width: clamp(13.25rem, 0.25rem + 20vw, 23.75rem);
  height: clamp(13.25rem, 0.25rem + 20vw, 23.75rem);*/
}

.slide1, .slide2, .slide3, .slide4, .slide5, .slide6 {
	position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.slide1 {
  -webkit-animation: 18s ease-in-out infinite fadeInOut 0s;
	-moz-animation: 18s ease-in-out infinite fadeInOut 0s;
	animation: 18s ease-in-out infinite fadeInOut 0s;
}

.slide2 {
  -webkit-animation: 18s ease-in-out infinite fadeInOut 3s;
	-moz-animation:18s ease-in-out infinite fadeInOut 3s;
	animation: 18s ease-in-out infinite fadeInOut 3s;
}

.slide3 {
  -webkit-animation: 18s ease-in-out infinite fadeInOut 6s;
	-moz-animation: 18s ease-in-out infinite fadeInOut 6s;
	animation: 18s ease-in-out infinite fadeInOut 6s;
}

.slide4 {
  -webkit-animation: 18s ease-in-out infinite fadeInOut 9s;
	-moz-animation: 18s ease-in-out infinite fadeInOut 9s;
	animation: 18s ease-in-out infinite fadeInOut 9s;
}

.slide5 {
  -webkit-animation: 18s ease-in-out infinite fadeInOut 12s;
	-moz-animation: 18s ease-in-out infinite fadeInOut 12s;
	animation: 18s ease-in-out infinite fadeInOut 12s;
}

.slide6 {
  -webkit-animation: 18s ease-in-out infinite fadeInOut 15s;
	-moz-animation: 18s ease-in-out infinite fadeInOut 15s;
	animation: 18s ease-in-out infinite fadeInOut 15s;
}

h1, h1 span {
	font-size: clamp(1.5rem, 0.25rem + 3vw, 4rem);
}


/* PRESTATIONS */

#prestations img {
  margin-bottom: 15px;
}

#prestations ul , #boutique ul {
  margin-bottom: 25px;
  list-style: outside;
}

#prestations li, #boutique li {
  font-weight: 600;
}

#prestations li::before, #boutique li::before {
  content: "• ";
  color: var(--mustard);
}


/* PORTFOLIO */

.lightbox {
	display: none;
}

.lightbox:target {
	position: fixed;
	display: flex;
	z-index: 200;
	background: #000000e0;
  backdrop-filter: blur(calc(5px * var(--coeff)));
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
  align-items: center;
  justify-content: center;
}

.image {
	max-height: 95vh;
	max-width: 95vw;
}

.close {
	position: absolute;
}

.close span {
	position: absolute;
	top: calc(var(--m) * var(--coeff));
	right: calc(var(--m) * var(--coeff));
	background: #ffffffaa;
	width: 40px;
	height: 40px;
	border-radius: 23px;
	color: var(--dark-grey);
	font-size: 40px;
}

/*figure img {
  box-shadow: 0 0 10px black;
  clip-path: content-box;
}*/

figure img:hover {
  border-bottom-right-radius: calc(50px * var(--coeff));
}

/*#portfolio img:hover {
  box-shadow: rgba(0,0,0,.4) 0 0 10px;
}*/

.zoom-in {
  cursor: zoom-in;
}

.zoom-out {
  cursor: zoom-out;
}

/* FILTRES */

input[type="radio"] {
  display: none;
}

label {
  display: inline-block;
  font-size: var(--xs);
  font-weight: var(--fw600);
	border-radius: var(--xxxs);
	padding: 3px 8px;
  margin: 3px calc(3px * var(--coeff));
  cursor: pointer;
}

input[type="radio"]:checked + label {
  color: white;
  background-color: var(--mustard);
  cursor: default;
}

label:hover {
  color: black;
  background-color: var(--light-grey);
}

#portfolio:has(#filtre-logos:checked) figure:not(.logo-item),
#portfolio:has(#filtre-supports:checked) figure:not(.support-item),
#portfolio:has(#filtre-packaging:checked) figure:not(.packaging-item),
#portfolio:has(#filtre-signaletique:checked) figure:not(.signaletique-item),
#portfolio:has(#filtre-vectoriel:checked) figure:not(.vectoriel-item) {
  display: none;
}


/* BOUTIQUE LOGOS */

.item {
  position : relative; 
  display : inline-block; 
}

.numero {
  counter-increment: compteur;
  position : absolute;
  display : block;
  color: white;
  font-size: var(--s);
  font-weight: var(--fw600);
  text-align: center;
  background-color: var(--rasp);
  top : 1px; 
  left : 1px;
  padding: 5px 10px;
}

.numero:before {
  content: counter(compteur);
  color: white;
  font-size: var(--s);
  font-weight: var(--fw600);
}

.prix {
  font-size: var(--m);
  color: var(--rasp);
  font-weight: var(--fw700);
}

#boutique .item img:hover {
  border: var(--rasp) solid 1px;
  border-bottom-right-radius: calc(50px * var(--coeff));

}

#boutique p {
  margin: 0;
}


/* TARIFS */

.MDA {
  width: 110px;
  padding: 20px 0;
}

.ligne {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 5px;
  padding-right: 5px;
}

#tarifs p, #contact p {
  text-align: justify;
}


/* A PROPOS */

#apropos {
  background: var(--light-grey);
  background-blend-mode: multiply;
  border-radius: calc(25px * var(--coeff));
  border-bottom-right-radius: calc(150px * var(--coeff));
}

.portrait {
  align-self: flex-start;
  /*filter: drop-shadow(0 3px 3px rgba(0,0,0,.3));*/
}

.cv {
  align-self: center;
}


/* CONTACT */

.etape {
	background: var(--mustard);
	color: white;
  text-align: center;
	display: inline-block;
	font-weight: 700;
	width: 28px;
	height: 28px;
	line-height: 8px;
  margin-top: 20px;
	padding: 10px;
	border-radius: 20px;
}

.form-group input, .form-group textarea {
  font-family: "Ubuntu Sans", sans-serif;
  border: 1px solid var(--mustard);
	border-radius: var(--xxxs);
	text-align: left;
	padding: 10px;
	width: 100%;
	height: 45px;
	margin-bottom: 25px;
}

.form-group textarea {
  font-family: "Ubuntu Sans", sans-serif;
	height: 270px;
}

.form-control:focus {
    outline: 0;
    box-shadow: none;    
}

::placeholder {
  font-family: "Ubuntu Sans", sans-serif;
	color: var(--grey);
}

::-webkit-input-placeholder {
  font-family: "Ubuntu Sans", sans-serif;
	color: var(--grey);
}

::-moz-placeholder {  /* Firefox 19+ */
  font-family: "Ubuntu Sans", sans-serif;
	color: var(--grey);
}

::-ms-input-placeholder {  
  font-family: "Ubuntu Sans", sans-serif;
	color: var(--grey);
}

input[type="submit"]:hover {
	cursor: pointer;
}

.echo {
	position: fixed;
	display: flex;
	justify-content: center;
	align-items:center;
	z-index: 10;
	background: #000000e4;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}

.echo-content {
	position: fixed;
	display: flex;
	flex-direction: column;
}

.echo-content p, .echo-content a {
	text-align: center;
}

.grecaptcha-badge {
  visibility: hidden;
}


/* FOOTER */

footer {
  box-sizing: border-box;
  background: var(--dark-grey);
  border-top: solid 1px rgba(255,255,255,0.75);
}

footer .logo {
  max-width: calc(100px * var(--coeff-nav));
}

footer p {
  color: var(--medium-grey);
  font-size: var(--xs);
}

footer a {
  font-size: var(--xs);
}


/* ANIMATIONS */

.fadeIn {
	-webkit-animation: fadeIn 0.5s;
	-moz-animation: fadeIn 0.5s;
	-o-animation: fadeIn 0.5s;
	animation: fadeIn 0.5s;
}

.fadeInSlow {
	-webkit-animation: fadeInSlow 2s;
	-moz-animation: fadeInSlow 2s;
	-o-animation: fadeInSlow 2s;
	animation: fadeInSlow 2s;
}

.fadeOut {
	-webkit-animation: fadeOut 0.5s;
	-moz-animation: fadeOut 0.5s;
	-o-animation: fadeOut 0.5s;
	animation: fadeOut 0.5s;
}

@keyframes fadeIn {
	from {
	  opacity: 0; }
	to {
	  opacity: 1; }
}

@keyframes fadeInSlow {
	from {
	  opacity: 0; }
	to {
	  opacity: 1; }
}

@keyframes fadeOut {
	from {
	  opacity: 1; }
	to {
	  opacity: 0; }
}

@keyframes translate {
	0%, 33.33% {transform:translateX(0);}
	33.34%, 66.66% {transform:translateX(-100%);}
	66.67%, 100% {transform:translateX(-200%);}
}

@keyframes fadeInOut {
	26.667% {
		opacity:0 ; }
	0%, 16.667% {
		opacity: 1; }
	26.666% {
		z-index: 20; }
	26.667% {
		z-index: 19; }
}

@media only screen and (max-width : 1980px){
  :root {
    --coeff-nav: 0.75;
  }
}

@media only screen and (max-width : 990px){
  :root {
    --coeff: 0.75;
    --coeff-typo: 0.9;
  }
  
  .flexbox{
    height:220vw;
  }

  .col33, .col25 {
    flex: 0 calc(50% - (var(--gap) * var(--coeff)) + calc(var(--gap) * calc(0.5 * var(--coeff))));
  }
    
  #portfolio .col25, #boutique .col25 {
    flex: 0 calc(33.3333% - (var(--gap) * var(--coeff)) + calc(var(--gap) * calc(0.3333 * var(--coeff))));
  }
    
  #contact .col50 {
    flex: 100%;
  }
    
  .intro, #apropos .container {
    flex-direction: column-reverse;
  }
    
  .diaporama {
    width: calc(clamp(1.5rem, 0.25rem + 3vw, 4rem) * 10);
    height: calc(clamp(1.5rem, 0.25rem + 3vw, 4rem) * 10);
    margin-top: 10px;
  }
      
  .intro h1 {
    font-size: clamp(1.5rem, 1rem + 3vw, 4rem);
    text-align: center;    
  }

  .portrait {
    max-width: 300px;
    width: 50%;
    align-self: flex-start;
  }
    
  .pb-parcours {
    padding-bottom: 10px;
  }
    
  #tarifs .col33, #tarifs .col66 {
    flex: 100%;
  }

}


@media only screen and (max-width : 667px){
  :root {
    --coeff: 0.5;
    --coeff-typo: 0.8;
  }

  .col50, .col25 {
    flex: 100%;
  }
  
  #accueil, #apropos {
    border-radius: 0;
    border-bottom-right-radius: calc(150px * var(--coeff));
    margin-left: 0;
    margin-right: 0;
    }

  #portfolio .col25, #boutique .col25 {
    flex: 0 calc(50% - (var(--gap) * var(--coeff)) + calc(var(--gap) * calc(0.5 * var(--coeff))));
  }
  
  .ligne {
    flex-direction: column;
    align-items: normal;
  }

  .hide {
    display: none;
  }
}


@media only screen and (max-width : 340px){
  #boutique .col25 {
    flex: 100%;
  }
}