/* Reset et styles globaux */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #f2f2f217;
    color: #3a3a3a;
    font-family: GaramondPremrPro-ItCapt, serif;
    scrollbar-color: #c6c6c6 #e6e6e636;
    scrollbar-width: thin;
}

html {
    font-size: 100%;
}

img {
    border: 0;
    outline: 0;
}

ul {
    padding-left: 7px;
    word-break: break-word;
}

ul a {
    font-size: 16px;
    color: #474747;
}

ul a:hover {
    color: #2b2b2b;
}

li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 275px;
    color: #3a3a3a;
}

/* Présentation des entrées de liste (bibliographie, articles, films...) :
   titre + éditeur/date en gris — reprend directement le patron /b/bibliographie */
.heure {
    font-size: 0.8em;
}

.ed {
    font-size: 0.78em;
    color: #a0a0ac;
}

.date {
    font-size: 0.78em;
    color: #a0a0ac;
}

/* Grandes parties d'une page (prologue / spectacle, dada / lettrisme) :
   à droite, comme les décennies de /akerman/films */
.partie {
    font-size: 0.8em;
    text-align: right;
    color: #6a6a6a;
    padding-top: 6px;
}

/* Note de lecture rattachée à l'entrée juste au-dessus : seule ligne de liste
   autorisée à passer à la ligne */
li.note {
    list-style: none;
    white-space: normal;
    max-width: 350px;
    margin: 1px 0 7px 2px;
    padding-left: 8px;
    border-left: 1px solid #c9cbe0;
    font-size: 12.5px;
    line-height: 1.45;
    color: #8a8a96;
}

li.note a {
    font-size: inherit;
}

.duree {
    font-size: 0.7em;
    color: #b3b3b3;
    letter-spacing: 0.3px;
}

.introuvable,
.introuvable:hover {
    color: red;
    opacity: 0.1;
}

/* Filmographie : titre tronqué si trop long, durée toujours visible à sa droite */
.filmo li {
    display: flex;
    align-items: baseline;
    max-width: 340px;
}

.filmo li a {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.filmo li .source-icon {
    align-self: center;
    flex: none;
}

.filmo li .duree {
    flex: none;
    padding-left: 6px;
}

/* Scrollbar styles */
::-webkit-scrollbar {
    width: 10px;
    border-radius: 0px;
}

::-webkit-scrollbar-thumb {
    background: #b3b3b3;
    border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover {
    background: #858585;
}

/* Headings */
h1 {
    font-size: 1.3em;
    letter-spacing: 2px;
    height: 25px;
    font-weight: 200;
    color: #585858;
}

h2 {
    font-size: 1.2em;
    font-weight: 200;
    color: #3a3a3a;
}

h3 {
    font-weight: 200;
}

p {
    padding-left: 1px;
    font-size: 15px;
    padding-right: 30px;
    font-weight: 200;
    color: #3a3a3a;
}

/* Links */
a {
    text-decoration: none;
    position: relative;
    z-index: 10;
    color: #3a3a3a;
    margin-left: 0px;
    vertical-align: top;
}

a:hover {
    opacity: 1;
}

a:hover img {
    opacity: 1;
}

/* Layout containers */
.scrollable-container {
    width: 522px;
    height: 350px;
    z-index: -1;
}

.scrollable {
    width: 400px;
    position: absolute;
    overflow: hidden;
    border-bottom: 1px solid #f2f2f2;
    border-top: 0px solid #ececec;
    background: #f2f2f24d;
    padding: 20px 30px 28px 24px;
}

/* Images */
.image-wrapper {
    position: relative;
    margin-bottom: 20px;
    margin-left: -24px;
    margin-right: -30px;
    margin-top: -20px;
    width: calc(100% + 54px);
}

.image-wrapper::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* le fondu se termine sur le fond composite exact du conteneur (250),
       et non sur 248 : sinon une marche se lit au bas du bandeau */
    height: 160px;
    background: linear-gradient(
        to bottom,
        rgba(250, 250, 250, 0) 0%,
        rgba(250, 250, 250, 0.25) 35%,
        rgba(250, 250, 250, 0.6) 62%,
        rgba(250, 250, 250, 0.88) 82%,
        rgb(250, 250, 250) 96%,
        rgb(250, 250, 250) 100%
    );
    pointer-events: none;
}

#situationnisme {
    display: block;
    margin-bottom: 0;
    width: 100%;
    height: auto;
    filter: contrast(1.05) brightness(1.02);
}

.choix {
    vertical-align: top;
}

a .choix {
    filter: brightness(0.95) contrast(1.05);
}

a:hover .choix {
    filter: brightness(0.85) contrast(1.1);
}

.sep2 {
    margin: 0 2px 0 4px;
    vertical-align: top;
    opacity: 0;
}

.fade-element {
    opacity: 1;
}

/* Tables */
table {
    border: 1px solid #c2c2c2;
    margin-top: 7px;
    margin-left: 3px;
    border-collapse: collapse;
    font:
        10px "Lucida Grande",
        sans-serif;
    background-color: #f2f2f2;
}

th,
td {
    border: 1px solid #c2c2c2;
    padding: 2px 8px 1.2px;
    text-align: left;
    color: #3a3a3a;
}

