/* VARIABLES CSS */
:root {
    --color: black;
    --blue:#4B33FF;
    --darkBlue:#0E2856;
    --yellow:#FFDB43;
    --main-font: 'Gibson', serif;
    --second-font: '', serif;
}


@font-face {
    font-family: 'Gibson';
    src: url('Gibson-SemiBoldItalic.woff2') format('woff2'),
         url('Gibson-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Gibson';
    src: url('Gibson-Light.woff2') format('woff2'),
         url('Gibson-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Gibson';
    src: url('Gibson-LightItalic.woff2') format('woff2'),
         url('Gibson-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Gibson';
    src: url('Gibson-Italic.woff2') format('woff2'),
         url('Gibson-Italic.woff') format('woff');
    font-weight: normal; /* ou 400 selon la convention */
    font-style: italic;
}

@font-face {
    font-family: 'Gibson';
    src: url('Gibson-Bold.woff2') format('woff2'),
         url('Gibson-Bold.woff') format('woff');
    font-weight: bold; /* ou 700 selon la convention */
    font-style: normal;
}

@font-face {
    font-family: 'Gibson';
    src: url('Gibson.woff2') format('woff2'),
         url('Gibson.woff') format('woff');
    font-weight: normal; /* ou 400 selon la convention */
    font-style: normal;
}

@font-face {
    font-family: 'Gibson';
    src: url('Gibson-BoldItalic.woff2') format('woff2'),
         url('Gibson-BoldItalic.woff') format('woff');
    font-weight: bold; /* ou 700 selon la convention */
    font-style: italic;
}

@font-face {
    font-family: 'Gibson';
    src: url('Gibson-SemiBold.woff2') format('woff2'),
         url('Gibson-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}






/* NORMALISATION GLOBALE */
* {
    font-family: var(--main-font);
}



/* STYLES TYPOGRAPHIQUES */
h1, h2, h3, h4, h5, h6{
    font-family: var(--main-font);
    color: var(--blue);
}


h1{
  font-weight: 600;
}

#project h2{
  font-weight: 200;
}


#home h2{
  font-weight: 600;
  font-style: italic;
}

#home .linkAbout h2{
  font-weight: 700;
  font-style: italic;
  color: var(--darkBlue);
}

#home .image-caption h2, #home .linkIllustration-caption h2{
  font-size: 130%;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 600;
  font-style: italic;
}
#home .image-caption p, #home .linkIllustration-caption p{
  font-size: 110%;
  color: var(--blue);
  font-weight: 300;
}

#about h2{
   font-style: italic;
  font-weight: 700;
  color: var(--darkBlue);
}
#about h5{
  color: white;
  /* width: fit-content; */
  margin-bottom: 70px;
}

#about #mission h5{
  margin-bottom: 10px;
}

#about h3{
  font-weight: 600;
  margin-top: 40px;
}


ul li {
  color: var(--blue);
  font-weight: 600;
}

p strong{
  font-weight: 600;
}

p{
  font-weight: 400;
}


p{
  color: var(--darkBlue);
}
p a{
    text-decoration: underline;
    color: var(--blue);
}

#error a{
  text-decoration: none;
}

p a:hover {
    text-decoration: none;
  
}



/* UI ELEMENTS */


body {
    overflow-y: scroll !important;
    scrollbar-width: none !important;
}

body::-webkit-scrollbar {
    width: 0 !important;
    display: none !important;
}



button {
    border-style: none;
    outline: none !important;
}



main hr {
    margin: 0;
    color: black;
    background-color: black;
    border: 0;
    opacity: 1;
    height: 0;
    border-top: 2px solid black;
}

img, svg {
    max-width: 100%;
    height: auto;
    width: 100%;
}



/* CLASSE HELPERS */
.full-height {
    height: 100vh;
}

.p-none {
    padding: 0 !important;
}


.desk-none{
	display: none;
}

.mobile-none{
	display: block;
}

.mt-300 { margin-top: 150px!important; }
.mt-250 { margin-top: 125px!important; }
.mt-200 { margin-top: 100px!important; }
.mt-150 { margin-top: 75px!important; }
.mt-100 { margin-top: 50px!important; }
.mt-50  { margin-top: 25px!important; }

.text-columns {
    column-count: 1;
}


/* FOOTER */
.credit a {
    text-decoration: underline;
    color: black;
}

.credit a:hover {
    text-decoration: none;
    color: black;
}

.credit p {
    font-size: .675em;
}


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

main {
    animation: fadeIn 2s ease-out forwards;
    opacity: 0; 
    margin-top:80px;
}


.scrollTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    border-radius: 50%; 
    width: 20px; 
    height: 20px; 
    cursor: pointer;
    z-index: 1000;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCAyMCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyLjExNzggMjYuMTg0MkMxNC42MTAzIDI4Ljk5NzcgMTYuOTM3NSAzMS45NzU4IDE5LjEwODkgMzUuMDk4OUMxOS44NDk5IDM2LjE2MzggMTkuOTYzMyAzNy42MjgyIDE5LjAxNTcgMzguNjI3M0MxOC4xOTY3IDM5LjUwMDcgMTYuNTkzMiAzOS41OTc4IDE1Ljg1MjUgMzguNTIyOEMxMy42MDM2IDM1LjI4NzIgMTEuMTgxIDMyLjE5NTkgOC41ODM2IDI5LjI4ODhDNy4zMTUzOCAyNy44NjY0IDYuMDAxNDMgMjYuNDgyNCA0LjY1MDQyIDI1LjE0NzJDMy45NTMyNCAyNC40NTM5IDMuMjI5NTEgMjMuNzQ5NyAyLjUyMjA3IDIzLjEwNkMxLjgxNDYzIDIyLjQ2MjQgMS4wOTU4NyAyMS45MDg0IDAuNzI4MDI3IDIwLjkzNTlDLTAuMTQ5ODEgMTguNjE1OSAxLjcyNzk0IDE2LjkzNzEgMi45ODQ2MyAxNS40MDc5QzQuMzQzMDQgMTMuNzUyMSA1LjcyOCAxMi4xMDcxIDcuMTIxNjIgMTAuNDcyNEM5LjgwNzE2IDcuMzI5NjcgMTIuNTYyOSA0LjIzOTMgMTUuMzYxNCAxLjIyMDM3QzE3LjQ0MTYgLTEuMDExOTIgMjAuNTAyNSAyLjYzMDcyIDE4LjQzMTMgNC44NjMzMUMxNi4wMDA3IDcuNDk0MjIgMTMuNTk1OSAxMC4xNjYgMTEuMjQzNCAxMi44ODk1QzEwLjA5MDMgMTQuMjIyIDguOTU0NzkgMTUuNTY1MSA3LjgxOTAxIDE2LjkxODJMNy44MTgzNCAxNi45MTlDNy4yMjc0MSAxNy42Mjk1IDYuNjM2NDkgMTguMzQwMSA2LjA1NDQ5IDE5LjA1MDlDNS43NTg3OSAxOS40MTEzIDUuNjY4NTggMTkuNjI3MyA1LjY2ODU4IDE5LjYyNzNMNi4zODkyIDIwLjI2MjVDNy4wNTI0OSAyMC44ODQ2IDcuNzA2NTggMjEuNTE2NSA4LjM1MTIxIDIyLjE2ODFDOS42NDA0NiAyMy40NzEyIDEwLjg5MzIgMjQuODAzMSAxMi4xMTc4IDI2LjE4NDJaIiBmaWxsPSIjMEUyODU2Ii8+Cjwvc3ZnPgo=');
    background-repeat: no-repeat;
    background-position: center;
    border-image-slice:53 fill;
    border-image-width:10px 10px 10px 10px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;
    border-image-source: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjI3IiBoZWlnaHQ9IjE5MCIgdmlld0JveD0iMCAwIDIyNyAxOTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0yMTAuMjg2IDI5LjcxODhDMjA0LjE4NyAyNi4xOTIxIDE5Ny41MjggMjIuNzYxMSAxOTAuMzI5IDIxLjQ1NTJDMTgzLjMzMSAyMC4xODU2IDE3Ni40MTIgMTkuMzk5MyAxNjkuMzA4IDE4Ljc2MDVDMTYyLjQ4MiAxOC4xNDY4IDE1NS41NSAxNy43Mzg3IDE0OC42OTQgMTcuNTIzQzE0Mi42NSAxNy4zMzI3IDEzNi42NDEgMTYuNzg0NCAxMzAuNTk1IDE2Ljc4NDRINzkuMDE1M0M3MS45MTkzIDE2Ljc4NDQgNjMuMDE2OSAxNS41Mjg5IDU2LjI0OTcgMTcuODYyM0M1NC40MzQ0IDE4LjQ4ODIgNTIuNTIyNyAxOC44ODk1IDUwLjg1ODQgMTkuNzM4NkM0OS4wMzc4IDIwLjY2NzMgNDcuMzU5MyAyMi4yMDMzIDQ1LjU1NzggMjMuMjUxNkMzNC44MDczIDI5LjUwNzMgMjYuMDA5NyAzNy45NDA5IDIwLjI3NzggNDguMDQyNEMxNy41MzIgNTIuODgxMyAxNC4zMDUxIDU3Ljk4MSAxMy4xNDIzIDYzLjMzMjFDMTEuODg4NCA2OS4xMDE4IDEwLjcyNDYgNzUuMDczOCA4LjQ1MzIzIDgwLjU3NzlDNi4zNTM0IDg1LjY2NjEgMy4xMjE5NSA5MC42NDMxIDIuMTMzMjIgOTUuOTY3M0MxLjMzODk0IDEwMC4yNDQgMC41MjA4ODggMTA0LjY4OSAxLjM0MDM5IDEwOS4wMjFDMS44ODI0MyAxMTEuODg3IDMuNTI3NjIgMTE1LjAzNyA0Ljc4MzU0IDExNy43MjRDOS43NDMxMyAxMjguMzM3IDkuNDk0MTMgMTM5Ljg5OSAxOS4wNzcyIDE0OC4zNDNDMjQuMTg2MyAxNTIuODQ1IDI4LjA5NDEgMTU4LjI1OCAzMy44OTE4IDE2Mi4yNTZDMzkuNzE2MiAxNjYuMjcyIDQ1LjUwOTYgMTcwLjEzIDUyLjEwNDMgMTczLjIzNEM1OS45MDIyIDE3Ni45MDQgNjguMzEyIDE3OS4yNTcgNzYuMzE5NyAxODIuNDk2Qzc5LjIwMyAxODMuNjYyIDgyLjc0NjYgMTg0LjA0OSA4NS44NzkgMTg0LjI5MkM5My4xNTggMTg0Ljg1OCAxMDAuMjkxIDE4NC45MzEgMTA3LjYyNSAxODQuOTMxQzExMy4wNTggMTg0LjkzMSAxMTguNDMzIDE4NS4yOSAxMjMuODQ0IDE4NS4yOUgxMzkuNjFDMTQ1Ljg3OSAxODUuMjkgMTUzLjQ4IDE4Ni4xNjggMTU5LjMxOCAxODMuNzczQzE3MS42MjggMTc4LjcyNCAxODIuMDQ5IDE3MS4xODkgMTkzLjU0NiAxNjQuNzkxQzE5OC44NjkgMTYxLjgyOCAyMDMuNjE4IDE1OC4wOTYgMjA2LjU5MyAxNTMuMTE0QzIwOC4yNzcgMTUwLjI5NSAyMTAuMjcxIDE0Ny40MjkgMjExLjY5IDE0NC41MTFDMjEzLjEzNyAxNDEuNTM2IDIxNS41NzQgMTM4Ljk3OCAyMTYuOTkxIDEzNi4wMjhDMjIzLjc3MyAxMjEuOTAzIDIyMS43MDIgMTA1LjM3NyAyMjEuNzAyIDkwLjM1ODRWNzcuODYzMkMyMjEuNzAyIDc1LjkyODggMjIxLjM3MSA3NC4zNDggMjIwLjc5NiA3Mi40NzM5QzIyMC4wMyA2OS45NzY3IDIyMC40MjMgNjcuMDg5OSAyMjAuMTYyIDY0LjUyOTdDMjE5Ljc5OSA2MC45NjY0IDIyMC4yNTYgNTcuMzYxNiAyMjAuMDcyIDUzLjc5MUMyMTkuOTQyIDUxLjI4MDQgMjE4LjI4NSA0OS4wNTA2IDIxOC4wMzMgNDYuNjA1M0MyMTcuNzgxIDQ0LjE2NzYgMjE2LjYzMyA0MC45MjgxIDIxNS40OTYgMzguNzAwOUMyMTQuNzA1IDM3LjE1MzUgMjE0LjM4NiAzNS4wMDI0IDIxMi45NTkgMzMuNjcwOUMyMTEuNzY1IDMyLjU1NzQgMjEwLjYzNiAzMS4wNTQyIDIwOS44NzggMjkuNzE4OE0yMjIuMTk3IDUzLjEyMjdDMjE3LjQ4NCA0OC4wOTg5IDIxMi4yMzggNDMuMDE5OSAyMDUuOTk3IDM5Ljg1NzZDMTk5LjkzMSAzNi43ODM1IDE5My44MjIgMzQuMTk4NCAxODcuNTA5IDMxLjcwNzNDMTgxLjQ0NCAyOS4zMTQxIDE3NS4yMzQgMjcuMDkyIDE2OS4wNDcgMjUuMDc2MUMxNjMuNTkyIDIzLjI5OSAxNTguMjU1IDIxLjE4NDMgMTUyLjc1NCAxOS41OTFMMTA1LjgyNSA1Ljk5ODZDOTkuMzY4MyA0LjEyODYzIDkxLjU2NTggMC41NjYyNjIgODQuODU1OSAxLjA0MzU2QzgzLjA1NiAxLjE3MTU5IDgxLjIyMTYgMS4wNTY2NCA3OS41MDYyIDEuNDQwNjJDNzcuNjI5NyAxLjg2MDY3IDc1LjczODYgMi45MDY0IDczLjg1MTIgMy40NDczQzYyLjU4NzggNi42NzUgNTIuNTg1NiAxMi41MjczIDQ0Ljk3NzQgMjAuODAzNUM0MS4zMzI5IDI0Ljc2NzkgMzcuMTg4OSAyOC44NTgzIDM0Ljg2MzIgMzMuNzM2MkMzMi4zNTU2IDM4Ljk5NTYgMjkuODgyIDQ0LjQ3NDggMjYuNTExNiA0OS4yMDg3QzIzLjM5NTcgNTMuNTg1IDE5LjI3NjYgNTcuNTU1MyAxNy4xMTU3IDYyLjQ1M0MxNS4zNzk4IDY2LjM4NzUgMTMuNTgyNyA3MC40Nzc3IDEzLjMwMiA3NC44OTEzQzEzLjExNjMgNzcuODEwNiA0LjY5MjExIDc5LjA3MTMgNS4xOTgxNSA4Mi4wMDYxQzcuMTk2NDcgOTMuNTk1NiA2LjExNDQ1IDEwNi45NTYgMTIuODMzMyAxMTcuNjYzQzE2LjQxNTMgMTIzLjM3MSAxNS41MTk4IDEzNy41NTUgMTkuODQ3OCAxNDIuOTU2QzI0LjE5NTcgMTQ4LjM4MiAzMi42MzA1IDE1Mi45NDIgMzcuODk1NiAxNTcuNjg3QzQ0LjEyMTEgMTYzLjI5NyA0Ni42NjkgMTY1LjEwNiA1My4xODc1IDE3MC4zNTRDNTUuNTM0NiAxNzIuMjQzIDY5LjE2MDEgMTc1LjY1NCA3MS45NTI0IDE3Ni43MTVDNzguNDQxMSAxNzkuMTgyIDgyLjk2MDEgMTgzLjcxMyA4OS42MzMgMTg1LjY0NkM5NC41NzU3IDE4Ny4wNzcgMTAxLjc3MiAxNzkuNjM5IDEwNi42OTUgMTgxLjA2NUwxMjEuMDQgMTg1LjIyQzEyNi43NDQgMTg2Ljg3MiAxMzMuNDUyIDE4OS43MjUgMTM5LjMzMSAxODguOTQ0QzE1MS43MjcgMTg3LjI5NiAxNjIuOTk0IDE4Mi43NDIgMTc0Ljk2OSAxNzkuNTczQzE4MC41MTQgMTc4LjEwNiAxODUuNzE5IDE3NS43NDEgMTg5LjYwNyAxNzEuNjk5QzE5MS44MDcgMTY5LjQxMSAxOTQuMyAxNjcuMTYgMTk2LjI4MiAxNjQuNzA3QzE5OC4zMDMgMTYyLjIwNiAyMDEuMTI3IDE2MC4zNyAyMDMuMTE1IDE1Ny44ODVDMjEyLjYzMSAxNDUuOTg3IDIxNC42NjIgMTI5LjQzMiAyMTguMjIgMTE0Ljg4MUwyMjEuMTggMTAyLjc3NUMyMjEuNjM4IDEwMC45MDEgMjIxLjcxMSA5OS4yODIyIDIyMS42MzIgOTcuMzE1QzIyMS41MjcgOTQuNjkzOCAyMjIuNTY4IDkyLjAwMDUgMjIyLjkzNyA4OS40NTEzQzIyMy40NTEgODUuOTAzMyAyMjQuNzIgODIuNTMxMyAyMjUuMzk5IDc5LjAyMzRDMjI1Ljg3NSA3Ni41NTY5IDIyNC44OTYgNzMuOTYgMjI1LjI0NiA3MS41MjQ0QzIyNS41OTQgNjkuMDk2NSAyMjUuMzE3IDY1LjY1NTQgMjI0LjgxIDYzLjE5NzlDMjI0LjQ1OCA2MS40OTA0IDIyNC42NzYgNTkuMzIyMiAyMjMuNjkzIDU3LjY1NjFDMjIyLjg3MSA1Ni4yNjI3IDIyMi4xOTkgNTQuNTA4OCAyMjEuODI2IDUzLjAxNTMiIHN0cm9rZT0iIzRCMzNGRiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+Cjwvc3ZnPgo=");
    transform: rotate(90deg);
    padding: 21px;
    background-size: 35%;
}

 a.scrollTop {
  text-decoration: none;
}
a.scrollTop:hover {
  text-decoration: none;
  color: var(--yellow);
  transition: .3s ease;
}



