/* --- FEUILLE DE STYLES POUR LA PAGE DE L'ARTICLE --- */

/* --- DÉBUT LIEN AVEC TYPOGRAPHIE ROBOTO DE GOOGLE FONTS --- */
@import url("https://use.typekit.net/lwf3okz.css");

* {margin: 0;}
img {border-radius: 8px;}
/* --- DÉBUT DU CORPS DE LA PAGE --- */
body {
    overflow-x: hidden;
    background-color: #f1f1f0;
    color: #333;
}

header {
    height: 192px;
}

h1 {
    font-family: "bricolage-grotesque", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 76px;
    margin-top: 64px;
    margin-bottom: 40px;
    color: #000000;
}

h2 {
    font-family: "miriam-libre", sans-serif;font-weight: 700;
    font-style: normal;
    font-size: 27px;
    margin-top: 8px;
    margin-bottom: 8px;
    color: #000000;
}

h3 {
    font-family: "miriam-libre", sans-serif;font-weight: 400;
    font-style: normal;
    font-size: 25px;
    margin-top: 24px;
    margin-bottom: 8px;
    color: #000000;
}

p { 
    font-family: "miriam-libre", sans-serif;font-weight: 400;
    font-style: normal;
    font-size: 20px;
    margin-bottom: 24px; 
    line-height: 1.2;
}

/* --- DÉBUT BARRE DE NAVIGATION --- */
.navbar {
    font-family: "miriam-libre", sans-serif;font-weight: 400;
    font-style: normal;
    font-size: 30px;
    height: 55px; /* 56px moins 1 pour le border-bottom de 1 px */
    top: 0;
    right: 0px;
    z-index: 9000;
    align-items: right;
    max-width: 1840px;
    position: sticky;
    margin: 0 auto;
    gap: 16px;
    padding-top: 20px;
}
.navbar :hover {
        color: #FF2AAD;
}


.logo { grid-column: span 10; font-weight: 800; color: rgb(0, 0, 0);bottom: -42px; /* Marge de 16px depuis le bas de l'écran */
    left: 16px; position: fixed; z-index: 5000; line-height: 0.8; margin-left : 16px; }

.logo :hover {
        color: #FF2AAD;
}

::selection {
  background: #B8FF3C;
  color: #000000;
}

.parties { grid-column: span 10; font-weight: 800; color: rgb(0, 0, 0);bottom: 8%; /* Marge de 16px depuis le bas de l'écran */
    right: 5%; position: fixed; z-index: 5000; line-height: 0.8; margin-left : 16px; line-height: 2em; }
/* --- FIN BARRE DE NAVIGATION --- */

/* --- DÉBUT DES LIENS HYPERTEXTE --- */
a {
    color: #000000;
    text-decoration: none;
}

a:hover {
    color: #00000090;
    background-color: #d1b202;
    /*text-decoration: underline;*/
}
/* Nouveau style pour le survol du menu fixe */
.parties a:hover {
    text-decoration: underline dotted black; /* Soulignement pointillé noir */
    background-color: transparent; /* Conserver le fond transparent ou le retirer */
    color: #000000; /* Conserver la couleur du texte noir */
}
/* --- FIN DES LIENS HYPERTEXTE --- */

/* --- DÉBUT CONTENEUR PRINCIPAL --- */
.container {
    max-width: 1136px; /* largeur maximale de la grille */
    margin: 0 auto; /* centrage horizontal */
    padding: 0 72px; /* marge extérieure de 72px de chaque côté */
    /*background-color: #add25d;*/
}

.grid-composition {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* Grille de 12 colonnes *//* séparation entre les rangées */
    gap: 16px; /* séparation entre les rangées */
    position: relative;
}
/* --- FIN CONTENEUR PRINCIPAL --- */


.INTRO {
    padding-right:  185px;
}

.decoupe {
    column-count: 2; 
    /*background-color: yellowgreen;*/
}


.decal { /* décalage entre les notes de bas de page et le footer */
    height: 80px;
}


/* --- DÉBUT ÉLÉMENTS DE LA GRILLE DE COMPOSITION - GRILLE DE 12 COLONNES --- */
.item {
    /*background-color: rgba(255, 255, 255, 0.6);*/
    /*padding: 24px;*/
    border-radius: 8px;
    /*border: 1px dotted #bababa;*/ /* une bordure de points de 1 pixel autour du bloc */
    position: relative;
    z-index: 5;
    overflow: hidden;
}

.item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}




/* --- DÉBUT ÉLÉMENTS DE LA GRILLE DE COMPOSITION - GRILLE DE 12 COLONNES --- */
.header { height: 50px; grid-column: span 12;  text-align: center; }

.image {
height: 380px; grid-column: 7/span 3;  border: none;         /* garde les proportions */
}


video, img { width: 75%; height: 100%; }

/* --- ANIMATIONS DE TRANSITION --- */
body {
    animation: fadeInPage 0.5s ease-in-out forwards;
}

.fade-out {
    animation: fadeOutPage 0.5s ease-in-out forwards !important;
}

@keyframes fadeInPage {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOutPage {
    from { opacity: 1; }
    to { opacity: 0; }
}

.image-hover-container {
    position: relative;
    width: 75%; /* Aligné sur votre style actuel pour video, img */
    height: auto;
    display: inline-block;
}

/* On force les deux images à occuper le même espace */
.image-hover-container img {
    width: 100%;
    height: 100%;
    transition: opacity 0.4s ease-in-out; /* Pour un effet fondu */
    border-radius: 8px; /* On garde vos arrondis existants */
}

/* L'image de survol est cachée par défaut et placée par-dessus l'autre */
.img-survol {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

/* Au survol du conteneur, l'image de dessus devient visible */
.image-hover-container:hover .img-survol {
    opacity: 1;
}

/* Optionnel : cacher l'image de base au survol si la 2ème a de la transparence */
.image-hover-container:hover .img-base {
    opacity: 0;
}