:root{
    --color0: #ffffff;
    --color1: #270542;
    --color2: #714991;
    --color3: #a362b5;
    --color4: #d0b77a;
    --color5: #23043c;
}

/* ------------- General ------------- */
body {
    -webkit-text-size-adjust:none;
}

.csslider1 {
    display: block;
    position: relative;
    width: calc(100%);
    /* height: 50vh; */
    height: calc(100%);
    aspect-ratio: 1960/800;
}
/* Sous 800px, la hauteur ne doit plus suivre la largeur : elle reste figée à la valeur
   qu'elle aurait pile à 800px de large (800 × 800/1960), seule la largeur continue de
   diminuer (l'image, en object-fit:cover, se recadre davantage sur les côtés). On désactive
   franchement aspect-ratio (plutôt que d'ajouter juste un plancher min-height) : combiné à
   aspect-ratio, min-height ne repropage pas toujours correctement la hauteur réelle aux
   enfants en height:100% (les slides, l'image) sous WebKit/Safari — le cadre s'agrandissait
   mais son contenu restait calé sur l'ancien ratio. Placée ici (après la règle de base, dans
   le même fichier) pour ne pas dépendre de l'ordre de chargement des feuilles de style : à
   spécificité égale sur "height", c'est toujours la dernière déclaration qui gagne.
   Le seuil est une "@container" sur la largeur du .slider (voir global.css), pas un
   "@media" sur la largeur de la fenêtre : le slider est imbriqué dans .content (padding +
   bordure) puis dans son propre .slider (bordure), donc sa largeur réelle est toujours
   inférieure de plusieurs dizaines de pixels à celle de la fenêtre. Avec un @media, le calc
   ci-dessous restait figé à "la valeur pile à 800px de fenêtre" alors que la largeur réelle
   à 800px de fenêtre (donc hors media query, aspect-ratio actif) est plus petite que 800px
   — d'où une hauteur à 800px plus faible qu'à 799px. Avec @container, "800px" ci-dessous
   désigne la largeur réelle du slider, la même que celle utilisée par aspect-ratio juste
   au-dessus du seuil : la transition est donc continue. */