/* ----------------------------------- MENU ---------------------------------- */

.nav-link {
    padding: 1.5rem 1rem;
}

.navbar-light .navbar-nav .nav-item.active a.nav-link{
    color:var(--blue);
}

.navbar-light .navbar-toggler {
    color: rgba(0, 0, 0, 0);
    border-color: rgba(0, 0, 0, 0);
}
.navbar-nav{
    padding: 20px 0;
    background-color: white;
    height: 92vh;
}

.navbar-light .navbar-nav .nav-link{
    color: var(--darkBlue);
    font-weight: 400;
    font-size: 24px;
    margin-left:20px;
  }

.navbar-brand {
    width: 50%;
    padding:10px 20px;
}

.navbar{
  background-color: white;
    padding-right: 0!important;
    padding-left: 0!important;
}
.navbar button {
  padding:10px 20px;
}

.navbar-collapse{
  box-shadow: rgba(0, 0, 0, 0.1) 0px 18px 24px 0px;
}

.navbar-light .navbar-toggler-icon {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyMiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzEyMjZfNDgpIj4KPHBhdGggZD0iTTAuNDgxOTM0IDEuOTc0NEMwLjQ4MTkzNCAwLjg4NzYyNSAxLjMzOTExIDAgMi4zODg1OSAwSDE5LjMyODhDMjAuMzgzNyAwIDIxLjIzNTQgMC44ODc2MjUgMjEuMjM1NCAxLjk3NDRDMjEuMjM1NCAzLjA2MTE3IDIwLjM3ODIgMy45NDg3OSAxOS4zMjg4IDMuOTQ4NzlIMi4zODg1OUMxLjMzMzYxIDMuOTQ4NzkgMC40ODE5MzQgMy4wNjExNyAwLjQ4MTkzNCAxLjk3NDRaIiBmaWxsPSIjMEUyODU2Ii8+CjxwYXRoIGQ9Ik0wLjQ4MTkzNCAxNC4wMTk5QzAuNDgxOTM0IDEyLjkyNzUgMS4zMzkxMSAxMi4wNDU1IDIuMzg4NTkgMTIuMDQ1NUgxOS4zMjg4QzIwLjM4MzcgMTIuMDQ1NSAyMS4yMzU0IDEyLjkzMzIgMjEuMjM1NCAxNC4wMTk5QzIxLjIzNTQgMTUuMTA2NyAyMC4zNzgyIDE1Ljk5NDMgMTkuMzI4OCAxNS45OTQzSDIuMzg4NTlDMS4zMzM2MSAxNS45OTQzIDAuNDgxOTM0IDE1LjEwNjcgMC40ODE5MzQgMTQuMDE5OVoiIGZpbGw9IiMwRTI4NTYiLz4KPHBhdGggZD0iTTAuOTk4NDE4IDcuOTMxNzJDMC45OTg0MTggNy45MzE3MiAwLjk5ODQxOCA3Ljg5MTkgMC45OTg0MTggNy44NzQ4M0MxLjA0MjM4IDYuNzgyMzcgMS45MzI1MiA1Ljk0MDI2IDIuOTg3NSA1Ljk4NTc4QzguMjA3NDYgNi4yMTkwNyAxMy40OTg5IDYuMTkwNjIgMTguNzA3OCA1LjkwNjEyQzE5Ljc2MjggNS44NDkyMiAyMC42NTg1IDYuNjg1NjQgMjAuNzEzNCA3Ljc3MjQxQzIwLjc2ODMgOC44NjQ4NyAxOS45NjA2IDkuNzkyMzIgMTguOTExMSA5Ljg0OTIyQzEzLjU3NTggMTAuMTQ1MSA4LjE1ODAxIDEwLjE3MzUgMi44MTcxNiA5LjkzNDU3QzEuNzg0MTYgOS44ODkwNSAwLjk3NjQ0IDguOTk1NzQgMC45OTI5MjQgNy45MzE3MkgwLjk5ODQxOFoiIGZpbGw9IiMwRTI4NTYiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8xMjI2XzQ4Ij4KPHJlY3Qgd2lkdGg9IjIwLjc1OSIgaGVpZ2h0PSIxNiIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuNDgxOTM0KSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=');
  }

  .navbar-toggler-icon{
        width: 1.2em;
    height: 1.2em;
  }
/* ----------------------------------- ANIMATION ---------------------------------- */


.no-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fadeBackground {
    0% { background-color: white; }
    50% { background-color: var(--blue); }
    100% { background-color: transparent; }
}


#splash-screen {
    animation: fadeBackground 2s ease 1.5s forwards;
}


#animation svg path {
  stroke-dasharray: 1600; 
  stroke-dashoffset: 1600;
  animation: draw 1.9s forwards;
}



#animation svg{
  max-width: 30vmin;
  transform-origin: center;
  width: 30%;
}

#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white; 
    transition: opacity 8s ease-out;
}

#main-content {
    display: none;
}

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


footer {
    opacity: 0;
    animation: fadeInFooter 1s ease forwards; 
    animation-delay:3s; 
}

/* ----------------------------------- HOME PAGE ---------------------------------- */

  .filter-navigation{
      margin-bottom: 30px;
      margin-top:30px;
    }


#filterProject button {
  text-align: left;
  font-weight: 400;
   background-color: transparent;
    position: relative;
    overflow: hidden;
    transition: color 0.4s ease; /* Animer seulement la couleur */
}

#filterProject button::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAAdCAYAAAB7YUi1AAAACXBIWXMAABCcAAAQnAEmzTo0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFaSURBVHgB7doxTsNAEAXQmUk6JJ8ASldwgXSgcAYOwA04CFyAG0T0KAhEGdFDtWVygbhFyjDr3dgJOcGM/iti76b82tn12ExG03xmlxcCP1Q7YtqWAW9sorPr87T+e2kDAkeYG/tt6ugi58ftx72UsZwThFACVb0iCKEEyrnkQgSi6Sbvnw1BCLZCJ9g/A5FywoUo8h6KQAMR0vwMA1GInXBxIArESq48EQSQW3+WJrfvCxusCZyTvq9bW3/8QOCblEVZO0W/GwLn+Cf/1l7u2ZbAt50u86UPlNvXbr+pgke6tldnq3wn41xZsuCRDk8qY6DM3wQerbj9XOwHY6BUajC4M9M0f9N03b9kGQLta7ASyq5P1o+ffOUbOZpmfiRw7ShQ6xotcdr1TU5mcNp17TRQfF/k2vRwUD+4xus0x/6tUL0jcG0IVNOthckI1LmDkruzUovHFu/+AN1vT839e8U/AAAAAElFTkSuQmCC');
    background-repeat: no-repeat;
    background-position: left center;
    opacity: 0; /* Commencez invisible */
    transition: opacity 0.5s ease; /* Transition sur l'opacité */
}

