/* ==========================================================================
   VARIABLES ET RESET
   ========================================================================== */
:root {
    /* Couleurs principales */
    --color-primary: #0F0C0A;
    --color-secondary: #F5E7D2;
    --color-accent: #D4BFAA;
    --color-accent-light: #E4B87C;

    /* Fonds */
    --color-main-bg: #2C2623;
    --color-secondary-bg: #F5E7D2;

    /* Footer */
    --color-footer-bg: #1A1715;
    --color-footer-text: #F5E7D2;

    /* Détails / séparateurs */
    --color-banner-text: #F5E7D2;
    --color-separator: #9C7F5C;

    /* Boutons / liens */
    --color-button: #9C7F5C;
    --color-button-txt: #F5E7D2;
}

#desktop-only { }
#mobile-only { display: none; }


/* Reset général */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body {
    background-color: var(--color-main-bg);
    color: var(--color-primary);
    line-height: 1.5;
}

/* Titres */
h1,h2,h3,h4,h5,h6 {
    color: var(--color-separator);
}

/* Links globaux */
a {
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Buttons globaux */
button {
    cursor: pointer;
    border: none;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
}

.mobile-br { display: none; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.nav-header {
    width: 100%;
    background-color: var(--color-main-bg);
    color: var(--color-secondary);
}

.nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 20px 10px;
    width: 100%;
    max-width: 1250px;
    margin: auto;
}

.header-logo img {
    max-width: 100%;
    height: auto;
}

.header-menu-container,
.header-social-links {
    display: flex;
    align-items: center;
	gap: 15px;
}

.header-menu-text a {
    margin: 0 10px;
    font-weight: 400;
    color: var(--color-secondary);
}

.header-menu-text a:hover {
    color: var(--color-accent);
    text-decoration: none;
}

.header-menu-icon a {
    font-size: 28px;
    color: #EEDBB8;
	transition: color 0.3s ease, transform 0.3s ease;
}

.header-menu-icon a:hover {
    color: var(--color-separator);
    transform: scale(1.15);
}

/* Menu principal */
ul.menu {
    list-style: none;
    display: flex;
    gap: 0;
}

ul.menu li.menu-link a {
    padding: 8px 12px;
    color: var(--color-secondary);
    font-weight: 400;
    text-transform: uppercase;
}

ul.menu li.menu-link a:hover {
    color: var(--color-accent);
    text-shadow: 0 0 5px rgba(212, 175, 127, 0.7);
}

/* Mobile menu */
.menu-mobile { display: none; flex-direction: column; background-color: var(--color-main-bg); position: absolute; top: 60px; width: 100%; left: 0; padding: 10px 0; z-index: 999; }
.menu-mobile.active { display: flex; }

/* Burger icon */
.burger-icon {
    display: none;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
}

.burger-icon i {
    font-size: 24px;
    color: var(--color-secondary);
}

/* Separator */
.nav-separator { width: 100%; height: 4px; background-color: var(--color-separator); }

/* ==========================================================================
   GLOBAL CONTENT / BOXES
   ========================================================================== */
.content-picture {
    position: relative;
    text-align: center;
    width: 100%;
    overflow: hidden; /* tout ce qui dépasse à droite sera caché */
}

.content-picture img.main-background {
    width: 105%;       /* élargit un peu l'image pour pouvoir la décaler */
    height: auto;
    display: block;
    margin-right: -5%;  /* décale l'image vers la gauche pour “cacher” la droite */
}


.content-picture .banner-title {
    position: absolute; 
    top: 70px;          
    left: 65px;      
    padding: 10px;    
    padding-top: 30px;
    background-color: rgba(33, 28, 29, 0.5); /* opacité augmentée */
    backdrop-filter: blur(0.85px); /* flou derrière le texte */
    color: var(--color-banner-text);
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem;
    font-weight: bold;
    text-align: left;
    max-width: 450px;
    text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5); 
	  border-radius: 10px;

} 

.banner-text{
	color: var(--color-banner-text);
	font-weight: normal;
	font-size: 1rem;
	text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
	 display: inline-block; 
	 line-height: 1.5;
}

.badge {
  display: inline-block;
  padding: 6px 30px;
  position: absolute;
  top: 50px;          /* distance depuis le haut de l'image */
  left: 50px;         /* distance depuis la bordure gauche */
   background: linear-gradient(90deg, #ff4b2b, #ff416c);
  color: white;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 20px;
  z-index: 1;
 text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.8); 
 border: 1px solid var(--color-banner-text);
}

.content-picture .banner-title .banner-link i {
    margin-right: 8px;
	font-weight: lighter;
}


.content-picture .banner-title a.banner-link {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;

    /* Fond sobre */
    background: var(--color-main-bg);   /* noir semi-transparent ou gris foncé */
    border: 2px solid var(--color-secondary);
    border-radius: 8px;

    color: #f5e7d2; /* texte clair doux */
    font-weight: normal;
    text-decoration: none;

    transition: all 0.3s ease;
    margin-top: 15px;
    margin-bottom: 10px;
}

