@charset "Utf-8";

body
{
font: 1.0em "Open Sans",Arial,sans-serif; 
margin:0; 
padding:0;
background-color: rgb(0, 0, 0);
}
/*BARRE DE NAVIGATION*/
div#nav-top nav 
{
display: flex;
align-items: center;
justify-content: center;
background-color: #00000070;
gap: 30px;
}
div#nav-top nav p 
{
display: flex;
align-items: center;
gap: 25px;
}
div#nav-top nav img
{
width:160px;
height:120px;
padding-right:150px;
}
div#nav-top nav p a 
{
display: inline-block;
padding: 25px 20px;
color: aliceblue;
}
div#header-top 
{
width: 100%;
background-image: url("img/banner-ayo-sound.png.png") ;
background-repeat:no-repeat;
text-align: center;
}
/*HAUT DE PAGE*/
header
{
box-sizing: border-box;
width: 1140px;
height: 300px;
margin:0 auto;
padding: 50px;
text-align: left;
}
header h1
{
font-family: 'Bangers&display', Times, serif;
font-size:5.5em;
text-transform: capitalize;
color: #fff;
}
/*SECTION*/
section
{
box-sizing: border-box;
width: 1140px;
margin: 0 auto;
padding: 25px;
background-color: rgb(0, 0, 0);
}
section h1 
{
text-align: center;
font-size: 2em;
margin-bottom: 45px;
color: #8f250c;
text-transform: uppercase;
font-family: Verdana, sans-serif;
}
section p 
{
text-align: center;
color: #e4e4e4;
font-size: 1.1em;
margin-bottom: 30px;
}
section h1 a 
{
color: #8f250c;  
text-decoration: none;
text-transform: uppercase;
}
section h1 a:hover 
{
color: #ffffffcc;       
}
section h3 
{
text-transform: capitalize;
text-align: center;
}
/* liens hypertextes vers d'autres pages */
section h4 
{
margin-top: 35px;
font-family: Verdana, sans-serif;
text-align: center;
}
section h4 a:link
{
color: #ffffff;       
}
section h4 a:visited 
{
color: #ffffff;       
}
section h4 a:hover 
{
color: #0b5d1e;       
}
/*PARTIE SUR LES ARTISTES */ 
/* contenue des cartes */
div#article-artistes
{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
}
/* carte entière cliquable */
div#article-artistes article a{
display: block;
text-decoration: none;
border-radius: 12px;
overflow: hidden;
transition: 0.5s ease;
color: #000000;
}
/* effet en survol sur les cartes */
div#article-artistes article a:hover{
  transform: translateY(-8px);
}
/* carte */
div#article-artistes article
{
width: 30%;
max-width: 250px;
background-color: #e4e4e4;
border-radius: 12px;
overflow: hidden;
}
/* image dans la carte*/
div#article-artistes article img
{
width: 100%;
height: 260px;
object-fit: cover;
}
/* titre en survol */
div#article-artistes article a:hover h3
{
color: #0b5d1e
}
/*PARTIE SUR LES ARTCILES DE NEWS*/
div#latestNews
{
display: flex;
width:950px;
margin: 0 auto;
}
div#latestNews div
{
width: 475px;
padding: 20px;
box-sizing: border-box;
}
div#latestNews div h3
{
width: 430px;
text-align: center;
margin-top: -10px;
color: #e4e4e4;
}
div#latestNews div p
{
text-align: left;
width: 430px;
color: #e4e4e4;
}
div#latestNews div figure
{
display: inline-block;
background-color: rgb(253, 255, 255);
border-radius: 12px;
}
div#latestNews p a 
{
color: #771818;
}
/* contenue des 2 vignettes */
div#vignettes {
display: flex;
}
/* style des vignettes  */
div#vignettes figure 
{
background-color: rgb(255, 255, 255);
border-radius: 12px;
padding: 6px;
text-align: center;
}
div#vignettes figure img 
{
width: 140px;
height: 180px;
object-fit: cover;
border-radius: 10px;
}