#filterProject button.active{
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAAdCAYAAAB7YUi1AAAACXBIWXMAABCcAAAQnAEmzTo0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFaSURBVHgB7doxTsNAEAXQmUk6JJ8ASldwgXSgcAYOwA04CFyAG0T0KAhEGdFDtWVygbhFyjDr3dgJOcGM/iti76b82tn12ExG03xmlxcCP1Q7YtqWAW9sorPr87T+e2kDAkeYG/tt6ugi58ftx72UsZwThFACVb0iCKEEyrnkQgSi6Sbvnw1BCLZCJ9g/A5FywoUo8h6KQAMR0vwMA1GInXBxIArESq48EQSQW3+WJrfvCxusCZyTvq9bW3/8QOCblEVZO0W/GwLn+Cf/1l7u2ZbAt50u86UPlNvXbr+pgke6tldnq3wn41xZsuCRDk8qY6DM3wQerbj9XOwHY6BUajC4M9M0f9N03b9kGQLta7ASyq5P1o+ffOUbOZpmfiRw7ShQ6xotcdr1TU5mcNp17TRQfF/k2vRwUD+4xus0x/6tUL0jcG0IVNOthckI1LmDkruzUovHFu/+AN1vT839e8U/AAAAAElFTkSuQmCC');
    background-repeat: no-repeat;
    background-position: left center;
}

#filterProject button:hover::after {
    opacity: 1; /* Devient visible au survol */
}

#filterProject button:hover {
    color: white; /* Changez la couleur du texte au survol */
}


#filterProject button span {
    color: var(--darkBlue); 
    position: relative;
    z-index: 10; 
}



/* ---- grid ---- */

.grid {
  width: 100%;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}
#project .grid-item img {
  width: 100%!important; 
}

.grid-item img {
    height: 100%;
    width: 100%; 
    object-fit: cover;
}

.grid-item p{
   width: auto;
}


/* ---- grid-item ---- */

.grid-sizer,
.grid-item {
  width: 50%;
}

.grid-item {
  float: left;
  position: relative;
  padding: 15px;
  text-align: center;
}

@keyframes fadeAndShrink {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.001);
    }
}

.is-hidden {
    animation: fadeAndShrink 0.5s forwards;
     display: none;
}

@keyframes expandAndFadeIn {
    from {
        opacity: 0;
        transform: scale(0.001);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.not-hidden { /* Cette classe est pour les éléments qui deviennent visibles */
    animation: expandAndFadeIn 0.5s forwards;
}
.grid-item--width2 { width: 50%; } 
.grid-item--width3 { width: 75%; } 
.grid-item--width4 { width: 100%; } 

#home .grid-item {
  height: 200px;
}
#home .grid-item--height2 { height: 200px; }
#home .grid-item--height3 { height: 290px; }
#home .grid-item--height4 { height: 350px; }


.project-number {
  position: absolute;
  top: 10px;
  left: 10px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px;
}

.grid-item img.illustration {
    width: 110%; 
    height: auto; 
    position: relative;
    left: -5%; 
    top: -5%; 
    object-fit: cover; 
     overflow: visible;
      z-index: 10;
}


#is-textDescriptif, #is-illustration{
  display: none;
}

.svgContainer {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    position: relative; 
    height: 100%;
}

.descriptionAcc {
    position: absolute;
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    width: 80%;
    text-align: center; 
    padding: 20px;
}

#home .image-caption {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: white;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s linear;
    text-align: center;
}

#home .image-caption > * {
    margin: auto 0;
}

#home .grid-item:hover .image-caption {
    visibility: visible;
    opacity: 1;
}

#home .grid-item:hover {
    opacity: 1 !important; 
}
#home .grid-item {
    transition: opacity 0.4s ease-out; }

#home .grid-item a {
    transition: opacity 0.4s ease-out; }

#home .image-caption h2, .image-caption p {
  color:var(--blue);
}

#home .grid-item.showBorderProject {
    border: 1px solid black;
}

.grid-item .linkAbout {
    position: relative;
    height: 100%; /* Définissez la hauteur nécessaire */
    display: flex;
    justify-content: center;
    align-items: center;
}

.grid-item .linkAbout div, .grid-item .linkillustration  {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}
.grid-item .linkillustration {
  z-index: 10;
}

.linkAbout .linkAbout-caption, .linkillustration .linkIllustration-caption{
  opacity: 0;
  transition: opacity 0.5s linear;
}

.grid-item:hover .linkAbout .linkAbout-caption, .grid-item:hover .linkillustration .linkIllustration-caption{
  opacity: 1;
}

.grid-item:hover .linkAbout h2{
  color: var(--blue)!important;
}

.grid-item img.scotch-horizontal{
    width: 12vw;
    height: auto; 
}

#home .image-caption .scotch-horizontal {
    position: absolute;
    top: 15%; /* Ajustez en fonction de l'emplacement souhaité */
    left: 0px; /* Ajustez si vous voulez le décaler de la gauche */
    transform: translate(0, -50%); /* Centrer verticalement par rapport à son point de départ */
}

.deform-left{
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 1% 90%, 3% 75%, 3% 50%, 2% 25%, 1% 10%);
}
.deform-right{
  clip-path: polygon(1% 0%, 0% 100%, 97% 100%, 99% 41%, 99% 22%, 100% -1%);
}

.deform-bottom{
  clip-path: polygon(0% 0%, 100% 0%, 100% 99%, 59% 98%, 50% 98%, 22% 98%, 0% 100%);
}

.deform-top{
  clip-path: polygon(0 0, 0% 100%, 100% 100%, 100% 0%, 75% 1%, 25% 2%, 75% 2%, 25% 1%);
}

.realistic-marker-highlight-blue span:first-child, .realistic-marker-highlight span:first-child { 
    padding-left: 10px; /* Ajustez selon vos besoins */
}

.realistic-marker-highlight-blue span:last-child, .realistic-marker-highlight span:last-child { 
   padding-right: 20px; /* Ajustez selon vos besoins */
}


.highlight-word {
   background-image: linear-gradient(120deg, 
                                     #ffffff 20%, 
                                     #f0f0f0 50%, 
                                     #ffffff 80%);
   background-size: 100% 1.5em; 
   background-repeat: no-repeat;
   padding: 8px 0; 
   background-position: 0 0.1em; 
}

.highlight-word-blue {
   background-image: linear-gradient(120deg, 
                                     var(--blue) 20%, 
                                     var(--blue) 50%, 
                                     var(--blue) 80%);
   color: white; 
   background-size: 100% 1.5em; 
   background-repeat: no-repeat;
   padding: 8px 0; 
   background-position: 0 0.1em;
}


.textInsideSvg {
    position: absolute;
    top: 50%; /* Ajustez ces valeurs pour centrer le texte */
    left: 50%; /* Ajustez ces valeurs pour centrer le texte */
    transform: translate(-50%, -50%); /* Centre le texte */
    width: 85%; /* Ajustez en fonction de la taille de votre SVG */
    text-align: center; /* Centre le texte horizontalement */
}
.grid p {
  margin-bottom: 0;
  color:var(--blue);
  font-size: 12px;
    line-height: 1.3em;
}






/* ----------------------------------- PROJECT ---------------------------------- */
.image-project-caption {
    bottom: 0;
    width: 190px;
    opacity: 0; 
    transition: opacity 0.5s ease;
}

#height-legend{
    position: absolute!important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center; /* Cela ne sera utilisé que si vous choisissez la méthode flexbox */
    justify-content: flex-start; /* Ajustez cela en fonction de la position de la légende */
    margin-left: -196px;
}

