:root {
    --color-principale: #F9E5C3;
    --color-secondaire: #002626;
    --color-accent: #CF5C36;
    --color-accent2: #FFFFFF50;
    --color-accent3: #001717;
    --transition: all 0.3s ease;
}

::selection {
    color: var(--color-principale);
    background-color: var(--color-secondaire);
}


textarea {
  resize: none;            /* Empêche le redimensionnement */
  overflow: auto;          /* Active le scroll */
  scrollbar-width: none;   /* Masque la scrollbar sur Firefox */
}

/* Masque la scrollbar sur WebKit (Chrome, Edge, Safari) */
textarea::-webkit-scrollbar {
  display: none;
}

body {
    background-color: var(--color-principale);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    justify-items: center;
    font-family: 'Bricolage Grotesque';
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    cursor: url(/icon/cursor_default.svg), default;
}

#loader {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: var(--color-accent3);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
transition: var(--transition);
}
#loader h1 {
color: var(--color-principale) !important;
}

.loader-content {
font-size: 24px;
font-weight: bold;
}

#loader.fade-out {
opacity: 0;
visibility: hidden;
}

.container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    justify-items: center;
}

.container > div {
    width: 100%;
    padding: 150px 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 100px;
    align-content: center;
}


a, #button, button {
    background-color: var(--color-accent);
    color: var(--color-principale);
    padding: 20px 30px;
    border-radius: 40px;
    font-family: 'Bricolage Grotesque';
    text-decoration: none;
    font-size: 24px;
    font-weight: 300;
    display: flex;
    width: fit-content;
    gap: 10px;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    cursor: url(/icon/cursor_pointer.svg), pointer;
    border: none;
}
a:hover, #button:hover, button:hover{
    background-color: var(--color-secondaire);
    gap: 20px;
}

a.link {
    background-color: unset;
    color: var(--color-principale);
    font-family: 'Bricolage Grotesque';
    text-decoration: none;
    padding: 0;
    font-size: 24px;
    font-weight: 300;
    display: flex;
    width: fit-content;
    gap: 10px;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    cursor: url(/icon/cursor_pointer.svg), pointer;
}
a.link:hover {
    gap: 20px;
}

a.link2 {
    background-color: unset;
    color: var(--color-secondaire);
    font-family: 'Bricolage Grotesque';
    text-decoration: none;
    padding: 0;
    font-size: 24px;
    font-weight: 300;
    display: flex;
    width: fit-content;
    gap: 10px;
    border-radius: 0;
    border-bottom: 4px solid var(--color-accent);
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    cursor: url(/icon/cursor_pointer.svg), pointer;
}
a.link2:hover {
    gap: 20px;
    letter-spacing: calc(+2.5px);
}

h1, h2, h3, h4, h5, h6, p, span {
    padding: 0;
    margin: 0;
}

p {
    font-family: 'Azeret Mono';
    font-size: 20px;
    font-weight: 400;
    color: var(--color-accent);
    text-align: left;
    padding: 0;
    margin: 0;
}

h1 {
    font-family: 'Bricolage Grotesque';
    font-size: 128px;
    font-weight: 800;
    line-height: 100px;
    width: fit-content;
    color: var(--color-secondaire);
    text-align: left;
    margin: 0;
}

h2 {
    font-family: 'Bricolage Grotesque';
    font-size: 64px;
    font-weight: 600;
    color: var(--color-secondaire);
    text-align: center;
    padding: 0;
    margin: 0;
}

h3 {
    font-family: 'Bricolage Grotesque';
    font-size: 40px;
    font-weight: 700;
    color: var(--color-secondaire);
    text-align: left;
    padding: 0;
    margin: 0;
    letter-spacing: 1px;
}


h4 {
    font-family: 'Azeret Mono';
    font-size: 24px;
    font-weight: 400;
    color: var(--color-accent);
    text-align: center;
    padding: 0;
    margin: 0;
}

h5 {
    font-family: 'Bricolage Grotesque';
    font-size: 32px;
    font-weight: 600;
    color: var(--color-secondaire);
    text-align: left;
    padding: 0;
    margin: 0;
    letter-spacing: 1px;
}


/* ----------------- Titre de section ----------------- */

.title_container {
    display: flex;
    flex-direction: column;
    gap: 25px;
    max-width: 800px;
}