thead > tr > th {
    background-color: transparent;
    font-size: 10.5px;
    color: #3a3a3a;
    border-bottom: 2px solid #b3b3b3;
}

/* Image map preview (used by bataille.js) */

img[usemap] {
    position: relative;
    z-index: 1;
}

/* Icônes de source pour les films */
.source-icon {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    margin-left: 6px;
    vertical-align: middle;
}

.source-internet {
    background-color: #858585;
}

.source-dvd {
    background-color: #7a7a7a;
}

#legende {
    font-size: 13.5px;
    color: #666666;
    padding: 3px 0 2px 4px;
    margin-bottom: 5px;
    text-align: right;
}

#legende .legend-item {
    display: inline-block;
    margin-right: 5px;
}

#legende .source-icon {
    margin-right: 6px;
    margin-left: 0;
}

/* Liens des ressources en bleu : la teinte de l'encre du bandeau (lithographie
   d'isou, #1f2b4f), éclaircie pour rester lisible en petit corps ; l'encre
   exacte revient au survol. Entrées des
   pages de rubrique seulement, le sommaire garde les couleurs du site.
   Les <li> sont enveloppés d'un <a> : c'est le <li> qui porte la couleur. */
.scrollable ul li,
.scrollable ul a,
li.note a {
    color: #31488c;
}

.scrollable ul a:hover,
.scrollable ul a:hover li {
    color: #1f2b4f;
}

/* les notes de lecture restent grises, seul leur lien éventuel est bleu */
.scrollable ul li.note {
    color: #8a8a96;
}

/* Ajustement optique des listes de ressources : interligne légèrement
   ouvert, entrées en léger retrait sous leur intertitre, intertitres en
   retrait de couleur pour qu'ils rythment la page sans concurrencer les
   titres. La colonne s'arrête avant le bord droit ; un titre trop long est
   tronqué par « … », comme partout sur le site. */
.scrollable h2.heure {
    font-size: 12px;
    letter-spacing: 0.6px;
    color: #8c8c98;
    margin: 2px 0 3px 0;
}

/* grandes parties : un filet et un intertitre à gauche, plutôt qu'un mot
   isolé contre le bord droit */
.scrollable h2.partie {
    text-align: left;
    font-size: 12.5px;
    letter-spacing: 1.2px;
    color: #5a5a66;
    margin: 4px 0 10px 0;
    padding-top: 12px;
    border-top: 1px solid #e4e4ea;
    max-width: 330px;
}

.scrollable ul li {
    font-size: 15.5px;
    line-height: 20px;
    padding: 1px 0 1px 10px;
    max-width: 336px;
    list-style: none;
}

.scrollable ul li a {
    font-size: inherit;
}

.scrollable ul li .ed,
.scrollable ul li .date,
.scrollable ul li .duree {
    font-size: 11.5px;
    letter-spacing: 0.2px;
    margin-left: 2px;
}

.scrollable ul li .ed,
.scrollable ul li .date {
    color: #a5a5b0;
}

/* la note se range sous le titre qu'elle commente, plus étroite que lui ;
   seule ligne de liste à passer à la ligne */
.scrollable ul li.note {
    font-size: 12.5px;
    line-height: 1.5;
    margin: 1px 0 7px 11px;
    padding: 0 0 0 10px;
    max-width: 295px;
    /* pas de mot ni de guillemet isolé sur la dernière ligne */
    text-wrap: pretty;
}

/* Chronologie : une frise verticale, l'année en marge, un filet qui court le
   long des événements. Documents en bleu (cliquables), repères de contexte en
   gris ; un carré bleu sur le filet marque chaque numéro de la revue. Les
   lignes passent ici à la ligne : un événement se lit en entier. */
.scrollable .chapeau {
    font-size: 12.5px;
    line-height: 1.5;
    color: #8a8a96;
    max-width: 320px;
    padding: 0;
    margin: 0 0 16px 0;
}

.repere-revue {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #31488c;
    vertical-align: 1px;
}

.scrollable h2.partie .bornes {
    font-size: 11.5px;
    letter-spacing: 0.4px;
    color: #a5a5b0;
    margin-left: 4px;
}

.chrono .an {
    display: grid;
    grid-template-columns: 38px 1fr;
}

.chrono .annee {
    font-size: 12px;
    letter-spacing: 0.5px;
    color: #8c8c98;
    padding-top: 2px;
}

.chrono ul {
    margin: 0;
    padding: 0 0 6px 12px;
    border-left: 1px solid #e4e4ea;
}

.scrollable .chrono ul li {
    position: relative;
    white-space: normal;
    overflow: visible;
    max-width: 296px;
    padding: 1px 0 4px 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: #4a4a55;
    text-wrap: pretty;
}

.scrollable .chrono ul li.ctx {
    color: #8a8a96;
}

.scrollable .chrono ul li .ed {
    font-size: 11.5px;
    color: #a5a5b0;
    margin-left: 1px;
}

.chrono .mois {
    font-size: 11px;
    letter-spacing: 0.3px;
    color: #a5a5b0;
    margin-right: 2px;
}

/* le carré se pose sur le filet, à hauteur de la première ligne */
.chrono li.revue::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 8px;
    width: 7px;
    height: 7px;
    background: #31488c;
}