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

/* ------------- General ------------- */
@font-face {
    font-family: "cs-ctrl-basic";
    src: url("fonts/cs-ctrl-basic/cs-ctrl-basic.eot");
    src: url("fonts/cs-ctrl-basic/cs-ctrl-basic.eot#iefix") format("embedded-opentype"),
         url("fonts/cs-ctrl-basic/cs-ctrl-basic.woff") format("woff"),
         url("fonts/cs-ctrl-basic/cs-ctrl-basic.ttf") format("truetype"),
         url("fonts/cs-ctrl-basic/cs-ctrl-basic.svg#basic") format("svg");
    font-weight: normal;
    font-style: normal;
}

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. */
@media screen and (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;
    width: 75%;
    left: 0;
}
.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;
    bottom:10%;
    right: 4%;
    z-index: 5;
}
.csslider1 > .cs_play_pause > label {
    position: absolute;
    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 ------------- */
.csslider1 > .cs_play_pause {
    -webkit-transition: .4s all 0s ease;
    transition: .4s all 0s ease;
}
.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,
.csslider1 > .cs_play_pause {
    opacity: 0;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
}

.csslider1:hover > .cs_arrowprev,
.csslider1:hover > .cs_arrownext,
.csslider1:hover > .cs_play_pause {
    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;
    margin-top: -48px;
    margin-left: -48px;
    background-color: var(--color2);
    background-size: 32px;
    border-radius: var(--border-radius);
    border: calc(var(--border-len)/2) solid var(--color1);
    filter: drop-shadow(0px 0px 5px var(--color1));
}
.csslider1 > .cs_play_pause > label,
.csslider1 > .cs_play_pause > label span:after {
    -webkit-transition: background-color 0.4s ease, color 0.4s ease;
    transition: background-color 0.4s ease, color 0.4s ease;
}
.csslider1 > .cs_play_pause > label span {
    display: block;
    color: var(--color0);
}
.csslider1 > .cs_play_pause > label span:after{
    display: block;
    font: 15px "cs-ctrl-basic";
    line-height: 25px;
    text-align: center;
}
/* IE10+ hack */
_:-ms-input-placeholder, :root .csslider1 > .cs_play_pause > label span:after {
    line-height: 28px;
}
.csslider1 > .cs_play_pause > .cs_play span:after {
    content: '\e802';
}
.csslider1 > .cs_play_pause > .cs_pause span:after {
    content: '\e803';
}

.csslider1 > .cs_play_pause:hover > label {
    background-color: var(--color2);
}
.csslider1 > .cs_play_pause:hover > label span {
    color: var(--color0);
    -wibkit-animation: playPause1 .7s infinite ease-in-out;
    animation: playPause1 .7s infinite ease-in-out;
}

@-webkit-keyframes playPause1 {
    0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
    25% { -webkit-transform: translateY(1.5px); transform: translateY(1.5px); }
    75% { -webkit-transform: translateY(-1.5px); transform: translateY(-1.5px); }
}
@keyframes playPause1 {
    0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
    25% { -webkit-transform: translateY(1.5px); transform: translateY(1.5px); }
    75% { -webkit-transform: translateY(-1.5px); transform: translateY(-1.5px); }
}
/* ------------- /Template Play Pause ------------- */

/* ------------- Template Bullets ------------- */
.csslider1 > .cs_bullets {
    top: 5px;
    margin-top: 5px;
}
.csslider1 > .cs_bullets > label {
    border-radius: var(--border-radius);
    border: calc(var(--border-len)/2) solid var(--color1);
    filter: drop-shadow(0px 0px 5px var(--color1));
    margin: 0 5px;
    padding: 9px;
    background-color: var(--color2);
    background-size: 32px;
}

.csslider1 > .cs_bullets > label > .cs_point {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -1.5px;
    margin-top: -1.5px;
    background: var(--color1);
    border-radius: var(--border-radius);
    padding: 1.5px;
}

.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 {
    background: var(--color0);
}

@keyframes bullet1 {
    0%, 24.99%    { background: var(--color0); }
    25%, 100% { background: var(--color1); }
}
@-webkit-keyframes bullet1 {
    0%, 24.99%    { background: var(--color0); }
    25%, 100% { background: var(--color1); }
}

.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;
}