.caption-right {
    right: 0;
    text-align: right;
}


.caption-left {
    left: 0; 
}

#project .grid-item {
  height: 200px;
  position: relative;
}

#project .grid-item--height2 { height: 300px; }
#project .grid-item--height3 { height: 400px; }
#project .grid-item--height4 { height: 500px; }


.circle-nav {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px; /* Largeur du conteneur de la flèche */
    height: 150px; /* Hauteur du conteneur de la flèche */
}

.circle-nav svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  fill: var(--darkBlue);
  height: auto;
  max-width: 66vmin;
  transform-origin: center;
  width: 78%;
}

.navigation-item:hover .circle-nav svg {
  fill: var(--blue);
}


.circle-nav text{
  font-size: 10px;
}

#project .container-fluid,#project .container#coverImage{
  top:0px;
  margin-top: 100px;
}

#nextPrevProject, #filterProject {
    height: initial; 
}

.project-navigation, .filter-navigation {
    display: block; 
    justify-content: center; 
    height: initial;
    text-align: center;
  }

.navigation-item {
    flex: 0 1 auto; 
}

.arrow-project{
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCAyMCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyLjExNzggMjYuMTg0MkMxNC42MTAzIDI4Ljk5NzcgMTYuOTM3NSAzMS45NzU4IDE5LjEwODkgMzUuMDk4OUMxOS44NDk5IDM2LjE2MzggMTkuOTYzMyAzNy42MjgyIDE5LjAxNTcgMzguNjI3M0MxOC4xOTY3IDM5LjUwMDcgMTYuNTkzMiAzOS41OTc4IDE1Ljg1MjUgMzguNTIyOEMxMy42MDM2IDM1LjI4NzIgMTEuMTgxIDMyLjE5NTkgOC41ODM2IDI5LjI4ODhDNy4zMTUzOCAyNy44NjY0IDYuMDAxNDMgMjYuNDgyNCA0LjY1MDQyIDI1LjE0NzJDMy45NTMyNCAyNC40NTM5IDMuMjI5NTEgMjMuNzQ5NyAyLjUyMjA3IDIzLjEwNkMxLjgxNDYzIDIyLjQ2MjQgMS4wOTU4NyAyMS45MDg0IDAuNzI4MDI3IDIwLjkzNTlDLTAuMTQ5ODEgMTguNjE1OSAxLjcyNzk0IDE2LjkzNzEgMi45ODQ2MyAxNS40MDc5QzQuMzQzMDQgMTMuNzUyMSA1LjcyOCAxMi4xMDcxIDcuMTIxNjIgMTAuNDcyNEM5LjgwNzE2IDcuMzI5NjcgMTIuNTYyOSA0LjIzOTMgMTUuMzYxNCAxLjIyMDM3QzE3LjQ0MTYgLTEuMDExOTIgMjAuNTAyNSAyLjYzMDcyIDE4LjQzMTMgNC44NjMzMUMxNi4wMDA3IDcuNDk0MjIgMTMuNTk1OSAxMC4xNjYgMTEuMjQzNCAxMi44ODk1QzEwLjA5MDMgMTQuMjIyIDguOTU0NzkgMTUuNTY1MSA3LjgxOTAxIDE2LjkxODJMNy44MTgzNCAxNi45MTlDNy4yMjc0MSAxNy42Mjk1IDYuNjM2NDkgMTguMzQwMSA2LjA1NDQ5IDE5LjA1MDlDNS43NTg3OSAxOS40MTEzIDUuNjY4NTggMTkuNjI3MyA1LjY2ODU4IDE5LjYyNzNMNi4zODkyIDIwLjI2MjVDNy4wNTI0OSAyMC44ODQ2IDcuNzA2NTggMjEuNTE2NSA4LjM1MTIxIDIyLjE2ODFDOS42NDA0NiAyMy40NzEyIDEwLjg5MzIgMjQuODAzMSAxMi4xMTc4IDI2LjE4NDJaIiBmaWxsPSIjMEUyODU2Ii8+Cjwvc3ZnPgo=');
    background-repeat: no-repeat;
    background-size: contain;
    width: 10px; 
    height: 50px; 
}


.arrow-next{
  transform: scaleX(-1);
}

.navigation-item.prev-project{
  margin-left: 0;
}
.navigation-item.next-project{
  margin-right: 0;
}



/* ----------------------------------- ABOUT ---------------------------------- */



#descriptionContainer{
  display: none;
}


img.scotch {
  width: 25px;
  margin-top: -65px;
  float: left;
  z-index: 10;
}

.scotch:nth-of-type(2) {
    float: right; 
   position: relative;
}


#picTeam img.scotch:nth-of-type(1) {
    margin-right: 360px;
     margin-left: 20px;
}


.bg-ligne{
  padding: 0;
  z-index: -10;
}



#bg-ligne1{
  margin-top: -25px;
}
#bg-ligne2 {
    margin-top: 315px;
}
#bg-ligne3{
  margin-top:1275px;
}
#bg-ligne4{
   margin-top: -255px;
}
#bg-ligne5{
  margin-top: -100px;
}
#bg-ligne6{
  margin-top: -10px;
}

#scop{
}

