:root {
  --green: #01D55D;
  --orange: #FB6E16;
  --purple: #A238FF;
  --neutral-black: #000000;
  --grey-600: #444444;
  --grey-300: #D6D9DD;
  --grey-200: #E9ECEF;
  --grey-100: #F4F4F4;
  --silver: #F3F5F7;
  --neutral-white: #ffffff;
}

* {
  margin: 0 0;
  padding: 0 0;
  box-sizing: border-box;
}

body {
  background-color: var(--neutral-white);
  overflow-x: hidden;
}

img {
  max-width: 100%;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

.container {
  width: 100%;
  margin: 0 auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.separator {
  height: 1px;
  background-color: var(--neutral-black);
}

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

.titre_surligne {
  position: relative;
  overflow: hidden;
  width: fit-content;
}

.titre_surligne p {
  z-index: 1;
}

.titre_surligne .surligne_web {
  position: absolute;
  background-color: var(--green);
  mix-blend-mode: multiply;
  width: 100%;
  height: 100%;
  top: 60%;
}

.titre_surligne .surligne_dg {
  position: absolute;
  background-color: var(--orange);
  mix-blend-mode: multiply;
  width: 100%;
  height: 100%;
  top: 60%;
}

.titre_surligne .surligne_motion {
  position: absolute;
  background-color: color-mix(in srgb, var(--purple) 70%, transparent);
  mix-blend-mode: multiply;
  width: 100%;
  height: 100%;
  top: 60%;
}

.titrage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.bloc_img-01,
.bloc_img-02,
.bloc_img-03,
.bloc_img-04,
.bloc_img-05,
.bloc_img-06,
.bloc_img-07,
.bloc_img-08,
.bloc_img-09 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 80px;
  height: 500px;
  width: 100%;
}

.bloc_img-01 img,
.bloc_img-02 img,
.bloc_img-03 img,
.bloc_img-04 img,
.bloc_img-05 img,
.bloc_img-06 img,
.bloc_img-07 img,
.bloc_img-08 img,
.bloc_img-09 img {
  height: 100%;
  width: auto;
  min-width: 0;
  box-shadow: 0 0 30px rgba(0,0,0,0.2);
}

/* ---------------- */
/* --- Fontes --- */
/* ---------------- */

@font-face {
  font-family: "chaney-regular";
  src: url("../font/CHANEY-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
}


/* ---------------- */
/* --- Colonnes --- */
/* ---------------- */

[class*="col-"] {
  /* min-height: 80px; */
  padding: 0 12px;
  box-sizing: border-box;
  /* border: 1px solid red;
  background-color: rgba(255, 0, 0, 0.4); */
}

.col-1 {
  width: 8.33%;
}
.col-2 {
  width: 16.66%;
}
.col-3 {
  width: 25%;
}
.col-4 {
  width: 33.33%;
}
.col-5 {
  width: 41.66%;
}
.col-6 {
  width: 50%;
}
.col-7 {
  width: 58.33%;
}
.col-8 {
  width: 66.66%;
}
.col-9 {
  width: 75%;
}
.col-10 {
  width: 83.33%;
}
.col-11 {
  width: 91.66%;
}
.col-12 {
  width: 100%;
}

/* ------------------------ */
/* --- Titres et textes --- */
/* ------------------------ */

.aspect_h1 {
  font-family: "chaney-regular";
  font-size: 64px;
  line-height: 68px;
  font-style: normal;
  color: var(--neutral-black);
}

.aspect_h2 {
  font-family: "poppins";
  font-weight: 700;
  font-size: 40px;
  line-height: 44px;
  font-style: normal;
  color: var(--neutral-black);
}

.aspect_h3 {
  font-family: "poppins";
  font-weight: 500;
  font-size: 32px;
  line-height: 38px;
  font-style: normal;
  color: var(--neutral-black);
}

.aspect_h4 {
  font-family: "poppins";
  font-weight: 300;
  font-size: 24px;
  line-height: 36px;
  font-style: normal;
  color: var(--neutral-black);
}

.aspect_h5 {
  font-family: "poppins";
  font-weight: 300;
  font-size: 20px;
  line-height: 30px;
  font-style: normal;
  color: var(--neutral-black);
}

.aspect_h6 {
  font-family: "poppins";
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  font-style: normal;
  color: var(--neutral-black);
}

p {
  font-family: "poppins";
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  font-style: normal;
  color: var(--neutral-black);
}

/* --------------- */
/* --- Buttons --- */
/* --------------- */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  font-family: "poppins";
  font-weight: 300;
  font-style: normal;
  padding: 12px 24px;
  font-size: 20px;
  line-height: 30px;
}

.btn_primary-light,
.btn_primary-dark,
.btn_secondary-light,
.btn_secondary-dark {
  transition: 0.3s ease-in-out;
}

.btn_primary-dark {
  color: var(--neutral-white);
  background-color: var(--neutral-black);
  border: 1px solid var(--neutral-black);
}

.btn_primary-dark:hover {
  color: var(--neutral-black);
  background-color: transparent;
}

.btn_primary-light {
  color: var(--neutral-black);
  background-color: var(--neutral-white);
  border: 1px solid var(--neutral-white);
}

.btn_primary-light:hover {
  color: var(--neutral-white);
  background-color: transparent;
}

.btn_secondary-dark {
  color: var(--neutral-black);
  background-color: transparent;
  border: 1px solid var(--neutral-black);
}

.btn_secondary-dark:hover {
  color: var(--neutral-white);
  background-color: var(--neutral-black);
}

.btn_secondary-light {
  color: var(--neutral-white);
  background-color: transparent;
  border: 1px solid var(--neutral-white);
}

.btn_secondary-light:hover {
  color: var(--neutral-black);
  background-color: var(--neutral-white);
}

.btn_desktop {
  display: flex;
}

.btn_mobile {
  display: none;
}

.tag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  font-family: "poppins";
  font-weight: 400;
  font-style: normal;
  padding: 8px 16px;
  font-size: 16px;
  line-height: 24px;
  color: var(--neutral-black);
  background-color: var(--grey-200);
}

