/* ==========================================================
   SLA QU'ES AQUÒ
   Thème graphique - Version 1.0
   ========================================================== */

/* ==========================================================
   1. Variables
   ========================================================== */
:root {
    /* Couleurs */
    --sla-primary: #0070BB;
    --sla-primary-dark: #00558A;
    --sla-secondary: #D6ECFA;
}

/* ==========================================================
   2. Footer (ou section spécifique)
   ========================================================== */
.line-footer p, 
.line-footer a {
    color: var(--sla-primary);
}

    /* Coins */

    --sla-radius:10px;


    /* Ombres */

    --sla-shadow:0 6px 18px rgba(0,0,0,.08);


    /* Espacements */

    --sla-space-xs:10px;
    --sla-space-sm:20px;
    --sla-space-md:40px;
    --sla-space-lg:70px;

}
  /* Coins */



    --sla-radius:10px;





    /* Ombres */



    --sla-shadow:0 6px 18px rgba(0,0,0,.08);





    /* Espacements */



    --sla-space-xs:10px;

    --sla-space-sm:20px;

    --sla-space-md:40px;

    --sla-space-lg:70px;



}/* ==========================================================

   Conteneur principal

   ========================================================== */



.sla-container{



    max-width:1200px;



    margin:auto;



    padding:0 20px;



}

.sla-container{

    max-width: 1280px;

    margin: auto;

    padding: 0 20px;

}



/* option centrage seulement si besoin */

.sla-center{

    text-align: center;

}/* ==========================================================

   TITRES

   ========================================================== */



h1, h2, h3, h4{



    font-family: Arial, sans-serif; /* on affinera plus tard avec Google Fonts */

    color: var(--sla-text);

    margin-top: 0;

    font-weight: 700;

    line-height: 1.2;



}



/* H1 = titre principal des pages */

h1{

    font-size: 40px;

    color: var(--sla-primary);

    margin-bottom: 20px;

}* H2 = sections importantes */

h2{

    font-size: 30px;

    margin-bottom: 15px;

}



/* H3 = sous-sections */

h3{

    font-size: 22px;

    margin-bottom: 10px;

}



/* Petit ajustement mobile */

@media (max-width: 768px){

    h1{ font-size: 30px; }

    h2{ font-size: 24px; }

    h3{ font-size: 20px; }

}
/* ==========================================================
   SYSTÈME DE BOUTONS UNIFIÉ (CORRIGÉ)
   ========================================================== */

.sla-btn {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.25s ease;
    cursor: pointer;
    font-family: Arial, sans-serif;
    /* AJOUTS ESSENTIELS POUR L'ALIGNEMENT */
    border: 2px solid transparent; /* Évite le décalage avec le bouton outline */
    box-sizing: border-box;        /* Garantit que la bordure ne grossit pas le bouton */
    text-align: center;
    vertical-align: middle;
}

/* bouton principal (don / action forte) */
.sla-btn-primary {
    background: #F28C28;
    color: #FFFFFF;
}

.sla-btn-primary:hover {
    background: #D9740F;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(242, 140, 40, 0.2); /* Optionnel : un léger effet d'ombre */
}

/* bouton secondaire (action importante) */
.sla-btn-secondary {
    background: #0070BB;
    color: #FFFFFF;
}

.sla-btn-secondary:hover {
    background: #00467A;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 112, 187, 0.2);
}

/* bouton contour (action neutre) */
.sla-btn-outline {
    background: transparent;
    border-color: #0070BB; /* Utilise la bordure transparente de la classe parente */
    color: #0070BB;
}

.sla-btn-outline:hover {
    background: #0070BB;
    color: #FFFFFF;
    transform: translateY(-2px); /* Ajouté pour harmoniser avec les autres boutons */
}
/* ==========================================================
   CARTES
   ========================================================== */

.sla-card{
    background: var(--sla-white);
    border: 1px solid var(--sla-border);
    border-radius: var(--sla-radius);
    padding: 25px;
    box-shadow: var(--sla-shadow);
    transition: all 0.25s ease;
}

/* effet au survol */
.sla-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,.12);
}

/* titre dans les cartes */
.sla-card h3{
    margin-top: 0;
    color: var(--sla-primary);
}

/* texte dans les cartes */
.sla-card p{
    color: var(--sla-text);
    line-height: 1.5;
}
/* ==========================================================
   GRILLES
   ========================================================== */

/* ==========================================================
   SYSTEME DE GRILLES UNIFIÉ
   ========================================================== */

/* Sécurité : Si .sla-grid-X est utilisé, on force le mode grid même si .sla-grid est oublié */
.sla-grid,
[class*="sla-grid-"] {
    display: grid;
    gap: 25px;
}