@container (max-width: 799px) {
    .csslider1 {
        aspect-ratio: auto;
        height: calc(800px * 800 / 1960);
    }
}
.csslider1,
.csslider1 *,
.csslider1 *:after,
.csslider1 *:before {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.csslider1 > .cs_anchor {
    display: none;
}
.csslider1 > ul {
    position: relative;
    z-index: 1;
    font-size: 0;
    line-height: 0;
    margin: 0 auto;
    padding: 0;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
}
.csslider1 > ul > .cs_skeleton {
    width: 100%;
    visibility: hidden;
    font-size: 0px;
    line-height: 0;
}

.csslider1 > ul > .slide.img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.csslider1 > ul > .slide.img a {
    font-size: 0pt;
    color: transparent;
}
.csslider1 > ul > .slide {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-size: 15px;
    font-size: initial;
    line-height: normal;
    white-space: normal;
    vertical-align: top;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.csslider1 .cs_engine{
    position: absolute;
    top: -9999px;
    left: -9999px;
    font-size: 0pt;
    opacity: 0;
    filter: alpha(opacity=0);
}

.csslider1 > ul > li.img,
.csslider1 > .cs_arrowprev,
.csslider1 > .cs_arrownext,
.csslider1 > .cs_bullets,
.csslider1 > .cs_play_pause {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* ------------- /General Styles ------------- */

/* ------------- General Bullets ------------- */
.csslider1 > .cs_bullets {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 6;
    font-size: 0;
    line-height: 8pt;
    text-align: center;
}
.csslider1 > .cs_bullets > div {
    margin-left: -50%;
    width: 100%;
}
.csslider1 > .cs_bullets > label {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.csslider1 > .cs_bullets > label > .cs_thumb {
    visibility: hidden;
    position: absolute;
    opacity: 0;
    z-index: 1;
    line-height: 0;
    left: -58.5px;
    bottom: -48px;
}
.csslider1 > .cs_bullets > label > .cs_thumb > img {
    max-width: none;
}
/* ------------- /General Bullets ------------- */

/* ------------- General Description ------------- */
.csslider1 > .cs_description {
    z-index: 3;
}
.csslider1 > .cs_description a,
.csslider1 > .cs_description a:visited,
.csslider1 > .cs_description a:active {
    color: inherit;
    font-weight: bold;
}
.csslider1 > .cs_description a:hover {
    text-decoration: none;
}
.csslider1 > .cs_description > label {
    position: absolute;
    word-wrap: break-word;
    white-space: normal;
    text-align: left;
    /* 500px de large (padding du cadre compris, voir le "box-sizing: border-box" de
       ".cs_description > label > span" plus bas) tant qu'il y a la place ; sinon 100% moins une
       marge de 20px de chaque côté (le "left" qui positionne ce cadre est dans l'autre règle
       ".cs_description > label", plus bas dans le fichier). Volontairement pas de @media/@container
       ici : ces deux règles suffisent à n'importe quelle taille d'écran. */
    max-width: 600px;
    width: calc(100% - 40px);
}
.csslider1 > .cs_description > label > span {
    vertical-align: top;
}
.csslider1 > .cs_description > label span {
    display: inline-block;
}
/* ------------- /General Description ------------- */

/* ------------- General Play Pause ------------- */
.csslider1 > .cs_play_pause {
    position: absolute;
    /* Même marge (20px) que le cadre de description (".cs_description > label", voir plus bas). */
    top: 20px;
    right: 20px;
    /* Dimensions explicites (23px de contenu + 15px de padding + 2px de bordure de chaque côté,
       voir ".cs_play_pause > label" plus bas). Nécessaire : les <label> qu'il contient sont tous
       en "position: absolute" (voir juste en dessous) — pendant la lecture automatique, plusieurs
       peuvent être affichés en même temps, en fondu-enchaîné (voir "pauseChange1" plus bas), donc
       aucun ne contribue à la taille de ce conteneur. Sans ces dimensions explicites, il se
       réduirait à 0x0 et "top"/"right" n'ancreraient plus rien de visible au bon endroit. */
    width: 57px;
    height: 57px;
    /* 7, pas 5 : ".cs_bullets" (plus bas) est en z-index:6 et couvre toute la largeur du slider
       (y compris son espace "vide" entre les points, qui reste cliquable même sans rien
       d'affiché dessus) — depuis que ce bouton est ancré en haut, leurs zones se chevauchent, et
       ".cs_bullets" interceptait donc une partie des clics qui lui étaient destinés. */
    z-index: 7;
}
.csslider1 > .cs_play_pause > label {
    /* "top: 0; left: 0" plutôt que l'ancien "margin-top/-left" bricolé pour un tout autre
       ancrage : colle chaque <label> exactement sur ce conteneur, désormais à la bonne taille
       (voir juste au-dessus). */
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}
.csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause,
.csslider1 > .slide:checked ~ .cs_play_pause > .cs_play,
.csslider1 > .pause:checked ~ .cs_play_pause > .cs_play {
    display: block;
    z-index: 5;
}
.csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_play,
.csslider1 > .slide:checked ~ .cs_play_pause > .cs_pause,
.csslider1 > .pause:checked ~ .cs_play_pause > .cs_pause {
    display: none;
    z-index: -1;
}



@-webkit-keyframes pauseChange1 {
    0%, 24.99% { opacity: 1; z-index: 5; }
    25%, 100%    { opacity: 0; z-index: -1; }
}
@keyframes pauseChange1 {
    0%, 24.99% { opacity: 1; z-index: 5; }
    25%, 100%    { opacity: 0; z-index: -1; }
}


.csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause.num0 {
    opacity: 0;
    z-index: -1;
    -webkit-animation: pauseChange1 48800ms infinite -2000ms;
    animation: pauseChange1 48800ms infinite -2000ms;
}
.csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause.num1 {
    opacity: 0;
    z-index: -1;
    -webkit-animation: pauseChange1 48800ms infinite 10200ms;
    animation: pauseChange1 48800ms infinite 10200ms;
}
.csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause.num2 {
    opacity: 0;
    z-index: -1;
    -webkit-animation: pauseChange1 48800ms infinite 22400ms;
    animation: pauseChange1 48800ms infinite 22400ms;
}
.csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause.num3 {
    opacity: 0;
    z-index: -1;
    -webkit-animation: pauseChange1 48800ms infinite 34600ms;
    animation: pauseChange1 48800ms infinite 34600ms;
}


.csslider1 > .slide:checked ~ .cs_play_pause > .cs_pause,
.csslider1 > .pause:checked ~ .cs_play_pause > .cs_pause {
    -webkit-animation: none;
    animation: none;
}


/* ------------- /General Play Pause ------------- */

/* ------------- General Gestures ------------- */
.csslider1.cs_handle {
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAABwSURBVEjH7ZJBEsAgCAMT/v/n9NCOSqe2oD2yNx1JggB4BCEFWyFASP2KMQE7ywWhe/tTRGCGogLk02tFctiW/SUgaMyQG4PdPzDn31rQbMb8FiAXgvsEJNax1yVlVGAjA93apP3HFhZTGIqiKH7iADB6HxPlHdNVAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE0LTA3LTA3VDEzOjQ5OjEwKzAyOjAwm7WiFAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNC0wNy0wN1QxMzo0OToxMCswMjowMOroGqgAAAAASUVORK5CYII="), move;
}
.csslider1.cs_handle.cs_grab {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAABaSURBVEjH7ZMxCkAhDEOT8u9/5TpJ+xWkFse8IYutJgEB8RCHL1qCc90BEFnT6QH7mwgFHBUf8wJyS1TDLuc3vmighx37LZdIth3E5hKj9n6O0HRh+oJCiFcMxRUUDxR1CTMAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTQtMDctMDdUMTM6NDk6MzgrMDI6MDDqf+sOAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE0LTA3LTA3VDEzOjQ5OjM4KzAyOjAwmyJTsgAAAABJRU5ErkJggg=="), move;
}


.csslider1 .cs_gestures {
    visibility: hidden;
    position: absolute;
    font-size: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    opacity: 0;

    -webkit-transition: visibility .3s linear, opacity .3s linear;
    transition: visibility .3s linear, opacity .3s linear;
}
.csslider1 .cs_gestures.cs_show {
    visibility: visible;
    opacity: 1;
}
.csslider1 .cs_gestures.cs_show img {
    width: 25%;
}
.csslider1 .cs_gestures.cs_show .cs_first_img {
    position: absolute;
    left: -25%;
    top: 0;
}
.csslider1 .cs_gestures.cs_show .cs_last_img {
    position: absolute;
    left: 100%;
    top: 0;
}

.csslider1 .cs_gestures > div {
    position: absolute;
    left: 0;
    top: 0;
    width: 400%;
}
/* ------------- /General Gestures ------------- */

/* ------------- Effect ------------- */
.csslider1 > ul > .slide.num0 {
    left: 0%;
}
.csslider1 > ul > .slide.num1 {
    left: 100%;
}
.csslider1 > ul > .slide.num2 {
    left: 200%;
}
.csslider1 > ul > .slide.num3 {
    left: 300%;
}



.csslider1 > #cs_slide1_0:checked ~ ul > .slide,
.csslider1 > #cs_pause1_0:checked ~ ul > .slide {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}
.csslider1 > #cs_slide1_1:checked ~ ul > .slide,
.csslider1 > #cs_pause1_1:checked ~ ul > .slide {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}
.csslider1 > #cs_slide1_2:checked ~ ul > .slide,
.csslider1 > #cs_pause1_2:checked ~ ul > .slide {
    -webkit-transform: translateX(-200%);
    transform: translateX(-200%);
}
.csslider1 > #cs_slide1_3:checked ~ ul > .slide,
.csslider1 > #cs_pause1_3:checked ~ ul > .slide {
    -webkit-transform: translateX(-300%);
    transform: translateX(-300%);
}



.csslider1 > ul > .slide {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    opacity: 1;

    -webkit-transition: -webkit-transform 2000ms;
    transition: -webkit-transform 2000ms, transform 2000ms;


    -webkit-transform: scale(1);
    transform: scale(1);
}



@-webkit-keyframes slide1 {
    0%, 20.901639344262296%    { -webkit-transform: translateX(0%); transform: translateX(0%); }
    25%, 45.90163934426229%    { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
    50%, 70.90163934426229%    { -webkit-transform: translateX(-200%); transform: translateX(-200%); }
    75%, 95.90163934426229%    { -webkit-transform: translateX(-300%); transform: translateX(-300%); }

}
@keyframes slide1 {
    0%, 20.901639344262296%    { -webkit-transform: translateX(0%); transform: translateX(0%); }
    25%, 45.90163934426229%    { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
    50%, 70.90163934426229%    { -webkit-transform: translateX(-200%); transform: translateX(-200%); }
    75%, 95.90163934426229%    { -webkit-transform: translateX(-300%); transform: translateX(-300%); }

}

@-webkit-keyframes slide1-ie {
    0%, 20.901639344262296%    { margin-left: 0%; }
    25%, 45.90163934426229%    { margin-left: -100%; }
    50%, 70.90163934426229%    { margin-left: -200%; }
    75%, 95.90163934426229%    { margin-left: -300%; }

}
@keyframes slide1-ie {
    0%, 20.901639344262296%    { margin-left: 0%; }
    25%, 45.90163934426229%    { margin-left: -100%; }
    50%, 70.90163934426229%    { margin-left: -200%; }
    75%, 95.90163934426229%    { margin-left: -300%; }

}

.csslider1    > #cs_play1:checked ~ ul > .slide {

    -webkit-animation: slide1 48800ms infinite;
    animation: slide1 48800ms infinite;

}
/* IE 10+ hack - cant animate translate :( */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .csslider1    > #cs_play1:checked ~ ul > .slide {
        animation: slide1-ie 48800ms infinite;
    }
}


.csslider1 > #cs_play1:checked ~ ul > .slide,
.csslider1 > .pause:checked ~ ul > .slide {
    -webkit-transition: none;
    transition: none;
}


/* ------------- /Effect ------------- */

/* ------------- Template Show on hover ------------- */
/* Simple fondu (opacity) pour le bouton pause/play, comme il en existe déjà ailleurs sur le site
   — pas de glissement comme pour les flèches ci-dessous. 0.2s linear comme partout ailleurs sur
   le site (voir .btn dans global.css). */
.csslider1 > .cs_play_pause {
    -webkit-transition: 0.2s linear all;
    transition: 0.2s linear all;
    opacity: 0;
}
.csslider1 > .cs_arrowprev {
    -webkit-transition: .4s all .15s ease;
    transition: .4s all .15s ease;
}
.csslider1 > .cs_arrownext {
    -webkit-transition: .4s all .3s ease;
    transition: .4s all .3s ease;
}
.csslider1 > .cs_arrowprev,
.csslider1 > .cs_arrownext {
    opacity: 0;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
}

.csslider1:hover > .cs_play_pause {
    opacity: 1;
}
.csslider1:hover > .cs_arrowprev,
.csslider1:hover > .cs_arrownext {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
/* ------------- /Template Show on hover ------------- */

/* ------------- Template Play Pause ------------- */
.csslider1 > .cs_play_pause > label{
    text-decoration: none;
    padding: 15px;
    height: 23px;
    width: 23px;
    /* Look minetip (voir .cs_title plus bas, et .popbox dans global.css) : fond violet-noir,
       bordure "pixel" simulée par le box-shadow, au lieu du contour arrondi lumineux. */
    background-color: rgba(29, 14, 29, 0.95);
    border: 2px solid #2c0962;
    border-radius: 0;
    box-shadow: -2px 0 rgba(29, 14, 29, 0.95), 0 2px rgba(29, 14, 29, 0.95), 2px 0 rgba(29, 14, 29, 0.95), 0 -2px rgba(29, 14, 29, 0.95);
    filter: none;
}
.csslider1 > .cs_play_pause > label,
.csslider1 > .cs_play_pause > label span {
    -webkit-transition: 0.2s linear all;
    transition: 0.2s linear all;
}
.csslider1 > .cs_play_pause > label span {
    /* Icône FontAwesome (voir include/slider.php et fontawesome-icons.css) plutôt que le
       glyphe "cs-ctrl-basic" dessiné en CSS via ":after". */
    display: block;
    color: var(--color0);
    font-size: 15px;
    line-height: 25px;
    text-align: center;
}

.csslider1 > .cs_play_pause:hover > label {
    background-color: var(--color5);
}
/* ------------- /Template Play Pause ------------- */

/* ------------- Template Bullets ------------- */
.csslider1 > .cs_bullets {
    /* Même marge (20px) que le cadre de description et le bouton pause/play. */
    top: 20px;
}
.csslider1 > .cs_bullets > label {
    /* Look minetip (voir .cs_title plus bas, et .popbox dans global.css) : fond violet-noir,
       bordure "pixel" simulée par le box-shadow, au lieu du contour arrondi lumineux. */
    background-color: rgba(29, 14, 29, 0.95);
    border: 2px solid #2c0962;
    border-radius: 0;
    box-shadow: -2px 0 rgba(29, 14, 29, 0.95), 0 2px rgba(29, 14, 29, 0.95), 2px 0 rgba(29, 14, 29, 0.95), 0 -2px rgba(29, 14, 29, 0.95);
    filter: none;
    margin: 0 5px;
    padding: 9px;
    -webkit-transition: 0.2s linear all;
    transition: 0.2s linear all;
}
/* Pas de survol sur ces 4 boutons (contrairement au bouton pause/play) : impossible de
   distinguer proprement, en CSS pur, le bouton actif des autres pendant la lecture automatique
   (voir le commentaire de "bullet_bg1" plus bas) — le survol aurait donc écrasé sa couleur sans
   qu'on puisse l'exclure. */

.csslider1 > .cs_bullets > label > .cs_point {
    position: absolute;
    left: 50%;
    top: 50%;
    /* "transform" plutôt que le vieux "margin-left/-top: -1.5px" (qui supposait un carré fixe de
       3x3px) : centre correctement le glyphe "·" quel que soit son gabarit réel. */
    transform: translate(-50%, -50%);
    /* Un vrai caractère "·" avec la police et l'ombre Minecraft (comme .mc-color dans global.css)
       plutôt qu'un carré de couleur uni. Couleurs "§7" (Gray, une news inactive) / "§f" (White,
       la news active, voir plus bas) — mêmes valeurs que .mc-color.mc-7/.mc-f (global.css). */
    font-family: 'minecraftia';
    /* Même taille que .cs_title (16px de base, voir plus bas), et mêmes paliers @media. */
    font-size: 16px;
    line-height: 1;
    color: rgb(170, 170, 170);
    /* "--point-shadow-len" (et pas "2px" en dur) : mêmes paliers @media que .cs_title, qui réduisent
       cette variable (1.75px/1.5px/1.25px, plus bas) — nécessaire ici car "bullet1" (plus bas)
       anime aussi "text-shadow" en dur ; passer par une variable custom property est le seul moyen
       pour ces paliers de rester pris en compte pendant l'animation. */
    --point-shadow-len: 2px;
    text-shadow: var(--point-shadow-len) var(--point-shadow-len) 0px rgb(42, 42, 42);
}

/* Bouton de la news actuellement affichée : même couleur "active" que ".btn.active" (voir
   global.css). */
.csslider1 > #cs_slide1_0:checked ~ .cs_bullets > label.num0,
.csslider1 > #cs_pause1_0:checked ~ .cs_bullets > label.num0,
.csslider1 > #cs_slide1_1:checked ~ .cs_bullets > label.num1,
.csslider1 > #cs_pause1_1:checked ~ .cs_bullets > label.num1,
.csslider1 > #cs_slide1_2:checked ~ .cs_bullets > label.num2,
.csslider1 > #cs_pause1_2:checked ~ .cs_bullets > label.num2,
.csslider1 > #cs_slide1_3:checked ~ .cs_bullets > label.num3,
.csslider1 > #cs_pause1_3:checked ~ .cs_bullets > label.num3 {
    /* "!important" comme .cs_bullets > label:hover plus haut : sans lui, le survol (lui aussi
       "!important") gagnerait toujours, même sur ce bouton actif. Cette règle-ci l'emporte quand
       même sur le survol grâce à sa spécificité plus grande (sélecteur avec ID) — mais seulement
       quand un slide est sélectionné/en pause manuellement : pendant la lecture automatique, voir
       le commentaire du survol plus haut. */
    background-color: var(--color3_opa075) !important;
}

.csslider1 > .cs_bullets > label:hover > .cs_point,

.csslider1 > #cs_slide1_0:checked ~ .cs_bullets > label.num0 > .cs_point,
.csslider1 > #cs_pause1_0:checked ~ .cs_bullets > label.num0 > .cs_point,
.csslider1 > #cs_slide1_1:checked ~ .cs_bullets > label.num1 > .cs_point,
.csslider1 > #cs_pause1_1:checked ~ .cs_bullets > label.num1 > .cs_point,
.csslider1 > #cs_slide1_2:checked ~ .cs_bullets > label.num2 > .cs_point,
.csslider1 > #cs_pause1_2:checked ~ .cs_bullets > label.num2 > .cs_point,
.csslider1 > #cs_slide1_3:checked ~ .cs_bullets > label.num3 > .cs_point,
.csslider1 > #cs_pause1_3:checked ~ .cs_bullets > label.num3 > .cs_point {
    color: var(--color0);
    text-shadow: var(--point-shadow-len) var(--point-shadow-len) 0px rgb(63, 63, 63);
}

