:root {
    --text-color: #111;
    --text-light:rgb(156, 156, 156);
    --primary: #D1FF71;
    --primary-hover: #abd258;
    --primary-alt: #7a9541;

    --card-stroke: rgba(214, 214, 214, 1);
    --card-fill: rgba(227, 227, 227, 0.45);
    --card-radius: 27px;
    --img-radius: 18px;
}


/* Reset et globals  */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

.no-scroll {
  overflow: hidden;
}

body {
    font-family: "Inter", sans-serif;
    line-height: 1.6;
    color: var(--text-color);
}

button,
input,
textarea,
select {
    font: inherit;
}

a {
    color: var(--text-color);
    text-decoration: none;
}

.modal {
  overscroll-behavior: contain;
}

.modal-btn {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 7px 7px 7px 24px;
    background: var(--primary);
    color: var(--text-color);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
}

.modal-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 50%;
}

.modal-btn-icon svg {
    fill:var(--text-color);
}

.modal-btn, .modal-btn-icon, .modal-btn-icon svg {
    transition: all .3s ease;
}
.modal-btn:hover {
    background:var(--primary-hover);
}
.modal-btn:hover .modal-btn-icon {
    background-color:var(--text-color);
}
.modal-btn:hover svg {
    fill:var(--primary-hover);
    transform:rotate(-45deg);
}
/* Container */
/* .container {
    width: 90%;
    max-width: 1100px;
    margin: auto;
} */

/* Header */
header {
    font-size: 16px;
    padding: 20px 0;
    font-weight: 700;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-width: 100%;
    padding: 0 40px;
}

h1 {
    font-weight: 900;
    font-size: 18px;
}

h2 {
    text-transform: uppercase;
    font-size: 30px;
}

h3 {
    text-transform: uppercase;
    font-size: 16px;
    color:var(--text-color);
    font-weight:700;
}

h4 {
    text-transform: uppercase;
    font-size: 14px;
    color:var(--text-light);
    font-weight:400;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

nav a {
    color: var(--text-color);
    text-decoration: none;
}

nav a:hover {
    opacity: 0.7;
}

ul {
    list-style: inside;
}
p.highlight {
    background-color: #ebf3d9;
    border: 2px solid var(--primary-alt);
    border-radius: 10px;
    padding: 10px;
}
.highlight img {
    margin-right: 5px;
}
.mark {
  position: relative;
  display: inline;
  z-index: 0;
}

.mark::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.15em;        
  width: 100%;
  height: 0.4em;        
  background: var(--primary);  
  z-index: -1;
  border-radius: 4px;
}

/* Hero */
.hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin: 0 40px;
    padding: 40px 40px;
    text-align: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    border-radius: 50px;
    color: white;
}

.hero .container {
    text-align: left;
}

.hero h4 {
    color: var(--primary);
}

.hero h3 {
    font-size: 80px;
    line-height: 80px;
    margin: 10px 0;
    color: white;
    text-transform: unset;
}

.btn {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background: #111;
    text-decoration: none;
    border-radius: 5px;
}

.btn:hover {
    background: #333;
}

.svg-icon path {
    fill:var(--primary-alt);
}

/* Contenu */
#projets {
    margin-top:0;
    padding-top:30px;
}
section:not(.hero) {
    width: 80%;
    margin: 30px auto;
}

.section-title {
    margin-bottom:15px;
}

.section-title h3 {
    color: var(--primary-alt);
    font-size: 14px;
}
.section-title h2 {
    font-size: 30px;
}

.projects-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* gap: 17px; */
    justify-content: space-between;
}

.project {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: calc(50% - 7px);
    padding: 10px;
    border: 1px solid var(--card-stroke);
    background-color: var(--card-fill);
    border-radius: var(--card-radius);
    margin-bottom: 13px;
}

.project .project-img {
    width: 100%;
    height:100%;
    object-fit: cover;
    border-radius: var(--img-radius);
    aspect-ratio: 590 / 432;
    cursor:pointer;
}

.project-title {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    gap: 10px;
    border: 1px solid var(--card-stroke);
    border-radius: var(--img-radius);
    background:white;
    padding: 10px 10px;
    cursor:pointer;
    padding-left:15px;
}

.circle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width:30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    border:1px solid var(--card-stroke);
    margin-left:auto;
    transition: all .3s ease;
}

.modal-close {
  cursor: pointer;
  background:var(--card-stroke);
}

.circle-icon svg {
    transition: all .3s ease;
    fill:var(--text-color);
}

.project-title:hover .circle-icon, .modal-project-right  .circle-icon:hover {
    background:var(--text-color);
}

