/* ---------
-- NAVBAR --
---------- */
.ax-navbar {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-200%); /* caché au-dessus au départ */
    opacity: 0;
    z-index: 1000;
    padding: 12px 24px;
    border-radius: 6px;
    border: 1px solid transparent;
    background:
    linear-gradient(#030819, #030819) padding-box,
    linear-gradient(170deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.20) 25%,
      rgba(255, 255, 255, 0.04) 55%,
      rgba(255, 255, 255, 0) 100%
    ) border-box,
    linear-gradient(rgba(255, 255, 255, 0.10),
                    rgba(255, 255, 255, 0.10)) border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
    width: 277px;
    overflow: hidden; /* empêche les liens cachés de déborder -> plus de saut */
    transition: width 0.45s cubic-bezier(0.215, 0.61, 0.355, 1),
                transform 0.7s cubic-bezier(0.215, 0.61, 0.355, 1),
                opacity 0.7s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Apparition : la navbar descend d'en haut (classe ajoutée par le JS) */
.ax-navbar--visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.ax-navbar--open {
    width: 90vw; /* 90% de l'écran */
}

.ax-navbar-logo {
    height: 26px;
    width: auto;
    display: block; /* enlève l'espace sous l'image (dû au comportement inline par défaut) */
}

/* Zone menu : burger et liens SUPERPOSÉS au même endroit (= aucun saut) */
.ax-navbar-menu {
    position: relative;
    height: 28px; /* hauteur stable -> pas de saut vertical */
}

/* Le burger ET les liens occupent la même case, à droite, et se croisent en fondu */
.ax-navbar-icone,
.ax-navbar-link {
    position: absolute;
    right: 0;
    top: 50%;
    transition: opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1),
                transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.ax-navbar-icone {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 28px;
    padding: 4px 0;
    cursor: pointer;
    transform: translateY(-50%); /* centré verticalement */
    opacity: 1;
}

/* Chaque barre du burger */
.ax-navbar-icone span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #FFFFFF;
    border-radius: 2px;
}

/* Liens : présents en permanence (plus de display:none), mais cachés EN HAUT */
.ax-navbar-link {
    display: flex;
    align-items: center;
    gap: 32px;
    white-space: nowrap;                            /* jamais de retour à la ligne */
    transform: translateY(-50%) translateY(-12px);  /* au repos : décalés vers le haut */
    opacity: 0;
    pointer-events: none;                           /* non cliquables tant que cachés */
}

/* ===== Au survol / focus ===== */
.ax-navbar--open .ax-navbar-icone {
    transform: translateY(-50%) translateY(12px);   /* le burger part vers le BAS */
    opacity: 0;
    pointer-events: none;
}
.ax-navbar--open .ax-navbar-link {
    transform: translateY(-50%);                    /* les liens descendent DEPUIS LE HAUT */
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0.1s;                         /* juste après le début de l'ouverture */
}

.ax-navbar-link a {
    font-family: 'K2D';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    color: #FFFFFF;
    text-decoration: none;
}

/* a.link-contact (sans espace) = le <a> QUI A la classe link-contact */
.ax-navbar-link a.link-contact {
    color: #FFE100;
}


  
  




/* -----------------
-- FOOTER SECTION --
------------------ */
footer {
    width: 100%;
    padding: 0;
    margin: 0;
}

.footer-content {
    display: grid;
    grid-template-columns: 2.5fr 1fr 1fr 1fr;
    gap: 24px;
    padding: 0% 2.5%;
}

.footer-ax img{
    margin-bottom: 32px;
    width: 80px;
}

.footer-list p {
    font-family: 'K2D';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 140%;
    color: #FFFFFF;
    margin-bottom: 20px;
}

.footer-list ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-list li {
    font-family: 'K2D';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #FFFFFF;
}


.footer-copyrigth {
    margin-bottom: 128px;
    padding: 0% 2.5%;
}

.footer-copyrigth p {
    color: #FFFFFF;
    font-size: 16px;
    text-align: right;
}

.footer-copyrigth a {
    font-family: Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    text-align: right;
    transition: color 0.3s ease; 
}

.footer-copyrigth a:hover {
    color: #FFE100;
}

.footer-image {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;

    /* Apparition au scroll : montée + grandissement (scale 0.8 -> 1) en fondu.
       Déclenchée par la classe "is-in" ajoutée dans js/navbar.js. */
    opacity: 0;
    transform: translateY(28px) scale(0.8);
    /* plus lente (1.6s) et plus smooth (easing type "expo.out") */
    transition:
        opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.footer-image.is-in {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.footer-image img{
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}