/*
Sommaire :
  - Fonts
  - Variables
  - Éléments communs
  - Layouts section
  - Boutons
  - Header
  - Contenu
*/

/* ------------------------------------------------------------------------ Fonts */

/* Supreme */
@font-face {
  font-family: "Supreme-Variable";
  src: url("fonts/Supreme-Variable.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Supreme-VariableItalic";
  src: url("fonts/Supreme-VariableItalic.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
  font-style: italic;
}

/* Steps Mono */
@font-face {
  font-family: "Steps-Mono";
  src: url('fonts/Steps-Mono.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}


/* ------------------------------------------------------------------------ Variables */

:root{
    /* typographie */
    --fontfamily: "Supreme-Variable", sans-serif;
    --fontTitle: "Steps-Mono", sans-serif;
    --basesize: 1.15rem;

    /* couleur */
    --white: #fff;
    --black: #2F0061;
    --background-hover: #2F006125;
    --background-black: #2F006125;
    --background-active: #2F006130;
    --color-hover:#fc4141;
    --color-active:#e12e2e;

    /* espacements homogènes */
    --gap-xs: 0.2em;
    --gap-s: 0.5em;
    --gap-sm: 1em;
    --gap-m: 2em;
    --gap-l: 4em;
    --gap-xl: 8em;


}


/* ------------------------------------------------------------------------ Common */

/* box model */
*, *::after, *::before { 
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

/* smooth scroll */
html { 
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* page defaults */
body {
    /* display: block; */
    font-family: var(--fontfamily);
    font-size: var(--basesize);
    color: var(--black);
    background-color: var(--white);
}

header {
    width: 100%;
}

h1 {
    font-family: var(--fontTitle);
    font-size: 4.25rem;
    line-height: 5.7rem;
    font-weight: 400;
}

a { color: currentColor; text-decoration: none; }

li {
    list-style-type: none;
}

label {
    font-style: italic;
    font-size: 0.9rem;
    display: flex;
    flex-direction: row;
    align-items: center;
}

label::before {
    content: '';
    min-width: 16px;
    min-height: 16px;
    background-color: var(--black);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M4.99989 13.9999L4.99976 5.00003L6.99976 5L6.99986 11.9999L14.5859 12V6.58581L21.0001 13L14.5859 19.4142L14.5859 14L4.99989 13.9999Z'%3E%3C/path%3E%3C/svg%3E");
}

/* accesibilite */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


/* responsive mobile */
@media only screen and (max-width: 800px) {
    h1 {
        font-size: 3rem;
        line-height: 3.5rem;
    }
}


/* ------------------------------------------------------------------------ Layouts section */

.section-home {
    height: 650px;
    padding: 120px 60px;

}

.section-home h2{
    font-family: var(--fontTitle);
    font-weight: 400;
    font-size: 2.5rem;
    text-align: center;
}


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

.padding-bottom{
    padding-bottom: 150px;
}

.gap-xl {
    gap: var(--gap-xl);
}

.gap-sm {
    gap: var(--gap-sm);
}


.text {
    max-width: 800px;
}


.fixed {
    position: fixed;
}

.section-intro {
    display: flex;
    flex-direction: column;
    gap: var(--gap-m);
}

.sub-section {
    display: flex;
    flex-direction: column;
    gap: var(--gap-s);
}


/* ------------------------------------------------------------------------ Boutons */

.btn{
    z-index: 10;
    cursor: pointer;
    width: fit-content;
}

@media (hover: hover) and (pointer: fine) {
.btn:hover, .btn-menu:hover {
    color: var(--color-hover);
}
}

.btn:active, .btn-menu:active {
    color: var(--color-active);
}

.btn-retour::before {
    content: '';
    display: inline-block;
    height: 20px;
    width: 20px;
    background-color: var(--black);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='currentColor'%3E%3Cpath d='M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z'%3E%3C/path%3E%3C/svg%3E");
}

.btn-haut::before, .btn-haut::after {
    content: '';
    display: inline-block;
    height: 20px;
    width: 20px;
    background-color: var(--black);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='currentColor'%3E%3Cpath d='M13 12V20H11V12H4L12 4L20 12H13Z'%3E%3C/path%3E%3C/svg%3E");
}

.btn-centre {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 2em;
}

.lien-ext {
    text-decoration: underline;
}

.lien-ext::after {
    content: '';
    display: inline-block;
    height: 12px;
    width: 12px;
    background-color: var(--black);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='12' height='12' fill='currentColor'%3E%3Cpath d='M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V12L17.206 8.207L11.2071 14.2071L9.79289 12.7929L15.792 6.793L12 3H21Z'%3E%3C/path%3E%3C/svg%3E");
}

@media (hover: hover) and (pointer: fine) {
.lien-ext:hover::after, .btn-retour:hover::before, .btn-haut:hover::before, .btn-haut:hover::after {
    background-color: var(--color-hover);
}
}

.lien-ext:active::after, .btn-retour:active::before, .btn-haut:active::before, .btn-haut:active::after {
    background-color: var(--color-active);
}

.drop-down {
    transition: transform 0.3s ease-out;
    transform: scaleY(1);
}

details[open] .drop-down {
    transform: scaleY(-1);
}



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

.nav-desktop {
    z-index: 20;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1em 1.5em 1em 1em;
}


#logo {
    display: flex;
    flex-direction: column;
    height: calc(1.6rem + 0.6em + 6px - 1px);
    overflow: hidden;
    text-align: center;
    transform: scale(1);
    font-family: var(--fontTitle);
    font-size: 1.6rem;
    line-height: 1.6rem;
    border: solid 3px var(--black);
    background-color: var(--white);
    transition: background-color 0.25s ease-out;
}

#logo div {
 transform: translateY(0px);
 width: 100%;
 padding: 0.3em 0.5em;
}

#logo div:nth-child(1) {
 background-color: var(--white);
}

#logo div:nth-child(2) {
 background-color: var(--black);
 line-height: 2.3rem;
}

#logo,
#logo div {
 transition: 0.6s cubic-bezier(.16,1,.3,1);
}

@media (hover: hover) and (pointer: fine) {
#logo:hover {
    background-color: var(--black);
    color: var(--white);
}
#logo:hover div {
 transform: translateY(-50px);
}
}

