*{
    box-sizing:border-box;
}

body {
    font-family:system-ui,Arial,sans-serif;
    margin: 0 0 20px 0;
    padding:10px;
    background: #030105;
	color: #ffffff;
}

/* ===== CONTOUR FULL ===== */
.site-wrapper {
max-width: 1000px;
margin:0 auto;
border-radius:14px;
border: 1px solid #ffffff;
max-width: 1000px;
background:#010102;
}


a {
   color:#c9b6ff;
   text-decoration:underline;
}

a:hover {
   color:#ffffff;
   text-decoration:none;
}



/* ===== HEADER ===== */

header{
    position:relative;
    width:100%;
    max-width:1000px;
    margin:auto;
    overflow:hidden;
    border-top-left-radius:14px;
    border-top-right-radius:14px;
}

/* ===== IMAGE ===== */

.header-image{
    width:100%;
    height:auto;
    display:block;
    border-radius:14px 14px 0 0;
}


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

.header-texte{
    position:absolute;
    top:162px;
    left:80px;
    width:52%;
    color:#ffffff;
    text-align:left;
}

/* ===== TITRE ===== */

.header-mini-title{
    margin:0 0 8px 0;
    font-size:20px;
    font-weight:700;
    line-height:1.2;
}

/* ===== DESCRIPTION ===== */

.header-description{
    margin:0;
    font-size:16px;
    font-weight:500;
    line-height:1.45;
}


/* ===== CONTENEUR MENU ===== */

.header-inner{
    width:100%;
    display:flex;
    justify-content:center;
    margin:10px 0 20px;
}

/* ===== NAVIGATION ===== */

.header-inner nav{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
    width:auto;
    padding:0 20px;
}

/* ===== BOUTONS ===== */

.nav-link{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 22px;
    color:#ffffff;
    text-decoration:none;
    font-size:15px;
    font-weight:600;
    border-radius:16px;

    background:
    linear-gradient(
        145deg,
        rgba(120,70,220,0.35),
        rgba(20,10,35,0.82)
    );

    border:1px solid rgba(255,255,255,0.14);

    backdrop-filter:blur(10px);

    box-shadow:
    0 4px 18px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.08);

    transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    color 0.25s ease;
}

/* ===== HOVER ===== */

.nav-link:hover{

    color:#ffffff;

    transform:translateY(-2px);

    background:
    linear-gradient(
        145deg,
        rgba(145,95,255,0.55),
        rgba(30,12,50,0.92)
    );

    box-shadow:
    0 8px 24px rgba(0,0,0,0.45),
    0 0 18px rgba(170,120,255,0.35);
}

/* ===== PAGE ACTIVE ===== */

.nav-link.active{

    background:
    linear-gradient(
        145deg,
        rgba(170,120,255,0.70),
        rgba(55,20,90,0.95)
    );

    box-shadow:
    0 0 22px rgba(180,130,255,0.45);
}

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

.label-mobile{
    display:none;
}


/* ===== CONTOUR ENTRE HEADER & FOOTER ===== */
main {
	max-width: 1000px;
	margin: 0 auto 40px;
    padding: 0 8px 0;
	text-align:center;
}


/* ===== CONTENU PRINCIPAL ===== */


article {
	margin: 15px 0;
}

h1 {
	margin:0;
    font-size:19px;
    font-weight:700;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
}

h2 {
    padding-bottom:6px;
    margin:0;
    font-family: 'Montserrat', sans-serif;
    font-size:17px;
    font-weight:700;
	font-style:italic;
	border-bottom:1px solid rgba(255,255,255,0.10);
   }

h3 {
    padding: 0;
    margin: 0 auto 10px auto;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;      
    font-weight: 500;
    font-style: italic;
}


/* IMAGES BIO ETC... 16-9*/
/* IMAGES BIO ETC... 16-9 */

.illustrations{
    box-shadow:
    0 10px 35px rgba(0,0,0,0.35);
}

.photos-illustration{
    display:block;
    max-width:100%;
    height:auto;
    margin:0 auto;
    border-radius:20px;
}

.img-responsive {
	margin: 0 auto;
    display: block;
    max-width: 100%;
    height: auto;
}

/* BR uniquement sur PC */

.desktop-break{
display:inline;
}