.title_container h2 {
    font-family: 'Bricolage Grotesque';
    font-size: 64px;
    font-weight: 600;
    color: var(--color-secondaire);
    text-align: center;
    padding: 0;
    margin: 0;
}
.title_container h4 {
    font-family: 'Azeret Mono';
    font-size: 24px;
    font-weight: 400;
    color: var(--color-accent);
    text-align: center;
    padding: 0;
    margin: 0;
}
.title_container i, .container > div > i {
    color: var(--color-accent);
    font-size: 24px;
    text-align: center;
    padding: 0;
    margin: 0;
}

/* ----------------- HEADER - SECTION 1 ----------------- */

.header {
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: unset;
    flex-direction: column;
    padding: 0;
    margin: 0;
    width: 100%;
    padding: 150px 100px;
    gap: 100px;
}

.header i {
    color: var(--color-accent);
    font-size: 24px;
    padding: 0;
    margin: 0;
    position: sticky;
    bottom: 0;
}

.header_text {
    display: flex;
    flex-direction: column;
    padding-top: 100px;
    margin: 0;
    max-width: 775px;
    width: 100%;
    gap: 30px;
}

.header_text h3 {
    font-family: 'Azeret Mono';
    font-size: 24px;
    font-weight: 400;
    color: var(--color-accent);
    text-align: left;
    padding: 0;
    margin: 0;
}

.header_text h1 {
    font-family: 'Bricolage Grotesque';
    font-size: 128px;
    font-weight: 800;
    width: fit-content;
    color: var(--color-secondaire);
    text-align: left;
    padding: 0;
    margin: 0;
}

.services_wrapper {
    overflow: hidden;
    width: 100%;
  }
  
  .services_loop {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    width: max-content;
    animation: scroll-left 20s linear infinite;
  }
  
  @keyframes scroll-left {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }
  
  .services_loop h4 {
    font-family: 'Azeret Mono', monospace;
    font-size: 24px;
    font-weight: 400;
    color: var(--color-accent);
    white-space: nowrap;
    margin: 0;
    padding: 0;
  }
  
  .services_loop img {
    height: 8px;
  }


  /* ----------------- BIOGRAPHIE - SECTION 2 ----------------- */

.container .biographie {
    gap: 50px;
}

  .bio_bloc {
    background-color: var(--color-accent2);
    padding: 50px;
    margin: 0;
    border-radius: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 50px;
    width: 100%;
  }

  .bio_bloc img {
    mix-blend-mode: multiply;
  }

  .bio_bloc #quote {
    transform: translateX(-550px) translateY(-280px);
    position: absolute;
  }
  .bio_bloc #quote2 {
    transform: translateX(550px) translateY(280px) rotate(180deg);
    position: absolute;
  }

  .bio_bloc .paragraph {
    display: flex;
    flex-direction: column;
    justify-content: left;
    gap: 35px;
  }

  .bio_bloc h5 {
    color: var(--color-secondaire);
    font-family: 'Bricolage Grotesque';
    font-size: 34px;
    font-weight: 800;
  }

.name_link {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

  p span {
    color: var(--color-accent);
    font-size: 14px;
    font-weight: 400;
    opacity: 0.7;
  }

    p span.barre {
    color: var(--color-accent);
    font-size: 20px;
    font-weight: 400;
    opacity: 1;
    text-decoration: line-through;
    opacity: 0.5;
  }

  .info_bloc {
    background-color: var(--color-accent2);
    padding: 50px;
    margin: 0;
    border-radius: 40px;
    display: flex;
    flex-direction: column;
    justify-content: left;
    gap: 25px;
    width: 100%;
  }

  .info_bloc h6 {
    color: var(--color-secondaire);
    margin: 0;
    font-size: 32px;
    font-weight: 500;
  }

/* ----------------- 3 UNIVERS - SECTION 3 ----------------- */

.trois_bloc {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 50px;
}

.trois_bloc > div {
    background-color: var(--color-accent2);
    padding: 50px;
    margin: 0;
    border-radius: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 380px;
    gap: 10px;
    transition: var(--transition);
}

.trois_bloc > .goupilab_bloc:hover {
    transform: rotate(-2.5deg) translateY(-10px);
}

.trois_bloc > .antoinepukiel_bloc:hover {
    transform: translateY(-10px);
}
.trois_bloc > .froggydelire_bloc:hover {
    transform: rotate(2.5deg) translateY(-10px);
}

.trois_bloc .profil {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.trois_bloc .profil img {
    border-radius: 100px;
}

.trois_bloc div ul {
    color: var(--color-accent);
    list-style: none;
    gap: 10px;
}

.trois_bloc div ul li {
    font-family: 'Azeret Mono';
    font-size: 20px;
    font-weight: 400;
    list-style-type: disc;
    padding: 5px 0px;
}


/* ----------------- PROJETS - SECTION 4 ----------------- */

.projets .card {
    background-color: var(--color-accent2);
    padding: 50px;
    margin: 0;
    border-radius: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    gap: 50px;
    width: 100%;
    height: auto;
}

.projets .group_card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: left;
    gap: 20px;
    width: 100%;
    height: auto;
}

.group_card h3 {
    transition: var(--transition);
}

.group_card .card:hover h3 {
    letter-spacing: calc(+2.5px);
}

.group_card #bouton {
    background-color: unset;
    color: var(--color-principale);
    font-family: 'Bricolage Grotesque';
    text-decoration: none;
    padding: 0;
    font-size: 24px;
    font-weight: 300;
    display: flex;
    width: fit-content;
    gap: 10px;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.group_card .card:hover #button {
    background-color: var(--color-secondaire);
    gap: 20px;
}