.nav-header {
    display: flex;
    flex-direction: row;
    gap: 2.5em;
}

.nav-header a, .btn-section{
    font-family: var(--fontTitle);
    position: relative;
}

.nav-header a::after, .btn-section::after{
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: var(--black);
    transition: transform 0.25s ease-out;
    transform-origin: bottom left;
}

.btn-section {
    width: fit-content;
}

.btn-section:active {
    color: var(--color-active);
}

@media (hover: hover) and (pointer: fine) {
.nav-header a:hover::after, .btn-section:hover::after{
    transform: scaleX(1);
}
}

.nav-mobile {
    display: none;
}

/* ------------------------------------------------------------------------ Header MOBILE*/
@media only screen and (max-width: 800px) {

.nav-desktop {
        display: none;
    }

.nav-mobile {
    z-index: 20;
    display: block;
    position: fixed;
    text-align: center;
    width: calc(100vw - 16px * 2);
    margin: 16px;
    cursor: pointer;
    background-color: #ffffff95;
    backdrop-filter: blur(6px);
}

.titre-nav {
    display: block;
    font-family: var(--fontTitle);
    font-size: 2rem;
    line-height: 2rem;
    padding: 0.3em 0.5em;
    border: 3px solid var(--black);
}

.menu-deroulant {
    display: block;
    position: relative;
}

.menu-deroulant::before {
    position: absolute;
    display: block;
    left: 0px;
    right: 0px;
    content: '';
    height: 24px;
    background: repeating-linear-gradient(
  #ffffff00,
  #ffffff00 4px,
  var(--black) 4px,
  var(--black) 8px
);
}

.menu-principal[open] .menu-deroulant::before {
    display: none;
}

.menu-deroulant:active::before {
    background: repeating-linear-gradient(
  #ffffff00,
  #ffffff00 4px,
  var(--color-active) 4px,
  var(--color-active) 8px
);
}

.menu-deroulant  svg{
    position: absolute;
    left: calc(50% - 20px);
    bottom: -50px;
    height: 40px;
    width: 40px;
    transition: transform 0.3s ease-out;
    transform: scaleY(1);
    user-select: none;
}

.menu-deroulant svg:active {
    color: var(--color-active);
}

.menu-principal[open] .menu-deroulant svg{
    bottom: -300px;
    transform: scaleY(-1);
}

.nav-mobile li {
    display: list-item;
    list-style: none;
    font-size: 1.25rem;
    line-height: 1.25rem;
    padding: 21.6px;
    border-bottom: 3px solid var(--black);
}

}

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

