@import url('https://fonts.googleapis.com/css2?family=Herr+Von+Mullerhoff&display=swap');

/* ========================= */
/* RESET */
/* ========================= */

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

html{
    scroll-behavior:smooth;
}

body{
    background:#eae2d9;
    color:#0f172a;
    font-family:'Inter', sans-serif;
    overflow-x:hidden;
}

/* ========================= */
/* VARIABLES */
/* ========================= */

:root{

    --sidebar-width:100px;

    --primary:#0f172a;
    --secondary:#101c32;

    --gold:#b89247;
    --white:#ffffff;
    --gray:#94a3b8;

    --border:rgba(255,255,255,.08);

}

/* ========================= */
/* GLOBAL */
/* ========================= */

h1,h2,h3{
    font-weight:600;
}

a {
    text-decoration: none;
}

p{
    color:var(--gray);
    line-height:1.8;
}

img{
    width:100%;
    display:block;
}

/* BADGES STATUT */
.badge {
    position: relative;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
    right: -230px;
}

.badge.success {
    background: rgba(40, 199, 111, 0.1);
    color: #28c76f;
}

.badge.pending {
    background: rgba(255, 159, 67, 0.1);
    color: #ff9f43;
}

.badge.futur {
    background: rgba(234, 84, 85, 0.1);
    color: var(--gray);
}

/* ========================= */
/* BUTTONS */
/* ========================= */

.btn{
    padding:14px 28px;
    border-radius:6px;
    text-decoration:none;
    transition:.3s;
    display:inline-flex;
    align-items:center;
    gap:10px;
}

.btn-primary{
    background:var(--primary);
    color:#F5F1E8;
}

.btn-primary:hover{
    transform:translateY(-3px);
}

.btn-secondary,
.btn-outline{

    border:1px solid var(--gold);
    color: var(--gold);
}

.btn-secondary:hover,
.btn-outline:hover{

    background:var(--gold);
    color:#F5F1E8;

}

.accueil{
    position: relative;
}

.layout{
    display: grid;

    grid-template-columns: 90px 1fr;
    grid-template-rows:auto 1fr;
    transition: grid-template-columns 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* ease fluide */

    align-content: center;
}

/* ÉTAT SCROLLÉ : On dit au layout de passer à 1 colonne */
.layout.scrolled {
    grid-template-columns: 1fr;
}

/* Quand on scroll, on cache la sidebar */
.layout.scrolled .social-sidebar {
    opacity: 0;
    transform: translateX(-100%); /* elle sort au lieu de disparaître sec */
    pointer-events: none;
}

.layout.scrolled .navbar {
    position: fixed; /* 2. Navbar sort du grid */
    top: 0;
    left: 0;
    width: 100%; /* 3. Navbar prend 100% */
    grid-column: unset;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Le hero reste en grid-column: 2 donc il aura toujours 90px de vide à gauche */
body.has-fixed-nav {
    padding-top: 80px; /* Pour éviter le saut */
}

.section-header{
    margin-bottom:60px;
}

/* ========================= */
/* NAVBAR */
/* ========================= */

.navbar{
    position: sticky;
    top: 0;
    z-index: 100;

    grid-column: 2;
    grid-row: 1;

    height: 80px;

    padding:25px 2%;
    background-color:#d8d1c9;

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: position, width, box-shadow; /* perf */

    display:flex;
    justify-content:space-between;
    align-items:center;
}

/* 2. NAVBAR ÉTAT FIXE : Quand on scroll */
.navbar.fixed {
    position: fixed; /* Elle sort du grid et se colle en haut */
    top: 0;
    left: 0;
    width: 100%; /* Prend 100% */
    grid-column: unset; /* On annule le grid */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* REMPLACE PAR ÇA : un placeholder invisible */
.navbar-placeholder {
    height: 0;
    transition: height 0.4s ease;
}
.layout.scrolled .navbar-placeholder {
    height: 80px; /* prend la place de la navbar quand elle devient fixed */
}

.logo{
    color:#0f172a;
    font-family:'Playfair display', serif;
    margin:0;
    line-height:1;

    display:flex;
    align-items:center;
    font-size:30px;
    font-weight:100;
}

.logo span{
    color: #b89247;
    font-size: 50px;
    display:inline-flex;
    align-items:center;
    position:relative;
    top:-8px;
    line-height:1;

    margin-left:2px;
}

.theme-btn{
    position: relative;
    width:45px;
    height:45px;
    border-radius:50%;

    border:none;

    background:none;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;
}

.theme-btn svg{
    position: relative;
    width:22px;
    height:22px;

    color:#b89247;

    stroke-width:2;

    fill:none;
}

.nav-links {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-items:center;
    justify-items:center;
    position: relative;
}

.nav-links a {
    position: relative;
    color: #0f172a;
    font-size: 15px;
    text-decoration: none;
    white-space: nowrap;
    z-index: 2;
}

/* lien actif (couleur seulement) */
.nav-links a.active {
    color: #b89247;
}

/* INDICATEUR GLISSANT */
.indicator {
    position: absolute;
    bottom: -6px;
    left: 0;
    height: 2px;
    width: 0;
    background: #b89247;
    transition: all 0.3s ease;
    border-radius: 2px;
    transition: left 0.3s ease, width 0.3s ease, bottom 0.3s ease;
    pointer-events: none;
}

.hamburger {
  display: none; /* caché sur PC */
  font-size: 28px;
  color: #b89247;
  background: none;
  border: none;
  cursor: pointer;
}

/* ========================= */
/* SIDEBAR */
/* ========================= */

.social-sidebar {

    grid-column: 1;
    grid-row: 1 / span 2;

    position: sticky;
    top: 0;
    height: 100%;

    background:#9ca2a8;

    border-right: 1px solid rgba(184, 146, 71, 0.35);
    border-bottom: 1px solid rgba(184, 146, 71, 0.35);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.social-sidebar a {
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.social-sidebar a:hover{

    transform:
    translateY(-8px)
    scale(1.15);

    box-shadow:
    0 0 30px rgba(184,146,71,.35);

}

.social-sidebar i {
    font-size: 18px;
    color: var(--primary);
}

.social-sidebar * {
    position: relative;
    z-index: 2;
}

/* ========================= */
/* HERO */
/* ========================= */

.hero{
    grid-column: 2;
    grid-row: 2;
    background-color:#d8d1c9;
    border-bottom:1px solid rgba(184,146,71,0.35);
    top: 10%;
    display:grid;
    grid-template-columns: 40% 60%;

    align-items:start;
}

.hero h1{
    font-family: 'Playfair display', serif;
    font-size:40px;
    font-weight:100;
    line-height:1.1;

    margin:15px 0;
}

.hero h2{
    font-family: 'Playfair display', serif;
    font-size:50px;
    font-weight:100;
    line-height:1.1;

    margin:15px 0;
}

.hero-left{
    padding-left:4%;
    margin-bottom: 10px;
}

.hero-left h2 span{
    font-size: 48px;
    font-style: italic;
}

.hero-left span{
    color:var(--gold);
}

.hero-left .separator {
    position: center;
    width: 80px;
    height: 1px;
    background: #b89247;
    margin-bottom: 20px;
}

.hero p{
    color: var(--primary);
    font-size:16px;
    font-weight:500;
    max-width:600px;
}

.hero-buttons{
    display:flex;
    gap:20px;
    margin-top:15px;
    font-size:12px;
}

.hero-right{
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-decoration{
    position:absolute;
    height: 100%;
    width: 100%;
    right: 10%;
    pointer-events:none;
}

.hero-image1{
    position: relative;
    height:100%;
    width:100%;
    z-index:1;
    border-radius: 250px 0 0 250px;
}

.hero-image2{
    position:absolute;

    width:53%;
    height:100%;

    top:50%;
    left:35%;

    transform:translate(-50%, -50%);

    z-index:2;

}

.shape-decor{
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid #b89247;
    border-radius: 300px 160px 160px 300px;
    opacity: 0.7;
    z-index: 1;
}

.shape-line1 {
    position: absolute;
    top: 14%;
    left: 0%;
    width: 150px;
    height: 1px;
    background: rgba(184, 146, 71, 0.35);
}

.hero-code {
    position: absolute;
    top: 12.5%;
    left: 1%;
    font-size: 11px;
    color: rgba(184, 146, 71, 0.35);
    font-family: 'Courier New', monospace;
    white-space: pre-line;
    z-index: 3;
}

.shape-line2 {
    position: absolute;
    top: 25%;
    left: 2.5%;
    width: 140px;
    height: 1px;
    background: rgba(184, 146, 71, 0.35);
}

.shape-dots {
    position: absolute;
    transform: translateY(-50%);
    pointer-events: none;
    user-select: none;
    filter: blur(0.2px);
    mix-blend-mode: multiply;
    opacity: 0.9;

    z-index: 1;
}

.hero-right svg {
    position: absolute;
    top: 43%;
    left: -2%;
    overflow: visible;
    z-index: 1;
}

.typing-code{
    position:absolute;

    top:7%;
    right:24%;
    max-width:300px;

    font-size:clamp(9px, 1vw, 11px);

    line-height:1.7;

    color:#b89247;

    font-family:'Courier New', monospace;

    z-index:3;

    white-space: pre-wrap;
    overflow: hidden;
}

.typing-code::after{
    content: "|";
    color: #B89247;
    animation: blink .8s infinite;
}

@keyframes blink{

    50%{
        opacity:0;
    }

}


.hero-image {
    position: absolute;
    top: 81%;
    right: 16%;
    width:clamp(60px, 8vw, 90px);
    z-index: 2;
}

/* ========================= */
/* STACK */
/* ========================= */

.stack{
    background:#d8d1c9;
    border-bottom:1px solid rgba(184, 146, 71, 0.35);
    padding-top:20px;
}

.stack-title{
    position:relative;
    font-size:30px;
    height: 10px;
    display:flex;
    align-items:center;
    gap:20px;
    justify-content:center;
}

.stack-title span{
    position:relative;
    font-size:10px;
    font-weight:700;
    bottom: 5px;
    color:var(--primary);
}

.stack-title .separator{
    position: relative;
    top: 50%;
    width: 580px;
    height: 1px;
    background: rgba(184, 146, 71, 0.35);
    margin-bottom: 20px;
}

.stack-grid{
    padding:10px 0 15px 35px;

    display:flex;
    gap:55px;

    overflow-x:auto;
    overflow-y:hidden;

    scroll-behavior:smooth;

    scrollbar-width:none;
}

.stack-grid::-webkit-scrollbar{
    display:none;
    opacity:0;
    transform:translateY(40px);
    transition:0.6s ease;
}


/* STACK ITEMS */

.stack-item{

    position:relative;
    overflow:hidden;

    display:flex;
    width:8%;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    aspect-ratio:1 / 1;
    padding:20px;

    border:1px solid rgba(184,146,71,.15);

    background:rgba(255,255,255,.03);

    border-radius:15px;

    cursor:pointer;

    transition:
    transform .4s ease,
    border-color .4s ease,
    box-shadow .4s ease,
    color .4s ease;

    
    opacity: 0;

    transform:
        translateX(80px)
        rotate(-8deg);

    will-change: transform, opacity;
    flex:0 0 auto;

}

.stack-item span{

    font-size:15px;

    font-weight:15px;

    color:#94a3b8;

}

/* Reflet */

.stack-item::before{

    content:"";

    position:absolute;

    top:-100%;
    left:-50%;

    width:60%;
    height:300%;

    background:
    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.25),
        transparent
    );

    transform:rotate(25deg);

    transition:.7s ease;

}

/* Hover */

.stack-item:hover{

    transform:translateY(-10px);

    color:var(--primary);

    border-color:var(--primary);

    box-shadow:
    0 15px 35px rgba(184,146,71,.18);

}

.stack-item:hover::before{

    left:120%;

}

/* Icônes */

.stack-item i{

    color:var(--primary);
    font-size: 30px;

    transition:
    transform .4s ease,
    filter .4s ease;

}

.stack-item:hover i{

    transform:scale(1.15);

    filter:
    drop-shadow(0 0 12px rgba(184,146,71,.7));

}

.stack-item.show{
    opacity:1;
    transform: translateX(0);
}

/* ========================= */
/* WORK */
/* ========================= */

.work{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;

    padding:20px 0;

    border-bottom:1px solid rgba(184,146,71,.35);
}


/* ========================= */
/* STATS */
/* ========================= */

.stats{

    position:relative;

    margin-left:35px;

}

.stats-header{

    margin-bottom:45px;

}

.stats-header .section-tag{

    color:var(--gold);
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;

}

.stats-header h2{

    margin-top:10px;
    margin-bottom:18px;

    font-family:'Playfair Display',serif;
    font-size:40px;
    font-weight:100;

    color:var(--primary);

}

.stats-header p{

    color:#5d6575;
    font-size:14px;
    line-height:1.8;

}

.stats-list{

    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:18px;

}

.stat-item{

    display:flex;
    align-items:center;
    gap:15px;

    padding:18px;

    border-radius:24px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(184,146,71,.35);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.stat-item:hover{

    transform:translateY(-6px);

    border-color:rgba(184,146,71,.6);

    box-shadow:0 18px 45px rgba(15,23,42,.08);

}

.stat-icon{

    width:58px;
    height:58px;

    border-radius:18px;

    background:#f5ebdb;

    color:var(--gold);

    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;

}

.stat-icon svg{

    width:75%;
    height:75%;

}

.stat-content{

    display:flex;
    flex-direction:column;

}

.stat-content h3{

    font-size:34px;

    color:var(--primary);

    font-weight:700;

    line-height:1;

}

.stat-content span{

    margin-top:6px;

    color:#666;

    font-size:13px;

}

/* ========================= */
/* PROJECTS */
/* ========================= */

.projects {
    min-width:0;
    position: relative;
}

.projects-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin: 0px 35px 10px 35px;

    position: relative;
    z-index: 1;
}

.projects-top .projects-subtitle{
    color:var(--gold);
    font-size:10px;
    font-weight:700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.projects-top h2{
    font-family: 'Playfair display', serif;
    font-weight:100;
    color: var(--primary);
    font-size:40px;
}

.projects-link{
   
    all: unset;

    display:inline-flex;
    align-items:center;
    gap:5px;

    cursor:pointer;

    color:var(--primary);

    font-size:12px;
    font-weight:700;

    transition:color .3s ease;
}

.projects-link:hover{
    color:var(--gold);
}

.projects-link i{
    color:var(--gold);
}

.projects-slider {
    position: relative;
    padding-left: 60px;
    padding-right: 38px; /* AJOUTE ÇA pour symétrie */
}

.projects-grid {
    display: flex;
    gap: 40px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    
    padding-bottom: 20px;
}

.projects-grid::-webkit-scrollbar {
    display: none;
}

.project-card {
    position: relative;
    opacity: 0;
    transform: translateY(60px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.22,1,.36,1);

    border-radius: 30px;
    overflow: hidden;

    background: rgba(255,255,255,.03);
    border: 1px solid rgba(184, 146, 71, 0.35);
    text-decoration: none;
    flex: 0 0 300px;

    z-index: 2;
    scroll-snap-align: start;
}

.project-card.show{
    opacity: 1;
    transform: translateY(0);
}


.project-card:hover {
    transform: translateY(-12px) scale(1.03);
    z-index: 3;
}

.project-card::before{

    content:"";

    position:absolute;

    width:250px;
    height:250px;

    border-radius:50%;

    background:radial-gradient(
        rgba(255,255,255,.15),
        transparent 70%
    );

    pointer-events:none;

    opacity:0;

    transform:translate(-50%,-50%);

    transition:opacity .3s;

    left:var(--x);
    top:var(--y);

}

.project-card:hover::before{

    opacity:1;

}

.project-image{
    overflow:hidden;
}

.project-image img{

    transition:transform .6s ease;

}

.project-card:hover img{

    transform:scale(1.08);

}

.project-tags{

    display:flex;
    gap:5px;
    margin-top:15px;
    margin-bottom:20px;
}

.project-tags span{

    padding:6px 14px;

    border-radius:999px;

    background:#f1dfba;

    font-size:9px;

    transition:
        transform .3s ease,
        background .3s ease;
}

.project-card:hover .project-tags span{

    transform:translateY(-3px);

}

.project-content{
    padding:20px;
}

.project-content p{
    color:var(--primary);
    font-size:14px;
    line-height:1.6;
}

.project-content h3{
    font-family: 'Playfair display', serif;
    font-weight:500;
    margin-bottom:15px;
    color:var(--primary);
}

.projects-link{
color:var(--primary);
    text-decoration:none;
    font-size:12px;
    font-weight:700;
    display:inline-flex;
    align-items:center;
    gap:5px;
}

.projects-link:hover{
    color:var(--gold);
}

.projects-link i{
    color:var(--gold);
}

/* CONTENEUR FLECHES */
.fleches {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 4;
}

/* BOUTON FLECHE - CERCLE DORÉ PLEIN */
.fleches span {
    position: relative; /* Le parent doit être relative */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #b89247;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2000;
    pointer-events: auto;
}

.fleches span::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #b89247;
    border: 1.5px solid #E8DCC4;
    transition: all 0.3s ease;
    pointer-events: none;
}

/* POSITION : On les centre sur le padding de 35px */
.fleches span:first-child {
    margin-left: 12px; /* 35px - 46px/2 = 12px */
}
.fleches span:last-child {
    margin-right: 12px;
}

/* ICONE */
.fleches span i {
    position: relative;
    z-index: 2000;
    font-size: 15px;
    font-weight: 900;
    transition: transform 0.3s ease;
}

/* HOVER */
.fleches span:hover {
    background: #a17e3a; /* Doré un peu plus foncé */
    box-shadow: 0 8px 25px rgba(184, 146, 71, 0.45);
    transform: scale(1.08);
}
.fleches span:hover::before {
    border-color: #a17e3a; /* La bordure devient doré foncé = effet "plein" */
    background: #a17e3a;
}

/* ANIMATION FLECHE */
.fleches span:hover i {
    transform: translateX(2px);
}
.fleches span:first-child:hover i {
    transform: translateX(-2px);
}

/* DESACTIVE */
.fleches span.disabled {
    opacity: 0.3;
    pointer-events: none;
}

.projects-grid.modal-grid{
    flex:1;
    min-height:0;

    overflow-y:auto;

    display:grid;
    grid-template-columns:repeat(2,minmax(48%,1fr));

    gap:35px;

    padding:35px;

    overflow-x:hidden;

    scroll-snap-type:none;

    padding:35px;
}

.modal-grid .project-card{

    flex:initial;

    width:100%;

    max-width:none;

}

.modal-grid .project-card.hide{

    opacity:0;

    transform:scale(.95);

    pointer-events:none;

    transition:.3s ease;

}

.modal-grid .project-card.show{

    opacity:1;

    transform:scale(1);

}

.modal-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.55);
    backdrop-filter:blur(6px);

}

/* ========================= */
/* HEADER */
/* ========================= */

.modal-header{

    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 25px 40px 15px;

    border-bottom: 1px solid rgba(184,146,71,.15);

}

.modal-header > div{

    text-align: center;

}

.modal-header h2{

    font-family: 'Playfair Display', serif;
    font-size: 42px;
    font-weight: 500;
    color: var(--primary);

    margin-bottom: 10px;

}

.modal-header p{

    color: #6b7280;

    font-size: 14px;
    line-height: 1.7;

}

.modal-close{

    position: absolute;

    top: 25px;
    right: 30px;

    width: 42px;
    height: 42px;

    border: none;
    background: transparent;

    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;

    color: var(--primary);

    border-radius: 50%;

    transition: .3s ease;

}

.modal-close:hover{

    background: rgba(184,146,71,.08);

    color: var(--gold);

    transform: rotate(90deg);

}

.modal-close i{

    width: 22px;
    height: 22px;

}

/* ========================= */
/* FILTRES */
/* ========================= */

.modal-filters{

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    gap: 14px;

    padding: 22px 35px 30px;

}

.modal-filters button{

    padding: 10px 22px;

    border-radius: 12px;

    border: 1px solid rgba(184,146,71,.35);

    background: #eae2d9;

    color: var(--primary);

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;

    transition: .3s ease;

}

.modal-filters button:hover{

    border-color: var(--gold);

    color: var(--gold);

    transform: translateY(-2px);

}

.modal-filters button.active{

    background: var(--primary);

    color: #eae2d9;

    border-color: var(--primary);

}

.modal-empty{

    display:none;

    text-align:center;

    padding:80px 20px;

    color:#8b8b8b;

}

.modal-empty i{

    width:70px;
    height:70px;

    color:var(--gold);

    margin-bottom:20px;

}

.modal-empty h3{

    font-family:'Playfair Display',serif;

    color:var(--primary);

    font-size:28px;

    margin-bottom:10px;

}

.modal-empty p{

    font-size:15px;

    line-height:1.7;

}

.modal-container{

    width:75%;
    height:100%;

    background:#eae2d9;

    border-radius:30px;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    position:relative;

}

.modal-projects{
    min-height:0;

    flex:1;

    overflow-y:auto;

    padding:0 35px 35px;

}

.projects-modal{

    position:fixed;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    background:rgba(15,23,42,.45);
    backdrop-filter:blur(10px);

    opacity:0;
    visibility:hidden;

    transition:.35s ease;

    z-index:9999;

}

.projects-modal.show{

    opacity:1;
    visibility:visible;

}

body.modal-open{

    overflow:hidden;

}

.modal-grid .project-card .badge{
    right: -78%;
}

.youtube-logo {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.youtube-logo i{
    position: relative;

    color:red;
    fill:red;
    font-size: 235px;

}

.youtube-logo span {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* ========================= */
/* SKILLS */
/* ========================= */

.skills {
    display: grid;
    grid-template-columns: 0.7fr 1.6fr 0.7fr;
    grid-template-areas:
        "title title quote"
        "skills right quote";
    padding: 30px;
    align-items: stretch;
}

.skills-title {
    grid-area: title;
    text-align: start;
    font-size: 30px;
    margin-bottom: 10px;
    height: 10px;
    display: grid;
    grid-template-columns: 180px 1fr;
    margin-top:20px;
}

.skills-title span{
    font-family: 'Playfair display', serif;
    position:relative;
    font-size:18px;
    font-weight:500;
    top: 2px;
    color:var(--primary);
}

.skills-title .separator{
    position: relative;
    top: 50%;
    left: 1%;
    width: 100%;
    height: 1px;
    background: rgba(184, 146, 71, 0.35);
    margin-bottom: 20px;
}

.skills-grid {
    grid-area: skills;
    margin-top: 10px;
    max-width: 400px;
    display: flex;
    flex-direction: column;
}

.skills-right {
    grid-area: right;
    margin-top: 10px;
}

.quote-card {
    grid-area: quote;
    margin-top: 20px;
    height: 100%;
    width: 100%;
    align-self: start;
}

.skills-grid,
.skills-right{
    width: 100%;
}

.skills-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
        "skills right"
        "quote quote";
    gap: 30px;
    align-items: stretch;
}

.skills-grid .section-subtitle {
    display: block;

    margin-bottom: 25px;

    color: #8b8b8b;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;
    text-transform: uppercase;
}

.skill {
    margin-bottom: 10px;
    
}

.skill-top {
    display: grid;
    grid-template-columns: 1.2fr 1fr 0.8fr;
    justify-content: center;
    align-items: center;

    margin-bottom: 8px;

    font-size: 11px;
    font-weight: 600;

    color: #0f172a;
}

.skill-top span:last-child {
    color: #7c8798;
    font-size: 10px;
    margin-left: 10px;
}

.skill-bar {
    width: 120px;
    height: 4px;
    border-radius: 2px;

    background:#94a3b8;

    overflow: hidden;
}

.skill-progress {
    height: 100%;
    width:0%;
    background: #0f172a;

    border-radius:2px;

    transition: width 1.5s ease;
}

.w95 { width: 95%; }
.w90 { width: 90%; }
.w85 { width: 85%; }
.w80 { width: 80%; }
.w75 { width: 75%; }

.skills-right{
    display:grid;
   border-left: 1px solid rgba(184, 146, 71, 0.35);
   padding-left: 20px;
}

.expertises{
    width:100%;
}

.expertise-grid{
    display:grid;

    grid-template-columns: 1fr 1px 1fr;
    grid-template-rows: 10px;
    grid-template-areas:
        "title title title"
        "column1 divider column2";

    gap:20px;
    align-items:start;
}

.expertise-subtitle{
    grid-area: title;
    display: grid;
    color: #8b8b8b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.expertise-divider{
    grid-area: divider;

    width:1px;

    background: rgba(184, 146, 71, 0.35);

    justify-self:center;
    align-self:stretch;
}

.expertise-column1{
    grid-area: column1;
    display:flex;
    flex-direction:column;
    gap:25px;

    width:100%;
}

.expertise-column2{
    grid-area: column2;
    display:flex;
    flex-direction:column;
    gap:25px;

    width:100%;
}

.expertise-column{
    display:flex;
    flex-direction:column;
    gap:35px;
}

.expertise-item{
    display:flex;
    align-items:flex-start;
    gap:9px;

    width:100%;

    opacity: 0;
    transform: translateY(40px);

    transition:
        transform .35s ease,
        background .35s ease,
        box-shadow .35s ease;

}

.expertise-item:hover{

    box-shadow:
        0 15px 35px rgba(184,146,71,.12);

}

.expertise-item.show{

    opacity: 1;
    transform: translateY(0);

}

.expertise-item:hover h4{

    transform:
        translateX(6px);

    color:#B89247;

}

.expertise-icon{
    font-size:25px;
    color:var(--primary);
    margin-top:5px;
    transition:
        transform .4s ease,
        color .4s ease;
}

.expertise-item:hover .expertise-icon{

    transform:
        rotate(-10deg)
        scale(1.15);

    color:#B89247;

}

.expertise-content{
    display:flex;
    flex-direction:column;
    margin-left:20px;
}

.expertise-content h4{
    font-size:12px;
    font-weight:700;
    margin-bottom:8px;
    color:#1d1d1d;

    transition:
        transform .3s ease,
        color .3s ease;
}

.expertise-content p{
    font-size:10px;
    line-height:1.8;
    color:#5e5e5e;

    transition:
        transform .3s ease,
        opacity .3s ease;
}

.expertise-item:hover p{

    transform:
        translateX(6px);

}

.quote-card{
    --size: 300px;

    width: var(--size);
    height: var(--size);
    aspect-ratio: 1 / 1;

    position: relative;
    overflow: hidden;

    background-image: url("images/quote.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border: 1px solid rgba(184, 146, 71, 0.35);
    border-radius: 10px;

    display: flex;
    flex-direction: column;
    top: 3%;

    justify-self: end;
    justify-content: center;

    animation:
    floatingQuote 6s ease-in-out infinite;
}

@keyframes floatingQuote{

    0%,100%{

        transform:
        translateY(0);

    }

    50%{

        transform:
        translateY(-10px);

    }

}

.quote-icon{
    color:var(--gold);
    font-size:16px;
    line-height:1.6;
    padding-left:20px;
    display: block;
}

.quote-card p, 
.quote-card span{
    color:var(--gold);
    font-size:14px;
    line-height:1.6;
    padding:20px;
    font-style: italic;
}

.quote-card p{
    font-family: 'Playfair display', serif;
    font-size:20px;
    font-weight:280;
}

/* ========================= */
/* PARCOURS */
/* ========================= */

.experience {
    margin: 0 auto;
    padding: 0 30px;
}

.experience-title{
    display: grid;
    grid-template-columns: 0.2fr 1.8fr;
    gap: 1px;
    margin-bottom: 10px;
}

.experience-title h2{
    font-family: 'Playfair display', serif;
    position:relative;
    font-size:23px;
    font-weight:500;
    color:var(--primary);
}

.experience-title .separator{
    position: relative;
    top: 50%;
    left: 1%;
    width: 100%;
    height: 1px;
    background: rgba(184, 146, 71, 0.35);
}

.experience-grid {
    display: grid;
    grid-template-columns: 0.2fr 1.8fr 1.8fr 0.2fr;
    gap: 10px;
}

.col{

    opacity: 0;
    transform: translateY(60px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.22,1,.36,1);

}

.col.show{

    opacity: 1;
    transform: translateY(0);

}

.col-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}

.col-header h3 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #8b8b8b;
    margin: 0;
}

.experience-pro .col-header {
    justify-content: space-between;
}

.experience-pro .item{

    transform: translateX(40px);

}

.icon-circle {
    position: relative;
    width: 60px;
    height: 60px;
    top: 10%;
    border-radius: 50%;
    background: #9ca2a8;
    display: grid; /* grid centre mieux que flex pour les SVG */
    place-items: center;
    color: #101c32;
    line-height: 0; /* coupe le décalage vertical */
    flex-shrink: 0;
    
    opacity: 0;

    transform:
        scale(.2)
        rotate(-180deg);

    transition:
        opacity .5s ease,
        transform .9s cubic-bezier(.175,.885,.32,1.35);

}

.icon-circle.show{

    opacity: 1;
    transform:
            scale(1)
            rotate(0deg);
    animation:
            iconPop 1s cubic-bezier(.175,.885,.32,1.35) forwards;
}

.icon-circle svg {
    position: static;
    width: 32px;
    height: 32px;
    display: block;
}

@keyframes iconPop{

    0%{

        opacity:0;

        transform:
            scale(.1)
            rotate(-270deg);

    }

    60%{

        opacity:1;

        transform:
            scale(1.2)
            rotate(20deg);

    }

    80%{

        transform:
            scale(.92)
            rotate(-5deg);

    }

    100%{

        opacity:1;

        transform:
            scale(1)
            rotate(0);

    }

}

.item {
    position: relative; /* ça manquait */
    margin-bottom: 32px;
}

.item::before {
    content: '';
    position: absolute;
    left: -29px;
    top: 4px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #faf8f5;
    border: 2px solid #8b7355;
}

.timeline {
    position: relative;
    padding-left: 32px;
}

.timeline .item{

    opacity: 0;
    transform: translateX(-40px);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.timeline .item:hover{

    transform:
        translateY(-8px);

    border-color:#B89247;

    box-shadow:
        0 15px 35px rgba(184,146,71,.15);

}

.timeline .item.show{

    opacity: 1;
    transform: translateX(0);

}

.timeline::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: rgba(184, 146, 71, 0.35);
}

.item {
    position: relative;
    margin-bottom: 32px;
}

.item::before {
    content: '';
    position: absolute;
    left: -29px;
    top: 4px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #faf8f5;
    border: 2px solid #8b7355;
}

.date {
    font-size: 13px;
    color: #8b8b8b;
    font-weight: 500;
    display: block;
    margin-bottom: 6px;

    transition:
        letter-spacing .3s ease,
        color .3s ease;
}

.item:hover .date{

    color:#B89247;

    letter-spacing:1px;

}

.item h4 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: #2d2d2d;
    transition:
        transform .3s ease,
        color .3s ease;
}