#engagements{
  margin-top: 20px;
}
.contourCrayon {
  background-color: white;
  border-image-slice:15 12 0 15 fill;
  border-image-width:10px 10px 10px 10px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch stretch;
  border-image-source: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjI3IiBoZWlnaHQ9IjE5MCIgdmlld0JveD0iMCAwIDIyNyAxOTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0yMTAuMjg2IDI5LjcxODhDMjA0LjE4NyAyNi4xOTIxIDE5Ny41MjggMjIuNzYxMSAxOTAuMzI5IDIxLjQ1NTJDMTgzLjMzMSAyMC4xODU2IDE3Ni40MTIgMTkuMzk5MyAxNjkuMzA4IDE4Ljc2MDVDMTYyLjQ4MiAxOC4xNDY4IDE1NS41NSAxNy43Mzg3IDE0OC42OTQgMTcuNTIzQzE0Mi42NSAxNy4zMzI3IDEzNi42NDEgMTYuNzg0NCAxMzAuNTk1IDE2Ljc4NDRINzkuMDE1M0M3MS45MTkzIDE2Ljc4NDQgNjMuMDE2OSAxNS41Mjg5IDU2LjI0OTcgMTcuODYyM0M1NC40MzQ0IDE4LjQ4ODIgNTIuNTIyNyAxOC44ODk1IDUwLjg1ODQgMTkuNzM4NkM0OS4wMzc4IDIwLjY2NzMgNDcuMzU5MyAyMi4yMDMzIDQ1LjU1NzggMjMuMjUxNkMzNC44MDczIDI5LjUwNzMgMjYuMDA5NyAzNy45NDA5IDIwLjI3NzggNDguMDQyNEMxNy41MzIgNTIuODgxMyAxNC4zMDUxIDU3Ljk4MSAxMy4xNDIzIDYzLjMzMjFDMTEuODg4NCA2OS4xMDE4IDEwLjcyNDYgNzUuMDczOCA4LjQ1MzIzIDgwLjU3NzlDNi4zNTM0IDg1LjY2NjEgMy4xMjE5NSA5MC42NDMxIDIuMTMzMjIgOTUuOTY3M0MxLjMzODk0IDEwMC4yNDQgMC41MjA4ODggMTA0LjY4OSAxLjM0MDM5IDEwOS4wMjFDMS44ODI0MyAxMTEuODg3IDMuNTI3NjIgMTE1LjAzNyA0Ljc4MzU0IDExNy43MjRDOS43NDMxMyAxMjguMzM3IDkuNDk0MTMgMTM5Ljg5OSAxOS4wNzcyIDE0OC4zNDNDMjQuMTg2MyAxNTIuODQ1IDI4LjA5NDEgMTU4LjI1OCAzMy44OTE4IDE2Mi4yNTZDMzkuNzE2MiAxNjYuMjcyIDQ1LjUwOTYgMTcwLjEzIDUyLjEwNDMgMTczLjIzNEM1OS45MDIyIDE3Ni45MDQgNjguMzEyIDE3OS4yNTcgNzYuMzE5NyAxODIuNDk2Qzc5LjIwMyAxODMuNjYyIDgyLjc0NjYgMTg0LjA0OSA4NS44NzkgMTg0LjI5MkM5My4xNTggMTg0Ljg1OCAxMDAuMjkxIDE4NC45MzEgMTA3LjYyNSAxODQuOTMxQzExMy4wNTggMTg0LjkzMSAxMTguNDMzIDE4NS4yOSAxMjMuODQ0IDE4NS4yOUgxMzkuNjFDMTQ1Ljg3OSAxODUuMjkgMTUzLjQ4IDE4Ni4xNjggMTU5LjMxOCAxODMuNzczQzE3MS42MjggMTc4LjcyNCAxODIuMDQ5IDE3MS4xODkgMTkzLjU0NiAxNjQuNzkxQzE5OC44NjkgMTYxLjgyOCAyMDMuNjE4IDE1OC4wOTYgMjA2LjU5MyAxNTMuMTE0QzIwOC4yNzcgMTUwLjI5NSAyMTAuMjcxIDE0Ny40MjkgMjExLjY5IDE0NC41MTFDMjEzLjEzNyAxNDEuNTM2IDIxNS41NzQgMTM4Ljk3OCAyMTYuOTkxIDEzNi4wMjhDMjIzLjc3MyAxMjEuOTAzIDIyMS43MDIgMTA1LjM3NyAyMjEuNzAyIDkwLjM1ODRWNzcuODYzMkMyMjEuNzAyIDc1LjkyODggMjIxLjM3MSA3NC4zNDggMjIwLjc5NiA3Mi40NzM5QzIyMC4wMyA2OS45NzY3IDIyMC40MjMgNjcuMDg5OSAyMjAuMTYyIDY0LjUyOTdDMjE5Ljc5OSA2MC45NjY0IDIyMC4yNTYgNTcuMzYxNiAyMjAuMDcyIDUzLjc5MUMyMTkuOTQyIDUxLjI4MDQgMjE4LjI4NSA0OS4wNTA2IDIxOC4wMzMgNDYuNjA1M0MyMTcuNzgxIDQ0LjE2NzYgMjE2LjYzMyA0MC45MjgxIDIxNS40OTYgMzguNzAwOUMyMTQuNzA1IDM3LjE1MzUgMjE0LjM4NiAzNS4wMDI0IDIxMi45NTkgMzMuNjcwOUMyMTEuNzY1IDMyLjU1NzQgMjEwLjYzNiAzMS4wNTQyIDIwOS44NzggMjkuNzE4OE0yMjIuMTk3IDUzLjEyMjdDMjE3LjQ4NCA0OC4wOTg5IDIxMi4yMzggNDMuMDE5OSAyMDUuOTk3IDM5Ljg1NzZDMTk5LjkzMSAzNi43ODM1IDE5My44MjIgMzQuMTk4NCAxODcuNTA5IDMxLjcwNzNDMTgxLjQ0NCAyOS4zMTQxIDE3NS4yMzQgMjcuMDkyIDE2OS4wNDcgMjUuMDc2MUMxNjMuNTkyIDIzLjI5OSAxNTguMjU1IDIxLjE4NDMgMTUyLjc1NCAxOS41OTFMMTA1LjgyNSA1Ljk5ODZDOTkuMzY4MyA0LjEyODYzIDkxLjU2NTggMC41NjYyNjIgODQuODU1OSAxLjA0MzU2QzgzLjA1NiAxLjE3MTU5IDgxLjIyMTYgMS4wNTY2NCA3OS41MDYyIDEuNDQwNjJDNzcuNjI5NyAxLjg2MDY3IDc1LjczODYgMi45MDY0IDczLjg1MTIgMy40NDczQzYyLjU4NzggNi42NzUgNTIuNTg1NiAxMi41MjczIDQ0Ljk3NzQgMjAuODAzNUM0MS4zMzI5IDI0Ljc2NzkgMzcuMTg4OSAyOC44NTgzIDM0Ljg2MzIgMzMuNzM2MkMzMi4zNTU2IDM4Ljk5NTYgMjkuODgyIDQ0LjQ3NDggMjYuNTExNiA0OS4yMDg3QzIzLjM5NTcgNTMuNTg1IDE5LjI3NjYgNTcuNTU1MyAxNy4xMTU3IDYyLjQ1M0MxNS4zNzk4IDY2LjM4NzUgMTMuNTgyNyA3MC40Nzc3IDEzLjMwMiA3NC44OTEzQzEzLjExNjMgNzcuODEwNiA0LjY5MjExIDc5LjA3MTMgNS4xOTgxNSA4Mi4wMDYxQzcuMTk2NDcgOTMuNTk1NiA2LjExNDQ1IDEwNi45NTYgMTIuODMzMyAxMTcuNjYzQzE2LjQxNTMgMTIzLjM3MSAxNS41MTk4IDEzNy41NTUgMTkuODQ3OCAxNDIuOTU2QzI0LjE5NTcgMTQ4LjM4MiAzMi42MzA1IDE1Mi45NDIgMzcuODk1NiAxNTcuNjg3QzQ0LjEyMTEgMTYzLjI5NyA0Ni42NjkgMTY1LjEwNiA1My4xODc1IDE3MC4zNTRDNTUuNTM0NiAxNzIuMjQzIDY5LjE2MDEgMTc1LjY1NCA3MS45NTI0IDE3Ni43MTVDNzguNDQxMSAxNzkuMTgyIDgyLjk2MDEgMTgzLjcxMyA4OS42MzMgMTg1LjY0NkM5NC41NzU3IDE4Ny4wNzcgMTAxLjc3MiAxNzkuNjM5IDEwNi42OTUgMTgxLjA2NUwxMjEuMDQgMTg1LjIyQzEyNi43NDQgMTg2Ljg3MiAxMzMuNDUyIDE4OS43MjUgMTM5LjMzMSAxODguOTQ0QzE1MS43MjcgMTg3LjI5NiAxNjIuOTk0IDE4Mi43NDIgMTc0Ljk2OSAxNzkuNTczQzE4MC41MTQgMTc4LjEwNiAxODUuNzE5IDE3NS43NDEgMTg5LjYwNyAxNzEuNjk5QzE5MS44MDcgMTY5LjQxMSAxOTQuMyAxNjcuMTYgMTk2LjI4MiAxNjQuNzA3QzE5OC4zMDMgMTYyLjIwNiAyMDEuMTI3IDE2MC4zNyAyMDMuMTE1IDE1Ny44ODVDMjEyLjYzMSAxNDUuOTg3IDIxNC42NjIgMTI5LjQzMiAyMTguMjIgMTE0Ljg4MUwyMjEuMTggMTAyLjc3NUMyMjEuNjM4IDEwMC45MDEgMjIxLjcxMSA5OS4yODIyIDIyMS42MzIgOTcuMzE1QzIyMS41MjcgOTQuNjkzOCAyMjIuNTY4IDkyLjAwMDUgMjIyLjkzNyA4OS40NTEzQzIyMy40NTEgODUuOTAzMyAyMjQuNzIgODIuNTMxMyAyMjUuMzk5IDc5LjAyMzRDMjI1Ljg3NSA3Ni41NTY5IDIyNC44OTYgNzMuOTYgMjI1LjI0NiA3MS41MjQ0QzIyNS41OTQgNjkuMDk2NSAyMjUuMzE3IDY1LjY1NTQgMjI0LjgxIDYzLjE5NzlDMjI0LjQ1OCA2MS40OTA0IDIyNC42NzYgNTkuMzIyMiAyMjMuNjkzIDU3LjY1NjFDMjIyLjg3MSA1Ni4yNjI3IDIyMi4xOTkgNTQuNTA4OCAyMjEuODI2IDUzLjAxNTMiIHN0cm9rZT0iIzRCMzNGRiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+Cjwvc3ZnPgo=");
}

#scop .block {
  padding:30px 18px 70px 18px;
  background-color: white;
  border-image-slice:15 12 0 15 fill;
  border-image-width:10px 10px 10px 10px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch stretch;
  border-image-source: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDc4IiBoZWlnaHQ9Ijg5NSIgdmlld0JveD0iMCAwIDQ3OCA4OTUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xIDEuNzQzNjVWODkyLjg5NUM3MC4xMjc0IDkwMi4zNzggMzQ3LjEzNiA4MzAuMDM3IDQ3NyA3OTIuNjgxVjEuNzQzNjVIMVoiIGZpbGw9IndoaXRlIiBzdHJva2U9IiM0QjMzRkYiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4K");
  border-style: solid;
}