.tag_list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
}

/* ----------------- */
/* --- Slide nav --- */
/* ----------------- */

/* Animation de sortie */
@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

/* Animation d'entrée */
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

body.slide-out {
  animation: slideOut 0.6s ease-in-out;
}

body.slide-in {
  animation: slideIn 0.6s ease-in-out;
}

/* ---------------- */
/* ---- Reveal ---- */
/* ---------------- */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}


/* -------------- */
/* --- Loader --- */
/* -------------- */

#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--neutral-white);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  transition: 0.6s ease-in-out;
}

#loader.hidden {
  left: -100%;
  pointer-events: none;
}

/* -------------- */
/* --- Header --- */
/* -------------- */

header {
  width: 100vw;
  background-color: var(--neutral-white);
  position: fixed;
  z-index: 20;
}

.header_nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 16px 80px;
}

.nav_left {
  width: 33%;
}

.header_logo {
  width: 50%;
}

.nav_center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
  width: 33%;
}

.nav_center .label {
  height: fit-content;
}

.navigation_fruit_01,
.navigation_fruit_02,
.navigation_fruit_03 {
  transition: 0.6s ease-in-out;
}

.navigation_fruit_01 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  padding: 6px 0 6px 30px;
  gap: 12px;
  width: 68px;
}

.navigation_fruit_01:hover {
  width: 178px;
}

.navigation_fruit_02 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  padding: 6px 0;
  gap: 12px;
  width: 40px;
}

.navigation_fruit_02:hover {
  width: 172px;
}

.navigation_fruit_03 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  padding: 0 0 6px 0;
  gap: 4px;
  width: 64px;
}

.navigation_fruit_03:hover {
  width: 194px;
}

.nav_right {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 40%;
  width: 33%;
}

.header_about,
.header_contact {
  position: relative;
  overflow: hidden;
  width: fit-content;
}

.header_about .surligne_hover,
.header_contact .surligne_hover {
  position: absolute;
  left: 0%;
}

.header_about:hover .surligne_hover,
.header_contact:hover .surligne_hover {
  position: absolute;
  left: 100%;
}

.burger {
  display: none;
  cursor: pointer;
  font-size: 32px;
  padding: 2px 8px 4px 8px;
  color: var(--neutral-black);
  background-color: transparent;
  border: 0px transparent;
}

/* - burger mobile -*/

.nav_mobile {
  position: fixed;
  bottom: -1000px;
  left: 0;
  width: 100%;
  height: 540px;
  background-color: var(--neutral-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 24px 32px;
  z-index: 15;
  transition: 0.3s ease-in-out;
}

.sous-nav_mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.nav_mobile.open {
  bottom: 0;
}

.nav_close {
  align-self: flex-end;
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--primary-color);
  cursor: pointer;
}

.nav_fruit {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.navigation_mobile_fruit_01 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 26px;
}

.navigation_mobile_fruit_02 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
}

