:root { --max: 1100px; 
  --Noir:black;
  --Blanc:white;
  --BleuClair: #b1dee5;
  --BleuFonce:#62abeb;
  --BleuInfo: #82bce6;

  --VertClair:  #0ce217;   ;
  --VertFonce: #054808;  
      
    --bar-width: 50px;
    --bar-height: 10px;
    --hamburger-gap: 4px;
    --foreground: white;
    --background: white;

    --animation-timing: 200ms ease-in-out;

    --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
    --bar-width:45px;
    --bar-height:8px;
    --hamburger-gap:6px;


    --bar-color:#fff;

    --hamburger-color:#0f13e9;
    --hamburger-background:transparent;

    --hamburger-margin:15px;
    --animation-timing: 200ms ease-in-out;
    
    --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) *2);

  .VertClair{color: var(--VertClair);}
  .VertFonce{color: var(--VertFonce);}
  


  .BeuClair{color: var(--BleuClair);}
  .BleuFonce{color: var(--BleuFonce);}
    .BleuInfo{color:var(--BleuInfo);}
  .Noir{color: var(--Noir);}
  .Blanc{color: var(--Blanc);}

}
*{box-sizing:border-box}

body{
    margin:0;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
    line-height:1.6;
    color:#222;
    background-color:   var(--BleuClair);
}

