/* CSS dédié aux cartes de projets uniquement */

/* ==========================================
   STYLES COMMUNS À TOUTES LES CARTES
   ========================================== */

/* Structure de base des cartes */
.project-card {
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%);
    border-radius: 20px;
    padding: 0;
    transition: all 0.3s ease;
    cursor: pointer;
    overflow: hidden;
    width: 450px;
    height: 600px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    position: relative;
    display: flex;
    flex-direction: column;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-bottom: 0 !important;
}

.project-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 100%);
    z-index: 1;
}

.project-card > * {
    position: relative;
    z-index: 2;
}

/* Bandes décoratives en haut */
.project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    opacity: 0.7;
    z-index: 2;
}

/* Hover général */
.project-card:hover {
    transform: scale(0.99) translateY(-2px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.4);
}

/* Logos des moteurs - Styles génériques */
.project-logos {
    position: absolute;
    top: -5px;
    left: -7px;
    right: -7px;
    display: flex;
    justify-content: space-between;
    z-index: 25;
    pointer-events: none;
}

.logo-left, .logo-right {
    width: 65px;
    height: 65px;
    transform: ScaleX(1);
    border-radius: 50%;
    padding: 0;
    box-sizing: border-box;
    transition: all 0.3s ease;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
}

.logo-left img, .logo-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.3s ease;
}

/* Décoration Valknut */
.valknut-decoration {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    width: 150px;
    height: 150px;
    z-index: 15;
    pointer-events: none;
}

/* Titres */
.project-title {
    font-family: 'SpecialElite', monospace;
    font-size: 1.4rem;
    margin: 10px 15px 5px 15px;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
    border-radius: 10px;
    padding: 5px 20px;
    color: #000 !important;
    position: relative;
    z-index: 20;
    display: block;
    order: 1;
}

/* Images */
.project-image {
    margin: 0 25px;
    border-radius: 0; 
    width: calc(100% - 50px);
    height: 200px;
    display: block;
    position: relative;
    z-index: 20;
    object-fit: cover;
    order: 2;
}

/* Contenu principal */
.project-content {
    margin: 0;
    padding: 0;
    order: 3;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.project-main-content {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0;
    margin: 0 25px;
    padding: 15px;
    flex-grow: 1;
}

.project-main-content * {
    color: #000 !important;
}

/* Specs communes */
.project-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 15px;
    font-family: 'CourierThin', monospace;
    font-size: 0.75rem;
}

.project-spec {
    padding: 6px 10px;
    border-radius: 8px;
}

