/* Bandeau fixe en haut */
.top-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(to right, #b3d9b3, #f0f9f0); /* gauche plus vert, droite très clair */
    color: #333;
    display: flex;
    justify-content: flex-start; /* alignement à gauche */
    align-items: flex-start;     /* pour pouvoir décaler verticalement le texte */
    z-index: 9999;
    border-bottom: 1px solid #b3d9b3;
    box-shadow: none;
    font-family: 'Lora', serif;
    font-size: 16px;
    text-align: center;
    padding: 0 20px;
}

/* Conteneur texte + logo */
.banner-content {
    display: flex;
    align-items: flex-start; /* pour pouvoir décaler le texte vers le bas */
}

/* Texte du site */
.top-banner-text {
    margin-left: 10px; /* marge à gauche du texte */
    margin-top: 25px;  /* décalé 10px vers le bas */
    font-size: 36px;
    font-weight: bold;
    color: #333;
    text-decoration: none;      /* Pas de souligné */
    font-weight: bold;
    transition: all 0.1s ease; /* Transition douce pour l’effet */
}

/* Effet au survol */
.top-banner-text:hover {
    color: #00004B;             /* Bleu très foncé au survol */
    transform: scale(1.02);     /* Léger zoom */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2); /* Petite ombre */
    cursor: pointer;             /* Curseur pointeur */
}

/* Logo à droite du texte */
.top-banner-logo {
    width: 34px;
    height: 34px;
    margin-left: 10px; /* espace de 10px entre texte et logo */
    margin-top: 40px;   /* descend le logo de 10px */
    opacity: 0.8; /* 0 = invisible, 1 = opaque. Ici 60% visible */
    object-fit: contain;
}

/* Eviter que le contenu soit masqué par le bandeau */
body {
    padding-top: 80px;  /* doit correspondre à la hauteur du bandeau */
}

/* Responsive */
@media (max-width: 1024px) {
    .top-banner { height: 60px; padding: 0 15px; }
    body { padding-top: 60px; }
    .top-banner-text { font-size: 22px; margin-top: 8px; }
    .top-banner-logo { width: 50px; height: 50px; margin-left: 8px; }
}

@media (max-width: 768px) {
    .top-banner { height: 50px; padding: 0 10px; }
    body { padding-top: 50px; }
    .top-banner-text { font-size: 18px; margin-top: 6px; }
    .top-banner-logo { width: 40px; height: 40px; margin-left: 6px; }
}

@media (max-width: 480px) {
    .top-banner { height: 45px; padding: 0 8px; }
    body { padding-top: 45px; }
    .top-banner-text { font-size: 16px; margin-top: 4px; }
    .top-banner-logo { width: 32px; height: 32px; margin-left: 5px; }
}