/* Définition des colonnes sur grand écran */
.sla-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sla-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sla-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Responsive Tablette (max-width: 900px) */
@media (max-width: 900px) {
    .sla-grid-3,
    .sla-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Responsive Mobile (max-width: 600px) */
@media (max-width: 600px) {
    .sla-grid-2,
    .sla-grid-3,
    .sla-grid-4 {
        grid-template-columns: 1fr;
    }
} 

/* ==========================================================
   STRUCTURE DE L'ENTÊTE (HEADER)
   ========================================================== */

.entete-sla {
    background: #FFFFFF;
    width: 100%;
}

/* Ligne principale */
.entete-principale {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
}

/* Marque & Logo */
.marque-sla {
    display: flex;
    flex-direction: column;
    gap: 5px;
} 

.logo-sla {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
    line-height: normal !important;
    font-size: initial !important;
}

.logo-sla img {
    display: block !important;
    height: 135px !important;
    width: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Bloc Actions (Boutons de l'en-tête) */
.actions-entete {
    display: flex;
    flex-direction: column; 
    gap: 8px;
    align-items: flex-end;
}

/* RACCORDEMENT AU SYSTÈME UNIFIÉ :
   On garde vos anciennes classes pour ne pas casser le HTML existant,
   mais on leur applique les variables et styles du système de boutons.
*/
.btn-don, .btn-adherents {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-family: Arial, sans-serif;
    transition: all 0.25s ease;
    text-align: center;
    border: 2px solid transparent;
}

.btn-don {
    background: #0070BB; /* Note : Précédemment #F28C28 sur le bouton principal, ajustez si besoin */
    color: #FFFFFF;
}
.btn-don:hover {
    background: #00467A;
    transform: translateY(-1px);
}

.btn-adherents {
    background: transparent;
    border-color: #0070BB;
    color: #0070BB;
}
.btn-adherents:hover {
    background: #0070BB;
    color: #FFFFFF;
    transform: translateY(-1px);
}

/* ==========================================================
   NAVIGATION
   ========================================================== */

.navigation-sla {
    border-top: 2px solid #0070BB;
}

.liste-navigation {
    display: flex;
    gap: 20px;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    flex-wrap: wrap; /* Évite que le menu déborde à l'écran si bcp de liens */
}

.element-navigation a {
    text-decoration: none;
    color: #4D4D4D;
    font-weight: 500;
    transition: color 0.2s ease;
}

.element-navigation a:hover {
    color: #0070BB;
}

/* RESPONSIVE DE L'ENTÊTE */
@media (max-width: 768px) {
    .entete-principale {
        flex-direction: column; /* On empile Logo et Boutons sur tablette/mobile */
        gap: 15px;
        text-align: center;
    }
    .actions-entete {
        align-items: center; /* Centre les boutons sur mobile */
        width: 100%;
    }
    .btn-don, .btn-adherents {
        width: 100%; /* Les boutons prennent toute la largeur sur petit écran pour cliquer facilement */
        max-width: 280px;
    }
    .liste-navigation {
        justify-content: center; /* Centre le menu sur mobile */
    }
}
/* =========================
   HERO SECTION 
   VERSION STABLE
========================= */
/* ==========================================================
   SECTION HERO (Bannière principale)
   ========================================================== */

.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    padding: 80px 10%;
    background-color: #ffffff;
}

/* Partie texte */
.hero-text {
    flex: 1;
}

.hero-text h1
/* =========================
   SECTION CARTES
========================= */


.carte:hover{
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}
@media (max-width: 900px){
    .sla-cartes{
        grid-template-columns: 1fr;
    }
}
.carte h3{
    color: #0070BB;
    margin-bottom: 10px;
}

.carte p{
    color: #4D4D4D;
    font-size: 14px;
    margin-bottom: 20px;
}
.sla-cartes{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    padding: 40px 20px;
}
.carte{
    background: white;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 3px 12px rgba(0,0,0,0.06);
    transition: all 0.25s ease;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.carte h3{
    color: #0070BB;
    margin-bottom: 10px;
}

.carte p{
    color: #4D4D4D;
    font-size: 14px;
    margin-bottom: 15px;
}

.btn-carte{
    display: inline-block;
    padding: 10px 15px;
    background: #0070BB ;
    color: white;
    border-radius: 6px;
    text-decoration: none;
}

/* mobile */
@media (max-width: 768px){

    .sla-cartes{
        flex-direction: column;
        align-items: center;
    }

}

/* mobile */
@media (max-width: 768px){
    .actus-container{
        flex-direction: column;
        align-items: center;
    }
}

/* mobile */
@media (max-width: 768px){
    .missions-container{
        flex-direction: column;
        align-items: center;
    }
}
/* Réduction de l'espace entre les blocs */
/* ==========================================================
   HARMONISATION GLOBALE DES SECTIONS
   ========================================================== */

section{
    margin: 0 !important;
    padding: 40px 20px;
}
.sla-container{
    max-width: 1200px;
    margin: auto;
    padding: 0 20px;
}
.line.site_line__item{
    padding-top:5px !important;
    padding-bottom:5px !important;
}

.hero-sla{
    position: relative;
    display: flex;
    align-items: center;
    min-height: 500px;

    background: linear-gradient(90deg, rgba(0,90,156,0.92) 45%, rgba(0,90,156,0.30) 100%),
    url("https://images.unsplash.com/photo-1520975916090-3105956dac38") center/cover no-repeat;

    color: white;
    padding: 60px 20px;
}

.hero-sla::before{
    content: "";
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: linear-gradient(90deg, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.15) 100%);
    z-index: 1;
}

.hero-contenu{
    max-width: 650px;
    position: relative;
    z-index: 2;
}

.hero-sla h1{
    font-size: 40px;
    line-height: 1.2;
    margin-bottom: 20px;
}

.hero-sla h1 span{
    color: #F28C28;
}

.hero-text{
    font-size: 16px;
    margin-bottom: 20px;
    line-height: 1.6;
    color: rgba(255,255,255,0.92);
}

.hero-tags{
    margin-bottom: 25px;
    opacity: 0.9;
    font-size: 15px;
}

.hero-actions{
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.btn-hero-don{
    background: #F28C28;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
}

.btn-hero-help{
    border: 2px solid white;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
}

.btn-hero-help:hover{
    background: white;
    color: #005A9C;
}
 .sla-engagement{
    background: #f5f8ff;
    padding: 50px 20px;
    text-align: center;
}
.btn-primary {
    background-color: #E07A5F; /* couleur plus “action” */
    color: #fff;
    padding: 12px 25px;
    border-radius: 6px;
    text-decoration: none;
    display: inline-block;
}

.btn-primary:hover {
    background-color: #c9654d;
}

.sla-engagement h2{
    color: #0070BB ;
    margin-bottom: 30px;
}

.engagement-container{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: auto;
}

.engagement-item{
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.06);
    transition: 0.3s ease;
}

.engagement-item:hover{
    transform: translateY(-5px);
}

.engagement-item h3{
    color: #0070BB ;
    margin-bottom: 10px;
}

.engagement-item p{
    color: #4D4D4D;
    font-size: 14px;
    line-height: 1.5;
}
    @media (max-width: 900px){
    .engagement-container{
        grid-template-columns: 1fr;
    }
}

.sla-cta-final{
    background: linear-gradient(135deg, #005A9C, #00467A);
    padding: 60px 20px;
    text-align: center;
    color: white;
}

.cta-container{
    max-width: 900px;
    margin: auto;
}

.sla-cta-final h2{
    font-size: 32px;
    margin-bottom: 15px;
}
.sla-cta-final p{
    font-size: 16px;
    margin-bottom: 30px;
    color: rgba(255,255,255,0.95);
    line-height: 1.6;
}
.cta-container{
    max-width: 900px;
    margin: auto;

    background: rgba(255,255,255,0.08);
    padding: 30px;
    border-radius: 12px;
    backdrop-filter: blur(3px);
}
.cta-buttons{
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* bouton DON */
.cta-don{
    background: #F28C28;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
}

/* bouton aide */
.cta-help{
    background: white;
    color: #0070BB ;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
}

/* bouton contact */
.cta-contact{
    border: 2px solid white;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
}

.cta-contact:hover{
    background: white;
    color: #0070BB ;
}

.sla-footer{
    background:#0070BB;
    color: white;
    padding: 50px 20px 20px;
}

.footer-container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: auto;
}

.footer-col h3{
    margin-bottom: 15px;
    color: #F28C28;
}

.footer-col p,
.footer-col a{
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    display: block;
    margin-bottom: 8px;
}

.footer-col a:hover{
    color: #ffffff;
}
.footer-bottom{
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.25);

    font-size: 14px;
    color: rgba(255,255,255,0.9);
}
@media (max-width: 900px){
    .footer-container{
        grid-template-columns: 1fr;
        text-align: center;
    }
}
.footer-bottom *{
    color: rgba(255,255,255,0.9) !important;
}
.intro{
    font-size: 18px;
    color: #0070BB ;
    text-align: center;
    margin-bottom: 20px;
    font-weight: 500;
}

hr{
    border: none;
    height: 1px;
    background: #DDDDDD;
    margin: 30px 0;
}

/* =========================
   HERO ASSOCIATION
========================= */

.sla-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 60px 30px;
    background: #f7f7f7; /* fond léger, modifiable */
    border-radius: 12px;
}

/* Texte */
.sla-hero-text {
    flex: 1;
}

.sla-hero-text h1 {
    font-size: 42px;
    color: #2c2c2c;
    margin-bottom: 15px;
}

.sla-hero-text p {
    font-size: 18px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Image */
.sla-hero-image {
    flex: 1;
    display: flex;
    justify-content: center;
}

.sla-hero-image img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
}

/* Bouton si besoin */
.sla-hero-text .btn {
    display: inline-block;
    padding: 12px 20px;
    background: #0070BB ;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    transition: 0.3s;
}

.sla-hero-text .btn:hover {
    background: #1f4fb0;
}

/* Responsive mobile */
@media (max-width: 768px) {
    .sla-hero {
        flex-direction: column;
        text-align: center;
    }

    .sla-hero-image {
        order: -1;
    }
}

/* =========================
   BLOC PILIERS
========================= */

.sla-piliers {
    display: flex;
    gap: 25px;
    justify-content: space-between;
    padding: 50px 30px;
    background: #ffffff;
}

.pilier {
    flex: 1;
    background: #f7f7f7;
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    transition: 0.3s;
}

.pilier h3 {
    font-size: 22px;
    margin-bottom: 10px;
    color: #2c2c2c;
}

.pilier p {
    color: #555;
    font-size: 16px;
    line-height: 1.5;
}

.pilier:hover {
    transform: translateY(-5px);
}

/* Mobile */
@media (max-width: 768px) {
    .sla-piliers {
        flex-direction: column;
    }
}

/* =========================
   BLOC REJOIGNEZ-NOUS
========================= */

.sla-rejoindre {
    padding: 60px 30px;
    background: #f7f7f7;
}

.sla-rejoindre-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.sla-rejoindre h2 {
    font-size: 32px;
    color: #2c2c2c;
    margin-bottom: 15px;
}

.sla-rejoindre .intro {
    font-size: 18px;
    color: #444;
    font-weight: 500;
    margin-bottom: 20px;
}

.sla-rejoindre p {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Boutons */
.sla-rejoindre-buttons {
    margin-top: 25px;
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary {
    background: #0070BB ;
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    transition: 0.3s;
}

.btn-primary:hover {
    background: #1f4fb0;
}

.btn-secondary {
    background: #ffffff;
    color: #0070BB ;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    border: 2px solid #0070BB ;
    transition: 0.3s;
}

.btn-secondary:hover {
    background: #2d6cdf;
    color: #fff;
}

/* =========================
   BLOC AGIR POUR LA SLA
========================= */

.sla-agir {
    padding: 60px 30px;
    background: #ffffff;
    text-align: center;
}

.sla-agir h2 {
    font-size: 32px;
    color: #2c2c2c;
    margin-bottom: 15px;
}

.sla-agir .intro {
    font-size: 18px;
    font-weight: 500;
    color: #0070bb;
    margin-bottom: 20px;
}

.sla-agir p {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto 15px auto;
}

/* Boutons */
.sla-agir-buttons {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.btn-adhere {
    background: #0070BB ;
    color: white;
    padding: 14px 22px;
    border-radius: 8px;
    text-decoration: none;
    transition: 0.3s;
}

.btn-adhere:hover {
    background: #1f4fb0;
}

.btn-don {
    background: #0070bb;
    color: white;
    padding: 14px 22px;
    border-radius: 8px;
    text-decoration: none;
    transition: 0.3s;
}

.btn-don:hover {
    background: #005a96;
}

/* =========================
   TITRES ACTUALITÉS
========================= */

.sla-section-titre {
    text-align: center;
    padding: 40px 20px 20px 20px;
}

.sla-section-titre h2 {
    font-size: 32px;
    color: #2c2c2c;
    margin-bottom: 10px;
}

.sla-section-titre p {
    font-size: 17px;
    color: #666;
    max-width: 750px;
    margin: 0 auto;
    line-height: 1.6;
}

.sla-hero-page {
    padding: 60px 20px 30px 20px;
    text-align: center;
    background: #f7f7f7;
}

.sla-hero-page h1 {
    font-size: 38px;
    color: #2c2c2c;
    margin-bottom: 15px;
}

.sla-hero-page p {
    font-size: 18px;
    color: #555;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}
/* =========================
   HERO RECHERCHE
========================= */

.hero-recherche {
  background: linear-gradient(120deg, #eaf4ff, #ffffff);
  padding: 80px 20px;
  text-align: center;
}

.hero-recherche h1 {
  font-size: 2.6rem;
  color: #0070BB ;
  margin-bottom: 20px;
}

.hero-recherche p {
  font-size: 1.2rem;
  color: #555;
  max-width: 800px;
  margin: 0 auto 30px;
}

.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}


.hero-recherche {
  background: linear-gradient(120deg, #eaf4ff, #ffffff);
  padding: 90px 20px;
  text-align: center;
}

.hero-recherche h1 {
  font-size: 2.6rem;
  color: #1f3b57;
  margin-bottom: 20px;
}

.hero-recherche p {
  font-size: 1.15rem;
  color: #555;
  max-width: 850px;
  margin: 0 auto 30px;
  line-height: 1.6;
}


.hero-buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    flex-wrap:wrap;
}



/* =========================
   BOUTONS
========================= */

.btn-primary {
  background: #0070BB ;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
}

.btn-secondary {
  background: white;
  color: #0070BB ;
  border: 2px solid #0070BB ;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
}

/* =========================
   SECTIONS GENERALES
========================= */

section {
  padding: 60px 20px;
}

.bloc-intro,
.bloc-microbiote,
.bloc-cta {
  max-width: 900px;
  margin: auto;
  text-align: center;
}

h2 {
  color: #1f3b57;
  margin-bottom: 20px;
}

p {
  color: #555;
  line-height: 1.6;
}

/* =========================
   CARDS
========================= */

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: 30px auto 0;
}

.card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  text-align: left;
}

.card h3 {
  color: #2a7de1;
  margin-bottom: 10px;
}

/* =========================
   MICROBIOTE
========================= */

.bloc-microbiote {
  background: #f7fbff;
  border-left: 5px solid #0070BB ;
  padding: 40px 20px;
  border-radius: 10px;
}

/* =========================
   CTA FINAL
========================= */

.bloc-cta{
    max-width:1200px;
    margin:60px auto 0;
    padding:70px 30px;
    background:#005a9c;
    border-radius:12px;
    text-align:center;
    color:white;
} 


.bloc-cta h2,
.bloc-cta p {
  color: white;
}


.bloc-intro-recherche {
  max-width: 900px;
  margin: auto;
  padding: 60px 20px;
  text-align: center;
}

.bloc-intro-recherche h2 {
  color: #1f3b57;
  margin-bottom: 25px;
  font-size: 2rem;
}

.bloc-intro-recherche p {
  color: #555;
  line-height: 1.7;
  margin-bottom: 15px;
  font-size: 1.05rem;
}


.bloc-cards {
  padding: 60px 20px;
  text-align: center;
}

.bloc-cards h2 {
  color: #1f3b57;
  margin-bottom: 30px;
  font-size: 2rem;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: auto;
}

.card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  text-align: left;
}

.card h3 {
  color: #0070BB ;
  margin-bottom: 10px;
}

.card p {
  color: #555;
  line-height: 1.5;
}
.bloc-microbiote {
  background: #f7fbff;
  border-left: 5px solid #2a7de1;
  padding: 50px 25px;
  margin: 60px auto;
  max-width: 900px;
  border-radius: 10px;
}

.bloc-microbiote h2 {
  color: #1f3b57;
  margin-bottom: 20px;
  font-size: 1.8rem;
  text-align: center;
}

.bloc-microbiote p {
  color: #555;
  line-height: 1.7;
  margin-bottom: 15px;
  text-align: center;
}
.bloc-actus {
  padding: 60px 20px;
  text-align: center;
}

.bloc-actus h2 {
  color: #1f3b57;
  margin-bottom: 20px;
  font-size: 2rem;
}

.bloc-actus p {
  color: #555;
  max-width: 800px;
  margin: 0 auto 30px;
  line-height: 1.6;
}
.bloc-cta {
  background: #0070BB;
  color: white;
  border-radius: 12px;
  padding: 70px 20px;
  text-align: center;
  margin-top: 60px;
}

.bloc-cta h2,
.bloc-cta p {
  color: white;
}

.bloc-cta p {
  max-width: 800px;
  margin: 15px auto 30px;
  line-height: 1.6;
}

/* =========================
   HERO DROITS ET AIDES
========================= */

.hero-droits {
  background: linear-gradient(120deg, #f0f7ff, #ffffff);
  padding: 80px 20px;
  text-align: center;
}

.hero-droits h1 {
  font-size: 2.6rem;
  color: #1f3b57;
  margin-bottom: 20px;
}

.hero-droits p {
  font-size: 1.2rem;
  color: #555;
  max-width: 800px;
  margin: auto;
}

/* =========================
   SECTION DEMARCHES
========================= */

.bloc-demarches {
  max-width: 900px;
  margin: auto;
  text-align: center;
}

/* =========================
   ACTUALITES DROITS
========================= */

.bloc-actus-droits {
  background: #f7fbff;
  padding: 60px 20px;
  text-align: center;
  border-radius: 10px;
  max-width: 1100px;
  margin: auto;
}


.hero-droits {
  background: linear-gradient(120deg, #f0f7ff, #ffffff);
  padding: 90px 20px;
  text-align: center;
}

.hero-droits h1 {
  font-size: 2.6rem;
  color: #1f3b57;
  margin-bottom: 20px;
}

.hero-droits p {
  font-size: 1.15rem;
  color: #555;
  max-width: 850px;
  margin: auto;
  line-height: 1.6;
}

.bloc-demarches {
  max-width: 900px;
  margin: auto;
  padding: 60px 20px;
  text-align: center;
}

.bloc-demarches h2 {
  color: #1f3b57;
  margin-bottom: 20px;
}

.bloc-demarches p {
  color: #555;
  line-height: 1.7;
}




/* ==========================================================
   SLA QU'ES AQUÒ - THEME COMPLET STABLE
   Couleur principale : #0070BB
   Version : base propre multi-pages
   ========================================================== */

/* RESET GLOBAL */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #1a1a1a;
    line-height: 1.6;
    background: #ffffff;
}

/* LIENS */
a {
    color: #0070BB;
    text-decoration: none;
}

a:hover {
    opacity: 0.85;
}

/* ==========================================================
   HEADER (structure 2 lignes)
   ========================================================== */

header {
    background: #0070BB;
    color: white;
    padding: 15px 20px;
}

/* ligne 1 : logo + boutons */
.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

/* ligne 2 : menu */
nav {
    margin-top: 10px;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

nav ul li a {
    color: white;
    font-weight: bold;
}

/* ==========================================================
   HERO (page accueil + pages internes si besoin)
   ========================================================== */

.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 60px 20px;
    gap: 40px;
    flex-wrap: wrap;
    background: #f5f9fc;
}

.hero-text {
    flex: 1;
    min-width: 280px;
}

.hero h1 {
    color: #0070BB;
    font-size: 2.2rem;
    margin-bottom: 15px;
}

.hero p {
    font-size: 1.1rem;
    margin-bottom: 20px;
}

/* ==========================================================
   BOUTONS UNIFIÉS
   ========================================================== */

.btn-primary {
    background: #0070BB;
    color: white;
    padding: 12px 20px;
    border-radius: 6px;
    display: inline-block;
    margin-right: 10px;
}

.btn-primary:hover {
    background: #005f9c;
}

.btn-secondary {
    background: white;
    color: #0070BB;
    border: 2px solid #0070BB;
    padding: 12px 20px;
    border-radius: 6px;
}

.btn-secondary:hover {
    background: #f0f8ff;
}

/* ==========================================================
   SECTIONS GENERALES
   ========================================================== */

section {
    padding: 50px 20px;
}

h1, h2, h3 {
    color: #0070BB;
}

h2 {
    margin-bottom: 15px;
}

/* ==========================================================
   BLOCS "ASSOCIATION / TEXTE"
   ========================================================== */

.sla-container {
    max-width: 1100px;
    margin: 0 auto;
}

.intro {
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: #333;
}

/* ==========================================================
   BLOCS CTA (DON / ADHESION)
   ========================================================== */

.bloc-cta {
    background: #0070BB;
    color: white;
    text-align: center;
    padding: 60px 20px;
}

.bloc-cta h2 {
    color: white;
    margin-bottom: 15px;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* bouton CTA dans bloc bleu */
.bloc-cta .btn-primary {
    background: white;
    color: #0070BB;
}

.bloc-cta .btn-secondary {
    border-color: white;
    color: white;
    background: transparent;
}

/* ==========================================================
   ACTUALITES / BLOCS ARTICLES
   ========================================================== */

.bloc-articles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.article-card {
    border: 1px solid #e5e5e5;
    padding: 20px;
    border-radius: 8px;
    background: white;
}

/* ==========================================================
   FOOTER
   ========================================================== */

footer {
    background: #003a63;
    color: white;
    text-align: center;
    padding: 25px 20px;
}

footer a {
    color: #ffffff;
}

/* ==========================================================
   RESPONSIVE MOBILE
   ========================================================== */

@media (max-width: 768px) {

    .hero {
        flex-direction: column;
        text-align: center;
    }

    nav ul {
        justify-content: center;
    }

    .header-top {
        justify-content: center;
        text-align: center;
    }

    .hero h1 {
        font-size: 1.8rem;
    }
}


.footer-menu {
    list-style: none;
    padding: 0;
    margin: 15px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.footer-menu li a {
    color: white;
    font-size: 0.95rem;
}


/* ==========================================================
   NOUVEAU SYSTÈME DE CARTES CLIQUABLES (DETAILS / SUMMARY)
   Ajouté de manière sécurisée en fin de fichier
   ========================================================== */

.sla-grid-展開 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    padding: 20px 0;
}

.sla-card-clickable {
    background: #E1F0FA; /* 👈 Un bleu clair plus soutenu et visible */
    border: 1px solid #BCE0F6; /* Une bordure un peu plus marquée */
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 112, 187, 0.08); /* Une ombre légèrement plus dense */
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
}

.sla-card-clickable .sla-card-content {
    padding: 20px 25px 25px 25px;
    color: #333333;
    background: #ffffff; /* On garde le fond blanc à l'intérieur pour un contraste de lecture parfait */
    border-top: 1px solid #BCE0F6;
}

.sla-card-clickable:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,.12);
}

.sla-card-clickable summary {
    padding: 25px;
    font-weight: bold;
    font-size: 1.2rem;
    color: #0070BB;
    cursor: pointer;
    list-style: none; /* Cache la flèche par défaut */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Flèche personnalisée à droite */
.sla-card-clickable summary::after {
    content: "▼";
    font-size: 0.9rem;
    color: #F28C28; /* Couleur accent orange */
    transition: transform 0.25s ease;
}

/* Rotation de la flèche quand c'est ouvert */
.sla-card-clickable[open] summary::after {
    transform: rotate(180deg);
}

/* Cache la flèche par défaut sur Safari */
.sla-card-clickable summary::-webkit-details-marker {
    display: none;
}

/* Contenu masqué/affiché */
.sla-card-clickable .sla-card-content {
    padding: 0 25px 25px 25px;
    color: #333333;
    border-top: 1px solid #f0f0f0;
}}}
/* ==========================================================
   FORCE L'UNIFORMISATION ET LE CENTRAGE DES TITRES
   ========================================================== */

