/* ════════════════════════════════════
   FONT — chargé en preload dans le HTML
════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:wght@400;500;600&display=swap');

/* ════════════════════════════════════
   VARIABLES
════════════════════════════════════ */
:root {
    --accent:       #ff4081;
    --accent-glow:  rgba(255,64,129,.25);
    --bg:           #1f242d;
    --bg-card:      #2c333f;
    --bg-dark:      #262a32;
    --text:         #f0f4f8;           /* légèrement plus doux que #fff pur */
    --text-muted:   #a8bbd0;           /* contraste WCAG AA ≥ 4.5:1 sur --bg */
    --nav-h:        70px;
    --ease:         cubic-bezier(0.23,1,0.32,1);
    --trans:        0.32s ease;
    --radius:       1.2rem;
    --shadow:       0 4px 24px rgba(0,0,0,.35);
}

/* ════════════════════════════════════
   RESET
════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { font-size:62.5%; scroll-behavior:smooth; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 1.6rem;
    line-height: 1.6;
    overflow-x: hidden;
}

a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }

/* ════════════════════════════════════
   FOCUS VISIBLE — accessibilité clavier
════════════════════════════════════ */
:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ════════════════════════════════════
   NAVBAR
════════════════════════════════════ */
.navbar {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--nav-h);
    padding: 0 9%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    background: rgba(31,36,45,.92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,64,129,.12);
    opacity: 0; visibility: hidden;
    animation: show-content .9s ease .3s forwards;
}

.navbar .logo {
    font-family: 'Syne', sans-serif;
    font-size: 2.8rem; font-weight: 800; letter-spacing:-1px;
}
.navbar .logo span { color: var(--accent); }

/* Bouton hamburger — <button> accessible */
#menu-icon {
    display: none;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 3.2rem;
    cursor: pointer;
    padding: .4rem;
    line-height: 1;
}
#menu-icon:focus-visible { outline-offset: 4px; }

.navbar ul { display:flex; list-style:none; gap:.4rem; }

.navbar ul li a {
    display: inline-block;
    font-size: 1.5rem; font-weight: 500;
    padding: .6rem 1.4rem;
    border-radius: 2rem;
    color: var(--text-muted);
    transition: var(--trans);
    position: relative;
}
.navbar ul li a::after {
    content:''; position:absolute;
    left:50%; bottom:2px;
    width:0; height:2px;
    background: var(--accent); border-radius:5px;
    transition:.35s; transform:translateX(-50%);
}
.navbar ul li a:hover,
.navbar ul li a.active { color: var(--accent); }
.navbar ul li a:hover::after,
.navbar ul li a.active::after { width:55%; }

@keyframes show-content { to { opacity:1; visibility:visible; } }

/* ════════════════════════════════════
   3D BARS TRANSITION
════════════════════════════════════ */
.bars-animation {
    position: fixed; inset:0;
    display: flex; z-index:999;
    pointer-events: none;
}
.bars-animation .bar {
    width:100%; height:100%;
    background: linear-gradient(135deg,var(--bg-dark),var(--accent));
    transform: translateY(-100%);
}
.bars-animation.active.down .bar {
    pointer-events:all;
    animation: bars-down 1.1s var(--ease) forwards;
    animation-delay: calc(var(--i) * .07s);
}
.bars-animation.active.up .bar {
    pointer-events:all;
    animation: bars-up 1.1s var(--ease) forwards;
    animation-delay: calc(var(--i) * .07s);
}
@keyframes bars-down { 0%{transform:translateY(-100%)} 50%{transform:translateY(0)} 100%{transform:translateY(100%)} }
/*@keyframes bars-up   { 0%{transform:translateY(100%)}  50%{transform:translateY(0)} 100%{transform:translateY(-100%)} }
*/
/* ════════════════════════════════════
   SECTIONS  (base + 3D enter)
════════════════════════════════════ */

