/* Navigation commune des pages produits : le cercle du logo et ses grains en haut à gauche,
   le menu en haut à droite. Mêmes positions que l'accueil une fois le logo rangé. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500&display=swap');

/* Réserve la place du logo et du menu en haut de page */
.dg-spacer { height: 120px; }

.dg-logo {
    position: fixed;
    left: 22px;
    top: 43px;            /* centre du cercle à 76 px, comme le menu */
    width: 58px;          /* zone cliquable : le cercle seulement */
    height: 66px;
    z-index: 100;
    line-height: 0;
    filter: sepia(1) brightness(0.95) saturate(0.4);
}
.dg-logo img {
    position: absolute;
    left: 0;
    top: 0;
    width: 319px;
    height: 66px;
    opacity: 0.9;
    clip-path: inset(0 81.5% 0 0);  /* le cercle seul, sans le mot */
}
.dg-logo canvas {
    position: absolute;
    left: 0;
    top: 0;
    height: 66px;
    pointer-events: none;
}

.dg-burger {
    position: fixed;
    top: 56px;
    right: 16px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    z-index: 102;
}
.dg-burger span {
    display: block;
    width: 40px;
    height: 3px;
    background: #e6e0d0;
    position: absolute;
    transition: all 0.3s ease;
}
.dg-burger span:nth-child(1) { transform: translateY(-10px); }
.dg-burger span:nth-child(3) { transform: translateY(10px); }
.dg-burger.open span:nth-child(1) { transform: rotate(45deg); }
.dg-burger.open span:nth-child(2) { opacity: 0; }
.dg-burger.open span:nth-child(3) { transform: rotate(-45deg); }

.dg-menu {
    position: fixed;
    top: 112px;
    right: 0;
    padding: 1.5rem 10px 1.5rem 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 101;
}
.dg-menu.open { transform: translateX(0); }
.dg-menu a[aria-current="page"] { opacity: 0.45; }
.dg-menu a {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    font-weight: 500;
    letter-spacing: -0.05em;
    color: #e6e0d0;
    text-decoration: none;
    white-space: nowrap;
    padding: 0.1rem 0.8rem;
    /* Lisible par-dessus le contenu de la page */
    text-shadow: 0 0 18px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.9);
}

/* Bouton de langue, à gauche du menu, sur toutes les pages */
.dg-lang {
    position: fixed;
    top: 56px;
    right: 68px;
    height: 40px;
    min-width: 40px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.12em;
    line-height: 1;
    color: #e6e0d0;
    opacity: 0.75;
    transition: opacity 0.2s;
    z-index: 102;
}
.dg-lang:hover { opacity: 1; }

/* Écrans étroits : le logo de l'accueil occupe la largeur, le bouton passe au-dessus du menu */
@media (max-width: 560px) {
    .dg-lang { top: 10px; right: 16px; }
}