/* ============================================================
   PAGE FAQ (hub + catégories labels + single faq)
   ============================================================ */

/* ── Hero ── */
.faq-hero {
    position: relative;
    height: 42vh;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--color-bg);
}

.faq-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.faq-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

/* Dégradé noir → transparent en bas du hero */
.faq-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55%;
    background: linear-gradient(to top, var(--color-bg) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 0;
}

.faq-hero__title {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: var(--text-5xl);
    color: var(--color-white);
    text-transform: uppercase;
    text-align: center;
}

/* ── Intro (headline) ── */
.faq-headline {
    padding: 70px 40px 10px;
    text-align: center;
}

.faq-headline__title {
    font-size: var(--text-4xl);
    color: var(--color-white);
    text-transform: uppercase;
    margin: 0 0 12px;
}

.faq-headline__text {
    max-width: 700px;
    margin: 0 auto;
    color: var(--color-text-muted);
}

/* ── Grille des catégories (labels) ── */
.faq-cats {
    padding: 40px 40px 80px;
}

/* flex + justify-center → 3 sur la 1re ligne, 2 centrés sur la 2e */
.faq-cats__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    max-width: var(--container-lg);
    margin: 0 auto;
}

.faq-cats__item {
    position: relative;
    flex: 0 0 calc(33.333% - 11px);
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    text-decoration: none;
    background: var(--color-bg-card);
}

.faq-cats__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Dégradé noir → transparent (bas), retiré au hover */
.faq-cats__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.1) 65%);
    transition: opacity 0.25s ease;
}

.faq-cats__item:hover .faq-cats__img { transform: scale(1.05); }
.faq-cats__item:hover .faq-cats__overlay { opacity: 0; }

.faq-cats__name {
    position: relative;
    z-index: 1;
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    color: var(--color-white);
    text-transform: uppercase;
    text-align: center;
    padding: 0 16px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

/* ── Liste des FAQ d'une catégorie ── */
.faq-list {
    padding: 40px 40px 80px;
}

.faq-list__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    max-width: var(--container-lg);
    margin: 0 auto;
}

.faq-list__item {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: var(--color-bg-card);
}

.faq-list__img {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.faq-list__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.faq-list__title {
    margin: 0;
    padding: 16px;
    font-family: var(--font-heading);
    font-size: var(--text-base);
    color: var(--color-white);
    text-transform: uppercase;
    text-align: center;
}

.faq-list__item:hover .faq-list__title { color: var(--color-primary); }

/* ── Bloc texte + image (pleine largeur) ── */
.faq-textimg__block {
    position: relative;
    padding: 30% 30px 30px 30px;
    background: var(--color-bg-alt) center / cover no-repeat;
}

/* Dégradé pour la lisibilité du texte en bas */
.faq-textimg__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 60%);
}

.faq-textimg__content {
    position: relative;
    z-index: 1;
    max-width: 50%;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

.faq-textimg__title {
    font-size: var(--text-3xl);
    color: var(--color-white);
    text-transform: uppercase;
    margin: 0 0 14px;
}

.faq-textimg__text {
    color: var(--color-white);
    line-height: 1.7;
}

/* ── CTA (Besoin de plus / Besoin d'aide) ── */
.faq-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

.faq-cta__item {
    position: relative;
    padding: 30% 40px 40px 40px;
    overflow: hidden;
    background: var(--color-bg-light) center / cover no-repeat;
    background-image: url('../img/dark-abstract-background.jpg');
}

/* Dégradé noir → transparent en bas (lisibilité du texte) */
.faq-cta__item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 60%);
}

.faq-cta__content {
    position: relative;
    z-index: 1;
    text-align: left;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

.faq-cta__title {
    font-size: var(--text-2xl);
    color: var(--color-white);
    text-transform: uppercase;
    margin: 0 0 10px;
}

.faq-cta__text {
    color: var(--color-white);
    max-width: 460px;
    margin: 0 0 16px;
}

.faq-cta__link {
    display: inline-block;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.18s ease;
}

.faq-cta__link:hover { color: var(--color-primary-alt); text-decoration: underline; }

/* ── Grille des plateformes (compatibilité, logos) ── */
.compat-cats {
    padding: 40px 40px 80px;
}

.compat-cats__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    max-width: var(--container-lg);
    margin: 0 auto;
}

.compat-cats__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    aspect-ratio: 4 / 3;
    padding: 24px;
    text-decoration: none;
    /* même fond que les product cards */
    background: url('../img/background-product-the-g-lab.png') center center / cover no-repeat;
}

.compat-cats__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
}

.compat-cats__logo img {
    max-height: 150px;
    width: auto;
    object-fit: contain;
    transition: transform 0.25s ease;
}

.compat-cats__item:hover .compat-cats__logo img { transform: scale(1.06); }

.compat-cats__name {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--fw-bold);
    color: var(--color-white);
    text-transform: uppercase;
    text-align: center;
}

/* ── Hero de la page plateforme (fond dark-abstract du thème) ── */
.compat-term-hero {
    background: var(--color-bg) url('../img/dark-abstract-background.jpg') center / cover no-repeat;
}

/* ── Produits compatibles (page plateforme) : pleine largeur, 5 colonnes ── */
.compat-products {
    padding: 40px 40px 80px;
}

.compat-products__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
}

.compat-products__grid .product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ── Pagination ── */
.compat-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 50px;
}

.compat-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--color-white);
    font-family: var(--font-heading);
    text-decoration: none;
    transition: all 0.18s ease;
}

.compat-pagination .page-numbers:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.compat-pagination .page-numbers.current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-black);
}

.compat-pagination .page-numbers.dots {
    border-color: transparent;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .faq-cats__item { flex-basis: calc(50% - 8px); }
    .faq-list__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .compat-cats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .compat-products__grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 767px) {
    .faq-hero { height: 32vh; }
    .faq-hero__title { font-size: var(--text-3xl); }
    .faq-headline { padding: 40px var(--gutter) 0; }
    .faq-headline__title { font-size: var(--text-2xl); }

    .faq-cats,
    .faq-list,
    .compat-cats,
    .compat-products { padding: 30px var(--gutter) 50px; }

    .faq-cats__item { flex-basis: 100%; }
    .faq-list__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .compat-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .compat-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

    .faq-textimg__block { padding: 55% 20px 24px; }
    .faq-textimg__content { max-width: 100%; }

    .faq-cta { grid-template-columns: 1fr; }
    .faq-cta__item { padding: 45% var(--gutter) 30px; }
}