@keyframes bullet1 {
    0%, 24.99%    { color: var(--color0); text-shadow: var(--point-shadow-len) var(--point-shadow-len) 0px rgb(63, 63, 63); }
    25%, 100% { color: rgb(170, 170, 170); text-shadow: var(--point-shadow-len) var(--point-shadow-len) 0px rgb(42, 42, 42); }
}
@-webkit-keyframes bullet1 {
    0%, 24.99%    { color: var(--color0); text-shadow: var(--point-shadow-len) var(--point-shadow-len) 0px rgb(63, 63, 63); }
    25%, 100% { color: rgb(170, 170, 170); text-shadow: var(--point-shadow-len) var(--point-shadow-len) 0px rgb(42, 42, 42); }
}

.csslider1 > #cs_play1:checked ~ .cs_bullets > label.num0 > .cs_point,
.csslider1 > #cs_pause1:checked ~ .cs_bullets > label.num0 > .cs_point {
    -webkit-animation: bullet1 48800ms infinite -2000ms;
    animation: bullet1 48800ms infinite -2000ms;
}
.csslider1 > #cs_play1:checked ~ .cs_bullets > label.num1 > .cs_point,
.csslider1 > #cs_pause1:checked ~ .cs_bullets > label.num1 > .cs_point {
    -webkit-animation: bullet1 48800ms infinite 10200ms;
    animation: bullet1 48800ms infinite 10200ms;
}
.csslider1 > #cs_play1:checked ~ .cs_bullets > label.num2 > .cs_point,
.csslider1 > #cs_pause1:checked ~ .cs_bullets > label.num2 > .cs_point {
    -webkit-animation: bullet1 48800ms infinite 22400ms;
    animation: bullet1 48800ms infinite 22400ms;
}
.csslider1 > #cs_play1:checked ~ .cs_bullets > label.num3 > .cs_point,
.csslider1 > #cs_pause1:checked ~ .cs_bullets > label.num3 > .cs_point {
    -webkit-animation: bullet1 48800ms infinite 34600ms;
    animation: bullet1 48800ms infinite 34600ms;
}