section {
    position: absolute; 
    inset: 0;
    width: 100%;
    /* Changement majeur : on permet à la section de dépasser 100vh si besoin */
    min-height: 100vh;
    height: auto; 
    padding: calc(var(--nav-h) + 6rem) 9% 8rem; /* Padding augmenté pour respirer */
    visibility: hidden; 
    opacity: 0;
    overflow-y: auto; /* Permet de scroller à l'intérieur de la section */
    overflow-x: hidden;
    background: var(--bg);
    transform: perspective(1000px) rotateX(8deg) scale(.97);
    transition: transform .55s var(--ease), opacity .55s ease, visibility .55s;
    /* Pour un scroll plus doux sur mobile */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

section::-webkit-scrollbar {
    width: 6px;
}

section::-webkit-scrollbar-track {
    background: var(--bg);
}

section::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 10px;
}

/* Pour Firefox */
section {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--bg);
}

section.active {
    visibility: visible; opacity: 1;
    transform: perspective(1000px) rotateX(0) scale(1);
    animation: sec-enter .65s var(--ease) forwards;
}
@keyframes sec-enter {
    from { opacity:0; transform:perspective(1000px) rotateX(10deg) translateY(28px) scale(.97); }
    to   { opacity:1; transform:perspective(1000px) rotateX(0) translateY(0) scale(1); }
}

/* ════════════════════════════════════
   HEADING  (h2 partagé)
════════════════════════════════════ */
.heading {
    font-family: 'Syne', sans-serif;
    font-size: clamp(3rem,4.5vw,4.2rem);
    font-weight: 800;
    text-align: center;
    margin-bottom: 3.5rem;
    letter-spacing: -1px;
}
.heading span { color: var(--accent); }

/* ════════════════════════════════════
   HOME
════════════════════════════════════ */
.home {
    display: flex; align-items: center;
    justify-content: space-between; gap: 4rem;
    padding-top: calc(var(--nav-h) + 2rem);
    overflow: hidden;
}
.home-info { flex:1; max-width:60rem; }



/* h1 unique — gros, gras, hiérarchie correcte */
.home-info h1 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(4rem,6vw,6rem);
    font-weight: 800; line-height: 1.05; letter-spacing: -2px;
    margin-bottom: .4rem;
}

/* Rôle — p (pas h2, car h1 est déjà présent) */
.home-role {
    font-size: clamp(2rem,2.8vw,2.8rem);
    font-weight: 400; color: var(--text-muted);
    margin: .4rem 0 2rem;
}
.home-role span {
    display: inline-block; color: transparent;
    -webkit-text-stroke: 1px var(--accent);
    animation: animate-text 5s linear infinite;
}
@keyframes animate-text {
    0%,100%{ color:transparent; }
    50%    { color:var(--accent); }
}

/* Paragraphe description */
.home-desc {
    font-size: 1.6rem; line-height: 1.75;
    color: var(--text-muted); max-width: 52rem;
}
.home-desc strong { color: var(--accent); font-weight: 600; }

.btn-container { display:flex; align-items:center; gap:2rem; margin-top:3rem; flex-wrap:wrap; }

.btn-container .btn,
button[type="submit"]#submit-btn {
    display: inline-flex; align-items: center; gap: .8rem;
    padding: 1.2rem 2.8rem;
    background: var(--accent); color: #fff;
    font-size: 1.6rem; font-weight: 600;
    box-shadow: 0 0 20px var(--accent-glow);
    border-radius: 50px; transition: var(--trans);
    border: 2px solid var(--accent);
    cursor: pointer; font-family: 'DM Sans', sans-serif;
}
.btn-container .btn:hover,
button[type="submit"]#submit-btn:hover {
    background: transparent; color: var(--accent);
    box-shadow: 0 0 30px var(--accent-glow);
}

.sci { display:flex; gap:1rem; }
.sci a {
    display:inline-flex; padding:1rem;
    border:2px solid var(--accent); border-radius:50%;
    color:var(--accent); font-size:2rem;
    transition:var(--trans);
}
.sci a:hover {
    background:var(--accent); color:#fff;
    box-shadow:0 0 15px var(--accent-glow);
    transform:translateY(-3px);
}