.site-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;z-index:10}
.brand a{text-decoration:none;font-weight:700;font-size:1.2rem}
.site-nav{display:flex;gap:.8rem;align-items:center}
.site-nav a{padding:.4rem .6rem;text-decoration:none;color:#222;border-radius:.4rem}
.site-nav a:hover{background:#f3f3f3}
.site-nav .cta{background:#111;color:#fff}
.burger{display:none;border:0;background:transparent;font-size:1.5rem}
.container{max-width:var(--max);margin:0 auto;padding:1.2rem}
.hero{padding:3rem 1rem;background:linear-gradient(180deg,#f5f7ff,#fff);border:1px solid #eef;border-radius:12px}
.hero h1{margin-top:0;font-size:clamp(1.6rem,3vw,2.2rem)}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.5rem}
.card{border:1px solid #eee;padding:1rem;border-radius:10px;background:#fff}
.btn{display:inline-block;padding:.6rem .9rem;border-radius:.5rem;background:#0b57d0;color:#fff;text-decoration:none;border:0;cursor:pointer}
.btn.small{padding:.35rem .6rem;font-size:.85rem}
.btn.danger{background:#b00020}
.page h1{margin-top:0}
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.post-card{border:1px solid #eee;border-radius:10px;padding:1rem}
.site-footer .grid{
    display: grid
;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    max-width: var(--max);
    margin: 0 auto;
    justify-items: stretch;
    align-items: center;
    justify-content: space-between;
}
.copyright{text-align:center;margin:0.5rem 0 0}
.form input,.form textarea,.form select{width:100%;padding:.6rem;border:1px solid #ddd;border-radius:.4rem}
.form label{display:block;margin:.6rem 0}
.flash{padding:.6rem .8rem;border-radius:.4rem;margin:.8rem 0}
.flash.success{background:#e8f5e9}
.flash.error{background:#ffebee}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #eee;padding:.5rem}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.6rem}
.gallery-grid .ph{aspect-ratio:1/1;background:#eee;border-radius:8px}

figure{margin:0}
figure + figure{margin-top:.6rem}

.octobrerose {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 0px;
}   
.octobrerose {
    width: 5%;
    height: auto;
}   
.octobrerose img {
    width: 50px;
    height: auto;
}   


.entete {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    background-color: var(--BleuFonce);
    gap: 30px;
}   
.logo {
    width: 200px;
}

.navbar {
    display: flex
;
    width: 100%;
    gap: 40px;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: flex-start;

}  
.navbar a {
    text-decoration: none;
    color: var(--VertClair);
    font-weight: 500;
    padding: 8px 12px;
    background-color: var(--Blanc)  ;
    border-radius: 10px;
    border-bottom: var(--Blanc) solid 2px  ;

    }

.navbar a:hover {
    text-decoration: none;
    color:var(--Blanc);
    font-weight: 500;
    padding: 8px 12px;
    background-color:  var(--VertFonce);  
    border-radius: 10px;
    border-bottom:  var(--VertFonce) solid 2px  ;

    }
.presentation {
   display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    text-align: center;
    gap: 16px;
    margin: 0px;
    background-color: var(--BleuClair);

}
.presentation img {
    max-width: 40%;
    height: auto;
    margin: 10px;
    border-radius: 10px;
}
.presentation .page {
    /* max-width: 30%; */
    text-align: justify;
    font-size: 0.8rem;
    color: #200d8c;
    line-height: 1.6;
    margin: 25px;
    padding: 30px;
    background-color: var(--Blanc);
  

}

    
.presentation .page h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}   
.presentation .page p {
    margin-bottom: 10px;
}  

.montage {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    text-align: center;
    gap: 16px;
    margin: 5px;
    background-color: var(--BleuClair);
    position: relative;



}
.montage img {
    max-width: 80%;
    height: auto;
    margin: 10px;
    border-radius: 10px;
}

.montage .fusion {
    position: absolute;
    top: 20%;
    left: 55%;
    transform: translate(-50%, -50%);
    /* background-color: rgba(255, 255, 255, 0.8); */
    /* padding: 15px; */
    border-radius: 10px;
    max-width: 50%;
    text-align: justify;
    /* font-size: 0.7rem;
    color: #200d8c;
    line-height: 1.6; */
}   

.site-footer {
   
    padding: 10px;
    text-align: center;
     background-color:var(--BleuFonce);
   
    gap: 10px;
    color:var(--Blanc);
    font-size: 0.8 rem;

}   
.site-footer p {
    margin: 2px 0;
}
.site-footer a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}   
.site-footer a:hover {
    text-decoration: underline;
}   
.qui-sommes-nous .montage {
display: flex
;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    text-align: center;
    gap: 16px;
    margin: 10px;
    background-color: var(--BleuClair);
    flex-direction: column;

}   

.qui-sommes-nous .photo {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    margin: 10px;
    border-radius: 10px;
}  
.qui-sommes-nous .montage .qui-photo ,.grid .qui-photo{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;

    max-width: 80%;
    text-align: center;    
    
}
.qui-sommes-nous .montage .qui-photo img ,.grid .qui-photo img {
    max-width: 50%;
    height: auto;
    margin: 10px;
    border-radius: 10px;
}


.qui-sommes-nous .page {
    max-width: 60%;
    text-align: justify;
    font-size: 0.8rem;
    color: #200d8c;
    line-height: 1.6;
    margin: 25px;
    padding: 12px;
    background-color:var(--Blanc);
}

.actions {
    display: flex;
     justify-content: center;
     align-items: center;
     margin-top: 20px;
     text-align: center;
     gap: 16px;
     margin: 0px;
     background-color:var(--BleuClair);
}

.actions .montage {
display: flex
;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    text-align: center;
    gap: 16px;
    margin: 10px;
    background-color:var(--BleuClair);
    flex-direction: column;
    width: 60%;

}   

.actions .photo {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    margin: 10px;
    border-radius: 10px;
}  
.actions .montage .qui-photo {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;

    max-width: 80%;
    text-align: center;    
    
}
.actions .montage .qui-photo img {
    max-width: 50%;
    height: auto;
    margin: 10px;
    border-radius: 10px;
}


.action .page {
    max-width: 60%;
    text-align: justify;
    font-size: 0.8rem;
    color: #200d8c;
    line-height: 1.6;
    margin: 25px;
    padding: 12px;
    background-color: var(--Blanc);
}
.actions-unique {
    display: flex;
     justify-content: center;
     align-items: center;
     margin-top: 20px;
     text-align: center;
     gap: 16px;
     margin: 0px;
     background-color:var(--BleuClair);

}
.actions-unique .page {
    max-width: 60%;
    text-align: justify;
    font-size: 0.8rem;
    color: #200d8c;
    line-height: 1.6;
    margin: 25px;
    padding: 12px;
    background-color: var(--Blanc);
}

.actions-unique .page h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}
.actions-unique .page p {
    margin-bottom: 10px;
}

/* .actions-unique img {
    max-width: 40%;
    height: auto;
    margin: 10px;
    border-radius: 10px;
} */
.actions-unique .montage {
    display: flex;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    text-align: center;
    gap: 16px;
    margin: 10px;
    background-color: var(--BleuClair);
    flex-direction: column;

}   
.actions-unique .montage .action{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;

    max-width: 80%;
    text-align: center;
}
.actions-unique .action-montage {
    display: flex ;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;

    max-width: 50%;
    height: auto;
    margin: 10px;
    border-radius: 10px;

}
.actions-unique img {
    height: auto;
    margin: 10px;
    border-radius: 10px;
    width: 50%;

}           

.action-content .page {
    max-width: 40%;
    text-align: justify;
    font-size: 0.8rem;
    color: #200d8c;
    line-height: 1.6;
    margin: 25px;
    padding: 12px;
    background-color: var(--Blanc);
}   

.dons .page {
    max-width: 60%;
    text-align: justify;
    font-size: 0.8rem;
    color: #200d8c;
    line-height: 1.6;
    margin: 25px;
    padding: 12px;
    background-color:var(--Blanc);
}

.contact {
    display: flex;
    flex-direction: row;

     justify-content: center;
     align-items: center;
     margin-top: 20px;
     text-align: center;
     gap: 16px;
     margin: 20px;
     background-color:var(--BleuClair);

}
.contact-form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.8m;
    color: var(--BleuFonce);
    flex-wrap: wrap;


}
.contact-form button{
    margin: 20px;
    width: 100px;
    height: 60px;
    font-weight: bold;
    background-color: white;
    color: var(--VertClair);
    border-radius: 15%;
}
.contact-form button:hover{
    background-color: var(--VertClair);
    color: white;
}
.contact-form input,.contact-form label,.contact-form textarea{
    font-size: 1.2em;
    width: 390px;
}
.contact_form h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}
.contact .contact_formulaire {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 30px;
    }
.contact .contact_formulaire .form_saisie {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.contact .contact_formulaire .adresse {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.contact .contact_formulaire .contact_presentation_bouton {
    padding: 10px 15px;
    background-color:var(--BleuFonce);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
.contact .contact_formulaire .contact_presentation_bouton:hover {
    background-color: #0817de;
}
.contact .confirmation-message {
    display: none;
    margin-top: 15px;
    padding: 10px;
    border-radius: 8px;
    background-color: var(--VertClair);

    color: #006400;
    font-weight: bold;
}   
.contact .confirmation-message.show {
    display: block;
}

.grid {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    max-width: auto;
    margin: 20px;

  }

.grid-action {
       display: flex;
    max-width: 100vw;
    margin: 20px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    align-items: center;
    }
.defile {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin: 20px;
}   
.action-content {
    display: flex;
    flex-direction: row;
    /* justify-content: center; */
    align-items: center;
    gap: 20px;
    margin: 20px;
    width: 100vw;
    height: auto;
}   
.action-desc {
    max-width:500px;
    height: 400px;
    text-align: justify;
    font-size: 1.3rem;
    color:var(--Blanc);
    line-height: 1.6;
    padding: 20px;
    background-color: var(--BleuFonce);
    border-radius: 20px;
     box-shadow: 0 17px 22px rgba(0, 0, 0, 0.25);
     max-height: 400px;   /* hauteur maximale */
    overflow-y: auto;    /* ajoute un ascenseur vertical automatiquement */
    overflow-x: hidden; 
  
}    
.action-desc .desctiption{
    margin: 10px;    
        color:var(--Blanc);

}   

.action-desc-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 20px;
    /* width: 100vw; */
    height: auto;
}
.date-action, .page {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--BleuFonce);
    text-align: center;

}   

.card-action {
  position: relative;
    aspect-ratio: 1.5 / 2;
    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: 18vw;
    height: 30vh;
}
.precedent, .suivant,.tous {
    color: var(--Blanc);
    text-align: center;
    width: 40px;
    font-size: 2rem;
    text-decoration: none;
   
  
}
.fa-solid{
    background-color: var(--BleuClair);
    color: var(--BleuFonce);
    
}   


.precedent:hover, .suivant:hover,.tous:hover {
    background-color: var(--BleuFonce);
    color: var(--Blanc);
    text-decoration: none;
}


  .card {
    position: relative;
    aspect-ratio: 1 / 1;            /* vignettes carrées */
    overflow: hidden;
    border-radius: var(--radius);
    background: #1a1a20;
    box-shadow: 0 2px 14px rgba(0,0,0,0.25);
    transition: transform .25s ease, box-shadow .25s ease;
    outline: 1px solid rgba(255,255,255,0.06);
  }
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.35);
  }


  /* Carte image */
  .card {
    position: relative;
    aspect-ratio: 1 / 1;            /* vignettes carrées */
    overflow: hidden;
    border-radius: var(--radius);
    background: #1a1a20;
    box-shadow: 0 2px 14px rgba(0,0,0,0.25);
    transition: transform .25s ease, box-shadow .25s ease;
    outline: 1px solid rgba(255,255,255,0.06);
  }
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.35);
  }

  /* Image de fond */
  .thumb {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform .45s ease;
    will-change: transform;
  }
  .card:hover .thumb { transform: scale(1.06); }

  /* Voile + légende */
  .overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
    opacity: 0;
    transition: opacity .35s ease;
  }
  .card:hover .overlay { opacity: 1; }

  .caption {
    position: absolute; left: 12px; right: 12px; bottom: 12px;
    font-size: .95rem; font-weight: 600;
    text-shadow: 0 2px 6px rgba(0,0,0,.6);
  }

  /* Lien cliquable qui mène au lightbox via :target */
  .card a {
    position: absolute; inset: 0;
    display: block;
    text-decoration: none; color: inherit;
  }

  /* Lightbox CSS-only avec :target */
  .lightbox {
    position: fixed; inset: 0; z-index: 999;
    display: none;
    place-items: center;
    background: rgba(0,0,0,.75);
    padding: 24px;
    backdrop-filter: blur(2px);
  }
  .lightbox:target { display: grid; }

  .lightbox-content {
    position: relative;
    max-width: min(92vw, 1200px);
    max-height: 86vh;
    border-radius: var(--radius);
    overflow: hidden;
    background: #101014;
    outline: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 12px 40px rgba(0,0,0,.5);
  }
  .lightbox-img {
    display: block;
    width: 100%; height: auto; max-height: 86vh;
    object-fit: contain;
    background: #000;
  }
  .lightbox-caption {
    padding: 10px 14px;
    font-size: .95rem;
    color: #eaeaea;
    background: #121219;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .close {
    position: fixed; top: 14px; right: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    color: #fff; text-decoration: none; font-size: 22px; line-height: 1;
    backdrop-filter: blur(2px);
    transition: background .2s ease;
  }
  .close:hover { background: rgba(255,255,255,.2); }

  /* Accessibilité : focus visible */
  a:focus-visible, .close:focus-visible {
    outline: 2px solid #8ab4ff; outline-offset: 2px;
  }

/*Burger*/
::after, ::before {
    box-sizing:border-box;

}
.hamburger-menu {
    --x-width: calc( var(--hamburger-height) *sqrt(2) );
    display:flex;
    flex-direction:column;
    position:fixed;

    top: var(--hamburger-margin);
    left: var(--hamburger-margin);
     z-index: 2;
    cursor: pointer;

    width:var(--bar-width);



    height:var(--hamburger-height);


   
    gap: var(--hamburger-gap );
    background-color: var(--vertonce);
    

   
    
}
.hamburger-menu input {
    appearance: none;
    margin: 0;
    padding: 0;
    outline: none;
    pointer-events: none ;
   
}


.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-menu input {

    content:"";
    display:block;
    width:var(--bar-width);
    height:var(--bar-height);   
    background-color:var(--hamburger-color);
    background-color: white;

    box-shadow: 0 10px 20px rgba(2, 2, 2, 0.4);
    border-radius:9999px;
    transform-origin: left center;

    transition:opacity var(--animation-timing),width var(--animation-timing), rotate var(--animation-timing), translate var(--animation-timing)   ;


}

.hamburger-menu:has(input:checked)::before {
    rotate: 45deg;
     width:var(--bar-width);
    /* background-color:var(--hamburger-color); */
    translate: 0 calc(var(--bar-height) /-2);
  
   
}
.hamburger-menu input:checked {
  opacity: 0;
  width: 0;

}
.hamburger-menu:has(input:checked)::after {

    rotate: -45deg;
    width:var(--bar-width);
    translate: 0 calc (var(--bar-height) /2);
 
}


.sidebar{
    position: fixed;
    z-index: 10;
    top: 5px;
    width: 350px;
    height:90vh;

    background-color: var(--BleuFonce);
   

    padding: 55px 8px 0;
    z-index: 1;
    transition: translate var(--animation-timing);
    translate: -100%;
    left: -350px;;
    /* border: 1px solid var(--cdiRouge); */
    border-radius: 1px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    color: var(--Blanc);
    gap: 5px;
    font-size: 1.3em;
    border: 1px solid red;
    box-shadow: 0 10px 30px rgba(135, 36, 36, 0.9);

}
.flexCol{
    display: flex
    ;
        flex-direction: column;
        flex-wrap: wrap;
        gap: 15px;

}
.sidebar a{
    color: var(--Blanc);
    padding-left: 4px;
    text-decoration: none; /* <-- ajoute cette ligne */
  color: inherit;
}
.hamburger-menu:has(input:checked) + .sidebar{
    translate: 100%;

}

.sidebar a:hover{
    background-color: var(--BleuFonce);
    color: white;
}

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





@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.defile {
  display: flex;
  flex-direction: wrap;
   ;

  justify-content: space-between;
  margin: 20px auto;
  max-width: 900px;
  padding: 10px;
}
  .card-actualite {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-decoration: none;
   font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 1.2em;
    width: 95%;
    height: auto;
    background-color: #e6f0fa;
    margin: 18px;
    vertical-align: top;
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    padding: 2px;
    gap: 10px;
    
  }
/* --- Marquee (conteneur) --- */
.sa-marquee { position: relative; padding: .25rem 0 0; }
.sa-marquee__title { margin: 0 0 .5rem; font-size: 1.1rem; font-weight: 700; }

/* Zone visible + masques dégradés aux bords */
.sa-marquee__viewport{
  position: relative; overflow: hidden; border-radius: .75rem;
}
.sa-marquee__viewport::before,
.sa-marquee__viewport::after{
  content:""; position:absolute; top:0; bottom:0; width:40px; z-index:2; pointer-events:none;
}
.sa-marquee__viewport::before{
  left:0; background:linear-gradient(to right, var(--sa-bg, #fff) 0%, transparent 100%);
}
.sa-marquee__viewport::after{
  right:0; background:linear-gradient(to left, var(--sa-bg, #fff) 0%, transparent 100%);
}

/* Bande défilante : on met deux fois la liste d’articles dans .sa-marquee__inner */
.sa-marquee__inner{
  display: flex; gap: .75rem; padding: .5rem .5rem; width: max-content;
  animation: sa-marquee 40s linear infinite;
}

/* Pause au survol ou si un élément a le focus (accessibilité clavier) */
.sa-marquee__viewport:hover .sa-marquee__inner,
.sa-marquee__viewport:focus-within .sa-marquee__inner{ animation-play-state: paused; }

/* Vitesse adaptative : tu peux ajuster la durée (40s) selon la longueur réelle */
@keyframes sa-marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* -50% car contenu dupliqué */
}

/* --- Cartes --- */
.sa-card{
    display: flex
;
    flex-direction: column;
    min-width: clamp(220px, 45vw, 360px);
    max-width: 250px;
    padding: .85rem .9rem;
    border-radius: .75rem;
    text-decoration: none;
    color: inherit;
    background: var(--BleuFonce);
    color: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
    transition: transform .2s ease, box-shadow .2s ease;
    justify-content: space-around;
    align-content: center;
    align-items: center;
  img{
    width:100%;
  }
}
.sa-card:focus{ outline: 3px solid #7cb8ff; outline-offset: 2px; }
.sa-card:hover{ transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.22); }

/* .sa-card__img{ width:100px; opacity:.8; margin-bottom:.25rem; } */
.sa-card__date{ font-size:.85rem; opacity:.8; margin-bottom:.25rem; }
.sa-card__title{ font-weight:800; line-height:1.2; margin-bottom:.25rem; font-size:1rem; }
.sa-card__desc{
  font-size:.92rem; line-height:1.35; opacity:.95;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Lien “Tous les articles” */
.sa-marquee__more{ display:inline-block; margin-top:.5rem; font-weight:600; }

/* Thème clair/sombre : adapte le fond de page si besoin via --sa-bg */


/* Animation de fondu */
/*article_form*/
.section_action{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 95%;
    padding: 0rem;
    animation: fadeIn 0.6s ease-in;
    position: relative;
    margin-top: 10px;
}

  .action_form{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        max-width: aupx;
        /* max-height: 90vh; */
        margin: 13px auto;
        padding: 30px;
        border: 1px solid #ccc;
        border-radius: 8px;
        background-color: var(--BleuInfo);
        width: 90%; 
    }
    .action_form form {
      display: flex ;
        flex-direction: column;
        flex-wrap: wrap;

        width: 100%;
        justify-content: center;
        align-items: center;

    }
    

    .action_form h1 {
        text-align: center;
        margin-bottom: 20px;
    }
    .action_form label {
        display: block;
        margin-bottom: 8px;
        font-weight: bold;
    }
    .action_form input[type="text"], .action_form textarea {
        width: 100%;
        padding: 10px;
        margin-bottom: 20px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }
    .validation{
      margin-bottom: 20px;
    }
    .role{
          width: 50%;
      font-size: 30px;
      color: rgb(8, 8, 99);
      height: 60px;
    }

    .action_form .role select{
        width: 100%;
      /* height: 54px; */
      /* padding: 20px; */
      margin: 20px;
      font-size: 26px;
      color: rgb(15, 15, 181);
    }
    
    .action_form button {
        background-color: #4CAF50;
        color: white;
        padding: 10px 15px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    .action_form button:hover {
        background-color: #45a049;
    }