.item:hover h4{

    transform:translateX(8px);

    color:#B89247;

}

.school, .company {
    font-size: 14px;
    color: #6b6b6b;
    margin: 0 0 8px 0;
}

.desc {
    font-size: 14px;
    line-height: 1.6;
    color: #6b6b6b;
    margin: 0;
}

/* ========================= */
/* ABOUT */
/* ========================= */

.about{
    height:100%;
    background:#d8d1c9;
    display:grid;
    grid-template-columns:1fr 0.9fr 1.1fr;
    align-items:center;
}

.about > *{

    opacity: 0;
    transform: translateY(50px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.22,1,.36,1);

}

.about > *.show{

    opacity: 1;
    transform: translateY(0);

}

.about-image {
    -webkit-mask-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 1) 60%,
        rgba(0, 0, 0, 0) 100%
    );

    mask-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 1) 60%,
        rgba(0, 0, 0, 0) 100%
    );
}

.about-image img{
    width:100%;
    height: 250px;
    display: flex;
}

.about-content a i{

    transition:
        transform .3s ease;

}

.about-content a:hover i{

    transform:
        translateX(8px);

}

.about-content h2{
    font-family: 'Playfair display', serif;
    font-size:30px;
    font-weight:100;
    color: var(--primary);
    margin-bottom:15px;
}

