/* www.repos.genie23studio.com -- memes couleurs que www.genie23studio.com. */
:root {
    --bg: #0b0b0f;
    --panel: #16161c;
    --panel-2: #1c1c24;
    --bord: #2a2a33;
    --texte: #f2f2f4;
    --doux: #a6a6b0;
    --accent: #40c8dc;
    --accent-doux: rgba(64, 200, 220, 0.14);
    --code: #0e0e13;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    background:
        radial-gradient(1100px 500px at 15% -10%, rgba(64, 200, 220, 0.10), transparent 60%),
        var(--bg);
    color: var(--texte);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* --- En-tete --- */
.entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1040px;
    margin: 0 auto;
    padding: 1.25rem 1.25rem 0;
}
.marque { display: block; line-height: 0; }
.marque img { display: block; height: 40px; width: auto; }
.marque:hover { text-decoration: none; }

main { max-width: 1040px; margin: 0 auto; padding: 0 1.25rem; }

/* --- Introduction --- */
.intro { padding: clamp(2.5rem, 7vw, 4.5rem) 0 clamp(1.75rem, 4vw, 2.5rem); max-width: 720px; }
.intro h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.15; margin: 0 0 1rem; letter-spacing: -0.02em; }
.intro p { color: var(--doux); font-size: 1.05rem; margin: 0; }

/* --- Icones (logos en masque CSS : ils prennent la couleur du texte) --- */
.icone, .puce-icone {
    display: inline-block;
    flex: none;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}
.icone { width: 24px; height: 24px; }
.puce-icone { width: 16px; height: 16px; }

/* --- Onglets --- */
.onglets { display: none; }
html.js .onglets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: .75rem;
    margin-bottom: 1.25rem;
}
.onglet {
    display: flex; flex-direction: column; align-items: center; gap: .55rem;
    text-align: center; font: inherit; color: var(--doux); cursor: pointer;
    background: var(--panel); border: 1px solid var(--bord); border-radius: 14px;
    padding: 1rem 1.1rem;
    transition: border-color .15s, background-color .15s, color .15s, transform .15s;
}
.onglet:hover { border-color: #3a3a46; color: var(--texte); transform: translateY(-1px); }
.onglet[aria-selected="true"] {
    color: var(--texte);
    border-color: var(--accent);
    background: linear-gradient(180deg, var(--accent-doux), var(--panel) 70%);
    box-shadow: 0 0 0 1px var(--accent), 0 10px 30px -18px var(--accent);
}
.onglet__icones { display: flex; justify-content: center; gap: .5rem; }
.onglet[aria-selected="true"] .onglet__icones { color: var(--accent); }
.onglet__nom { font-weight: 600; font-size: .95rem; line-height: 1.3; }
.onglet__outil { font-family: var(--mono); font-size: .75rem; color: var(--doux); }

/* --- Panneaux --- */
.panneau {
    background: var(--panel);
    border: 1px solid var(--bord);
    border-radius: 18px;
    padding: clamp(1.25rem, 3.5vw, 2.25rem);
    margin-bottom: 1.25rem;
}
html.js .panneau { display: none; }
html.js .panneau.actif { display: block; }
.panneau:focus { outline: none; }
.panneau__entete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; }
.panneau h2 { margin: 0; font-size: 1.4rem; letter-spacing: -0.01em; }
.outil {
    font-family: var(--mono); font-size: .8rem; font-weight: 500; color: var(--accent);
    background: var(--accent-doux); border-radius: 6px; padding: .1rem .45rem; margin-left: .35rem;
    vertical-align: middle;
}
.domaine { font-family: var(--mono); font-size: .85rem; }

.distros { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1.1rem 0 .9rem; }
.distros li {
    display: inline-flex; align-items: center; gap: .45rem;
    background: var(--panel-2); border: 1px solid var(--bord); border-radius: 999px;
    padding: .3rem .8rem; font-size: .85rem;
}
.archs { margin: 0 0 .4rem; font-family: var(--mono); font-size: .85rem; color: var(--texte); }
.etiquette {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--doux); margin-right: .4rem;
}
.prerequis { color: var(--doux); margin: 0 0 1.5rem; font-size: .95rem; }
.consigne { color: var(--doux); font-size: .9rem; margin: 0 0 .55rem; }
.prerequis code, .mentions code, .consigne code { font-family: var(--mono); font-size: .85em; color: var(--texte); }

.etapes { list-style: none; counter-reset: etape; padding: 0; margin: 0; }
.etape { counter-increment: etape; position: relative; padding-left: 2.75rem; margin-bottom: 1.4rem; }
.etape::before {
    content: counter(etape);
    position: absolute; left: 0; top: .05rem;
    width: 1.85rem; height: 1.85rem; border-radius: 50%;
    display: grid; place-items: center;
    font-size: .85rem; font-weight: 700; color: var(--bg); background: var(--accent);
}
h3 { font-size: 1rem; margin: 0 0 .55rem; }

.variante, .verif-cle, .annexes { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--bord); }
.annexes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }

/* Les elements de grille ne s'elargissent jamais au-dela de leur colonne. */
.annexes > div { min-width: 0; }

/* --- Verification de la cle (dans chaque panneau) --- */
.empreinte { font-family: var(--mono); font-size: .9rem; letter-spacing: .03em; word-break: break-word; margin: 0 0 .35rem; }
.empreinte .etiquette { display: block; font-size: .85rem; letter-spacing: 0; }

/* --- Pied de page --- */
.pied {
    max-width: 1040px; margin: 0 auto; padding: 1.5rem 1.25rem 2.5rem;
    color: var(--doux); font-size: .85rem; border-top: 1px solid var(--bord);
}
.pied p { margin: .2rem 0; }
.mentions { font-size: .78rem; opacity: .8; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}