/* ================= GLOBAL ==================== */
:root {
    /* Custom colors – adjust as you wish */
    --primary:#2b6ac5;      /* Blue for headings & buttons */
    --secondary:#e8f7ff;   /* Light blue for accents */
    --bg-start:#eaf6ff;
    --bg-end:#f4fbff;
    --text-main:#0b1220;
    --text-soft:rgba(11,18,32,.75);
    --card-bg:#ffffff;
    --card-text:#333333;
    --surface-soft:#fafafa;
    --image-bg:#f0f0f0;
    --header-bg:#111111;
    --header-text:#ffffff;
    --footer-bg:#111111;
    --footer-text:#ffffff;
    --toggle-bg:#ffffff;
    --toggle-text:#0b1220;
    --toggle-border:rgba(11,18,32,.12);
}

*,
::before,
::after { box-sizing:border-box; }

body {
    margin: 0;
    font-family:'Inter', sans-serif;
    line-height:1.6;
    background: linear-gradient(180deg, var(--bg-start) 0%, var(--bg-end) 100%);
    color: var(--text-main);
    min-height: 100vh;
}

body.theme-dark {
    --bg-start:#0b1220;
    --bg-end:#0e1728;
    --text-main:#e6edf8;
    --text-soft:rgba(230,237,248,.78);
    --card-bg:#111c30;
    --card-text:#d6e2f5;
    --surface-soft:#101a2c;
    --image-bg:#0a1424;
    --header-bg:#070b12;
    --header-text:#e6edf8;
    --footer-bg:#070b12;
    --footer-text:#e6edf8;
    --toggle-bg:#111c30;
    --toggle-text:#e6edf8;
    --toggle-border:rgba(230,237,248,.22);
}

.container { max-width:1200px; margin:auto; padding:0 20px; }