.about-content p{
    color:var(--primary);
    font-size:13px;
    line-height:1.6;
}

.about-content .section-subtitle,
.about-content a{
    color:var(--gold);
    font-size:10px;
    font-weight:700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.about-card{
    position:relative;

    display:flex;
    flex-direction:column;
    justify-content:center;

    background-image:url("images/about.png");
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;

    gap:20px;
    margin:15px 0;

    width:100%;
    max-width:450px;

    aspect-ratio:5 / 2;

    border-radius:10px;
    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
   
    animation:
        breathe 4s ease-in-out infinite;

}

@keyframes breathe{

    0%,100%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.015);

    }

}

.about-card::before{

    content:"";
    position:absolute;
    inset:0;

    background:rgba(110,110,110,.2);

    backdrop-filter:grayscale(80%);

    transition:
        background .35s ease,
        backdrop-filter .35s ease;

    z-index:1;

}

.about-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 20px 40px rgba(184,146,71,.18);

}

.about-card:hover::before{

    background: rgba(110,110,110,.14);
    backdrop-filter: grayscale(60%);

}

.about-card > *{
    position:relative;

    margin-left:30px;
    z-index:2;
}

.about-card h3{
    font-size:14px;
    font-weight:500;
    color:var(--primary);
    z-index: 10;
}

.about-card p{
    font-size:12px;
    line-height:1.6;
    color:var(--primary);
    z-index: 10;
}

.about-card .btn {
    width: 190px;
    padding: 14px 28px;
    border-radius: 6px;
    text-decoration: none;
    transition: .3s;
    align-items: center;
    gap: 10px;

    animation:
    pulse 2.8s infinite;

    transition:
        transform .3s ease;
}

.about-card:hover .btn{

    transform:
        scale(1.05);

}

@keyframes pulse{

    0%{

        box-shadow:
        0 0 0 0 rgba(15,23,42,.45);

    }

    70%{

        box-shadow:
        0 0 0 18px rgba(15,23,42,0);

    }

    100%{

        box-shadow:
        0 0 0 0 rgba(15,23,42,0);

    }

}

.btn-mobile,
.about-img-mobile{
    display: none;
}

/* ========================= */
/* CONTACT */
/* ========================= */

.contact{

    text-align:center;
}

.contact h2{

    font-size:56px;
    max-width:800px;

    margin:auto auto 40px;
}

/* ========================= */
/* FOOTER */
/* ========================= */

/* Animation d'apparition */

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


.reveal.active{

    opacity: 1;
    transform: translateY(0);

}

.footer{
    background-image:url("images/footer.png");
    background-size:cover;
    background-position:bottom;
    background-repeat:no-repeat;

    padding:20px 4%;

    border-top:1px solid var(--border);

    display:grid;

    grid-template-columns:
        1fr 0.8fr 0.9fr 1.1fr;

    grid-template-areas:
        "brand contact socials quote";

    align-items:center;
}

.footer > *{
    border-right:1px solid rgba(184, 146, 71, 0.35);
}

.footer > *:last-child{
    border-right:none;
}

/* Animation du logo */

.footer-brand{
    grid-area:brand;
    line-height:1;

    align-items:center;
    transition-delay:.1s;
}


.footer-brand p{
    font-size: 11px;
    margin-top: 5px;
}

.footer-brand h6{
    color:#94a3b8;
    font-size: 10px;
    font-weight: 400;
    margin-top: 10px;
}

.footer-brand h2{
    position: relative;
    display: inline-block;

    color:#eae2d9;
    font-family:'Playfair display', serif;
    margin:0;
    line-height:1;

    align-items:center;
    font-size:30px;
    font-weight:100;
}

.footer-brand h2 span{
    color: #b89247;
    font-size: 30px;
    font-weight:10;

    animation: glow 2s infinite alternate;
}

@keyframes glow{

    from{

        text-shadow:
        0 0 5px rgba(184,146,71,.3);

    }


    to{

        text-shadow:
        0 0 20px rgba(184,146,71,.9);

    }

}

.footer-contact{
    position: relative;
    grid-area:contact;
    justify-content:center;

    color:#d1cdc9;
    font-size:10px;
    font-weight:500;
    left: 10%;

    transition-delay:.3s;
}

.footer-contact h4{
    color:#d1cdc9;
    font-size:10px;
    font-weight:500;
    margin-bottom: 10px;
}


/* Animation des éléments contact */

.contact-item{
    display:flex;
    align-items:center;
    gap:10px;

    transition:
    transform .3s ease;

}

.contact-item:hover{

    transform: translateX(10px);

}

.contact-item i{

    transition:.3s ease;

}

.contact-item:hover i{

    color:#b89247;

    transform:scale(1.2);

}

.footer-socials{
    position: relative;
    left: 21%;
    grid-area:socials;
    justify-content:center;
    align-self:center;
    display:flex;
    flex-direction:column;
    gap:10px;

    transition-delay:.5s;
}

.footer-socials h4{
    margin-bottom: 10px;
    color:#d1cdc9;
    font-size:10px;
    font-weight:500;
}

/* Animation des icônes sociales */

.social-icons a{
    width:45px;
    height:45px;

    border-radius:50%;

    border:1px solid var(--border);

    display:flex;
    align-items:center;
    justify-content:center;

    color:white;
    text-decoration:none;

    transition:
    transform .4s ease,
    background .4s ease,
    color .4s ease;

}

.social-icons a:hover{

    transform: translateY(-8px) rotate(5deg);

    color:#b89247;

}

.social-icons{
    display:flex;
    align-items:center;
    gap:15px;
}


/* Citation finale */

.footer-quote{
    position: relative;
    max-width: fit-content;
    left: 30%;
    grid-area:quote;
    color:#d1cdc9;
    font-size:12px;

    overflow:hidden;
    transition-delay:.7s;
}

.quote-text{
    font-family: 'Playfair display', serif;
    font-size:14px;
    font-weight:500;
    font-style: italic;
    white-space: pre-line;
    max-width:400px;

    line-height:1.8;

    color:#94a3b8;

}

.quote-author{
    display:block;
    margin-top: 10px;
    font-family: 'Great Vibes', cursif;
    font-size:30px;
    font-weight:0;
    color:#94a3b8;
    font-style: italic;

    opacity:0;

    transform:translateY(10px);

    transition:
    opacity .8s ease,
    transform .8s ease;

}

.quote-author.show{

    opacity:1;

    transform:translateY(0);

}

/* ========================= */
/* RESPONSIVE */
/* ========================= */

/* DESKTOP */
@media (min-width: 1441px) and (max-width: 2560px){
    .hero-image1 {
        border-radius: 327px 0 0 327px;
    }

    .footer-quote {
        width: 50%;
    }

    .quote-author{
        width: 50%;
    }
}
@media (min-width: 1400px) and (max-width: 1440px) {
    .hero-right svg {
        top: 45%;
    }

    .hero-code{
        font-size: 14px;
        top: 12%;
    }

    .shape-line2{
        top: 28%;
        left: 2.5%;
    }

    .about-card{
        left: 10%;
    }
}

@media (min-width: 1025px) and (max-width: 1200px) {
    .hero p {
        font-size: 15px;
    }

    .hero-right svg {
        top: 48%;
    }

    .hero-image1 {
        border-radius: 325px 0 0 325px;
    }

    .hero-image2 {
        position: absolute;
        width: 81%;
        left: 41.5%;
    }

    .hero-image {
        top: 87%;
        right: 3%;
    }

    .hero-right pre {
        top: 2%;
        right: 15%;
        font-size: 8px;
    }

    .shape-line1{
        top: 17%;
    }

    .hero-code {
        font-size: 12px;
        top: 16%;
        z-index: 1;
    }

    .shape-line2{
        top: 28%;
        left: 2.5%;
    }

    .skills{
        padding: 0 0 0 30px;
    }

    .about{
        height: 100%;
        grid-template-columns: 1fr 1fr 1fr;
    }

    .about-content h2{
        font-size: 25px;
    }

    .about-content p{
        font-size: 12px;
    }
}

