html
{
	height: 100%;
	margin:0;
	padding:0;
}

body
{
	width :100% ;
	height: 100%;
	margin: 0;
	padding: 0;
}

/*texte mise en forme*/

h1 
{
   font-size: 5vw;
   text-align:left;
}

p.propos:first-letter {
  color: red;
  font-weight: bold;
}

P.propos
{
    font-size:2vw;
    text-align:left;
}

#texte_marge /*Haut Droite Bas Gauche*/
{
    margin:0 10px 0 10px;
    margin-top:0;
    overflow:hidden;
}

P.accueil
{
    font-size:2vw;
    text-align:justify;
}

/*tableaux */
td 
{
   text-align:center; /* Aligner le texte horizontalement */
}

tr
{
  text-align:center;  
}

.fa_custom:link 
{
color: black;
}

.fa_custom:visited 
{
color: grey;
}

.fa_custom:hover 
{
color: red;
}

.fa_custom:active 
{
color: orange;
}

 img 
{
	width: 100%;
	height: auto;
}

.full-size
{
    margin-left: -20px;
    margin-right: -20px;
    width: 100%;
}

#global
{
	width :100% ;
	margin :auto ;
	padding :25px ;
}

header
{
	width :100% ;
}

#menu-gauche
{
	width :100% ;
	float :left ;
}


#contenu
{
	width :100% ;
	float :left ;
}

footer
{
	width :100%;
	height:30%;
}


/*TABLETTES*/

@media(min-width: 768px) and (max-width: 1388px)

{

#global
{
	width :100% ;
	padding :0px ;
}

#menu-gauche
{
	width :100% ;           

}

#contenu
{
	width :100% ;
}

footer
{
  	width :100%;
  	height:30%;
}

p.propos:first-letter {
  color: red;
  font-weight: bold;
}

P.propos
{
    font-size:3vw;
    text-align:left;
}

P.accueil
{
    font-size:3vw;
    text-align:justify;
}

}

/*SMARTPHONES*/

@media(max-width: 767px)

{ 

#global
{
	width :100% ;
	padding :0px ;
}

#menu-gauche
{
    width :100% ;
}

#contenu
{
    width :100% ;
}

footer
{
   	width :100%;
	height:30%;
}

p.propos:first-letter {
  color: red;
  font-weight: bold;
}

P.propos
{
    font-size:4vw;
    text-align:left;
}


P.accueil
{
    font-size:4vw;
    text-align:justify;
}

#copyright
{
    font-size: smaller;
    color:black;
    font-family:verdana;
}


#conteneur
{
    display: flex;
    justify-content: space-around;
}

/* Bootstrap carousel Image */
.carousel-page
{
width:100%;
height:auto;
border:10px solid black;
background-color:#5f666d;
color:white;
}

#heure_date
{
  float:right;
  color: white;
  vertical-align:middle;
  line-height: 50px;
}

/*horloge ajax*/
#result
{
 font-family:verdana;
 font-weight:bold;
 color:red;
}



/*Promotion Album*/


/* --- Style Principal du Conteneur --- */
.album-promotion-container {
    display: flex;
    flex-wrap: wrap; /* Permet le passage à la ligne sur mobile */
    align-items: center;
    max-width: 1100px;
    margin: 40px auto; /* Centrage et espacement */
    padding: 20px;
    background-color: #f4f4f4; /* Fond léger pour démarquer la section */
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* --- Colonne de l'Image (Gauche) --- */
.album-content-left {
    flex: 1; /* Prend l'espace disponible */
    min-width: 300px; /* Taille minimale sur desktop */
    text-align: center;
}

.album-cover {
    width: 100%;
    max-width: 350px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

/* --- Colonne du Texte (Droite) --- */
.album-content-right {
    flex: 2; /* Prend deux fois plus d'espace que la gauche */
    padding: 20px 40px;
}

/* --- Styles du Texte --- */
.album-title {
    color: #333;
    font-size: 2.2em;
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: 700;
}

.album-description {
    color: #555;
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 15px;
}

.bold-text {
    font-weight: 600;
    color: #1DB954; /* Couleur Spotify */
}

/* --- Style du Bouton Spotify (CTA) --- */
.spotify-cta-button {
    display: inline-flex;
    align-items: center;
    margin-top: 25px;
    padding: 15px 30px;
    background-color: #1DB954; /* Vert Spotify */
    color: white;
    text-decoration: none;
    font-size: 1.2em;
    font-weight: 700;
    border-radius: 50px; /* Bouton arrondi */
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 10px rgba(29, 185, 84, 0.4);
}

.spotify-cta-button:hover {
    background-color: #1ed760; /* Vert un peu plus clair au survol */
}

.spotify-cta-button i {
    margin-right: 10px;
    font-size: 1.5em;
}

/* --- Texte Alternatives --- */
.alt-streaming-text {
    margin-top: 15px;
    font-size: 0.9em;
    color: #777;
}

/* --- MEDIA QUERY (Responsivité pour les petits écrans) --- */
@media (max-width: 768px) {
    .album-promotion-container {
        padding: 15px;
    }

    .album-content-left,
    .album-content-right {
        min-width: 100%; /* Les colonnes prennent toute la largeur */
        padding: 0; /* Suppression du padding latéral sur mobile */
        text-align: center; /* Centrage du texte sur mobile */
    }

    .album-content-right {
        margin-top: 20px;
    }

    .album-title {
        font-size: 1.8em;
    }
}