/**************
* BASE COLORS
**************/
:root {
    --color-bg-dark: #192153;
    --color-orange: #ff6200;
    --color-orange-hover: #e65500;
    --color-orange-light: #ff7d26;
    --color-bg-white: #fff;
    --color-shadow: rgba(0, 0, 0, 0.15);
}

/**************
* GLOBAL RULES & BACKGROUND
**************/
body {
    margin: 0;
    min-height: 100vh;
    background: url("../lib/assets/img/fond.png") no-repeat center center fixed;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow-x: hidden;
    /* Empêche les débordements horizontaux */
    font-family: "Futura Book", "Montserrat", Arial, sans-serif;
}

/**************
* TYPO/FONTS 
**************/
@font-face {
    font-family: "Futura Medium";
    src: url("../lib/assets/font/futura/futura medium bt.ttf") format("truetype");
}

@font-face {
    font-family: "Futura Bold";
    src: url("../lib/assets/font/futura/Futura Bold Italic font.ttf") format("truetype");
}

@font-face {
    font-family: "Futura Book";
    src: url("../lib/assets/font/futura/Futura Book font.ttf") format("truetype");
}

h1,
h2 {
    font-family: "Futura Bold";
    color: var(--color-bg-dark);
    margin: 5px 0 10px 0;
}

p,
a {
    font-family: "Futura Book";
    color: var(--color-bg-dark);
    margin: 5px 0;
    text-decoration: none;
}

a {
    transition: color 0.15s;
}

a:hover {
    color: var(--color-orange);
}

/**************
* MAIN TITLES 
**************/
.titre,
.titreSection {
    text-align: center;
    color: #fff;
    font-family: "Futura Bold";
    font-size: 2.9em;
    margin-top: 80px;
    margin-bottom: 50px;
}

.titreSection {
    margin-bottom: 80px;
}

