/* Palette  des couleur: https://coolors.co/e8a062-823922-00a24b-fdc032-ffffff-000000*/

* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
    width: auto;
}

/********** Entête du site ************/
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /*display: flex;*/
    /*align-items: flex-start;*/
    /*justify-content: space-between;*/
    height: 80px;
    /*overflow: hidden; !* pour voir si logo dépasse la hauter de header *!*/
    background-color: #1C1C1C;
    z-index: 1000; /* au dessus du tout */
}

.menu-icon {
    display: inline-block;
    cursor: pointer;
    position: absolute;
    left: 22px;
    top: 22px;
    width: 33px;
    /*margin-left: 22px;*/
    /*margin-top: 22px;*/
}

.logo-site {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%); /*afin de décaler le logo vers l'arrière de la moitié de sa largeur sur l'axe X et Y*/
    height: 66px;
    /*margin-top: 7px;*/
}

/* Для второй странички */
a img.logo-site {
    transition: transform 0.3s ease;
    cursor: pointer;
}
/* Для компьютеров */
a img.logo-site:hover {
    transform: translateX(-50%) translateY(-50%) scale(1.1);
}

/* Для телефонов */
a img.logo-site:active {
    transform: translateX(-50%) translateY(-50%) scale(0.8);
}

/* C'est une béquille pour HEADER ! */
/*.header-spacer { !*Les mêmes marges que pour l'icône du menu, y compris les dimensions nécessaires pour un centrage correct *!*/
/*    width: 33px;*/
/*    height: 22px; !* pour s'assurer *!*/
/*    margin-right: 22px;*/
/*    margin-top: 22px;*/
/*}*/

.nav-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: fixed;
    top: 80px; /* чтобы не перекрывать хедер, прозрачный */
    left: 0;
    width: 100%;
    z-index: 999; /* прячется под хедером */
    background-color: #1C1C1C;
    padding-bottom: 57px;
    box-shadow: 0 2px 34px 0 rgba(0, 0, 0, 0.6); /* X  Y  blur spread */
    transform: translateY(-100%); /* спрятано выше экрана */
    transition: transform 0.4s ease; /* плавная анимация */
    pointer-events: none; /* невидимое меню не перехватывает события */
}

.nav-menu.open { /* Quand java script desside que c'est open il attribut cette classe et on affiche notre menu de nav */
    transform: translateY(0); /* выезжает вниз */
    pointer-events: auto; /* когда открыто — работает нормально */
    box-shadow: 0 2px 34px 0 rgba(0, 0, 0, 0.7), 0 42px 0 0 rgba(28, 28, 28, 1);
}

.nav-menu a {
    display: block;
    font-family: Merriweather, serif;
    font-size: 36px;
    text-align: center;
    padding: 18px 0;
    color: white;
    text-decoration: none; /* убрать нижнее подчеркиване у ссылок так как у а по дефолту всегда подчеркнуто */
    font-weight: 700;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    background-color: #34495F;
    line-height: normal;
    /*transform: scale(1); !* обычный размер, и так по умолчанию *!*/
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* при наведении — уменьшается и  затемняется */
/* Для компьютеров */
.nav-menu a:hover {
    transform: scale(0.97);
    opacity: 0.7;
}

.nav-menu a:active {
    transform: scale(0.97);
    opacity: 1;
}

/* активный блок из меню тоже уменьшена, вместо визитид */
.nav-menu a.active {
    opacity: 0.7;
    transform: scale(1);
    pointer-events: none;
}

nav.nav-menu a:first-child {
    background-color: #1E2A3A;
}

.close-icon {
    display: none; /* скрыта по умолчанию */
    position: absolute;
    left: 22px;
    top: 22px;
    width: 24px;
    height: 24px; /* добавь фиксированную высоту */
    cursor: pointer;
}


/********** Contenu principal ************/
/*.section-with-bg {*/
/*    background-image: url('../img/montage-fond-farming.png');*/
/*    background-attachment: fixed; !* фото фиксировано, текст скользит *!*/
/*    background-size: contain;*/
/*    background-position: center;*/
/*    min-height: 300px; !* высота "окошка" *!*/
/*    padding: 0; !* убери padding который я добавлял для текста *!*/
/*}*/

body {
    font-family: Roboto, sans-serif;
    font-weight: 300; /* Light */
    line-height: 1.406; /* multiplié par font-size */
    font-size: 18px;
    color: #FFFFFF;
    background-color: #1C1C1C;
}

main {
    margin-top: 80px; /* la même hauteur que l'en-tête, afin que le contenu ne remonte pas vers le haut et ne se cache pas sous l'en-tête */
    padding: 45px 30px 60px;
}

a.to-top {
    display: none; /* JavaScript remplacera ensuite cette valeur par Flex */
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #E8A062;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: white;
}

figure {
    margin: 0;
}

h1 {
    font-family: Merriweather, serif;
    line-height: normal; /* auto */
    font-weight: 700; /* bold (multiplicateur) */
    font-size: 48px;
    margin-top: 0; /* si non normilize ajout ses proprétés comme 31.qqch */
    margin-bottom: 25px;
}
main#second-page section h1 {
    text-align: start;
    width: 236px;
}
main#second-page section.first-section h1 {
    margin-bottom: 0;
}