/*SLOGAN*/
blockquote 
{
box-sizing: border-box;
width: 950px;
margin: 60px auto;
padding: 20px 40px;
color: #ffffff;
font-size: 1.7em;
font-weight: bold;
font-style: italic;
text-align: center;
border-top: 2px solid #053b06;
border-bottom: 2px solid #053b06;
background: rgba(204, 158, 6, 0);
}
/* SECTION ALBUMS */
section#albums
{
background-color: #8f250c;
padding: 50px 0;
text-align: center;
color: white;
}
/* Titre "ALBUMS À ECOUTER" */
section#albums h1 {
text-align: center;
color: white;
font-size: 40px;
font-weight: bold;
letter-spacing: 3px;
margin: 0;
margin-bottom: 80px;
}
/* Conteneur des figures*/
section#albums div:nth-child(2) {
text-align: center;             
margin-bottom: 35px;
}
/* album */
section#albums figure {
display: inline-block;          
margin: 0 40px;                 
text-align: center;
}
/* Images */
section#albums figure img {
width: 220px;
height: 220px;
object-fit: cover;
border-radius: 15px;
}
/* Image centrale plus grande */
section#albums figure:nth-child(2) img {
width: 380px;
height: 380px;
}
/* Titres des albums */
section#albums figure figcaption {
margin-top: 12px;
color: white;
font-size: 14px;
}
/* Conteneur des petits points */
section#albums div:nth-child(3) {
text-align: center;
}
/* Les 3 points */
section#albums div:nth-child(3) span {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 5px;
border-radius: 50%;                 
background-color: rgba(114, 107, 107, 0.6);
}
/* Point central */
section#albums div:nth-child(3) span:nth-child(2) 
{
background-color: white;
}

/*PIED DE PAGE*/
footer 
{
width:1140px;
margin: 0 auto;
background-color: #000;
padding: 40px 20px;
text-align: center;
border-top: 2px solid;
}
/* Logo dans le footer */
footer figure 
{
margin: 15px auto;
text-align: center;
}
footer figure img 
{
width: 120px;
height: auto; 
display: block;
margin: 0 auto;
}
/* Adresse */
footer address 
{
color: #fff;
font-style: normal;
line-height: 1.6em;
}
/* Liens du footer */
footer a 
{
color: #fff;
text-decoration: none;
}
footer p.fleche
{
text-align: right;
}
/* note IA dans le footer */
footer p.note-ia 
{
font-size: 0.8em;
color: #888888;
font-style: italic;
margin-top: 10px;
}
footer nav.footer-liens
{
margin-top:45px;
}
.footer-liens a:hover 
{
text-decoration: underline;
}
/* Copyright */
footer .copyright 
{
color: #f5efef;
font-size: 0.85em;
opacity: 0.75;
margin-top: 10px;
}

/* PAGE INTERNET ARTISTES*/
#fiche-artiste 
{
width: 1140px;
margin: 40px auto;
padding: 30px;
background: rgba(255,255,255,0.04);
border-top: 2px solid #8f250c;
border-bottom: 2px solid #8f250c;
}
/* Titre */
#fiche-artiste h1 
{
text-align:center;
font-size: 2.5em;
color:#8f250c;
margin-bottom: 25px;
text-transform: uppercase;
letter-spacing: 2px;
}
/* Image */
#fiche-artiste img 
{
width: 350px;
height: 350px;
object-fit: cover;
display: block;
margin: 20px auto;
border-radius: 18px;
box-shadow: 0px 0px 14px rgba(255, 255, 255, 0.126);
}
/* Sous-titres */
#fiche-artiste h2 
{
color:white;
border-bottom: 2px solid #8f250c;
width:max-content;
margin: 20px auto 10px;
padding-bottom: 4px;
font-size:1.4em;
}
/* Paragraphes */
#fiche-artiste p 
{
color:#cfcfcf;
font-size:1.1em;
line-height:1.6em;
text-align:center;
margin-bottom:18px;
width:80%;
margin-left:auto;
margin-right:auto;
}

/*PAGE INTERNET ABOUT AYO  */
section#about article 
{
max-width: 900px;
margin: 0 auto;
}
section#about h2 
{
color: #ffffff;
font-size: 1.4em;
margin-top: 25px;
margin-bottom: 10px;
text-align: left;
border-bottom: 2px solid #8f250c;
padding-bottom: 4px;
}

section#about p 
{
text-align: left;
font-size: 1em;
margin-bottom: 20px;
}
section#about ul 
{
text-align: left;
color: #e4e4e4;
font-size: 1em;
margin-bottom: 10px;
padding-left: 40px;
}
section#about li 
{
margin-bottom: 6px;
}

