/*
 * Accès au Garage (interrupteur admin « Garage ») : bloc d'accueil, bouton d'en-tête, page /garage.
 * Charte : rouge #a51e16, page #f5f4ef, ivoire #f7f2e8, boutons 8 px, cartes 14 px.
 * Images : public/images/garage/ (décor de l'atelier fourni par le propriétaire, aucune photo d'annonce).
 */
.gx-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: #a51e16;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Textes qui défilent : 4 phrases, 3 s chacune (12 s la boucle). */
.gx-rot {
    position: relative;
    height: 1.7em;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
    font-weight: 600;
    font-size: 1.15rem;
    color: #fff;
}
.gx-rot li {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    white-space: nowrap;
    animation: gx-rot 12s infinite both;
}
.gx-rot li:nth-child(2) {
    animation-delay: 3s;
}
.gx-rot li:nth-child(3) {
    animation-delay: 6s;
}
.gx-rot li:nth-child(4) {
    animation-delay: 9s;
}
.gx-rot--3 li {
    animation-name: gx-rot-3;
    animation-duration: 9s;
}
@keyframes gx-rot {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    4%,
    21% {
        opacity: 1;
        transform: none;
    }
    25%,
    100% {
        opacity: 0;
    }
}
@keyframes gx-rot-3 {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    5%,
    28% {
        opacity: 1;
        transform: none;
    }
    33.3%,
    100% {
        opacity: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .gx-rot {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem 1rem;
        height: auto;
        font-size: 1rem;
    }
    .gx-rot li {
        position: static;
        opacity: 1;
        white-space: normal;
        animation: none;
    }
}

.gx-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.gx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border: 2px solid transparent;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.gx-btn--primary {
    background: #a51e16;
    color: #fff;
}
.gx-btn--primary:hover,
.gx-btn--primary:focus-visible {
    background: #86150f;
    color: #fff;
}
.gx-btn--ghost {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
    color: #fff;
}
.gx-btn--ghost:hover,
.gx-btn--ghost:focus-visible {
    background: #fff;
    color: #1f1a14;
}
.gx-btn--lg {
    min-height: 54px;
    padding: 0 32px;
}
.gx-btn:focus-visible {
    outline: 3px solid #f7f2e8;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px #a51e16;
}

/* Bloc d'accueil et en-tête de la page : photo pleine hauteur, assombrie vers le bas. */
.gx-home,
.gx-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 14px;
    background: #2b2118;
    color: #fff;
}
.gx-home {
    margin: 1.5rem 0;
}
.gx-home__img,
.gx-hero__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 30% center;
}
.gx-home__shade,
.gx-hero__shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, rgba(20, 15, 10, 0.3) 0%, rgba(20, 15, 10, 0.88) 100%);
}
/* Bandeau de /garage : atelier aux affiches et plaques émaillées. Cadrage sur les affiches,
   voile plus léger en haut (décor visible) et plus dense en bas à gauche (texte blanc lisible). */
.gx-hero--affiches .gx-hero__img {
    object-position: 32% 30%;
}
.gx-hero--affiches .gx-hero__shade {
    background:
        linear-gradient(to right, rgba(20, 15, 10, 0.45) 0%, rgba(20, 15, 10, 0.15) 55%, rgba(20, 15, 10, 0) 75%),
        linear-gradient(to bottom, rgba(20, 15, 10, 0.12) 0%, rgba(20, 15, 10, 0.35) 45%, rgba(20, 15, 10, 0.85) 100%);
}
.gx-home__body,
.gx-hero__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    min-height: 340px;
    justify-content: flex-end;
    padding: 28px 20px;
    max-width: 640px;
}
.gx-home__title,
.gx-hero__title {
    margin: 0;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.15;
    color: #fff;
}
.gx-home__text,
.gx-hero__text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: #f7f2e8;
}
/* Renault 8 Gordini détourée (accord du propriétaire, plaque masquée) : à droite sur la photo, entre en glissant. */
.gx-home__vehicle {
    position: absolute;
    right: 0;
    bottom: 4%;
    z-index: -1;
    width: min(41.4%, 378px); /* -10 % (demande du 19/10) */
    height: auto;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.45));
    animation: gx-slide-in 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes gx-slide-in {
    from {
        opacity: 0;
        transform: translateX(80%);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .gx-home__vehicle {
        animation: none;
    }
}
/* Petit écran : pas la place pour la voiture à côté du texte et des boutons, on la masque. */
@media (max-width: 575.98px) {
    .gx-home__vehicle {
        display: none;
    }
}

/* Fenêtre modale de la démo vidéo */
.gx-modal {
    width: min(960px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: #14100b;
    color: #fff;
    overflow: hidden;
}
.gx-modal::backdrop {
    background: rgba(10, 8, 5, 0.75);
}
.gx-modal__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 8px 8px 16px;
}
.gx-modal__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}
.gx-modal__close {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}
.gx-modal__close:hover,
.gx-modal__close:focus-visible {
    background: #fff;
    color: #14100b;
}
.gx-modal__video {
    display: block;
    width: 100%;
    max-height: calc(100vh - 100px);
    background: #000;
}

