/* Styles de base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body, html {
    height: 100%;
    /*font-family: var(--PromoFontFamily);*/
}
.container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--PromoRatioVz));
}

/* Espace 1 => LIGNE DU HAUT  */
.espace1 {
    display: flex;
    height: calc(100% - var(--PromoRatioVz));
    background-color: var(--PromoColorFondClair);
}

/* Assurez-vous que le contenu de la colonne A soit au-dessus de l'arrière-plan */
.espace1 > * {
    position: relative;
    z-index: 1; /* Rend le contenu visible par-dessus l'arrière-plan */
}

/* Espace 2 => LIGNE DU BAS */
.espace2 {
    display: flex;
    height: var(--PromoRatioVz);
    background-color: var(--PromoColorFondFonce);
}

.espace2 .colC {
    width: var(--PromoRatioHz);
    background-color: var(--PromoColorFondMoyen);
    padding-top: 13px;
    padding-bottom: 15px;
    padding-right: 20px;
    padding-left: 20px;
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
}

.bouton-container {
    display: flex;
    width: calc(100% - var(--PromoRatioHz));
    flex-grow: 1;
}

.bouton-container > div {
    flex: 1;
    background-color: var(--PromoColorFondFonce);
    color: var(--PromoColorTextClair);
    padding-top: 13px;
    padding-bottom: 15px;
    padding-right: 20px;
    padding-left: 20px;
    transition: background-color 0.3s; /* Ajoute une transition douce pour l'effet */
}

/* début Styles EFFETS img */
/* =================== */

/* Ajout d'un effet de fondu */
.fade-in {
    opacity: 0.2;
    animation: fadeEffect 1s forwards;
}

@keyframes fadeEffect {
    to {
        opacity: 1;
    }
}

/* fin Styles EFFETS img */
/* = = = = = = = = = */

/* début Styles EFFETS hover text */
/* =================== */

.espace2 .colD:hover,
.espace2 .colE:hover,
.espace2 .colF:hover,
.espace2 .colG:hover,
.espace2 .colH:hover,
.espace2 .colZ:hover,
.espace2 .colI:hover {
    background-color: var(--PromoColorFondFonceHover); /* 20% d'opacité à la couleur de fond */
    cursor: pointer;
}

.hover-underline-animation {
    display: inline-block;
    position: relative;
}

.hover-underline-animation::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--PromoColorTextClair);
    transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover::after {
    transform: scaleX(1);
}

.hover-underline-animation.left::after {
    transform-origin: bottom right;
}

.hover-underline-animation.left:hover::after {
    transform-origin: bottom left;
}

.hover-underline-animation.center::after {
    transform-origin: bottom center;
}

.hover-underline-animation.center:hover::after {
    transform-origin: bottom center;
}

.hover-underline-animation.right::after {
    transform-origin: bottom left;
}

.hover-underline-animation.right:hover::after {
    transform-origin: bottom right;
}

/* fin Styles EFFETS hover text */
/* = = = = = = = = = */

.colD:hover .hover-underline-animation::after {
    transform: scaleX(1); /* Active l'animation de soulignement lors du survol de colD */
}

.colE:hover .hover-underline-animation::after {
    transform: scaleX(1); /* Active l'animation de soulignement lors du survol de colD */
}

.colF:hover .hover-underline-animation::after {
    transform: scaleX(1); /* Active l'animation de soulignement lors du survol de colD */
}

.colG:hover .hover-underline-animation::after {
    transform: scaleX(1); /* Active l'animation de soulignement lors du survol de colD */
}

.colH:hover .hover-underline-animation::after {
    transform: scaleX(1); /* Active l'animation de soulignement lors du survol de colD */
}

.colI:hover .hover-underline-animation::after {
    transform: scaleX(1); /* Active l'animation de soulignement lors du survol de colD */
}

.colZ:hover .hover-underline-animation::after {
    transform: scaleX(1); /* Active l'animation de soulignement lors du survol de colD */
}

/* Solid border */
hr.solid {
    border-top: 3px solid hsl(60, 30%, 20%);
}

/* logo */
img.logo {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}