:root{
    --bg: #0e1320;
    --text: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.70);
    --border: rgba(255,255,255,.12);

    --panel: rgba(0,0,0,.22);
    --shadow: rgba(0,0,0,.45);

    --blue: rgba(120,180,255,.95);
    --violet: rgba(170,120,255,.95);
    --accent: rgba(120,180,255,.90);

    --radius: 18px;
    --radius2: 22px;

    /* hauteur approximative du header (adaptable) */
    --headerH: 92px;
}

*{ box-sizing:border-box; }

html{
    background:
            radial-gradient(900px 460px at 18% -10%, rgba(120,180,255,.18), transparent 60%),
            radial-gradient(820px 420px at 82% 0%, rgba(170,120,255,.14), transparent 60%),
            linear-gradient(180deg, rgba(255,255,255,.05), transparent 35%),
            #0b0f18;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
}

body{
    position: relative;
    min-height: calc(100vh - 100px);
    margin: 0;
    background: transparent;  /* IMPORTANT */
    color: rgba(255,255,255,.92);
    overflow-x: hidden;
    font: 14px/1.4 system-ui, Segoe UI, Roboto, Arial;
    padding-bottom: 100px;
    box-sizing: content-box;
}


a{
    color: rgba(190,230,255,.95);
    text-decoration:none;
    border-bottom: 1px solid rgba(120,180,255,.45);
}
a:hover{ opacity:.92; }

.wrap{
    width: min(1200px, calc(100% - 44px));
    margin: 0 auto;
}

/* HEADER toujours visible */
header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    backdrop-filter: blur(10px);
    background: linear-gradient(to bottom, rgba(8,12,20,.82), rgba(8,12,20,.48));
    border-bottom: 1px solid rgba(255,255,255,.10);
}

/* layout interne du header */
.topbar{
    padding: 22px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 14px;
}

.brand{
    display:flex;
    flex-direction:column;
    gap: 2px;
}

h1{
    margin:0;
    margin-bottom: 4px;
    font-size: clamp(20px, 2.6vw, 28px);
    letter-spacing:.02em;
    line-height:1.15;
}

.subtitle{
    margin:0;
    color: var(--muted);
    font-size: 13.5px;
}

.chips{
    display:flex;
    flex-wrap:wrap;
    gap: 10px;
    justify-content:flex-end;
}

.chip{
    display:inline-flex;
    align-items:center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.82);
    font-size: 12.5px;
    white-space: nowrap;
}

.chipDot{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(120,180,255,.9), rgba(170,120,255,.9));
    box-shadow: 0 0 10px rgba(120,180,255,.35);
    flex: 0 0 auto;
}

/* IMPORTANT : laisse de la place au header fixed */
main{
    position: relative;
    z-index: 1;
    padding: calc(var(--headerH) + 40px) 0 40px;
}

/* intro */
.intro{
    margin-top: 10px;
    padding: 18px 18px;
    border-radius: var(--radius2);
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.18);
    box-shadow: 0 22px 70px rgba(0,0,0,.35);
}

.muted{ color: var(--muted); }

.grid{
    display:grid;
    gap: 18px;
    margin-top: 30px;
}
@media (min-width: 920px){
    .grid{ grid-template-columns: 1fr 1fr; }
}

/* Cards */
section.card{
    position: relative;
    border-radius: var(--radius2);
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.22);
    box-shadow: 0 22px 70px rgba(0,0,0,.35);
    overflow:hidden;
}

section.card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width: 4px;
    background: linear-gradient(180deg, rgba(120,180,255,.95), rgba(170,120,255,.85));
    opacity: .9;
}

.cardInner{
    padding: 18px 18px 16px 18px;
    margin-left: 6px; /* place pour la barre */
}

.langRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.langBadge{
    display:inline-flex;
    align-items:center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255,255,255,.78);
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
}
.langBadge .chipDot{ width:7px; height:7px; }

h2{
    margin: 6px 0 10px;
    font-size: 18px;
    letter-spacing:.01em;
}

h3{
    margin: 16px 0 8px;
    font-size: 15px;
    color: rgba(255,255,255,.92);
}

p{ margin: 8px 0; color: rgba(255,255,255,.86); }

.divider{
    height:1px;
    background: rgba(255,255,255,.10);
    margin: 18px 0;
}

.notice{
    margin-top: 20px;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(120,180,255,.18);
    background: linear-gradient(135deg, rgba(120,180,255,.08), rgba(0,0,0,.10));
}
.small{ font-size: 13px; }

/* Footer */
footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    padding: 26px 0 26px;
    color: rgba(255,255,255,.70);
    font-size: 13.5px;
    border-top: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.30));
}

.footerRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap: 10px;
}

.miniLinks{
    display:flex;
    gap: 14px;
    flex-wrap:wrap;
}

/* Mobile : chips qui passent dessous proprement */
@media (max-width: 760px){
    :root{ --headerH: 124px; } /* header plus haut quand ça wrap */
    .topbar{ flex-direction: column; align-items:flex-start; }
    .chips{ justify-content:flex-start; }
}