@charset "utf-8";

/* GENERAL */

body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
}

/* BANDEAUX */

.bandeau-bleu{
    height:30px;
    background:#8EBBDD;
}

.bandeau-orange{
    height:80px;
    background:#F4B078;
}

/* LOGO */

.logo{
    text-align:center;
    margin-top:20px;
}

.logo img{
    width:150px;
    height:auto;
}

/* MENU */

.menu{
    text-align:center;
    margin-top:20px;
}

.menu a{
    text-decoration:none;
    color:#F28C40;
    font-size:22px;
    margin:0 8px;
    transition:0.3s;
}

.menu a:hover{
    color:#1F78BD;
}

.menu a.active{
    color:#1F78BD;
}

.menu a.active::before{
    content:"► ";
}

/* ACCUEIL */

.contenu{
    max-width:900px;
    margin:auto;
    text-align:center;
    padding:50px 20px;
}

.contenu h1{
    color:#1F78BD;
    margin-bottom:25px;
}

.texte-presentation{
    max-width:800px;
    margin:0 auto 25px auto;
    font-size:18px;
    line-height:1.8;
    color:#444;
    text-align:center;
}

.image-accueil{
    width:100%;
    max-width:700px;
    height:auto;
    border-radius:10px;
    margin-bottom:120px;
}

/* PAGES ACTIVITES */

.page-activite{
    max-width:800px;
    margin:0 auto;
    padding:60px 20px 100px 20px;
    text-align:center;
}

.page-activite h1{
    color:#1F78BD;
    font-size:34px;
    margin-bottom:25px;
}

.page-activite p{
    max-width:650px;
    margin:0 auto 20px auto;
    font-size:18px;
    line-height:1.8;
    color:#333;
}

.logo-page{
    max-width:220px;
    height:auto;
    margin-bottom:30px;
}

.logo-coupdepouce{
    max-width:380px;
}

.image-activite{
    display:block;
    max-width:500px;
    width:100%;
    height:auto;
    margin:40px auto;
    border-radius:10px;
}

/* PRESENTATION */

.presentation{
    max-width:900px;
    margin:0 auto;
    padding:60px 20px 90px 20px;
    text-align:center;
}

.presentation h1{
    color:#1F78BD;
    font-size:36px;
    margin-bottom:30px;
}

.presentation p{
    max-width:750px;
    margin:0 auto 20px auto;
    font-size:18px;
    line-height:1.8;
    color:#333;
}

/* CARTES ACTIVITES */

.cartes-activites{
    display:flex;
    justify-content:center;
    gap:25px;
    flex-wrap:wrap;
    margin-top:50px;
}

.carte{
    width:250px;
    padding:25px;
    background:#f3f3f3;
    border-radius:12px;
    text-decoration:none;
    color:#333;
    transition:0.3s;
}

.carte:hover{
    transform:translateY(-5px);
    background:#e9f3fb;
}

.carte img{
    height:90px;
    width:auto;
    margin-bottom:15px;
}

.carte h2{
    color:#1F78BD;
    font-size:20px;
    margin-bottom:10px;
}

.carte p{
    font-size:15px;
    line-height:1.5;
}

/* INFOS PRATIQUES */

.infos-pratiques{
    max-width:600px;
    margin:40px auto 0 auto;
    padding:25px;
    background:#f3f3f3;
    border-radius:12px;
    text-align:center;
}

.infos-pratiques h2{
    color:#1F78BD;
    margin-bottom:20px;
}

.infos-pratiques p{
    margin-bottom:15px;
    font-size:17px;
    line-height:1.6;
}

.infos-pratiques a{
    color:#1F78BD;
    text-decoration:none;
    font-weight:bold;
}

.infos-pratiques a:hover{
    text-decoration:underline;
}

/* GALERIES */

.titre-carte,
.titre-galerie{
    margin-top:60px;
    color:#1F78BD;
    font-size:30px;
}

.galerie-cartes{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:30px;
    max-width:1000px;
    margin:30px auto 0 auto;
}

.galerie-meubles{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:25px;
    margin-top:30px;
}

.meuble{
    background:#f3f3f3;
    padding:20px;
    border-radius:12px;
    text-align:center;
}

.meuble img{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:10px;
}

.meuble h3{
    color:#1F78BD;
    margin-top:15px;
}

.meuble p{
    font-size:16px;
}

.meuble a{
    display:inline-block;
    margin-top:10px;
    padding:10px 18px;
    background:#1F78BD;
    color:white;
    text-decoration:none;
    border-radius:20px;
}

.meuble a:hover{
    background:#F28C40;
}

/* BOUTONS SITE COMPLET */

.bouton-site{
    text-align:center;
    margin:40px 0;
}

.btn-site-complet,
.btn-site-cosy,
.btn-site-recyclart{
    display:inline-block;
    color:white;
    padding:15px 30px;
    border-radius:30px;
    text-decoration:none;
    font-weight:bold;
    font-size:18px;
    transition:0.3s ease;
}

.btn-site-complet{
    background:#f28c28;
}

.btn-site-complet:hover{
    background:#d9730d;
    transform:translateY(-3px);
}

.btn-site-cosy{
    background:#2B7DBC;
}

.btn-site-cosy:hover{
    background:#B87555;
    transform:translateY(-3px);
}

.btn-site-recyclart{
    background:#4F6F52;
}