.group_card .card:hover > img {
    transform: translateY(-5px);
}

.projets .card img {
    border-radius: 40px;
    transition: var(--transition);
}

.projets .card a {
    position: relative;
}

.projets .card .text {
    display: flex;
    flex-direction: column;
    justify-content: left;
    gap: 5px;
    width: 70%;
}

.author {
    background-color: var(--color-secondaire);
    color: var(--color-principale);
    width: fit-content;
    border-radius: 40px;
    padding: 10px 20px;
    font-family: 'Bricolage Grotesque';
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 1.5px;
    margin-top: 15px;
    display: flex;
    gap: 7px;
    align-items: center;
}

.projets .card .author img {
    width: 16px;
    height: 16px;
    border-radius: 0;
    padding: 0;
    margin: 0;
    object-fit: contain;
}

.multiple_author{
    display: flex;
    flex-direction: row;
    justify-content: left;
    gap: 10px;
}

/* ----------------- CONTACT - SECTION 5 ----------------- */

.contact_form {
    display: flex;
    flex-direction: column;
    justify-content: left;
    gap: 10px;
    width: 100%;
    max-width: 800px;
}

.contact_form .champs {
    display: flex;
    flex-direction: column;
    justify-content: left;
    gap: 10px;
}

.name_champs {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}
.name_champs > div {
    width: 100%;
}

.contact_form > form {
    display: flex;
    flex-direction: column;
    justify-content: left;
    gap: 30px;
    width: 100%;
}

.contact_form > form label {
    height: auto;
    border: none;
    color: var(--color-secondaire);
    font-family: 'Bricolage Grotesque';
    font-size: 24px;
    font-weight: 500;
}

.contact_form > form input, .contact_form > form textarea {
    height: auto;
    border-radius: 20px;
    border: none;
    background-color: var(--color-accent2);
    padding: 20px;
    color: var(--color-secondaire);
    font-family: 'Azeret Mono';
    font-size: 20px;
    font-weight: 400;
    transition: var(--transition);
    border-left: 0px solid var(--color-accent);
    resize: none; /* Empêche le redimensionnement */
}
.contact_form > form input::placeholder, .contact_form > form textarea::placeholder {
    opacity: 0.3;
}

.contact_form > form input:focus, .contact_form > form textarea:focus {
    color: var(--color-secondaire);
    outline: none;
}
.contact_form > form input:focus::placeholder {
    opacity: 0;
}
.contact_form > form textarea:focus::placeholder {
    opacity: 0;
}


.rgpd {
    border-radius: 20px;
    padding: 20px;
    border: none;
    background-color: var(--color-accent2);
    display: flex;
    align-items: center;
    cursor: url(/icon/cursor_pointer.svg), pointer;
}

.contact_form .rgpd  label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: url(/icon/cursor_pointer.svg), pointer;
    font-family: 'Azeret Mono';
    font-size: 18px;
    font-weight: 400;
}

.contact_form > form input[type="checkbox"]:focus {
    border: 3px solid var(--color-secondaire);
}

.rgpd input[type="checkbox"] {
    /* Supprime l'apparence par défaut */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    width: 10px;
    height: 10px;
    border-radius: 40px;
    border: 3px solid var(--color-secondaire);
    cursor: url(/icon/cursor_pointer.svg), pointer;
    position: relative;
    transition: all 0.2s ease;
    transform: scale(0.5);
}
  
  
.rgpd input[type="checkbox"]:checked {
    background-color: var(--color-accent);
    border: 3px solid var(--color-accent);
}
  