footer {
    background-color: var(--black);
    color: var(--white);
    padding: 80px 100px;
    font-size: 1rem;
}

footer h2{
    font-family: var(--fontTitle);
    font-weight: 400;
    margin-bottom: 1em;
    letter-spacing: 5%;
}

footer article{
    display: flex;
    flex-direction: row;
    column-gap: 6rem;
    row-gap: 3rem;
    align-items: flex-end;

}

footer article div{
    flex: 1;
}

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

footer {
    padding: 80px 16px;
}

footer article {
    flex-direction: column;
}

}


/* ------------------------------------------------------------------------ Contenu */



/* ------------------------------------------------------- tag pour les projets */

.tag-container {
    display: flex;
    flex-direction: row;
    gap: 0.5em;
    flex-wrap: wrap;
}

.tag {
    width: fit-content;
    padding: 0.3em 0.6em;
    background-color: var(--background-black);
    color: var(--black);
    border-radius: 30px;
}


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

.home {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 650px;
}

.for-mobile {
    display: none;
}

.bienvenue {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-sm);
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.circle-container {
    position: relative;
    width: 170px;
    height: 170px;
}

.circle-container svg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center;
}

@keyframes rotate{
    from{
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.circle-container text{
    animation: rotate 20s linear infinite;
    transform-origin: 50% 50%;
    fill: var(--black);
}

.image-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
}

.image-container img{
    width: 100%;
    height: 100%;
}

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

.image-container{
    width: 70px;
    height: 70px;
}

}

/* -------------------------------------------------------------------Section de la homepage */

.home-section {
    padding: 150px 100px;
    display: flex;
    flex-direction: row;
    gap: 12rem;
}

.home-section p{
    max-width: 600px;
}

.home-section h2{
    font-family: var(--fontTitle);
    font-weight: 400;
    font-size: 2.3rem;
    max-width: 600px;
}

.home-section article{
    display: flex;
    flex-direction: row;
    gap: 2em;
    font-size: 16px;
}

.section-avantage {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.avantage {
    display: flex;
    flex-direction: row;
    gap: var(--gap-s);
    align-items: center;
    transition: all 0.25s ease-out;
}


.avantage::before{
    display: inline-block;
    content: '';
    min-height: 22px;
    min-width: 22px;
    background-color: var(--black);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM5 5V19H19V5H5ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z'%3E%3C/path%3E%3C/svg%3E");
}

.h2-highlight {
    padding: 0.2em;
    background: linear-gradient(
    #ffffff00,
    #ffffff00 30px,
    #FBD0D0 30px
    );
}

.fenetre {
    border: solid 20px #f9f9fe;
    border-radius: 20px;
}

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

.home-section {
    padding: 100px 16px;
    flex-direction: column;
}

}

/*------------------------------------------------------------ PAGE MEMOIRE */

.titres-memoire h1{
    font-size: 3rem;
    line-height: 3.5rem;
}

.titres-memoire h2{
    font-size: 1.4rem;
    font-weight: 500;
}

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

.titres-memoire h1{
    font-size: 2.5rem;
}

}


/*------------------------------- boutons */

.svg-btn {
    cursor: pointer;
    width: 10rem;
    height: 10rem;
    transform: scale(1);
    transition: transform 0.25s ease-out;
}

@media (hover: hover) and (pointer: fine) {
.svg-btn:hover {
    transform: scale(0.90);
}
}

.svg-btn:active{
    transform: scale(0.90);
}

.rotate-left {
    transform: rotate(-10deg);
    transition: transform 0.25s ease-out;
}

.rotate-right {
    transform: rotate(10deg);
}

.arrow-left {
    position: relative;
    margin-left: 40px;
}

.arrow-left::before {
    position: absolute;
    transform: scale(1);
    top: calc(10rem / 2 - 40px / 2 );
    left: -40px;
    content: '';
    width: 40px;
    height: 40px;
    background-color: var(--black);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M8 12L14 6V18L8 12Z'%3E%3C/path%3E%3C/svg%3E");
    transition: left 0.25s ease-out, transform 0.25s ease-out;
}


@media (hover: hover) and (pointer: fine) {
.arrow-left:hover::before {
    transform: scale(1.5);
}
}

.arrow-left:active::before{
    transform: scale(1.5);
}

.arrow-right {
    display: block;
    position: relative;
    margin-right: 40px;
}

