/* doc-project | projet/assets/css/motor-gallery-modal.css | styles dedies a la sur-modale galerie moteur avec ouverture depuis le bouton plus des cartes moteur, bandeau horizontal de miniatures en haut, image principale occupant toute la hauteur restante en contain sans recadrage, restitution lisible du prix et du descriptif du moteur, overlay sombre, accessibilite clavier, rendu responsive premium et forçage d une couleur de texte sombre pour le titre et le contenu afin d eviter l heritage blanc du hero */
.motor-gallery-modal[hidden] {
    display: none;
}

.motor-gallery-modal {
    position: fixed;
    inset: 0;
    z-index: 1150;
    display: grid;
    place-items: center;
    padding: 24px;
}

.motor-gallery-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 13, 10, 0.82);
}

.motor-gallery-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(960px, 100%);
    height: min(90vh, 960px);
    max-height: min(90vh, 960px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    padding: 24px;
    color: var(--text, #1f1a17);
}

.motor-gallery-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: #f4ede3;
    color: var(--accent-dark);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.motor-gallery-modal__header {
    flex: 0 0 auto;
    padding-right: 52px;
}

.motor-gallery-modal__header .eyebrow,
.motor-gallery-modal__header h2,
.motor-gallery-modal__header p,
#motor-gallery-title {
    color: var(--text, #1f1a17);
}

.motor-gallery-modal__subtitle {
    margin: 0;
    color: var(--muted);
}

.motor-gallery-modal__thumbs {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 2px 2px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.motor-gallery-modal__thumbs[hidden] {
    display: none;
}

.motor-gallery-modal__stage {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

.motor-gallery-modal__stage-media {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: #eadfce;
}

.motor-gallery-modal__thumb {
    appearance: none;
    flex: 0 0 96px;
    display: block;
    width: 96px;
    padding: 0;
    border: 1px solid rgba(138, 90, 43, 0.18);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
}

.motor-gallery-modal__thumb:hover,
.motor-gallery-modal__thumb:focus-visible {
    border-color: rgba(138, 90, 43, 0.4);
    box-shadow: 0 0 0 3px rgba(138, 90, 43, 0.12);
    outline: none;
}

.motor-gallery-modal__thumb.is-active {
    border-color: rgba(138, 90, 43, 0.56);
    box-shadow: 0 0 0 3px rgba(138, 90, 43, 0.14);
}

.motor-gallery-modal__thumb-media {
    aspect-ratio: 4 / 3;
    min-height: 88px;
    background: #efe6da;
}

.motor-gallery-modal__thumb img {
    width: 100%;
    height: 100%;
}

#motor-gallery-caption {
    flex: 0 0 auto;
    color: var(--muted);
    text-align: center;
}

@media (max-width: 720px) {
    .motor-gallery-modal {
        padding: 12px;
    }

    .motor-gallery-modal__dialog {
        padding: 18px;
    }

    .motor-gallery-modal__thumb {
        flex-basis: 84px;
        width: 84px;
    }
}