/* Même chose que "bullet1" ci-dessus, mais sur le fond du bouton lui-même (pas juste son point) :
   "#cs_slide1_X:checked"/"#cs_pause1_X:checked" (plus haut) ne couvrent que la sélection MANUELLE
   d'un slide ; en lecture automatique (le cas le plus courant, "#cs_play1" coché par défaut),
   aucune de ces cases n'est cochée — c'est cette animation, calée sur les mêmes délais que
   "bullet1", qui indique alors le bouton du slide affiché à l'instant t. */
@keyframes bullet_bg1 {
    0%, 24.99%    { background-color: var(--color3_opa075); }
    25%, 100% { background-color: rgba(29, 14, 29, 0.95); }
}
@-webkit-keyframes bullet_bg1 {
    0%, 24.99%    { background-color: var(--color3_opa075); }
    25%, 100% { background-color: rgba(29, 14, 29, 0.95); }
}
.csslider1 > #cs_play1:checked ~ .cs_bullets > label.num0 {
    -webkit-animation: bullet_bg1 48800ms infinite -2000ms;
    animation: bullet_bg1 48800ms infinite -2000ms;
}
.csslider1 > #cs_play1:checked ~ .cs_bullets > label.num1 {
    -webkit-animation: bullet_bg1 48800ms infinite 10200ms;
    animation: bullet_bg1 48800ms infinite 10200ms;
}
.csslider1 > #cs_play1:checked ~ .cs_bullets > label.num2 {
    -webkit-animation: bullet_bg1 48800ms infinite 22400ms;
    animation: bullet_bg1 48800ms infinite 22400ms;
}
.csslider1 > #cs_play1:checked ~ .cs_bullets > label.num3 {
    -webkit-animation: bullet_bg1 48800ms infinite 34600ms;
    animation: bullet_bg1 48800ms infinite 34600ms;
}



