body{background: url('/template/charte/imgs/creations-bg.png') no-repeat; background-size: cover; background-position: top center;}
section{position: relative;}
.col, .row{padding: 0;margin: 0}

:root{
    --progs-radius: 1000px;
    --link-offset: 40px;
    --border-width: 400px;
}

/*
-----------------------------
        Une d'actualité
-----------------------------
*/

#une{margin-top: 35px;}
#une .photo{width: 100%; max-width: 1275px;}
#une .photo img{width: 100%; height: 524px; object-fit: cover; object-position: top center;/*filter: grayscale(1);*/ transition: all .2s ease;}
#une .text{margin-right:calc((100vw - 1600px) / 2); width: 100%;max-width: calc(100vw - 1275px - ((100vw - 1600px) / 2));position: relative;padding-top: 3vw; display: flex; flex-direction: column; align-items: flex-end;}
#une .text:before{position: absolute; content: ''; background-color: #000; height: 2px; width: 262px; right: 0; top: 3vw; transition: all .2s ease;}
/*#une h2{font-size: 57px; font-weight: bold;width: 100%; max-width: 315px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-transform: uppercase;transition: all .2s ease;word-wrap: break-word;}*/
#une h2{font-size: 40px; font-weight: bold;width: 100%; max-width: 315px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-transform: uppercase;transition: all .2s ease;word-wrap: break-word;}
/*#une .chapeau{font-size: 25px;width: 100%; max-width: 315px;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;overflow: hidden;}*/
#une .chapeau{font-size: 20px;width: 100%; max-width: 315px;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;overflow: hidden;}
#une a{font-size: 21px; font-weight: 300; position: absolute; bottom: 3vw;right: 0;text-transform: uppercase;opacity: 0;transform: translateX(-100vw); transition: all .2s ease;}
#une .row > a, .progs figure > a{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

/* Effet hover */
#une:hover h2{transform: translateY(-20px);}
#une:hover .photo img{filter: grayscale(0);}
#une:hover a{transform: translateY(0); opacity: 1;}
#une:hover .text:before{transform: translateX(-22vw); height: 12px;}

.only-mobile{display: none;}

.progs{margin-top: 70px;margin-bottom: 200px;}
.progs img{width: 100%; transition: all .2s ease;}
.progs figure{position: relative;}
.progs figcaption{position: absolute; opacity: 0; transition: all .2s ease; top: 0; left: 0; width: 100%; height: 100%;}
.progs figcaption a{color: white; text-transform: uppercase; font-weight: 300; font-size: 21px;}
.progs figcaption h1{position: absolute; left: 50%; top: 50%; max-width: 280px; width: 100%; transform: translate(-50%, -50%);color: black; font-weight: 900; font-size: 47px;text-align: center;}
.progs figcaption:before{content: '';position: absolute; opacity: 0;transform: scale(0);width: 100%; max-width: 814px; height: 100%;background-color: black; transition: all .2s ease;}

.progs figure:nth-child(4n - 3) figcaption:before{border-top: white var(--border-width) solid; border-left: white var(--border-width) solid; border-radius: var(--progs-radius) 0 0 0; transform-origin: bottom right;bottom: 0; right: 0;}
.progs figure:nth-child(4n - 3) figcaption a{position: absolute; bottom: var(--link-offset); right: var(--link-offset);}
.progs figure:nth-child(4n - 2) figcaption:before{border-top: white var(--border-width) solid; border-right: white var(--border-width) solid; border-radius: 0 var(--progs-radius) 0 0; transform-origin: bottom left;bottom: 0; left: 0;}
.progs figure:nth-child(4n - 2) figcaption a{position: absolute; bottom: var(--link-offset); left: var(--link-offset);}
.progs figure:nth-child(4n - 1) figcaption:before{border-bottom: white var(--border-width) solid; border-left: white var(--border-width) solid; border-radius: 0 0 0 var(--progs-radius); transform-origin: top right;top: 0; right: 0;}
.progs figure:nth-child(4n - 1) figcaption a{position: absolute; top: var(--link-offset); right: var(--link-offset);}
.progs figure:nth-child(4n) figcaption:before{border-bottom: white var(--border-width) solid; border-right: white var(--border-width) solid; border-radius: 0 0 var(--progs-radius) 0; transform-origin: top left;top: 0; left: 0;}
.progs figure:nth-child(4n) figcaption a{position: absolute; top: var(--link-offset); left: var(--link-offset);}

