/* =====================================================================
   G6M_ACTUS_MAGAZINE_V1020 (04/09/2026)

   Mise en page « magazine » de la section Actualites de l'accueil, servie
   uniquement quand cette section occupe toute la largeur (voir le commentaire
   du composant news/hub-magazine.php).

   AUCUNE CLASSE TAILWIND NOUVELLE ICI, ET C'EST VOLONTAIRE. Le build Vite du
   site est genere hors ligne ; une classe utilitaire ajoutee dans un gabarit
   sans reconstruction reste inerte, sans la moindre erreur — le piege deja
   rencontre sur les boutons de connexion. Cette feuille est donc autonome :
   elle ne depend que des variables de palette de theme.css.

   Aucune declaration style="..." non plus, dans le composant comme ici : la
   CSP du site les bloque silencieusement depuis le 29/08.
   ===================================================================== */

/* La section porte AUSSI .g6m-container.g6m-container--wide : c'est de la
   que viennent sa largeur maximale et ses marges laterales. Les redefinir ici
   la desalignerait des sections voisines — mesure faite, le conteneur du site
   plafonne a 80rem, puis 96rem au-dela de 1536 px et 112rem au-dela de
   1920 px, la ou une valeur ecrite en dur donnait 1 889 px contre 1 536 px
   pour le bandeau de statistiques juste au-dessus. On ne regle donc ici que
   le rythme vertical et les jetons locaux. */
.g6m-actus {
    --g6m-actus-rayon: 18px;
    --g6m-actus-bord: rgba(255, 255, 255, 0.08);
    --g6m-actus-bord-vif: rgb(var(--color-pink-rgb) / 0.45);
    --g6m-actus-fond: rgba(13, 13, 19, 0.86);
    padding-top: 2rem;
    padding-bottom: 2.25rem;
    box-sizing: border-box;
}

/* ---------- En-tete de section ---------- */

.g6m-actus__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1.35rem;
    padding-bottom: 1rem;
    /* filet degrade : marque la section sans poser un trait plein qui
       trancherait avec le fond a palmiers */
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(
            90deg,
            rgb(var(--color-pink-rgb) / 0.55) 0%,
            rgb(var(--color-violet-rgb) / 0.35) 38%,
            rgba(255, 255, 255, 0.04) 100%
        ) 1;
}

/* le bloc titre doit pouvoir retrecir : sans min-width, son texte impose sa
   largeur intrinseque et repousse la pastille « Toutes les actualites » */
.g6m-actus__head-left {
    min-width: 0;
    flex: 1 1 18rem;
}

.g6m-actus__title {
    margin: 0;
    font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.9rem);
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    background: linear-gradient(92deg, #ff4fa3 0%, #ff0b8b 46%, #8d38ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.g6m-actus__kicker {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: rgb(var(--color-muted-rgb) / 0.95);
}

.g6m-actus__kicker strong {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
}

.g6m-actus__all {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
    padding: 0.5rem 1.05rem;
    border: 1px solid rgb(var(--color-pink-rgb) / 0.4);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ff8ec4;
    background: rgb(var(--color-pink-rgb) / 0.08);
    text-decoration: none;
    transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.g6m-actus__all:hover,
.g6m-actus__all:focus-visible {
    color: #fff;
    border-color: rgb(var(--color-pink-rgb) / 0.85);
    background: rgb(var(--color-pink-rgb) / 0.18);
    box-shadow: 0 0 18px rgb(var(--color-pink-rgb) / 0.3);
}

.g6m-actus__all-arrow {
    transition: transform 180ms ease;
}

.g6m-actus__all:hover .g6m-actus__all-arrow {
    transform: translateX(3px);
}

/* ---------- Grille ---------- */

.g6m-actus__grid {
    display: grid;
    gap: 1.15rem;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
}

@media (min-width: 768px) {
    .g6m-actus__grid {
        gap: 1.25rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* la une passe en pleine largeur tant qu'il n'y a que deux colonnes :
       la reduire a une demi-colonne la rendrait indistinguable des autres */
    .g6m-actus-card--lead {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1280px) {
    .g6m-actus__grid {
        gap: 1.35rem;
        /* 1,45fr pour la une : assez pour un visuel 16/9 confortable, sans
           ecraser les deux colonnes secondaires */
        grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    .g6m-actus-card--lead {
        grid-column: 1;
        grid-row: 1 / span 2;
    }
}

/* ---------- Carte ---------- */

.g6m-actus-card {
    position: relative;
    display: flex;
    min-width: 0;
    border: 1px solid var(--g6m-actus-bord);
    border-radius: var(--g6m-actus-rayon);
    background: var(--g6m-actus-fond);
    overflow: hidden;
    isolation: isolate;
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.g6m-actus-card:hover,
.g6m-actus-card:focus-within {
    transform: translateY(-3px);
    border-color: var(--g6m-actus-bord-vif);
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.45),
        0 0 22px rgb(var(--color-pink-rgb) / 0.18);
}

.g6m-actus-card__link {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.g6m-actus-card__media {
    position: relative;
    overflow: hidden;
    background: rgb(var(--color-bg-elevated-rgb));
    aspect-ratio: 16 / 9;
    flex: none;
}

.g6m-actus-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 420ms ease;
}

.g6m-actus-card:hover .g6m-actus-card__img {
    transform: scale(1.05);
}

/* voile bas : garantit la lisibilite des pastilles quelle que soit l'image */
.g6m-actus-card__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(5, 5, 10, 0.55) 0%,
        rgba(5, 5, 10, 0) 42%,
        rgba(5, 5, 10, 0.15) 100%
    );
    pointer-events: none;
}

.g6m-actus-card__flags {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    z-index: 1;
}

.g6m-actus-badge,
.g6m-actus-flag {
    display: inline-block;
    padding: 0.22rem 0.6rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    backdrop-filter: blur(6px);
}

.g6m-actus-badge--officiel {
    color: #ff8ec4;
    border-color: rgb(var(--color-pink-rgb) / 0.5);
    background: rgb(var(--color-pink-rgb) / 0.22);
}

.g6m-actus-badge--communaute {
    color: #c4a4ff;
    border-color: rgb(var(--color-violet-rgb) / 0.5);
    background: rgb(var(--color-violet-rgb) / 0.22);
}

.g6m-actus-badge--rumeurs {
    color: #ffdf6b;
    border-color: rgb(var(--color-yellow-rgb) / 0.5);
    background: rgb(var(--color-yellow-rgb) / 0.18);
}

.g6m-actus-badge--news {
    color: #7ce8ff;
    border-color: rgb(var(--color-cyan-rgb) / 0.5);
    background: rgb(var(--color-cyan-rgb) / 0.2);
}

.g6m-actus-badge--neutre {
    color: rgb(var(--color-muted-rgb) / 1);
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.1);
}

.g6m-actus-flag--une {
    color: #06060c;
    border-color: rgb(var(--color-yellow-rgb) / 0.75);
    background: rgb(var(--color-yellow-rgb) / 0.92);
}

/* ---------- Corps de carte ---------- */

.g6m-actus-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.95rem 1rem 1.05rem;
}

.g6m-actus-card__title {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.3;
    color: #eaf4ff;
    transition: color 180ms ease;
    /* deux lignes maximum : au-dela, les cartes secondaires se desalignent */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.g6m-actus-card:hover .g6m-actus-card__title {
    color: #7ce8ff;
}

.g6m-actus-card__excerpt {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: rgb(var(--color-muted-rgb) / 0.95);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* pousse les statistiques en bas : les cartes d'une meme rangee alignent
   leur pied meme si leurs titres n'ont pas le meme nombre de lignes */
.g6m-actus-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.85rem;
    margin-top: auto;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.72rem;
    color: rgb(var(--color-muted-rgb) / 0.9);
}

.g6m-actus-meta__date {
    font-weight: 600;
    color: #ff6fb4;
    white-space: nowrap;
}

.g6m-actus-meta__item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.g6m-actus-meta__icon {
    flex: none;
    /* le coeur de XenForo impose svg{fill:currentcolor} ; sans ce rappel les
       icones filaires se remplissent en aplat */
    fill: none;
    stroke: currentColor;
}

/* ---------- Specificites de la une ---------- */

.g6m-actus-card--lead {
    border-color: rgb(var(--color-pink-rgb) / 0.25);
}

.g6m-actus-card--lead .g6m-actus-card__title {
    font-size: clamp(1.05rem, 0.85rem + 0.6vw, 1.5rem);
    -webkit-line-clamp: 3;
}

.g6m-actus-card--lead .g6m-actus-card__excerpt {
    font-size: 0.875rem;
    -webkit-line-clamp: 4;
}

.g6m-actus-card--lead .g6m-actus-card__body {
    gap: 0.7rem;
    padding: 1.15rem 1.25rem 1.3rem;
}

.g6m-actus-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    margin-top: 0.2rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #ff8ec4;
    transition: color 180ms ease, gap 180ms ease;
}

