/* --- Variables CSS --- */
:root {
    --bg-color: white;
    --text-color: #282828;
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-hover: rgba(0, 0, 0, 0.15);
}

.intro {
    padding: 1rem 0;
    text-align: center;
    width: 100%;
    margin: 0;
}

p {
    color: black;
}

/* --- Reset et base --- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    background: url(../images/optimized/horizon.webp) no-repeat center/cover fixed;
    min-height: 100vh;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    padding: 0;
    font-family: "Inconsolata", monospace;
    font-optical-sizing: auto;
}

body {
    padding-top: var(--navbar-height, 80px);
}

/* --- Texte centré --- */
.intro,
footer,
.block {
    text-align: center;
}

/* --- Conteneur centré optimisé --- */
.container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.75rem, 2.5vw, 1.5rem);
    width: min(90%, 900px);
    margin: clamp(1rem, 4vw, 2.5rem) auto;
}

/* --- Liens conteneurs --- */
.container a,
.container .selection-link {
    display: block;
    min-width: 0;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    border: 1px solid black;
    background: transparent;
    /* Pas de fond par défaut */
}

/* --- Images NORMALES par défaut --- */
.box {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: none;
    opacity: 1;
    /* Image visible à 100% */
    filter: none;
    /* Pas de filtre par défaut */
}

/* --- HOVER : Image transparente + floue --- */
.container a:hover {
    backdrop-filter: blur(8px) saturate(200%);
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    background: rgba(255, 255, 255, 0.05);
    /* Très transparent */
}

.container a:hover .box {
    opacity: 0.25;
    /* Image devient très transparente */
    filter: blur(2px) brightness(1);
    /* Flou + luminosité */
}

/* Vignettes texte pour Illustration et Crop. */
.container .selection-link,
.container a.crop-link {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    color: black;
    font-size: clamp(2.5rem, 9vw, 8rem);
    font-weight: 700;
}

.container .selection-link:hover,
.container a.crop-link:hover {
    background: white;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* --- Responsive optimisé --- */
@media (max-width: 768px) {
    :root {
        --navbar-height: 70px;
    }

}

@media (max-width: 480px) {
    .container {
        width: calc(100% - 1.5rem);
        gap: 0.75rem;
    }

    html,
    body {
        background-attachment: scroll;
    }
}