/* ======================================================
   C2F IMMOBILIER
   ARTICLES - ACTUALITES & CONSEILS
====================================================== */


/* ======================================================
   SORTIE DU CONTENEUR ASTRA
====================================================== */

.article-c2f{
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);

    color:#2d2d2d;
}

.article-c2f-container{
    width:1200px;
    max-width:92%;
    margin:auto;
}


/* ======================================================
   HERO ARTICLE
====================================================== */

.article-c2f-hero{
    position:relative;

    min-height:700px;

    display:flex;
    align-items:center;

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}


/* Si aucune image n'est définie */

.article-c2f-hero.sans-image{
    background:#393633;
}


/* ======================================================
   VOILE HERO
====================================================== */

.article-c2f-hero-overlay{
    position:absolute;
    inset:0;

    background:linear-gradient(
        90deg,
        rgba(0,0,0,.72) 0%,
        rgba(0,0,0,.55) 38%,
        rgba(0,0,0,.22) 72%,
        rgba(0,0,0,.05) 100%
    );
}


/* ======================================================
   CONTENU HERO
====================================================== */

.article-c2f-hero-contenu{
    position:relative;
    z-index:2;

    padding:80px 0;
}


/* Catégorie */

.article-c2f-categorie{
    display:block;

    margin-bottom:20px;

    color:#d8b37a;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:18px;
    font-weight:500;
}


/* Titre */

.article-c2f-hero h1{
    max-width:1000px;

    margin:0 0 28px;

    color:#fff;

    font-size:68px;
    line-height:1.08;

    text-shadow:
        0 2px 8px rgba(0,0,0,.25);
}


/* Date */

.article-c2f-meta{
    color:rgba(255,255,255,.90);

    font-size:17px;
}


/* ======================================================
   CORPS ARTICLE
====================================================== */

.article-c2f-corps{
    padding:90px 0 70px;

    background:#fff;
}


/*
 * On ne fait volontairement pas courir le texte
 * sur les 1200 px.
 * Une largeur d'environ 800 px est beaucoup plus
 * confortable pour la lecture d'un article.
 */

.article-c2f-layout{
    width:820px;
    max-width:100%;

    margin:auto;
}


/* ======================================================
   TYPOGRAPHIE ARTICLE
====================================================== */

.article-c2f-contenu{
    color:#444;

    font-size:19px;
    line-height:1.8;
}

.article-c2f-contenu p{
    margin:0 0 25px;
}

