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

:root{--bg:#f7f8fa;
    --surface:#fff;
    --text:#111827;
    --muted:#667085;
    --line:#e5e7eb;
    --accent:#0b6bcb;
    --accent2:#084f98;
    --dark:#0b1220}

html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,sans-serif;
    color:var(--text);
    background:var(--bg);
    line-height:1.65}
a{text-decoration:none;
    color:inherit}

.header{position:sticky;
    top:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 6%;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(229,231,235,.8)}

.logo{font-size:25px;
    font-weight:800;
    letter-spacing:-1px}
    .logo span{color:var(--accent)}

.nav{display:flex;
    gap:25px;
    font-size:13px;
    font-weight:600}
    .nav a:hover{color:var(--accent)}
.menu-toggle{display:none;
    order:0;
    background:none;
    font-size:25px}

.hero{min-height:88vh;
    padding:90px 7%;
    display:grid;
    grid-template-columns:1.25fr .75fr;
    gap:70px;
    align-items:center;
    background:linear-gradient(135deg,#fff 0%,#f3f7fc 100%)}

.eyebrow{font-size:12px;
    font-weight:800;
    letter-spacing:2px;
    color:var(--accent);
    margin-bottom:18px}
.hero h1{font-size:clamp(48px,7vw,90px);
    line-height:1;letter-spacing:-4px;
    margin-bottom:20px}.hero h1 span{color:var(--accent)}

.hero h2{font-size:clamp(23px,3vw,38px);
    line-height:1.2;
    letter-spacing:-1px;
    margin-bottom:22px}

.hero-text{max-width:650px;
    color:var(--muted);
    font-size:17px}

.actions{display:flex;
    gap:12px;
    margin:30px 0}
  .btn{display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:13px 20px;
    border-radius:9px;
    font-weight:700;
    font-size:14px;
    border:1px solid var(--text);cursor:pointer}
    .primary{background:var(--text);
        color:#fff}.primary:hover{background:var(--accent);
            border-color:var(--accent)}
            .secondary{background:#fff}
            .secondary:hover{border-color:var(--accent);
                             color:var(--accent)}
.quick-stats{display:flex;
    gap:35px;
    margin-top:45px}
    .quick-stats div{display:flex;
        flex-direction:column}
        .quick-stats strong{font-size:22px}
        .quick-stats span{font-size:12px;
            color:var(--muted)}
.hero-card{background:var(--dark);
    color:#fff;
    border-radius:24px;
    padding:40px;
    min-height:390px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    box-shadow:0 25px 70px rgba(11,18,32,.18)}

.initials{width:120px;
    height:120px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:45px;
    font-weight:800;
    margin-bottom:25px}
    .hero-card p{font-size:11px;
        letter-spacing:2px;
        color:#aeb8c8}

.equipment-cloud{display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:20px}
    .equipment-cloud span,.tags span{border:1px solid #dce2eb;
        border-radius:100px;
        padding:5px 10px;
        font-size:11px}
        .equipment-cloud span{border-color:#39465a;
            color:#dbe3ee}

.section{padding:105px 7%}
.section.alt{background:#fff}
.section-heading{max-width:760px;
    margin-bottom:55px}
    .section-heading h2{font-size:clamp(32px,4vw,52px);
        line-height:1.1;
        letter-spacing:-2px}
        .section-heading>p:last-child{color:var(--muted);margin-top:15px}

.about-grid{display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:80px}
    .about-text p{margin-bottom:20px;
        color:#4b5563}
        .info-card{border-top:2px solid var(--text)}
        .info-card div{padding:18px 0;
            border-bottom:1px solid var(--line);
            display:flex;
            justify-content:space-between;
            gap:20px}
            .info-card span{color:var(--muted);
                font-size:13px}
                .info-card strong{font-size:13px;text-align:right}

.timeline{max-width:1000px;
    margin:auto}
    .timeline-item{position:relative;
        padding:0 0 45px 50px;
        border-left:1px solid #cbd5e1}
        .timeline-dot{position:absolute;
            left:-6px;top:0;
            width:11px;
            height:11px;
            border-radius:50%;
            background:var(--accent)}
            .timeline-date{font-size:12px;
                font-weight:800;
                color:var(--accent);
                margin-bottom:9px}
                .timeline-card{background:#f8fafc;
                    border:1px solid var(--line);
                    padding:28px;
                    border-radius:14px}
                    .timeline-card h3{font-size:23px}
                    .muted{color:var(--muted);
                        font-size:13px;
                        margin:5px 0 15px}
                        .timeline-card ul{padding-left:18px;
                            color:#4b5563;
                            font-size:14px}

.skills-grid{display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px}
    .skill-card{background:#fff;
        border:1px solid var(--line);
        padding:30px;
        border-radius:15px}
        .skill-card span,.project-number{font-size:12px;
            color:var(--accent);
            font-weight:800}
            .skill-card h3{margin:15px 0 8px;
                font-size:19px}
                .skill-card p,.project p{color:var(--muted);
                    font-size:13px}

.tools-section{background:#eef4fa}
.tools-grid{display:grid;grid-template-columns:repeat(4,1fr);
    gap:12px}
    .tools-grid div{background:#fff;
        border:1px solid var(--line);
        padding:20px;
        text-align:center;
        border-radius:10px;
        font-weight:700;
        font-size:14px}

.projects-grid{display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px}
    .project{background:#fff;
        border:1px solid var(--line);
        border-radius:15px;
        padding:30px;
        min-height:260px}
        .project h3{font-size:21px;
            margin:18px 0 10px}
            .tags{display:flex;
                flex-wrap:wrap;
                gap:7px;
                margin-top:25px}
            .tags span{border-color:var(--line);
                color:#475467}

.education-grid{display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px}
    .education-card{border:1px solid var(--line);
        padding:28px;
        border-radius:15px}
        .education-card span{font-size:12px;
            color:var(--accent);
            font-weight:800}
            .education-card h3{margin:12px 0 7px;
                font-size:19px}
                .education-card p{color:var(--muted);
                    font-size:13px}
     .learning{margin-top:18px;
        background:var(--dark);
        color:#fff;
        padding:25px;
        border-radius:14px}
        .learning p{color:#b9c3d1;font-size:13px;margin-top:5px}

.contact-section{background:var(--dark);
    color:#fff}
    .contact-content{max-width:800px}
    .contact-section,.eyebrow{color:#73b8ff}
    .contact-section h2{font-size:clamp(38px,6vw,70px);
        line-height:1.05;
        letter-spacing:-3px}
        .contact-section p:not(.eyebrow){color:#b9c3d1;
            margin-top:20px}
            .contact-actions{display:flex;gap:12px;margin-top:30px}
            .contact-section .secondary{color:var(--text)}
            .contact-note{font-size:11px!important;
                color:#8794a8!important}

footer{display:flex;
    justify-content:space-between;
    padding:22px 7%;
    background:#080e19;
    color:#8d99aa;
    font-size:11px}
    footer a:hover{color:#fff}

.reveal{opacity:0;
    transform:translateY(18px);
    transition: 2s ease}
    .reveal.visible{opacity:1;
        transform:none}
#profil{
    width:8rem;
    height: 8rem;
    border-radius:50px
} 
.project-featured {
  grid-column: span 2;
}

.project-icon {
  font-size: 32px;
  margin: 12px 0;
}

.project-features {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 20px 0;
}

.project-features span {
  background: #eef4fa;
  color: #344054;
  border-radius: 100px;
  padding: 6px 11px;
  font-size: 11px;
  font-weight: 600;
}

.project-detail {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.project-detail strong {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
}

.project-detail ul {
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
}

.project-detail li {
  margin-bottom: 5px;
}

.haut{
    position:fixed;
    bottom:10px;
    right:20px;
    background:red;
    border-radius:50px;
    color:#fff;
    font-size:14px;
    padding:10px 15px;
}

@media(max-width: 850px) {
  .project-featured {
    grid-column: span 1;
  }
}       

@media(max-width:850px){.nav{display:none;
    position:absolute;
    top:67px;
    left:0;
    right:0;
    background:#fff;
    flex-direction:column;
    padding:20px 7%;
    border-bottom:1px solid var(--line)}
    .nav.open{display:flex}
    .menu-toggle{display:block}
    .hero{grid-template-columns:1fr;padding-top:70px}
    .hero-card{min-height:300px}
    .about-grid{grid-template-columns:1fr;gap:40px}
    .skills-grid,.projects-grid,.education-grid{grid-template-columns:1fr 1fr}
    .tools-grid{grid-template-columns:1fr 1fr}}

@media(max-width:560px){.section{padding:75px 6%}
.hero{padding:65px 6%}
.hero h1{letter-spacing:-2px}
.quick-stats{gap:18px}
.quick-stats strong{font-size:18px}
.skills-grid,.projects-grid,.education-grid{grid-template-columns:1fr}
.tools-grid{grid-template-columns:1fr 1fr}
.timeline-item{padding-left:30px}
.timeline-card{padding:21px}
.contact-actions{flex-direction:column}
footer{padding:20px 6%;
    gap:15px;
    flex-direction:column}}

@media print{.header,.actions,.contact-actions,footer{display:none}
.hero{min-height:auto}
.section{padding:40px 5%}
.reveal{opacity:1;transform:none}
.hero-card{display:none}
.section.alt{background:#fff}}