/* 1. FORCE LE BLEU ET LE CENTRAGE SUR ABSOLUMENT TOUS LES TITRES DU SITE */
h1, h2, h3, h4,
h1 *, h2 *, h3 *, h4 *,
.hero-text h1, .hero-sla h1, .sla-hero-text h1, .hero-recherche h1, .hero-droits h1,
.carte h3, .pilier h3, .engagement-item h3, .card h3,
.sla-section-titre h2, .bloc-intro-recherche h2, .bloc-cards h2, .bloc-microbiote h2, .bloc-actus h2 {
    color: #0070BB !important;      /* Ton bleu officiel */
    text-align: center !important;  /* Centré partout */
    font-family: Arial, sans-serif !important;
    font-weight: 700 !important;
}

/* 2. LES GRANDS TITRES (Plus gros pour donner du style) */
h1, h1 *, 
.hero-text h1, .hero-sla h1, .sla-hero-text h1, .hero-recherche h1, .hero-droits h1 {
    font-size: 38px !important;     /* Taille généreuse et visible */
    margin-bottom: 25px !important;
    line-height: 1.2 !important;
}

/* 3. LES SOUS-TITRES (Cartes, sections, piliers...) */
h2, h3, h2 *, h3 *,
.carte h3, .pilier h3, .engagement-item h3, .card h3,
.sla-section-titre h2, .bloc-intro-recherche h2, .bloc-cards h2, .bloc-microbiote h2, .bloc-actus h2 {
    font-size: 28px !important;     /* Taille intermédiaire affirmée */
    margin-top: 20px !important;
    margin-bottom: 15px !important;
}

/* ==========================================================
   STYLE ET HARMONISATION DE L'EN-TÊTE CUSTOM (HEADER)
   ========================================================== */

/* Structure globale */
.entete-sla {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 20px;
}

/* Alignement du logo et des boutons */
.entete-principale {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

/* Gestion du logo */
.logo-sla img {
    max-height: 70px; /* Aligne la taille de ton logo proprement */
    width: auto;
}

/* Zone des boutons */
.actions-entete {
    display: flex;
    gap: 12px;
}

/* Style du Bouton FAIRE UN DON (Ton bleu officiel) */
.btn-don {
    background-color: #0070BB !important;
    color: #ffffff !important;
    padding: 10px 20px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.2s ease;
}
.btn-don:hover {
    background-color: #005691 !important; /* Un bleu un peu plus sombre au survol */
}

/* Style du Bouton ESPACE ADHÉRENTS (Contour bleu) */
.btn-adherents {
    background-color: transparent !important;
    color: #0070BB !important;
    border: 2px solid #0070BB !important;
    padding: 8px 18px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.2s ease;
}
.btn-adherents:hover {
    background-color: #0070BB !important;
    color: #ffffff !important; /* S'inverse au survol */
}

/* --- LE MENU DE NAVIGATION --- */
.navigation-sla {
    border-top: 1px solid #E1F0FA; /* Ligne de séparation très fine */
    padding-top: 15px;
}

.liste-navigation {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center; /* Centre le menu */
    flex-wrap: wrap;
    gap: 20px 25px; /* Espace entre les mots */
}

.element-navigation a {
    color: #333333; /* Couleur des pages non actives par défaut */
    text-decoration: none;
    font-size: 15px;
    transition: color 0.2s ease;
}

/* Effet au survol sur les éléments du menu */
.element-navigation a:hover {
    color: #0070BB !important; /* Devient bleu au passage de la souris */
}

/* ==========================================================
   STYLE ET HARMONISATION DU PIED DE PAGE CUSTOM (FOOTER)
   ========================================================== */

/* Fond global du footer */
.sla-footer {
    background-color: #0070BB !important; /* Ton bleu officiel */
    color: #ffffff !important;           /* Texte de base en blanc */
    padding: 40px 20px 20px 20px !important;
    font-family: Arial, sans-serif;
}

/* Conteneur des 3 colonnes */
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* S'adapte sur mobile */
    gap: 30px;
    padding-bottom: 30px;
}

/* Style de chaque colonne */
.footer-col {
    flex: 1;
    min-width: 250px; /* Évite que les colonnes soient trop serrées */
}

/* Titres dans le footer (SLA Qu'es Aquò, Navigation, Contact) */
.footer-col h3 {
    color: #ffffff !important; /* Forcé en blanc */
    font-size: 20px !important;
    margin-bottom: 20px !important;
    text-align: left !important; /* Aligné à gauche dans le footer pour le style */
    font-weight: 700 !important;
    border-bottom: 2px solid #BCE0F6; /* Petite ligne de soulignement sous le titre de colonne */
    padding-bottom: 8px;
    display: inline-block;
}

/* Paragraphes et textes du footer */
.footer-col p {
    color: #ffffff !important;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 10px 0 !important;
}

/* Liens de navigation du footer */
.footer-col a {
    color: #E1F0FA !important; /* Bleu très clair pour une excellente lisibilité */
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 14px;
}

/* Effet au survol des liens */
.footer-col a:hover {
    color: #ffffff !important; /* Devient blanc pur au survol */
    text-decoration: underline; /* Se souligne discrètement */
}

/* --- LIGNE DE COPYRIGHT (BAS DU FOOTER) --- */
.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Ligne de séparation fine et transparente */
    padding-top: 20px;
    text-align: center;
}

