/* ==========================================
   ---------- Bannières / Header ------------
   ========================================== */

header {
    width: 98%;
    text-align: center;
    margin: auto;
    border: 5px solid blue;
    border-radius: 10px;
}

#banniere {
    display: grid;
    grid-template-columns: 2fr 5fr 3fr;
    gap: 10px;
    align-items: center;
    width: 100%;
}

#titre_gauche, 
#titre_centre, 
#titre_droite {
    border: 5px solid pink;
    border-radius: 10px;
    text-align: center;
}


/* ---------- Titre Gauche (Logo & Titres) ---------- */

#titre_gauche {
    padding: 30px 0;
    border-color: aqua;
}

#titre_gauche h1,
#titre_gauche h2 {
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 0;
    color: #C62676;
}


/* ---------- Titre Centre (Navigation) ---------- */

#titre_centre {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    border-color: lime;
}

.menu-top ul {
    display: flex; gap: 30px;
    list-style: none;
    margin: 0;    padding: 0;
}

.menu-top a {
    display: block;
    padding: 8px 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: #181818;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: color 0.3s ease, border-bottom-color 0.3s ease;
}

.menu-top a:hover,
.menu-top a:focus {
    color: #760001;
    border-bottom-color: #760001;
}


/* ---------- Titre Droite (Mon compte, Panier, Newsletter) ---------- */

#titre_droite {
	display: flex;
    flex-direction: row;
    align-items: flex-end;     /* <--- 1. Aligne les 3 blocs tout en bas du conteneur rouge */
    justify-content: space-evenly; /* <--- Espace égal avant, entre et après les éléments */
    gap: 30px;                 /* Espacement horizontal entre chaque bloc */
    border-color: red;
    padding: 10px;
    max-width: 100%;

/* Style commun pour chaque sous-bloc (Image + Texte côte à côte) */
#newsletter, 
#moncompte, 
#monpanier {
	display: flex;
    flex-direction: column;    /* <--- Place l'image au-dessus du paragraphe */
    align-items: center;       /* Centre l'image et le texte horizontalement */
    justify-content: flex-end ;
    gap: 5px;                  /* Espacement vertical entre l'image et le texte */
}

/* Ajustement des paragraphes et liens */
#titre_droite p {
    margin: 0;
    color: #C62676;
    text-align: center;
    white-space: nowrap;       /* Empêche le texte de revenir à la ligne */
}

#monpanier a {
    text-decoration: none;
    display: flex;
    flex-direction: column;    /* Aligne aussi l'image et le texte du panier en colonne */
    align-items: center;
    justify-content: flex-end; /* Aligne aussi le contenu du lien du panier vers le bas */
}

/* Tailles d'images */
#moncompte img  { height: 60px; }
#monpanier img   { height: 50px; }
#newsletter img { height: 50px; }