/**************
* MENU 
**************/
/* Wrapper Gradient + Flex fourni côté HTML */
.menu-main {
    background: linear-gradient(120deg, var(--color-orange) 0%, #23306e 75%, var(--color-bg-dark) 100%);
    background: transparent;
    min-height: 70px;
    padding-top: 16px;
    padding-bottom: 10px;
    width: 100vw;
    margin-top: 0 !important;
    border-top: 0 !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 998;
}

.menu-bg {
    background: #fff;
    border-radius: 2em;
    box-shadow: 0 2px 12px var(--color-shadow);
    padding: 6px 12px;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.menu-bg .nav-link {
    color: var(--color-bg-dark);
    border-radius: 1em;
    font-family: "Futura Medium";
    font-weight: 500;
    font-size: 1.08em;
    padding: 6px 16px;
    transition: background 0.16s, color 0.18s;
}

.menu-bg .nav-link:hover,
.menu-bg .nav-link:focus {
    background: #f4f6f8;
    color: var(--color-orange);
}

.menu-bg .nav-link.active {
    background: var(--color-orange);
    color: #fff;
}

.menu-float-btn {
    background: var(--color-bg-white);
    border-radius: 2em;
    box-shadow: 0 3px 10px -3px var(--color-bg-dark);
    width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-bg-dark);
    font-size: 1.2em;
    transition: color 0.18s, background 0.18s, box-shadow 0.18s;
}

.menu-float-btn:hover {
    color: var(--color-orange);
    background: #f6f6fd;
    box-shadow: 0 6px 18px -4px var(--color-orange-light);
}

/**************
* LAYOUT BENTO (CARTES)
**************/
.gBento-left,
.gBento-right {
    margin: 28px 0;
    width: 100%;
    max-width: 650px;
    padding: 24px;
    background: var(--color-bg-white);
    color: var(--color-bg-dark);
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 22px var(--color-shadow);
}

.gBento-left {
    border-radius: 0 30px 30px 0;
    margin-right: auto;
}

.gBento-right {
    border-radius: 30px 0 0 30px;
    margin-left: auto;
}

.gBentoMid {
    border-radius: 22px;
    width: 100%;
}

/* Petit Bento Missions/Compétences */
.pBento,
.mBento {
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 170px;
    min-width: 130px;
    min-height: 140px;
    margin-top: 18px;
    padding: 18px 8px;
    background: var(--color-bg-white);
    color: var(--color-bg-dark);
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    box-shadow: 0 4px 12px var(--color-shadow);
}

.mBento {
    height: 260px;
}

/**************
* BENTO CONTAINERS
**************/
.alignBento {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

/**************
* MODALS 
**************/
.modal-custom-container {
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 9999;
}

.modal-custom-container.show {
    opacity: 1;
    pointer-events: auto;
}

.modal-custom {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 15px 30px var(--color-shadow);
    padding: 40px 20px 24px 24px;
    max-width: 720px;
    max-height: 90vh;
    width: 96vw;
    overflow-y: auto;
    position: relative;
}

.modal-custom button {
    position: absolute;
    top: 18px;
    right: 18px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--color-orange);
    transition: color 0.15s;
}

.modal-custom button:hover {
    color: var(--color-orange-hover);
}

.modal-custom p,
.modal-custom h1 {
    word-break: break-word;
    font-family: "Futura Book";
    color: var(--color-bg-dark);
}

/**************
* BOUTONS MODERNE (PLUS & SCROLL TOP)
**************/
button.open-modal,
.e5bouton {
    background: var(--color-orange);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 2px 5px var(--color-shadow);
    transition: transform 0.19s, background 0.2s;
}

button.open-modal:hover,
.e5bouton:hover {
    background: var(--color-orange-hover);
    transform: scale(1.1);
}

button.open-modal:active,
.e5bouton:active {
    background: var(--color-orange-light);
    transform: scale(0.95);
}

/* SCROLL TO TOP */
#scroll {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 10001;

    background: linear-gradient(135deg, #ff6200 30%, #192153 100%);
    color: #fff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 24px rgb(25 33 83 / 25%);
    min-width: 60px;
    min-height: 60px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 2rem;
    outline: none;
    cursor: pointer;
    transition: all .23s cubic-bezier(.34, .95, .66, 1.17);
    opacity: 0.92;
    overflow: visible;
}

#scroll:hover,
#scroll:focus {
    background: linear-gradient(135deg, #ff6200 15%, #3963ff 85%);
    color: #ffd89b;
    transform: translateY(-8px) scale(1.10) rotate(-6deg);
    box-shadow: 0 12px 32px 2px #ff620055, 0 4px 40px 2px #192153aa;
    opacity: 1;
}

#scroll i {
    z-index: 2;
    position: relative;
    pointer-events: none;
}

.scroll-anim {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 65px;
    height: 65px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(rgba(255, 98, 0, 0.20), rgba(25, 33, 83, 0.11) 72%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
    animation: scrollPulse 2.9s infinite cubic-bezier(.47, 2.02, .31, -0.36);
    pointer-events: none;
}

@keyframes scrollPulse {
    0% {
        box-shadow: 0 0 0 0 #ff620044, 0 0 8px 3px #19215355;
        opacity: 1;
    }

    70% {
        box-shadow: 0 0 0 14px #ff620010, 0 0 20px 18px #19215322;
        opacity: 0.8;
    }

    100% {
        box-shadow: 0 0 0 30px #ff620000, 0 0 40px 44px #19215300;
        opacity: 0.4;
    }
}

@media (max-width: 600px) {
    #scroll {
        min-width: 44px;
        min-height: 44px;
        font-size: 1.3rem;
    }

    .scroll-anim {
        width: 47px;
        height: 47px;
    }
}


/**************
* RESPONSIVE (PETITES LARGEURS)
**************/
@media (max-width: 1070px) {

    .titre,
    .titreSection {
        font-size: 2.2em;
    }

    .gBento-left,
    .gBento-right {
        max-width: 99vw;
    }
}

/* Menu adaptatif et scrollable horizontalement */
@media (max-width: 900px) {
    .menu-bg {
        padding: 4px 4px;
    }

    .menu-bg .nav-link {
        font-size: 1em;
        padding-left: 7px;
        padding-right: 7px;
    }
}

@media (max-width: 700px) {

    .gBento-left,
    .gBento-right {
        padding: 10px;
    }

    .pBento,
    .mBento {
        width: 97vw;
        min-width: unset;
    }
}