/* BR uniquement sur smartphone */

.smartphone-break{
display:none;
}

@media screen and (max-width:768px){

.desktop-break{
display:none;
}

.smartphone-break{
display:inline;
}

}

/* ===== PAGE ACCUEIL ===== */


/* TEXTE */

.infos-article{
    margin:0 auto;
	padding:25px 0 15px;
}

.infos-article p{
    margin:6px 90px;
    font-size:14px;
    opacity:.85;
}

.article-section {
	margin:10px 0 18px;
	padding:18px;
	text-align:left;
	background:#1a102d;
    border-radius:18px;
	border:1px solid rgba(255,255,255,0.10);
}

.article-section p{
font-size:15px;
}

/** sections en bas de pages **/

.infos-after-articles {
	margin:20px 0 10px;
}

.infos-after-articles h2 {
	padding:0;
	border:0;
}

.infos-after-articles p{
    margin:6px 0;
	font-size:14px;
    opacity:.85;
}


/* ===== GROS BOUTON CHANSONS ===== */

.big-song-button-wrapper{
    margin:40px 0 20px;
}

/* BOUTON */

.big-song-button{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    padding:26px 24px;
    text-align:center;
    text-decoration:none;
    color:#ffffff;
    border-radius:22px;
    background:
    linear-gradient(
        145deg,
        rgba(120,70,220,0.35),
        rgba(20,10,35,0.82)
    );

    border:1px solid rgba(255,255,255,0.14);

    backdrop-filter:blur(10px);

    box-shadow:
    0 4px 18px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.08);

    transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

/* HOVER */

.big-song-button:hover{

    transform:translateY(-3px);

    background:
    linear-gradient(
        145deg,
        rgba(145,95,255,0.55),
        rgba(30,12,50,0.92)
    );

    box-shadow:
    0 8px 24px rgba(0,0,0,0.45),
    0 0 18px rgba(170,120,255,0.35);
}

/* TITRE */

.big-song-title{

    font-size:24px;

    font-weight:700;

    line-height:1.2;
}

/* TEXTE */

.big-song-text{

    font-size:15px;

    line-height:1.5;

    opacity:0.92;

    max-width:750px;
}





/* ===== FOOTER ===== */

.img-plateformes-musicales {
	  margin-top:100px;
	}
	
.img-plateformes-musicales img {
	  width:80%;
	}	
	


footer {
	padding: 20px 0;
	text-align:center;
    }

.credits-section p {
      margin:4px 0;
      font-size:12px;
      line-height:1.5;
      color:rgba(255,255,255,0.45);
    }
	
.footer-install-link{

padding-bottom:20px;

font-size:14px;

font-weight:600;
}	

/* ===== RESPONSIVE ===== */


/* ===== RESPONSIVE HEADER ===== */

@media screen and (max-width:768px){

    .header-texte{
        top:68px;
        left:28px;
        width:58%;
    }

    .header-mini-title{
        font-size:13px;
        margin-bottom:4px;
    }

    .header-description{
        font-size:10px;
        line-height:1.35;
    }
}


/* ===== RESPONSIVE GROS BOUTON CHANSONS ===== */

@media (max-width:768px){

    .big-song-button{

        padding:18px 26px;
        border-radius:16px;
    }

    .big-song-title{

        font-size:18px;
    }

    .big-song-text{

        font-size:13px;

        line-height:1.4;
    }
}



/* ===== RESPONSIVE BEFORE ET AFTER ARTICLES ===== */

@media (max-width: 768px) {
	.infos-article {
        text-align:left;
		padding:10px 0;
    }
	
	.infos-after-articles {
        text-align:left;
		padding:0 10px;
    }


 }

/* ===== RESPONSIVE NAVIGATION MENU HEADER ET PAGES ===== */

@media (max-width:768px){

   .header-inner{
        margin:2px 0 20px;
}

    .header-inner nav{

        gap:7px;

        padding:0;
    }

    .nav-link{

        padding:10px 10px;

        font-size:15px;

        line-height:1.1;

        border-radius:10px;

        gap:4px;
    }

    .label-desktop{
        display:none;
    }

    .label-mobile{
        display:inline;
    }
	
	.infos-article p{
    margin:6px 0;
 
}
}

/* ===== FIN RESPONSIVE ===== */