.csslider1 > #cs_play1:checked ~ .cs_bullets > label > .cs_point,
.csslider1 > .pause:checked ~ .cs_bullets > label > .cs_point {
    -webkit-transition: none;
    transition: none;
}


.csslider1 > .slide:checked ~ .cs_bullets > label > .cs_point,
.csslider1 > .pause:checked ~ .cs_bullets > label > .cs_point {
    -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: 15px;
    top: auto;
    left: 10px;
}

.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_slide1_0:checked ~ .cs_description > .num0 > .cs_descr,
.csslider1 > #cs_pause1_0:checked ~ .cs_description > .num0 > .cs_title,
.csslider1 > #cs_pause1_0:checked ~ .cs_description > .num0 > .cs_descr,
.csslider1 > #cs_slide1_1:checked ~ .cs_description > .num1 > .cs_title,
.csslider1 > #cs_slide1_1:checked ~ .cs_description > .num1 > .cs_descr,
.csslider1 > #cs_pause1_1:checked ~ .cs_description > .num1 > .cs_title,
.csslider1 > #cs_pause1_1:checked ~ .cs_description > .num1 > .cs_descr,
.csslider1 > #cs_slide1_2:checked ~ .cs_description > .num2 > .cs_title,
.csslider1 > #cs_slide1_2:checked ~ .cs_description > .num2 > .cs_descr,
.csslider1 > #cs_pause1_2:checked ~ .cs_description > .num2 > .cs_title,
.csslider1 > #cs_pause1_2:checked ~ .cs_description > .num2 > .cs_descr,
.csslider1 > #cs_slide1_3:checked ~ .cs_description > .num3 > .cs_title,
.csslider1 > #cs_slide1_3:checked ~ .cs_description > .num3 > .cs_descr,
.csslider1 > #cs_pause1_3:checked ~ .cs_description > .num3 > .cs_title,
.csslider1 > #cs_pause1_3:checked ~ .cs_description > .num3 > .cs_descr {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


.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;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
.csslider1 > .cs_description > label > .cs_title {
    background-color: var(--color2);
    font-family: vinque;
    background-size: 32px;
    margin: -5px 10px;
    /* font-size: clamp(var(--font-size-small), 2vw, var(--font-size-normal)); /* 20px = 2vw when vw = 1000px */
    font-size: var(--font-size-large);
    text-shadow: var(--color1) 0px 0px 5px;
    opacity: 0;
    visibility: hidden;
    z-index: 2;
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);

    -webkit-transition:
        950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550),
        950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550),
        950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition:
        950ms opacity 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550),
        950ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550),
        950ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550),
        950ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
.csslider1 > .cs_description > label > .cs_descr {
    background-color: var(--color2);
    text-shadow: var(--color1) 0px 0px 5px;
    font-family: blue;
    background-size: 64px;
    text-align: left;
    /* font-size: clamp(var(--font-size-small), 1.75vw, var(--font-size-normal)); /* 17.5px = 1.75vw when vw = 1000px */
    font-size: var(--font-size-normal);
    margin: -5px 20px;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
    text-align: justify;
    /* Voir le commentaire sur .selnews span dans global.css : inter-character étire l'espace
       entre les lettres, on préfère la césure automatique. */
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    overflow-wrap: break-word;

    -webkit-transition:
        950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550),
        950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550),
        950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition:
        950ms opacity 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550),
        950ms -webkit-transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550),
        950ms transform 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550),
        950ms visibility 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

.csslider1 > .cs_description > label > .cs_title > .cs_wrapper {
    opacity: 0;
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);

    -webkit-transition:
        950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550),
        950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition:
        950ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550),
        950ms -webkit-transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550),
        950ms transform 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
.csslider1 > .cs_description > label > .cs_descr > .cs_wrapper {
    opacity: 0;
    -webkit-transform: translateY(100px);
    transform: translateY(100px);

    -webkit-transition:
        950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550),
        950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition:
        950ms opacity 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550),
        950ms -webkit-transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550),
        950ms transform 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}