#team .block, #partneaires .block{
  background-color: white;
  border-image-slice:15 12 0 15 fill;
  border-image-width:10px 10px 10px 10px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch stretch;
  border-image-source: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDcyIiBoZWlnaHQ9IjI4NSIgdmlld0JveD0iMCAwIDQ3MiAyODUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xLjAyNTQ4IDEuNVYyNjcuNjk5Qy0yLjE4NjIgMzAyLjg0MiAyOTkuMDQxIDI2OS40ODMgNDcxIDI2MS45MDJWMTcuMTA2M0M0NjguOTc5IDEwLjMyODcgMTU2Ljg0MSAzLjg3ODEgMS4wMjU0OCAxLjVaIiBzdHJva2U9IiM0QjMzRkYiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4K");
  border-style: solid;
}

.block {
  padding:30px 18px;
  border: 1.5px solid var(--blue);
  background-color: white;
}

.block#picTeam{
  padding: 0px;
  border: 0px solid var(--blue);
}
.block#picTeam picture img{
  margin-top: -30px;
}

#mission .block, #confiance .block {
  background-color: white;
  border-image-slice:15 12 0 15 fill;
  border-image-width:10px 10px 10px 10px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch stretch;
  border-style: solid;
}
#mission .block#mission1 {
  border-image-source: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIyIiBoZWlnaHQ9IjIyNiIgdmlld0JveD0iMCAwIDMyMiAyMjYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0zMjEgMjI0TDMyMSAzLjYyNDQ4QzMxNC44NjMgLTEuOTQxNzQgMTE4LjA4NSAyLjE0NzkyIDAuOTk5OTU4IDguNDIzMjdMMC45OTk5NCAyMTEuMDhDMi4zNzYzMSAyMTYuNjkxIDIxNC45MDcgMjIyLjAzMSAzMjEgMjI0WiIgc3Ryb2tlPSIjNEIzM0ZGIiBzdHJva2Utd2lkdGg9IjIiLz4KPC9zdmc+Cg==");
}
#mission .block#mission2,  #confiance .block {
  border-image-source: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDcyIiBoZWlnaHQ9IjI4NSIgdmlld0JveD0iMCAwIDQ3MiAyODUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xLjAyNTQ4IDEuNVYyNjcuNjk5Qy0yLjE4NjIgMzAyLjg0MiAyOTkuMDQxIDI2OS40ODMgNDcxIDI2MS45MDJWMTcuMTA2M0M0NjguOTc5IDEwLjMyODcgMTU2Ljg0MSAzLjg3ODEgMS4wMjU0OCAxLjVaIiBzdHJva2U9IiM0QjMzRkYiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4K");
}
#mission .block#mission3 {
  border-image-source: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIzIiBoZWlnaHQ9IjIzMyIgdmlld0JveD0iMCAwIDMyMyAyMzMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0zMjIgMjI5Ljg5NEwzMjIgOS45MTkwMUMzMTYuODczIC0xMi42Mzk3IDEyMS44OTYgMTQuNzA5IDEuMDAwMDIgMTQuNzA5MUwxLjAwMDAzIDIyOS44OTRDMi4zODA2OCAyMzUuNDk1IDIxNS41NzUgMjI3LjkyOSAzMjIgMjI5Ljg5NFoiIHN0cm9rZT0iIzRCMzNGRiIgc3Ryb2tlLXdpZHRoPSIyIi8+Cjwvc3ZnPgo=");
}

.nameTeam{
  color: var(--blue);
  font-weight: 600;
}
.descriptionTeam {
    transition: opacity 0.5s ease-in-out;
    opacity: 0;
    font-style: italic;
    font-weight: 100;
    min-height: 100px;
    color: var(--blue);
}


/* ----------------------------------- TOOLS ---------------------------------- */

#tools #rowTools{
  align-items: center;
  justify-content:center;
  display: flex;  
}

#tools{
  margin-bottom: 50px
}
#tools p{
  margin-bottom: 0;
}
#tools .contourCrayon{
    height: 230px;
    padding: 0 30px 0 30px;
    margin-bottom: 20px
}

#tools h3{
  font-weight: 600;
  font-style: italic;
  color: var(--darkBlue);
}
#tools a h3{
   transition: transform .3s ease;
  z-index: 10;
  font-size: 190%;
  }

#tools a h3:hover{
  color: var(--blue);
  transform: scale(1.1);
  }

#reflechir h3{
  margin-left: 100px;
   margin-top: 10px;
}

#reflechir img{
  width: 60%; 
}

#collecter{
 margin-top: 59px;
text-align: right;
}

#collecter img{
  width: 60%; 
}

#collecter h3{
  margin-left: 50px;
  margin-top: 90px;
}

#experimenter{
  margin-top: 20px;
}
#experimenter h3{
  margin-top: 32px;
}
#experimenter img{
  width: 100%;
}

#informer img{
  margin-left: 0px;
}
#informer h3{
  margin-top: 50px;
  margin-left: 100px;
}


#sensibiliser{
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 50px;
}
#sensibiliser h3{
margin-top: -20px;
    margin-left: 0px;
}

#sinstaller{
  margin-top:50px;
  display: flex;
  align-items: center;
}
#sinstaller h3{
    margin-left: 10px;
}




/* --------------- TOOL -------------- */


.text-tools.contourCrayon{
  padding: 50px 30px 50px 50px;
}

#tool .container.d-flex.align-items-center.full-height div{
  z-index: 1;
}

.text-content {
    display: none; /* Cache tous les textes par défaut */
}

.text-content.active {
    display: block; /* Affiche uniquement le texte actif */
}

#tool h2{
  font-style: italic;
  font-weight: 600;
  color: var(--darkBlue);
}


#tool ul li {
    list-style: none;
}

#tool ul li a {
    color: var(--darkBlue);
    font-weight: 400;
    text-decoration: none;
    padding: 4px; /* Ajoutez le padding ici pour éviter un changement de taille lors du survol ou de l'activation */
    transition: color 0.4s ease, background-color 0.4s ease; /* Ajoutez cette ligne */
}

#tool ul li.active a, #tool ul li:hover a {
    color: white;
    background-color: var(--blue);
}


#tool ul {
    padding-left: 0;
}




#tool .gallery-toolCover {
    position: relative; 
}

#tool .contour-overlay {
    position: absolute;
     bottom: 0;
    left: 0; 
    width: 108%; 
    height: auto; 
    max-width: none;
  }
.image-tool-caption p{
  color:var(--blue);
}

  .image-tool-caption {
    color:var(--blue);
    opacity: 0; /* Start invisible */
    transition: opacity 0.5s ease; /* Smooth transition for the opacity */
}

.gallery-toolCover:hover .image-tool-caption {
    opacity: 1; /* Become fully visible on hover */
}

/* ----------------------------------- CONTACT ---------------------------------- */



  #contact h3{
    font-style: italic;
    font-weight: 600;
    color: var(--darkBlue);
  }

  li.nav-item.social {
    list-style: none;
    display: inline-block;
  }

  #contact ul{
    padding-left:0;
  }

 #contact a{
    color: var(--darkBlue);
  }
#contact  a:hover{
    color: var(--blue);
  }  

  #logo-secondaire{
    transform: rotate(45deg);
  }


/* ----------------------------------- RESPONSIVE ---------------------------------- */


/* ---------------------------- MOBILE & PLUS (SM) ---------------------------- */
@media only screen and (min-width: 576px) {
}

/* ---------------------------- TABLET & PLUS (MD) ---------------------------- */
@media (min-width: 768px){

}