.arrow-right::after {
    position: absolute;
    transform: scale(1);
    top: calc(10rem / 2 - 40px / 2 );
    right: -40px;
    content: '';
    width: 40px;
    height: 40px;
    background-color: var(--black);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M16 12L10 18V6L16 12Z'%3E%3C/path%3E%3C/svg%3E");
    transition: right 0.25s ease-out, transform 0.25s ease-out;
}

@media (hover: hover) and (pointer: fine) {
.arrow-right:hover::after {
    transform: scale(1.5);
}
}

.arrow-right:active::before{
    transform: scale(1.5);
}

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

.for-desktop {
    display: none;
}

.for-mobile {
    display: block;
}
.home {
    display: flex;
    flex-direction: column;
    padding-top: 130px;
    margin-inline: 16px;
    height: 700px;
    padding-bottom: 50px;
}

.home p{
    font-size: 1rem;
}

.svg-home-mobile {
    display: flex;
    flex-direction: row;
    gap: var(--gap-m);
}

.svg-btn {
    width: 7rem;
    height: 7rem;
}

.svg-btn:active{
    transform: scale(0.9);
}

.rotate-left {
    transform: rotate(-10deg);
}

.rotate-right {
    transform: rotate(10deg);
}

}

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

.galerie {
    overflow-x: hidden;
}

.galerie .animate {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: fit-content;
    will-change: transform;
    animation: infiniteLoop calc(var(--count)*8s) linear infinite;
}

/* @media (hover: hover) and (pointer: fine) {
.galerie .animate:hover {
    animation-play-state: paused;
}
} */

@keyframes infiniteLoop {
    100% {
        transform: translate3d(calc(-50% - 1em / 2), 0, 0);
    }
}

.galerie img {
    height: 300px;
    opacity: 100%;
    transition: opacity 0.25s ease-out;
}

@media (hover: hover) and (pointer: fine) {
.galerie img:hover {
    opacity: 60%;
}
}

.galerie img:active {
    opacity: 80%;
}

@media only screen and (max-width: 800px) {
.galerie {
    overflow-x: auto;
}
}


/* ----------------------------------------------------------------------------------INDEX BLOG */

.content-main-center {
    padding: 150px 16px;
    display: flex;
    justify-content: center;
}

.template-content {
    max-width: 800px;
    min-width: 325px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6em;
}

.template-content h3 {
    font-size: 1.2rem;
}


.section-content {
    display: flex;
    flex-direction: column;
    gap: 2.5em;
}

/* -------------------------------------------------------Liste */

.container-liste {
    border-bottom: solid var(--black) 2px;
}

.element-liste {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    padding: 1.2em 1.5em;
    border-top: solid var(--black) 2px;
}

.element-liste p {
    font-size: 1rem;
}

@media (hover: hover) and (pointer: fine) {
.element-liste:hover {
    background-color: var(--background-hover) ;
}
}

.element-liste:active {
    background-color: var(--background-active) ;
}

/* -------------------------------------------------------Icon */
.icon-inline {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5em;
}

.icon-inline svg, .icon-paragraphe svg{
    display: inline-block;
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
}

/* ------------------------------------- section autres projets */

.autre-projet {
    margin-top: 3rem;
    padding: 1.5em;
    background-color: var(--background-black);
}

.autre-projet ul{
    display: flex;
    flex-direction: row;
    gap: 2em;
}

.card-projet {
    width: calc(50% - 1em / 2);
    overflow: hidden;
}

.card-projet a{
    display: block;
}

@media (hover: hover) and (pointer: fine) {
.card-projet:hover img{
    opacity: 80%;
}
}

.card-projet:active img{
    opacity: 60%;
}

/* ----------------------------------------------------------------------------------PAGES BLOG */

.titres-projet h1{
    font-size: 3rem;
    line-height: 3.5rem;
}

.titres-projet h2{
    font-size: 1.8rem;
}

.titres-projet h3{
    font-size: 1.4rem;
}

.titres-projet h4{
    font-size: 1.15rem;
    margin-bottom: 0.2em;
    width: fit-content;
}

.chapeau {
    padding: 1.5em;
    background-color: var(--background-black);
}

.h4-highlight {
    padding: 0.2em;
    background: linear-gradient(
    #ffffff00,
    #ffffff00 15px,
    var(--background-black) 15px
    );
}

.background-section {
    background-color: var(--background-black-light);
}

