/* =========================================================
   RESET & BASE
========================================================= */

*, *::before, *::after {
    box-sizing: border-box;
}

/* =========================================================
   FONTS
========================================================= */

@font-face {
    font-family: 'DaysOne';
    src: url('daysone.ttf') format('truetype');
}
@font-face {
    font-family: 'Alata';
    src: url('alata.ttf') format('truetype');
}
@font-face {
    font-family: 'Handlee';
    src: url('Handlee.ttf') format('truetype');
}
@font-face {
    font-family: 'Afaca';
    src: url('Afaca.ttf') format('truetype');
}

/* =========================================================
   BODY & LIENS
========================================================= */
html {
    font-size: 110%;
}

body {
    font-family: "Afaca", Arial, Helvetica, sans-serif;
/*    font-size: 16px; */
    line-height: 1.5em;
    background-color: #000000;
    color: #fff;
    font-weight: 400;
    color: #ffffff; /* texte blanc */
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("/ihm/grain.png");
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
}

a {
    color: #FEAB07;
    text-decoration: none;
    font-weight: 400;
}
a:hover {
    color: #FFFF00;
}

.gras {
    font-weight: bold;
    color: #FFFF00;
}
/* =========================================================
   TITRES & TEXTES
========================================================= */

h1, .h1 { font-size: 1.2em; line-height: 1.3; font-family: "DaysOne"; }
h2, .h2 { font-size: 1.2em; line-height: 1.3; font-family: "DaysOne"; }
h3, .h3 { font-size: 1em;   line-height: 1.2; font-family: "DaysOne"; }
h4, .h4 { font-size: 0.9em; line-height: 1.2; font-family: "DaysOne"; }
h5, .h5 { font-size: 0.8em; line-height: 1.1; font-family: "DaysOne"; }
h6, .h6 { font-size: 0.7em; line-height: 1;   font-family: "DaysOne"; }

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 400;
}

.txth5 { font-size: 1.1em; line-height: 1.3; }
.txth6 { font-size: 0.9em; line-height: 1.2; }

.mini {
    font-size: 0.7em;
    line-height: 0.9;
    font-family: "Alata";
    color: #FFFF99;
}

.miniavis {
	font-weight:300;
	text-transform:none;
	font-size:0.7em;
	line-height:0.9em;
	font-family:"Alata", Arial, Helvetica, sans-serif; 
	color: #CCFF99;
	margin-top: 0;
	margin-bottom: 0;
}

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

.entete {
    height: 90px;
    background: url(pellicule.jpg) repeat-x fixed;
}

.entete-inner {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start; /* IMPORTANT */
    gap: 225px;                      /* espace entre les blocs */
}

.entete-pellicule {
    width: 70px;
    height: 90px;
    flex-shrink: 0;
}

.entete-logo {
    width: 360px;
    height: 90px;
}

.entete img {
    width: 100%;
    height: 100%;
    display: block;
}

.footer {
    width: 100%;
    padding: 6px 0;
    background-color: #111111; /* bleu nuit discret */
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 13px;
}

.footer-inner {
    max-width: 1400px;
    margin: auto;
    padding: 0 24px;
    text-align: center;
}

.footer-text {
    color: #cbd5e1;
}

.footer a {
    color: #60a5fa;
    text-decoration: none;
    margin: 0 4px;
}

.footer a:hover {
    text-decoration: underline;
}

.layout {
    display: flex;
    width: 100%;
    min-height: calc(100vh - 160px);
}

/* colonne gauche */
.col-left {
    flex: 0 0 450px;
    padding: 4px;
    width: 450px;
    min-width: 450px;
    background: #000000;
    border-right: 1px solid rgba(255,255,255,0.10);
    overflow-y: auto;
}

.col-left h4 {
    margin: 16px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* colonne droite */
.col-right {
    flex: 1;
    min-width: 0;
    padding: 4px;
    background: #000000;
}

section {
    margin-bottom:10px;
}

.chapitre {
    border-left:4px solid #c0392b;
    padding-left:10px;
    margin-bottom:10px;
}
.resume {
    background:#1c1c1c;
    padding:20px;
    border-radius:6px;
}
.head {
    background:#1c1c1c;
    padding:10px;
    border-radius:4px;
}

/* =========================================================
   MENUS
========================================================= */
#menu-global {
    background: #1c1c1c;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* ligne haute */
.menu-top {
    display: flex;
    align-items: center;     /* ALIGNEMENT VERTICAL */
    gap: 20px;
}

/* recherche poussée à droite */
.menu-search {
    margin-left: auto;   /* ⭐ LA LIGNE MAGIQUE */
}

.bloc-menu {
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    padding: 5px 5px;
    margin-bottom: 0px;
}

/* MENU RUBRIQUES */
.menu-rubriques {
    font-family: "DaysOne", Arial, sans-serif;
    font-size: 0.95em;
    color: #93c5fd;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding-bottom: 4px;
}

.menu-rubriques a.active {
    background: #444;
    color: #ffff99;
}

.menu-rubrique {
    font-family: "DaysOne", Arial, sans-serif;
    font-size: 0.95em;
    color: #93c5fd;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 4px;
}

.menu-rubrique:hover {
    background: rgba(147,197,253,0.12);
}

.menu-rubrique.active {
    color: #ffffff;
    background: rgba(147,197,253,0.25);
}

/* MENU GENRES */
.menu-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 8px;
}

