/* ===================================
   HERO BANNER - GRILLE FLIP 3D
   =================================== */

.hero-banner {
    background-color: var(--color-gray-dark);
    overflow: hidden;
}

/* Configuration 3D */
.flip-container {
    perspective: 1000px;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
}

.flipper {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
}

.front, span{
color: var(--color-blue-primary);
}

.front, .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: var(--font-weight-semibold);
    background-color: var(--color-gray);
    border-radius: var(--radius-lg);
}

.front {
    background-color: var(--color-white);
    transform: rotateY(0deg);
    font-size: var(--font-size-6xl);
}

.back {
    background-color: var(--color-gray-dark);
    transform: rotateY(180deg);
    overflow: hidden;
    position: relative;
}

/* Style pour la lettre en overlay sur l'image */
.back .letter-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'C1300TamponPatate', sans-serif;
    font-size: var(--font-size-7xl);
    font-weight: var(--font-weight-light);
    color: var(--color-green-primary);
    /* text-shadow: var(--text-shadow-md); */
    pointer-events: none;
    z-index: var(--z-tooltip);
}
.back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Filtres pour noir et blanc + ajustements */
    filter: grayscale(100%) contrast(80%) brightness(120%) hue-rotate(15deg);
}

/* Animation flip */
@keyframes flipAndReturn {
    0%   { transform: rotateY(0deg); }
    25%  { transform: rotateY(180deg); }
    75%  { transform: rotateY(180deg); }
    100% { transform: rotateY(360deg); }
}

.flipper.is-flipping {
    animation: flipAndReturn 3s var(--ease-in-out);
}

/* Grille responsive */
#flip-grid {
    display: grid;
    gap: 0;
    width: 100%;
    height: 100%;
    padding: 0;
}