/* ================= HEADER ==================== */
.site-header{background:var(--header-bg);color:var(--header-text);}
.main-nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:80px;
}
.logo a{font-size:1.75rem;text-decoration:none;color:var(--header-text);}
.menu-links{
    list-style:none;margin:0;padding:0;display:flex;gap:20px;
}
.menu-links li a{
    color:var(--header-text);text-decoration:none;transition:.3s;
}
.menu-links li a:hover{color:#ff9;}

/* Hamburger menu button */
.hamburger{
    display:none;
    flex-direction:column;
    gap:5px;
    background:none;
    border:none;
    cursor:pointer;
    padding:8px;
}
.hamburger span{
    display:block;
    width:25px;
    height:3px;
    background:var(--header-text);
    border-radius:2px;
    transition:all .3s ease;
}
.hamburger.active span:nth-child(1){
    transform:rotate(45deg) translate(10px, 10px);
}
.hamburger.active span:nth-child(2){
    opacity:0;
}
.hamburger.active span:nth-child(3){
    transform:rotate(-45deg) translate(7px, -7px);
}

@media (max-width:760px){
    .hamburger{display:flex}
    .main-nav{
        height:auto;
        padding:12px 0;
        flex-wrap:wrap;
        align-items:center;
    }
    .logo a{font-size:1.35rem;}
    .menu-links{
        width:100%;
        flex-direction:column;
        gap:0;
        max-height:0;
        overflow:hidden;
        transition:max-height .3s ease;
        background:#0a0f1a;
        padding:0;
    }
    .menu-links.active{
        max-height:300px;
        padding:10px 0;
    }
    .menu-links li{
        padding:8px 20px;
    }
    .menu-links li a{display:block}
}

/* ================= HERO ==================== */
.hero-section{
    background: linear-gradient(180deg,#0b1220 0%, rgba(43,106,197,0.18) 60%), url('images/systeme-informatique.jpg') no-repeat center/cover;
    padding:120px 0;
    text-align:center;
    color:#eaf6ff;
    position:relative;
    overflow:hidden;
    border-bottom:1px solid rgba(255,255,255,0.03);
}
.hero-section h1{
    margin-bottom:12px;
    font-weight:700;
    font-size:2.25rem;
    text-shadow:0 4px 18px rgba(11,18,32,.6);
}
.hero-section p{max-width:800px;margin:0 auto 20px;opacity:.9;color:rgba(234,246,255,.9)}

.hero-ctas{display:flex;gap:12px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.cta-button{
    display:inline-block;
    background: linear-gradient(90deg, rgba(255,255,255,0.95), rgba(245,249,255,0.9));
    color:#0b1220;
    padding:.85rem 1.6rem;
    border-radius:8px;
    text-decoration:none;
    border:1px solid rgba(11,18,32,0.06);
    box-shadow:0 4px 12px rgba(11,18,32,0.06);
    transition:transform .15s, box-shadow .15s, filter .15s;
}
.cta-button:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 36px rgba(11,18,32,0.08);
    filter:brightness(.98);
}
.cta-button:focus{
    outline:3px solid rgba(43,106,197,.12);
    outline-offset:4px;
    box-shadow:0 0 0 6px rgba(43,106,197,.04);
}
.cta-secondary{display:inline-block;background: linear-gradient(90deg, rgba(255,255,255,0.95), rgba(245,249,255,0.9)); color:#0b1220; padding:.85rem 1.6rem; border-radius:8px; text-decoration:none; border:1px solid rgba(11,18,32,0.06); box-shadow:0 4px 12px rgba(11,18,32,0.06); transition:transform .15s, box-shadow .15s, filter .15s}
.cta-secondary:hover{transform:translateY(-2px); box-shadow:0 14px 36px rgba(11,18,32,0.08); filter:brightness(.98)}
@media (max-width:600px){.hero-ctas{flex-direction:column;gap:10px}.cta-secondary{width:100%;text-align:center}}

/* ================= ABOUT ME ==================== */
.about-section h2{margin-bottom:30px;}
.profile-box{
    display:flex;gap:20px;padding:20px 0;background:var(--surface-soft);
}
.profile-box img{width:180px;height:180px;object-fit:cover;border-radius:5px;}
.profile-details p{margin-top:8px;}

@media (max-width:600px){
    .profile-box{
        flex-direction:column;
        gap:15px;
    }
    .profile-box img{
        width:100%;
        max-width:280px;
        height:280px;
        object-fit:cover;
    }
}

/* ================= SERVICES ==================== */
.services-section h2{margin-bottom:20px}
.services-section p{color:var(--text-soft);margin-bottom:18px}
.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.service-card{background:var(--card-bg);padding:18px;border-radius:8px;box-shadow:0 8px 24px rgba(11,18,32,.04);transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,filter .22s;transform-origin:center center;display:flex;flex-direction:column}
.service-card:hover{transform:scale(1.03);box-shadow:0 18px 48px rgba(11,18,32,.12);z-index:2}
.service-card h3{margin-top:0;margin-bottom:8px}
.service-card p{margin-bottom:14px;color:var(--card-text);flex-grow:1}
.service-button{display:inline-block;background:transparent;border:1px solid var(--primary);color:var(--primary);padding:.5rem .9rem;border-radius:6px;text-decoration:none;font-weight:600;margin-top:auto}
.service-button:hover{background:var(--primary);color:#fff}

/* Service card background variants */
.service-card--win11{
    background-image: url('images/Windows_11.jpg');
    background-repeat: no-repeat;
    background-size: 140%; /* zoomed in by default */
    background-position: center center;
    color:#fff;
    position:relative;
    overflow:hidden;
    min-height:260px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:20px;
    transition:background-size .6s cubic-bezier(.2,.8,.2,1);
}
/* overlay as a separate layer so we can animate its opacity */
.service-card--win11::before{
    content:"";
    position:absolute;inset:0;
    background: linear-gradient(180deg, rgba(11,18,32,0.56), rgba(43,106,197,0.22));
    opacity:1;
    transition:opacity .45s ease;
    z-index:0;
}
/* keep card content above overlay */
.service-card--win11 > *{position:relative;z-index:1}
.service-card--win11 h3, .service-card--win11 p{color:#fff}
.service-card--win11 .service-button{background:rgba(255,255,255,0.95);color:#0b1220;border-color:rgba(11,18,32,0.06)}
.service-card--win11 .service-button:hover{background:#fff;color:#0b1220;filter:brightness(.98)}

/* Hover interaction: de-zoom image and fade overlay to reveal more */
.service-card--win11:hover{background-size:100%}
.service-card--win11:hover::before{opacity:.28}
.service-card--win11:focus-within{background-size:100%}
@media (max-width:900px){.service-card--win11{min-height:220px}}
@media (max-width:600px){.service-card--win11{min-height:160px;padding:14px}}

/* Service card for applications (Office etc.) */
.service-card--apps{
    background-image: url('images/microsoft-word-excel-powerpoint.jpeg');
    background-repeat: no-repeat;
    background-size: 140%;
    background-position: center center;
    color:#fff;
    position:relative;
    overflow:hidden;
    min-height:260px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:20px;
    transition:background-size .6s cubic-bezier(.2,.8,.2,1);
}
.service-card--apps::before{
    content:"";
    position:absolute;inset:0;
    background: linear-gradient(180deg, rgba(11,18,32,0.56), rgba(43,106,197,0.22));
    opacity:1;
    transition:opacity .45s ease;
    z-index:0;
}
.service-card--apps > *{position:relative;z-index:1}
.service-card--apps h3, .service-card--apps p{color:#fff}
.service-card--apps .service-button{background:rgba(255,255,255,0.95);color:#0b1220;border-color:rgba(11,18,32,0.06)}
.service-card--apps .service-button:hover{background:#fff;color:#0b1220;filter:brightness(.98)}
.service-card--apps:hover{background-size:100%}
.service-card--apps:hover::before{opacity:.28}
@media (max-width:900px){.service-card--apps{min-height:220px}}
@media (max-width:600px){.service-card--apps{min-height:160px;padding:14px}}

/* ================= POSTS GRID ==================== */
.posts-section h2{margin-bottom:30px;}
.post-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:20px;
    grid-auto-rows: 1fr; /* make each row equal height */
}
.post-card{
    background:var(--card-bg);
    padding:15px;
    border-radius:4px;box-shadow:0 2px 5px rgba(0,0,0,.05);
    display:flex;
    flex-direction:column;
    height:100%; /* fill grid cell */
    justify-content:space-between; /* space out content evenly */
}
.post-card img{
    width:100%;
    /* fix height to keep cards uniform but show full image */
    height:180px;
    object-fit:contain; /* show entire image, add letterboxing if needed */
    background:var(--image-bg); /* light grey behind smaller images */
    border-radius:4px;
    margin-bottom:10px;
}

/* mobile: always keep services and posts in 2 columns */
@media (max-width:760px){
    .service-grid,
    .post-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }
    .service-card,
    .post-card{
        padding:12px;
    }
    .post-card h3{font-size:1rem;}
}

/* video gallery used in blog posts */
.video-gallery{
    display:flex;
    flex-direction:column;
    gap:20px;
    margin:20px 0;
}
@media (min-width:800px) {
    .video-gallery { flex-direction:row; }
}
.video-gallery video{
    max-width:100%;
    border:1px solid rgba(128,128,128,.5);
    border-radius:4px;
}


/* Post single image: limit height and add spacing so content below remains visible */
.post-single img{width:100%;height:auto;max-height:420px;object-fit:cover;border-radius:8px;margin:0 0 18px 0;display:block}
@media (max-width:600px){.post-single img{max-height:240px}}

/* ensure post thumbnails shrink appropriately on mobile */
@media (max-width:600px){
    .post-card img { height:140px; }
}

.post-date{display:block;margin-top:10px;font-size:.9rem;color:var(--text-soft);}

input,
textarea{width:100%;padding:.75rem;}
.submit-button{
    grid-column:span 2;background:var(--primary);color:#fff;border:none;cursor:pointer;padding:.75rem 1.5rem;border-radius:4px;
}
.submit-button:hover{background:var(--secondary);}
/* bench image styling for better visibility */
.post-content img.bench{
    display:block;
    width:100%;
    max-width:800px;
    height:auto;
    margin:12px auto;
    border:1px solid rgba(128,128,128,.45);
    box-shadow:0 4px 12px rgba(0,0,0,.05);
}

/* ensure bench image isn't cropped by the generic post-single rule */
.post-single img.bench{
    max-height:none;
    object-fit:contain;
}

/* ================= POST LINKS ==================== */
.post-link{display:block;text-decoration:none;color:inherit}
.post-card{transition:transform .15s, box-shadow .15s}
.post-link:hover .post-card{transform:translateY(-6px);box-shadow:0 8px 20px rgba(0,0,0,.08)}
@media (max-width:600px){.post-link:hover .post-card{transform:none;box-shadow:none}}
/* ================= FOOTER ==================== */
.site-footer{background:var(--footer-bg);color:var(--footer-text);padding:40px 0;text-align:center;}
.social-links{margin-top:10px;display:flex;gap:15px;justify-content:center;}

/* Navigation social links */
.post-social{margin:48px auto 28px;display:flex;gap:18px;align-items:center;font-size:1.05rem;color:var(--text-main);padding:20px 22px;border-top:1px solid rgba(128,128,128,0.25);max-width:1200px;box-sizing:border-box}
.post-social span{margin-right:10px;color:var(--text-soft);font-weight:600}
.post-social a{color:var(--primary);text-decoration:none;padding:10px 14px;border-radius:8px;border:1px solid rgba(43,106,197,.12);transition:background .12s, color .12s, transform .12s;font-weight:600}
.post-social a:hover{background:rgba(43,106,197,.08);color:#154a82;transform:translateY(-2px)}
@media (max-width:600px){
    .post-social{
        flex-direction:row;
        flex-wrap:wrap;
        align-items:center;
        justify-content:center;
        gap:8px;
        padding:14px;
    }
    .post-social span{
        width:100%;
        text-align:center;
        margin:0 0 8px 0;
    }
    .post-social a{
        padding:8px 10px;
        font-size:1rem;
    }
}

/* Dark theme toggle button */
.theme-toggle{
    position:fixed;
    right:16px;
    bottom:16px;
    z-index:9999;
    border:1px solid var(--toggle-border);
    background:var(--toggle-bg);
    color:var(--toggle-text);
    padding:10px 12px;
    border-radius:10px;
    cursor:pointer;
    font:600 0.9rem 'Inter', sans-serif;
    box-shadow:0 8px 22px rgba(0,0,0,.16);
}
.theme-toggle:hover{transform:translateY(-1px)}
.theme-toggle:focus{outline:3px solid rgba(43,106,197,.25);outline-offset:2px}