/* Page /garage */
.gx-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 1rem 0 3rem;
    font-family: "Plus Jakarta Sans", sans-serif;
    color: #1f1a14;
}
.gx-hero__body {
    min-height: 380px;
}
.gx-status {
    min-height: 1.5em;
    margin: 0.5rem 0;
    font-weight: 600;
    color: #1f7a45;
}
.gx-status:empty {
    min-height: 0;
    margin: 0;
}
.gx-soon {
    margin: 1rem 0;
    padding: 20px;
    border-radius: 14px;
    background: #f7f2e8;
    border: 1px solid #e6dcc6;
}
.gx-soon[hidden] {
    display: none;
}
.gx-soon p:last-child {
    margin-bottom: 0;
}
.gx-section {
    margin: 2rem 0;
}
.gx-h2 {
    margin: 0 0 0.75rem;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
}
.gx-cards {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
}
.gx-card {
    padding: 20px;
    border-radius: 14px;
    background: #f7f2e8;
    border: 1px solid #e6dcc6;
}
.gx-card h3 {
    margin: 0 0 0.4rem;
    font-size: 1.1rem;
    font-weight: 600;
}
.gx-card p {
    margin: 0;
    line-height: 1.5;
}
.gx-list {
    padding-left: 1.2rem;
    line-height: 1.6;
}
.gx-cta {
    margin: 2.5rem 0 0;
    text-align: center;
}
.gx-cta p {
    margin: 0.75rem 0 0;
}
.gx-cta a:not(.gx-btn) {
    color: #a51e16;
    font-weight: 600;
}

@media (min-width: 768px) {
    .gx-home__body,
    .gx-hero__body {
        padding: 40px;
    }
    .gx-home__title,
    .gx-hero__title {
        font-size: 2.6rem;
    }
    .gx-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Bouton « Mon garage » de l'en-tête ordinateur : morceau de l'atelier sous un voile chaud sombre (photo lisible,
   texte blanc contrasté), léger glissement au survol. */
.gx-hdr,
.tp-main-menu-content a.gx-hdr {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 128px;
    min-height: 48px;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid #5a3d24;
    background-image: linear-gradient(rgba(38, 22, 10, 0.28), rgba(38, 22, 10, 0.6)), url("/images/garage/atelier-bouton.jpg");
    background-size: auto, 160% auto;
    background-position: 0 0, 0% 50%;
    background-repeat: no-repeat;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    text-transform: none;
    transition: background-position 0.6s ease;
}
.gx-hdr:hover,
.gx-hdr:focus-visible {
    background-position: 0 0, 100% 50%;
    border-color: #a51e16;
    color: #fff;
}
.gx-hdr:focus-visible {
    outline: 3px solid #a51e16;
    outline-offset: 2px;
}
.gx-hdr__title,
.tp-main-menu-content .gx-hdr__title {
    display: block;
    text-transform: none;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
}
.gx-hdr__sub,
.tp-main-menu-content .gx-hdr__sub {
    display: block;
    text-transform: none;
    margin-top: 2px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #a51e16;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    text-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
    .gx-hdr {
        transition: none;
    }
}

/* Barre de menu des pages secondaires (déjà pleine) : quand le bouton « Mon garage » s'y ajoute, on resserre
   l'espace entre les entrées pour ne pas pousser « Se connecter » hors de l'écran. */
@media (min-width: 992px) and (max-width: 1799.98px) {
    .tp-header-menu > nav > ul.gx-tight > li {
        margin: 0 8px;
    }
}