/* Galerie d’images */
section#about-photos 
{
width: 1140px;
margin: 20px auto 60px auto;
text-align: center;
background-color: #000;
}
section#about-photos h2 
{
color: #8f250c;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 1.5em;
}
section#about-photos figure 

{
display: inline-block;
margin: 8px;
}
section#about-photos img 
{
width: 180px;
height: 220px;
object-fit: cover;
border-radius: 10px;
border: 2px solid rgba(255,255,255,0.25);
transition: 0.3s ease;
}
section#about-photos img:hover 
{
transform: scale(1.06);
}

/*PAGE INTERNET NEWS */
#news h1 
{
text-align:center;
font-size:2em;
margin-bottom:30px;
}
#news article 
{
display:flex;
gap:25px;
align-items:flex-start;
background-color:#111;
border-radius:12px;
padding:20px;
margin-bottom:25px;
}
#news article figure img 
{
width:230px;
height:160px;
object-fit:cover;
border-radius:10px;
}
#news article figure figcaption 
{
text-align:center;
color:#ccc;
margin-top:6px;
font-size:0.9em;
}
#news article h2 
{
color:#fff;
margin:0 0 8px 0;
}
#news article p 
{
text-align:left;
color:#e4e4e4;
font-size:1em;
margin-bottom:8px;
}

/*PAGE PRESTATIONS*/
/* Section liste des prestations */
section#prestations 
{
margin-top: 40px;
}
section#prestations article 
{
background-color: #111111;
border-radius: 12px;
padding: 20px;
margin-bottom: 25px;
}
section#prestations h2 
{
color: #ffffff;
margin-bottom: 8px;
text-align: left;
}
section#prestations p 
{
text-align: left;
font-size: 1em;
margin-bottom: 10px;
}
section#prestations ul 
{
text-align: left;
color: #e4e4e4;
padding-left: 25px;
margin: 0;
}
section#prestations li 
{
margin-bottom: 5px;
}

/* FORMULAIRE */
section#form-prestations 
{
margin-top: 40px;
}
section#form-prestations h1 
{
margin-bottom: 30px;
}
section#form-prestations form 
{
max-width: 600px;
margin: 0 auto;
text-align: left;
color: #e4e4e4;
}
section#form-prestations label 
{
color: #ffffff;
font-size: 0.95em;
}
section#form-prestations input[type="text"],
section#form-prestations input[type="email"],
section#form-prestations input[type="tel"],
section#form-prestations input[type="date"],
section#form-prestations select,
section#form-prestations textarea 
{
width: 100%;
box-sizing: border-box;
padding: 8px;
margin-top: 4px;
margin-bottom: 12px;
background-color: #111111;
border: 1px solid #444444;
color: #ffffff;
border-radius: 6px;
font: 1em Verdana, Arial, sans-serif;
}

/*Image artiste */
#form-prestations .zone-photo 
{
text-align: center;
margin-bottom: 15px;
}
#form-prestations #photo-artiste 
{
width: 200px;
height: 250px;
object-fit: cover;
border-radius: 12px;
}
/* Choix artistes et options*/
#form-prestations .bloc-choix 
{
text-align: left;
line-height: 1.8em;
margin-bottom: 15px;
}
#form-prestations input[type="radio"],
#form-prestations input[type="checkbox"] 
{
margin-right: 6px;
}
#form-prestations span {
color: #8f250c;
font-weight: bold;
margin-left: 6px;
}

/* Résultats (Montant / Taxes / Total) */
#form-prestations .resultats {
text-align: left;
}
#form-prestations #lblMontant,
#form-prestations #lblTPS,
#form-prestations #lblTVQ,
#form-prestations #lblTotal {
font-weight: bold;
color: #8f250c;
}
/* Boutons */
#form-prestations input[type="button"],
#form-prestations input[type="submit"],
#form-prestations input[type="reset"] 
{
background-color: #8f250c;
color: #ffffff;
border: none;
padding: 10px 18px;
margin-right: 10px;
border-radius: 6px;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 1px;
}
#form-prestations input[type="reset"] {
background-color: #555555;
}
#form-prestations input[type="button"]:hover,
#form-prestations input[type="submit"]:hover,
#form-prestations input[type="reset"]:hover {
background-color: #ffffff;
color: #000000;
}