/* ---------------------------- actual CSS ---------------------------- */
main {padding: 0 20px;}
.article>div {margin: 40px auto;}
main section 
{
    border-radius: 20px;
    background: var(--white);
    padding: 20px;
    box-shadow: var(--shadow-ipad);
    margin: 50px auto;
    scroll-margin-top: 70px;
}
.meta 
{
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
}
.date,.author
{
    margin: 2px 0;
    color: var(--light-grey);
    font-size: 15px;
    display: inline-block;
    margin-left: 5px;
}
.date 
{
    display: inline-block;
    margin-left: 5px;
}

.module 
{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
    margin: auto;
    width: 100%;
    justify-content: space-evenly;
    position: relative;
}
.img-left {flex-direction: row-reverse;}
.module .text 
{
    margin: 0;
    width: 100%;
    max-width: 100%;
}
.module p {margin: 10px 0;}
p 
{
    margin: 30px 0;
    text-align: justify;
}
.text 
{
    margin: 12pt auto;
    text-align: left;
    font-size: 19px;
}
.articles section a {color: var(--EP-Blue);}
.articles section a:hover {text-decoration: underline;}

/* Titraille ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.big_title
{
    font-family: study;
    font-size: 80px;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding-bottom: 20px;
}
.big_title::after
{
content: '';
    position: absolute;
    width: 100%;
    background-image: url(/images/news/Vector2.svg);
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
    left: 0;
    z-index: -1;
    bottom: calc(-100% + 20px);
}
.big_title::before{
    content: '';
    position: absolute;
    width: 70px;
    background-image: url(/images/news/Vector3.svg);
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
    left: calc(100% - 7px);
    bottom: calc(100% - 40px);
}
h2{margin-bottom: 0;}

.Title
{
    width: 95%;
    margin: auto;
    text-wrap-style: balance;
}
.Title h2
{
    margin-bottom: 10px;
    display: inline;
    position: relative; 
    width: fit-content;
}
.Title H2 span{
    /* z-index: 3; */
    /* position: relative;  ??? */
}
.underline
{
    width: 100%;
    position: absolute;
    bottom: -7px;
    left: 0;
    height: 10px;
}
.underline svg
{
    width: 100%;
    height: 100%;
    display: block;
}
.underline svg path{
    stroke: var(--EP-Light-Blue);
}

/* Highlights ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.highlight 
{
    animation: none;
    Margin: 0 -4px;
    Padding: 2px 7px;
    Background-position: 3px;
    position: relative;
}
.article>div:nth-of-type(4n+2) .highlight 
{
  background: linear-gradient(104deg,
        rgba(156, 196, 60,0) 0.45%,
        rgba(156, 196, 60,1.25) 1.2%,
        rgba(156, 196, 60,0.6) 2.9%,
        rgba(156, 196, 60,0.3) 46.5%,
        rgba(156, 196, 60,0.7) 48%,
        rgba(156, 196, 60,0) 49%);
    background-size: 200% 100%;
    Background-position: 3px;
}
.article>div:nth-of-type(4n+3) .highlight 
{
    background: linear-gradient(104deg,
        rgba(255, 228, 53,0) 0.45%,
        rgba(255, 228, 53,1.25) 1.2%,
        rgba(255, 228, 53,0.6) 2.9%,
        rgba(255, 228, 53,0.3) 46.5%,
        rgba(255, 228, 53, 0.7) 48%,
        rgba(255, 228, 53,0) 49%);
    background-size: 200% 100%;
    Background-position: 3px;
}
.article>div:nth-of-type(4n+4) .highlight 
{
  background: linear-gradient(104deg,
        rgba(115, 151, 242,0) 0.45%,
        rgba(115, 151, 242,1.25) 1.2%,
        rgba(115, 151, 242,0.6) 2.9%,
        rgba(115, 151, 242,0.3) 46.5%,
        rgba(115, 151, 242, 0.7) 48%,
        rgba(115, 151, 242,0) 49%);
    background-size: 200% 100%;
    Background-position: 3px;
}
.article>div:nth-of-type(4n+1) .highlight 
{
    background: linear-gradient(104deg,
        rgba(251, 160, 227,0) 0.45%,
        rgba(251, 160, 227,1.25) 1.2%,
        rgba(251, 160, 227,0.6) 2.9%,
        rgba(251, 160, 227,0.3) 46.5%,
        rgba(251, 160, 227, 0.7) 48%,
        rgba(251, 160, 227,0) 49%);
    background-size: 200% 100%;
    Background-position: 3px;
}

.article .post-it p .highlight
{
    background: linear-gradient(104deg,
        rgba(232, 147, 255,0) 0.45%,
        rgba(232, 147, 255,1.25) 1.2%,
        rgba(232, 147, 255,0.6) 2.9%,
        rgba(232, 147, 255,0.3) 46.5%,
        rgba(232, 147, 255,0.7) 48%,
        rgba(232, 147, 255,0) 49%);
    background-size: 200% 100%;
    Background-position: 3px;
}

.manualscript 
{
    font-size: 24px;
    font-weight: bold;
    word-spacing: normal;
    line-height: 0;
    color: black;
    font-family: 'study', sans-serif;
}
.post-it .manualscript {font-size: 22px}

/* Photos~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.photo 
{
    background-color: var(--white);
    max-width: 350px;
    /* margin: 30px auto 0; */
    margin: 0 30px;
    width:75%;
    display: block;
    box-shadow: var(--shadow-ipad);
    position: relative;
    border: 15pt solid var(--white);
    box-sizing: border-box;
    rotate: -3deg;
}
.img-left .photo {rotate: 3deg;}
.small-photo {max-width: 200px;}
.photo img 
{
    background-color: #b0d2da;
    max-width: 100%;
    width: 100%;
    vertical-align: middle;
}
.photo div 
{
    margin-bottom: -10px;
    width: 100%;
    text-align: center;
}
.photo video{
    width: 100%;
    display: block;
}
.photo .note 
{
    font-family: 'Courier New', monospace;
    margin-bottom: -20px;
    padding: 10px 0;
}
.photo::before{
    background: rgba(255, 255, 235, .6);
    box-shadow: 0 1px 3px rgb(0 0 0 / 40%);
    box-shadow: 0px 1px 3px rgb(0 0 0 / 20%);
    content: "";
    display: block;
    width: 70%;
    position: absolute;
    margin: auto;
    height: 30px;
    top: -35px;
    rotate: -3deg;
    left: 0;
    right: 0;
    max-width: 120px;
    mask:
        conic-gradient(from 45deg at left,#0000, #000 1deg 89deg, #0000 90deg) left/51% 10% repeat-y, 
        conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg) right/51% 10% repeat-y;
    background: rgb(239 239 226 / 60%);
}
.img-right .photo::before{rotate: 3deg;}

