body {
    background-color: var(--bs-blue-magiline);
}


/* Gestion du hover pour les cartes */
.content-opacity > div {
    opacity: 0.8;
    transform: scale(0.98);
    transition: .3s;
}
/* si – et seulement si – un enfant est survolé */
.content-opacity:has(> div:hover) > div {
    opacity: .6;
    transform: scale(.96);
}
/* celui qui est survolé est remis en avant */
.content-opacity:has(> div:hover) > div:hover {
    opacity: 1;
    transform: scale(1);
}
.imagi-old:hover h2, .imagi-x:hover h2 {
    color: var(--bs-orange-magiline);
    transition: 0.2s;
}


/* Gestion de la souris */
.imagi-x >.row:hover, 
.imagi-old >.row:hover {
    cursor: pointer;
}
#cardsRow.is-open .imagi-x >.row:hover, 
#cardsRow.is-open .imagi-old >.row:hover {
    cursor: auto;
}


/* le conteneur sert d'ancre à l'absolu */
#cardsRow { 
    position: relative; 
}
/* État initial */ 
#cardsRow > .col {
    width: 50% !important;
    overflow: hidden;
    min-width: 0;
    position: relative; 
    z-index: 0;
    transition:
        width .7s ease .35s,
        transform .30s ease,
        opacity .28s ease;
}


/* Animation des blocs */
#cardsRow.open-left .imagi-x, 
#cardsRow.open-right .imagi-old { 
    width: 100% !important; 
    transition: 
        width .7s ease; 
}
#cardsRow.open-right .imagi-x, 
#cardsRow.open-left .imagi-old { 
    width:   0% !important;
}

/* Colonne FERMÉE : invisible + retirée du flux (open + closing) */
#cardsRow.open-left  .imagi-old,
#cardsRow.closing-left  .imagi-old {
    position: absolute; 
    right: 0; 
    top: 0; 
    bottom: 0;
    opacity: 0; 
    visibility: hidden; 
    pointer-events: none; 
    z-index: 1;
}
#cardsRow.open-right .imagi-x,
#cardsRow.closing-right .imagi-x {
    position: absolute; 
    left: 0; 
    top: 0; 
    bottom: 0;
    opacity: 0; 
    visibility: hidden; 
    pointer-events: none; 
    z-index: 1;
}

/* Colonne OUVERTE au-dessus pendant l'anim */
#cardsRow.open-left  .imagi-x,
#cardsRow.open-right .imagi-old { 
    z-index: 2; 
}
/* Ancrer la colonne droite (imagi-old) à droite
   ⇒ la largeur se réduit de gauche → droite */
#cardsRow.open-right .imagi-old,
#cardsRow.closing-right .imagi-old {
  margin-left: auto;
}


/* Animation du coffret et du titre */
.imagi-x .imagi-x-content, 
.imagi-old .imagi-old-content { 
    width: 100% !important;
    transition : 
        width .7s ease .5s;
}

#cardsRow.open-left  .imagi-x .imagi-x-content,
#cardsRow.open-right .imagi-old .imagi-old-content { 
    width: 50% !important; 
    transition: 
        width .28s; 
}


/* Désactivation du hover figé en mode ouvert */
#cardsRow.open-left > .imagi-x, 
#cardsRow.open-right > .imagi-old, 
#cardsRow.open-left:hover > .imagi-x, 
#cardsRow.open-right:hover > .imagi-old
 {
    opacity: 1 !important;
    transform: none !important;
}
#cardsRow.is-open .imagi-x .row, 
#cardsRow.is-open .imagi-old .row { 
    transform: scale(1); 
    opacity: 1; 
} 
#cardsRow.open-left  .imagi-x  h2,
#cardsRow.open-right .imagi-old h2 { 
    color: var(--bs-orange-magiline); 
}


/* Animation des contenus dynamiques */
.imagi-x #imagi-x-download, 
.imagi-old #imagi-old-connexion {
    display: flex;
    align-items: center;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transition:
      max-height .45s cubic-bezier(0.17, 0.53, 1, 0.52),
      opacity   .2s ease,
      visibility 0s linear .5s;
}

 #cardsRow.open-left  .imagi-x  #imagi-x-download,
#cardsRow.open-right .imagi-old #imagi-old-connexion {
    max-height: 1200px;
    opacity: 1;
    visibility: visible; 
    transition:
        max-height .5s cubic-bezier(.2,.7,.2,1) .45s,
        opacity   .3s ease .55s,
        visibility 0s .35s;
}


/* Gestion du bouton retour : caché par défaut, visible en mode ouvert */ 
.imagi-x .back, 
.imagi-old .back { 
    transition: 
        opacity .2s ease, 
        visibility .2s ease; 
    visibility: hidden; 
    opacity: 0; 
    z-index: 10;
    width: fit-content;
} 
#cardsRow.open-left  .imagi-x  .back,
#cardsRow.open-right .imagi-old .back { 
    visibility: visible; 
    opacity: 1; 
}