@font-face {
  font-family: "MuseoModerno";
  src: url(./fonts/MuseoModerno/MuseoModerno-Regular.ttf);
}
@font-face {
  font-family: "MuseoModerno-Light";
  src: url(./fonts/MuseoModerno/MuseoModerno-Light.ttf);
}
@font-face {
  font-family: "MuseoModerno-Black";
  src: url(./fonts/MuseoModerno/MuseoModerno-Black.ttf);
}
@font-feature-values 'MuseoModerno' {
  @styleset {
    alt: 1;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Century Gothic", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
a,
a b,
a u,
.alt,
.typewriter {
  font-family: "MuseoModerno", "Century Gothic", "Segoe UI", Tahoma, Geneva,
    Verdana, sans-serif;
}
.alt {
  font-variant-alternates: styleset(alt);
}

/* ########### titre principal ########### */
h1 {
  font-size: 1.75rem;
  color: var(--gold);
  font-weight: bold;
}
h1 span.code {
  font-size: 1.25rem;
  font-weight: normal;
}
.presentation h1,
.presentation-projet h1 {
  padding: 8rem 0 4rem 0;
}
.typewriter {
  display: inline-block;
  overflow: hidden;
  border-right: 2px solid var(--text-color-dark); /* curseur */
  white-space: nowrap;
  animation: typing 2s steps(20, end), blink 1s step-end infinite;
}
/* effet d’écriture */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
/* curseur clignotant */
@keyframes blink {
  50% {
    border-color: transparent;
  }
}

/* ########### je m'appelle Caroline. ########### */
h2 {
  font-size: 1.75rem;
}

/* ########### brand navbar ########### */
h3 {
  font-size: 2rem;
  font-weight: bold;
}
h4 {
  font-size: 0.73rem;
  margin-top: -0.75rem;
  font-weight: bold;
}

/* ########### titre about ########### */
h5 {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--gold);
  margin-bottom: 1.5rem;
}

/* ########### body ########### */
/* ===== Variables ===== */
:root {
  --bg-color-dark: #494949;
  --bg-color-light: #f2f2f2;
  --text-color-dark: rgb(240, 240, 240);
  --text-color-light: rgb(10, 10, 10);
  --transition-time: 0.4s;
  --turquoise: #479796;
  --gold: #ba7954;
}

/* Light mode */
body {
  color: var(--text-color-light);
  transition: background-color var(--transition-time),
    color var(--transition-time);
}
/* Image en dark */
body.dark.dark-bg {
  background: var(--bg-color-dark) url("images/bandeau_moy_small.png") no-repeat
    top center;
  background-size: cover;
  height: 100vh;
}
/* Image en light */
body.light-bg {
  background: var(--bg-color-light) url("images/bandeau_light_small.png")
    no-repeat top center;
  background-size: cover;
  height: 100vh;
}
/* Dark mode */
body.dark {
  color: var(--text-color-dark);
}

/* ===== Bouton thème ===== */
#theme-toggle {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
}
/* Icônes superposées */
.icon-sun,
.icon-moon {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  transition: opacity var(--transition-time) ease;
}

/* Icône lune visible par défaut (light mode) */
.icon-moon {
  opacity: 1;
}

/* Icône soleil masqué par défaut */
.icon-sun {
  opacity: 0;
}

/* Quand on est en dark mode */
body.dark .icon-moon {
  opacity: 0;
}
body.dark .icon-sun {
  opacity: 1;
}

/* ########### header nav ########### */
.header {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  background-color: var(--bg-color-light);
  height: 4rem;
  border-bottom: var(--turquoise) solid 1px;
}
.navbar-brand {
  color: var(--turquoise);
  position: fixed;
  top: 0.5rem;
  left: 1rem;
  z-index: 9999;
}
ul {
  display: flex;
  gap: 2.5rem;
  margin-bottom: 0;
  padding-left: 0;
}
ul,
a {
  list-style-type: none;
  text-decoration: none;
}
.bullet {
  list-style-type: disc;
  margin-left: 5%;
}