.project-title:hover svg {
    fill: var(--primary);
    transform:rotate(-45deg);
}
.modal-project-right .circle-icon:hover svg {
    fill: var(--primary);
    transform:rotate(90deg);
}
.modal-project-btn {
    width: 100%;
    display: block;
    text-align: center;
}

.icon {
    margin-right:6px;
}

/* Modal */
.modal[hidden] {
  display: none;
}

.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 1000;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
}

.modal-panel {
  position: absolute;
  bottom:0;
  z-index: 1;
  background: var(--card-fill);
  border:1px solid var(--card-stroke);
  /* width: min(900px, 90vw); */
  width: min(550px, 90vw);
  max-height: 70vh;
  overflow: auto;
  border-radius: 27px 27px 0 0;
backdrop-filter: blur(10px);
padding:10px;
    border-bottom: none;
 transform: translateY(100%);
  transition: transform 0.4s ease;
}

.modal.is-open .modal-panel {
  transform: translateY(0);
}

.modal-project-header {
    background:white;
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content: space-between;
    width:100%;
    border-radius:var(--img-radius);
    padding:7px;
    padding-left:20px;
    border:1px solid var(--card-stroke);
}
.modal-project-left, .modal-project-right {
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    align-items: center;
    gap: 10px;
}

.modal-body section {
    width:100%;
    margin:0;
}
.modal-body section.modal-project-hero {
    margin: 10px 0;
}

section.modal-project-hero img, section.modal-project-hero video {
    width:100%;
    aspect-ratio: 528 / 400;
    border-radius: var(--img-radius);
    height: 400px;
    margin-bottom: -6px;
    border:1px solid var(--card-stroke);
    object-fit:cover;
}
.modal-section.no-margin {
    margin-top:0;
}

section.modal-project-content {
    background:white;
    border-radius:var(--img-radius);
    border:1px solid var(--card-stroke);
    padding:20px;
}

.modal-section {
    margin: 20px 0;
}
.modal-section h3 {
    margin-bottom:10px;
}
.modal .tag-list {
    display:flex;
    flex-direction: row;
    flex-wrap:wrap;
    gap:7px;
}
.modal p {
    margin-bottom: 10px;
}

.modal .tag-list span {
    border: 2px solid var(--primary-alt);
    color: var(--primary-alt);
    padding: 0px 9px;
    border-radius: 50px;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
}
.modal a {
    background:var(--primary);
    color:black;
    text-decoration: none;
    padding: 5px 15px;
    border-radius:20px;
    transition:all .3s ease;
}
.modal .proto-icon {
    height:14px;
    margin-right:7px;
}
.modal a:hover {
    background:var(--primary-hover);

}

/* iOS-ish scrollbar (WebKit: Chrome/Safari/Edge) */
.modal-panel {
  scrollbar-gutter: stable both-edges; 
  -webkit-overflow-scrolling: touch;   
}


/* Firefox fallback */
.modal-panel {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.25) transparent;
}


/* Footer */
footer {
    background: #111;
    color: white;
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
}

@media (max-width:1024px) {
    /* .project-title h4, .project-title span:not(.circle-icon) {
        display:none;
    } */
    .project-title * {
        font-size:12px;
    }
}

@media (max-width:868px) and (min-width:769px) {
         .project-title h4, .project-title span:not(.circle-icon) {
        display:none;
    }
}

@media (max-width:768px) {
    /* .project-list {
        flex-direction:column;
    } */

    article.project {
        width:100%;
    }
}
@media (max-width:568px) {
.hero h3 {
        font-size:60px;
    }
        .hero {
        margin:0 10px;
        padding:20px;
    }
        header .container {
        padding:0 20px;
    }
    .hero h3 {
        margin:0;
    }
}
@media (max-width:468px) {

}

/* RESPONSIVE HEADER MODAl */
@media (max-width:468px) {
    .modal-panel {
        width:100%;
    }
    #projets {
        width:95%;
    }
    /* .modal-project-left, .modal-project-right {
        flex-direction:column;
        justify-content: space-between;
        gap: 5px;
    }
    .modal-project-left {
        align-items:flex-start;
    }
    .modal-project-left span {
        display:none;
    }
    .modal-project-header h3 {
        font-size:14px;
    }
    .modal-project-header h4 {
        font-size:12px;
    }
    .modal-project-right h4 {
        font-size:12px;
        order:2;
        margin-right:10px;
    } */


}

.modal-body {
    padding-top: 40px;
    position: relative;
}
.modal-project-left {
    width:100%;
}
.modal-project-left span {
    display:none;
}
.modal-project-left h4 {
    position:absolute;
    top:4px;
}
.modal-project-left h3 {
    width: 100%;
    text-align: center;
}
.modal-project-header h4 {
    color:var(--primary);
}
.modal-project-right {
    top:0;
    position:absolute;
    right:0;
}