/* ================================
ACCUEIL : sans boîte, sur le fond commun du site.
La barre i3 en bas, des petites fenêtres de code flottantes, les enceintes qui passent,
le texte et l'étoile de photos au centre.
================================ */

/* === i3 (fond) ===
   couleurs de ma config i3 : bordure active #8b8b8b, inactive #383c4a,
   gaps 6 px, barre en bas #383c4a avec séparateurs violets */
.i3 {
    --gap: 6px;
    --barre: 1.5rem;
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    font-family: "DejaVu Sans Mono", ui-monospace, monospace;
}

/* la barre i3, juste au-dessus du bandeau de la police */
.i3-barre {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.1rem;
    height: var(--barre);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 0.6rem;
    font-family: "Noto Sans", sans-serif;
    font-size: 0.72rem;
    color: #ffffff;
    background: #383c4a;
}
.i3-bureaux { display: flex; height: 100%; }
.i3-bureaux b, .i3-bureaux i {
    display: grid;
    place-items: center;
    min-width: 1.6rem;
    font-style: normal;
    font-weight: normal;
    border: 1px solid #383c4a;
    color: #b0b5bd;
}
.i3-bureaux b { background: #b0b5bd; color: #383c4a; border-color: #8b8b8b; }
.i3-statut em { font-style: normal; color: #e345ff; margin: 0 0.4rem; }


/* === LE CONTENU, SANS BOÎTE === */
.boite-accueil {
    min-height: 0;
    padding: 1rem 0 2rem;
    background: none;
    border: 0;
}

.accueil { text-align: center; }

.accueil-texte {
    max-width: 700px;
    margin: 0 auto;
    padding: 1.1rem 1.6rem;
    font-family: var(--police-titre);
    font-size: clamp(1.2rem, 1.9vw, 1.5rem);
    line-height: 1.55;
    letter-spacing: 0.5px;
    color: var(--rose-clair);
    background: rgba(28, 4, 32, 0.92);
    border: 1px solid var(--rose);
    box-shadow: 8px 8px 0 rgba(241, 187, 187, 0.45);
}
.accueil-texte a { color: var(--rose); }

/* l'étoile : 4 fois la même découpe, retournée en miroir */
.etoile {
    --decoupe: polygon(100% 100%, 62% 8%, 0% 0%, 8% 62%);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: min(100%, 660px);
    margin: 2rem auto;
}
.etoile img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    clip-path: var(--decoupe);
    transition: filter 0.3s;
    will-change: transform;   /* chaque photo sur son propre calque : pas de redessin partiel au défilement */
}
.etoile img:hover,
.etoile img:active { filter: brightness(1.2) saturate(1.2); }   /* :active = quand on touche, sur téléphone */
.miroir-horizontal { transform: scaleX(-1); }
.miroir-vertical   { transform: scaleY(-1); }
.miroir-double     { transform: scale(-1); }

.accueil .english {
    display: inline-block;
    max-width: 60ch;
    margin: 0 auto;
    padding: 0.3rem 0.8rem;
    font-size: 0.9rem;
    text-align: center;
    background: rgba(28, 4, 32, 0.8);
    opacity: 1;
}