.section-blog {
    display: flex;
    flex-direction: column;
    gap: var(--gap-m);
    padding-inline: 1.5em;
}

@media only screen and (max-width: 800px) {
.titres-projet h1{
    font-size: 2.3rem;
    line-height: 3rem;
}
.section-blog {
    padding-inline: 0;
}
}


/* -----------------------------------------------------------------------INDEX PROJET */

.background-print {
    z-index: 0;
    width: 100vw;
    height: 100vh;
    position: fixed;
    background-image: url("../imgs/icons/background-print.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.background-web {
    z-index: 0;
    width: 100vw;
    height: 100vh;
    position: fixed;
    background-image: url("../imgs/icons/background-web.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.template-grid {
    z-index: 10;
    padding-top: 100px;
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(13, 115px);
    margin-inline: 16px;
}

.item {
    display: flex;
    flex-direction: column;
    gap: var(--gap-s);
    padding: 25px;
    text-align: left;
    background-color: var(--white);
    border-radius: 3px;
    transform: scale(1);
    transition: transform 0.25s ease-out;
}

.item p{
    font-size: 16px;
}

.item:hover {
    transform: scale(0.96);
}

.item:active {
    transform: scale(0.9);
}

.template-grid a img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
    border-radius: 3px;
}

.item-title h1{
    font-size: 3rem;
}

@media only screen and (max-width: 1390px) {
.item-title h1{
    font-size: 3rem;
}
}

@media only screen and (max-width: 1100px) {
.item-title h1{
    font-size: 3rem;
}
.template-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(15, 115px);
}

.no-1100 {
    display: none;
}
}

@media only screen and (max-width: 800px) {
.item-title {
    display: flex;
    align-items: flex-end;
}

.item-title h1{
    font-size: 2.2rem;
}

.template-grid {
    padding-top: 80px;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(30, 115px);
}
}

/* ---------------------------------Placement dans la grille */

.span1-1{
    grid-column: span 1;
    grid-row: span 1;
}

.span1-3{
    grid-column: span 1;
    grid-row: span 3;
}

.span1-4{
    grid-column: span 1;
    grid-row: span 4;
}

.span2-1 {
    grid-column: span 2;
    grid-row: span 1;
}

.span2-2 {
    grid-column: span 2;
    grid-row: span 2;
}

.span2-3 {
    grid-column: span 2;
    grid-row: span 3;
}

.span2-4{
    grid-column: span 2;
    grid-row: span 4;
}

.span2-5 {
    grid-column: span 2;
    grid-row: span 5;
}

.span3-2 {
    grid-column: span 3;
    grid-row: span 2;
}

.span3-3 {
    grid-column: span 3;
    grid-row: span 3;
}

.span3-4 {
    grid-column: span 3;
    grid-row: span 4;
}

.span3-5 {
    grid-column: span 3;
    grid-row: span 5;
}

.span4-2 {
    grid-column: span 4;
    grid-row: span 2;
}

.span4-3 {
    grid-column: span 4;
    grid-row: span 3;
}

.span4-4 {
    grid-column: span 4;
    grid-row: span 4;
}

.span4-5 {
    grid-column: span 4;
    grid-row: span 5;
}


.item-title {
    grid-column: span 3;
    grid-row: span 1;
    text-align: left;
}

@media only screen and (max-width: 1100px) {
.span2-1 {
    grid-column: span 1;
    grid-row: span 1;
}

.span2-2 {
    grid-column: span 1;
}

.span2-3 {
    grid-column: span 1;
}

.span2-4{
    grid-column: span 1;
}

.span2-5 {
    grid-column: span 1;
}

.span3-2 {
    grid-column: span 1;
}

.span3-3 {
    grid-column: span 1;
}

.span3-4 {
    grid-column: span 1;
}

.span3-5 {
    grid-column: span 1;
}

.span4-2 {
    grid-column: span 1;
}

.span4-3 {
    grid-column: span 2;
}

.span4-4 {
    grid-column: span 1;
}

.span4-5 {
    grid-column: span 1;
}

.item-title {
    grid-column: span 1;
}
}