@media (min-width: 769px) and (max-width: 1024px){
    .layout {
        grid-template-columns: 75px 1fr;
    }

    .logo{
        font-size: 25px;
    }

    .logo span{
        font-size: 40px;
        top: -6px;
    }

    .nav-links a {
        font-size: 13px;
    }

    .theme-btn svg {
        width: 20px;
        height: 20px;
    }

    .btn {
        padding: 14px 14px;
    }

    .hero h1 {
        font-size: 35px;
        margin: 13px 0;
    }

    .hero h2 {
        font-size: 45px;
        margin: 13px 0;
    }

    .hero-left span{
        color:var(--gold);
        font-size: 14px;
    }

    .hero-left .separator {
        margin-bottom: 15px;
    }

    .hero-left h2 span {
        font-size: 42px;
    }

    .hero p {
        font-size: 13px;
    }

    .hero-buttons {
        font-size: 10px;
    }

    .hero svg {
        top: 41%;
        left: -5%;
    }

    .hero-image1 {
        width: 95%;
        left: 5%;
        border-radius: 325px 0 0 325px;
    }

    .hero-decoration{
        right: 2%;
    }

    .hero-image2 {
        position: absolute;
        width: 65%;
        left: 50%;
        border-radius: 0;
    }

    .hero-image {
        top: 87%;
        right: 3%;
    }

    .hero-right pre {
        top: 2%;
        right: 15%;
        font-size: 8px;
    }

    .shape-line1{
        top: 17%;
    }

    .hero-code {
        font-size: 10px;
        top: 15%;
        z-index: 1;
    }

    .shape-line2{
        top: 28%;
        left: 2.5%;
    }

    .skills-title {
        margin-top: 10px;
    }

    .skills-grid .section-subtitle {
        font-size: 8px;
        margin-bottom: 15px;
    }

    .skill-top {
        margin-bottom: 8px;
        font-size: 10px;
    }

    .skill-bar {
        width: 100px;
    }

    .skill-top span:last-child {
        font-size: 9px;
    }

    .expertise-subtitle {
        font-size: 8px;
    }

    .icon-circle {
        width: 55px;
        height: 55px;
        top: 7%;
    }

    .col-header {
        margin-bottom: 20px;
    }

    .col-header h3 {
        font-size: 9px;
    }

    .date {
        font-size: 11px;
        margin-bottom: 3px;
    }

    .item {
        margin-bottom: 20px;
    }

    .item h4 {
        font-size: 14px;
    }

    .school, .company, .desc {
        font-size: 12px;
    }

    .expertise-content h4 {
        font-size: 11px;
    }

    .expertise-content p {
        font-size: 9px;
    }

    .quote-card {
        height: 90%;
    }

    .about-content h2 {
        font-size: 29px;
        margin-bottom: 7px;
    }

    .about-content p {
        font-size: 10px;
    }

    .about-card {
        height: 80%;
        width: 90%;
        background-size:100% 100%;
    }

    .about-card h3 {
        font-size: 12px;
        font-weight: 500;
    }

    .about-card p {
        font-size: 12px;
        line-height: 1.4;
    }

    .about-card .btn {
        font-size: 11px;
        width: 50%;
    }

    .footer-quote {
        width: 85%;
    }

    .quote-text {
        font-size: 14px;
    }

    .quote-author{
        width: 85%;
        font-size: 25px;
    }
}


@media (max-width:992px){
    .work{

        grid-template-columns:1fr;
        gap:10px;

    }
    
    .modal-container{

        width:90%;
        height:90%;

    }

    .modal-header {
        padding: 30px 15px 25px;
    }

    .modal-header h2 {
        font-size: 30px;
    }

    .modal-header p {
        font-size: 12px;
    }

    .modal-filters {
        gap: 10px;
        padding: 12px;
    }

    .modal-filters button {
        padding: 7px 16px;
        font-size: 10px;
    }

    .modal-close {
        top: 5px;
        right: 5px;
    }

    .projects-grid.modal-grid{
        padding: 0;
        margin: 0;
    }

    .modal-grid .project-card {
        justify-self:center;
    }
    
    .modal-grid .project-card img{
        width: 100%;
    }

    .modal-grid .project-card .badge{
        right: -80%;
    }

    .projects-link {
        font-size: 9px;
    }

    .stats{

        margin:0 4px;

    }

    .stats-list{

        display:grid;

        grid-template-columns:repeat(2,1fr);

        gap:10px;

    }

    .stats-header {
        margin-bottom: 15px;
    }

    .stats-header .section-tag{
        font-size: 8px;
    }

    .stats-header h2 {
        margin-top: 0px;
        margin-bottom: 10px;
        font-size: 25px;
    }

    .stats-header p {
        font-size: 10px;
    }

    .stat-item{
        gap: 8px;
        padding: 9px;
    }

    .stat-icon {
        width: 45px;
        height: 45px;
    }

    .stat-content h3 {
        font-size: 26px;
    }

    .stat-content span {
        margin-top: 4px;
        font-size: 10px;
    }

}


/* Tablette */
@media (min-width: 426px) and (max-width: 1020px) {
    .badge{
        font-size: 9px;
        font-weight: 300;
        right: -185px;
    }

    .social-sidebar {
        display: none;
    }

    .layout{
        grid-template-columns: 1fr;
    }

    .logo{
        font-size: 20px;
    }

    .logo span{
        font-size: 40px;
    }

    .nav-links{
        width: 80%;
        margin: 10px;
        gap: 10px;
    }

    .nav-links a{
        font-size: 13px;
    }

    .theme-btn{
        position: relative;
        height: 35px;
        z-index: 101;
    }

    .theme-btn svg{
        position: relative;
        top: auto;
        left: auto;
        width: 18px;
        height: 18px;
        transform: none;

        z-index: 102;
    }

    .navbar {
        left: 0;
        height: 50px;
    }

    .hero p{
        font-size: 15px;
        max-width: 100%;
    }

    .hero-left .hero-subtitle{
        font-size: 12px;
    }

    .hero-left h1 {
        line-height: 1.1;
        font-size: 28px;
        margin: 5px 0;
    }

    .hero-left .hero-subtitle {
        font-size: 10px;
    }

    .hero-left h2, .hero-left h2 span {
        line-height: 1.1;
        font-size: 40px;
    }

    .hero-left h2{
        font-size: 35px;
        margin: 10px 0;
    }

    .hero-left h2 span{
        font-size: 35px;
    }

    .hero-left .separator {
        margin-bottom: 10px;
    }

    .hero-left p {
        font-size: 12px;
        line-height: 1.4;
    }

    .btn {
        padding: 10px 20px;
        gap: 10px;
    }

    .hero-buttons {
        display: flex;
        gap: 12px;
        font-size: 9px;
    }

    /* =========================
       IMAGE PRINCIPALE
    ========================= */

    .hero-image1 {
        position: relative;
        height: 100%;
        width: 95%;
        left: 5%;
        z-index: 1;
        border-radius: 290px 0 0 290px;
    }

    .hero-image2 {
        width: 70%;
        height: 100%;
        left: 43%;
        top: 50.5%;
    }

    /* =========================
       PRE CODE BLOCK
    ========================= */

    .hero-right pre{
        top: 10%;
        right: 14%;

        max-width: 240px;

        font-size: 8px;
    }

    /* =========================
       BADGE
    ========================= */

    .hero-image{
        right: 12%;
        width: 84px;
    }

    /* =========================
       DECOR TEXT
    ========================= */

    .hero-decoration {
       right: 4%;
    }

    .hero-code {
        top: 21%;
        left: -5%;
        font-size: 9px;
    }

    .shape-line1 {
        top: 22%;
        left: -7%;
        width: 120px;
    }

    .shape-line2 {
        top: 33%;
        left: -3%;
        width: 110px;
    }

    .hero-right svg {
        top: 36%;
        left: -5%;
    }

    svg {
        top: 40%;
        left: -5%;
        width: 85px;
        transform: rotate(0deg);
    }

    .stack-title span {
        font-size: 8px;
    }

    .stack-grid {
        gap: 35px;
    }

    .stack-item{
        padding: 5px;
    }

    .stack-item span {
        font-size: 10px;
    }

    .stack-item i{
        font-size: 25px;
    }

    .projects-top{
        margin: 10px 35px 10px 35px;
    }

    .projects-top .projects-subtitle{
        font-size: 8px;
    }

    .projects-top h2{
        font-size: 30px;
    }

    .projects-top a{
        font-size: 10px;
    }

    .projects-slider{
        padding-left: 20px;
    }

    .projects-grid{
        margin-left: 35px;
    }

    .project-card{
        flex: 0 0 250px;
    }

    .project-card img{
        width: 90%;
        justify-self: center;
    }

    .project-content h3{
        font-size: 16px;
    }

    .project-content p{
        font-size: 13px;
    }

    .project-tags span{
        font-size: 7px;
        padding: 4px 12px;
    }

    .youtube-logo i{
        
        font-size: 150px;

    }

    .youtube-logo span {
        font-size: 15px;
    }

    .fleches {
        gap: 12px;
        margin-top: 20px;
    }
    .fleches span {
        width: 40px;
        height: 40px;
    }
    .fleches span i {
        font-size: 16px;
    }

    .skills{
        padding: 0 0 0 15px;
    }

    .skills-title{
        font-size: 16px;
    }

    .skills-grid .section-subtitle{
        font-size: 8px;
        margin-bottom: 15px;
    }

    .skill{
        margin-bottom: 8px;
    }

    .skill-top{
        font-size: 9px;
    }

    .skill-bar{
        width: 100px;
    }

    .skill-top span:last-child {
        font-size: 8px;
        margin-left: 8px;
    }

    .skills-right{
        padding-left: 10px;
    }

    .expertise-subtitle{
        font-size: 8px;
        margin-bottom: 15px;
    }

    .expertise-icon{
        font-size: 20px;
    }

    .expertise-content h4 {
        font-size: 10px;
    }

    .expertise-content p {
        font-size: 8px;
    }

    .expertise-column1,
    .expertise-column2{
        gap: 15px;
    }

    .quote-card{
        --size: 230px;
        width: var(--size);
        align-self: center;
    }

    .quote-icon{
        font-size: 15px;
    }

    .quote-card p{
        font-size: 18px;
    }

    .quote-card span{
        font-size: 12px;
    }

    .experience {
        padding: 0 10px;
    }

    .experience-title h2 {
        font-size: 20px;
    }

    .experience-title .separator{
       top: 60%;
    }

    .col-header {
        margin-bottom: 10px;
    }

    .col-header h3 {
        font-size: 10px;
    }

    .item::before {
        width: 8px;
        height: 8px;
    }

    .item h4 {
        font-size: 14px;
        margin: 0 0 2px 0;
    }

    .school, .company {
        font-size: 12px;
        margin: 0 0 2px 0;
    }

    .date {
        font-size: 11px;
    }

    .timeline::before {
        left: 8px;
        top: 6px;
    }

    .about-content .section-subtitle,
    .about-content a {
        font-size: 8px;
    }

    .about-content h2{
        font-size: 24px;
        margin-bottom: 10px;
    }

    .about-content p{
        font-size: 9px;
        line-height: 1.4;
        margin-bottom: 10px;
    }

    .about-card{
        width: 95%;
        height: 90%;
        gap: 10px;
        margin: 0;

        background-size: auto 100%;
        background-position: 55% center;
        justify-self: end;
        margin-right: 5px;
    }

    .about-card h3{
        font-size: 14px;
    }

    .about-card .btn{
        width: 65%;
        height: 50px;
        padding: 12px 20px;
    }

    .about{
        position: relative;
        height: 100%;
        display: grid;
        grid-template-areas: "image acontent img";
        gap: 0;
        overflow: hidden;
    }

    .about-image img,
    .about-img-mobile{
        height: 100%;
        object-fit: cover;
    }

    .about-image{
        grid-area: image;
        width: 100%;
        height: 100%;
        z-index: 2;
    }

    .about-image img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: left bottom;
    }

    .about-content{
        grid-area: acontent;
        min-height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        justify-self: center;
        z-index: 2;
    }

    .about-content .section-subtitle {
        font-size: 8px;
        margin-bottom: 4px;
    }

    .about-content a{
        display: none;
    }

    .about-content h2{
        font-size: 16px;
        margin-bottom: 8px;
        line-height: 1;
    }

    .about-card{
        display: none;
    }

    .about-img-mobile{
        grid-area: img;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: right center;
        z-index: 1;
        -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
        mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
    }

    .btn-mobile{
        display: block;
        margin: 0 0 5px 0;
        width: fit-content;
        height: 30px;
        padding: 1px 1px;
        border-radius: 6px;
        text-decoration: none;
        transition: .3s;
        align-items: center;
        gap: 10px;
        background: var(--primary);
        color: #F5F1E8;
        font-size: 8px;
        animation: pulse 2.8s infinite;
        transition: transform .3s ease;
    }

    .btn-mobile:hover .btn{
        transform:
            scale(1.05);
    }

    .footer{
        padding: 16px 2%;
        position: relative;
    }

    .footer-brand h2{
        font-size: 24px;
    }

    .footer-brand p {
        font-size: 9px;
    }

    .footer-brand h6 {
        font-size: 8px;
    }

    .footer-socials{
        left: 12%;
    }

    .social-icons {
        gap: 8px;
        margin-right: 10px;
    }

    .footer-socials a {
        width: 40px;
        height: 40px;
    }

    .footer-quote {
        left: 15%;
        width: 80%;
    }

    .footer-quote p{
        font-size: 11px;
        width: 90%;
    }

    .footer-quote span{
        font-size: 22px;
        width: 25%;
    }
}