.progs figure:hover figcaption{opacity: 1;}
.progs figure:hover figcaption:before{transform: scale(1); opacity: 1}

.pagination{width: 100%; max-width: 70%; display: grid; justify-content: center; margin: -5vw auto 4vw;gap: 15px;grid-auto-flow: column;}
.pagination a{display: flex; width: 30px; height: 30px; font-weight: bold; background-color: black; box-shadow: rgba(0,0,0,0.3) 3px 3px 5px; border-radius: 50%; -webkit-border-radius: 50%; color: white;justify-content: center; align-items: center;transition: background-color .3s ease, color .3s ease;line-height: 1.0em;}
.pagination a:hover, .pagination a.active{background-color: #ff6363;
}

@media (max-width: 1630px){
    #une .photo{max-width: 70%;}
    #une .text{padding-right: 15px;padding-left: 15px;max-width: 30%;}
    #une:hover .text:before{transform: translateX(-28vw);width: 200px;}
}


@media (max-width: 1366px){
    #une .photo img{height: 366px;}
    #une h2{font-size: 28px;padding-top: 5px;}
    #une .chapeau,#une a{font-size: 16px;}

    .progs{margin-top: 49px;margin-bottom: 80px;}
    .progs img{height: 410px; object-position: center; object-fit: cover;}
    .progs figcaption h1{max-width: 280px;font-size: 30px;}
    .progs figcaption a{font-size: 16px;}
    :root{
        --progs-radius: 700px;
        --link-offset: 28px;
        --border-width: 280px;
    }
}


@media (max-width: 1200px){
    #une .photo{max-width: 60%;}
    #une .text{max-width: 40%;}
    #une:hover .text:before{transform: translateX(-38vw);width: 200px;}
}

@media (max-width: 800px) {
    #une {padding: 0 15px;}
    #une .photo, #une .text, #une h2, #une .chapeau {max-width: 100%;}
    #une .row {flex-direction: column;}
    #une .text:before {display: none;}
    #une .text {padding-bottom: 50px;}
    #une a {transform: translate(-50%, 0);opacity: 1;left: 50%;right: auto;}
    #une:hover a {transform: translate(-50%, 0);}
    #une .photo img {height: calc((100vw - 30px) * 524 / 1275);}
    #une h2 {font-size: 6vw;text-align: center}
    #une .chapeau {font-size: 3vw;text-align: justify;}
    #une:hover h2 {transform: translateY(0);}

    .only-mobile{display: inline-block;margin-top: 30px;margin-bottom: 15px;text-align: center;width: 100%; font-size: 24px;}
    .progs{margin-bottom: 20px;margin-top: 20px;}
    .progs{flex-direction: column!important;align-items: center!important;}
    .progs figure{width: 100%!important;max-width: 960px;margin-bottom: 20px;}
    .progs figcaption:before{display: none;}
    .progs figcaption h1{color: white;text-shadow: rgba(0,0,0,0.3) 3px 3px 3px; font-size: 5vw;max-width: 70%;}
    .progs figcaption a{right: auto!important; top: auto!important; left: 50%!important; bottom: 40px!important; transform: translateX(-50%);font-size: 3vw;}
    .progs img, #une .photo img{filter: none;}
    .progs figcaption{opacity: 1;}
}


@media (max-width: 480px) {
    .only-mobile{font-size: 20px;}
    .progs figcaption h1{font-size: 7vw; max-width: 90%;}
    .progs figcaption a{font-size: 4vw;}
    .progs img{height: 250px;}
}