.content-picture .banner-title a.banner-link:hover {
    /* Dégradé rouge/orange dynamique sur hover */
    background: linear-gradient(90deg, #ff4b2b, #ff416c);
    border-color: var(--color-secondary);
    color: #fff;
    text-shadow: 0 0 4px rgba(255, 223, 150, 0.5);
}

.banner-news {
    position: absolute;
    top: 75%;             /* 3/4 de la hauteur de l'image */
    left: 50%;            /* centré horizontalement */
    transform: translate(-50%, -50%); /* ajuste pour centrer exactement */
    background: rgba(26, 23, 21, 0.85); /* semi-transparent */
    padding: 20px 100px;
    border-radius: 10px;
    border: 2px solid var(--color-separator);
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    font-weight: bold;
    text-align: center;
    max-width: 90%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.banner-news span.colon {
    margin: 0 4px; /* espace autour du ':' */
}

.banner-news a{
	color: #F5E7D2;
	text-decoration: none;
	letter-spacing: 0.05em; 
}

.banner-news :hover{
	color: #D4BFAA;
	text-decoration: none;
}

.pages-title {
    color: #EEDBB8; 
    font-size: 2.2rem; 
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 35px;
    text-align: center;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.6), 
                 0 0 6px rgba(209, 161, 101, 0.4); 
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.nav-footer,
.nav-footer-fixed,
.nav-footer-float {
    width: 100%;
    background-color: var(--color-footer-bg);
    padding: 15px 20px;
    border-top: 2px solid var(--color-separator);
    margin-top: auto;
}

.footer-inner { display: flex; justify-content: center; align-items: center; height: 30px; position: relative; }

.nav-menu-footer { display: flex; gap: 20px; position: absolute; right: 5%; top: 50%; transform: translateY(-50%); }
.nav-menu-footer li a { font-size: 13px; color: var(--color-footer-text); }
.nav-menu-footer li a:hover { color: var(--color-accent); text-shadow: 0 0 5px rgba(212, 175, 127, 0.7); }

.nav-menu-footer-copyright { color: var(--color-footer-text); font-size: 12px; text-align: center; flex: 1; }
.nav-menu-footer-copyright a { color: var(--color-footer-text); font-size: 12px; text-align: center; flex: 1; }

/* ==========================================================================
   PAGES SPECIFIQUES
   ========================================================================== */

/* --- Music Page --- */
.music-page {
    padding: 50px 20px;
    background: linear-gradient(rgba(124,101,74,0.85), rgba(124,101,74,0.85)),
        url('../img/bg/bg-music.jpg') no-repeat center center;
    background-size: cover; 
}

.music-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 25px; max-width: 1200px; margin: auto; }
.music-item { background: rgba(26,23,21,0.85); border-radius: 10px; padding: 20px; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.4); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.music-item:hover { transform: scale(1.03); box-shadow: 0 0 15px rgba(209,161,101,0.4); }
.music-item img {border: 1px solid var(--color-separator);}
.music-cover { width: 100%; border-radius: 8px; margin-bottom: 15px; }

	/* ==========================================================================
   MUSIC - NOUVELLE SORTIE
   ========================================================================== */

.music-cover-container {
    position: relative;
    width: 100%;
}

.music-cover-container .music-cover {
    display: block;
    width: 100%;
}

.music-new-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;

    display: inline-block;
    padding: 5px 11px;

    background-color: var(--color-separator);
    color: var(--color-secondary);

    border-radius: 15px;

    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.2;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.music-title { font-size: 1rem; color: #EEDBB8; }
.music-year { font-size: 0.85rem; color: var(--color-separator); margin-left: 6px; }
.album_feat a { color: var(--color-separator); font-style: italic; }
.album_feat a:hover { color: #EEDBB8; text-decoration: underline; }
.music-links { margin-top: 10px; }
.music-links a { margin: 0 5px; padding-top: 10px; font-size: 25px; color: #EEDBB8; transition: color 0.3s ease, transform 0.3s ease; }
.music-links a:hover { color: var(--color-separator); transform: scale(1.15); }

/* --- Contact Page --- */
.contact-page {
    padding: 50px 20px;
    min-height: calc(100vh - 110px - 66px);
    background: linear-gradient(rgba(124,101,74,0.85), rgba(124,101,74,0.85)),
        url('../img/bg/bg-contact.jpg') no-repeat center center;
    background-size: cover;
}
.contact-info { background-color: var(--color-secondary); color: var(--color-primary); padding: 25px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); }

.contact-form form {
    display: flex;
    flex-direction: column;
}

.contact-bg {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 20px 20px;
}

/* Carré gauche */
.contact-info {
    background-color: var(--color-secondary); /* doré */
    color: var(--color-primary); /* texte noir */
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 2;
    font-size: 0.95rem;
    line-height: 1.5;
	margin-top: 105px;
	padding-top: 55px;
	height: 250px;
}

.contact-info h2{
	color: var(--color-button); /* texte noir */
	font-size: 24pt;
	text-decoration: none;
	font-weight: normal;
	letter-spacing: 0.5;
}

.contact-info p{
	padding: 2px;
}

/* Carré droit */
.contact-form {
    flex: 0 0 750px; /* largeur fixe */
    background: rgba(26, 23, 21, 0.85);
    border-radius: 10px;
    padding: 20px 50px;
    margin-left: -20px; /* chevauchement léger */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    color: var(--color-secondary);
    position: relative;
	padding-top: 55px;
	font-size: 11pt;
}

.contact-form form {
    display: flex;
    flex-direction: column;
}

.email-contact{
	margin-top: 25px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    margin-bottom: 5px;
    display: block;
    font-weight: 500;
    color: var(--color-secondary);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid var(--color-separator);
    font-size: 0.85rem;
    font-family: 'Montserrat', sans-serif; /* ajouté */
    color: var(--color-primary);          /* texte noir, comme ton input */
    line-height: 1.5; 
}

.contact-form select {
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid var(--color-separator);
    font-size: 0.85rem;
    font-family: 'Montserrat', sans-serif;
    color: var(--color-primary);
    line-height: 1.5;
    background-color: var(--color-secondary); /* ou transparent si tu préfères */
}

.form-group button {
    padding: 12px 20px;
    font-size: 1rem;
    border-radius: 6px;
    border: none;
    background-color: var(--color-button);
    color: var(--color-button-txt);
    cursor: pointer;
		font-size: 0.85rem;

}

.form-group button:hover {
    background-color: var(--color-button-txt);
	color: var(--color-button);
	font-size: 0.85rem;
	transition: background-color 0.3s ease;
}

/* --- Pro Page --- */
.pro-page { padding: 50px 20px; background: linear-gradient(rgba(124,101,74,0.85), rgba(124,101,74,0.85)), url('../img/bg/bg-pro.jpg') no-repeat center center; background-size: cover; min-height: calc(100vh - 110px - 66px); }
.pro-content { max-width: 900px; margin: auto; padding: 40px; background: rgba(26,23,21,0.85); border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); display: flex; flex-direction: column; gap: 20px; }
.pro-box { display: flex; align-items: center; gap: 15px; padding: 15px 20px; background-color: var(--color-separator); border-radius: 8px; transition: transform 0.3s ease; }
.pro-box:hover { transform: scale(1.02); }
.pro-link { color: var(--color-primary); font-size: 1.2rem; font-weight: 600; }
.pro-link:hover { color: var(--color-primary); }

/* --- Partners Page --- */
.partners-page { padding: 50px 20px; display: flex; flex-direction: column; align-items: center; background: linear-gradient(rgba(124,101,74,0.85), rgba(124,101,74,0.85)), url('../img/bg/bg-part.jpg') no-repeat center center; background-size: cover;     min-height: calc(100vh - 110px - 66px); }
.partners-container { display: flex; flex-wrap: wrap; gap: 25px; max-width: 1200px; width: 100%; justify-content: center; }
.part_box { flex: 0 0 45%; background: rgba(26,23,21,0.85); border-radius: 10px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); color: var(--color-secondary); display: flex; flex-direction: column; }
.part_box_title { color: var(--color-separator); font-size: 1.2rem; font-weight: bold; margin-bottom: 15px; text-shadow: 0 2px 6px rgba(0,0,0,0.3); }
.part_box_content { display: flex; align-items: center; gap: 20px; }
.partner-logo img { height: 130px; border-radius: 10px; background-color: var(--color-separator); padding: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
a.partner-link { color: var(--color-accent);}
/* --- Actu / News Page --- */
.actu-page { padding: 50px 20px; display: flex; flex-direction: column; align-items: center; background: linear-gradient(rgba(124,101,74,0.85), rgba(124,101,74,0.85)), url('../img/bg/bg-page-news.jpg') no-repeat center center; background-size: cover; min-height: calc(100vh - 110px - 66px); }
.actu-date { color: var(--color-separator);  }
.actu-title { color: var(--color-separator); font-weight:bold;  }
.actu-main-title { color: var(--color-separator); font-weight:bold; font-size: 1.25rem;  }
.actu-content i {
    display: inline;       /* remet le comportement normal en ligne */
    margin: 0;             /* supprime tout margin hérité */
    padding: 0;            /* supprime tout padding hérité */
    line-height: normal;   /* remet la hauteur de ligne normale */
    vertical-align: baseline; /* pour aligner correctement le texte si besoin */
}

.actu-content {
    display: block; /* ou retirer display:flex pour le texte pur */
	max-width: 1000px;
    padding: 40px;
    background: rgba(26,23,21,0.85);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    color: var(--color-secondary);
    text-align: justify;
    font-size: 11pt;
}

.actu-content img{
	border: 1px solid var(--color-separator);
	margin-left: 5px;
	margin-right: 5px;
}

/* --- Concerts Page --- */
.concerts-page { padding: 50px 20px; display: flex; flex-direction: column; gap: 20px; justify-content: flex-start; background: linear-gradient(rgba(124,101,74,0.85), rgba(124,101,74,0.85)), url('../img/bg/bg-dates.jpg') no-repeat center center; background-size: cover; min-height: calc(100vh - 110px - 66px); }
.concerts-container { display: flex; flex-direction: column; gap: 15px; width: 65%; margin: 0 auto; }
.concert-box { display: flex; align-items: center; justify-content: flex-start; background: rgba(26,23,21,0.85); border-radius: 10px; padding: 15px 25px; color: var(--color-secondary); text-transform: uppercase; box-shadow: 0 4px 12px rgba(0,0,0,0.4); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.concert-box:hover { transform: scale(1.02); box-shadow: 0 0 15px rgba(209,161,101,0.4); background: rgba(44,38,35,0.9); }

.no-concert {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 180px;
    padding: 30px;
    text-align: center;
}

.no-concert-content {
    width: 100%;
}

.no-concert-title {
    color: var(--color-accent-light);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.no-concert-text {
    color: var(--color-secondary);
    font-size: 0.95rem;
    margin-bottom: 22px;
}

.no-concert-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--color-button);
    border: 1px solid var(--color-separator);
    border-radius: 6px;
    color: var(--color-button-txt);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
}

.no-concert-button:hover {
    background-color: var(--color-secondary);
    color: var(--color-button);
}

/* Partie gauche : jour */
.concert-day-left {
    flex: 0 0 80px;
    text-align: center;
}

.concert-day {
    font-size: 4.615rem; /* très grand */
    font-weight: bold;
    color: var(--color-separator);
    line-height: 1;
}

/* Mois / année */
.concert-date-right {
    flex: 0 0 75px;
    text-align: left;
    margin-left: 1px;
}

.concert-month-year {
    font-size: 1.846rem;
    color: var(--color-separator);
    line-height: 1.1;
}

/* Ville / Lieu */
.concert-info-middle {
	flex: 0 0 275px;
	margin-right: 50px;
    padding-left: 50px;
    color: var(--color-secondary);
}

.concert-place {
    font-size: 1.2rem;
    line-height: 1.5;
    line-height: 1.5;
}

/* Heure / Event / Ticket / Picto */
.concert-extra-right {
    display: flex;              /* garde sur la même ligne */
    align-items: center;        /* centre verticalement tous les éléments */                 /* espace entre heure, event, ticket */
}

.concert-hour{
	flex: 0 0 140px;
	text-align: center;
    font-size: 3rem;
	font-weight: bold;
    color: var(--color-secondary);
	line-height: 1.2;
}

.concert-event {
    font-size: 1rem;
    color: var(--color-secondary);
	line-height: 1.2;
	flex: 0 0 300px;
	margin-left: 50px;
	margin-right: 50px;
}

.concert-ticket a {
    display: inline-block;
    padding: 10px 25px;
    font-size: 15px;
    font-weight: bold;
    border-radius: 5px;
    background-color: var(--color-separator);
    color: var(--color-secondary);
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
	line-height: 1.2;
		text-align: center;

}

.concert-ticket a:hover {
    background-color: var(--color-secondary);
    color: var(--color-separator);
	line-height: 1.2;
}

.concert-ticket{
	flex: 0 0 115px;
		text-align: center;
}

.concert-info-picto a {
    font-size: 1.5rem;
    color: var(--color-separator);
}


/* ==========================================================================
   HOME - PRESENTATION
   ========================================================================== */

.home-intro {
    width: 100%;
    padding: 55px 20px 60px;
    background-color: var(--color-main-bg);
    color: var(--color-secondary);
    text-align: center;
	border-top: 3px solid var(--color-separator);
}

.home-intro-inner {
    max-width: 850px;
    margin: 0 auto;
}

.home-intro-small {
    color: var(--color-accent-light);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 4px;
    margin-bottom: 5px;
}

.home-intro-title {
    color: #EEDBB8;
    font-size: 2.3rem;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.2;
}

.home-intro-location {
    color: var(--color-separator);
    margin-top: 8px;
    margin-bottom: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 2px;
}

.home-intro-text {
    max-width: 750px;
    margin: 0 auto;
    color: var(--color-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
}

.home-intro-button {
    display: inline-block;
    margin-top: 28px;
    padding: 11px 22px;
    background-color: var(--color-button);
    border: 1px solid var(--color-separator);
    border-radius: 6px;
    color: var(--color-button-txt);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
}

.home-intro-button:hover {
    background-color: var(--color-secondary);
    color: var(--color-button);
}

.desktop-br {
    display: inline;
}

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

@media screen and (max-width: 768px) {
	
	.nav-menu {
		height: 100px;
	}
	
	.desktop-br {
    display: none;
}
	
	.header-logo img {
        max-width: 95% !important;
        height: auto;
    }

    .header-menu-icon {
        margin-left: 15px;
    }

	.burger-icon {
		display: block !important;
	}

    #desktop-only {
		display: none;
	}

    #mobile-only {
		display: block;
	}
	
	ul.menu-mobile {
		display: none !important;
		flex-direction: column;
		position: fixed;
		top: 103px;
		left: 0;
		width: 100%;
		height: calc(100vh - 103px);
		background-color: var(--color-main-bg);
		padding: 20px 0;
		z-index: 999;
		overflow-y: auto;
    }

    ul.menu-mobile.active {
        display: flex !important;
    }

	ul.menu-mobile li {
		list-style: none;
		width: 80%;
		margin: 15px auto;
		padding: 0;
		text-align: center;
		font-size: 1.5rem;
		background-color: var(--color-main-bg-alt);
		border: 2px solid var(--color-accent);
		border-radius: 6px;
		cursor: pointer;
		transition: background-color 0.2s;
		overflow: hidden;
	}

ul.menu-mobile li a {
    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 100% !important;
    min-height: 55px;

    margin: 0 !important;
    padding: 12px 0 !important;

    color: var(--color-secondary);
    text-align: center !important;
    line-height: 1.2;

    box-sizing: border-box;
}
	
	ul.menu-mobile li:hover,
	ul.menu-mobile li:active,
	ul.menu-mobile li:focus {
		background-color: var(--color-accent);
		border-color: var(--color-accent);
	}
	
	ul.menu-mobile li:hover a,
	ul.menu-mobile li:active a,
	ul.menu-mobile li:focus a {
		color: var(--color-primary);
	}

	.content-picture img,
	.content-picture .main-background {
		width: 100% !important;
		height: auto !important;
		border-bottom: 3px solid var(--color-accent-light);
	}

	.mobile-break {
        display: inline;
    }
	
	.music-page,
	.concerts-page,
	.pro-page,
	.contact-page,
	.actu-page {
		padding-top: 25px;
	}
		
	.pro-page {
		background: linear-gradient(rgba(124,101,74,0.85), rgba(124,101,74,0.85)),
					  url('../img/bg/bg-pro.jpg') no-repeat center center;
		background-size: cover;
		background-attachment: scroll;
		background-position: center top;
	}
	
	.concerts-page {
		background: linear-gradient(rgba(124,101,74,0.85), rgba(124,101,74,0.85)),
					  url('../img/bg/mobile/bg-dates.jpg') no-repeat center center;
		background-size: cover;
		background-attachment: scroll;
		background-position: center top;
	}
	
	.music-page,
	.contact-page {
		background-size: cover;
		background-attachment: scroll;
		background-position: center top;
	}
	
	.concerts-page,
	.pro-page {
		background-size: cover;
		min-height: 100dvh;
		min-height: 100svh;
		min-height: 100vh;
		background-position: center top;
	}

    /* =========================
       ACTU / NEWS
       ========================= */
    .actu-content {
        padding: 20px;
        font-size: 0.95rem;
    } 

    /* =========================
       CONCERTS / DATES
       ========================= */
    .concerts-container { width: 100%; gap: 15px; }
    .concert-day { font-size: 3rem; }
    .concert-month-year { font-size: 1.4rem; }
    .concert-info-middle { flex: none; margin: 0; padding: 10px 0; }
    .concert-hour { font-size: 2rem; }
    .concert-event { flex: none; margin: 5px 0; font-size: 0.95rem; }
    .concert-ticket { flex: none; margin-top: 10px; }
    .concert-ticket a { font-size: 0.9rem; padding: 6px 15px; }

    /* Flex vertical */
    .concert-box { flex-direction: column; align-items: flex-start; padding: 15px; }
    .concert-extra-right { flex-direction: column; align-items: flex-start; gap: 8px; }

    /* =========================
       PRO PAGE
       ========================= */
    .pro-content { padding: 20px; }
    .pro-box { flex-direction: row; align-items: flex-start; padding: 12px; }

    /* =========================
       CONTACT PAGE
       ========================= */
    .contact-form input,
    .contact-form textarea,
    .contact-form select { font-size: 0.85rem; padding: 10px; }
	.contact-info {
			margin-top: 0; /* supprime le décalage vertical */
			padding-top: 25px; /* ajuste si besoin */
			height: auto; /* laisse le bloc s'adapter au contenu */
			margin-bottom: 15px;
			text-align: justify;
	}	
	
	.contact-form {
		flex: none;
		width: 100%;
		margin-left: 0;
		padding: 20px;
	}
	
	.form-group button {
	font-size: 1.25rem;
	width: 75%;
	padding: 15px;

}

/* =========================
   CONTACT PAGE - MOBILE
   ========================= */

.contact-bg {
    padding: 10px 15px 25px;
}

.contact-info {
    width: 100%;
    margin: 0 0 15px 0;
    padding: 24px 22px;
    height: auto;

    background-color: var(--color-secondary);
    border: 1px solid var(--color-separator);
    border-radius: 10px;

    color: var(--color-primary);
    text-align: left;

    box-shadow: 0 4px 15px rgba(0,0,0,0.30);
}

.contact-info h2 {
    margin: 0 0 18px 0;

    color: var(--color-button);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.5px;

    text-align: left;
    white-space: nowrap;
}

.contact-info p {
    padding: 0;
    margin: 0 0 12px 0;

    font-size: 0.9rem;
    line-height: 1.55;
    text-align: left;
}

.contact-info p:last-child {
    margin-top: 18px;
    margin-bottom: 0;
    padding-top: 15px;

    border-top: 1px solid rgba(156,127,92,0.35);
}

.contact-form {
    flex: none;
    width: 100%;

    margin-left: 0;
    padding: 20px;

    border-radius: 10px;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    font-size: 0.9rem;
    padding: 11px;
}

.form-group button {
    width: 75%;
    padding: 14px 10px;

    font-size: 1rem;
}


    /* =========================
       CONTENT / BANNERS
       ========================= */
    .content-picture .banner-title {
        position: static !important;   /* supprime le positionnement absolu */
        transform: none !important;    /* supprime tout décalage */
        width: 100% !important;        /* prend toute la largeur disponible */
        font-size: 1.25rem !important; /* taille lisible sur mobile */
        text-align: center !important; /* centre le texte */
        border: 0 !important;          /* supprime bordures */
        background: none !important;   /* supprime le fond */
        margin: 20px auto !important;  /* un peu d'espacement autour */
        padding: 0 !important; 
		letter-spacing: 0.075em;		
    }
	
    .content-picture .banner-title a.banner-link {
        display: inline-block;
		width: 75%;            /* plus large que sur desktop */
		padding: 12px 0;       /* ajuste la hauteur si besoin */
		font-size: 1.25rem;       /* taille du texte */
		text-align: center;    /* centre le texte dans le bouton */
		margin: 15px auto 0;   /* espace au-dessus et centré horizontalement */
    }
	
	.content-picture .banner-title a.banner-link:hover {
        padding: 6px 12px !important;
        font-size: 1.25rem !important;
		padding: 25px;
    }
	
    .banner-news {
		position: absolute !important;
        top: 60% !important;       /* toujours aux 3/4 de l'image */
        left: 50% !important;      /* centré horizontalement */
        transform: translate(-50%, -50%) !important; /* centre exact */
        width: 90% !important;
        margin: 15px auto !important;
        font-size: 1rem !important;
        text-align: center !important;
        padding: 10px !important;
    }
	
	.music-title { font-size: 1.5rem; color: #EEDBB8; }
	.music-year { font-size: 1.25rem; color: var(--color-separator); margin-left: 6px; }
	.album_feat a { color: var(--color-separator); font-style: italic; }
	.album_feat a:hover { color: #EEDBB8; text-decoration: underline; }
	.music-links { margin-top: 10px; }
	.music-links a { margin: 0 5px; padding-top: 10px; font-size: 45px; color: #EEDBB8; transition: color 0.3s ease, transform 0.3s ease; }
	.music-links a:hover { color: var(--color-separator); transform: scale(1.15); }
	
	.mobile-br { display: inline; }
    .concert-box.no-concert {
        min-height: 120px;  /* plus de place en hauteur */
        padding: 20px;
        font-size: 1.1rem;
    }
	
	.badge-mobile {

  padding: 6px 30px;
  width: 70%;          /* distance depuis le haut de l'image */

   background: linear-gradient(90deg, #ff4b2b, #ff416c);
  color: white;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 20px;
  z-index: 1;
 text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.8); 
 border: 1px solid var(--color-banner-text);
}

	.pages-title {
    color: #EEDBB8; 
    font-size: 1.75rem; 
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    text-align: center;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.6), 
                 0 0 6px rgba(209, 161, 101, 0.4); 
	}

	/* =========================
	   HOME
	   ========================= */
	.home-intro {
		padding: 35px 20px 40px;
		background: rgba(15, 12, 10, 0.98);
		border-top: 3px solid var(--color-accent-light);
		box-shadow: inset 0 10px 24px rgba(0, 0, 0, 0.20);
	}

	.home-intro-small {
		color: var(--color-accent-light);
	}

	.home-intro-title {
		font-size: 1.8rem;
		color: var(--color-secondary);
		text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
	}

	.home-intro-location {
		font-size: 0.8rem;
		letter-spacing: 1px;
		margin-bottom: 20px;
		color: var(--color-accent-light);
	}

	.home-intro-text {
		font-size: 0.9rem;
		text-align: left;
		color: var(--color-secondary);
	}

	.home-intro-button {
		width: 75%;
		font-size: 1rem;
		padding: 12px 10px;
		background-color: var(--color-button);
		color: #fff;
		border: 1px solid var(--color-accent-light);
		box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
	}

	.home-intro-button:hover {
		background-color: var(--color-secondary);
		color: var(--color-primary);
	}

}


/* ==========================================================================
   ADMIN / DATES
   ========================================================================== */

table.concert_display {
    width: 65% !important;
    margin: 30px auto;
    border-collapse: separate;
    border-spacing: 0;
    font-family: "Montserrat", sans-serif;
    font-size: 10pt;
    background: rgba(26, 23, 21, 0.85);
    border: 2px solid var(--color-separator);
    border-radius: 10px;
    overflow: hidden;
}

/* En-tête du tableau */

table.concert_display th {
    background-color: var(--color-main-bg);
    color: var(--color-secondary);
    border-bottom: 2px solid var(--color-separator);
    padding: 14px 12px;
    text-align: left;
    font-weight: 600;
}

table.concert_display th:first-child {
    border-radius: 8px 0 0 0;
}

table.concert_display th:last-child {
    border-radius: 0 8px 0 0;
}

/* Cellules */

table.concert_display td {
    background-color: var(--color-secondary);
    color: var(--color-primary);
    padding: 14px 12px;
    height: 45px;
    border-bottom: 1px solid rgba(156, 127, 92, 0.35);
    vertical-align: middle;
}

/* Dernière ligne */

table.concert_display tr:last-child td {
    border-bottom: none;
}

/* Effet au survol */

table.concert_display tr:hover td {
    background-color: #EEDBB8;
}

/* Date */

td.concert_display {
    width: 125px;
    text-align: left;
    font-weight: 600;
}

/* Ville */

td.concert_display_ville {
    width: 125px;
    text-align: left;
    font-weight: 500;
}

/* Lieu */

td.concert_display_lieu {
    width: 180px;
    text-align: left;
}

/* Event */

td.concert_display_event {
    width: 280px;
    text-align: left;
}

/* Icônes modifier / supprimer / visibilité */

td.concert_display_icons {
    width: 40px;
    padding: 8px;
    text-align: center;
    background-color: var(--color-secondary);
}

td.concert_display_icons img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

td.concert_display_icons a:hover img {
    transform: scale(1.15);
    opacity: 0.75;
}


/* ==========================================================================
   ADMIN / SOUS-MENU
   ========================================================================== */

div.admin-sub-menu {
    width: 75%;
    margin: 25px auto;
    background: rgba(26, 23, 21, 0.85);
    border: 1px solid var(--color-separator);
    border-radius: 10px;
    padding: 15px 20px;
    clear: both;
    min-height: 25px;
    height: auto;
    color: var(--color-secondary);
}

div.admin-sub-icon {
    float: left;
}

div.admin-sub-left {
    float: left;
    padding-top: 3px;
    padding-left: 12px;
    margin-right: 35px;
}

div.admin-sub-infos {
    float: left;
    margin-right: 50px;
    padding-top: 3px;
    font-size: 10pt;
    font-family: 'Montserrat';
    color: var(--color-secondary);
}

div.admin-sub-infos_space {
    float: left;
    margin-left: 30px;
    margin-right: 35px;
    padding-top: 3px;
    font-size: 10pt;
    font-family: 'Montserrat';
    color: var(--color-secondary);
}

div.admin-return {
    float: right;
    padding-right: 17px;
    padding-top: 3px;
}

a.sub_menu {
    font-size: 10pt;
    font-family: 'Montserrat';
    color: var(--color-secondary);
}

a.sub_menu:hover {
    color: var(--color-accent);
}


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

div.admin-logout {
    float: right;
    font-size: 10pt;
    padding-right: 33px;
    padding-top: 12px;
}

div.admin-return-main {
    float: right;
    font-size: 10pt;
    padding-right: 40px;
    padding-top: 35px;
}

a.admin-return {
    color: var(--color-secondary);
    font-family: 'Montserrat', sans-serif;
}

a.admin-return:hover {
    color: var(--color-accent);
}


/* ==========================================================================
   ADMIN / FORMULAIRE DATES
   ========================================================================== */

table.add_date {
    margin: 25px auto;
    font-size: 10pt;
}

td.concert_add_date {
    width: 100px;
}

input.adminText {
    height: 30px;
    border: 1px solid var(--color-separator);
    border-radius: 5px;
    padding: 5px 8px;
    font-family: 'Montserrat', sans-serif;
}


/* ==========================================================================
   ADMIN / TABLEAUX COMMANDES
   ========================================================================== */

table.admin-tab {
    background-color: var(--color-secondary);
    color: var(--color-primary);
    border: 1px solid var(--color-separator);
    padding: 25px;
    padding-left: 20px;
    padding-right: 75px;
    padding-bottom: 15px;
    font-size: 8pt;
    font-weight: bold;
    margin-bottom: 40px;
}

table.cmd_display {
    border-collapse: collapse;
    width: 100%;
    text-align: center;
    font-family: "Montserrat";
    font-size: 10pt;
    margin-top: 15px;
}

td.cmd_display,
td.cmd_display_owner,
td.cmd_display_end,
td.cmd_display_amount,
td.cmd_display_amount_end,
td.cmd_display_icon,
td.cmd_display_icon_end,
td.cmd_display_owner_end,
td.cmd_display_icon_statut,
td.cmd_display_icon_statut_end {
    background-color: var(--color-secondary);
    color: var(--color-primary);
    border-bottom: 1px solid rgba(156, 127, 92, 0.35);
}

td.cmd_display {
    text-align: left;
    width: 150px;
    padding: 10px;
    font-weight: bold;
}

td.cmd_display_owner,
td.cmd_display_owner_end {
    text-align: left;
    width: 300px;
    padding: 10px;
}

td.cmd_display_end {
    text-align: left;
    width: 150px;
    padding: 10px;
    font-weight: bold;
}

td.cmd_display_amount,
td.cmd_display_amount_end {
    width: 100px;
    padding: 8px;
    text-align: center;
}

td.cmd_display_icon,
td.cmd_display_icon_end {
    width: 75px;
    padding: 5px;
    text-align: center;
}

td.cmd_display_icon_statut,
td.cmd_display_icon_statut_end {
    width: 125px;
    padding: 5px;
    text-align: center;
}

th.cmd_display,
th.cmd_display_c {
    border-bottom: 2px solid var(--color-separator);
    border-top: 2px solid var(--color-separator);
    padding: 10px;
    color: var(--color-secondary);
    background-color: var(--color-main-bg);
}

th.cmd_display {
    text-align: left;
    padding-left: 12px;
}

th.cmd_display_c {
    text-align: center;
}


/* ==========================================================================
   ADMIN / ARCHIVES
   ========================================================================== */

div.archive_title {
    font-size: 18pt;
    padding-left: 45px;
    padding-top: 20px;
    font-family: "Montserrat", sans-serif;
    color: var(--color-secondary);
}


/* ==========================================================================
   ADMIN / COMMANDES
   ========================================================================== */

div.admin-return-cmd {
    float: right;
    font-size: 10pt;
    padding-right: 40px;
    padding-top: 30px;
}

div.cmdBox {
    background-color: var(--color-secondary);
    color: var(--color-primary);
    width: 65%;
    text-align: justify;
    padding: 15px;
    margin: 10px auto 30px 45px;
    font-size: 10pt;
    border-radius: 8px;
    border: 1px solid var(--color-separator);
}

div.cmdImgStatutBox {
    margin-top: 25px;
    font-size: 10pt;
    font-family: "Montserrat";
    margin-left: 58%;
    position: absolute;
    width: 25%;
}

div.cmdImgStatut {
    background-color: var(--color-secondary);
    color: var(--color-primary);
    padding: 5px 20px;
    font-size: 10pt;
    font-family: "Montserrat";
    width: 175px;
    margin-top: 5px;
    margin-bottom: 25px;
    border-radius: 5px;
}

div.cmdImgFac {
    padding: 5px 5px 5px 85px;
}

div.cmdImgFacTitle {
    font-size: 10pt;
    font-family: "Montserrat";
    padding-left: 34px;
    font-weight: bold;
}

div.cmdImgStatutTitle {
    font-size: 10pt;
    font-family: "Montserrat";
    padding-left: 34px;
}

td.cmdImgStatut {
    width: 125px;
    height: 40px;
    font-size: 8pt;
    font-family: "Montserrat";
}

td.cmdStatutTotal {
    background-color: var(--color-secondary);
    color: var(--color-primary);
    padding: 5px;
}

table.cmdStatut {
    font-size: 9pt;
    font-family: "Montserrat";
    border: 1px solid var(--color-separator);
    border-collapse: collapse;
    width: 70%;
}

table.cmdStatut td {
    border: 1px solid var(--color-separator);
    padding: 5px;
    background-color: var(--color-secondary);
    color: var(--color-primary);
}

/* ==========================================================================
   BAND - BOXES
   ========================================================================== */

.band-boxes {
    display: flex;
    gap: 25px;
    width: 100%;
    max-width: 1000px;
    margin: 30px auto;
    align-items: stretch;
}

.band-box {
    flex: 1;
    max-width: none;
    margin: 0;
}

.band-members,
.band-timeline {
    margin-top: 22px;
}

.band-members div,
.band-timeline div {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(156,127,92,0.35);
}

.band-members div:last-child,
.band-timeline div:last-child {
    border-bottom: none;
}

.band-members strong,
.band-timeline strong {
    min-width: 70px;
    color: var(--color-accent-light);
    font-size: 1rem;
}

.band-members span,
.band-timeline span {
    color: var(--color-secondary);
}

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

    .band-boxes {
        flex-direction: column;
        gap: 20px;
        margin: 20px auto;
    }

    .band-box {
        width: 100%;
    }
}


/* ==========================================================================
   ADMIN / ERREURS
   ========================================================================== */

span.redError {
    color: #b00000;
    font-weight: bold;
}