/* =====================================================================
   custom-improvements.css
   Feuille de style ADDITIVE — ne remplace aucun fichier existant.
   Objectif : ajouter le responsive mobile + des effets hover propres
   sans toucher à accueil.css / navbar.css / sidebar.css / journal-list.css
   (fichiers non fournis, donc non modifiés directement pour ne rien casser).

   Installation :
   1. Déposer ce fichier dans public/css/custom-improvements.css
   2. Ajouter dans app.blade.php, juste après les autres <link rel="stylesheet">
      existants (donc APRÈS accueil.css, navbar.css, footer.css) :
        <link rel="stylesheet" href="{{ $URL. '/css/custom-improvements.css' }}">
      L'ordre compte : chargé en dernier, ce fichier peut ajuster ce qui précède.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. EFFETS HOVER
   --------------------------------------------------------------------- */

/* Cartes journaux / chroniques / actus : légère élévation au survol */
.journal-box,
.chronique-box,
.chroniques-box,
.actu-box,
.list-news-actu-box {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.journal-box:hover,
.chronique-box:hover,
.chroniques-box:hover,
.actu-box:hover,
.list-news-actu-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

/* Logos et images de journaux : léger zoom au survol */
.journal-img,
.chronique-img,
.chronique-box-img {
    transition: transform 0.25s ease;
    overflow: hidden;
}
.journal-box:hover .journal-img,
.chronique-box:hover .chronique-box-img {
    transform: scale(1.03);
}

/* Liens d'action (Acheter / S'abonner / Lire la première page) */
.journal-acheter,
.login-btn,
.signin-btn,
.logout-btn {
    transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.journal-acheter:hover,
.login-btn:hover,
.signin-btn:hover,
.logout-btn:hover {
    opacity: 0.85;
    text-decoration: none;
}

/* Menu latéral (sidebar) : maisons de presse / catégories */
.sidebar-menu-item a {
    transition: color 0.15s ease, padding-left 0.15s ease;
}
.sidebar-menu-item a:hover {
    padding-left: 4px;
}

/* Menu principal (navbar desktop) */
.menu-item a {
    position: relative;
    transition: color 0.15s ease;
}
.menu-item a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: width 0.2s ease;
}
.menu-item a:hover::after {
    width: 100%;
}


/* ---------------------------------------------------------------------
   2. RESPONSIVE MOBILE
   --------------------------------------------------------------------- */

/* Grilles de cartes : on force le retour à la ligne sur petits écrans */
.journaux-list-content,
.chroniques-list,
.chronique-section-content,
.last-news-content {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* Cartes journaux (page "Liste des journaux" groupée par maison de presse) :
   grille à 3 colonnes FIXES (pas dépendante de la largeur d'écran comme le
   flex-wrap, donc garanties même sur très grand écran). La taille/l'affichage
   de l'image elle-même (object-fit, hauteur) est désormais géré directement
   dans journal-list.css, corrigé à la source. */
.journaux-groupe-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    max-width: 950px;
}

.chroniques-list-item {
    flex: 1 1 calc(25% - 16px); /* 4 cartes par ligne sur desktop, pleine largeur */
}

@media (max-width: 992px) {
    .chronique-box,
    .chroniques-box,
    .chroniques-list-item {
        flex: 1 1 calc(50% - 16px);
    }

    .journaux-groupe-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .chronique-box,
    .chroniques-box,
    .actu-box,
    .chroniques-list-item {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .journaux-groupe-list {
        grid-template-columns: 1fr;
        max-width: 100%;
    }

    .chronique-img,
    .chronique-box-img,
    .actualite-side-img {
        width: 100%;
        height: auto;
    }

    /* Page contenu principal + sidebar : passage en colonne unique */
    .principal-container .page-content {
        display: flex;
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        order: 2; /* le contenu passe avant le menu latéral sur mobile */
    }

    .journaux-section-content,
    .chronique-section-content,
    .actualite-page-content {
        order: 1;
        width: 100%;
    }

    /* Bannière de titre : texte plus lisible sur petit écran */
    .slider-content {
        padding: 24px 16px;
    }
    .slider-title {
        font-size: 1.3rem;
    }

    /* Groupes "par maison de presse" : titre plus compact */
    .journaux-groupe-title {
        font-size: 1.1rem;
        margin: 20px 0 10px;
    }
}

/* En-tête de chaque section "maison de presse" sur la page générale des journaux */
.journaux-groupe-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin: 32px 0 14px;
}
.journaux-groupe:first-child .journaux-groupe-header {
    margin-top: 0;
}
.journaux-groupe-header .journaux-groupe-title {
    margin: 0;
}
.journaux-groupe-voir-tout {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}
.journaux-groupe-voir-tout:hover {
    text-decoration: underline;
}
.journaux-groupe {
    padding-bottom: 24px;
    border-bottom: 1px solid #eee;
    margin-bottom: 8px;
}
.journaux-groupe:last-child {
    border-bottom: none;
}

/* Images fluides partout par sécurité (évite tout débordement horizontal) */
img {
    max-width: 100%;
    height: auto;
}

/* Évite le scroll horizontal parasite sur mobile */
@media (max-width: 600px) {
    body {
        overflow-x: hidden;
    }
}


/* ---------------------------------------------------------------------
   3. AJUSTEMENT APRÈS SUPPRESSION DES BLOCS PUBLICITAIRES
   --------------------------------------------------------------------- */

/* Le bloc annonces (texte + carrousel slide1/2/3.jpg) a été retiré
   entièrement de l'accueil : la grille des chroniques occupe désormais
   toute la largeur (voir .chroniques-list-item ci-dessus). */

/* ---------------------------------------------------------------------
   4. BANDEAU "NOS MAISONS DE PRESSE" (accueil)
   Défilement horizontal automatique, en boucle, avec la couverture du
   dernier numéro de chaque maison. Clic => liste des journaux de la maison.
   --------------------------------------------------------------------- */
.magazines-ticker {
    width: 100%;
    overflow: hidden;
    position: relative;
    /* Estompe les bords pour un effet plus propre */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}

.magazines-ticker-track {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: magazines-ticker-scroll 30s linear infinite;
}

.magazines-ticker:hover .magazines-ticker-track {
    animation-play-state: paused;
}

@keyframes magazines-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); } /* la liste est dupliquée x2 : -50% = boucle parfaite */
}

.magazine-card {
    flex: 0 0 auto;
    width: 140px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.magazine-card-cover {
    width: 140px;
    height: 180px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.magazine-card-cover-placeholder {
    object-fit: contain;
    background: #f4f4f4;
    padding: 16px;
}

.magazine-card:hover .magazine-card-cover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22);
}

.magazine-card-name {
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    color: inherit;
}

@media (max-width: 600px) {
    .magazine-card,
    .magazine-card-cover {
        width: 110px;
    }
    .magazine-card-cover {
        height: 145px;
    }
}