.btn-site-recyclart:hover{
    background:#2F4F35;
    transform:translateY(-3px);
}

/* FOOTER */

footer{
    background:#ECECEC;
    text-align:center;
    padding:30px;
}

.logos-partenaires{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
    margin-bottom:20px;
}

.logos-partenaires img{
    height:70px;
    width:auto;
}

.logos-partenaires a img{
    transition:0.3s;
}

.logos-partenaires a:hover img{
    transform:scale(1.08);
}

.logos-financeurs{
    margin-bottom:15px;
}

.logos-financeurs img{
    max-width:350px;
    width:100%;
    height:auto;
}

footer p{
    color:#555;
    font-size:14px;
}

.projet-finance{
    max-width:900px;
    margin:20px auto 0 auto;
    font-size:13px;
    line-height:1.5;
    color:#555;
}

/* RETOUR HAUT */

.retour-haut{
    position:fixed;
    bottom:25px;
    right:25px;
    width:50px;
    height:50px;
    background:#1F78BD;
    color:white;
    text-decoration:none;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:28px;
    font-weight:bold;
    box-shadow:0 3px 10px rgba(0,0,0,0.3);
    transition:0.3s;
}

.retour-haut:hover{
    background:#F28C40;
    transform:scale(1.1);
}

/* RESPONSIVE */

@media (max-width:900px){

    .menu a{
        display:block;
        margin:10px 0;
    }

    .galerie-cartes,
    .galerie-meubles{
        grid-template-columns:1fr;
    }

    .page-activite,
    .presentation,
    .contenu{
        padding-left:15px;
        padding-right:15px;
    }
}

.cartes-simple{
    max-width:900px;
    margin:30px auto 0 auto;
    display:flex;
    flex-direction:column;
    gap:30px;
}

.cartes-simple img{
    width:100%;
    height:auto;
    display:block;
    border-radius:10px;
}



/* ==================================================
   CAPSULES VIDEOS
================================================== */

.section-capsules{
    width:100%;
    margin:35px 0 0;
    padding:0 20px 35px;
    background:#ffffff;
}


/* CONTENEUR */

.capsules-contenu{
    width:90%;
    max-width:980px;
    margin:0 auto;

    display:grid;
    grid-template-columns:38% 62%;

    background:#ffffff;

    border-top:4px solid #f47a20;

    box-shadow:0 4px 18px rgba(0,0,0,0.08);
}


/* ==================================================
   TEXTE
================================================== */

.capsule-texte{
    padding:40px 35px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    text-align:left;
}


.capsules-surtitre{
    margin-bottom:12px;

    color:#f47a20;

    font-size:11px;
    font-weight:bold;

    letter-spacing:2px;
}


.capsule-texte h2{
    margin-bottom:18px;

    color:#1471b9;

    font-size:28px;
    line-height:1.2;
}


.capsules-description{
    margin-bottom:25px;

    color:#555555;

    font-size:15px;
    line-height:1.6;
}


.capsule-texte h3{
    margin-bottom:8px;

    color:#1471b9;

    font-size:20px;
}


.capsule-description-personne{
    margin:0;

    color:#666666;

    font-size:14px;
    line-height:1.6;
}


/* ==================================================
   VIDEO
================================================== */

.capsule-video{
    display:flex;
    align-items:center;
    justify-content:center;

    background:#000000;

    overflow:hidden;
}


.capsule-video video{
    width:100%;
    height:100%;

    display:block;

    object-fit:contain;

    background:#000000;
}


/* ==================================================
   TABLETTE
================================================== */

@media (max-width:800px){

    .capsules-contenu{
        grid-template-columns:1fr;
    }

    .capsule-video{
        aspect-ratio:16 / 9;
    }

    .capsule-texte{
        padding:30px;
    }

}


/* ==================================================
   TELEPHONE
================================================== */

@media (max-width:500px){

    .section-capsules{
        padding:0 12px 25px;
    }

    .capsules-contenu{
        width:100%;
    }

    .capsule-texte{
        padding:25px 20px;
    }

    .capsule-texte h2{
        font-size:24px;
    }

    .capsules-description{
        font-size:14px;
    }

}

/* ==================================================
   CORRECTION DU GRAND ESPACE AVANT LES CAPSULES
================================================== */

.contenu{
    height:auto !important;
    min-height:0 !important;

    margin-bottom:0 !important;
    padding-bottom:0 !important;
}

.image-accueil{
    display:block;

    margin-bottom:0 !important;
}

.section-capsules{
    margin-top:25px !important;
    padding-top:0 !important;
}

/* ==================================================
   ALIGNEMENT IMAGE + CAPSULE
================================================== */

.image-accueil{
    display:block;
    width:90%;
    max-width:980px;
    height:auto;

    margin:0 auto;
}


/* Même largeur et même centrage que l'image */

.section-capsules{
    width:90%;
    max-width:980px;

    margin:20px auto 0 !important;
    padding:0 0 25px;

    background:#ffffff;
}


/* Le bloc intérieur prend toute la largeur disponible */

.capsules-contenu{
    width:100%;
    max-width:none;

    margin:0;

    display:grid;
    grid-template-columns:38% 62%;

    background:#ffffff;

    border-top:4px solid #f47a20;

    box-shadow:0 4px 18px rgba(0,0,0,0.08);
}