@media only screen and (max-width: 800px) {
.span2-1 {
    grid-column: span 1;
    grid-row: span 1;
}

.span2-2 {
    grid-column: span 1;
}

.span2-3 {
    grid-column: span 1;
    grid-row: span 4;
}

.span2-4{
    grid-column: span 1;
}

.span2-5 {
    grid-column: span 1;
}

.span3-2 {
    grid-column: span 1;
    grid-row: span 3;
}

.span3-3 {
    grid-column: span 1;
}

.span3-4 {
    grid-column: span 1;
}

.span3-5 {
    grid-column: span 1;
    grid-row: span 4;
}

.span4-2 {
    grid-column: span 1;
    grid-row: span 1;
}

.span4-3 {
    grid-column: span 1;
}

.span4-4 {
    grid-column: span 1;
    grid-row: span 3;
}

.span4-5 {
    grid-column: span 1;
}

.item-title {
    grid-column: span 1;
}
}

/* -----------------------------------------------------------------------PAGE PROJET */

.page-projet {
    padding : 130px 0px;
}

.page-projet h1{
    margin-top: 1em;
    margin-bottom: 1rem;
}

.page-projet section, .page-projet .btn-retour{
    padding-inline: 60px;
}

@media only screen and (max-width: 800px) {
.page-projet section, .page-projet .btn-retour{
    padding-inline: 16px;
}
}

/* -----------------------------------------section intro */

.intro-projet {
    display: flex;
    flex-direction: row;
    gap: var(--gap-l);
    padding-bottom: 50px;
}

.intro-projet article {
    flex: 1;
}

.intro-projet img{
    object-fit: cover;
    min-width: 100px;
    flex: 1;
}

.metadonnees {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.metadonnees li{
    padding: 0.5em ;
    border-bottom: solid #2f00611d 2px;
}

.categorie {
    width: 100%;
    color: #2f006176;
}

.donnees {
    width: 100%;
}

@media only screen and (max-width: 1100px) {
.intro-projet {
    flex-direction: column;
    gap: var(--gap-m);
}
.categorie{
    width: 35%;
}
.donnees {
    width: 65%;
}
}

/* -----------------------------------------section contenu */

/* ---------------------section TEXT */

.projet-text {
    padding: 100px 0px 70px 0px;
    display: flex;
    flex-direction: row;
    gap: var(--gap-l);
}

.projet-text p, .projet-text div{
    flex: 1;
}

.projet-text h2 {
    font-size: 2.1rem;
    font-weight: 400;
    max-width: 450px;
}

.projet-text p{
    font-size: 1.25rem;
}

@media only screen and (max-width: 800px) {
.projet-text {
    flex-direction: column;
    gap: var(--gap-m);
}
.projet-text h2 {
    font-size: 1.6rem;
}
}

/* ---------------------section IMAGE et/ou TEXT */

.label-mobile {
    padding-left: 90px;
}

.projet-mix {
    padding-bottom: 50px;
}

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

.img-medium {
    display: flex;
    justify-content: flex-end;
}

.img-medium img{
    width: 800px;
}

.grid-2imgs {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(5, 115px);
}

.grid-3vertical {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(5, 115px);
}

.grid-3horizontal {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 115px);
}

.grid-2horizontal {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 115px);
}

.flex-horizontal {
    display: flex;
    flex-direction: row;
    gap: 64px;
    flex-wrap: wrap;
    padding-bottom: 50px;
}

.flex-horizontal img{
    width: 650px;
}

.flex-3vertical {
    display: flex;
    flex-direction: row;
    column-gap: 8px;
    row-gap: 60px;
    flex-wrap: wrap;
    padding-bottom: 50px;
}

.flex-3vertical img{
    width: 450px;
}

.video-portrait {
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-portrait video{
    max-width: 600px;
}

.video-paysage {
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-paysage video{
    max-width: 1000px;
}


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

.grid-2imgs {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 70px);
}

.grid-3horizontal {
    grid-template-columns: repeat(3, 1fr);
}

.grid-3vertical {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 50px);
}

.flex-horizontal {
    justify-content: flex-end;
}

.flex-horizontal img{
    width: 650px;
}
}

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

.label-mobile {
    padding-left: 70px;
}

.img-medium img{
    width: 350px;
}

.grid-2imgs {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(5, 70px);
}

.grid-3horizontal {
    grid-template-columns: repeat(1, 1fr);
}

.grid-3vertical {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(15, 80px);
}
.flex-horizontal {
    justify-content: center;
}

.flex-horizontal img{
    width: 350px;
}

.flex-3vertical img{
    width: 343px;
}

.video-portrait video{
    max-width: 350px;
}

.video-paysage video{
    max-width: 350px;
}
}