.spec-label {
    font-weight: bold;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.spec-value {
    color: #000 !important;
    font-size: 0.7rem;
    line-height: 1.2;
}

/* Description */
.project-description {
    font-family: 'JMH Typewriter', 'CourierPrime', monospace;
    font-size: 0.85rem;
    color: #000 !important;
    line-height: 1.3;
    text-align: justify;
    font-weight: 100;
    background: none;
    padding: 0;
    border: none;
    border-radius: 0;
    margin: 0;
    margin-top: 8px;
    padding-top: 8px;
    margin-left: 10px;
    margin-right: 10px;
    padding-bottom: 0px;
}

/* Liens */
.project-links {
    margin: 0 15px;
    border: none;
    border-radius: 10px 10px 0 0;
    padding: 30px 15px 15px 15px;
    order: 4;
    margin-top: auto;
    position: relative;
    z-index: 10;
}

.project-links::before {
    content: '';
    display: block;
    margin: -35px 10px 15px 10px;
}

.project-link {
    padding: 8px 15px;
    margin: 5px 3px;
    border-radius: 15px;
    text-decoration: none;
    font-family: 'CourierPrime', monospace;
    font-size: 0.8rem;
    font-weight: 100;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
}

/* Footer */
.project-footer {
    margin: 0 0 0 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0;
    padding: 2px 15px 3px 15px !important;
    color: #000 !important;
    font-size: 0.65rem !important;
    position: relative;
    z-index: 15;
    order: 5;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-family: 'VeteranTypewriter', monospace;
    opacity: 0.8;
}

.project-date {
    color: #000 !important;
    text-align: left;
}

.project-context {
    color: #000 !important;
    text-align: right;
    max-width: 60%;
}

/* ==========================================
   CARTE POWERPLAY (BRUN/ROUGE)
   ========================================== */

.powerplay-card {
    border: 3px solid #b9422d;
    background-image: url('../images/projects/Powerplay_BrownBG.jpg');
}

.powerplay-card::before {
    background: linear-gradient(90deg, #b9422d, #9a4030, #b9422d);
}

.powerplay-card:hover {
    border-color: #b9422d;
    box-shadow: 0 0px 50px rgba(211, 41, 7, 0.4);
}

/* Logos spécifiques Powerplay */
.powerplay-card .logo-left {
    border: 6px solid #b9422d;
    border-left: 2px;
    border-top: 2px;
    background: linear-gradient(145deg, 
        #ac4836 0%,
        #913a2d 25%,
        #c4774b 50%,
        #c8714a 75%,
        #a94735 100%);
}

.powerplay-card .logo-left img {
filter: sepia(100%) saturate(150%) hue-rotate(-20deg) brightness(0.6) contrast(1.2);
}

.powerplay-card .logo-right {
    border: 6px solid #b9422d;
    border-right: 2px;
    border-top: 2px;
    background: linear-gradient(145deg, 
        #ac4836 0%,
        #913a2d 25%,
        #c4774b 50%,
        #c8714a 75%,
        #a94735 100%);
}

.powerplay-card .logo-right img {
    filter: sepia(100%) saturate(150%) hue-rotate(-20deg) brightness(0.6) contrast(1.2);
}

.powerplay-card .valknut-decoration {
      filter: brightness(0) saturate(100%) invert(40%) sepia(80%) saturate(1000%) hue-rotate(-12deg) brightness(60%);
}

.powerplay-card .project-title {
    background: linear-gradient(145deg, 
        #a24433 0%,
        #913a2d 25%,
        #d07f50 50%,
        #c8714a 75%,
        #973f2f 100%);
    border: 2px solid #b9422d !important;
    color: #000 !important;
}

.powerplay-card .project-image {
    border: solid #b9422d;
    border-width: 3px 6px; 
}

.powerplay-card .project-main-content {
    background: linear-gradient(145deg, rgba(229, 140, 87, 0.7) 0%, rgba(154, 64, 48, 0.7) 100%), url('../images/projects/BrownBG.jpg') !important;
}

.powerplay-card .project-main-content * {
    color: #000 !important;
}

.powerplay-card .project-spec {
    background: rgba(229, 140, 87, 0.9) !important;
    border-left: 3px solid #b9422d;
}

.powerplay-card .spec-label {
    color: #000 !important;
}

.powerplay-card .spec-value {
    color: #000 !important;
}

.powerplay-card .project-description {
    border-top: 1px solid rgba(185, 66, 45, 0.6);
    color: #000 !important;
}

.powerplay-card .project-links {
    background: linear-gradient(145deg, 
        #9a4030 0%,
        #ce7c5b 40%,
        #bb7146 100%);
    border-top: 1px solid #b9422d;
}

.powerplay-card .project-link {
    background: rgba(154, 64, 48, 0.6);
    border: 1px solid #b9422d;
    color: #000 !important;
}

.powerplay-card .project-link:hover {
    background: #b9422d;
}

.powerplay-card .project-footer {
    background: linear-gradient(145deg, 
        rgb(155, 77, 61) 0%,
        rgb(177, 72, 53) 30%,
        rgb(207, 121, 78) 50%,
        rgba(200, 113, 74, 1) 70%,
        rgb(163, 64, 49) 100%) !important;
        opacity: 0.7;
}

.powerplay-card .project-date {
    color: #000 !important;
}

.powerplay-card .project-context {
    color: #000 !important;
}

/* ==========================================
   CARTE BOLT'N'PUNCH (ORANGE/JAUNE)
   ========================================== */

.bolt-n-punch-card {
    border: 3px solid rgb(255, 140, 0);
    background-image: url('../images/projects/BnP_YellowBG.jpg');
}

.bolt-n-punch-card::before {
    background: linear-gradient(90deg, rgb(255, 140, 0), rgb(255, 165, 0), rgb(255, 140, 0));
}

.bolt-n-punch-card:hover {
    border-color: rgb(255, 165, 0);
    box-shadow: 0 0 50px rgba(255, 140, 0, 0.4);
}

/* Logos spécifiques Bolt'N'Punch */
.bolt-n-punch-card .logo-left {
    border: 6px solid rgb(255, 140, 0);
    border-left: 2px;
    border-top: 2px;
    background: linear-gradient(145deg, 
        rgb(255, 180, 49) 0%,
        rgb(255, 177, 33) 25%,
        rgb(255, 210, 73) 50%,
        rgb(255, 177, 59) 75%,
        rgb(255, 210, 87) 100%);
}

.bolt-n-punch-card .logo-left img {
    filter: hue-rotate(180deg) sepia(100%) saturate(300%) hue-rotate(25deg) brightness(1.2);
}

.bolt-n-punch-card .logo-right {
    border: 6px solid rgb(255, 140, 0);
    border-right: 2px;
    border-top: 2px;
    background: linear-gradient(145deg, 
        rgb(255, 180, 49) 0%,
        rgb(255, 177, 33) 25%,
        rgb(255, 210, 73) 50%,
        rgb(255, 177, 59) 75%,
        rgb(255, 210, 87) 100%);
}

.bolt-n-punch-card .logo-right img {
    filter: sepia(100%) saturate(200%) hue-rotate(25deg) brightness(1.2);
}

.bolt-n-punch-card .valknut-decoration {
    filter: brightness(0) saturate(100%) invert(48%) sepia(100%) saturate(2000%) hue-rotate(25deg) brightness(115%);
}

.bolt-n-punch-card .project-title {
    background: linear-gradient(145deg, 
        rgb(255, 180, 49) 0%,
        rgb(255, 177, 33) 25%,
        rgb(255, 210, 73) 50%,
        rgb(255, 177, 59) 75%,
        rgb(255, 210, 87) 100%);
    border: 2px solid rgb(255, 140, 0) !important;
    color: #000 !important;
}

.bolt-n-punch-card .project-image {
    border: solid rgb(255, 140, 0); 
    border-width: 3px 6px; 
}

.bolt-n-punch-card .project-main-content {
    background: linear-gradient(145deg, rgba(245, 220, 140, 0.7) 0%, rgba(230, 200, 120, 0.7) 100%), url('../images/projects/YellowBG.jpg') !important;
}

.bolt-n-punch-card .project-main-content * {
    color: #000 !important;
}

.bolt-n-punch-card .project-spec {
    background: rgba(255, 230, 150, 0.9) !important;
    border-left: 3px solid rgb(255, 140, 0);
}

.bolt-n-punch-card .spec-label {
    color: #000 !important;
}

.bolt-n-punch-card .spec-value {
    color: #000 !important;
}

.bolt-n-punch-card .project-description {
    border-top: 1px solid rgba(255, 140, 0, 0.6);
    color: #000 !important;
}

.bolt-n-punch-card .project-links {
    background: linear-gradient(145deg, 
        rgb(255, 168, 69) 0%,
        rgb(255, 206, 107) 40%,
        rgb(255, 169, 89) 100%);
    border-top: 1px solid rgb(255, 140, 0);
}

.bolt-n-punch-card .project-link {
    background: rgba(255, 180, 80, 0.6);
    border: 1px solid rgb(255, 140, 0);
    color: #000 !important;
}

.bolt-n-punch-card .project-link:hover {
    background: rgb(255, 140, 0);
    color: #000 !important;
}

.bolt-n-punch-card .project-footer {
    background: linear-gradient(145deg, 
        rgba(184, 134, 11, 1) 0%,
        rgba(245, 220, 140, 1) 30%,
        rgba(255, 248, 220, 1) 50%,
        rgba(230, 200, 120, 1) 70%,
        rgba(205, 133, 63, 1) 100%) !important;
}

.bolt-n-punch-card .project-date {
    color: #000 !important;
}

.bolt-n-punch-card .project-context {
    color: #000 !important;
}

/* ==========================================
   CARTE EK-0 (VIOLET)
   ========================================== */

.ek0-card {
    border: 3px solid rgb(138, 43, 226);
    background-image: url('../images/projects/EK-0_PurpleBG.jpg');
}

.ek0-card::before {
    background: linear-gradient(90deg, rgb(138, 43, 226), rgb(148, 0, 211), rgb(138, 43, 226));
}

.ek0-card:hover {
    border-color: rgb(148, 0, 211);
    box-shadow: 0 0px 50px rgba(138, 43, 226, 0.4);
}

/* Logos spécifiques EK-0 */
.ek0-card .logo-left {
    border: 6px solid rgb(138, 43, 226);
    border-left: 2px;
    border-top: 2px;
    background: linear-gradient(145deg, 
        rgb(193, 88, 238) 0%,
        rgb(174, 43, 226) 25%,
        rgb(211, 129, 255) 50%,
        rgb(205, 89, 255) 75%,
        rgb(174, 63, 202) 100%);
}

.ek0-card .logo-left img {
    filter: sepia(100%) saturate(300%) hue-rotate(280deg) brightness(0.9);
}

.ek0-card .logo-right {
    border: 6px solid rgb(138, 43, 226);
    border-right: 2px;
    border-top: 2px;
    background: linear-gradient(145deg, 
        rgb(193, 88, 238) 0%,
        rgb(174, 43, 226) 25%,
        rgb(211, 129, 255) 50%,
        rgb(205, 89, 255) 75%,
        rgb(174, 63, 202) 100%);
}

.ek0-card .logo-right img {
    filter: sepia(100%) saturate(300%) hue-rotate(280deg) brightness(0.9);
}

.ek0-card .valknut-decoration {
    filter: brightness(0) saturate(100%) invert(20%) sepia(90%) saturate(4000%) hue-rotate(280deg) brightness(90%);
}

.ek0-card .project-title {
    background: linear-gradient(145deg, 
        rgb(193, 88, 238) 0%,
        rgb(174, 43, 226) 25%,
        rgb(211, 129, 255) 50%,
        rgb(205, 89, 255) 75%,
        rgb(174, 63, 202) 100%);
    border: 2px solid rgb(138, 43, 226) !important;
    color: #000 !important;
}

.ek0-card .project-image {
    border: solid rgb(138, 43, 226);
    border-width: 3px 6px; 
}

.ek0-card .project-main-content {
    background: linear-gradient(145deg, rgba(180, 140, 220, 0.7) 0%, rgba(160, 120, 200, 0.7) 100%), url('../images/projects/PurpleBG.jpg') !important;
}

.ek0-card .project-main-content * {
    color: #000 !important;
}

.ek0-card .project-spec {
    background: rgba(200, 170, 240, 0.8) !important;
    border-left: 3px solid rgb(138, 43, 226);
}

.ek0-card .spec-label {
    color: #000 !important;
}

.ek0-card .spec-value {
    color: #000 !important;
}

.ek0-card .project-description {
    border-top: 1px solid rgba(138, 43, 226, 0.6);
    color: #000 !important;
}

.ek0-card .project-links {
    background: linear-gradient(145deg, 
        rgb(188, 95, 255) 0%,
        rgb(199, 142, 255) 50%,
        rgb(199, 102, 255) 100%);
    border-top: 1px solid rgb(75, 0, 130, 1);
}

.ek0-card .project-link {
    background: rgba(138, 43, 226, 0.15);
    border: 1px solid rgb(138, 43, 226);
    color: #000 !important;
}

.ek0-card .project-link:hover {
    background: rgb(138, 43, 226);
    color: #000 !important;
}

.ek0-card .project-footer {
    background: linear-gradient(145deg, 
        rgba(106, 90, 205, 1) 0%,
        rgba(180, 140, 220, 1) 40%,
        rgba(221, 160, 221, 1) 60%,
        rgba(160, 120, 200, 1) 100%) !important;
}

.ek0-card .project-date {
    color: #000 !important;
}

.ek0-card .project-context {
    color: #000 !important;
}

/* ==========================================
   CARTE LES PIONS-POUSSIÈRES (GRIS)
   ========================================== */

.les-pions-poussieres-card {
    border: 3px solid rgb(120, 120, 120);
    background-image: url('../images/projects/LPP_NeutralBG.jpg');
}

.les-pions-poussieres-card::before {
    background: linear-gradient(90deg, rgb(120, 120, 120), rgb(140, 140, 140), rgb(120, 120, 120));
}

.les-pions-poussieres-card:hover {
    border-color: rgb(160, 160, 160);
    box-shadow: 0 0px 50px rgba(120, 120, 120, 0.4);
}

/* Logos spécifiques Les pions-poussières */
.les-pions-poussieres-card .logo-left {
    border: 6px solid rgb(120, 120, 120);
    border-left: 2px;
    border-top: 2px;
    background: linear-gradient(145deg, 
        rgba(169, 169, 169, 1) 0%,
        rgba(200, 200, 200, 1) 25%,
        rgba(245, 245, 245, 1) 50%,
        rgb(140, 140, 140) 100%);
}

.les-pions-poussieres-card .logo-left img {
    filter: grayscale(100%) brightness(0.6);
}

.les-pions-poussieres-card .logo-right {
    border: 6px solid rgb(120, 120, 120);
    border-right: 2px;
    border-top: 2px;
    background: linear-gradient(145deg, 
        rgba(169, 169, 169, 1) 0%,
        rgba(200, 200, 200, 1) 25%,
        rgba(245, 245, 245, 1) 50%,
        rgb(140, 140, 140) 100%);
}

.les-pions-poussieres-card .logo-right img {
    filter: grayscale(100%) brightness(0.6);
}

.les-pions-poussieres-card .valknut-decoration {
    filter: brightness(0) invert(47%);
}

.les-pions-poussieres-card .project-title {
    background: linear-gradient(145deg, 
        rgba(169, 169, 169, 1) 0%,
        rgba(200, 200, 200, 1) 25%,
        rgba(245, 245, 245, 1) 50%,
        rgb(140, 140, 140) 100%);
    border: 2px solid rgb(120, 120, 120) !important;
    color: #000 !important;
}

.les-pions-poussieres-card .project-image {
    border: solid rgb(120, 120, 120);
    border-width: 3px 6px; 
}

.les-pions-poussieres-card .project-main-content {
    background: linear-gradient(145deg, rgba(200, 200, 200, 0.7) 0%, rgba(180, 180, 180, 0.7) 100%), url('../images/projects/NeutralBG.jpg') !important;
}

.les-pions-poussieres-card .project-main-content * {
    color: #000 !important;
}

.les-pions-poussieres-card .project-spec {
    background: rgba(220, 220, 220, 0.9) !important;
    border-left: 3px solid rgb(120, 120, 120);
}

.les-pions-poussieres-card .spec-label {
    color: #000 !important;
}

.les-pions-poussieres-card .spec-value {
    color: #000 !important;
}

.les-pions-poussieres-card .project-description {
    border-top: 1px solid rgba(120, 120, 120, 0.7);
    color: #000 !important;
}

.les-pions-poussieres-card .project-links {
    background: linear-gradient(145deg, 
        rgba(169, 169, 169, 1) 0%,
        rgba(220, 220, 220, 1) 50%,
        rgba(245, 245, 245, 1) 100%);
    border-top: 1px solid rgb(47, 79, 79);
}

.les-pions-poussieres-card .project-link {
    background: rgba(169, 169, 169, 0.15);
    border: 1px solid rgb(120, 120, 120);
    color: #000 !important;
}

.les-pions-poussieres-card .project-link:hover {
    background: rgb(118, 118, 118);
    color: #000 !important;
}

.les-pions-poussieres-card .project-footer {
    background: linear-gradient(145deg, 
        rgba(119, 136, 153, 1) 0%,
        rgba(169, 169, 169, 1) 25%,
        rgba(220, 220, 220, 1) 50%,
        rgba(200, 200, 200, 1) 75%,
        rgba(180, 180, 180, 1) 100%) !important;
}

.les-pions-poussieres-card .project-date {
    color: #000 !important;
}

.les-pions-poussieres-card .project-context {
    color: #000 !important;
}