:root {
    /* --greenPrencipal */
    --green: #01a08c;
    --gryeF: #38598b;
    --greenO : #155263;
    --sousText : #4a4a48;
    --footerColor : #474747;
}

/* pour image transform: translateY */
.owd-fade-in {
    animation: owd-fade-in linear forwards;
    animation-timeline: view();
    animation-range: entry;
}

/* pour image transform: translateX */
.owd-fade-inX {
    animation: owd-fade-inX linear forwards;
    animation-timeline: view();
    animation-range: entry;
}

.apropoActus .secondAcuts .borderStyle  {
    position: relative;
    padding: 5px;
}

.apropoActus .secondAcuts .borderStyle .box::before {
    content: '';
    position: absolute;
    width: 0%;
    height: 0%;
    top: 0;
    left: 0;
    border-top: 5px solid var(--green);
    border-left: 5px solid var(--green);
    opacity: 0;
    transition: .4s;
    box-sizing: border-box;
} 

.apropoActus .secondAcuts .borderStyle .box:hover::before {
    width: 98%;
    height: 99%;
    opacity: 1;
}

.secondAcuts .borderStyle .box:hover .image img{
    transform: scale(1.1);
}

.apropoActus .secondAcuts .borderStyle .box:hover .content h3 {
   background-color: #474747;
   transition: .6s;
   color: white;
}

.apropoActus .secondAcuts .borderStyle .box:hover .content a {
    font-size: 1.7rem;
    color: red;
    transition: .7s;
    font-weight: 700;
    letter-spacing: .1rem;
    cursor: pointer;
} 

/* pour le modal politique */
.strategies .open-image {
    font-size: 1.5rem;
    text-align: justify;
    text-transform: uppercase;
    font-weight: 700;
    opacity: 1;
    color: var(--green);
    animation: politique 1s infinite;
}

@keyframes owd-fade-in {
    0% {
        opacity: 0;
        transform: translateY(300px);
    }

    80% {
        opacity: 0.7;
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: translate(0);
    }
}

@keyframes owd-fade-inX {
    0% {
        opacity: 0;
        transform: translateX(150px);
    }

    80% {
        opacity: 0.7;
        transform: translateX(-5px);
    }

    100% {
        opacity: 1;
        transform: translate(0);
    }
}

/* Animation pour le clignotement */
@keyframes politique {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }