/*--------------------------------------------------------------
# Hero Association
--------------------------------------------------------------*/

.asso-hero{

    display:grid;

    grid-template-columns:250px 1fr;

    gap:40px;

    align-items:center;

    margin:40px 0 60px;

}

.asso-hero-logo{

    display:flex;
    align-items:flex-start;
    justify-content:center;

}

.asso-hero-logo img{

    width:250px;
    height:250px;

    object-fit:contain;

    background:#fff;

    padding:18px;

    border-radius:20px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.08);

}

.asso-hero-content h1{

    margin:0 0 22px;

    font-size:2.3rem;

    line-height:1.15;

	position:relative;

}

.asso-hero-causes{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:18px;

}

.asso-hero-territoires{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:18px;

}

.territoire-badge{

    display:inline-flex;
    align-items:center;

    padding:7px 14px;

    border-radius:999px;

    background:#f7f8fa;

    border:1px solid #e3e6ea;

    color:#4b5563;

    font-size:.88rem;

    font-weight:500;

}

.asso-date{

    color:#666;

    font-size:.95rem;

    margin-bottom:20px;

}

.asso-resume{

    max-width:700px;

    line-height:1.8;

    margin-bottom:30px;

}

.asso-actions{

    float:right;

    display:flex;

    flex-direction:column;

    gap:10px;

    margin:0 0 20px 30px;

    width:220px;

}

.btn-site,
.btn-don{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:14px;

    padding:14px 22px;

    border-radius:12px;

    text-decoration:none;

    font-weight:600;

    transition:.25s;

margin-top:8px;

}

.btn-site{

    background:#ffffff;

    color:#14532d;

    border:1px solid #d6e8dc;

}

.btn-site:hover{

    transform:translateY(-2px);

    background:#f5fbf7;

}

.btn-don{

    background:#3e90df;

    color:#fff;

}

.btn-don:hover{

    background:#46ac8f;
	color:#fff;

    transform:translateY(-2px);

}

/*--------------------------------------------------------------
# Titres de sections
--------------------------------------------------------------*/

.asso-section-title{

    margin-top:20px;
    margin-bottom:10px;

    font-size:.82rem;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#6b7280;

    font-weight:700;

}

.asso-read-more{

    display:inline-block;

    margin-top:10px;

    color:#3557c2;

    font-weight:600;

    text-decoration:none;

}

.asso-read-more:hover{

    text-decoration:underline;

}

.asso-resume-complet{

    display:none;

}

.asso-read-more{

    display:inline-block;

    margin-top:8px;

    font-weight:600;

}

/*--------------------------------------------------------------
# Bloc Informations
--------------------------------------------------------------*/

.association-infos{

    display:grid;

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

    gap:22px;

    margin:60px 0 45px;

}

.info-card{

    background:#ffffff;

    border:1px solid #e7ece8;

    border-radius:18px;

    padding:24px;

    box-shadow:
        0 8px 22px rgba(0,0,0,.05);

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

}

.info-card:hover{

    transform:translateY(-3px);

    box-shadow:
        0 14px 35px rgba(0,0,0,.09);

}

.info-title{

    font-size:.82rem;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#6b7280;

    font-weight:700;

    margin-bottom:14px;

}

.info-content{

    color:#253238;

    line-height:1.7;

    font-size:.98rem;

    word-break:break-word;

}

/*--------------------------------------------------------------
# Média
--------------------------------------------------------------*/

.asso-media{

    max-width:1100px;
    margin:50px auto;

}

.asso-media iframe{

    width:100%;
    aspect-ratio:16/9;
    border:0;
    border-radius:16px;

}

.asso-media img{

    width:100%;
    display:block;
    border-radius:16px;
    object-fit:cover;

}

/*--------------------------------------------------------------
# Présentation + Photo
--------------------------------------------------------------*/

.asso-contenu{

    display:grid;
    grid-template-columns:2fr 1fr;
    gap:40px;
    align-items:start;

    margin:50px 0;

}

.asso-presentation h2{

    margin-bottom:24px;

}

.asso-photo{

    display:flex;
    align-items:stretch;

}

.asso-photo img{

    width:100%;
    height:380px;

    display:block;

    object-fit:cover;
    object-position:center;

    border-radius:18px;

    box-shadow:
        0 10px 35px rgba(0,0,0,.12);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.asso-photo{

    overflow:hidden;

    border-radius:18px;

}

.asso-photo:hover img{

    transform:scale(1.03);

    box-shadow:
        0 16px 45px rgba(0,0,0,.18);

}

.asso-video{

    max-width:1000px;

    margin:50px auto;

}

.asso-video iframe{

    width:100%;
    aspect-ratio:16 / 9;

    border:none;
    border-radius:16px;

}

#association-map{

    height:300px;

    margin-top:40px;

    border-radius:18px;

    overflow:hidden;

    box-shadow:
        0 10px 30px rgba(0,0,0,.08);

}

/*--------------------------------------------------------------
# Pages associations - Responsive
# À coller tout à la fin du CSS des pages associations
# (après toutes les règles de base, pour qu'elles priment)
# Points de rupture identiques à ceux de l'annuaire :
#   smartphone : jusqu'à 767px
#   tablette   : de 768px à 1100px
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Tablettes (768px à 1100px)
--------------------------------------------------------------*/

@media screen and (min-width:768px) and (max-width:1100px){

    /* Hero : logo + texte côte à côte, en plus compact */
    .asso-hero{
        grid-template-columns:200px 1fr;
        gap:28px;
        margin:30px 0 45px;
    }

    .asso-hero-logo img{
        width:200px;
        height:200px;
        padding:14px;
    }

    .asso-hero-content h1{
        font-size:2rem;
        margin-bottom:18px;
    }

    .asso-resume{
        max-width:100%;
    }

    .asso-actions{
        width:200px;
        margin:0 0 16px 24px;
    }

    /* Cartes d'informations : 3 colonnes si la place le permet, sinon 2 */
    .association-infos{
        grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
        gap:16px;
        margin:40px 0 35px;
    }

    .info-card{
        padding:18px;
    }

    .info-content{
        font-size:.93rem;
    }

    /* Présentation + photo */
    .asso-contenu{
        grid-template-columns:1.4fr 1fr;
        gap:28px;
        margin:40px 0;
    }

    .asso-photo img{
        height:300px;
    }

    .asso-media,
    .asso-video{
        margin:40px auto;
    }

    #association-map{
        height:280px;
    }
}


/*--------------------------------------------------------------
# Smartphones (jusqu'à 767px)
--------------------------------------------------------------*/

@media screen and (max-width:767px){

    /* Hero : tout sur une colonne, logo centré au-dessus */
    .asso-hero{
        grid-template-columns:1fr;
        gap:22px;
        margin:20px 0 35px;
    }

    .asso-hero-logo{
        justify-content:center;
    }

    .asso-hero-logo img{
        width:160px;
        height:160px;
        padding:12px;
        border-radius:16px;
    }

    .asso-hero-content h1{
        font-size:1.7rem;
        line-height:1.2;
        margin-bottom:16px;
    }

    .asso-hero-causes,
    .asso-hero-territoires{
        gap:8px;
        margin-bottom:14px;
    }

    .territoire-badge{
        padding:6px 12px;
        font-size:.82rem;
    }

    .asso-date{
        margin-bottom:16px;
    }

    .asso-resume{
        max-width:100%;
        line-height:1.7;
        margin-bottom:22px;
    }

    /* Boutons : pleine largeur, faciles à toucher */
    .asso-actions{
        float:none;
        width:100%;
        margin:0 0 22px;
    }

    .btn-site,
    .btn-don{
        box-sizing:border-box;
        width:100%;
        min-height:48px;
        padding:12px 18px;
        margin-top:0;
    }

    /* Cartes d'informations : une par ligne */
    .association-infos{
        grid-template-columns:1fr;
        gap:14px;
        margin:35px 0 30px;
    }

    .info-card{
        padding:18px;
        border-radius:16px;
    }

    /* Présentation puis photo, l'une sous l'autre */
    .asso-contenu{
        grid-template-columns:1fr;
        gap:24px;
        margin:32px 0;
    }

    .asso-presentation h2{
        margin-bottom:16px;
    }

    .asso-photo img{
        height:auto;
        aspect-ratio:4 / 3;
    }

    .asso-media,
    .asso-video{
        margin:32px auto;
    }

    .asso-media iframe,
    .asso-media img,
    .asso-video iframe{
        border-radius:12px;
    }

    #association-map{
        height:260px;
        margin-top:28px;
        border-radius:14px;
    }
}


/*--------------------------------------------------------------
# Écrans tactiles : pas d'effet de survol qui "colle" après un appui
--------------------------------------------------------------*/

@media (hover:none){

    .info-card:hover,
    .btn-site:hover,
    .btn-don:hover{
        transform:none;
    }

    .asso-photo:hover img{
        transform:none;
        box-shadow:0 10px 35px rgba(0,0,0,.12);
    }
}