.csslider1 > #cs_play1:checked ~ .cs_bullets > label > .cs_point,
.csslider1 > .pause:checked ~ .cs_bullets > label > .cs_point,
.csslider1 > #cs_play1:checked ~ .cs_bullets > label,
.csslider1 > .pause:checked ~ .cs_bullets > label {
    /* Étendu à ".cs_bullets > label" lui-même (pas seulement son point) : sans ça, sa propre
       transition (le survol, voir plus haut) entre en conflit avec le tout premier "saut" de
       couleur de "bullet_bg1" au chargement de la page, et le bouton reste transparent tant
       qu'aucune autre interaction (survol, etc.) ne force le navigateur à corriger l'affichage.
       Le survol garde son effet (voir le "!important" plus haut), juste sans le fondu. */
    -webkit-transition: none;
    transition: none;
}


.csslider1 > .slide:checked ~ .cs_bullets > label > .cs_point,
.csslider1 > .pause:checked ~ .cs_bullets > label > .cs_point,
.csslider1 > .slide:checked ~ .cs_bullets > label,
.csslider1 > .pause:checked ~ .cs_bullets > label {
    -webkit-animation: none;
    animation: none;
}


/* ------------- Template /Bullets ------------- */

/* ------------- Template Description ------------- */


.csslider1 > .cs_description > label {
    font-family: "Ubuntu",sans-serif;
    font-size: 20px;
    line-height: normal;
    bottom: 20px;
    top: auto;
    left: 20px;
}