/* Mobile*/

@media (max-width: 600px) {
    
    .modal-grid{
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)) !important;
    }
    
    .youtube-logo i{
        
        font-size: 150px;

    }

    .youtube-logo span {
        font-size: 15px;
    }

}

@media(min-width: 376px) and (max-width: 720px) {

    .layout{
        width: 100%;
        grid-template-columns: none;
    }

    .navbar{
        height: 60px;
    }

    /* Cache les liens */
    .nav-links{
        display:flex;
    }

    .theme-btn svg{
        width: 18px;
        top: 0;
    }

    .hamburger {
        display: block !important; /* on montre le bouton */
        z-index: 1002;
        flex-shrink: 0;
    }

    /* Optionnel: fond noir derrière quand ouvert */
    .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 990 !important;
    }
    .overlay.active { 
        display: block; 
    }

    .nav-links {
        position: fixed !important;
        top: 0;
        right: 0;
        width: min(78vw, 310px);
        height: 100dvh;
        margin: 0;
        padding: 85px 25px 30px;
        box-sizing: border-box;
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
        background: #d8d1c9;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform .3s ease;
        z-index: 1000 !important;
    }

    .nav-links.active {
        right: 0; /* on le fait glisser */
        transform: translateX(0);
    }

    .social-sidebar {
        display: none;
    }

    .hero{
        position: relative;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        padding-left: 0;
        width: 100%;
        top: 0;
    }

    .hero-left{
        order: 1;
        padding-left: 2%;
    }

    .hero-left .hero-subtitle{
        font-size: 10px;
    }

    .hero h1 {
        font-size: 30px;
        margin: 10px 0;
    }

    .hero-left h2 span {
        font-size: 26px;
        font-style: italic;
    }

    .hero-left h2 {
        line-height: 1.1;
        font-size: 25px;
        margin:0 0 10px 0;
    }

    .hero-left .separator {
        margin-bottom: 10px;
    }

    .hero-left p {
        font-size: 10px;
        line-height: 1.8;
    }

    .hero-buttons {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        font-size: 8px;
    }

    .hero-right{
        order: 2;
        z-index: 2;
    }
    
    .hero-image1 {
        width: 89%;
        left: 11%;
    }

    .hero-image2 {
        width: 50%;
        height: 100%;
        left: 43%;
        top: 50.4%;
    }

    .hero-decoration{
        z-index: 1;
        right: 0;
    }

    .hero-right svg{
        top: 47%;
        height: 78px;
        left: -3%;
        width: 80px;
    }

    /* =========================
       HERO RIGHT ADAPTATION
    ========================= */

    .hero-right pre{
        top:2%;
        left: 52%;
        font-size: 6px;
    }

    .hero-badge{
        bottom: 50px;
        right: 3%;
        height: 20px;
        width: 20px;
    }

    .hero-image{
        width: 47px;
        bottom: 10px;
        right: 13%;
    }

    /* =========================
       DECORATION ADJUSTMENT
    ========================= */

    .shape-decor{
        width: 97%;
        left: 3%;
    }

    .shape-line1{
        left: 2%;
        top: 10%;
    }

    .shape-line2{
        left: 4.5%;
        top: 28%;
    }

    .hero-code{
        left: 3.5%;
        top: 8%;
        font-size: 8px;
    }

    .stack-title span{
        font-size: 7px;
    }

    .stack-grid{
        gap: 20px;
    }

    .stack-item{
        width: 15%;
        padding: 5px;
    }

    .stack-item i{
        font-size: 20px;
    }

    .stack-item span {
        font-size: 10px;
    }

    .projects-top{
        margin: 10px 5px 10px 5px;
    }

    .projects-top .projects-subtitle{
        font-size: 8px;
    }

    .projects-top h2{
        font-size: 25px;
    }

    .projects-top a{
        font-size: 8px;
    }

    .projects-grid{
        margin-left: 5px;
        gap: 15px;
    }

    .project-card{
        flex: 0 0 200px;
    }

    .project-card img{
        width: 90%;
        justify-self: center;
    }

    .badge {
        font-size: 9px;
        font-weight: 300;
        right: -140px;
    }

    .project-content{
        padding: 10px;
    }

    .project-content h3{
        font-size: 16px;
        margin-bottom: 10px;
    }

    .project-content p{
        font-size: 11px;
    }

    .project-tags span{
        font-size: 5px;
        padding: 4px 10px;
    }

    .skills{
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "skills"
            "right"
            "quote";
        gap:0;
        padding: 0;
    }

    .skills-title{
        font-size: 16px;
        padding-left: 5px;
    }

    .skills-title span{
        font-size: 16px;
        top: 0;
    }

    .skills-title .separator {
        width: 94%;
    }

    .skills-grid{
        padding-left: 5px;
    }

    .skills-grid .section-subtitle{
        font-size: 8px;
        margin-bottom: 15px;
    }

    .skill{
        margin-bottom: 4px;
    }

    .skill-top{
        font-size: 9px;
        grid-template-columns: 1fr 1.8fr 0.2fr;
    }

    .skill-top span{
        font-size: 10px;
    }

    .skill-bar{
        width: 220px;
    }

    .skill-top span:last-child {
        font-size: 8px;
        margin-left: 8px;
    }

    .skills-right{
        padding-left: 10px;
    }

    .expertise-subtitle{
        font-size: 8px;
        margin-bottom: 15px;
    }

    .expertise-icon{
        font-size: 20px;
    }

    .expertise-content h4 {
        font-size: 10px;
    }

    .expertise-content p {
        font-size: 8px;
    }

    .expertise-column1,
    .expertise-column2{
        gap: 15px;
    }

    .quote-card {
        --size: 240px;
        width: 72%;
        align-self: center;
        align-content: center;
        justify-content: center;
        justify-self: center;
        top: 0;
        flex-wrap: wrap;
    }

    .quote-icon{
        font-size: 15px;
    }

    .quote-card p{
        font-size: 18px;
    }

    .quote-card span{
        font-size: 12px;
    }

    .experience {
        padding: 0 10px;
    }

    .experience-title h2 {
        font-size: 20px;
    }

    .experience-title .separator{
       top: 60%;
    }

    .experience-grid{
        grid-template-columns: 0.2fr 1.8fr;
        grid-template-areas: 
            "circle1 formation" 
            "circle2 exp";
    }

    .icon-circle{
        width: 50px;
        height: 50px;
    }

    .circle1{
        grid-area: circle1;
    }

    .formation{
        grid-area: formation;
    }

    .experience-pro{
        grid-area: exp;
    }

    .circle2{
        grid-area: circle2;
        top: 30%;
    }

    .col-header {
        margin-bottom: 10px;
    }

    .col-header h3 {
        font-size: 10px;
    }

    .item::before {
        width: 8px;
        height: 8px;
    }

    .item h4 {
        font-size: 14px;
        margin: 0 0 2px 0;
    }

    .school, .company {
        font-size: 12px;
        margin: 0 0 2px 0;
    }

    .desc{
        font-size: 11px;
    }

    .date {
        font-size: 11px;
    }

    .timeline::before {
        left: 8px;
        top: 6px;
    }

    .about{
        position: relative;
        height: 130px;
        display: grid;
        grid-template-columns: 0.8fr 1.4fr 0.8fr;
        grid-template-areas: "image acontent img";
        gap: 0;
        overflow: hidden;
    }

    .about-image img,
    .about-img-mobile{
        height: 100%;
        object-fit: cover;
    }

    .about-image{
        grid-area: image;
        width: 100%;
        height: 100%;
        z-index: 2;
    }

    .about-image img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: left bottom;
    }

    .about-content{
        grid-area: acontent;
        min-height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        justify-self: center;
        z-index: 2;
    }

    .about-content .section-subtitle {
        font-size: 8px;
        margin-bottom: 9px;
    }

    .about-content h2{
        font-size: 16px;
        margin-bottom: 17px;
        line-height: 1;
    }

    .about-content p,
    .about-content a{
        display: none;
    }

    .about-card{
        display: none;
    }

    .about-img-mobile{
        grid-area: img;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: right center;
        z-index: 1;
        -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
        mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
    }

    .btn-mobile{
        display: block;
        margin: 0 0 5px 0;
        width: fit-content;
        height: 30px;
        padding: 1px 1px;
        border-radius: 6px;
        text-decoration: none;
        transition: .3s;
        align-items: center;
        gap: 10px;
        background: var(--primary);
        color: #F5F1E8;
        font-size: 8px;
        animation: pulse 2.8s infinite;
        transition: transform .3s ease;
    }

    .footer{
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
    }

    .footer-brand h2{
        font-size: 24px;
    }

    .footer-brand p {
        font-size: 9px;
    }

    .footer-brand h6 {
        display: none;
    }

    .footer-contact{
        display: none;
    }

    .footer-socials {
        left: 8%;
    }

    .social-icons {
        gap: 8px;
        margin: 0 5px 0 10px;
    }

    .footer-socials h4{
        display: none;
    }

    .footer-socials a {
        width: 40px;
        height: 40px;
    }

    .footer-quote {
        display: none;
    }

}