h3 {
    margin-top: 180px;
    margin-bottom: 40px;
}

figcaption {
  font-size: 11px;
  margin-bottom: 35px;
}

strong em {
    font-weight: 500; /* Medium  (multiplicateur) */
}

.bref {
    margin-top: 100px;
}

aside {
    margin-top: 200px;
}

section {
    margin-bottom: 160px;
}

div.images-group {
    display: flex;
    flex-direction: row;
    gap: 25px;
    overflow-x: scroll; /* или auto */
}

img.screenshot {
flex-shrink: 0; /* картинки не сжимаются */
}

img.cover {
    max-width: 320px;
    width: 100%;
}






/********** Pied de page du site ************/
footer {
    text-align: center;
    height: 175px;
}


footer div.social-icons {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    justify-content: center;
    gap: 50px;
    height: 92px;
    }

footer div.social-icons img {
    width: 58px;
    box-shadow: 7px 8px 7px 1px rgba(0,0,0,0.85);
    transition: transform 0.2s ease;
}

footer div.social-icons img:hover {
    transform: scale(1.2);
}

footer div.social-icons img:active {
    transform: scale(0.8);
}



/************ Pagination Indicators *************/
.dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    transition: background-color 0.3s ease;
}

.dot.active {
    background-color: #E8A062; /* твой акцентный цвет */
}







@media (min-width: 720px) {
    main#second-page section h1 {
        font-size: clamp(2.5vw, 3.33vw, 3.33vw);
        width: 100%;
    }

    main#second-page section.first-section h1 {
        /*height: auto;*/
    }

    main#second-page section.first-section p.release-date {
        width: 100%;
    }

    main#second-page p {
        width: 27vw;
        font-size: clamp(0.9375vw, 1.25vw, 1.25vw); /* desctop, laptop, ... */
    }

    main#second-page section {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        align-content: flex-start;
    }

    img.screenshot {
        /*width: 500px;*/
        width: clamp(26.04vw, 34.72vw, 34.72vw);
    }

    .presentation {
        display: flex;
        align-items: flex-start;
        flex-direction: row;
        /*gap: 40px;*/
        gap: clamp(2.08vw, 2.77vw, 2.77vw);
    }

    div.images-group {
        flex-direction: row;
        gap: 15px;
        width: clamp(26.04vw, 34.72vw, 34.72vw);
    }

    img.cover {
        width: clamp(180px, 22vw, 300px);
        height: 100%;
    }

    main#second-page section {
        margin-bottom: clamp(5.55vw, 7.4vw, 7.4vw); /* X/1920 * 100, X/1440 * 100, ... (X=106.66) */
    }

    .dots {
        display: none;
    }
}