/* Photo */
.home-img { flex-shrink:0; }
.home-img .img-box {
    width: clamp(24rem,28vw,38rem); height: clamp(24rem,28vw,38rem);
    border-radius:50%; padding:5px;
    position:relative; display:flex;
    justify-content:center; align-items:center; overflow:hidden;
}
.home-img .img-box::before, .home-img .img-box::after {
    content:''; position:absolute;
    top:-50%; left:-50%; width:200%; height:200%;
    background: conic-gradient(transparent,transparent,transparent,var(--accent));
    animation: spin 5s linear infinite;
}
.home-img .img-box::after { animation-delay:-2.5s; }
@keyframes spin { to { transform:rotate(360deg); } }
.home-img .img-box .img-item {
    width:100%; height:100%; border-radius:50%;
    border:3px solid var(--bg); overflow:hidden;
    position:relative; z-index:1;
    display:flex; justify-content:center; align-items:center;
}
.home-img .img-box .img-item img {
    position:absolute; width:100%; height:100%;
    object-fit:cover; mix-blend-mode:lighten;
}

/* ════════════════════════════════════
   SERVICES
════════════════════════════════════ */
.Services {
    display: block; 
    
    height: auto;
    justify-content:center; min-height:100vh;
    background: linear-gradient(160deg,var(--bg) 0%,#232936 100%);
}
.services-container {
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(28rem,1fr));
    gap:2.5rem;
}
.service-box {
    background:var(--bg-card); padding:3rem 2.5rem;
    border-radius:2rem; border:2px solid transparent;
    transition:var(--trans); position:relative; overflow:hidden;
}
.service-box::before {
    content:''; position:absolute; top:0; left:0;
    width:4px; height:0; background:var(--accent);
    transition:height .4s ease;
}
.service-box:hover::before { height:100%; }
.service-box i   { font-size:5rem; color:var(--accent); margin-bottom:1.5rem; display:block; }
.service-box h3  { font-family:'Syne',sans-serif; font-size:2rem; font-weight:700; margin-bottom:1rem; }
.service-box p   { font-size:1.5rem; color:var(--text-muted); line-height:1.7; }
.service-box:hover {
    border-color:var(--accent); transform:translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,.3), 0 0 30px var(--accent-glow);
}

/* ════════════════════════════════════
   RESUME
════════════════════════════════════ */
#resume {
    display: block; 
   
    height: auto;
    justify-content:center; min-height:100vh;
}
.resume-container { display:grid; grid-template-columns:1fr 2fr; gap:5rem; }

.left-box > h2 {
    font-family:'Syne',sans-serif; font-size:3.2rem; font-weight:800; margin-bottom:1.2rem;
}
.left-box > p { font-size:1.4rem; color:var(--text-muted); line-height:1.7; margin-bottom:2.5rem; }

/* onglets avec role="tablist" */
.tab-group { display:flex; flex-direction:column; }

.resume-btn {
    width:100%; height:5.2rem;
    background:var(--bg-card); color:var(--text-muted);
    border:2px solid transparent;
    font-size:1.5rem; font-weight:600;
    margin-bottom:1.5rem; border-radius:1rem;
    cursor:pointer; transition:var(--trans);
    font-family:'DM Sans',sans-serif;
    display:flex; align-items:center; gap:1rem; padding:0 2rem;
    text-align:left;
}
.resume-btn i { font-size:1.8rem; }
.resume-btn:hover { border-color:rgba(255,64,129,.35); color:var(--text); }
.resume-btn.active, .resume-btn[aria-selected="true"] {
    border-color:var(--accent); color:var(--accent);
    background:rgba(255,64,129,.07);
}

.right-box { position:relative; }

.resume-detail { display:none; animation:fadeUp .45s ease forwards; }
.resume-detail.active { display:block; }
@keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }

.resume-detail .heading { font-size:2.8rem; text-align:left; margin-bottom:.8rem; }
.resume-detail .desc    { font-size:1.4rem; color:var(--text-muted); line-height:1.7; margin-bottom:1rem; }

.scroll-hint {
    display:flex; align-items:center; gap:.6rem;
    font-size:1.2rem; color:rgba(255,255,255,.3);
    margin-bottom:1rem; user-select:none;
    list-style:none;
}
.scroll-hint i { font-size:1.6rem; animation:bounce-y 1.4s ease infinite; }
@keyframes bounce-y { 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }

/* Grille scrollable */
.resume-listG.scrollable {
    display:grid; grid-template-columns:repeat(2,1fr);
    gap:1.5rem; max-height:36rem;
    overflow-y:auto; padding:.5rem .3rem 1.5rem;
    scrollbar-width:thin; scrollbar-color:var(--accent) transparent;
}
.resume-listG.scrollable::-webkit-scrollbar { width:4px; }
.resume-listG.scrollable::-webkit-scrollbar-thumb { background:var(--accent); border-radius:10px; }

.resume-list {
    background:var(--bg-card); border:2px solid transparent;
    padding:2rem; border-radius:var(--radius);
    transition:var(--trans); display:flex;
    flex-direction:column; gap:.6rem;
    list-style:none;
}
.resume-list:hover { border-color:var(--accent); transform:translateY(-4px); }

.resume-list .year    { font-size:1.2rem; color:var(--accent); font-weight:600; }
.resume-list h3       { font-family:'Syne',sans-serif; font-size:1.6rem; }
.resume-list .company {
    position:relative; padding-left:1.6rem;
    font-size:1.3rem; color:var(--text-muted); margin-bottom:.3rem;
}
.resume-list .company::before {
    content:''; position:absolute; top:50%; left:0;
    transform:translateY(-50%); width:8px; height:8px;
    background:var(--accent); border-radius:50%;
}
.resume-list > p:last-of-type { font-size:1.3rem; color:var(--text-muted); line-height:1.6; }

/* Tags — ul/li sémantique */
.tag-list { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; list-style:none; }
.tag {
    font-size:1.1rem; font-weight:600;
    padding:.3rem .9rem; border-radius:2rem;
    background:rgba(255,64,129,.1); color:var(--accent);
    border:1px solid rgba(255,64,129,.25);
}

/* ── Skills ── */
.skill-grid { grid-template-columns:repeat(3,1fr) !important; }
.skill-card {
    flex-direction:column !important; align-items:center !important;
    justify-content:center !important; text-align:center !important;
    padding:2.5rem 1rem !important; min-height:11rem; gap:.8rem !important;
    list-style:none;
}
.skill-card i    { font-size:3.5rem; color:var(--accent); transition:transform .3s; }
.skill-card span { font-size:1.3rem; font-weight:600; }
.skill-card:hover i { transform:scale(1.25) rotate(-5deg); }

/* ── À propos ── */
.resume-listG.single-col { grid-template-columns:1fr; }

.about-card h3 {
    display:flex; align-items:center; gap:.8rem;
    font-family:'Syne',sans-serif; font-size:1.8rem; color:var(--accent);
    margin-bottom:1.5rem;
}
.about-card h3 i { font-size:2.2rem; }

/* dl / dt / dd — sémantique correcte */
.about-grid { display:flex; flex-direction:column; gap:.9rem; }
.about-grid > div { display:flex; gap:1rem; align-items:baseline; }
.about-grid dt { font-size:1.3rem; color:var(--text-muted); min-width:9rem; font-weight:500; }
.about-grid dd { font-size:1.4rem; color:var(--text); }
.about-grid dd a:hover { color:var(--accent); }

