
html, body { background:#fff; }
.hd-landing .container { position:relative; }
.hd-topbar {
    position:sticky;
    top:0;
    z-index:10;
    background:#7f8183;
    color:#fff;
    padding:12px 0;
}
.hd-title { font-size:clamp(15px, 2.6vw, 30px); font-weight:600; letter-spacing:.3px; }
.hd-home {
    position:absolute;
    right:12px;
    top:0px;
    color:#fff !important;
    font-size:clamp(15px, 2.6vw, 30px);
}
.hd-sections { padding:18px 10px 26px 10px; }
.hd-divider { height:1px; background:#c9c9c9; margin:30px 0; }

.hd-grid {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:60px;
}
@media (max-width: 1200px) { .hd-grid { grid-template-columns:repeat(4, 1fr); } }
@media (max-width: 992px)  { .hd-grid { grid-template-columns:repeat(3, 1fr); } }
@media (max-width: 640px)  { 
    .hd-landing { 
        min-height:100vh; 
        display:flex; 
        flex-direction:column; 
    }
    .hd-topbar { flex-shrink:0; }
    .hd-sections { 
        flex:1;
        display:flex;
        flex-direction:column;
        justify-content:center;
        width:100%;
        max-width:100%;
        padding:30px 10px 50px 10px; 
    }
    .hd-grid { grid-template-columns:repeat(3, 1fr); gap:8px 8px; row-gap:50px; width:100%; }
    .hd-tile { border-radius:12px; margin-top:30px; margin-bottom:30px; }
    .hd-divider { margin:50px 0; }
}

.hd-tile {
    position:relative;
    aspect-ratio:1;
    border-radius:18px;
    background:#fff;
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    box-shadow:none;
    transition:transform .15s ease, box-shadow .15s ease;
    cursor:pointer;
    padding:0;
    margin:0;
    text-decoration:none;
    border:none;
}
.hd-tile:hover { transform:translateY(-2px); box-shadow:none; }

/* EN/FR menu */
.hd-has-menu .hd-menu {
    position:absolute;
    inset:auto 8px 8px auto;
    display:none;
    background:#fff;
    border-radius:10px;
    box-shadow:0 8px 22px rgba(0,0,0,.2);
    padding:8px;
    min-width:140px;
}
.hd-has-menu.open .hd-menu { display:block; }
.hd-menu .hd-menu-item {
    display:block;
    width:100%;
    border:0;
    background:#f3f3f3;
    color:#333;
    padding:8px 10px;
    margin:4px 0;
    border-radius:8px;
    text-align:left;
}
.hd-menu .hd-menu-item:hover { background:#e7e7e7; }