.navigation_mobile_fruit_03 {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.nav_bottom {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Overlay */
.overlay {
  position: fixed;
  inset: 0;
  background-color: #00000080;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s ease-in-out;
}

.overlay.open {
  opacity: 1;
  pointer-events: all;
}

/* - fin burger mobile -*/

/* -------------- */
/* --- Footer --- */
/* -------------- */

.footer_nav {
  display: flex;
  flex-direction: column;
}

.footer_nav .part_up {
  display: flex;
  flex-direction: row ;
  justify-content: space-between;
  padding: 120px 80px 0 80px;
}

.footer_nav .contact {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.footer_nav .contact a {
  font-family: "poppins";
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  font-style: normal;
  color: var(--neutral-black);
}

.footer_nav .contact a:hover {
  text-decoration: underline;
}

.footer_nav .linkedin {
  background-image: url(../img/footer/Linkedin_icon.svg);
  width: 52px;
  height: 52px;
  transition: 0.3s ease-in-out;
}

.footer_nav .linkedin:hover {
  background-image: url(../img/footer/Linkedin_icon_hover.svg);
}

.footer_nav .nav_interne {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
  top: -80px;
}

.footer_nav .footer_projects {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: end;
  gap: 20px;
}

.footer_nav .part_down {
  background-color: var(--silver);
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 40px 80px;
  gap: 80px;
}

.footer_nav .part_down a:hover {
  text-decoration: underline;
}

/* --------------------- */
/* -------Lightbox------ */
/* --------------------- */

.thumbnail {
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

.thumbnail:hover {
  opacity: 0.8;
}

/* Overlay */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background-color: #00000080;
  z-index: 30;
  justify-content: center;
  align-items: center;
}

.lightbox.open {
  display: flex;
}

/* Image agrandie */
.lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  box-shadow: 0 0 30px rgba(0,0,0,0.3);
}

/* Croix */
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 2.5rem;
  color: var(--neutral-black);
  cursor: pointer;
  line-height: 1;
}

.lightbox-close:hover {
  color: var(--primary-color);
}

/* --------------------------------------- */
/* -------------- Home Page -------------- */
/* --------------------------------------- */

/* -------------------- */
/* --- Section Hero --- */
/* -------------------- */

.section_hero {
display: flex;
flex-direction: column;
justify-content: center;
height: 90vh;
}

.hero_title {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}

.hero_logo_box {
max-width: 70%;
}

.hero_logo_desktop {
display: block;
}

.hero_logo_mobile {
display: none;
}

.split-text {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
}

.rotating-words {
  display: inline-flex;
  flex-direction: column; /* empile les mots verticalement */
  overflow: hidden;
  height: 44px; /* hauteur d'une seule ligne */
}

.rotating-words-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  animation: rotateWords 6s infinite;
}

.rotating-words .word {
  display: block;
  flex-shrink: 0;
}

@keyframes rotateWords {
  0%   { transform: translateY(0%); }
  25%  { transform: translateY(0%); }
  33%  { transform: translateY(-25%); }
  58%  { transform: translateY(-25%); }
  66%  { transform: translateY(-50%); }
  91%  { transform: translateY(-50%); }
  100% { transform: translateY(0%); }
}

/* ----------------------- */
/* ---- Section about ---- */
/* ----------------------- */

