/* COULEURS */
:root {
    --color-primary:   #6AAEC5;
    --color-secondary: #4E789E;
    --color-accent:    #95D4C3;
}

/* Backgrounds */
header#header {
    background-color: var(--color-primary);
}
header#header #hero-banner {
    background: var(--color-secondary);
}

/* Titre visible */
header#header #hero-banner p.title,
header#header #hero-banner section,
header#header #hero-banner .container {
    background: transparent !important;
    background-color: transparent !important;
    color: #FFFFFF !important;
}
header#header #hero-banner p.title {
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* ← Lettres du menu en blanc */
header#header #menu nav ul li a,
header#header #menu #burger-menu a {
    color: #FFFFFF !important;
}

/* ← Menu ouvert : fond en --color-primary */
header#header #menu nav ul li ul,
header#header #menu nav ul.open,
header#header #menu nav ul li.open ul {
    background-color: #6AAEC5 !important;
}
header#header #menu nav ul li ul li a {
    color: #FFFFFF !important;
}
header#header #menu nav ul li ul li a:hover {
    background-color: #4E789E !important;
}

#page ul { list-style: disc inside; }

header#header #hero-banner {
    background-image: url('https://dico-et-d3.sciencesconf.org/data/dd_heading.png');
    /* ou votre image de fond, ex: le poster */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* Filigrane semi-transparent */
header#header #hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(78, 120, 158, 0.75); /* #4E789E à 75% opacité */
    z-index: 0;
}

/* Le contenu passe au-dessus du filigrane */
header#header #hero-banner .container {
    position: relative;
    z-index: 1;
}

/* Titre et texte bien visibles */
header#header #hero-banner p.title {
    color: #FFFFFF !important;
    font-size: 1.4rem;
    font-weight: bold;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    background: transparent !important;
}

header#header #hero-banner p.text,
header#header #hero-banner .location p {
    color: #FFFFFF !important;
    background: transparent !important;
}