:root{
    --bg1:#0f172a;
    --bg2:#0b1220;
    --accent:#ffb86b;
    --muted:#99a0b3;
}

*{box-sizing:border-box}
html,body{height:100%}

header {
    width: 100%;
    padding: 1rem 2rem;
    background: rgba(11,18,32,0.8);
    color: #e6eef8;
    text-align: left;
    position: fixed;
    top: -20px;
    left: 0;
    z-index: 1000;
}
body{
    margin:0;
    font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background:linear-gradient(180deg,var(--bg1),var(--bg2));
    color:#e6eef8;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:2rem;
}

.card{
    width:100%;
    max-width:760px;
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-radius:16px;
    padding:2.25rem;
    box-shadow: 0 10px 30px rgba(2,6,23,0.6);
    text-align:center;
    border:1px solid rgba(255,255,255,0.04);
}

.emoji {
    font-size:64px;
    margin-bottom:0.5rem;
    display:inline-block;
    transform-origin:center;
    animation: bob 2.5s ease-in-out infinite;
}
@keyframes bob{
    0%,100%{ transform: translateY(0) }
    50%{ transform: translateY(-8px) }
}

h1{
    margin:0.25rem 0 0.5rem;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    letter-spacing: -0.02em;
}

p.lead{
    margin:0 0 1.25rem;
    color:var(--muted);
    font-size:1rem;
}

.meta{
    margin-top:1rem;
    display:flex;
    gap:1rem;
    justify-content:center;
    flex-wrap:wrap;
    color:var(--muted);
    font-size:0.95rem;
    margin-bottom: 1rem;
}

a.cta{
    display:inline-block;
    margin-top:1.5rem;
    padding:0.6rem 1.2rem;
    border-radius:10px;
    background:linear-gradient(90deg,#ffb86b,#ff9e6a 80%);
    color:#0b1220;
    text-decoration:none;
    font-weight:600;
    box-shadow: 0 6px 20px rgba(255,154,80,0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 0.25rem;
}
a.cta:hover{
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255,154,80,0.25);
}

footer{ margin-top:1.5rem; color:var(--muted); font-size:0.85rem }

@media (max-width:420px){
    .card{ padding:1.2rem }
    .emoji{ font-size:48px }
}

.projet{
    width:100%;
    max-height: 100%;
    max-width:250px;
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-radius:16px;
    padding:1rem;
    box-shadow: 0 10px 30px rgba(2,6,23,0.6);
    text-align:center;
    border:1px solid rgba(255,255,255,0.04);
}

.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.grid-container {
    display: grid;
    grid-template-columns: 250px 250px; /* largeur de chaque colonne */
    gap: 100px;
}

.grid-container > div {
    padding: 1rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    text-align: center;
}