.footer-bottom p {
    color: #BCE0F6 !important; /* Texte discret */
    font-size: 13px;
    margin: 0 !important;
}
}

/* ==========================================================
   RÉDUCTION DE L'ESPACE ENTRE LE CTA BLEU ET LE FOOTER
   ========================================================== */

/* Réduit la marge externe sous le bloc CTA bleu */
.sla-cta-final, .bloc-cta {
    margin-bottom: 0 !important;
}

/* Réduit l'espace interne en haut du pied de page */
.sla-footer, footer {
    margin-top: 0 !important;
    padding-top: 30px !important; /* Vous pouvez baisser à 20px si vous voulez encore plus coller */
}

/* ==========================================================
   FORCE LA COLLISION DU CTA BLEU AVEC LE FOOTER (SPECIAL YAPLA)
   ========================================================== */

/* 1. Supprime l'espace automatique que Yapla met SOUS le bloc bleu */
.bloc-cta, .sla-cta-final {
    margin-bottom: -50px !important; /* Force le bloc à descendre */
    position: relative !important;
    z-index: 10 !important;
}

/* 2. Cible la ligne invisible de Yapla contenant le Footer pour supprimer son espace du haut */
footer, .sla-footer {
    padding-top: 15px !important; /* Remonte le contenu interne du pied de page */
    margin-top: 0 !important;
}

/* 3. Neutralise les marges forcées par Yapla entre ces deux sections spécifiques */
.line.site_line__item {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ==========================================================
   HARMONISATION DES COULEURS (ACCUEIL) & LIGNE DE SÉPARATION
   ========================================================== */

/* 1. Aligne exactement le bleu du bloc CTA avec celui du footer (#003a63) */
.sla-cta-final, .bloc-cta, .cta-container-parent {
    background: #0070BB !important; 
}

/* 2. Préserve et sublime l'effet de voile (boîte transparente par-dessus le fond) */
.cta-container {
    background: rgba(255, 255, 255, 0.07) !important; /* Voile léger blanc transparent */
    backdrop-filter: blur(4px) !important; /* Floute légèrement le fond pour un effet moderne */
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* 3. Ajoute la ligne de séparation fine et discrète que vous souhaitiez entre les deux blocs */
footer, .sla-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important; /* Ligne fine blanche très subtile */
}

/* ==========================================================
   ESPACE ADHÉRENTS
   Version 1
   ========================================================== */

.espace-header{
    background:#0070BB;
    color:#ffffff;
    padding:18px 25px;
    border-radius:12px;
    margin-bottom:35px;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
} 
.espace-header-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:25px;
}

.espace-logo{
    display:flex;
    align-items:center;
    gap:18px;
    flex:1;
    min-width:0;
}

.espace-actions{
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
}
.espace-logo{
    display:flex;
    align-items:center;
    gap:18px;
    flex:1;
}
.espace-logo img{
    height:70px;
    width:auto;
}