@media (max-width: 375px) {

    .layout{
        width: 100%;
        grid-template-columns: none;
    }

    /* Cache les liens */
    .nav-links{
        display:flex;
    }

    .theme-btn svg{
        width: 18px;
        top: 0;
    }

    .hamburger {
        display: block !important;
        z-index: 1002;
        flex-shrink: 0;
    }

    /* Optionnel: fond noir derrière quand ouvert */
    .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 990 !important;
    }
    .overlay.active { 
        display: block; 
    }

    .nav-links {
        position: fixed !important;
        top: 0;
        right: 0;
        width: min(78vw, 310px);
        height: 100dvh;
        margin: 0;
        padding: 85px 25px 30px;
        box-sizing: border-box;
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
        background: #d8d1c9;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform .3s ease;
        z-index: 1000 !important;
    }

    .nav-links.active {
        right: 0; /* on le fait glisser */
        transform: translateX(0);
    }

    .social-sidebar {
        display: none;
    }

    .hero{
        position: relative;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        padding-left: 0;
        width: 100%;
        top: 0;
    }

    .hero h1 {
        font-size: 32px;
        margin: 5px 0;
    }

    .hero-left{
        order: 1;
        padding-left: 2%;
    }

    .hero-left .hero-subtitle{
        font-size: 10px;
    }

    .hero-left h2 span {
        font-size: 26px;
        font-style: italic;
    }

    .hero-left h2 {
        line-height: 1.1;
        font-size: 25px;
        margin:0 0 10px 0;
    }

    .hero-left .separator {
        margin-bottom: 10px;
    }

    .hero-left p {
        font-size: 10px;
        line-height: 1.8;
    }

    .hero-buttons {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        font-size: 8px;
    }

    .hero-right{
        order: 2;
        z-index: 2;
    }
    
    .hero-image1 {
        width: 89%;
        left: 11%;
    }

    .hero-image2 {
        width: 50%;
        height: 100%;
        left: 43%;
        top: 50.4%;
    }

    .hero-decoration{
        z-index: 1;
        right: 0;
    }

    .hero-right svg{
        top: 51.5%;
        height: 58px;
        left: -4.5%;
        width: 80px;
    }

    /* =========================
       HERO RIGHT ADAPTATION
    ========================= */

    .hero-right pre{
        top: 9%;
        left: 50%;
        font-size: 4px;
    }

    .hero-badge{
        bottom: 50px;
        right: 3%;
        height: 20px;
        width: 20px;
    }

    .hero-image{
        width: 40px;
        bottom: 8px;
        right: 13%;
    }

    /* =========================
       DECORATION ADJUSTMENT
    ========================= */

    .shape-decor{
        width: 97%;
        left: 3%;
    }

    .shape-line1{
        left: 2%;
        top: 10%;
    }

    .shape-line2{
        left: 4.5%;
        top: 30%;
    }

    .hero-code{
        left: 3%;
        top: 8%;
        font-size: 8px;
    }

    .stack-title span {
        font-size: 7px;
    }

    .stack-item{
        width: 14%;
        padding: 5px;
    }

    .stack-grid{
        gap: 20px;
    }

    .stack-item i {
        font-size: 20px;
    }

    .stack-item span {
        font-size: 8px;
    }

    .projects-top{
        margin: 10px 5px 10px 5px;
    }

    .projects-top .projects-subtitle{
        font-size: 8px;
    }

    .projects-top h2{
        font-size: 25px;
    }

    .projects-top a{
        font-size: 8px;
    }

    .projects-grid{
        margin-left: 5px;
        gap: 15px;
    }

    .project-card{
        flex: 0 0 200px;
    }

    .project-card img{
        width: 90%;
        justify-self: center;
    }

    .badge {
        font-size: 9px;
        font-weight: 300;
        right: -140px;
    }

    .project-content{
        padding: 10px;
    }

    .project-content h3{
        font-size: 16px;
        margin-bottom: 10px;
    }

    .project-content p{
        font-size: 11px;
    }

    .project-tags span{
        font-size: 5px;
        padding: 4px 10px;
    }

    .skills{
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "skills"
            "right"
            "quote";
        gap:0;
        padding: 0;
    }

    .skills-title{
        font-size: 16px;
        padding-left: 5px;
    }

    .skills-title span{
        font-size: 16px;
        top: 0;
    }

    .skills-grid{
        padding-left: 5px;
    }

    .skills-grid .section-subtitle{
        font-size: 8px;
        margin-bottom: 15px;
    }

    .skill{
        margin-bottom: 4px;
    }

    .skill-top{
        font-size: 9px;
        grid-template-columns: 1fr 1.8fr 0.2fr;
    }

    .skill-top span{
        font-size: 10px;
    }

    .skill-bar{
        width: 220px;
    }

    .skill-top span:last-child {
        font-size: 8px;
        margin-left: 8px;
    }

    .skills-right{
        padding-left: 10px;
    }

    .expertise-subtitle{
        font-size: 8px;
        margin-bottom: 15px;
    }

    .expertise-icon{
        font-size: 20px;
    }

    .expertise-content h4 {
        font-size: 10px;
    }

    .expertise-content p {
        font-size: 8px;
    }

    .expertise-column1,
    .expertise-column2{
        gap: 15px;
    }

    .quote-card{
        --size: 300px;
        width: 100%;
        align-self: center;
        justify-self: center;
        top: 0;
    }

    .quote-icon{
        font-size: 15px;
    }

    .quote-card p{
        font-size: 18px;
    }

    .quote-card span{
        font-size: 12px;
    }

    .experience {
        padding: 0 10px;
    }

    .experience-title h2 {
        font-size: 20px;
    }

    .experience-title .separator{
       top: 60%;
    }

    .experience-grid{
        grid-template-columns: 0.2fr 1.8fr;
        grid-template-areas: 
            "circle1 formation" 
            "circle2 exp";
    }

    .icon-circle{
        width: 50px;
        height: 50px;
    }

    .circle1{
        grid-area: circle1;
    }

    .formation{
        grid-area: formation;
    }

    .experience-pro{
        grid-area: exp;
    }

    .circle2{
        grid-area: circle2;
        top: 30%;
    }

    .col-header {
        margin-bottom: 10px;
    }

    .col-header h3 {
        font-size: 10px;
    }

    .item::before {
        width: 8px;
        height: 8px;
    }

    .item h4 {
        font-size: 14px;
        margin: 0 0 2px 0;
    }

    .school, .company {
        font-size: 12px;
        margin: 0 0 2px 0;
    }

    .desc{
        font-size: 11px;
    }

    .date {
        font-size: 11px;
    }

    .timeline::before {
        left: 8px;
        top: 6px;
    }

    .about{
        position: relative;
        height: 100%;
        padding-top: 2px;
        display: grid;
        grid-template-columns: 0.8fr 1.4fr 0.8fr;
        grid-template-areas: "image acontent img";
        gap: 0;
        overflow: hidden;
    }

    .about-image,
    .about-img-mobile{
        height: auto;
        aspect-ratio: 3/4;
    }

    .about-image img,
    .about-img-mobile{
        height: 100%;
        object-fit: cover;
    }

    .about-image{
        grid-area: image;
        width: 100%;
        height: 100%;
        z-index: 2;
    }

    .about-image img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: left bottom;
    }

    .about-content{
        grid-area: acontent;
        min-height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        justify-self: center;
        z-index: 2;
    }

    .about-content .section-subtitle {
        font-size: 8px;
        margin-bottom: 9px;
    }

    .about-content h2{
        font-size: 16px;
        margin-bottom: 17px;
        line-height: 1;
    }

    .about-content p,
    .about-content a{
        display: none;
    }

    .about-card{
        display: none;
    }

    .about-img-mobile{
        grid-area: img;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: right center;
        z-index: 1;
        -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
        mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
    }

    .btn-mobile{
        display: block;
        margin: 0 0 5px 0;
        width: fit-content;
        height: 30px;
        padding: 1px 1px;
        border-radius: 6px;
        text-decoration: none;
        transition: .3s;
        align-items: center;
        gap: 10px;
        background: var(--primary);
        color: #F5F1E8;
        font-size: 8px;
        animation: pulse 2.8s infinite;
        transition: transform .3s ease;
    }

    .footer{
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        padding: 20px 0px 20px 10px;
    }

    .footer-brand h2{
        font-size: 24px;
    }

    .footer-brand p {
        font-size: 9px;
    }

    .footer-brand h6 {
        display: none;
    }

    .footer-contact{
        display: none;
    }

    .footer-socials {
        left: 0%;
    }

    .social-icons {
        gap: 8px;
        margin: 0 5px 0 10px;
    }

    .footer-socials h4{
        display: none;
    }

    .footer-socials a {
        width: 40px;
        height: 40px;
    }

    .footer-quote {
        display: none;
    }

}