.Screen-cut 
{
    width: 100%;
    box-shadow: var(--shadow-ipad);
    position: relative;
    border-radius: 7px;
}
.Screen-cut video 
{
    width: 100%;
    display: block;
    border-radius: 7px;
}


/* Arrows~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.img-right 
{
    position: relative;
    /* calcul de la différence de height entre le texte et la photo, avec comme maximum et minimum la taille de la flèche */
    --diff: clamp(-170px, calc(var(--textHeight) - var(--photoHeight)), 170px);
}
.img-left 
{
    position: relative;
    /* calcul de la différence de height entre le texte et la photo, avec comme maximum et minimum la taille de la flèche */
    --diff: clamp(-170px, calc(var(--textHeight) - var(--photoHeight)), 170px);
}

.img-right .arrow 
{
    position: absolute;
    width: 135px;
    height: 35px;
    transform-origin: center;
    /* calcul de la différence divisée par son max/min pour obstenir un %, multiplié par le résultat qu'on souhaite avoir lorsqu'on atteint ces limites, ajusté par le résultat qu'on souhaite avoir si la différence est nulle. */
    /* valeur absolue de la différence pour le top, car la position monte puis redescend */
    /* le côté prends en compte la largeur de l'image */
    top: calc(abs(var(--diff) / 170) * 55 - 40px);
    right: calc((var(--diff) / 170) * -50 + (var(--photoWidth) - 10px));
    transform: rotate(calc((var(--diff) / 170px) * 35deg - 3deg));
}
.img-left .arrow 
{
    position: absolute;
    width: 145px;
    height: 35px;
    transform-origin: center;
    top: calc(abs(var(--diff) / 170) * 55 - 40px);
    left: calc((var(--diff) / 170) * -50 + (var(--photoWidth) - 10px));
    transform: rotate(calc(((var(--diff) / 170px) * -35deg) + 10deg));
}

.img-right:has(.small-photo) .arrow
{
    width: 80px;
    height: 41px;
    top: calc(abs(var(--diff) / 135) * 40 - 35px);
    right: calc((var(--diff) / 135) * -10 + (var(--photoWidth) + 30px));
    transform: rotate(calc(((var(--diff) / 135px) * 35deg) - 10deg));
}
.img-left:has(.small-photo) .arrow
{
    width: 80px;
    height: 22px;
    top: calc(abs(var(--diff) / 135) * 40 - 35px);
    left: calc((var(--diff) / 135) * -10 + (var(--photoWidth) + 30px));
    transform: rotate(calc((((var(--diff)) / 135px) * -35deg) + 10deg));
}