.espace-titre h1{
    color:#ffffff !important;
    font-size:32px !important;
    margin:0 !important;
    text-align:left !important;
}

.espace-titre p{
    margin-top:6px;
    color:rgba(255,255,255,.90);
    font-size:15px;
}

.espace-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}
.espace-btn-deconnexion{
    background:transparent;
    color:#ffffff;
    border:2px solid rgba(255,255,255,.65);
}

.espace-btn-deconnexion:hover{
    background:rgba(255,255,255,.15);
}
.espace-btn-public:hover{
    background:#EAF4FF;
}

.espace-btn-off{
    border:2px solid #ffffff;
    color:#ffffff;
}

.espace-btn-off:hover{
    background:#ffffff;
    color:#0070BB;
}

.espace-menu{
    margin-top:25px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.25);
}

.espace-menu ul{
    list-style:none;
    display:flex;
    gap:22px;
    margin:0;
    padding:0;
    flex-wrap:wrap;
}

.espace-menu a{
    color:#ffffff;
    text-decoration:none;
    font-weight:600;
}

.espace-menu a:hover{
    color:#D6ECFA;
} 

/* ==========================================================
   PORTAIL ADHÉRENTS - TABLEAU DE BORD
   ========================================================== */

.dashboard-adherents{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:25px;
    margin:35px 0;
}

.dashboard-carte{
    background:#ffffff;
    border:1px solid #D6ECFA;
    border-radius:12px;
    padding:28px;
    text-align:center;
    box-shadow:0 4px 12px rgba(0,112,187,.08);
    transition:all .25s ease;
}

.dashboard-carte:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 25px rgba(0,112,187,.15);
}

.dashboard-carte h3{
    color:#0070BB;
    margin-bottom:15px;
}

.dashboard-carte p{
    color:#666;
    margin-bottom:20px;
    line-height:1.5;
}

.dashboard-lien{
    display:inline-block;
    padding:10px 18px;
    background:#0070BB;
    color:#fff;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;
}

.dashboard-lien:hover{
    background:#00558A;
}


/* ==========================================================
   PORTAIL ADHÉRENTS - INFORMATIONS IMPORTANTES
   ========================================================== */

.dashboard-info{
    background:#EAF4FF;
    border-left:6px solid #0070BB;
    border-radius:12px;
    padding:25px 30px;
    margin:30px 0 40px;
}

.dashboard-info h2{
    margin:0 0 20px;
    text-align:left !important;
    color:#0070BB !important;
    font-size:28px !important;
}

.dashboard-info ul{
    margin:0;
    padding-left:20px;
}

.dashboard-info li{
    margin-bottom:12px;
    color:#444;
    line-height:1.6;
}

/* ==========================================================
   PORTAIL ADHÉRENTS - ACCÈS RAPIDE
   ========================================================== */

.acces-rapide{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    margin:35px 0;

}

.acces-rapide a{

    display:block;

    background:#0070BB;

    color:white;

    text-align:center;

    padding:18px;

    border-radius:10px;

    text-decoration:none;

    font-weight:bold;

    transition:.25s;

}

.acces-rapide a:hover{

    background:#00558A;

    transform:translateY(-3px);

}

@media(max-width:900px){

.acces-rapide{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:600px){

.acces-rapide{

grid-template-columns:1fr;

}
}

.acces-rapide a{

    transition:
        transform .25s,
        box-shadow .25s,
        background .25s;

}

.acces-rapide a:hover{

    transform:translateY(-3px);

    box-shadow:0 8px 20px rgba(0,112,187,.20);

}

/* ==========================================================
   PORTAIL ADHÉRENTS - VIE DE L'ASSOCIATION
   ========================================================== */

.vie-asso{

    margin:50px 0;

}

.vie-asso h2{

    margin-bottom:25px;
}  

.vie-asso h2,
.actualites h2{

    font-size:2rem !important;

    margin-bottom:20px !important;

}

.vie-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:25px;

}

.vie-bloc{

    background:#FCFEFF;

    border:1px solid #D6ECFA;

    border-radius:12px;

    padding:25px;

}

.vie-bloc{

    cursor:pointer;

}

.vie-bloc:hover h3{

    color:#005792 !important;

}

.vie-bloc h3{

    text-align:left !important;

    color:#0070BB !important;

    margin-bottom:15px;

}

.vie-bloc ul{

    margin:0;

    padding-left:20px;

}

.vie-bloc li{

    margin-bottom:10px;

}
.vie-bloc{
    display:block;
    text-decoration:none;
    color:inherit;
    background:#F8FBFE;
    border:1px solid #D6ECFA;
    border-radius:12px;
    padding:25px;
    transition:all .25s ease;
}

.vie-bloc:hover{
    transform:translateY(-4px);
    border-color:#0070BB;
    box-shadow:0 10px 25px rgba(0,112,187,.15);
}

.vie-bloc p{
    color:#555;
    margin:0;
}

.vie-bloc{
    display:block;
    text-decoration:none;
    color:inherit;
    background:#FCFEFF;
    border:1px solid #D6ECFA;
    border-radius:12px;
    padding:25px;
    transition:all .30s ease;
    position:relative;
    overflow:hidden;
}

.vie-bloc::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:5px;
    height:100%;
    background:#0070BB;
    transform:scaleY(0);
    transition:transform .30s;
}

.vie-bloc:hover::before{
    transform:scaleY(1);
}

.vie-bloc:hover{
    transform:translateY(-5px);
    border-color:#0070BB;
    box-shadow:0 12px 30px rgba(0,112,187,.18);
}

.bandeau-adherents{

    margin:60px 0 20px;

    padding:50px 40px;

    background:#0070BB;

    color:#fff;

    text-align:center;

    border-radius:14px;

}

.bandeau-adherents h2{

    color:#fff !important;

    font-size:2rem;

    font-weight:700;

    margin-bottom:25px;

}

.bandeau-adherents p{

    color:#fff;

    max-width:900px;

    margin:20px auto;

    font-size:1.25rem;

    line-height:1.8;

}

.bandeau-adherents strong{

    color:#FFD54A;

}

.signature-bandeau{

    margin-top:35px !important;

    padding-top:25px;

    border-top:1px solid rgba(255,255,255,.30);

    font-size:1.4rem !important;

    font-style:italic;

    font-weight:700;

}