.menu-genre-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.menu-genre-item a {
    font-family: "DaysOne", Arial, sans-serif;
    font-size: 0.85em;
    color: #93c5fd;
    text-transform: uppercase;
}

.menu-genre-item a.active {
    color: #fff;
    border-bottom: 1px solid #93c5fd;
}

.genre-all {
    display: flex;
    flex-direction: column;
    align-items: center;     /* CENTRAGE HORIZONTAL */
    justify-content: center;

    font-size: 0.75em;
    line-height: 0.75em;
    text-align: center;

    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.genre-all:hover {
    color: #fff;
}


/* MENU RECHERCHE */
/* recherche poussée à droite */
.menu-search {
    margin-left: auto;
}

.menu-search form {
    display: flex;
    gap: 6px;
}

.menu-search input {
    flex: 1;
    background: #1c1c1c;
    border: 1px solid #444;
    color: #fff;
    padding: 4px 6px;
    font-size: 0.8em;
}

.menu-search button {
    background: #444;
    border: none;
    color: #fff;
    padding: 4px 8px;
    cursor: pointer;
}

.menu-search button:hover {
    background: #666;
}


/* ITEMS */
.item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px;
    margin: 0;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
}

/* suppression des marges verticales */
.item + .item {
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* hover discret */
.item:hover {
    background: rgba(255,255,255,0.04);
}

/* miniature */
.item-thumb img {
    width: 40px;
    height: 54px;
    object-fit: cover; /* garde un rendu propre */
    flex-shrink: 0;
    display: block;
}

/* contenu texte */
.item-content {
    flex: 1;
}

/* actif */
.item.active {
    background:
        linear-gradient(180deg, #b93a32, #9f2f2a);
}

.loading {
    padding: 40px;
    text-align: center;
    font-style: italic;
    opacity: 0.7;
}

.titlelist {font-weight:400;  color: #FEAB07; text-decoration: none;margin-top: 0;margin-bottom: 0;}

/* bloc générique */
/* blocs génériques (gris sombre) */
.bloc,
.dernieres-notes,
.dernieres-maj {
    background: #1e1e1e; /* gris anthracite sombre */
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 6px;
}


.bloc-title {
    background: #2a2a2a; /* gris légèrement plus clair */
    padding: 8px 8px;
    font-family: "DaysOne", Arial, sans-serif;
    font-size: 15px;
    color: #f2f2f2; /* presque blanc */
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.bloc-title .arrow {
    font-size: 12px;
    opacity: 0.8;
}

#presentation-content {
    display: none;
}


/* bloc global */
.bloc-presentation .bloc-content {
    padding: 8px;
}

.presentation-text {
    line-height: 1.35;
    font-size: 14px;
    color: #e6e6e6;
}

/* image centrée */
.presentation-image {
    margin-top: 12px;
    text-align: center;
}

.presentation-image img {
    max-width: 90%;
    height: auto;
    border-radius: 4px;
}


/* titre */
.dernieres-notes-title {
    font-family: "DaysOne", Arial, sans-serif;
    font-size: 0.95em;
    color: #93c5fd;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 6px;
}

/* liste d’images */
.dernieres-notes-list {
background: #2a2a2a;
    display: flex;
    gap: 2px;
    justify-content: space-between;
}

/* item */
.dernieres-notes-item img {
    width: 70px;
    height: 93px;
    object-fit: cover;
    border-radius: 2px;
    transition: transform 0.2s, box-shadow 0.2s;
}

/* hover */
.dernieres-notes-item:hover img {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.5);
    cursor: pointer;
}

/* bloc dernières mises à jour */
/* titre */
.dernieres-maj-title {
    font-family: "DaysOne", Arial, sans-serif;
    font-size: 0.95em;
    color: #93c5fd;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding-bottom: 6px;
    padding: 6px 0;
    line-height: 1.25;
}

/* liste */
.dernieres-maj-list {
background: #2a2a2a;
    display: flex;
    flex-direction: column;
}

.dernieres-maj-list .item:hover {
    background: rgba(255,255,255,0.1);
}

/* items compactés dans les dernières mises à jour */
.dernieres-maj .item {
    padding: 4px 4px;
}

/* contenu texte plus serré */
.dernieres-maj .item-content {
    line-height: 1.05;
}

/* titres et méta très compacts */
.dernieres-maj .h5,
.dernieres-maj .titlelist {
    line-height: 1.05;
}

.dernieres-maj .mini,
.dernieres-maj .txth6 {
    line-height: 1.05;
}

/* conteneur d’une fiche */
.liste-fiches {
    position: relative;
}

/* séparateur entre fiches */
.liste-fiches + .liste-fiches::before {
    content: "";
    display: block;
    height: 1px;
    margin: 0px 0px;
    background: rgba(255,255,255,0.08);
}


@media (max-width: 1100px) {
    .col-left {
        flex: 0 0 300px;
        width: 300px;
        min-width: 300px;
    }
}