@media (max-width: 330px) {
    /* Cache les liens */
    .nav-links{
        display:flex;
    }

    .theme-btn svg{
        width: 18px;
        top: 0;
    }

    .hamburger {
        display: block; /* on montre le bouton */
    }

    /* Optionnel: fond noir derrière quand ouvert */
    .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 990 !important;
    }
    .overlay.active { 
        display: block; 
    }

    .nav-links {
        position: fixed !important;
        top: 0;
        right: 0;
        width: min(78vw, 310px);
        height: 100dvh;
        margin: 0;
        padding: 85px 25px 30px;
        box-sizing: border-box;
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
        background: #d8d1c9;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform .3s ease;
        z-index: 1000 !important;
    }

    .nav-links.active {
        right: 0; /* on le fait glisser */
        transform: translateX(0);
    }

    .hero-right svg{
        top: 51.5%;
        height: 58px;
        left: -4.5%;
        width: 80px;
    }

    /* =========================
       HERO RIGHT ADAPTATION
    ========================= */

    .hero-right pre{
        top: 9%;
        left: 5%;
        font-size: 4px;
    }

    .icon-circle {
        width: 45px;
        height: 45px;
    }

    .icon-circle svg {
        width: 26px;
    }
}

/* =========================================================
   CORRECTION RESPONSIVE — 426px à 715px
   ---------------------------------------------------------
   Objectif :
   - éviter que le layout/tablette entre en conflit avec
     le comportement mobile ;
   - reconstruire la section Skills sans largeur fixe ;
   - empêcher les skill-bars de dépasser ;
   - garder les expertises lisibles ;
   - conserver la quote-card sous les deux colonnes ;
   - supprimer les offsets négatifs qui créent du overflow.
   ========================================================= */

@media (min-width: 426px) and (max-width: 715px) {

    /* =========================
       LAYOUT GLOBAL
       ========================= */

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .layout {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        grid-template-columns: none !important;
    }

    .social-sidebar {
        display: none !important;
    }

    main,
    .main-content,
    .content,
    section {
        min-width: 0;
        max-width: 100%;
    }

    /* =========================
       NAVBAR
       ========================= */

    .navbar {
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        height: 60px;
        min-height: 60px;
        padding: 10px 16px;
        box-sizing: border-box;
        z-index: 1001;
    }

    .logo {
        min-width: 0;
        white-space: nowrap;
    }

    .nav-links {
        position: fixed !important;
        top: 0;
        right: 0;
        width: min(78vw, 310px);
        height: 100dvh;
        margin: 0;
        padding: 85px 25px 30px;
        box-sizing: border-box;
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
        background: #d8d1c9;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform .3s ease;
        z-index: 1000 !important;
    }

    .nav-links.active {
        right: 0;
        transform: translateX(0);
    }

    .nav-links a {
        font-size: 13px;
    }

    .hamburger {
        display: block !important;
        z-index: 1002;
        flex-shrink: 0;
    }

    /* =========================
       HERO / SECTIONS
       ========================= */

    .hero {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }

    .hero-left {
        width: 100%;
        min-width: 0;
        padding: 30px 20px 20px;
        box-sizing: border-box;
    }

    .hero-right {
        width: 100%;
        min-width: 0;
        left: 0;
        overflow: hidden;
    }

    /* =========================
       STACK
       ========================= */

    .stack {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .stack-grid {
        width: 100%;
        max-width: 100%;
        padding-inline: 16px;
        box-sizing: border-box;
        gap: clamp(14px, 4vw, 28px);
        overflow-x: auto;
    }

    .stack-item {
        flex: 0 0 auto;
    }

    /* =========================
       PROJECTS
       ========================= */

    .projects {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .projects-top {
        margin-inline: 20px;
        min-width: 0;
    }

    .projects-slider {
        width: 100%;
        box-sizing: border-box;
        padding-inline: 16px;
    }

    .projects-grid {
        margin-left: 0 !important;
        gap: 16px;
    }

    .project-card {
        flex: 0 0 clamp(230px, 62vw, 280px);
        min-width: 0;
    }

    /* Badge : aucune valeur négative */
    .badge,
    .project-card > .badge,
    .modal-grid .project-card .badge {
        left: auto !important;
        top: 12px !important;
    }

    /* =========================
       SKILLS — RECONSTRUCTION
       ========================= */

    .skills {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;

        display: grid;

        /*
         * À cette largeur, trois colonnes sont trop serrées.
         * On utilise une colonne principale unique.
         */
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "title"
            "skills"
            "right"
            "quote";

        gap: 0;
        padding: 30px 20px 35px !important;
        margin: 0;
        overflow: hidden;
    }

    /* Titre + ligne */
    .skills-title {
        grid-area: title;

        width: 100%;
        min-width: 0;
        height: auto !important;

        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 14px;

        margin: 0 0 25px !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    .skills-title span {
        font-size: clamp(15px, 3.5vw, 18px);
        white-space: nowrap;
    }

    .skills-title .separator {
        position: static;
        width: 100% !important;
        min-width: 0;
        margin: 0 !important;
        transform: none;
    }

    /*
     * Important :
     * .skills-content était une seconde grille 2fr / 1fr.
     * À 426–715px elle réintroduisait une contrainte horizontale.
     * On la transforme en wrapper transparent.
     */
    .skills-content {
        display: contents !important;
    }

    .skills-grid,
    .skills-right,
    .quote-card {
        min-width: 0;
        box-sizing: border-box;
    }

    /* Liste des compétences */
    .skills-grid {
        grid-area: skills;

        width: 100%;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;

        display: flex;
        flex-direction: column;
    }

    .skills-grid .section-subtitle {
        margin: 0 0 18px;
        font-size: 9px;
        line-height: 1.4;
    }

    .skill {
        width: 100%;
        max-width: 100%;
        margin-bottom: 13px;
    }

    .skill-top {
        width: 100%;
        min-width: 0;

        display: grid;

        /*
         * La barre occupe l'espace disponible au lieu d'avoir
         * 100/120/220px fixes.
         */
        grid-template-columns: minmax(75px, 1fr) minmax(80px, 1.3fr) auto;

        gap: 10px;
        align-items: center;

        margin-bottom: 7px;
        font-size: 10px;
    }

    .skill-top span {
        min-width: 0;
    }

    .skill-top span:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .skill-top span:last-child {
        margin-left: 0 !important;
        font-size: 9px;
        white-space: nowrap;
    }

    .skill-bar {
        width: 100% !important;
        max-width: none;
        min-width: 0;
        height: 4px;
    }

    /* =========================
       EXPERTISES
       ========================= */

    .skills-right {
        grid-area: right;

        width: 100%;
        max-width: none;

        display: block;
        margin: 25px 0 0 !important;
        padding: 25px 0 0 !important;

        border-left: 0 !important;
        border-top: 1px solid rgba(184, 146, 71, .35);
    }

    .expertises {
        width: 100%;
        max-width: 100%;
    }

    .expertise-grid {
        width: 100%;
        max-width: 100%;

        display: grid;

        /*
         * Deux colonnes d'expertise restent possibles,
         * mais sans colonne séparatrice fixe.
         */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto auto;
        grid-template-areas:
            "title title"
            "column1 column2";

        gap: 20px;
    }

    .expertise-subtitle {
        grid-area: title;
        margin: 0 0 2px;
        font-size: 9px;
        line-height: 1.4;
    }

    .expertise-divider {
        display: none;
    }

    .expertise-column1,
    .expertise-column2 {
        width: 100%;
        min-width: 0;
        gap: 20px;
    }

    .expertise-item {
        width: 100%;
        min-width: 0;
        gap: 8px;
    }

    .expertise-icon {
        flex: 0 0 auto;
        font-size: 21px;
    }

    .expertise-content {
        min-width: 0;
        margin-left: 4px !important;
    }

    .expertise-content h4 {
        font-size: 10px;
        line-height: 1.3;
        margin-bottom: 5px;
    }

    .expertise-content p {
        font-size: 8px;
        line-height: 1.55;
        overflow-wrap: anywhere;
    }

    /* =========================
       QUOTE CARD
       ========================= */

    .quote-card {
        grid-area: quote;

        --size: clamp(210px, 48vw, 270px);

        width: var(--size) !important;
        height: var(--size) !important;

        max-width: 100%;
        margin: 30px auto 0 !important;

        justify-self: center;
        align-self: center;

        top: 0 !important;
    }

    .quote-card p {
        font-size: clamp(16px, 4vw, 19px);
    }

    /* =========================
       EXPERIENCE / ABOUT
       ========================= */

    .experience,
    .about,
    .contact,
    .footer {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .experience {
        padding-inline: 20px !important;
    }

    .experience-grid {
        min-width: 0;
    }

    .about {
        overflow: hidden;
    }
}


/* =========================================================
   AJUSTEMENT FIN 426–520px
   Les deux colonnes d'expertise deviennent trop étroites.
   ========================================================= */

@media (min-width: 426px) and (max-width: 520px) {

    .skills {
        padding-inline: 16px !important;
    }

    .skill-top {
        grid-template-columns: minmax(65px, .8fr) minmax(90px, 1.5fr) auto;
        gap: 7px;
        font-size: 9px;
    }

    .skill-top span:last-child {
        font-size: 8px;
    }

    .expertise-column1,
    .expertise-column2 {
        gap: 16px;
    }

    .quote-card {
        --size: clamp(205px, 55vw, 245px);
    }
}


/* =========================================================
   AJUSTEMENT 521–715px
   Plus d'espace pour les expertises et les barres.
   ========================================================= */

@media (min-width: 521px) and (max-width: 715px) {

    .skills {
        padding-inline: 24px !important;
    }

    .skill-top {
        grid-template-columns: minmax(100px, .8fr) minmax(150px, 1.5fr) auto;
        gap: 12px;
    }

    .expertise-grid {
        gap: 28px;
    }

    .expertise-column1,
    .expertise-column2 {
        gap: 24px;
    }

    .expertise-content h4 {
        font-size: 11px;
    }

    .expertise-content p {
        font-size: 9px;
    }
}