.article-c2f-contenu h2{
    margin:60px 0 25px;

    color:#222;

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

.article-c2f-contenu h3{
    margin:42px 0 20px;

    color:#222;

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

.article-c2f-contenu h4{
    margin:35px 0 18px;

    color:#333;

    font-size:22px;
}


/* ======================================================
   LIENS
====================================================== */

.article-c2f-contenu a{
    color:#b8894d;

    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:3px;
}

.article-c2f-contenu a:hover{
    color:#946d3c;
}


/* ======================================================
   LISTES
====================================================== */

.article-c2f-contenu ul,
.article-c2f-contenu ol{
    margin:10px 0 28px;

    padding-left:28px;
}

.article-c2f-contenu li{
    margin-bottom:10px;
}


/* ======================================================
   CITATIONS
====================================================== */

.article-c2f-contenu blockquote{
    margin:40px 0;

    padding:28px 32px;

    background:#f6f1e8;

    border-left:5px solid #c79b5f;

    color:#444;

    font-size:20px;
    line-height:1.65;
}

.article-c2f-contenu blockquote p:last-child{
    margin-bottom:0;
}


/* ======================================================
   IMAGES DANS L'ARTICLE
====================================================== */

.article-c2f-contenu img{
    display:block;

    max-width:100%;
    height:auto;

    margin:40px auto;

    border-radius:10px;
}


/* ======================================================
   LEGENDES
====================================================== */

.article-c2f-contenu figcaption{
    margin-top:-25px;
    margin-bottom:35px;

    text-align:center;

    color:#888;

    font-size:14px;
}


/* ======================================================
   TABLEAUX
====================================================== */

.article-c2f-contenu table{
    width:100%;

    margin:35px 0;

    border-collapse:collapse;

    font-size:16px;
}

.article-c2f-contenu th{
    padding:15px;

    background:#c79b5f;

    color:#fff;

    text-align:left;
}

.article-c2f-contenu td{
    padding:15px;

    border:1px solid #e5e0d8;
}

.article-c2f-contenu tr:nth-child(even) td{
    background:#faf8f4;
}


/* ======================================================
   SEPARATEUR
====================================================== */

.article-c2f-contenu hr{
    margin:50px 0;

    border:0;
    border-top:1px solid #e5e0d8;
}


/* ======================================================
   RETOUR AUX ACTUALITES
====================================================== */

.article-c2f-retour{
    padding:0 0 70px;

    background:#fff;
}

.article-c2f-retour .article-c2f-container{
    width:820px;
}

.article-c2f-retour-lien{
    display:inline-block;

    color:#b8894d;

    font-size:17px;
    font-weight:600;

    text-decoration:none;

    transition:.25s;
}

.article-c2f-retour-lien:hover{
    color:#946d3c;

    transform:translateX(-4px);
}


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

.article-c2f-cta{
    padding:90px 0;

    background:#f6f1e8;
}

.article-c2f-cta-contenu{
    width:850px;
    max-width:100%;

    margin:auto;

    text-align:center;
}

.article-c2f-label{
    display:block;

    margin-bottom:12px;

    color:#c79b5f;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:15px;
    font-weight:700;
}

.article-c2f-cta h2{
    margin:0 0 25px;

    color:#222;

    font-size:44px;
    line-height:1.15;
}

.article-c2f-cta p{
    max-width:720px;

    margin:0 auto 35px;

    color:#666;

    font-size:18px;
    line-height:1.7;
}


/* ======================================================
   BOUTON CTA
====================================================== */

.article-c2f-bouton{
    display:inline-block;

    padding:18px 40px;

    background:#c79b5f;

    border:2px solid #c79b5f;
    border-radius:6px;

    color:#fff !important;

    font-size:18px;
    font-weight:600;

    text-decoration:none;

    transition:.25s;
}

.article-c2f-bouton:hover{
    background:#b78b4d;

    border-color:#b78b4d;

    color:#fff !important;
}


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

@media (max-width:900px){

    .article-c2f{
        width:100%;

        margin-left:0;
        margin-right:0;

        overflow-x:hidden;
    }

    .article-c2f-container{
        width:auto;
        max-width:none;

        margin:0;

        padding-left:28px;
        padding-right:28px;
    }


    /* HERO */

    .article-c2f-hero{
        min-height:620px;
    }

    .article-c2f-hero-contenu{
        padding-top:70px;
        padding-bottom:70px;
    }

    .article-c2f-categorie{
        font-size:15px;
    }

    .article-c2f-hero h1{
        max-width:850px;

        font-size:54px;
    }


    /* ARTICLE */

    .article-c2f-layout{
        width:auto;
        max-width:820px;
    }

    .article-c2f-retour .article-c2f-container{
        width:auto;
    }

}


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

@media (max-width:600px){

    html,
    body{
        overflow-x:hidden;
    }


    /* HERO */

    .article-c2f-hero{
        min-height:480px;

        background-position:center;
    }

    .article-c2f-container{
        padding-left:22px;
        padding-right:22px;
    }

    .article-c2f-hero-contenu{
        padding-top:55px;
        padding-bottom:55px;
    }

    .article-c2f-categorie{
        margin-bottom:18px;

        font-size:13px;
        line-height:1.4;

        letter-spacing:1.5px;
    }

    .article-c2f-hero h1{
        margin-bottom:22px;

        font-size:38px;
        line-height:1.1;

        overflow-wrap:normal;
        word-break:normal;
        hyphens:none;
    }

    .article-c2f-meta{
        font-size:15px;
    }


    /* ARTICLE */

    .article-c2f-corps{
        padding:55px 0 45px;
    }

    .article-c2f-contenu{
        font-size:17px;
        line-height:1.7;
    }

    .article-c2f-contenu p{
        margin-bottom:22px;
    }

    .article-c2f-contenu h2{
        margin-top:45px;
        margin-bottom:20px;

        font-size:31px;
    }

    .article-c2f-contenu h3{
        margin-top:35px;

        font-size:25px;
    }

    .article-c2f-contenu blockquote{
        margin:30px 0;

        padding:22px;

        font-size:18px;
    }


    /* TABLEAU */

    .article-c2f-contenu table{
        display:block;

        overflow-x:auto;

        font-size:14px;
    }


    /* RETOUR */

    .article-c2f-retour{
        padding-bottom:50px;
    }


    /* CTA */

    .article-c2f-cta{
        padding:60px 0;
    }

    .article-c2f-cta h2{
        font-size:34px;
    }

    .article-c2f-cta p{
        font-size:16px;
        line-height:1.6;
    }

    .article-c2f-bouton{
        display:block;

        width:100%;

        box-sizing:border-box;

        padding:17px 15px;

        font-size:16px;
    }

}