/* Mise en page générale */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

/* Conteneur principal : flex vertical pour 3 bandes */
.container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Bande du haut */


.top-band {
    display: flex;
    max-height: 200px;          /* hauteur repliée */
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.top-band.expanded {
    max-height: 1000px; /* volontairement large */
}


/* Colonne 1 : largeur fixe + disposition verticale des boutons */
.top-column:first-child {
	
    width: 300px; /* largeur fixe */
    border: 1px solid blue;
    box-sizing: border-box;
    padding: 10px;
    transition: border-color 0.3s;
    flex-shrink: 0;

    display: flex;          /* active flexbox */
    flex-direction: column; /* disposition verticale */
    justify-content: space-between; /* Accueil en haut, Déplier en bas */
}

/* Contenu central Memo1 dans colonne 1 */



.top-column .middle-content {
    flex: 1;
    overflow-y: auto;     /* 👈 scroll si texte long */
    text-align: left;
    padding: 5px;
}


/* Colonne 2 : prend tout l'espace restant, Memo2 centré */
.top-column:last-child {
    flex: 1; /* prend tout le reste */
    border: 1px solid blue;
    box-sizing: border-box;
    padding: 10px;
    transition: border-color 0.3s;

    display: flex;
    align-items: center;    /* centré verticalement */
    justify-content: center;/* centré horizontalement */
}

/* Contenu central Memo2 */
.top-column .memo2-content {
    text-align: left;
}

/* Bande centrale : prend tout l'espace restant */
.middle-band {
    flex: 1; /* prend l'espace restant */
    background-color: #f0f0f0;
    padding: 10px;
    overflow: auto;
}

/* Bande inférieure : hauteur fixe et encadrée */
.bottom-band {
    height: 150px; /* hauteur fixe */
    background-color: #ccc;
    padding: 10px;
    text-align: center;
    line-height: 40px;

    border: 1px solid #000; /* bordure noire */
    box-sizing: border-box;
    border-radius: 4px; /* coins arrondis */
}

/* Style bouton Déplier */
.toggle-btn {
	 align-self: center;   /* reste bien centré */
    flex-shrink: 0;       /* 👈 ne se fait jamais écraser */
	  display: inline-block;
    margin-left: 0; /* aligné à gauche */
    padding: 5px 10px;
    background-color: #0077cc;
    color: white;
    text-decoration: none;
    border-radius: 4px;
}

/* Style bouton Accueil */
.home-btn {
    display: inline-block;
    margin-left: 0; /* aligné à gauche */
    padding: 5px 10px;
    background-color: #0077cc;
    color: white;
    text-decoration: none;
    border-radius: 4px;
}

.home-btn:hover {
    background-color: #005fa3;
}

#map {
    width: 100%;
    height: 100%;
}

#profile {
    width: 100%;
    height: 100%;
}

#profile canvas {
    width: 100% !important;
    height: 100% !important;
}