/* Responsive */
@media (min-width:859px) {
    .features{grid-template-columns:repeat(3,1fr)}
    .navbar{display:flex;
        flex-direction:row;
        align-items:center;
        background:transparent;
        position:static;
        padding:0;
        border-bottom:none;
        gap: 5px;

    }
    .burger{
        display:none;
    }   

    
}

@media (max-width: 860px){
    .logo {
        width: 30%;
        height: auto;
        padding-left: 40px;
    }

    .features{grid-template-columns:1fr}
    .navbar{display:none;
        flex-direction:column;
        align-items:flex-start;
        background:#fff;
        position:absolute;
        top:60px;
        left:0;
        right:0;
        padding:1rem;
        border-bottom:1px solid #eee;
        gap:5px;
    }
    .action-text{
        font-size: 1rem;
        width: 100px;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
        width: 100vw;
        height: auto;
    }
    .actions-unique .action-montage{
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: auto;
    }   
    .action-content {
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
        width: auto;
        height: auto;

    }


    .action-desc{
           font-size: 1rem;
        width: 100px;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: flex-start;
        align-items: flex-start;
        width: 90%;
        min-height: 60%;
        margin: 20px;
    }
    .actions-unique img {
        width: 95%;
    }


    .card-action {
    .description{
        font-size:1rem;
    }

    .burger{
            display:block;
        
            width: 40px;
            background-color:transparent;
            border-radius: 10px;
    }


    .presentation {
    flex-direction: column;  
    }
        .octobrerose img {
        width: 50px;
        height: auto;
    }  
        .action-content {
    flex-direction: column;
    }

}

@media (max-width: 600px) {
       
    .card-card{
        height: 250px;
    }
    .octobrerose{
        width:20%;
    }
    .octobrerose img {
    width: 50px;
    height: auto;
}   
    .page h1 {
        font-size: 1.5rem;
    }
   .presentation .page {
        max-width: 100%;
        padding: 20px;
        margin: 10px;
    }
     .qui-sommes-nous .montage .qui-photo img , .actions .montage .qui-photo img ,.grid .qui-photo img {
        max-width: 90%;
    }   
    .qui-sommes-nous .montage .qui-photo, .actions .montage .qui-photo {

        flex-direction: column;
    }  
    .qui-sommes-nous,.presentation, .dons{
        display: flex
;
    flex-direction: column;
    width: 100%;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;

    }  
    .dons .page .presentation, .actions{
    width: 100%;
    padding: 8px;
    margin: 10px;
    }

   
  .article-image img { float: none; display: block; margin: 15px auto; max-width: 90%; }
  .site-footer .grid{
    grid-template-columns: 1fr;
  } 
  .grid-action{
        display: flex;
        max-width: 100vw;
        margin: 20px;
        gap: 14px;
        align-items: flex-start;
        grid-template-columns: 1fr;
        align-content: flex-start;
        flex-direction: column;
        justify-content: space-around;
    }
    .action-desc-card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        margin: 20px;
        width: 100vw;
        height: auto;
    }
    .card-action {
        position: relative;
        aspect-ratio: 2 / 3;
        overflow: hidden;
        /* border-radius: 10px; */
        background: #1a1a20;
        box-shadow: 0 17px 22px rgba(0, 0, 0, 0.25);
        transition: transform .25s 
    ease, box-shadow .25s 
    ease;
        outline: 1px solid rgba(255, 255, 255, 0.06);
        width: 50%;
        height: 50%;
    }
    
}
}