li {
  list-style: none;
}
a {
  color: var(--turquoise);
  text-decoration: none;
}
.menu-link {
  cursor: pointer;
}
.menu-link img {
  width: 16px;
}
.header a.active {
  color: var(--gold);
}

.header-right {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  background-color: var(--bg-color-light);
  padding: 0 0.5rem 1rem 0.5rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: var(--turquoise) solid 1px;
}
.header-right .menu-item {
  margin: 1rem 0;
}

/* masquer les textes, garder les icônes */
.header-right .menu-link b,
.header-right .menu-link u,
.header-right .menu-link span {
  display: none;
}

/* icônes visibles */
.header-right .menu-link svg,
.header-right .menu-link img {
  width: 24px;
  height: 24px;
}

/* ################################################# */
.presentation,
.about,
.projets,
.services {
  margin: 0 auto;
}
.presentation,
.about {
  text-align: center;
  padding-bottom: 2vh;
}
.about {
  padding-top: 6vh;
}
.historique,
.experience,
.competences-techniques {
  padding-top: 16vh;
}

.presentation h2 {
  font-weight: bold;
}
.presentation .intro,
.presentation p b {
  font-family: "MuseoModerno-light", "Century Gothic", "Segoe UI", Tahoma,
    Geneva, Verdana, sans-serif;
  font-size: 1.5rem;
}
.presentation p,
.presentation .dev b,
.about p b {
  font-family: "MuseoModerno-light", "Century Gothic", "Segoe UI", Tahoma,
    Geneva, Verdana, sans-serif;
}
.presentation p,
.presentation .dev b {
  font-size: 1.5rem;
}
.about p b {
  font-size: 1rem;
}
.presentation .buttons {
  padding-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1.5rem;
  width: fit-content;
  margin: auto;
}
.presentation .buttons .button {
  background-color: var(--turquoise);
  color: var(--text-color-light);
  border: var(--text-color-light) solid 1px;
  border-radius: 5px;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  cursor: pointer;
  font-family: "MuseoModerno", "Century Gothic", "Segoe UI", Tahoma, Geneva,
    Verdana, sans-serif;
  box-shadow: rgba(0, 0, 0, 0.5) 8px 8px 0px;
  text-align: center;
}
.presentation .buttons .button b {
  font-family: "MuseoModerno-Black", "Century Gothic", "Segoe UI", Tahoma,
    Geneva, Verdana, sans-serif;
}
.presentation .buttons .button:hover {
  background-color: var(--gold);
  transform: translateY(2px);
}
.presentation .buttons svg {
  height: 20px;
  width: 20px;
}
.presentation .buttons img {
  display: none;
}

.presentation .arrows,
.presentation-projet .arrows {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  color: var(--gold);
  margin-top: 4.5rem;
}
.arrows svg {
  opacity: 0;
  animation: blinkArrow 1.5s infinite;
}
/* décalage progressif entre les 3 flèches */
.arrows svg:nth-child(1) {
  animation-delay: 0s;
}
.arrows svg:nth-child(2) {
  animation-delay: 0.3s;
}
.arrows svg:nth-child(3) {
  animation-delay: 0.6s;
}
@keyframes blinkArrow {
  0%,
  100% {
    opacity: 0;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(5px);
  }
}

