:root {
--white: #fff;
--gray-btn: #333;
--radius: 30px;
--green: #00c100;
--green-rgb: 0, 193, 0;
--light-green: #4bde5a;
--dark-purple: #0a0014;
--black: #000;
}
@font-face {
font-family: "Roboto Variable";
src: url("../font/Roboto-VariableFont_wdth,wght.ttf") format("truetype");
font-weight: 100 900;
font-stretch: 75% 100%;
font-display: swap;
}
@font-face {
font-family: "Trivia Sans Book";
src: url("../font/TriviaSansBook.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
background-color: var(--black);
font-family: "Trivia Sans Book", serif;
scroll-behavior: smooth;
}
@media (pointer: fine) and (hover: hover) {
html.has-custom-cursor,
html.has-custom-cursor body {
cursor: none;
}
html.has-custom-cursor *,
html.has-custom-cursor *::before,
html.has-custom-cursor *::after {
cursor: none !important;
}
html.has-custom-cursor .cursor-dot {
position: fixed;
top: 0;
left: 0;
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--white);
pointer-events: none;
z-index: 999999;
opacity: 0;
transform: translate(-50%, -50%);
will-change: top, left, width, height, background, box-shadow;
transition:
background 140ms ease,
width 140ms ease,
height 140ms ease,
box-shadow 220ms ease,
opacity 180ms ease;
}
html.has-custom-cursor .cursor-dot.is-hover {
background: var(--green);
width: 10px;
height: 10px;
}
html.has-custom-cursor .cursor-dot.pulse {
animation: cursor-vibe 420ms ease-out;
}
@keyframes cursor-vibe {
0% {
transform: translate(-50%, -50%) scale(0.85);
box-shadow:
0 0 0 0 rgba(var(--green-rgb), 0),
0 0 0 0 rgba(var(--green-rgb), 0);
}
35% {
transform: translate(-50%, -50%) scale(1.7);
box-shadow:
0 0 0 10px rgba(var(--green-rgb), 0.18),
0 0 18px 6px rgba(var(--green-rgb), 0.35);
}
100% {
transform: translate(-50%, -50%) scale(1);
box-shadow:
0 0 0 0 rgba(var(--green-rgb), 0),
0 0 0 0 rgba(var(--green-rgb), 0);
}
}
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #121212;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(45deg, var(--green), var(--light-green));
border-radius: 10px;
border: 2px solid #121212;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(45deg, var(--green), var(--light-green));
}
.top-text {
position: absolute;
top: 73px;
left: 70px;
color: var(--white);
font-size: 1.01rem;
}
.bottom-text {
position: absolute;
bottom: 20px;
left: 70px;
color: var(--white);
font-size: 1.01rem;
text-align: left;
line-height: 1.4;
}
.head {
height: 100%;
}
.head .container {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;z-index: 0;
isolation: isolate;
}
.logo {
width: 260px;
height: auto;
z-index: 1;
}
.cta-btn {
display: inline-block;
width: 260px;
margin-top: 60px;
padding: 19px 0;
font-size: 1rem;
color: var(--white);
background-color: var(--gray-btn);
border: 1px solid var(--white);
border-radius: var(--radius);
text-align: center;
text-decoration: none;
cursor: pointer;
z-index: 2;
}
.wave {
position: absolute;
right: min(0px, calc((400px - 390px) / 2));
top: 34.5%;
transform: translateY(-50%);
width: clamp(300px, 45%, 2000px);
height: auto;
pointer-events: none;
z-index: 0;
}