.section_about {
  background-image: url("../img/home/presentation.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.section_about .main {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 80px 80px;
  gap: 40px;
}

.section_about .part_left {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  padding-right: 200px;
  padding-bottom: 120px;
  gap: 40px;
}

.section_about .part_left h2 {
  text-align: right;
}

.section_about .part_right{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ------------------------- */
/* -- Section projets-fav -- */
/* ------------------------- */

.section_projets-fav {
  background-color: var(--neutral-white);
}

.section_projets-fav .main {
  display: flex;
  flex-direction: column;
  padding: 80px 80px;
  gap: 80px;
}

.section_projets-fav .card_list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 132px;
}

.section_projets-fav .card-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

.section_projets-fav .card {
  background-color: var(--silver);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  aspect-ratio: 4 / 5;
  padding: 20px 20px;
  gap: 40px;
  box-shadow: 8px 8px 0 var(--neutral-black);
  transition: 0.6s ease-in-out;
}

.section_projets-fav .card:hover {
  box-shadow: 20px 20px 0 var(--neutral-black);
  transform: scale(1.1) rotate(2deg);
}

.section_projets-fav .card_title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.section_projets-fav .card_title img {
  height: 80px;
}

.section_projets-fav .card_title h3 {
  text-align: right;
}

.section_projets-fav .card_content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.section_projets-fav .card_content img {
  aspect-ratio: 5 / 3;
}

/* ------------------------- */
/* ---- Section galerie ---- */
/* ------------------------- */

.section_galerie {
  background-color: var(--silver);
}

.section_galerie .main {
  display: flex;
  flex-direction: column;
  padding: 80px 80px;
  gap: 80px;
}

.section_galerie .bloc_img-01 .img_01 {
  width: 100%;
  object-fit: cover;
  object-position: center top;
}

.section_galerie .bloc_img-01 .img_02 {
  width: 440px;
  object-fit: cover;
  object-position: center;
}

.section_galerie .bloc_img-02 .img_01 {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.section_galerie .bloc_img-02 .img_02 {
  width: 100%;
  object-fit: cover;
  object-position: bottom left;
}

.section_galerie .bloc_img-03 .img_01 {
  width: 440px;
  object-fit: cover;
  object-position: center;
}

.section_galerie .bloc_img-03 .img_02 {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.section_galerie .bloc_img-04 img {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.section_galerie .bloc_img-05 .img_01 {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.section_galerie .bloc_img-05 .img_02 {
  width: 820px;
  object-fit: cover;
  object-position: center;
}

.section_galerie .bloc_img-06 .img_01 {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.section_galerie .bloc_img-06 .img_02 {
  width: 440px;
  object-fit: cover;
  object-position: center;
}

.section_galerie .bloc_img-07 img {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.section_galerie .bloc_img-08 .img_01 {
  width: 440px;
  object-fit: cover;
  object-position: center;
}

.section_galerie .bloc_img-08 .img_02 {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.section_galerie .bloc_img-09 .img_01 {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.section_galerie .bloc_img-09 .img_02 {
  width: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ----------------------------------- */
/* ---------- Pages Projets ---------- */
/* ----------------------------------- */

/* -------------------- */
/* --- Section Hero --- */
/* -------------------- */

.section_hero_projets {
display: flex;
flex-direction: column;
justify-content: center;
height: 60vh;
padding-top: 100px;
}

/* ----------------------- */
/* --- Section projets --- */
/* ----------------------- */

.bloc_titrage {
  background-color: var(--silver);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 80px 80px;
}

.bloc_projet-full_right .aspect_h3,
.bloc_projet-full_right p,
.bloc_projet-full_left .aspect_h3,
.bloc_projet-full_left p {
  color: var(--neutral-white);
}

.bloc_projet-full_right {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  height: 620px;
  padding: 80px 80px;
}

.bloc_projet-full_left {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  height: 620px;
  padding: 80px 80px;
}

.bloc_projet_right {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 620px;
}

.bloc_projet_right .content {
  padding: 80px 80px 80px 0;
}

.bloc_projet_left {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  height: 620px;
}

.bloc_projet_left .content {
  padding: 80px 0 80px 80px;
}

.section_projets .content {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.section_projets .bloc_titre {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.section_projets .titrage {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.section_projets .bloc_img {
  width: 50%;
  height: 100%;
}

.section_projets .bloc_img img {
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.section_projets .in-natura {
  background-image: url("../img/projets/web/in-natura/fullscreen-in-natura-desktop.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.section_projets .maison-lua {
  background-image: url("../img/projets/web/maison-lua/fullscreen-maison-lua-desktop.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.section_projets .a-maze-in {
  background-image: url("../img/projets/web/a-maze-in/fullscreen-a-maze-in-desktop.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.section_projets .ghost-in-the-shell {
  background-image: url("../img/projets/motion/ghost-in-the-shell/fullscreen-ghost-in-the-shell-desktop.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.section_projets .vinyle {
  background-image: url("../img/projets/dg/vinyle/fullscreen-vinyle-desktop.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* ---------------------------------- */
/* ---------- Pages Focus ---------- */
/* ---------------------------------- */

/* -------------------- */
/* --- Section Hero --- */
/* -------------------- */

.section_hero-focus {
  width: 100vw;
  height: 580px;
  padding-top: 80px;
}

.section_hero-focus .rewind-and-play img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: center;
}

.section_hero-focus .ghost-in-the-shell img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: center;
}

.section_hero-focus .showreel-2025 img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: center;
}

.section_hero-focus .in-natura {
  background-image: url("../img/projets/web/in-natura/focus-in-natura.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
}

.section_hero-focus .maison-lua {
  background-image: url("../img/projets/web/maison-lua/mockup-mobile-02.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
}

.section_hero-focus .tend {
  background-image: url("../img/projets/web/tend/sunrise-tend.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
}

.section_hero-focus .a-maze-in {
  background-image: url("../img/projets/web/a-maze-in/focus-a-maze-in.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
}

.section_hero-focus .emmaus {
  background-image: url("../img/projets/dg/emmaus/logo-emmaus-02.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
}

.section_hero-focus .vinyle {
  background-image: url("../img/projets/dg/vinyle/lua-mockup-02.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
}

.section_hero-focus .erevos {
  background-image: url("../img/projets/dg/erevos/dos-de-carte.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
}

/* ---------------------------- */
/* --- Section Presentation --- */
/* ---------------------------- */

.section_presentation {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 80px 80px;
}

.section_presentation .bloc_titrage {
  background-color: var(--neutral-white);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 40px;
}

.section_presentation .bloc_titrage a {
  color: var(--neutral-black);
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.section_presentation .bloc_titrage a:hover {
  text-decoration: underline;
}

.section_presentation .titrage {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.section_presentation .stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 40px;
}

.section_presentation .software_list {
  display: flex;
  flex-direction: row;
  gap: 40px;
}

.section_presentation .cta {
  display: none;
}

.bloc_iframe {
  background-color: var(--silver);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 80px 80px 80px;
}

.section_iframe .bloc_titrage {
  text-align: center;
}

iframe {
  background-color: var(--silver);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1440px;
  height: initial;
  aspect-ratio: 16/9;
}

/* ----------------------- */
/* --- Section Univers --- */
/* ----------------------- */

.section_univers {
  overflow: hidden;
}

.section_univers .container {
  display: flex;
  flex-direction: column;
  background-color: var(--silver);
  padding: 0 80px 80px 80px;
  gap: 40px;
}

.section_univers .bloc_titrage {
  text-align: center;
}

/* --- In Natura --- */

.in-natura .sous-bloc_img {
  background-color: var(--neutral-black);
  overflow: visible;
  box-shadow: 0 0 30px rgba(0,0,0,0.2);
}

.in-natura .sous-bloc_img img {
  position: relative;
  transform: scale(1.2);
  bottom: 49px;
  z-index: 10;
  box-shadow: 0 0 30px transparent;
}

.in-natura .bloc_img-01 .sous-bloc_img {
  aspect-ratio: 1 / 1;
}

.in-natura .bloc_img-01 .img_02 {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.in-natura .bloc_img-02 {
  flex-direction: row-reverse;
}

.in-natura .bloc_img-02 .img_02 {
  width: 700px;
  object-fit: cover;
  object-position: center;
}

.in-natura .bloc_img-02 .sous-bloc_img {
  width: 100%;
}

.in-natura .bloc_img-03 .img_01 {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.in-natura .bloc_img-03 .img_02 {
  width: 700px;
}

.in-natura .bloc_img-04 .sous-bloc_img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}

.in-natura .bloc_img-04 .img_02 {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

/* --- Maison Lua --- */

.maison-lua .bloc_img-01 .img_01 {
  width: 40%;
  object-fit: cover;
  object-position: center;
}

.maison-lua .bloc_img-01 .img_02 {
  width: 60%;
  object-fit: cover;
  object-position: center;
}

.maison-lua .bloc_img-02 .img_01 {
  width: 60%;
  object-fit: cover;
  object-position: center;
}

.maison-lua .bloc_img-02 .img_02 {
  width: 40%;
  object-fit: cover;
  object-position: center;
}

.maison-lua .bloc_img-03 .img_01 {
  width: 40%;
  object-fit: cover;
  object-position: center;
}

.maison-lua .bloc_img-03 .img_02 {
  width: 60%;
  object-fit: cover;
  object-position: center;
}

.maison-lua .bloc_img-04 .img_01 {
  width: 60%;
  object-fit: cover;
  object-position: center;
}

.maison-lua .bloc_img-04 .img_02 {
  width: 40%;
  object-fit: cover;
  object-position: center;
}

/* --- Tend --- */

.tend .bloc_img-01 .img_01 {
  width: 60%;
  object-fit: cover;
  object-position: center;
}

.tend .bloc_img-01 .img_02 {
  width: 40%;
  object-fit: cover;
  object-position: center;
}

.tend .bloc_img-02 .img_01 {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.tend .bloc_img-03 .img_01 {
  width: 60%;
  object-fit: cover;
  object-position: center;
}

.tend .bloc_img-03 .img_02 {
  width: 40%;
  object-fit: cover;
  object-position: center;
}

.tend .bloc_img-04 .img_01 {
  width: 40%;
  object-fit: cover;
  object-position: center;
}

.tend .bloc_img-04 .img_02 {
  width: 60%;
  object-fit: cover;
  object-position: center;
}

/* --- A Maze In --- */

.a-maze-in .bloc_img-01 .img_01 {
  width: 70%;
  object-fit: cover;
  object-position: center bottom;
}

.a-maze-in .bloc_img-01 .img_02 {
  width: 30%;
  object-fit: cover;
  object-position: center;
}

.a-maze-in .bloc_img-02 .img_01 {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.a-maze-in .bloc_img-03 .img_01 {
  width: 40%;
  object-fit: cover;
  object-position: center;
}

.a-maze-in .bloc_img-03 .img_02 {
  width: 60%;
  object-fit: cover;
  object-position: center;
}

.a-maze-in .bloc_img-04 .img_01 {
  width: 80%;
  object-fit: cover;
  object-position: center;
}

.a-maze-in .bloc_img-04 .img_02 {
  width: 20%;
  object-fit: cover;
  object-position: center;
}

/* --- Rewind & play --- */

.rewind-and-play .bloc_img-01 .img_01 {
  width: 60%;
  object-fit: cover;
  object-position: center;
}

.rewind-and-play .bloc_img-01 .img_02 {
  width: 40%;
  object-fit: cover;
  object-position: center;
}

.rewind-and-play .bloc_img-02 .img_01 {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.rewind-and-play .bloc_img-03 .img_01 {
  width: 40%;
  object-fit: cover;
  object-position: center;
}

.rewind-and-play .bloc_img-03 .img_02 {
  width: 60%;
  object-fit: cover;
  object-position: center;
}

.rewind-and-play .bloc_img-04 .img_01 {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.rewind-and-play .bloc_img-05 .img_01 {
  width: 40%;
  object-fit: cover;
  object-position: center;
}

.rewind-and-play .bloc_img-05 .img_02 {
  width: 60%;
  object-fit: cover;
  object-position: center;
}

/* --- Ghost in the Shell --- */

.ghost-in-the-shell .bloc_img-01 .img_01 {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.ghost-in-the-shell .bloc_img-02 .img_01 {
  width: 70%;
  object-fit: cover;
  object-position: center;
}

.ghost-in-the-shell .bloc_img-02 .img_02 {
  width: 30%;
  object-fit: cover;
  object-position: center;
}

.ghost-in-the-shell .bloc_img-03 .img_01 {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.ghost-in-the-shell .bloc_affiche {
  width: 100%;
  height: auto;
}

.ghost-in-the-shell .bloc_affiche .img_01 {
  width: 100%;
  height: auto;
}

/* --- Emmaus --- */

.emmaus .bloc_img-01 .img_01 {
  width: 40%;
  object-fit: cover;
  object-position: center;
}

.emmaus .bloc_img-01 .img_02 {
  width: 60%;
  object-fit: cover;
  object-position: center;
}

.emmaus .bloc_img-02 .img_01 {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.emmaus .bloc_img-03 .img_01 {
  width: 70%;
  object-fit: cover;
  object-position: center;
}

.emmaus .bloc_img-03 .img_02 {
  width: 30%;
  object-fit: cover;
  object-position: center;
}

.emmaus .bloc_img-04 .img_01 {
  width: 40%;
  object-fit: cover;
  object-position: center;
}

.emmaus .bloc_img-04 .img_02 {
  width: 60%;
  object-fit: cover;
  object-position: center;
}

.emmaus .bloc_img-05 .img_01 {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.emmaus .bloc_img-06 .img_01 {
  width: 60%;
  object-fit: cover;
  object-position: center;
}

.emmaus .bloc_img-06 .img_02 {
  width: 40%;
  object-fit: cover;
  object-position: center;
}

/* --- Vinyle --- */

.vinyle .bloc_img-01 .img_01 {
  width: 60%;
  object-fit: cover;
  object-position: center;
}

.vinyle .bloc_img-01 .img_02 {
  width: 40%;
  object-fit: cover;
  object-position: center;
}

.vinyle .bloc_img-02 .img_01 {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.vinyle .bloc_img-03 .img_01 {
  width: 40%;
  object-fit: cover;
  object-position: center;
}

.vinyle .bloc_img-03 .img_02 {
  width: 60%;
  object-fit: cover;
  object-position: center;
}

.vinyle .bloc_img-04 .img_01 {
  width: 60%;
  object-fit: cover;
  object-position: center;
}

.vinyle .bloc_img-04 .img_02 {
  width: 40%;
  object-fit: cover;
  object-position: center;
}

.vinyle .bloc_affiche {
  width: 100%;
  height: auto;
}

.vinyle .bloc_affiche .img_01 {
  width: 100%;
  height: auto;
}

/* --- Erevos --- */

.erevos .bloc_img-01 .img_01 {
  width: 60%;
  object-fit: cover;
  object-position: center;
}

.erevos .bloc_img-01 .img_02 {
  width: 40%;
  object-fit: cover;
  object-position: center;
}

.erevos .bloc_img-02,
.erevos .bloc_img-04 {
  justify-content: space-between;
}

.erevos .bloc_img-02 img,
.erevos .bloc_img-04 img {
  border-radius: 16px;
}

.erevos .bloc_img-03 .img_01 {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.erevos .bloc_img-05 .img_01 {
  width: 40%;
  object-fit: cover;
  object-position: center;
}

.erevos .bloc_img-05 .img_02 {
  width: 60%;
  object-fit: cover;
  object-position: center;
}

/* --------------------------------- */
/* ---------- Pages About ---------- */
/* --------------------------------- */

/* -------------------- */
/* --- Section Hero --- */
/* -------------------- */

.section_hero_about {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 60vh;
  padding-top: 100px;
}

/* ------------------------ */
/* --- Section À propos --- */
/* ------------------------ */

.section_a-propos {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: var(--silver);
  height: 620px;
}

.section_a-propos .part_left {
  display: flex;
  flex-direction: column;
  max-width: 1000px;
  padding: 80px 0 80px 80px;
  gap: 60px;
}

.section_a-propos .part_left span,
.section_capybara .part_left span,
.section_parcours span {
  font-weight: 700;
}

.section_a-propos .part_right {
  width: 30%;
  height: 100%;
}

.section_a-propos .part_right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ------------------------ */
/* --- Section Software --- */
/* ------------------------ */

.section_software {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 80px;
  gap: 80px;
}

.section_software .software_list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  gap: 80px;
}

/* ------------------------ */
/* --- Section Parcours --- */
/* ------------------------ */

.section_parcours {
  background-color: var(--silver);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 80px;
  gap: 80px;
}

.section_parcours .bloc_cv {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 240px;
}

.section_parcours .bloc_cv .part_left {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--neutral-black);
  padding-left: 40px;
  gap: 30px;
}

.section_parcours .bloc_cv .part_right {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--neutral-black);
  padding-left: 40px;
  gap: 30px;
}

.section_parcours .sous-bloc_cv {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.section_parcours .sous-bloc_cv .step {
  display: flex;
  flex-direction: row;
  gap: 40px;
}

/* ------------------------ */
/* --- Section Capybara --- */
/* ------------------------ */

.section_capybara {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--neutral-white);
  gap: 80px;
  padding-top: 80px;
}

.section_capybara .content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: var(--silver);
  height: 620px;
}

.section_capybara .content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: var(--silver);
}

.section_capybara .part_left {
  display: flex;
  flex-direction: column;
  padding: 80px 0 80px 80px;
  gap: 60px;
}

.section_capybara .part_right {
  width: 30%;
  height: 100%;
}

.section_capybara .part_right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

/* -------------------------------------- */
/* ---------- Mentions légales ---------- */
/* -------------------------------------- */

.section_mentions-legales {
  background-color: var(--silver);
}

.section_mentions-legales .container {
  display: flex;
  flex-direction: column;
}

.section_mentions-legales .titrage {
  background-color: var(--neutral-white);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 280px 80px 80px 80px;
  gap: 20px;
}

.section_mentions-legales .titrage p {
  width: 40%;
}

.section_mentions-legales .bloc_paragraphe {
  display: flex;
  flex-direction: column;
  padding: 80px 80px;
  gap: 80px;
}

.legal_paragraphe {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.legal_paragraphe p {
  display: flex;
  flex-direction: column;
  width: 30%;
  padding: 8px 0;
}

.legal_paragraphe a {
  color: var(--neutral-black);
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.legal_paragraphe a:hover {
  text-decoration: underline;
}

/* -------------- */
/* Version mobile */
/* -------------- */

@media (max-width: 768px) {

  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-12 {
    width: 100%;
    padding: 0px;
  }

  .btn {
  padding: 8px 16px;
  font-size: 16px;
  line-height: 24px;
  }

  .btn_desktop {
  display: none;
  }

  .btn_mobile {
  display: flex;
  }

  .cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  }

  .bloc_img-01,
  .bloc_img-02,
  .bloc_img-03,
  .bloc_img-04,
  .bloc_img-05,
  .bloc_img-06,
  .bloc_img-07,
  .bloc_img-08,
  .bloc_img-09 {
    flex-direction: column;
    align-items: center;
    gap: 80px;
    height: auto;
    width: 100%;
  }

  .img_01,
  .img_02,
  .img_03 {
    height: auto !important;
    width: 100% !important;
  }

  .thumbnail {
  pointer-events: none;
  }

  /* Titres et textes */

  .aspect_h1 {
  font-size: 40px;
  line-height: 42px;
  }

  .aspect_h2 {
  font-size: 24px;
  line-height: 30px;
  }

  .aspect_h3 {
  font-size: 26px;
  line-height: 32px;
  }

  .aspect_h4 {
  font-size: 18px;
  line-height: 24px;
  }

  .aspect_h5 {
  font-size: 16px;
  line-height: 22px;
  }

  .aspect_h6 {
  font-size: 16px;
  line-height: 22px;
  }

  p {
  font-size: 14px;
  line-height: 20px;
  }

  /* Header */

  .burger {
    display: block;
  }

  .sous-nav_mobile p {
  font-size: 20px;
  line-height: 28px;
  }
  
  .header_nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  }

  .nav_left {
  width: 100%;
  }

  .nav_center {
  display: none;
  }

  .nav_right {
  display: none;
  }


  /* Footer */

  .footer_nav .part_up {
  flex-direction: column;
  padding: 80px 20px;
  gap: 80px;
  }

  .footer_nav .contact {
  align-items: center;
  }

  .footer_nav .contact h2 {
  font-size: 40px;
  line-height: 44px;
  }

  .footer_nav .contact p {
  font-size: 16px;
  line-height: 24px;
  }

  .footer_nav .e-mail {
  text-align: center;
  }

  .footer_nav .nav_interne {
  align-items: center;
  top: 0;
  }

  .footer_nav .footer_logo {
  width: 100%;
  }

  .footer_nav .footer_projects {
  justify-content: center;
  }

  .footer_nav .part_down {
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  gap: 20px;
  }

  .footer_nav .part_down span {
  display: none;
  }

  /* --------------------- */
  /* ----- Home page ----- */
  /* --------------------- */

  /* Section Hero */

  .hero_logo_box {
  max-width: 90%;
  }

  .hero_logo_desktop {
  display: none;
  }

  .hero_logo_mobile {
  display: block;
  }

  .split-text {
  height: 24px;
  }

  .rotating-words {
  height: 30px;
  }

  /* Section about */
  
  .section_about {
  background-image: url("../img/home/presentation_mobile.webp");
  background-position: center left;
  }

  .section_about .main {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 60px 40px;
  gap: 40px;
  }

  .section_about .part_left {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  padding-right: 0;
  padding-bottom: 0;
  gap: 40px;
  }

  /* Section projets-fav */
  
  .section_projets-fav .main {
  padding: 60px 20px;
  }

  .section_projets-fav .card_list {
  flex-direction: column;
  gap: 80px;
  }

  .section_projets-fav .card-cta {
  gap: 40px;
  }

  /* Section galerie */
  
  .section_galerie .main {
  padding: 60px 20px;
  }

  /* ------------------------ */
  /* ----- Pages projet ----- */
  /* ------------------------ */

  .section_hero_projets {
  height: 40vh;
  padding-top: 100px;
  }

  .bloc_titrage {
  padding: 60px 20px;
  }

  .bloc_projet-full_right {
  flex-direction: column;
  height: 100vh;
  padding: 60px 20px;
  }

  .bloc_projet-full_left {
  flex-direction: column;
  justify-content: flex-end;
  height: 100vh;
  padding: 60px 20px;
  }

  .bloc_projet_right {
  flex-direction: column;
  justify-content: auto;
  align-items: center;
  height: auto;
  }

  .bloc_projet_right .content {
  padding: 60px 20px;
  }

  .bloc_projet_left {
  flex-direction: column;
  justify-content: auto;
  align-items: center;
  height: auto;
  }

  .section_projets .bloc_img {
  height: auto;
  width: 100%;
  padding-top: 4px;
  }

  .section_projets .bloc_img img {
  height: auto;
  width: 100%;
  }

  .bloc_projet_left .content {
  padding: 60px 20px;
  }

  .section_projets .in-natura {
  background-image: url("../img/projets/web/in-natura/fullscreen-in-natura-mobile.webp");
  background-position: center top;
  }

  .section_projets .maison-lua {
  background-image: url("../img/projets/web/maison-lua/fullscreen-maison-lua-mobile.webp");
  background-position: center top;
  }

  .section_projets .a-maze-in {
  background-image: url("../img/projets/web/a-maze-in/fullscreen-a-maze-in-mobile.webp");
  background-position: center top;
  }

  .section_projets .ghost-in-the-shell {
  background-image: url("../img/projets/motion/ghost-in-the-shell/fullscreen-ghost-in-the-shell-mobile.webp");
  background-position: center top;
  }

  .section_projets .vinyle {
  background-image: url("../img/projets/dg/vinyle/fullscreen-vinyle-mobile.webp");
  background-position: center top;
  }

  /* ------------------------ */
  /* ----- Pages focus ----- */
  /* ------------------------ */

  .section_presentation {
  flex-direction: column;
  justify-content: auto;
  padding: 60px 20px;
  gap: 60px;
  }

  .section_presentation .stats {
  align-items: flex-start;
  gap: 20px;
  }

  .section_presentation .cta {
  display: flex;
  }

  .section_univers .container {
  padding: 0 20px 60px 20px;
  gap: 80px;
  }

  .section_univers .bloc_titrage {
  padding-bottom: 0px;
  }
  
  .bloc_iframe {
  padding: 0 20px 60px 20px;
  }

  .in-natura .bloc_img-02 {
  flex-direction: column-reverse;
  }

  .in-natura .sous-bloc_img img {
  bottom: 0px;
  }

  .in-natura .bloc_img-01 .img_01 {
  bottom: -22px;
  }

  .in-natura .bloc_img-02 .img_01 {
  bottom: 16px;
  }

  .in-natura .bloc_img-04 .img_01 {
  bottom: 40px;
  }

  /* ---------------------- */
  /* ----- Page About ----- */
  /* ---------------------- */

  .section_hero_about {
  height: 40vh;
  padding-top: 100px;
  }

  .section_a-propos {
  flex-direction: column-reverse;
  justify-content: left;
  height: auto;
  }

  .section_a-propos .part_left {
  padding: 40px 20px 60px 20px;
  gap: 60px;
  }

  .section_a-propos .part_right {
  width: 100%;
  height: auto;
  }

  .section_software {
  padding: 60px 20px;
  gap: 60px;
  }

  .section_parcours {
  padding: 60px 20px;
  gap: 80px;
  }

  .section_parcours .bloc_cv {
  flex-direction: column;
  gap: 100px;
  }

  .section_capybara .content {
  flex-direction: column-reverse;
  justify-content: left;
  height: auto;
  }

  .section_capybara .part_left {
  padding: 40px 20px 60px 20px;
  gap: 60px;
  }

  .section_capybara .part_right {
  width: 100%;
  height: auto;
  }

  /* -------------------------------------- */
  /* ---------- Mentions légales ---------- */
  /* -------------------------------------- */

  .section_mentions-legales .titrage {
  padding: 200px 20px 60px 20px;
  gap: 20px;
  }

  .section_mentions-legales .titrage p {
  width: 100%;
  }

  .section_mentions-legales .bloc_paragraphe {
  padding: 60px 20px;
  gap: 60px;
  }

  .legal_paragraphe p {
  width: 100%;
  }


}