.competences-techniques p {
  margin-bottom: 5rem;
}
.icones {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin: 1rem 0;
}
.icones img,
.icones li {
  width: 50px;
  height: 50px;
}
.about .buttons {
  padding: 0 0 5rem 0;
}
.about .buttons .button {
  background-color: var(--turquoise);
  color: var(--text-color-light);
  border: var(--text-color-light) solid 1px;
  border-radius: 5px;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  font-family: "MuseoModerno", "Century Gothic", "Segoe UI", Tahoma, Geneva,
    Verdana, sans-serif;
  box-shadow: rgba(0, 0, 0, 0.5) 8px 8px 0px;
  text-align: center;
}
.about .buttons .button b {
  font-family: "MuseoModerno-Black", "Century Gothic", "Segoe UI", Tahoma,
    Geneva, Verdana, sans-serif;
}
.about .buttons .button:hover {
  background-color: var(--gold);
  transform: translateY(2px);
}
.about .buttons svg {
  height: 20px;
  width: 20px;
}
.about .buttons img {
  display: none;
}

/* ##### PROJETS / SERVICES ##### */

.wrapper-services,
.wrapper {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 5vh;
  grid-auto-rows: minmax(85vw, auto);
  padding-top: 6vh;
  padding-bottom: 12vh;
}
.service {
  color: var(--text-color-light);
  background-color: #ffffff;
  border-radius: 5px;
  border: solid 1px var(--text-color-light);
  box-shadow: rgba(0, 0, 0, 0.5) 8px 8px 0px;
  position: relative;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  padding: 0 1rem;
  /* center overlay content */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.service h3 img {
  margin-right: 1rem;
  height: 50px;
  width: 50px;
}
.projet {
  display: flex;
  background-size: cover;
  background-position: center;
  border-radius: 5px;
  border: solid 1px var(--text-color-light);
  box-shadow: rgba(0, 0, 0, 0.5) 8px 8px 0px;
}
.projet .overlay {
  display: contents;
}
.projet .overlay {
  color: var(--text-color-dark);
  position: relative;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  padding: 0 1rem;
  background-color: rgba(0, 0, 0, 0.3);
  text-shadow: rgb(0, 0, 0) 0 0 4px;
  border-radius: 5px;
  /* center overlay content */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.projet .site {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.mtavie-vignette {
  grid-column: 1;
  grid-row: 1;
  background-image: url("./images/mtavie/vignette.png");
}
.av-vignette {
  grid-column: 1;
  grid-row: 2;
  background-image: url("./images/av/vignette.jpg");
}
.charles-vignette {
  grid-column: 1;
  grid-row: 3;
  background-image: url("./images/charlescantin/vignette.jpg");
}
.caroline-vignette {
  grid-column: 1;
  grid-row: 4;
  background-image: url("./images/carolinealetranger/logo.JPG");
}
.terre-vignette {
  grid-column: 1;
  grid-row: 5;
  background-image: url("./images/terredethes/vignette.png");
}
.boss-vignette {
  grid-column: 1;
  grid-row: 6;
  background-image: url("./images/thanksboss/logo-tb-yellow.png");
}
.agrume-vignette {
  grid-column: 1;
  grid-row: 7;
  background-image: url("./images/lagrumeindigo/gym.jpg");
}
.jungle-vignette {
  grid-column: 1;
  grid-row: 8;
  background-image: url("./images/lajungleverte/vignette.png");
}
.music-vignette {
  grid-column: 1;
  grid-row: 9;
  background-image: url("./images/oursupermusicapp/logo.png");
}

/* ##### PROJET ##### */

.wrapper-projet {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 2vh;
  padding-bottom: 28vh;
}
.wrapper-projet .presentation-projet {
  grid-column: 1 / 5;
  grid-row: 1 / auto;
  width: 95%;
  margin: 0 auto;
}
.wrapper-projet .presentation-projet .first-p,
.wrapper-projet .presentation-projet .first-p b {
  color: var(--gold);
  font-size: 1.25rem;
  font-family: "MuseoModerno", "Century Gothic", "Segoe UI", Tahoma, Geneva,
    Verdana, sans-serif;
  text-align: left;
}
.wrapper-projet .presentation-projet p {
  text-align: justify;
}

.wrapper-projet .tools {
  grid-column: 1 / 5;
  grid-row: 2;
  text-align: center;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2vh;
  border-top: 1px solid var(--gold);
  padding-top: 2vh;
}
.wrapper-projet img {
  width: 100%;
}
.wrapper-projet .tools img {
  width: inherit;
  object-fit: inherit;
}
.wrapper-projet .text p {
  color: var(--gold);
  font-size: 1.25rem;
  text-align: center;
  font-family: "MuseoModerno", "Century Gothic", "Segoe UI", Tahoma, Geneva,
    Verdana, sans-serif;
  margin-top: 3rem;
}

/* ##### ANIMATION IMAGES ##### */
@media (prefers-reduced-motion: no-preference) {
  .wrapper-services > .service,
  .wrapper > .projet {
    scale: 0.8;
    opacity: 0;
    animation: fade-in linear forwards;
    animation-timeline: view();
    animation-range: 0px 500px;
  }
  .wrapper-projet .item > img,
  .wrapper-projet .item > video {
    scale: 0.8;
    opacity: 0;
    animation: fade-in linear forwards;
    animation-timeline: view();
    animation-range: 150px 500px;
  }
  .wrapper-projet .tools > img {
    scale: inherit;
    opacity: inherit;
    animation: inherit;
    animation-timeline: inherit;
    animation-range: inherit;
  }
  @keyframes fade-in {
    to {
      scale: 1;
      opacity: 1;
    }
  }
}

/* ##### TERRE DE THÉS ##### */

.terre .moodboard-text {
  grid-column: 1 / 5;
  grid-row: 3;
}
.terre .moodboard {
  grid-column: 1 / 5;
  grid-row: 4;
}
.terre .moodboard img {
  border: solid 1px var(--bg-color-dark);
}
.terre .logos-text {
  grid-column: 1 / 5;
  grid-row: 5;
}
.terre .logo1 {
  grid-column: 1 / 3;
  grid-row: 6;
}
.terre .logo2 {
  grid-column: 3 / 5;
  grid-row: 6;
}
.terre .logo3 {
  grid-column: 1 / 3;
  grid-row: 7;
}
.terre .logo4 {
  grid-column: 3 / 5;
  grid-row: 7;
}
.terre .arborescence-text {
  grid-column: 1 / 5;
  grid-row: 8;
}
.terre .arborescence {
  grid-column: 1 / 5;
  grid-row: 9;
}
.terre .mobiles-text {
  grid-column: 1 / 5;
  grid-row: 10;
}
.terre .mobile1 {
  grid-column: 1 / 3;
  grid-row: 11;
}
.terre .mobile2 {
  grid-column: 3 / 5;
  grid-row: 11;
}
.terre .mobile3 {
  grid-column: 1 / 3;
  grid-row: 12;
}
.terre .mobile4 {
  grid-column: 3 / 5;
  grid-row: 12;
}
.terre .mobile5 {
  grid-column: 1 / 3;
  grid-row: 13;
}
.terre .mobile6 {
  grid-column: 3 / 5;
  grid-row: 13;
}
.terre .prototype1 {
  grid-column: 1 / 5;
  grid-row: 14;
}
.terre .desktops-text {
  grid-column: 1 / 5;
  grid-row: 15;
}
.terre .desktop1 {
  grid-column: 1 / 5;
  grid-row: 16;
}
.terre .desktop2 {
  grid-column: 1 / 5;
  grid-row: 17;
}
.terre .desktop3 {
  grid-column: 1 / 5;
  grid-row: 18;
}
.terre .desktop4 {
  grid-column: 1 / 5;
  grid-row: 19;
}
.terre .desktop5 {
  grid-column: 1 / 5;
  grid-row: 20;
}
.terre .desktop6 {
  grid-column: 1 / 5;
  grid-row: 21;
}
.terre .prototype2 {
  grid-column: 1 / 5;
  grid-row: 22;
}
.terre .video-text {
  grid-column: 1 / 5;
  grid-row: 23;
}
.terre .video {
  grid-column: 1 / 5;
  grid-row: 24;
  width: 100%;
}
.terre .mockups-text {
  grid-column: 1 / 5;
  grid-row: 25;
}
.terre .mockup1 {
  grid-column: 1 / 5;
  grid-row: 26;
}
.terre .mockup2 {
  grid-column: 1 / 5;
  grid-row: 27;
}
.terre .packagings-text {
  grid-column: 1 / 5;
  grid-row: 28;
}
.terre .packaging4 {
  grid-column: 1 / 5;
  grid-row: 29;
}
.terre .packaging5 {
  grid-column: 1 / 5;
  grid-row: 30;
}
.terre .packaging1 {
  grid-column: 1 / 5;
  grid-row: 31;
}
.terre .packaging2 {
  grid-column: 1 / 3;
  grid-row: 32;
}
.terre .packaging3 {
  grid-column: 3 / 5;
  grid-row: 32;
}
.terre .menus-text {
  grid-column: 1 / 5;
  grid-row: 33;
}
.terre .menu1 {
  grid-column: 1 / 5;
  grid-row: 34;
}
.terre .menu2 {
  grid-column: 1 / 5;
  grid-row: 35;
}

/* ##### THANKS-BOSS ##### */

.boss .video1-text {
  grid-column: 1 / 5;
  grid-row: 3;
}
.boss .video1 {
  grid-column: 1 / 5;
  grid-row: 4;
  width: 100%;
}
.boss .video2-text {
  grid-column: 1 / 5;
  grid-row: 5;
}
.boss .video2 {
  grid-column: 1 / 5;
  grid-row: 6;
  width: 100%;
}

/* ##### L'AGRUME INDIGO ##### */

.agrume .video1-text {
  grid-column: 1 / 5;
  grid-row: 3;
}
.agrume .video1 {
  grid-column: 1 / 5;
  grid-row: 4;
  width: 100%;
}
.agrume .video2-text {
  grid-column: 1 / 5;
  grid-row: 5;
}
.agrume .video2 {
  grid-column: 1 / 5;
  grid-row: 6;
  width: 100%;
}
.agrume .video3-text {
  grid-column: 1 / 5;
  grid-row: 7;
}
.agrume .video3 {
  grid-column: 1 / 5;
  grid-row: 8;
  width: 100%;
}

/* ################################################# */
/* #################### DESKTOP #################### */
/* ################################################# */
@media screen and (min-width: 992px) {
  .presentation,
  .services,
  .about {
    text-align: justify;
    width: 90%;
  }
  .projets {
    width: 90%;
  }
  iframe {
    width: 775px;
    height: 2190px;
  }
}

@media screen and (min-width: 1080px) {
  h1 {
    font-size: 4rem;
  }
  h1 span.code {
    font-size: 2.5rem;
  }
  h2 {
    font-size: 3rem;
  }
  h5 {
    font-size: 2rem;
    margin-bottom: 2rem;
  }

  .presentation,
  .services,
  .about {
    width: 70%;
  }
  .projets {
    width: 80%;
  }

  .presentation h1,
  .presentation-projet h1 {
    padding: 8rem 0;
  }

  .presentation .intro,
  .presentation p b {
    font-size: 2rem;
  }
  .presentation p,
  .presentation .dev b,
  .about p,
  .about p b {
    font-size: 1.5rem;
  }

  .presentation .buttons,
  .about .buttons {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .contact {
    display: none;
  }
  .presentation .buttons .button,
  .about .buttons .button {
    margin-top: 0rem;
    padding: 1rem 1.5rem;
    font-size: 1.25rem;
    text-align: center;
  }
  .presentation .buttons svg,
  .about .buttons svg {
    height: 20px;
    width: 20px;
  }
  .about .buttons {
    margin: 20vh 0 12vh 0;
  }
  .about .buttons img {
    display: block;
    height: 60px;
    width: 60px;
  }
  .about {
    padding-top: 0;
  }

  .header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    padding: 0 1rem;
    background-color: transparent;
    border-bottom: none;
  }

  .header-right {
    background-color: transparent;
    padding: 0 0.5rem;
    position: static;
    width: auto;
    display: flex;
    flex-direction: row;
    gap: 3rem;
    align-items: center;
    border-top: none;
  }
  .header-right .menu-item {
    cursor: pointer;
  }
  .header a.active:hover {
    color: var(--text-color-dark);
  }
  .navbar-brand {
    text-align: left;
  }

  /* mots réaffichés */
  .header-right .menu-link b,
  .header-right .menu-link u,
  .header-right .menu-link span {
    display: inline;
  }

  /* icônes masquées */
  .header-right .menu-link svg,
  .header-right .menu-link img {
    display: none;
  }
  /* exceptions : mail icon + theme icons */
  .menu-item:nth-last-child(2) svg,     /* envelope */
  #theme-toggle svg {
    /* sun + moon */
    display: inline-block;
    height: 20px;
    width: 20px;
  }

  a,
  .navbar-brand {
    position: static;
    display: inline-block; /* permet le transform */
    transition: transform 0.2s ease, color 0.2s ease;
  }
  a:hover,
  a svg:hover,
  .navbar-brand:hover {
    color: var(--gold);
    transform: translateY(2px);
  }

  .icones img,
  .icones li {
    width: 80px;
    height: 80px;
  }
  .body {
    padding-top: 5%;
  }

  /* ##### PROJETS / SERVICES ##### */

  .wrapper-services {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(45vh, auto);
    padding-top: 18vh;
  }
  .service {
    padding: 3rem 3rem;
    align-items: inherit;
  }
  .wrapper {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(45vh, auto);
    padding-top: 18vh;
  }
  .projet .overlay {
    display: none;
  }
  .projet:hover .overlay {
    display: contents;
    position: relative;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3);
    text-shadow: rgb(0, 0, 0) 0 0 4px;
    border-radius: 5px;
    /* center overlay content */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .projet .site {
    display: none;
  }

  .figma {
    grid-column: 1 / 3;
    grid-row: 1;
  }
  .wordpress {
    grid-column: 1 / 3;
    grid-row: 2;
  }
  .custom {
    grid-column: 1 / 3;
    grid-row: 3;
  }

  .mtavie-vignette {
    grid-column: 1 / 3;
    grid-row: 1;
  }
  .av-vignette {
    grid-column: 3;
    grid-row: 1;
  }
  .charles-vignette {
    grid-column: 2 / 4;
    grid-row: 2;
  }
  .caroline-vignette {
    grid-column: 1;
    grid-row: 2;
  }
  .boss-vignette {
    grid-column: 3;
    grid-row: 3;
  }
  .terre-vignette {
    grid-column: 1 / 3;
    grid-row: 3;
  }
  .agrume-vignette {
    grid-column: 1;
    grid-row: 4;
  }
  .jungle-vignette {
    grid-column: 2;
    grid-row: 4;
  }
  .music-vignette {
    grid-column: 3;
    grid-row: 4;
  }

  /* ##### PROJET ##### */

  .wrapper-projet .presentation-projet {
    width: 66%;
  }
  .wrapper-projet .text {
    font-size: 1rem;
  }
  .wrapper-projet .description {
    text-align: justify;
  }
  .wrapper-projet .description .title-mobile {
    display: none;
  }
  .wrapper-projet .title {
    grid-column: 1;
    grid-row: 1;
    /*background-position: top;
    background-repeat: no-repeat;
    background-size: contain;*/
    text-align: center;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .wrapper-projet .description {
    grid-column: 2 / 5;
    grid-row: 1;
    color: var(--gold);
  }
  .wrapper-projet .description .first-p {
    border-top: inherit;
    padding-top: inherit;
  }

  /* ##### TERRE DE THÉS ##### */
  .terre .logo1 {
    grid-column: 1;
    grid-row: 6;
  }
  .terre .logo2 {
    grid-column: 2;
    grid-row: 6;
  }
  .terre .logo3 {
    grid-column: 3;
    grid-row: 6;
  }
  .terre .logo4 {
    grid-column: 4;
    grid-row: 6;
  }
  .terre .arborescence-text {
    grid-column: 1 / 5;
    grid-row: 7;
  }
  .terre .arborescence {
    grid-column: 1 / 5;
    grid-row: 8;
  }
  .terre .mobiles-text {
    grid-column: 1 / 5;
    grid-row: 9;
  }
  .terre .mobile1 {
    grid-column: 1;
    grid-row: 10;
  }
  .terre .mobile2 {
    grid-column: 2;
    grid-row: 10;
  }
  .terre .mobile3 {
    grid-column: 3;
    grid-row: 10;
  }
  .terre .mobile4 {
    grid-column: 4;
    grid-row: 10;
  }
  .terre .mobile5 {
    grid-column: 1;
    grid-row: 11;
  }
  .terre .mobile6 {
    grid-column: 2;
    grid-row: 11;
  }
  .terre .prototype1 {
    grid-column: 3 / 5;
    grid-row: 11;
  }
  .terre .desktops-text {
    grid-column: 1 / 5;
    grid-row: 12;
  }
  .terre .desktop1 {
    grid-column: 1 / 3;
    grid-row: 13;
  }
  .terre .desktop2 {
    grid-column: 3 / 5;
    grid-row: 13;
  }
  .terre .desktop3 {
    grid-column: 1 / 3;
    grid-row: 14;
  }
  .terre .desktop4 {
    grid-column: 3 / 5;
    grid-row: 14;
  }
  .terre .desktop5 {
    grid-column: 1 / 3;
    grid-row: 15;
  }
  .terre .desktop6 {
    grid-column: 3 / 5;
    grid-row: 15;
  }
  .terre .prototype2 {
    grid-column: 1 / 5;
    grid-row: 16;
  }
  .terre .video-text {
    grid-column: 1 / 5;
    grid-row: 17;
  }
  .terre .video {
    grid-column: 1 / 5;
    grid-row: 18;
    width: 100%;
  }
  .terre .mockups-text {
    grid-column: 1 / 5;
    grid-row: 19;
  }
  .terre .mockup1 {
    grid-column: 1 / 3;
    grid-row: 20;
  }
  .terre .mockup2 {
    grid-column: 3 / 5;
    grid-row: 20;
  }
  .terre .packagings-text {
    grid-column: 1 / 5;
    grid-row: 21;
  }
  .terre .packaging4 {
    grid-column: 1 / 5;
    grid-row: 22;
  }
  .terre .packaging5 {
    grid-column: 1 / 5;
    grid-row: 23;
  }
  .terre .packaging1 {
    grid-column: 1 / 3;
    grid-row: 24;
  }
  .terre .packaging2 {
    grid-column: 3 / 4;
    grid-row: 24;
  }
  .terre .packaging3 {
    grid-column: 4 / 5;
    grid-row: 24;
  }
  .terre .menus-text {
    grid-column: 1 / 5;
    grid-row: 25;
  }
  .terre .menu1 {
    grid-column: 1 / 3;
    grid-row: 26;
  }
  .terre .menu2 {
    grid-column: 3 / 5;
    grid-row: 26;
  }
}

@media screen and (min-width: 1440px) {
  .presentation,
  .services,
  .contact,
  .about {
    width: 50%;
  }
  .projets {
    width: 80%;
  }
}

@media screen and (min-width: 1920px) {
  .presentation,
  .services,
  .contact,
  .about {
    width: 40%;
  }
  .projets {
    width: 70%;
  }
}