.wave-stage {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 1;
}
@media screen and (width: 1536px) and (height: 864px) {
.wave {
right: -18px;
top: 38.5%;
}
}
@media screen and (width: 1440px) and (height: 900px) {
.wave {
right: -21px;
top: 40.1%;
}
}
@media (max-width: 1390px) {
.wave {
display: none;
}
}
.qui-sommes-nous-section {
text-align: center;
padding: 50px 20px;
background-color: var(--black);
color: var(--white);
position: relative;
}
.qui-sommes-nous-titre {
color: var(--green);
font-size: 2.5rem;
font-family: "Roboto Variable", serif;
font-weight: 600;
margin-bottom: 40px;
}
.equipe-container {
position: relative;
max-width: 1200px;
margin: 0 auto;
min-height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
.equipe-grille {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
margin-top: 0;
transition: opacity 0.3s ease-in-out;
}
.membre-carte {
display: flex;
flex-direction: column;
align-items: center;
width: 200px;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.membre-photo-container {
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
overflow: hidden;
border: 3px solid var(--white);
transition: all 0.3s ease-in-out;
}
.membre-carte:hover .membre-photo-container {
border-color: var(--green);
}
.membre-photo {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.3s ease-in-out;
}
.membre-detail {
pointer-events: auto;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease-in-out;
background-color: var(--black);
z-index: 10;
}
.detail-photo {
flex-shrink: 0;
}
.detail-image {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
border: 4px solid var(--green);
}
.detail-info {
flex: 1;
max-width: 500px;
text-align: left;
}
.detail-info h3 {
font-family: "Roboto Variable", serif;
font-size: 2.5rem;
color: var(--green);
margin: 0 0 10px 0;
font-weight: 600;
}
.detail-role {
font-family: "Roboto Variable", serif;
font-size: 1.2rem;
color: var(--white);
margin: 0 0 20px 0;
font-weight: 300;
}
.detail-description {
font-family: "Trivia Sans Book", serif;
font-size: 1rem;
color: var(--white);
line-height: 1.6;
margin: 0;
}
.equipe-container:has(.membre-carte:hover) .equipe-grille {
opacity: 0;
visibility: hidden;
}
.membre-carte:hover + .membre-detail,
.membre-carte:hover ~ .membre-detail[id*="detail-"]:nth-of-type(1) {
opacity: 0;
visibility: hidden;
}
.membre-carte[data-membre="benoit"]:hover ~ #detail-benoit,
.membre-carte[data-membre="lara"]:hover ~ #detail-lara,
.membre-carte[data-membre="abdelnaim"]:hover ~ #detail-abdelnaim,
.membre-carte[data-membre="feriel"]:hover ~ #detail-abdelnaim,
.membre-carte[data-membre="lucas"]:hover ~ #detail-lucas {
opacity: 1;
visibility: visible;
}
.desktop-view {
display: block;
}
.mobile-view {
display: none;
}
.idv {
color: white;
font-family: "Roboto Variable", serif;
margin: 12% 16%;
display: flex;
flex-direction: row;
padding: 50px;
gap: 50px;
}
.idv p {
font-family: "Trivia Sans Book", serif;
max-width: 600px;
}
.sidebar-content {
display: none;
}
.sidebar-content.active {
display: block;
}
.gallery-section {
display: none;
scroll-margin-top: 100px;
}
.gallery-section.active {
display: grid;
}
.content-wrapper {
display: flex;
flex-direction: column;
gap: 50px;
flex: 1;
}
.sidebar {
width: 45%;
}
button {
display: inline-block;
width: 165px;
margin-top: 19px;
padding: 12px 3px;
font-size: 0.8rem;
color: white;
background-color: var(--black);
border: 1px solid var(--green);
border-radius: var(--radius);
text-align: center;
text-decoration: none;
cursor: pointer;
z-index: 2;
transition: .4s;
font-family: "Trivia Sans Book", serif;
}
button:hover {
border-color: var(--light-green);
}
.idv .fix {
position: sticky;
top: 30%;
align-self: flex-start;
}
.titre {
font-size: 2.5rem;
font-weight: 600;
font-stretch: 1%;
display: block;
cursor: pointer;
transition: color 0.3s;
margin-bottom: 1rem;
font-family: "Roboto Variable", serif;
}
.titre:hover {
color: var(--green);
}
.titre.active::after {
color: var(--green);
}
.titre.active::after:hover {
color: var(--black);
}
.titre::after {
content: ".";
color: white;
font-weight: bold;
margin-left: -1px;
}
.section-description {
display: none;
margin-bottom: 2rem;
}
.section-description.active {
display: block;
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.gallery {
width: 100%;
grid-template-columns: repeat(2, 1fr);
column-gap: 2rem;
row-gap: 2rem;
min-height: 500px;
}
.gallery {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 2rem;
row-gap: 2rem;
}
.gallery .item:nth-child(2) {
margin-top: 5rem;
}
.gallery .item:nth-child(4) {
margin-top: 5rem;
}
.pwin {
font-weight: 700;
white-space: nowrap;
}
.pwin::after {
content: ".";
color: var(--green);
}
.tagline {
display: block;
font-size: 0.75rem;
margin-top: 0.2rem;
}
.item {
padding: 15px 0;
}
.item span {
display: block;
font-size: 1.8rem;
font-weight: 600;
color: white;
line-height: 1.2;
font-family: "Roboto Variable", serif;
}
.item small {
display: block;
font-size: 0.9rem;
font-weight: 300;
color: #aaaaaa;
margin-top: 4px;
font-family: "Trivia Sans Book", serif;
}
.image.double-layer {
position: relative;
overflow: hidden;
}
.image.double-layer img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
top: 0;
left: 0;
border-radius: 40px;
transition: transform 0.4s ease;
}
.image.double-layer .bg-image {
z-index: 1;
filter: brightness(0.8);
}
.image.double-layer .fg-image {
z-index: 2;
}
.image.double-layer:hover .fg-image {
transform: scale(1.08);
}
.image {
background: #333;
border-radius: 40px;
width: 238px;
height: 356px;
margin-bottom: 4px;
margin-left: 6px;
border: 1px solid #444;
transition: .4s;
}
.image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 40px;
display: block;
}
.image:hover {
border-color: var(--green);
}
.scroll-indicator {
position: fixed;
right: 20px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 10px;
z-index: 100;
}
.scroll-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
cursor: pointer;
}
.scroll-dot:hover {
background-color: rgba(0, 193, 0, 0.5);
}
.scroll-dot.active {
background-color: var(--green);
transform: scale(1.3);
}
@media (max-width: 900px) {
.desktop-view {
display: none;
}
.mobile-view {
display: block;
padding: 20px;
margin: 30px 0;
}
.desktop-only {
display: none;
}
.mobile-section {
background-color: var(--dark-purple);
border-radius: 15px;
padding: 25px;
margin-bottom: 30px;
}
.mobile-section .titre {
color: white;
font-size: 2.5rem;
margin-bottom: 15px;
font-family: "Roboto Variable", serif;
}
.mobile-section .titre::after {
color: var(--green);
}
.mobile-section p {
margin-bottom: 25px;
line-height: 1.5;
font-size: 0.95rem;
color: white;
font-family: "Trivia Sans Book", serif;
}
.mobile-section .gallery {
display: flex;
grid-template-columns: 1fr 1fr;
gap: 15px;
min-height: auto;
margin-bottom: 20px;
overflow-x: auto;
scroll-snap-type: x proximity;
padding-bottom: 1rem;
}
.mobile-section .item {
padding: 0;
scroll-snap-align: center;
}
.mobile-section .image {
width: 10rem;
height: auto;
aspect-ratio: 2 / 3;
margin-left: 0;
}
.mobile-section .item span {
font-size: 1.4rem;
font-family: "Roboto Variable", serif;
}
.mobile-section .item small {
font-size: 0.8rem;
font-family: "Trivia Sans Book", serif;
}
.mobile-section button {
width: 165px;
margin-top: 19px;
padding: 12px 3px;
font-size: 0.8rem;
display: inline-block;
}
.mobile-section .gallery .item:nth-child(2),
.mobile-section .gallery .item:nth-child(4) {
margin-top: 0;
}
.qui-sommes-nous-titre {
font-size: 2rem;
}
.equipe-grille {
flex-direction: column;
align-items: center;
gap: 20px;
}
.membre-carte {
width: 80%;
max-width: 200px;
}
.membre-photo-container {
width: 120px;
height: 120px;
}
.membre-detail {
flex-direction: column;
text-align: center;
gap: 20px;
padding: 20px;
}
.detail-image {
width: 150px;
height: 150px;
}
.detail-info {
text-align: center;
}
.detail-info h3 {
font-size: 2rem;
}
}
.footer {
border-top: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
margin-top: 20px;
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
padding: 40px 20px;
}
a {
text-decoration: none;
color: #0daf0d;
}
.wave img {
width: 100%;
height: auto;
display: block;
}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
img{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none}