.g6m-actus-card--lead:hover .g6m-actus-card__cta {
    color: #fff;
    gap: 0.65rem;
}

@media (min-width: 1280px) {
    /* Sur trois colonnes, la une occupe deux rangees : son visuel doit
       absorber la hauteur restante, sinon un vide apparait sous le texte.
       On libere donc le rapport 16/9 fixe et on laisse le media grandir. */
    .g6m-actus-card--lead .g6m-actus-card__media {
        aspect-ratio: auto;
        flex: 1 1 auto;
        min-height: 260px;
    }

    /* G6M_UNE_VIDES_V1022 (09/09/2026) — les lignes qui manquaient.
       L'intention ci-dessus etait juste, mais elle ne suffisait pas : la
       BOITE grandissait sans que son contenu suive, et le mou se retrouvait
       partage en deux vides de 115 px, l'un sous l'image, l'autre au-dessus
       de la ligne de meta. Mesure du 9/09 a 1440 px : carte 732, media 399,
       image 284, et margin-top calcule de 115,141 px sur .g6m-actus-meta.

       1. L'image ne remplissait pas sa boite.
          ⛔ Le !important est necessaire, ce n'est pas de la paresse :
             app.css porte un garde-fou global
                 img:not(.g6m-site-logo):not(.site-logo):not(...) {height:auto}
             dont la specificite est (0,3,1) — chaque :not() compte comme une
             classe — contre (0,1,0) pour .g6m-actus-card__img. Le height:100%
             du composant perdait donc TOUJOURS, sans erreur ni signe. */
    .g6m-actus-card--lead .g6m-actus-card__media > .g6m-actus-card__img {
        width: 100% !important;
        height: 100% !important;
    }

    /*    2. Le mou doit etre reparti, PAS concentre.
             V1021 laissait l'image tout absorber : elle montait a 514 px,
             soit 70 % de la carte, et « cover » n'affichait plus que 55 % de
             la largeur source. Ecarte : trop massif, et intenable pour les
             futurs articles dont on ne maitrise pas l'illustration.

             max-height cale donc le visuel sur la MEME proportion que les
             cartes secondaires (~56 %), ce qui est precisement ce qui les
             rend bien composees, et remonte la largeur visible a ~62 %.
             ⚠️ Le pourcentage se resout sur la hauteur de la carte, qui est
                definie par la rangee de grille — il n'est fiable QUE parce
                que .g6m-actus-card--lead a une hauteur imposee ici. */
    .g6m-actus-card--lead .g6m-actus-card__media {
        max-height: 56%;
    }

    /*    3. Le reste devient de l'air, reparti entre les lignes de texte.
             ⛔ Ne PAS utiliser space-between : cela repousse la meta en bas
                et recree exactement le trou qu'on vient de supprimer.
             ⛔ Et il faut neutraliser le margin-top:auto de la meta, sinon
                cette marge absorbe a elle seule toute la hauteur libre et le
                trou revient, space-evenly ou pas. */
    .g6m-actus-card--lead .g6m-actus-card__body {
        flex: 1 1 auto;
        justify-content: space-evenly;
    }

    .g6m-actus-card--lead .g6m-actus-meta {
        margin-top: 0;
    }
}

/* ---------- Accessibilite ---------- */

.g6m-actus-card__link:focus-visible {
    outline: 2px solid rgb(var(--color-cyan-rgb) / 0.85);
    outline-offset: -3px;
    border-radius: var(--g6m-actus-rayon);
}

@media (prefers-reduced-motion: reduce) {
    .g6m-actus-card,
    .g6m-actus-card__img,
    .g6m-actus-card__cta,
    .g6m-actus__all,
    .g6m-actus__all-arrow {
        transition: none;
    }

    .g6m-actus-card:hover {
        transform: none;
    }

    .g6m-actus-card:hover .g6m-actus-card__img {
        transform: none;
    }
}