@-webkit-keyframes cs_title1 {
    0.6813524590163934%, 24.308647540983607%    {
        opacity: 1;
        z-index: 2;
        visibility: visible;
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }
    0.9733606557377049%, 24.016639344262295%    {
        opacity: 1;
        z-index: 2;
        visibility: visible;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
    25.973360655737704%    {
        opacity: 0;
        z-index: 2;
        visibility: hidden;
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
    }
    25.983360655737705%, 100%    { z-index: 0; }
}
@keyframes cs_title1 {
    0.6813524590163934%, 24.308647540983607%    {
        opacity: 1;
        z-index: 2;
        visibility: visible;
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }
    0.9733606557377049%, 24.016639344262295%    {
        opacity: 1;
        z-index: 2;
        visibility: visible;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
    25.973360655737704%    {
        opacity: 0;
        z-index: 2;
        visibility: hidden;
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
    }
    25.983360655737705%, 100%    { z-index: 0; }
}


@-webkit-keyframes cs_descr1 {
    0.6813524590163934%, 24.308647540983607%    {
        opacity: 1;
        z-index: 1;
        visibility: visible;
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    0.9733606557377049%, 24.016639344262295%    {
        opacity: 1;
        z-index: 1;
        visibility: visible;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
    25.973360655737704%    {
        opacity: 0;
        z-index: 1;
        visibility: hidden;
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }
    25.983360655737705%, 100%    { z-index: 0; }
}
@keyframes cs_descr1 {
    0.6813524590163934%, 24.308647540983607%    {
        opacity: 1;
        z-index: 1;
        visibility: visible;
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    0.9733606557377049%, 24.016639344262295%    {
        opacity: 1;
        z-index: 1;
        visibility: visible;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
    25.973360655737704%    {
        opacity: 0;
        z-index: 1;
        visibility: hidden;
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }
    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;
}


.csslider1 > #cs_play1:checked ~ .cs_description > .num0    > .cs_descr {
    -webkit-animation: cs_descr1 48800ms infinite -1150ms ease;
    animation: cs_descr1 48800ms infinite -1150ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num1    > .cs_descr {
    -webkit-animation: cs_descr1 48800ms infinite 11050ms ease;
    animation: cs_descr1 48800ms infinite 11050ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num2    > .cs_descr {
    -webkit-animation: cs_descr1 48800ms infinite 23250ms ease;
    animation: cs_descr1 48800ms infinite 23250ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num3    > .cs_descr {
    -webkit-animation: cs_descr1 48800ms infinite 35450ms ease;
    animation: cs_descr1 48800ms infinite 35450ms ease;
}




@-webkit-keyframes cs_title_text1 {
    0.6813524590163934%, 24.308647540983607%    {
        opacity: 1;
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }
    0.9733606557377049%, 24.016639344262295%    {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
    25.973360655737704%    {
        opacity: 0;
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
    }
}
@keyframes cs_title_text1 {
    0.6813524590163934%, 24.308647540983607%    {
        opacity: 1;
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }
    0.9733606557377049%, 24.016639344262295%    {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
    25.973360655737704%    {
        opacity: 0;
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
    }
}


@-webkit-keyframes cs_descr_text1 {
    0.6813524590163934%, 24.308647540983607%    {
        opacity: 1;
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    0.9733606557377049%, 24.016639344262295%    {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
    25.973360655737704%    {
        opacity: 0;
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }
}
@keyframes cs_descr_text1 {
    0.6813524590163934%, 24.308647540983607%    {
        opacity: 1;
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    0.9733606557377049%, 24.016639344262295%    {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
    25.973360655737704%    {
        opacity: 0;
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }
}


.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 > .num0 .cs_descr > .cs_wrapper {
    -webkit-animation: cs_descr_text1 48800ms infinite -1000ms ease;
    animation: cs_descr_text1 48800ms infinite -1000ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper {
    -webkit-animation: cs_descr_text1 48800ms infinite 11200ms ease;
    animation: cs_descr_text1 48800ms infinite 11200ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num2 .cs_descr > .cs_wrapper {
    -webkit-animation: cs_descr_text1 48800ms infinite 23400ms ease;
    animation: cs_descr_text1 48800ms infinite 23400ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num3 .cs_descr > .cs_wrapper {
    -webkit-animation: cs_descr_text1 48800ms infinite 35600ms ease;
    animation: cs_descr_text1 48800ms infinite 35600ms ease;
}

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

/* ------------- /Template Description ------------- */
/* Sur petit écran, le titre (et maintenant la description aussi) prend toute la largeur au
   lieu des 75% habituels (".cs_description > label"). La description était auparavant masquée
   ici faute de place ; elle est réaffichée. */
@media screen and (max-width: 479px){
    .csslider1 > .cs_description > label { width: 100%; } 
}