.csslider1 > .cs_description > label > span {
    color: var(--color0);
    position: relative;
    padding: 2%;
    border-radius: var(--border-radius);
    border: calc(var(--border-len)/2) solid var(--color1);
    filter: drop-shadow(0px 0px 5px var(--color1));
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}



.csslider1 > #cs_slide1_0:checked ~ .cs_description > .num0 > .cs_title,
.csslider1 > #cs_pause1_0:checked ~ .cs_description > .num0 > .cs_title,
.csslider1 > #cs_slide1_1:checked ~ .cs_description > .num1 > .cs_title,
.csslider1 > #cs_pause1_1:checked ~ .cs_description > .num1 > .cs_title,
.csslider1 > #cs_slide1_2:checked ~ .cs_description > .num2 > .cs_title,
.csslider1 > #cs_pause1_2:checked ~ .cs_description > .num2 > .cs_title,
.csslider1 > #cs_slide1_3:checked ~ .cs_description > .num3 > .cs_title,
.csslider1 > #cs_pause1_3:checked ~ .cs_description > .num3 > .cs_title {
    opacity: 1;
    visibility: visible;
}


.csslider1 > #cs_slide1_0:checked ~ .cs_description > .num0 .cs_wrapper,
.csslider1 > #cs_pause1_0:checked ~ .cs_description > .num0 .cs_wrapper,
.csslider1 > #cs_slide1_1:checked ~ .cs_description > .num1 .cs_wrapper,
.csslider1 > #cs_pause1_1:checked ~ .cs_description > .num1 .cs_wrapper,
.csslider1 > #cs_slide1_2:checked ~ .cs_description > .num2 .cs_wrapper,
.csslider1 > #cs_pause1_2:checked ~ .cs_description > .num2 .cs_wrapper,
.csslider1 > #cs_slide1_3:checked ~ .cs_description > .num3 .cs_wrapper,
.csslider1 > #cs_pause1_3:checked ~ .cs_description > .num3 .cs_wrapper {
    opacity: 1;
}
.csslider1 > .cs_description > label > .cs_title {
    /* Un seul cadre pour le titre ET le contenu, sur deux lignes (voir include/slider.php :
       "titre\ncontenu" passé à parseMinecraftColors(), le "\n" devenant un <br> et un éventuel
       code couleur "§X" tapé dans l'un ou l'autre étant rendu comme dans un minetip), même look
       que le minetip (.popbox dans global.css) : fond violet-noir, bordure "pixel" simulée par le
       box-shadow (au lieu de border-radius/filter hérités de la règle générique "label > span"
       ci-dessus, tous deux annulés ici pour rester carré et net comme Minecraft). */
    background-color: rgba(29, 14, 29, 0.95);
    border: 2px solid #2c0962;
    border-radius: 0;
    box-shadow: -2px 0 rgba(29, 14, 29, 0.95), 0 2px rgba(29, 14, 29, 0.95), 2px 0 rgba(29, 14, 29, 0.95), 0 -2px rgba(29, 14, 29, 0.95);
    filter: none;
    padding: 4px;
    font-family: 'minecraftia';
    /* Même taille (et même line-height) que le minetip (.popbox dans global.css), pas
       var(--font-size-normal) : le but est que le texte du slider se redimensionne exactement
       pareil que celui d'un tooltip, voir les mêmes paliers @media plus bas. */
    font-size: 16px;
    line-height: 22px;
    color: #FFF;
    text-shadow: 2px 2px 0px #3f3f3f;
    /* Pas de justify : un texte "minecraft" (minetip compris) n'est jamais justifié. */
    text-align: left;
    /* Un mot trop long pour tenir sur une ligne (cadre étroit) se coupe proprement avec un trait
       d'union plutôt que de déborder ou de sauter en entier à la ligne suivante. */
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    overflow-wrap: break-word;
    opacity: 0;
    visibility: hidden;
    z-index: 2;

    /* Simple fondu (opacity), sans translation ni rebond élastique, à 0.2s linear comme partout
       ailleurs sur le site (voir .btn dans global.css). */
    -webkit-transition: 0.2s linear all;
    transition: 0.2s linear all;
}
/* Si le titre ou le contenu contient un code couleur "§X" (voir plus haut), il ressort via les
   mêmes classes .mc-color/.mc-r que partout ailleurs sur le site (voir global.css) : leur
   --shadow-len (fixe, 2px) est réduit dans les mêmes paliers @media que le reste du cadre,
   voir plus bas. */

