:root{
    --bg:#0b0b0f; --surface:#0c0c12; --surface-2:#111118; --border:#23232c;
    --text:#e8e8ef; --text-dim:#b3b3c2; --primary:#5d4cde;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
    color:var(--text);
    background-color:var(--bg);
}

/* Container global */
.container{width:min(1100px,92%);margin:0 auto}

/* Header */
.site-header{
    position:sticky;top:0;z-index:50;backdrop-filter:blur(6px);
    background-color:rgba(12, 12, 18, 0.85);
    border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.brand{font-weight:800;letter-spacing:.5px;font-size:1.25rem;color:var(--text);text-decoration:none}
.brand span{color:var(--primary)}
.burger{display:none;background:none;border:0;cursor:pointer;gap:4px;flex-direction:column;padding:.5rem}
.burger span{width:22px;height:2px;background:var(--text-dim);display:block;border-radius:2px}
.nav{display:flex;gap:1rem;align-items:center}
.nav a{color:var(--text-dim);text-decoration:none;padding:.5rem .75rem;border-radius:.75rem;transition:.2s}
.nav a:hover,.nav a.active{color:var(--text);background-color:var(--surface-2)}
.nav .cta{background-color:var(--primary);color:#fff}
@media (max-width:900px){
    .burger{display:flex}
    .nav{position:fixed;left:0;right:0;top:64px;background-color:var(--surface);
        border-bottom:1px solid var(--border);padding:.75rem;display:none;flex-direction:column}
    .nav.open{display:flex}
}

/* Sections */
.section{
    padding:3rem 0;
    scroll-margin-top:90px;
}
section:nth-of-type(odd) {
    background: linear-gradient(
            180deg,
            #1a1d33 0%,   /* Bleu très sombre au lieu de gris */
            #101122 50%,  /* Bleu-noir */
            #05060a 100%  /* Presque noir bleuté */
    );
}

section:nth-of-type(even) {
    background: linear-gradient(
            180deg,
            #05060a 0%,   /* Presque noir bleuté */
            #101122 50%,  /* Bleu-noir */
            #1a1d33 100%  /* Bleu très sombre */
    );
}



/* Hero */
.hero > .container{
    display:grid;grid-template-columns:1.5fr 1fr;gap:2rem;align-items:center;
}
.hero h1{font-size:clamp(2rem,4vw,3rem);margin:0}
.title{color:var(--primary);margin:.25rem 0 0;font-weight:700}
.muted{color:var(--text-dim)}
.about{line-height:1.7}
.chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.chip{background-color:var(--surface-2);color:var(--text);padding:.4rem .7rem;border-radius:999px;border:1px solid var(--border);font-size:.9rem}
.hero-right{display:grid;place-items:center}
.avatar{width:220px;height:220px;border-radius:50%;background:linear-gradient(135deg,var(--surface-2),#111);
    border:2px solid var(--border);box-shadow:0 6px 30px rgba(0,0,0,.4)}
@media (max-width:900px){
    .hero > .container{grid-template-columns:1fr;text-align:left}
    .hero-right{order:-1}
}

/* Grid / Cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{background-color:var(--surface-2);border:1px solid var(--border);border-radius:1rem;overflow:hidden;color:var(--text)}
.card .thumb{
    position: relative;                 /* ← INDISPENSABLE */
    height: 190px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(120deg,#0f0f12,#131318); /* fallback */
    overflow: hidden;
}

.card .thumb > img.thumb-img{
    position: absolute; inset: 0;       /* colle l’image aux 4 bords */
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}



.card .content{padding:1rem;display:grid;gap:.75rem}
.pill{background:#0f0f14;border:1px solid var(--border);padding:.35rem .6rem;border-radius:.6rem;color:var(--text)}
.btn{display:inline-block;text-decoration:none;background-color:var(--primary);color:#fff;padding:.55rem .9rem;border-radius:.7rem;border:0;cursor:pointer;margin-top:1rem}
@media (max-width:1100px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.grid{grid-template-columns:1fr}}



/* Timeline */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:25px;top:0;bottom:0;width:2px;background:var(--border)}
.timeline .item{display:grid;grid-template-columns:30px 1fr;gap:1rem;padding:.5rem 0 1.2rem}
.timeline .dot{width:14px;height:14px;border-radius:50%;background:var(--primary);margin-top:.35rem;box-shadow:0 0 0 4px rgba(93,76,222,.15)}
.timeline .body{background-color:var(--surface-2);border:1px solid var(--border);border-radius:.9rem;padding:.9rem;color:var(--text)}


/* Layout contact */
.contact-wrap{
    display:grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 1.2rem;
}
@media (max-width: 980px){
    .contact-wrap{ grid-template-columns: 1fr; }
}

/* Panneau info (verre + gradient) */
.contact-side{
    background:
            radial-gradient(800px 300px at 0% 0%, #1a1d33 0%, transparent 60%),
            linear-gradient(180deg, #101122 0%, #0b0b0f 100%);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.2rem 1.1rem;
    color: var(--text);
    box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.contact-side h2{ margin-top:0 }
.contact-meta{ list-style:none; padding:0; margin: 1rem 0; display:grid; gap:.5rem; }
.contact-meta li{ display:flex; align-items:center; gap:.6rem; color: var(--text-dim); }
.badges{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top: .5rem; }
.badge{
    background: color-mix(in oklab, var(--primary) 22%, #0f1022);
    border: 1px solid var(--border);
    color: #e9e9ff;
    padding: .35rem .6rem;
    border-radius: .6rem;
    font-size: .85rem;
}

/* Carte formulaire */
.contact-main .card{
    background: linear-gradient(180deg, #0e0e14 0%, #0b0b10 100%);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1rem;
}
/* ——— Form premium ——— */
.form-pro { gap: 1.6rem; }

/* Label flottant solide (nécessite placeholder=" ") */
.field { position: relative; display: grid; gap: .35rem; margin-bottom: 0.8rem; }
.field.floating input,
.field.floating textarea {
    background: #0f1016;
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: .9rem;
    padding: 1.15rem .95rem .9rem;
    transition: border-color .2s, box-shadow .2s, transform .02s;
}
.field.floating label {
    position: absolute;
    left: .9rem; top: 1rem;
    color: var(--text-dim);
    font-size: .95rem;
    pointer-events: none;
    transition: transform .15s ease, color .2s ease, font-size .15s ease, top .15s ease;
}
.field.floating input:focus,
.field.floating textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(93,76,222,.22);
}
.field.floating input:focus + label,
.field.floating textarea:focus + label,
.field.floating input:not(:placeholder-shown) + label,
.field.floating textarea:not(:placeholder-shown) + label {
    top: .5rem;
    transform: translateY(-45%);
    font-size: .78rem;
    color: color-mix(in oklab, var(--primary) 80%, #cfe);
}

/* Messages d’aide/erreur */
.hint { color: var(--text-dim); }
.field-msg { color: #ffb3b3; margin-top: .2rem; }

/* États d’erreur sur champ */
.field.invalid input,
.field.invalid textarea { border-color: #ff9c9c !important; }
.field.invalid input:focus,
.field.invalid textarea:focus { box-shadow: 0 0 0 3px rgba(255,120,120,.25) !important; }

/* Consent */
.consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; color: var(--text-dim); }
.consent input { margin-top: .2rem; }

/* Bouton + spinner */
.btn.btn-accent{
    width:100%;
    background: linear-gradient(90deg, #5161ff, #3a46d6);
    color:#fff; border:0; border-radius:.95rem;
    padding:.95rem 1.1rem; cursor:pointer;
    font-weight:700; letter-spacing:.2px;
    transition: filter .2s, transform .02s, opacity .2s;
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
}
.btn.btn-accent:hover{ filter: brightness(1.08); }
.btn.btn-accent:active{ transform: translateY(1px); }
.btn[disabled]{ opacity:.7; cursor: not-allowed; }

.spinner{
    width: 1em; height: 1em; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.25);
    border-top-color: #fff;
    animation: spin 1s linear infinite;
    display: none;
}
.btn.loading .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* États globaux */
.form-state { margin:.7rem 0 0; font-size:.95rem; }
.form-state.sending { color: #cfd6ff; }
.form-state.success{
    color:#dff7df;
    background: linear-gradient(90deg, color-mix(in oklab, var(--primary) 30%, #1a1d33), #111118);
    border:1px solid var(--border);
    padding:.7rem .9rem; border-radius:.7rem;
}
.form-state.error { color:#ffd1d1; }



/* Footer */
.site-footer{border-top:1px solid var(--border);margin-top:3rem}
.footer-inner{padding:2rem 0;display:flex;gap:1rem;justify-content:space-between;align-items:center}
.footer-inner p{color:var(--text-dim);margin:0}
.footer-inner .links{display:flex;gap:.75rem;flex-wrap:wrap}
.footer-inner a{color:var(--text-dim);text-decoration:none}
.footer-inner a:hover{color:var(--text)}

/* Accessibilité */
:focus-visible{outline:3px solid var(--primary);outline-offset:2px}


/* Avatar (rond) */
.avatar{
    width: 220px;
    height: 220px;
    border-radius: 50%;
    overflow: hidden;                    /* coupe l’image dans le cercle */
    border: 2px solid var(--border);
    background: linear-gradient(135deg, var(--surface-2), #111); /* fallback si l'image ne charge pas */
    box-shadow: 0 6px 30px rgba(0,0,0,.4);
}

/* L’image à l’intérieur */
.avatar img{
    width: 100%;
    height: 100%;
    object-position: 50% 35% !important;
    display: block;
    object-fit: cover;                   /* couvre sans déformer */
    object-position: center;             /* centre le cadrage */
}

/* (Option) halo subtil au survol */
.avatar:hover{
    box-shadow: 0 0 0 4px rgba(93,76,222,.22), 0 12px 40px rgba(0,0,0,.45);
    border-color: color-mix(in oklab, var(--primary) 35%, var(--border));
}

.brand img {
    vertical-align: middle;
    margin-right: 15px;
}
.brand {
    font-weight: bold;
    font-size: 1.2em;
    text-decoration: none;
    color: white; /* ou ta couleur */
}
.brand span {
    color: #4e6ef2; /* couleur du 'Tech' */
}