/* Barres de langues */
.lang-list { display:flex; flex-direction:column; gap:1.6rem; list-style:none; }
.lang-top  { display:flex; justify-content:space-between; margin-bottom:.6rem; }
.lang-name  { font-size:1.5rem; font-weight:600; }
.lang-level { font-size:1.2rem; color:var(--accent); }
.lang-bar {
    width:100%; height:6px; background:rgba(255,255,255,.1);
    border-radius:3px; overflow:hidden;
}
.lang-fill {
    height:100%; background:linear-gradient(90deg,var(--accent),#ff79a8);
    border-radius:3px; animation:growBar 1s var(--ease) forwards;
}
@keyframes growBar { from{width:0 !important} }

/* ════════════════════════════════════
   PORTFOLIO
════════════════════════════════════ */
#portfolio {
   display: block; 
    min-height: 100vh;
    height: auto;
   
    justify-content:center; min-height:100vh;
    background:linear-gradient(160deg,var(--bg) 0%,#232936 100%);
}
.portfolio-container {
    display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start;
}

.portfolio-detail { display:none; animation:fadeUp .45s ease forwards; }
.portfolio-detail.active { display:block; }

.portfolio-box .portfolio-detail .numb {
    font-family:'Syne',sans-serif; font-size:9rem;
    -webkit-text-stroke:1px var(--accent); color:transparent;
    line-height:1; opacity:.5;
}
.portfolio-box h3 { font-family:'Syne',sans-serif; font-size:2.4rem; font-weight:700; margin:1rem 0 1.5rem; }
.portfolio-box > div > p { font-size:1.5rem; color:var(--text-muted); line-height:1.7; }

.portfolio-box .tech { margin:2rem 0; padding-bottom:2rem; border-bottom:1px solid rgba(255,64,129,.25); }
/* h4 dans tech (h3 est pour le titre, h4 pour les technos) */
.portfolio-box .tech h4 { font-size:1.3rem; color:var(--accent); font-weight:500; letter-spacing:.5px; }

.portfolio-box .portfolio-carousel {
    width:100%; height:20rem; overflow:hidden; border-radius:1rem;
    box-shadow: var(--shadow);
}
.portfolio-carousel .img-slide {
    display:grid; grid-auto-flow:column;
    grid-auto-columns:100%; gap:2rem; height:inherit; transition:.5s;
}
.portfolio-carousel .img-item { height:inherit; }
.portfolio-carousel .img-slide img {
    display:block; width:100%; height:100%;
    object-fit:cover; border-radius:1rem;
}

.portfolio-box .navigation { text-align:right; margin-top:1.5rem; }
.portfolio-box .navigation button {
    display:inline-flex; align-items:center; justify-content:center;
    padding:.8rem; background:var(--bg-card);
    border:2px solid var(--accent); color:var(--accent);
    font-size:2.2rem; border-radius:.8rem;
    cursor:pointer; transition:var(--trans);
}
.portfolio-box .navigation button:hover:not(.disabled) { background:var(--accent); color:#fff; }
.portfolio-box .navigation button.disabled {
    border-color:var(--bg-card); color:var(--bg-dark); opacity:.35; cursor:not-allowed;
}
.portfolio-box .navigation .arrow-right { margin-left:1rem; }

.portfolio-box .lien { display:flex; gap:1rem; margin-top:1rem; }
.portfolio-box .lien a {
    position:relative; display:inline-flex;
    width:4.5rem; height:4.5rem; align-items:center; justify-content:center;
    font-size:1.8rem; border-radius:50%;
    background:var(--bg-dark); color:var(--text); transition:var(--trans);
}
.portfolio-box .lien a:hover { color:var(--accent); background:rgba(255,64,129,.1); transform:translateY(-3px); }
.portfolio-box .lien a span {
    position:absolute; bottom:calc(100% + 8px); left:50%;
    transform:translateX(-50%) scale(.9);
    font-size:1.2rem; white-space:nowrap;
    padding:.4rem 1rem; border-radius:.5rem;
    background:var(--text); color:var(--bg);
    opacity:0; transition:.2s; pointer-events:none;
}
.portfolio-box .lien a:hover span { opacity:1; transform:translateX(-50%) scale(1); }

/* ════════════════════════════════════
   CONTACT
════════════════════════════════════ */
#contact {
    display: block; 
    min-height: 100vh;
    height: auto;
}
.contact-container { display: grid; 
    grid-template-columns: 1fr 1.3fr; 
    gap: 4rem; 
    align-items: start; 
    margin-bottom: 5rem; }

.contact-box h2 { font-family:'Syne',sans-serif; font-size:2.8rem; font-weight:700; margin-bottom:1.5rem; }
.contact-box > p { font-size:1.5rem; color:var(--text-muted); line-height:1.7; margin-bottom:2rem; }

.contact-detail { display:flex; align-items:center; gap:1.5rem; margin:1.6rem 0; }
.contact-detail i {
    display:inline-flex; background:var(--bg-dark); color:var(--accent);
    padding:1.2rem; border-radius:1rem; font-size:2rem;
    border:1px solid rgba(255,64,129,.2); transition:var(--trans); flex-shrink:0;
}
.contact-detail:hover i { background:var(--accent); color:#fff; box-shadow:0 0 15px var(--accent-glow); }
.contact-detail .detail p:first-child { font-size:1.2rem; color:var(--accent); font-weight:600; text-transform:uppercase; letter-spacing:1px; }
.contact-detail .detail p:last-child,
.contact-detail .detail a { font-size:1.5rem; color:var(--text); }
.contact-detail .detail a:hover { color:var(--accent); }

 /* .contact-box form {
    background:var(--bg-dark); padding:3.5rem;
    border-radius:2rem; border:1px solid rgba(255,64,129,.1);
}
.contact-box .heading { font-size:2.8rem; margin-bottom:2.5rem; } */

/* Champs avec labels — accessibilité */
/*.field-box {
    display:grid; grid-template-columns:repeat(2,1fr);
    gap:1.5rem; margin-bottom:2rem;
}
.field-group { display:flex; flex-direction:column; gap:.6rem; }
.field-full   { grid-column:span 2; }

.field-group label {
    font-size:1.3rem; font-weight:600;
    color:var(--text-muted); letter-spacing:.3px;
}
.field-group label span { color:var(--accent); }

.field-group input, .field-group textarea {
    background:var(--bg-card); border:2px solid transparent;
    padding:1.2rem 1.5rem; color:var(--text);
    border-radius:1rem; font-size:1.5rem;
    font-family:'DM Sans',sans-serif; transition:var(--trans); width:100%;
}
.field-group textarea { resize:vertical; min-height:13rem; scrollbar-width:thin; scrollbar-color:var(--accent) transparent; }
.field-group input::placeholder, .field-group textarea::placeholder { color:rgba(255,255,255,.3); }
.field-group input:focus, .field-group textarea:focus {
    border-color:var(--accent); outline:none; box-shadow:0 0 10px var(--accent-glow);
} */

/* Netlify form feedback */
/*
.form-success, .form-error {
    display:none; flex-direction:column;
    align-items:center; justify-content:center;
    text-align:center; gap:1rem;
    padding:3rem 2rem; border-radius:1.5rem;
    margin-bottom:2rem; animation:fadeUp .5s ease forwards;
}
.form-success.visible, .form-error.visible { display:flex; }
.form-success { background:rgba(34,197,94,.08); border:2px solid rgba(34,197,94,.4); }
.form-success i  { font-size:5rem; color:#22c55e; }
.form-success h3 { font-family:'Syne',sans-serif; font-size:2.2rem; color:#22c55e; }
.form-success p  { font-size:1.5rem; color:var(--text-muted); }
.form-error { background:rgba(255,64,129,.08); border:2px solid rgba(255,64,129,.4); flex-direction:row; padding:1.5rem 2rem; gap:1rem; }
.form-error i { font-size:2.4rem; color:var(--accent); flex-shrink:0; }
.form-error p { font-size:1.4rem; color:var(--text-muted); text-align:left; }
.btn-loading { display:inline-flex; align-items:center; gap:.8rem; }
*/
/* ════════════════════════════════════
   FOOTER  (dans la section #contact)
════════════════════════════════════ */
.footer {
    margin-top: 4rem;
    position: relative; /* S'assure qu'il suit le flux du formulaire */
    width: 100%;
}
.footer-top {
    display:flex; justify-content:space-between;
    align-items:center; flex-wrap:wrap;
    gap:3rem; margin-bottom:3rem;
}
.footer-brand { display:flex; flex-direction:column; gap:.8rem; }
.footer-logo {
    font-family:'Syne',sans-serif; font-size:3.2rem; font-weight:800; line-height:1;
}
.footer-logo span { color:var(--accent); }
.footer-tagline { font-size:1.4rem; color:var(--text-muted); letter-spacing:.4px; }

.footer-contact-mini { display:flex; flex-wrap:wrap; gap:1.2rem; }
.footer-contact-mini a {
    display:inline-flex; align-items:center; gap:.7rem;
    font-size:1.4rem; color:var(--text-muted);
    padding:.8rem 1.8rem; border:1px solid rgba(255,255,255,.1);
    border-radius:5rem; transition:var(--trans);
}
.footer-contact-mini a i { font-size:1.8rem; }
.footer-contact-mini a:hover {
    color:var(--accent); border-color:var(--accent);
    background:rgba(255,64,129,.06); transform:translateY(-3px);
}
.footer-bottom {
    border-top:1px solid rgba(255,255,255,.06); padding-top:2rem;
    display:flex; justify-content:space-between;
    align-items:center; flex-wrap:wrap; gap:1rem;
}
.footer-bottom p { font-size:1.3rem; color:rgba(255,255,255,.3); }

/* ════════════════════════════════════
   SCROLL TO TOP
════════════════════════════════════ */
.scroll-top {
    position:fixed; bottom:3rem; right:3rem;
    width:4.5rem; height:4.5rem;
    background:var(--accent); color:#fff;
    border:none; border-radius:50%; font-size:2rem;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; z-index:500;
    box-shadow:0 5px 20px var(--accent-glow);
    transition:var(--trans); opacity:0; pointer-events:none; transform:translateY(10px);
}
.scroll-top.visible { opacity:1; pointer-events:all; transform:translateY(0); }
.scroll-top:hover   { transform:translateY(-3px); }

/* ════════════════════════════════════
   RESPONSIVE
════════════════════════════════════ */
@media (max-width:1200px) { html { font-size:57%; } }

@media (max-width:991px) {
    html { font-size:52%; }
    .navbar { padding:0 4%; }
    section { padding:calc(var(--nav-h) + 4rem) 4% 4rem; }
    .resume-container { grid-template-columns:1fr; gap:3rem; }
    .left-box { text-align:center; }
    .tab-group { align-items:center; }
    .resume-btn { max-width:38rem; }
}

@media (max-width:850px) {
    #menu-icon { display:block; }
    .navbar .nav-links {
        position:fixed; top:var(--nav-h); left:0; width:100%;
        padding:2rem 4%; background:rgba(31,36,45,.98);
        backdrop-filter:blur(20px); border-top:1px solid rgba(255,64,129,.15);
        display:none; z-index:999;
    }
    .navbar .nav-links.active { display:block; }
    .navbar ul { flex-direction:column; gap:0; }
    .navbar ul li { border-bottom:1px solid rgba(255,255,255,.05); }
    .navbar ul li a { font-size:2rem; padding:1.5rem 0; display:block; }

    .home { flex-direction:column-reverse; justify-content:center; text-align:center; gap:3rem; }
    .home-info .home-desc { margin:0 auto; }
    .btn-container { justify-content:center; }
    .home-img .img-box { width:50vw; height:50vw; }

    .portfolio-container { grid-template-columns:1fr; }
    .contact-container   { grid-template-columns:1fr; }
}

@media (max-width:600px) {
    html { font-size:48%; }
    .heading { font-size:3.5rem; }
    .home-img .img-box { width:65vw; height:65vw; }
    .resume-listG.scrollable { grid-template-columns:1fr; }
    .skill-grid { grid-template-columns:repeat(2,1fr) !important; }
    .contact-box form { padding:2rem 1.5rem; }
    .field-box { grid-template-columns:1fr; }
    .field-full { grid-column:span 1; }
    .footer { padding:3rem 2rem 2rem; }
    .footer-top { flex-direction:column; align-items:flex-start; }
    .footer-bottom { flex-direction:column; text-align:center; }
}

@media (max-width:400px) {
    html { font-size:44%; }
    .home-img .img-box { width:75vw; height:75vw; }
}

@media (max-width: 850px) {
    body {
       font-family: 'DM Sans', sans-serif;
        font-size: 1.5rem;
    }

    .heading {
        font-size: 3.2rem;
        margin-bottom: 4rem;
        padding-top: 1rem;
    }

   

     .resume-listG.scrollable {
        max-height: none; /* On enlève la limite de hauteur sur mobile pour tout voir d'un coup */
        overflow: visible;
    }

    .contact-box form {
        padding: 2.5rem 2rem;
    }

    /* Ajustement du padding pour ne pas cacher le titre sous la navbar mobile */
    section {
        padding: calc(var(--nav-h) + 7rem) 5% 6rem;
        display: block;
    }
}

@media (max-width: 480px) {
    section {
        padding: calc(var(--nav-h) + 5rem) 4% 5rem;
    }

    .heading {
        font-size: 2.8rem;
    }

    .home-info h1 {
        font-size: 3.2rem;
    }
}