.csslider1 > .cs_description > label > .cs_title > .cs_wrapper {
    opacity: 0;
    -webkit-transition: 0.2s linear all;
    transition: 0.2s linear all;
}



@-webkit-keyframes cs_title1 {
    0.6813524590163934%, 24.308647540983607%    {
        opacity: 1;
        z-index: 2;
        visibility: visible;
    }
    25.973360655737704%    {
        opacity: 0;
        z-index: 2;
        visibility: hidden;
    }
    25.983360655737705%, 100%    { z-index: 0; }
}
@keyframes cs_title1 {
    0.6813524590163934%, 24.308647540983607%    {
        opacity: 1;
        z-index: 2;
        visibility: visible;
    }
    25.973360655737704%    {
        opacity: 0;
        z-index: 2;
        visibility: hidden;
    }
    25.983360655737705%, 100%    { z-index: 0; }
}



.csslider1 > #cs_play1:checked ~ .cs_description > .num0    > .cs_title {
    -webkit-animation: cs_title1 48800ms infinite -1400ms ease;
    animation: cs_title1 48800ms infinite -1400ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num1    > .cs_title {
    -webkit-animation: cs_title1 48800ms infinite 10800ms ease;
    animation: cs_title1 48800ms infinite 10800ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num2    > .cs_title {
    -webkit-animation: cs_title1 48800ms infinite 23000ms ease;
    animation: cs_title1 48800ms infinite 23000ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num3    > .cs_title {
    -webkit-animation: cs_title1 48800ms infinite 35200ms ease;
    animation: cs_title1 48800ms infinite 35200ms ease;
}





@-webkit-keyframes cs_title_text1 {
    0.6813524590163934%, 24.308647540983607%    { opacity: 1; }
    25.973360655737704%    { opacity: 0; }
}
@keyframes cs_title_text1 {
    0.6813524590163934%, 24.308647540983607%    { opacity: 1; }
    25.973360655737704%    { opacity: 0; }
}



.csslider1 > #cs_play1:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper {
    -webkit-animation: cs_title_text1 48800ms infinite -1250ms ease;
    animation: cs_title_text1 48800ms infinite -1250ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper {
    -webkit-animation: cs_title_text1 48800ms infinite 10950ms ease;
    animation: cs_title_text1 48800ms infinite 10950ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num2 .cs_title > .cs_wrapper {
    -webkit-animation: cs_title_text1 48800ms infinite 23150ms ease;
    animation: cs_title_text1 48800ms infinite 23150ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num3 .cs_title > .cs_wrapper {
    -webkit-animation: cs_title_text1 48800ms infinite 35350ms ease;
    animation: cs_title_text1 48800ms infinite 35350ms ease;
}


.csslider1 > #cs_play1:checked ~ .cs_description > label > .cs_title,
.csslider1 > #cs_play1:checked ~ .cs_description > label > .cs_title > .cs_wrapper,
.csslider1 > .pause:checked ~ .cs_description > label > .cs_title,
.csslider1 > .pause:checked ~ .cs_description > label > .cs_title > .cs_wrapper {
    -webkit-transition: none;
    transition: none;
}

/* ------------- /Template Description ------------- */

/* Scaling du texte du slider selon la taille de l'écran, EXACTEMENT comme le minetip : mêmes
   paliers ET mêmes valeurs que ".popbox" dans global.css, copiés depuis ses @media juste après
   lui. Volontairement des "@media" sur la fenêtre (pas un "@container" sur la largeur du slider,
   comme le "@container (max-width: 799px)" tout en haut de ce fichier) : le but ici est de réagir
   exactement au même seuil que le tooltip, et non à la largeur réelle — toujours plus petite de
   plusieurs dizaines de pixels à cause des marges/bordures de ".content" et ".slider" empilées —
   du slider, qui aurait décalé les paliers par rapport à ceux du tooltip. */
@media screen and (max-width: 429px) {
    /* Même taille et même text-shadow que .cs_title à ce palier. */
    .csslider1 > .cs_bullets > label > .cs_point {
        font-size: 10px;
        --point-shadow-len: 1.25px;
    }
    .csslider1 > .cs_description > label > .cs_title {
        font-size: 10px; /* comme ".popbox" (global.css) à ce même palier */
        line-height: 13.75px;
        border: 1.25px solid #2c0962;
        padding: 2.5px;
        text-shadow: 1.25px 1.25px 0px #3f3f3f;
        box-shadow: -1.25px 0 rgba(29, 14, 29, 0.95), 0 1.25px rgba(29, 14, 29, 0.95), 1.25px 0 rgba(29, 14, 29, 0.95), 0 -1.25px rgba(29, 14, 29, 0.95);
    }
    /* Un éventuel code couleur "§X" (voir .mc-color/.mc-r dans global.css) a son propre text-shadow
       fixe (--shadow-len: 2px) : on l'aligne ici sur celui du cadre ci-dessus. */
    .csslider1 > .cs_description > label > .cs_title .mc-color,
    .csslider1 > .cs_description > label > .cs_title .mc-r {
        --shadow-len: 1.25px;
    }
}
@media screen and (min-width: 430px) and (max-width: 519px) {
    .csslider1 > .cs_bullets > label > .cs_point {
        font-size: 12px;
        --point-shadow-len: 1.5px;
    }
    .csslider1 > .cs_description > label > .cs_title {
        font-size: 12px; /* comme ".popbox" (global.css) à ce même palier */
        line-height: 16.5px;
        border: 1.5px solid #2c0962;
        padding: 3px;
        text-shadow: 1.5px 1.5px 0px #3f3f3f;
        box-shadow: -1.5px 0 rgba(29, 14, 29, 0.95), 0 1.5px rgba(29, 14, 29, 0.95), 1.5px 0 rgba(29, 14, 29, 0.95), 0 -1.5px rgba(29, 14, 29, 0.95);
    }
    .csslider1 > .cs_description > label > .cs_title .mc-color,
    .csslider1 > .cs_description > label > .cs_title .mc-r {
        --shadow-len: 1.5px;
    }
}
@media screen and (min-width: 520px) and (max-width: 599px) {
    .csslider1 > .cs_bullets > label > .cs_point {
        font-size: 14px;
        --point-shadow-len: 1.75px;
    }
    .csslider1 > .cs_description > label > .cs_title {
        font-size: 14px; /* comme ".popbox" (global.css) à ce même palier */
        line-height: 19.25px;
        border: 1.75px solid #2c0962;
        padding: 3.5px;
        text-shadow: 1.75px 1.75px 0px #3f3f3f;
        box-shadow: -1.75px 0 rgba(29, 14, 29, 0.95), 0 1.75px rgba(29, 14, 29, 0.95), 1.75px 0 rgba(29, 14, 29, 0.95), 0 -1.75px rgba(29, 14, 29, 0.95);
    }
    .csslider1 > .cs_description > label > .cs_title .mc-color,
    .csslider1 > .cs_description > label > .cs_title .mc-r {
        --shadow-len: 1.75px;
    }
}