/* ----------------- FOOTER ----------------- */

.footer {
    background-color: var(--color-secondaire);
    padding: 50px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    justify-items: center;
    cursor: url(/icon/cursor_default_alt.svg), default;
}

.footer_name h2 {
    color: var(--color-principale);
}
.footer_name h3 {
    color: var(--color-accent);
}


.multiple_link {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 275px;
}

body > div.footer > div > div.contact > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}
body > div.footer > div > div.liens > div {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
}

.footer_contact {
    padding: 50px;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    max-width: 1200px;
    width: 100%;
    height: auto;
}
.footer_contact h5 {
    color: var(--color-principale);
    padding-bottom: 20px;
}

.footer_contact .contact h5 {
    text-align: left;
}
.footer_contact .liens h5 {
    text-align: right;
}

/* ----------------- MINI FOOTER ----------------- */

.mini_footer {
    background-color: var(--color-accent3);
    padding: 20px 0px;
    margin: 0;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: url(/icon/cursor_default_alt.svg), default;
}

.mini_footer .multiple_link {
    margin: 0;
    width: 100%;
    max-width: 1200px;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

/* ----------------- CONDITIONS POLITIQUES ----------------- */

.conditions_politique {
    padding: 0px 0px 150px 0px;
}

.conditions_politique .cond_poli-bloc {
    gap: 50px;
}

.cond_poli-bloc p {
    color: var(--color-secondaire);
    background-color: var(--color-accent2);
    border-radius: 40px;
    padding: 50px;
    line-height: 32px;
}
.cond_poli-bloc p span {
    font-family: 'Azeret Mono';
    font-size: 20px;
    font-weight: 400;
    color: var(--color-accent);
    text-align: left;
    padding: 0;
    margin: 0;
    opacity: 1;
}


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

@media only screen and (max-width: 768px) {

h1 {
font-size: 64px !important;
line-height: 55px !important;
}
h2 {
font-size: 36px !important;
}
h3 {
font-size: 24px !important;
}
h4 {
font-size: 20px !important;
}
h5 {
font-size: 22px !important;
}
p {
font-size: 16px !important;
}
a, #button, button {
    background-color: var(--color-accent);
    color: var(--color-principale);
    padding: 12px 22px;
    border-radius: 40px;
    font-family: 'Bricolage Grotesque';
    text-decoration: none;
    font-size: 20px;
    font-weight: 300;
    gap: 10px;
}
a.link {
    font-size: 20px;
    font-weight: 300;
}

html {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: left;
}

body > *:not(.footer):not(.mini_footer) {
    width: 80%;
}

.title_container {
    gap: 15px;
}

.container > div {
    padding: 5rem 2rem;
}
.header_text {
    padding-top: 0px;
    width: 90%;
}

.bio_bloc {
    flex-direction: column;
    width: 100%;
    padding: 1.5rem 1.5rem 2rem 1.5rem;
}
body > div.container > div.biographie > div.bio_bloc > img:nth-child(3) {
    width: 50%;
}
.bio_bloc #quote, .bio_bloc #quote2 {
    display: none;
}
.name_link {
    flex-direction: column-reverse;
    gap: 20px;
}

.trois_bloc {
    flex-direction: column;
}
.trois_bloc > div {
    width: 100%;
    padding: 1.5rem;
}

.projets .card {
    flex-direction: column;
    gap: 50px;
    padding: 1.5rem;
}
.projets .card > img {
    width: 100%;
    object-fit: cover;
}
.projets .card .text {
    width: 100%;
    gap: 15px;
}
.projets .card #button {
    width: 80%;
}
.author {
    margin: 0;
}
.multiple_author {
    display: flex;
    flex-direction: row;
    justify-content: left;
    flex-wrap: wrap;
    gap: 5px;
}

.contact_form > form label {
    font-size: 20px;
}
.contact_form .rgpd label {
    font-size: 14px;
}
.contact_form > form input, .contact_form > form textarea {
    font-size: 18px;
}

.projets .group_project_card .main-content {
    flex-direction: column;
}
.projets .group_project_card .main-content .img {
    width: 100%;
}
.group_project_card .main-content .img img{
    width: 100%;
    height: 100%;
}

.footer {
    padding: 0;
}
.footer_contact {
    flex-direction: column;
    padding: 4rem 1.5rem 4rem 1.5rem;
    width: auto;
}
.name_champs {
    display: flex;
    flex-direction: column;
}
.mini_footer .multiple_link {
    flex-direction: column;
}




}