/* =========================================================
   RESET GLOBAL
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    overflow-x: hidden;
}

body {
    background: #0a0a0a;
    color: #fff;
    font-family: Arial, sans-serif;
}



/* =========================================================
   HEADER
========================================================= */

.header {
    width: 100%;
    background: #111;
    display: flex;
    flex-direction: column;
    padding: 16px 20px;
    gap: 12px;
}

/* --- Ligne 1 --- */
.header-row1 {
    display: flex;
    align-items: center;
    width: 100%;
}

.logo {
    font-size: 28px;
    font-weight: bold;
    white-space: nowrap;
}

/* Empêche un lien autour du logo de modifier son apparence */
.logo a,
a.logo {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* Empêche les effets hover du lien */
.logo a:hover,
a.logo:hover {
    color: inherit;
    text-decoration: none;
    opacity: 1;
}

.header-spacer {
    flex: 1;
}

.header-right-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.home-btn,
.fav-btn {
    height: 34px;
    padding: 8px 14px; /* même padding */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid #444;
    cursor: pointer;
    white-space: nowrap;
    font-size: 15px; /* même taille de police */
    min-width: 100px; /* même largeur minimale */
}

/* Couleurs spécifiques */
.home-btn {
    background: #222;
    color: #fff;
}

.fav-btn {
    background: #222;
    color: #f1c40f;
}


/* --- Ligne 2 (recherche) --- */
.full-search {
    width: 100%;
}

.full-search input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border-radius: 6px;
    border: 1px solid #333;
    background: #1a1a1a;
    color: #fff;
    font-size: 16px;
}

.no-result {
	  width: 100%; 
    text-align: left;
    padding: 0px;
}


/* =========================================================
   SECTION TITRES
========================================================= */

h2 {
    margin: 30px 20px 10px 20px;
    font-size: 22px;
    font-weight: bold;
}



/* =========================================================
   CAROUSELS
========================================================= */

.carousel {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    justify-content: flex-start;   /* FIN DU CENTER FOIREUX */
}



/* =========================================================
   CARTES & VIGNETTES
========================================================= */

.card-block {
    flex: 1 1 320px;        /* largeur idéale */
    max-width: 360px;       /* limite */
    display: flex;
    flex-direction: column;
		
  max-width: 360px;
  min-width: 280px;

}

/* Carte */
.card {
    width: 100%;
    background: #1a1a1a;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #333;
    display: block;
}

/* Image en background (DIV) */
.cum-img {
    width: 100%;
    aspect-ratio: 16 / 9;         /* RESPONSIVE + HORIZONTAL */
    max-height: 150px;
		background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* Titre des cartes */
.card-title {
    padding: 10px;
    text-align: center;
    font-size: 16px;
}

/* Bouton étoile */
.fav-btn-star {
    margin-top: 8px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.2);
    cursor: pointer;
    background-image: url("../img/star_off.png");
    background-size: 22px;
    background-position: center;
    background-repeat: no-repeat;
}

.fav-btn-star.on {
    background-image: url("../img/star_on.png");
}



/* =========================================================
   LIENS
========================================================= */

.card-block a {
    text-decoration: none;
    color: #ddd;
    font-weight: 500;
    display: block;
    margin-top: 6px;
    text-align: center;
    opacity: 0.85;
    transition: 0.2s;
}

.card-block a:hover {
    opacity: 1;
}



/* =========================================================
   SECTIONS (visibility)
========================================================= */

.section {
    display: none;
}

.section.visible {
    display: block;
}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .card-block {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .carousel {
        justify-content: center;   /* centré sur mobile */
        gap: 20px;
    }
}