/* ---------------------------- DESKTOP (LG) ---------------------------- */
@media (min-width: 992px){
	.mt-300 { margin-top: 300px!important;}
	.mt-250 { margin-top: 250px!important;}
	.mt-200 { margin-top: 200px!important;}
	.mt-100 { margin-top: 100px!important;}
	.mt-150 { margin-top: 150px!important;}
	.mt-50 { margin-top: 50px!important;}

	.text-columns {
	    column-count: 2;
	    column-gap: 30px; 
	}

	.mobile-none{
		display: none;
	}


	.desk-none{
		display: block;
	}

  .nav-link {
      padding: 0.5rem 1rem;
  }

  .navbar-light .navbar-nav .nav-link{
    margin-left: 0px;
    font-size: 16px;
  }

  .navbar-nav{
      padding: 20px 0;
      background-color: white;
      height: 100%;
  }

  .navbar-brand {
      width: 50%;
      padding:10px 20px;
  }

  .navbar{
    background-color: white;
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .navbar button {
    padding:10px 20px;
  }

  .navbar-collapse{
    box-shadow: none;
  }



}



@media screen and (min-width: 1024px) {

  
  main#tools, main#tool, main#contact, main#error {
      margin-top:0px;
  }

  #home .image-caption .scotch-horizontal {
      left: -10px; /* Ajustez si vous voulez le décaler de la gauche */
  }
  .grid-item img.scotch-horizontal{
      width: 5vw;
    }

    #project .grid-item {
      height: 360px;
      position: relative;
    }

    #project .grid-item--height2 { height: 500px; }
    #project .grid-item--height3 { height: 700px; }
    #project .grid-item--height4 { height: 950px; }

    #engagements{
      margin-top: 200px;
    }

    #descriptionContainer{
      display: block;
    }

    #tools .container{
      height: 95vh;
    }
    #tools #rowTools{
      justify-content:space-between;
      height: 100%;
    }
    
    #tools{
      margin-bottom: 0px
    }
    #tools .contourCrayon{
        height: 230px;
        padding: 0 30px 0 55px;
    }
    #tools a h3{
      font-size: 1.75rem;
    }
    #experimenter h3{
      margin-top: 99px;
    }

    #collecter img{
      width: 60%; 
    }
    #collecter{
     margin-top: 109px;
    text-align: right;
    }
    #collecter h3{
      margin-left: 50px;
      margin-top: 60px;
    }

    #experimenter{
      margin-top: 0px;
    }

    #informer img{
      margin-left: -50px;
    }
    #informer h3{
      margin-top: 40px;
      margin-left: 71px;
    }

    #sensibiliser{
        margin-left: -80px;
        margin-right: 80px;
        margin-top: 50px;
    }
    #sensibiliser h3{
    margin-top: -70px;
        margin-left: -50px;
    }

    #sinstaller{
      display: block;
    }


    .draggable {
        cursor: move; 
    }

    .dragging {
        opacity: 0.5; 
    }

    #sinstaller h3{
        margin-top: 15px;
    }


    #tool .container-fluid, #tool .container, #project .container-fluid{
      height: 100vh;
    }
    #tool .container-fluid, #project .container-fluid{
        position: absolute;
        z-index: -2;
        top: 0;
      }

    .arrow-project{
      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCAyMCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyLjExNzggMjYuMTg0MkMxNC42MTAzIDI4Ljk5NzcgMTYuOTM3NSAzMS45NzU4IDE5LjEwODkgMzUuMDk4OUMxOS44NDk5IDM2LjE2MzggMTkuOTYzMyAzNy42MjgyIDE5LjAxNTcgMzguNjI3M0MxOC4xOTY3IDM5LjUwMDcgMTYuNTkzMiAzOS41OTc4IDE1Ljg1MjUgMzguNTIyOEMxMy42MDM2IDM1LjI4NzIgMTEuMTgxIDMyLjE5NTkgOC41ODM2IDI5LjI4ODhDNy4zMTUzOCAyNy44NjY0IDYuMDAxNDMgMjYuNDgyNCA0LjY1MDQyIDI1LjE0NzJDMy45NTMyNCAyNC40NTM5IDMuMjI5NTEgMjMuNzQ5NyAyLjUyMjA3IDIzLjEwNkMxLjgxNDYzIDIyLjQ2MjQgMS4wOTU4NyAyMS45MDg0IDAuNzI4MDI3IDIwLjkzNTlDLTAuMTQ5ODEgMTguNjE1OSAxLjcyNzk0IDE2LjkzNzEgMi45ODQ2MyAxNS40MDc5QzQuMzQzMDQgMTMuNzUyMSA1LjcyOCAxMi4xMDcxIDcuMTIxNjIgMTAuNDcyNEM5LjgwNzE2IDcuMzI5NjcgMTIuNTYyOSA0LjIzOTMgMTUuMzYxNCAxLjIyMDM3QzE3LjQ0MTYgLTEuMDExOTIgMjAuNTAyNSAyLjYzMDcyIDE4LjQzMTMgNC44NjMzMUMxNi4wMDA3IDcuNDk0MjIgMTMuNTk1OSAxMC4xNjYgMTEuMjQzNCAxMi44ODk1QzEwLjA5MDMgMTQuMjIyIDguOTU0NzkgMTUuNTY1MSA3LjgxOTAxIDE2LjkxODJMNy44MTgzNCAxNi45MTlDNy4yMjc0MSAxNy42Mjk1IDYuNjM2NDkgMTguMzQwMSA2LjA1NDQ5IDE5LjA1MDlDNS43NTg3OSAxOS40MTEzIDUuNjY4NTggMTkuNjI3MyA1LjY2ODU4IDE5LjYyNzNMNi4zODkyIDIwLjI2MjVDNy4wNTI0OSAyMC44ODQ2IDcuNzA2NTggMjEuNTE2NSA4LjM1MTIxIDIyLjE2ODFDOS42NDA0NiAyMy40NzEyIDEwLjg5MzIgMjQuODAzMSAxMi4xMTc4IDI2LjE4NDJaIiBmaWxsPSIjMEUyODU2Ii8+Cjwvc3ZnPgo=');
      background-repeat: no-repeat;
      background-size: contain;
      width: 20px; 
      height: 40px; 
    }

    .circle-nav svg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      fill: var(--darkBlue);
      height: auto;
      max-width: 66vmin;
      transform-origin: center;
      width: 86%;
    }

    .project-navigation{
      position: absolute;
    }

    .navigation-item.prev-project{
      margin-left: 2.5vw;
    }
    .navigation-item.next-project{
      margin-right: 2.5vw;
    }

}


/* ---------------------------- DESKTOP (XL) ---------------------------- */
@media (min-width: 1200px) {
  .navbar-brand {
      width: 16%;
  }

  .navbar{
    padding:initial;
    background-color: transparent;
  }

  .navbar-nav{
      padding: 20px 0;
      background-color: transparent;
      height: 100%;
  }

  .navbar-light .navbar-nav .nav-link{
    border-radius: 50px;
    padding: 5px 15px;
    margin-right: 5px;
    background-color: white;
  }

  .grid-sizer,
  .grid-item {
    width: 25%;
  }
  .grid-item--width2 { width: 50%; } 
  .grid-item--width3 { width: 75%; } 
  .grid-item--width4 { width: 100%; }

  #project .grid-item--height2 { height: 300px; }
  #project .grid-item--height3 { height: 400px; }
  #project .grid-item--height4 { height: 500px; }

  #nextPrevProject, #filterProject {
      height: 100%; 
  }

  .project-navigation, .filter-navigation {
      display: flex; 
      flex-direction: column; 
      justify-content: center; 
      height: 100%; 
      position: absolute;
    }

    #container-filter{
      position:fixed;
      height: 100vh;
    }


    #filterProject {
      justify-content: flex-end;
    align-items:center;
   }

   #is-textDescriptif, #is-illustration{
     display: block;
   }

   #home .grid-item {
     height: 200px;
   }
   #home .grid-item--height2 { height: 290px; }
   #home .grid-item--height3 { height: 360px; }
   #home .grid-item--height4 { height: 500px; }

   .filter-navigation{
      margin-bottom: 0px;
      margin-top:0px;
    }
}

/* ---------------------------- DESKTOP (XXL) ---------------------------- */
@media (min-width: 1400px) {
   
}

/* ---------------------------- DESKTOP (XXXL) ---------------------------- */
@media (min-width: 1600px) {
    
}


/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
  .container, .container-xl, .container-lg, .container-md, .container-sm {
    max-width: 720px; /* Comme indiqué dans votre exemple */
  }
}

@media (min-width: 1400px){
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 960px;
  }
}