/* ==========================================================
   PORTAIL ADHÉRENTS - HARMONISATION DES ESPACES
   ========================================================== */

.espace-header{
    margin-bottom:30px;
}

.actualites{
    margin-bottom:35px;
}

.acces-rapide{
    margin:30px 0 40px;
}

.vie-asso{
    margin:40px 0;
}

.bandeau-adherents{
    margin:45px 0 15px;
}

h2{
    margin-bottom:18px !important;
}

p{
    margin-bottom:14px;
}

border-radius:12px;

.separateur{

    text-align:center;

    margin:35px 0;

    color:#0070BB;

    opacity:.35;

    font-size:18px;

    letter-spacing:10px;

}

.separateur::before{

    content:"● ● ●";

}

/* Boutons */
.btn-adherer,
.btn-retour{
  display:inline-block;
  padding:12px 28px;
  margin:0 10px;
  border-radius:6px;
  text-decoration:none;
  font-weight:bold;
  color:#fff;
  transition:0.3s;
}

.btn-adherer{
  background:#0070BB;
}

.btn-adherer:hover{
  background:#005c99;
}

.btn-retour{
  background:#28A745;
}

.btn-retour:hover{
  background:#1f8637;
}

/* ============================
   INTRODUCTION - VIE DE L'ASSOCIATION
============================ */

.vie-intro{
    background:#ffffff;
    border-radius:16px;
    padding:35px 40px;
    margin:25px auto 40px;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
}

.vie-intro h1{
    color:#0070BB;
    font-size:2.2rem;
    text-align:center;
    margin-bottom:20px;
}

.vie-intro .intro{
    font-size:1.25rem;
    font-weight:700;
    color:#333;
    text-align:center;
    margin-bottom:30px;
}

.vie-intro p{
    font-size:1.08rem;
    line-height:1.8;
    color:#555;
    margin-bottom:18px;
}

/* ============================
   TITRE DES ACTUALITÉS
============================ */

.titre-actus{
    text-align:center;
    margin:40px auto 25px;
}

.titre-actus h2{
    color:#0070BB;
    font-size:1.8rem;
    margin-bottom:12px;
}

.titre-actus p{
    color:#666;
    font-size:1.05rem;
    max-width:700px;
    margin:auto;
    line-height:1.6;
}

/*----------------------------------------------------
TITRE DE SECTION
----------------------------------------------------*/

.sla-titre-page{
    text-align:center;
    margin:35px 0 25px;
}

.sla-titre-page h2{
    color:#0070BB;
    font-size:32px;
    margin-bottom:12px;
}

.sla-titre-page .trait{
    width:90px;
    height:4px;
    background:#0070BB;
    margin:0 auto 20px;
    border-radius:3px;
}

.sla-titre-page p{
    max-width:750px;
    margin:auto;
    font-size:18px;
    line-height:1.7;
    color:#555;
}

/*----------------------------------------
BOUTON ARCHIVES
----------------------------------------*/

.bloc-archives{
    text-align:center;
    margin:35px 0 50px;
}

.btn-archives{
    display:inline-block;
    padding:14px 34px;
    background:#0070BB;
    color:#ffffff;
    text-decoration:none;
    border-radius:30px;
    font-size:17px;
    font-weight:600;
    transition:all .3s ease;
}

.btn-archives:hover{
    background:#005c99;
    transform:translateY(-2px);
}

/* Par défaut */
.btn-espace {
    display: none;
}

/* Si l'adhérent est connecté */
body.member--isConnected .btn-connexion {
    display: none;
}

body.member--isConnected .btn-espace {
    display: inline-flex;
    align-items: center;
}

.ressources{
    text-align:center;
    max-width:1200px;
    margin:60px auto;
}

.carte{
    display:inline-block;
    vertical-align:top;
    width:320px;
    margin:15px;
    padding:30px;
    background:#fff;
    border-radius:18px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    text-align:left;
    box-sizing:border-box;
}

<div class="resources-cards">

    <a href="/guides-pratiques" class="resource-card">
        <h3>📘 Guides pratiques</h3>
        <p>Toutes les informations essentielles pour vous accompagner dans vos démarches et faciliter votre parcours de prise en charge.</p>

        <ul>
            <li>Prise en charge à 100 % (ALD 30)</li>
            <li>Monter son dossier MDPH et obtenir la PCH</li>
            <li>Matériel, aides techniques et aménagements</li>
            <li>Droits, soutiens et répit pour les proches aidants</li>
        </ul>

        <span>Consulter les guides →</span>
    </a>

    <a href="/documents-officiels" class="resource-card">
        <h3>📄 Documents officiels</h3>
        <p>Les documents institutionnels et administratifs de l'association.</p>

        <ul>
            <li>Gouvernance et textes fondateurs</li>
            <li>Rapports d'activité</li>
            <li>Rapports financiers</li>
            <li>Procès-verbaux des assemblées générales</li>
            <li>Documents administratifs utiles</li>
        </ul>

        <span>Accéder aux documents →</span>
    </a>

    <a href="/brochures" class="resource-card">
        <h3>📰 Brochures et fiches d'information</h3>
        <p>Des publications pour mieux comprendre la maladie et les prises en charge.</p>

        <ul>
            <li>Brochures médicales et scientifiques</li>
            <li>Fiches pratiques</li>
            <li>Brochures pour les proches</li>
        </ul>

        <span>Télécharger les brochures →</span>
    </a>

    <a href="/telechargements" class="resource-card">
        <h3>⬇️ Documents à télécharger</h3>
        <p>Retrouvez tous les documents utiles pour vos démarches.</p>

        <ul>
            <li>Documents médicaux et fiches d'urgence</li>
            <li>Modèles de courriers</li>
            <li>Formulaires CERFA</li>
            <li>Outils et formulaires de l'association</li>
        </ul>

        <span>Accéder aux téléchargements →</span>
    </a>

</div>

.documents h1 {
    color:#0070BB;
}

.bouton-rapide{
    background:#0070BB;
}

.bouton-rapide:hover{
    background:#005A95;
}

.carte{
    border-top:6px solid #0070BB;
}

.carte h2{
    color:#0070BB;
}

.carte a{
    background:#0070BB;
}

.carte a:hover{
    background:#005A95;
}

.info{
    border-left:5px solid #0070BB;
    background:#F2F8FC;
}

.info h3{
    color:#0070BB;
}