.arrow path 
{
  stroke-dasharray: 350; /*longeur maximale des paths des arrows*/
  stroke-dashoffset: 350;
  stroke: var(--light-grey);
}
.animated-path path{animation: dash 0.4s ease-in-out forwards;}
.module:has(.small-photo) .animated-path path{animation: dash 0.8s ease-in-out forwards;}

@keyframes dash 
{
  0% {stroke-dashoffset: 350;}
  100% {stroke-dashoffset: 700;}
}

/* Post it~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.post-it 
{
    background-color: var(--post-it-yellow);
    padding: 25px 40px;
    margin: 40px auto;
    clear: left;
    box-shadow: -1px 2px 1px rgba(202, 202, 202);
    font-size: 20px;
    font-weight: 300;
    color: #3a3a3a;
    font-family: 'AppleStorm', sans-serif;
}
.post-it .highlight 
{
    background: linear-gradient(104deg, rgba(156, 196, 60, 0) 0.45%, rgb(232 147 255) 1.2%, rgb(210 130 242 / 60%) 2.9%, rgb(195 75 255 / 30%) 46.5%, rgb(213 128 247 / 70%) 48%, rgba(156, 196, 60, 0) 49%);
    background-size: 200% 100%;
    Background-position: 3px;
}
 .post-it h2
 {
    rotate: 1deg;
    translate: -33px;
    margin: 0;
    line-height: 0;
}
 .post-it h2 span{
    background-color: var(--post-it-purple);
    width: fit-content;
    padding: 10px 15px;
    color: var(--black);
    line-height: 36px;
    font-size: 22px;
    -webkit-box-decoration-break: clone;
    font-weight: normal;
    mask: conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg) left / 51% 10% repeat-y, conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg) right / 51% 10% repeat-y;
}
.post-it h2 span img{
    height: 22px;
    Vertical-align: middle;
    padding-right: 10px;
}
.post-it p {margin: 10px 0;}

/* Media~Sizes~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media (max-width: 800px) 
{
    .module {
        flex-direction: column;
        gap: 0px;
    }
    .text {width: 100% !important;}
    .photo {margin: 30px auto 0;}
    .img-left .arrow{
        top: initial;
        right: calc(50% + var(--photoWidth)/2);
        bottom: calc(var(--photoHeight) - 60px);
        left: initial;
        transform: rotate(-120deg);
    }
    .img-right .arrow{
        top: initial;
        right: initial;
        bottom: calc(var(--photoHeight) - 60px);
        left: calc(50% + var(--photoWidth)/2);
        transform: rotate(120deg);
    }
    .img-left:has(.small-photo) .arrow{
        top: initial;
        right: calc(50% + var(--photoWidth)/2 + 10px);
        bottom: calc(var(--photoHeight) - 30px);
        left: initial;
        transform: rotate(-120deg);
    }
    .img-right:has(.small-photo) .arrow{
        top: initial;
        right: initial;
        bottom: calc(var(--photoHeight) - 30px);
        left: calc(50% + var(--photoWidth)/2 + 10px);
        transform: rotate(120deg);
    }
}

@media(max-width:700px)
{
    .img-right .arrow{display: none;}
    .img-left .arrow{display: none;}
    .img-left:has(.small-photo) .arrow{display: block;}
    .img-right:has(.small-photo) .arrow{display: block;}
}

@media (max-width: 500px) 
{
    .big_title
    {
        margin-block-start: 0.67em;
        line-height: 65px;
        font-size: 62px;
    }
    .big_title::before
    {
        left: calc(100% - 10px);
        bottom: calc(100% - 30px);
        height: 60px;
    }
    .sub_title {margin: 0 auto;}
    .module 
    {
        flex-direction: column;
        gap: 0px;
    }
    .date, .author {font-size: 13px;}
    .post-it {padding: 10px 20px;}
    .post-it h2 {translate: -15px;}
    .post-it h2 span
    {
        padding: 5px 10px;
        font-size: 16px;
    }
    .post-it h2 span img{height: 16px;}
    .post-it .manualscript {font-size: 16px}
    .manualscript {font-size: 18px;}
    .note {font-size: 15px ;}
    .iPad-Screen{border-width: 8px;}
    .img-left:has(.small-photo) .arrow{display: none;}
    .img-right:has(.small-photo) .arrow{display: none;}
}
@media (max-width:400px)
{
    .manualscript {font-size: 16px;}
    .big_title
    {
        margin-block-start: 0.67em;
        line-height: 65px;
        font-size: 62px;
    }
    .big_title::before {display: none;}
}



@media (prefers-reduced-motion: reduce) {
    .arrow path 
    {
        stroke-dasharray: 0;
        opacity: 0;
    }

    .animated-path path{animation: dash 0.8s linear forwards;}
    .module:has(.small-photo) .animated-path path{animation: dash 0.8s linear forwards;}

    @keyframes dash 
    {
    0% {opacity: 0;}
    100% {opacity: 1;}
    }
}