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

   CUSTOM.CSS - Faites Entrer l'Accusée

   Projet : Cadeau anniversaire 40 ans Bruna

   Thème  : Faites entrer l'accusé (émission TV)

   Palette: Rouge #cc0000 / Jaune #f5c518 / Noir #0d0d0d

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





/* === BODY & GENERAL === */



body {

    background-color: #0d0d0d;

}



main {

    background-color: #0d0d0d;

}





/* === SLIDER / BG-CAPTION === */



.bg-caption {

    background-color: rgba(0, 0, 0, 0.75);

    border-left: 5px solid #cc0000;

    padding: 20px 30px;

}



.bg-caption h1 {

    font-family: "Oswald", sans-serif;

    color: #f5c518 !important;

    text-transform: uppercase;

    letter-spacing: 4px;

    font-size: 2.8rem;

}



.bg-caption p {

    font-family: "Open Sans", sans-serif;

    color: #ffffff;

    font-size: 1.1rem;

    letter-spacing: 2px;

    text-transform: uppercase;

}





/* === NAV === */



nav#haut a {

    color: #ffffff !important;

    text-transform: uppercase;

    letter-spacing: 2px;

    font-family: "Oswald", sans-serif;

}



nav#haut a:hover {

    color: #f5c518 !important;

}





/* === FOOTER === */



footer {

    border-top: 3px solid #f5c518;

}



footer p {

    color: #ffffff !important;

    font-size: 12px;

    letter-spacing: 2px;

    text-transform: uppercase;

}





/* === SECTION 1 - Présentation / intro === */



#section-1 {

    background-color: #111111;

    border-top: 3px solid #cc0000;

    border-bottom: 1px solid #222222;

    padding: 60px 0;

}



#section-1 .card {

    background-color: #0f0f0f;

    border: 1px solid #2a2a2a;

    border-left: 4px solid #cc0000;

    color: #d4c9a8;

}



#section-1 .fa-4x {

    background-color: #cc0000;

    color: #ffffff;

    padding: 0.4em;

    border-radius: 0;

}



#section-1 h3 {

    color: #f5c518 !important;

    text-transform: uppercase;

    letter-spacing: 1px;

}





/* === SECTION 2 - Instructions / étapes === */



#section-2 {

    background-color: #0d0d0d;

    border-bottom: 1px solid #1a1a1a;

    padding: 60px 0;

}



#section-2 .card {

    background-color: #111111;

    border: 1px solid #222222;

    border-top: 3px solid #f5c518;

    color: #d4c9a8;

}



#section-2 .badge.bg-primary {

    background-color: #cc0000 !important;

    color: #ffffff;

    font-family: "Oswald", sans-serif;

    letter-spacing: 1px;

    border-radius: 0;

}



#section-2 h3 {

    color: #f5c518 !important;

    text-transform: uppercase;

}



#section-2 .fa-4x {

    color: #cc0000;

}





/* === SECTION 3 - CTA / Avertissement === */



#section-3 {

    background-color: #111111;

    border-top: 3px solid #f5c518;

    padding: 60px 0;

}



#section-3 .card {

    background-color: #0a0a0a;

    border: 2px solid #cc0000;

    color: #d4c9a8;

}



#section-3 .alert-primary {

    background-color: #0f0f0f;

    border-left: 4px solid #f5c518 !important;

    border-top: none;

    border-right: none;

    border-bottom: none;

    color: #a89f7a;

    border-radius: 0;

}



#section-3 h3 {

    color: #f5c518 !important;

}

#section-3 h4 {

    color: #cc0000 !important;

}



/* === ÉLÉMENTS VISUELS THÉMATIQUES === */



.fea-stamp-inline {

    display: inline-block;

    border: 2px solid #cc0000;

    color: #cc0000;

    font-family: "Oswald", sans-serif;

    font-size: 10px;

    letter-spacing: 3px;

    padding: 4px 12px;

    text-transform: uppercase;

}



.fea-label-rouge {

    display: inline-block;

    background-color: #cc0000;

    color: #ffffff;

    font-family: "Oswald", sans-serif;

    font-size: 10px;

    letter-spacing: 3px;

    text-transform: uppercase;

    padding: 3px 10px;

    border-radius: 0;

}



.fea-label-jaune {

    display: inline-block;

    background-color: #f5c518;

    color: #0d0d0d;

    font-family: "Oswald", sans-serif;

    font-size: 10px;

    letter-spacing: 3px;

    text-transform: uppercase;

    padding: 3px 10px;

    border-radius: 0;

}



.fea-separateur {

    border: none;

    border-top: 1px solid #222222;

    margin: 30px 0;

}



.fea-text-jaune {

    color: #f5c518 !important;

}



.fea-text-rouge {

    color: #cc0000 !important;

}





/* === RESPONSIVE === */



@media (max-width: 768px) {

    .bg-caption h1 {

        font-size: 1.8rem;

    }



    #section-1,

    #section-2,

    #section-3 {

        padding: 40px 0;

    }



    #section-1 .card,

    #section-2 .card,

    #section-3 .card {

        margin: 0.5rem 0 !important;

    }

}