/* Le menu central devient scrollable */
@media (max-width: 600px) {
    .menu-bg {
        overflow-x: auto;
        border-radius: 1.1em;
    }

    .menu-bg .nav-link {
        font-size: 0.95em;
    }

    .menu-main {
        padding-left: 2px;
        padding-right: 2px;
    }

    .titre,
    .titreSection {
        margin-top: 36px;
        font-size: 1.2em;
    }
}

/* Modals maximum pour mobile */
@media (max-width: 500px) {
    .modal-custom {
        padding: 14px 6px;
        font-size: 0.98em;
    }
}

/* BONUS : cacher le texte du bouton scroll top sur mobile */
@media (max-width: 700px) {
    #IDdubouton i {
        font-size: 24px;
    }
}

/* === ANIMATIONS UX/UI BENTOS === */
/* Apparition animée premium des cartes Bento */
@keyframes bentoFadeUp {
    from {
        opacity: 0;
        transform: translateY(60px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Base Bento */
.gBento-left,
.gBento-right,
.gBentoMid,
.pBento,
.mBento {
    opacity: 1;
    transition: 
        box-shadow 0.28s cubic-bezier(.18, 1.18, .44, 1),
        transform 0.26s cubic-bezier(.56, 1.38, .43, 1.09),
        border 0.19s;
    will-change: transform, box-shadow;
    position: relative;
    z-index: 1;
    /* Fixe : border permanente, couleur transparente pour ne pas modifier la chasse au hover */
    border: 2px solid transparent;
}

/* Etat masqué d'entrée (JS: .bento-anim) */
.bento-anim {
    opacity: 0;
    /* pas de transform de rentrée ici, sinon cause glitch en sortie ! */
}

/* Apparition animée : JS toggle .bento-visible à chaque entrée viewport */
.bento-visible {
    animation: bentoFadeUp 0.78s cubic-bezier(.16, 1.25, .62, 1) forwards;
    opacity: 1 !important;
}

/* Hover & focus effet premium (lift + glow) */
.gBento-left:hover,
.gBento-right:hover,
.gBentoMid:hover,
.pBento:hover,
.mBento:hover,
.gBento-left:focus-within,
.gBento-right:focus-within,
.gBentoMid:focus-within,
.pBento:focus-within,
.mBento:focus-within {
    box-shadow: 0 10px 36px 0 #ff700033, 0 1.5px 28px 9px #181c4e42;
    /* Seulement couleur border change, la largeur reste IDENTIQUE ! */
    border-color: #ff7000b3;
    z-index: 2;
}

/* Glow accent (animé) */
.gBento-left::before,
.gBento-right::before,
.gBentoMid::before,
.pBento::before,
.mBento::before {
    content: "";
    pointer-events: none;
    position: absolute;
    top: -11px;
    left: -11px;
    right: -11px;
    bottom: -11px;
    border-radius: 2em;
    box-shadow: 0 0 0 0 #ff700033; /* fix syntax ici */
    opacity: 0;
    transition: opacity 0.30s cubic-bezier(.33, .99, .44, 1);
    z-index: 0;
}

.gBento-left:hover::before,
.gBento-right:hover::before,
.gBentoMid:hover::before,
.pBento:hover::before,
.mBento:hover::before,
.gBento-left:focus-within::before,
.gBento-right:focus-within::before,
.gBentoMid:focus-within::before,
.pBento:focus-within::before,
.mBento:focus-within::before {
    opacity: 1;
}

/* Responsive (hover atténué sur mobile) */
@media (max-width: 700px) {

    .gBento-left:hover,
    .gBento-right:hover,
    .gBentoMid:hover,
    .pBento:hover,
    .mBento:hover {
        box-shadow: 0 5px 12px 4px #ff700023;
        border-width: 2px; /* Toujours la même largeur */
        border-color: #ff700029;  /* Atténue couleur sur mobile */
        transform: none;
    }

    .gBento-left::before,
    .gBento-right::before,
    .gBentoMid::before,
    .pBento::before,
    .mBento::before {
        box-shadow: 0 1px 8px 3px #ff700017;
        border-radius: 1.2em;
    }
}

/* ----- FIN ------ */