/* Conteneur général du procès-verbal */
/* Fiche test - DOM 5/5 : surcharge solution specifique Meurtres sur l'Atlantique */

.pv-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
    color: #665366;
    line-height: 1.6;
}

/* Colonnes */
.pv-sidebar {
    width: 25%;
    text-align: center;
    vertical-align: top;
    padding: 15px;
}

.pv-content {
    width: 75%;
    text-align: justify;
    vertical-align: top;
    padding: 40px;
}

/* Style texte officiel */
.pv-official {
    color: #45486e;
	text-shadow: 1px 1px 1px #9e9db5, -1px 0px 1px #e4e7d1;
}

/* En-tête république */
.pv-header {
    text-decoration: underline;
    font-weight: bold;
    display: block;
    margin-bottom: 20px;
}

/* Titre principal */
.pv-title {
    display: block;
    text-align: center;
    font-size: var(--type-size-test-special-title);
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

/* Sous-ligne décorative */
.pv-separator {
    display: block;
    text-align: center;
    margin: 20px 0;
    font-weight: bold;
    letter-spacing: 2px;
}

/* Paragraphes */
.pv-text {
    text-align: justify;
    margin-bottom: 18px;
}

/* Mise en valeur */
.pv-strong {
    font-weight: bold;
    text-transform: uppercase;
}

.pv-code {
    display: block;
    background: #f4f1e8;
    border: 1px solid #c7bea9;
    padding: 18px 22px;
    margin: 20px 0;
	font-family: var(--font-test-code);
    font-size: var(--type-size-test-code);
    line-height: 1.45;
    color: #2f2f2f;
    white-space: pre-wrap;
    overflow-x: auto;
    text-shadow: none;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.06);
}

/* Responsive */
@media screen and (max-width: 900px) {
    .pv-table,
    .pv-table tbody,
    .pv-table tr,
    .pv-table td {
        display: block;
        width: 100%;
    }

    .pv-sidebar,
    .pv-content {
        width: 100%;
        padding: 20px;
    }

    .pv-title {
        font-size: var(--type-size-test-special-title);
    }
}

/* Conteneur principal Meurtres sur atlantique*/

    .investigation-board {  
        padding: 20px;
        box-sizing: border-box;
        max-width: 100%;
    }

	.testimony-card {
		background-color: #00000024;
		border-radius: 5px;
		/* box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2); */
		margin-bottom: 50px;
		max-width: 850px;
		width: 100%;
		box-sizing: border-box;
		margin-left: auto;
		margin-right: auto;
		overflow: hidden;
	}

    /* Image de localisation large en bannière */
    .location-banner {
        width: 100%;
        height: auto;
        display: block;
    }

    /* En-tête avec nom et ID */
	.card-header {
		background-color: rgba(0, 0, 0, 0.1);
		color: #ffffff;
		padding: 10px 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-transform: uppercase;
		/* border: 10px #000000; */
	}

   /* Style du titre du suspect */
	.card-header span:first-child {
		font-size: var(--type-size-test-special-title);
		letter-spacing: 2px;
		border-left: 5px solid #e74c3c; /* Barre d'accentuation rouge */
		padding-left: 15px;
		color: #ffffff;
		text-shadow: 2px 2px 0px #000;
	}

	/* Badge du numéro de témoignage */
	.id-badge {
		border-radius: 0; /* Carré pour le style rétro */
		font-weight: bold;
		transform: rotate(2deg); /* Effet étiquette mal collée */
		background: #e9302cd1;
		padding: 2px 10px;
		font-size: var(--type-size-test-special-title);
		box-shadow: 2px 2px 0px rgba(0,0,0,0.2);
	}

	/* Style pour la touche de clavier */
	kbd {
		background: #f0f0f0;
		border: 1px solid #aaa;
		border-radius: 3px;
		box-shadow: 0 2px 0 #bbb;
		padding: 1px 5px;
		font-family: var(--font-keyboard);
		font-weight: bold;
	}

	

	/* Photo suspect style "Polaroid" */
	.portrait-container {
		background: #fff;
		padding: 5px;
		border: 1px solid #ddd;
		box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
	}

	/* Mise en évidence de la réponse à donner */
	.response-needed {
		color: #e67e22;
		font-weight: bold;
		border: 1px dashed #e67e22;
		padding: 5px;
		text-align: center;
		margin: 10px 0;
		background: #fff5e6;
	}

	/* Liste dans la déduction */
	.analysis-sticky ul {
		margin: 10px 0 0 0;
		padding-left: 20px;
		list-style-type: square;
	}

	.sticky-title {
		font-weight: bold;
		border-bottom: 1px solid rgba(0,0,0,0.1);
		padding-bottom: 5px;
		margin-bottom: 10px;
	}

	.icon-svg {
		width: 20px; 
		height: 20px; 
		vertical-align: middle; 
		margin-right: 5px;
	}

    /* Section Portrait + Témoignage */
    .main-body {
        display: flex;
        padding: 20px;
        gap: 20px;
    }

    .suspect-portrait {
        border: 3px solid #333;
        background: #eee;
		max-height: 150px;
    }

    .testimony-content {
		flex: 1;
		color:  #66737be0; /* Un gris foncé très lisible */
		/* On supprime l'ombre bleue peu lisible */
		text-shadow: none; 
		 font-weight: bold;
	}

	/* --- INSTRUCTIONS ET CONDITIONS (Style "Tampon" ou "Machine rouge") --- */
	.condition-info {
		font-size: var(--type-size-test-special-small);
		/* text-shadow: none; */
		color: #6f6f6f;
		font-weight: bold;
		/* background: rgb(233 233 233); */
		/* padding: 4px 8px; */
		/* border: 1px solid rgba(169, 32, 32, 0.2); */
		/* border-radius: 2px; */
		margin-bottom: 8px;
		/* font-weight: normal; */
		/* margin-top: 5px; */
		/* text-shadow: 2px 1px black; */
	}

    .condition-text {
        font-size: var(--type-size-test-special-small);
        color: #d35400;
        font-weight: bold;
        margin-bottom: 10px;
        display: block;
    }

	.quote-box {
		position: relative;
		/* Fond légèrement distinct pour simuler un encart de procès-verbal */
		background-color: #faf9f5; 
		border: 2px dashed #d4cbb3;
		border-left: 4px solid #4a5b6c; /* Un bleu-gris "Administration/Police" */
		
		/* On laisse beaucoup de place à gauche (50px) pour le guillemet géant */
		padding: 20px 20px 15px 50px; 
		margin: 20px 0;
		
		/* Typographie "Machine à écrire" pour l'effet retranscription audio */
		font-size: var(--type-size-test-special-text);
		font-style: italic;
		line-height: 1.4;
		font-weight: normal;
		box-shadow: inset 0 0 10px rgba(0,0,0,0.02), 2px 2px 4px rgba(0,0,0,0.04);
	}

	/* 1. Le guillemet géant en filigrane pour marquer le dialogue */
	.quote-box::before {
		content: "\201C"; /* Guillemet anglais qui a une belle forme arrondie */
		position: absolute;
		top: -10px;
		left: 8px;
		font-size: var(--type-size-test-quote-mark);
		color: #4a5b6c; 
		opacity: 0.15; /* Très transparent pour ne pas gêner la lecture */
		line-height: 1;
		pointer-events: none;
	}

	/* 2. L'étiquette "DÉPOSITION" pour l'immersion jeu d'enquête */
	.quote-box::after {
		content: "T\00C9MOIGNAGE";
		position: absolute;
		top: -9px;
		right: 15px;
		background: #faf9f5; /* Doit être la même couleur que le background de la quote-box */
		padding: 0 8px;
		font-size: var(--type-size-test-special-small);
		color: #7f8c8d;
		font-weight: bold;
		letter-spacing: 1px;
		border: 1px solid #d4cbb3;
		border-radius: 2px;
	}

	.quote-extra {
    font-size: var(--type-size-test-special-small);
    color: #656565;
    background: #ffffff;
    padding: 10px 15px;
    border: 1px dashed #bdc3c7;
    display: inline-block;
    margin-bottom: 10px;
    text-shadow: none;
}

    /* Complément d'enquête (Si action) */
    /* --- RAPPORT DECRYPTAGE (Style "Message Télex / Labo") --- */
	.action-block {
		position: relative;
		/* Papier légèrement bleuté pour différencier du bristol et du post-it */
		background-color: #f0f4f8; 
		border: 1px solid #cdd7e0;
		border-left: 5px solid #4a90e2; /* Bande bleue "Service de Décryptage" */
		
		/* On utilise margin au lieu de padding-left pour éviter la ligne rouge (comme le post-it) */
		margin: 15px 25px 15px 95px; 
		padding: 15px 20px;
		box-shadow: inset 0 0 5px rgba(0,0,0,0.02), 2px 2px 5px rgba(0,0,0,0.05);
	}


   .action-title {
    color: #2c3e50;
    font-size: var(--type-size-test-special-context);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px dotted #95a5a6;
    padding-bottom: 5px;
    display: block;
    margin-bottom: 15px;
    font-weight: bold;
    text-shadow: none;
}
    
	.action-note {
		font-size: var(--type-size-test-special-small);
		color: #555;
		font-style: italic;
		text-shadow: none;
	}
	
    /* --- PIECES A CONVICTION (Photos et objets) --- */
	.evidence-area {
		margin: 10px 0;
		padding-top: 30px;
		padding-bottom: 15px;
		/* Légère ligne de séparation grise pour structurer la fiche */
		color: #595959;
		text-shadow: none;
	}

    .evidence-title {
		color: #4a5b6c; /* Bleu de Prusse très sombre */
		text-transform: uppercase;
		letter-spacing: 1px;
		display: block;
		margin-bottom: 10px;
		text-shadow: none; 
		font-weight: bold;
	}

	.evidence-item {
    display: flex;
    align-items: center;
    gap: 15px;
    /*background: rgba(0, 0, 0, 0.02);*/
    padding: 10px;
    border: 1px solid rgba(0,0,0,0.05);
    font-weight: normal;
    color: #575555;
}

	.evidence-img {
		max-height: 200px;
		width: auto;
		max-width: 200px;
		object-fit: contain;
		/* Effet "Photo Polaroïd / Pièce à conviction" posée sur la table */
		border: 4px solid #ffffff;
		box-shadow: 0 3px 6px rgba(0,0,0,0.2);
		border-radius: 2px;
	}


    .evidence-decrypt {
        font-size: var(--type-size-test-special-small);
    }

    .evidence-decrypt strong {
        color: #c0392b;
    }

    /* Note finale */
    .investigator-note {
		background: #fff9c430;
		padding: 15px;
		margin: 20px;
		border-left: 15px solid #f1c40f5e;
		font-size: var(--type-size-test-special-text);
	}
	
	/* --- NOUVEAU STYLE : LA NOTE D'ENQUÊTEUR --- */


	.analysis-sticky {
		position: relative;
		/* On utilise margin au lieu de padding pour décaler la note entière après la ligne rouge */
		margin: 20px 25px 25px 95px; 
		padding: 15px 20px;
		
		/* Fond : Aspect papier légèrement plus grisé/beige que le bristol */
		background-color: #f4f1e1; 
		border: 1px solid #dcd3b6;
		border-left: 5px solid #cf1c1c; /* Liseré rouge "Dossier Classé / Confidentiel" */
		
		/* Ombre portée douce pour l'effet "papier rajouté/collé" sur la fiche */
		box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.08); 
		
		/* Typographie : Style "Machine à écrire" typique des jeux d'enquête rétro */
		font-size: var(--type-size-test-special-small);
		line-height: 1.5;
		color: #c34848fa; /* Encre très sombre, presque noire (plus lisible) */
		
		/* Effet d'encre imprimée/baveuse au lieu de l'ombre fluo */
		text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2); 
		
		/* Très légère rotation pour un aspect posé "à la va-vite" */
		transform: rotate(-1deg);
	}

	/* Le détail immersif : un bout de scotch virtuel en haut de la note */
	.analysis-sticky::before {
		content: "";
		position: absolute;
		top: -12px;
		left: 50%;
		transform: translateX(-50%) rotate(2deg);
		width: 35px;
		height: 15px;
		background: rgba(255, 255, 255, 0.6);
		border: 1px solid rgba(0, 0, 0, 0.05);
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
		z-index: 2;
	}

	/* Mise en valeur du mot "DEDUCTION" */
	/*.analysis-sticky strong {
		color: #ab4442;
		letter-spacing: 0.4px;
		font-size: 1.1em;
		font-weight: bold;
	}*/

	/* Mise en valeur du mot "DEDUCTION" */
	.analysis-sticky strong {
		color: #bf3331;
		letter-spacing: 0.4px;
		font-size: var(--type-size-test-special-text);
		font-weight: bold;
		/* On ajoute un alignement flex pour que la loupe et le texte soient parfaitement centrés */
		display: inline-flex; 
		align-items: center;
	}

	/* L'insertion automatique de la loupe en SVG */
	.analysis-sticky strong::before {
		content: "";
		display: inline-block;
		width: 20px;
		height: 20px;
		margin-right: 8px; /* L'espace entre la loupe et le texte */
		
		/* Le chemin vers ton image (j'ai mis ../ comme pour ton trombone) */
		background-image: url('../games/meurtres_sur_atlantique/solution/loupe.svg');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}

	/* bristol */

	/* Le conteneur de la fiche */
	.testimony-card {
		position: relative;
		background-color: #fffcf4;
		/* On enlève overflow: hidden pour voir le trombone dépasser */
		overflow: visible; 
		/* Espace pour que le trombone de cette fiche ne touche pas la fiche du dessus */
		margin-top: 60px; 
		border: 1px solid #d4cbb3;
		box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
		border-radius: 4px;
		background-image: 
			linear-gradient(#e1e9f0 1px, transparent 1px),
			linear-gradient(90deg, #e1e9f0 1px, transparent 1px);
		background-size: 20px 20px;
		box-sizing: border-box;
		max-width: 100%;
	}

	/* Effet de jaunissement irrégulier (vieillissement) */
	.testimony-card::before {
		content: "";
		 position: absolute;
		/* On aligne la ligne de coupure du SVG sur le bord de la fiche */
		top: -42px; 
		left: var(--clip-pos, 45px);
		width: 35px;
		height: 100px;
		z-index: 10;
		
		/* Lien vers votre fichier externe */
		background-image: url('../games/meurtres_sur_atlantique/solution/trombone7.svg');
		background-repeat: no-repeat;
		background-size: contain;
		
		/* Rotation variable */
		transform: rotate(var(--clip-angle, -3deg));
		pointer-events: none;
	}

	/* Header de la fiche (Style étiquette collée) */

	.card-header {
		color: white;
		padding: 15px 20px 15px 120px; /* Espace à gauche pour le trombone */
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
	}
	/* Style du trombone */


	/* Classe de base commune */
	/* TAILLE XL QUI DÉPASSE */
	.paper-clip {
		position: absolute;
		/* On aligne la coupure du SVG (Y=45) sur le haut de la fiche */
		/* Comme le SVG fait 230px de haut, -45px environ est parfait */
		top: -42px; 
		left: 45px;
		width: 35px; /* Largeur ajustée pour respecter les proportions Gem */
		height: auto;
		z-index: 10;
		transform: rotate(-3deg);
		pointer-events: none;
	}

	/* Les 4 variations de positions et angles */
	.clip-v1 { --clip-pos: 40px; --clip-angle: -4deg; }
	.clip-v2 { --clip-pos: 120px; --clip-angle: 6deg; }
	.clip-v3 { --clip-pos: 20px; --clip-angle: 1deg; }
	.clip-v4 { --clip-pos: 85px; --clip-angle: -10deg; }

	.suspect-name {
		font-weight: bold;
		font-size: var(--type-size-test-special-name);
		text-transform: uppercase;
	}



	/* --- MISE A JOUR DU DECALAGE ROUGE --- */
	/* On ajoute .evidence-area pour qu'il respecte aussi la ligne rouge du bristol */
	.main-body, .evidence-area {
		padding-left: 95px !important; 
		padding-right: 25px;
	}

	/* Bandeau localisation */
	.location-tag {
		/*background: #34495e;*/
		color: #ecf0f1;
		padding: 0px 0px 0px 30px;
		font-size: var(--type-size-test-special-context);
		text-transform: uppercase;
		font-weight: bold;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ab4442' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E");
		background-repeat: no-repeat;
	}
	
.suspect-identity {
    display: flex;
    align-items: center; /* Aligne la photo et le texte sur la même ligne horizontale */
    gap: 15px; /* Espace entre la photo et le nom */
}

/* La photo dans l'en-tête */
.suspect-identity {
    display: flex !important;
    align-items: center !important; /* Force le centrage vertical entre l'image et le texte */
    gap: 15px; 
}

/* La photo dans l'en-tête */
.header-portrait {
    height: 100px; 
    width: auto;
    background: #eee;
    border: 2px solid #ffffff; 
    border-radius: 3px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
    object-fit: cover; 
    
    /* Sécurités pour éviter un décalage */
    margin: 0 !important; 
    display: block !important;
}

/* Le nom du suspect avec sa barre rouge */
.suspect-name {
    font-weight: bold;
    font-size: var(--type-size-test-special-name);
    text-transform: uppercase;
    
    /* La fameuse barre rouge */
    border-left: 5px solid #e74c3c !important;
    padding-left: 10px !important; /* Espace entre la barre rouge et le texte */
    
    /* Sécurités pour le centrage vertical */
    margin: 0 !important;
    line-height: 1.1 !important; 
    display: block; 
}

	/* La base commune à toutes les touches */
.icon-key {
	display: inline-block;
	width: 40px;
	height: 40px;
	vertical-align: middle;
	margin-right: 5px;
	margin-bottom: 3px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

	/* Les variations selon la touche */
	.key-i { background-image: url('../games/meurtres_sur_atlantique/solution/toucheI.svg'); }
	.key-f { background-image: url('../games/meurtres_sur_atlantique/solution/toucheF.svg'); }
	.key-a { background-image: url('../games/meurtres_sur_atlantique/solution/toucheA.svg'); }
	.key-o { background-image: url('../games/meurtres_sur_atlantique/solution/toucheO.svg'); }
	/* Tu peux en ajouter autant que tu veux : .key-enter, .key-a, etc. */

/* --- TOUCHE DE CLAVIER RETRO 80s --- */
.retro-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* Dimensions et espacements */
    min-width: 1.2em; /* S'adapte si on tape "ESPACE" au lieu de "I" */
    height: 1.5em;
    padding: 0 0.4em;
    margin-right: 6px;
    vertical-align: text-bottom; /* Aligne parfaitement avec le texte à côté */
    
    /* Arrondi de la touche (très marqué sur ton image) */
    border-radius: 6px;
    
    /* Couleur de la surface centrale (gris plastique clair) */
    background-color: #dadddf;
    
    /* LE SECRET : Empilement d'ombres pour sculpter les pentes de la touche */
    box-shadow: 
        /* 1. Pente haut : très lumineuse et large */
        inset 0px 5px 6px -1px rgba(255, 255, 255, 0.9),
        /* 2. Pente gauche : lumineuse */
        inset 3px 0px 5px -1px rgba(255, 255, 255, 0.6),
        /* 3. Pente bas : ombre prononcée (crée la profondeur) */
        inset 0px -7px 6px -2px rgba(60, 65, 70, 0.45),
        /* 4. Pente droite : ombre moyenne */
        inset -3px 0px 5px -1px rgba(80, 85, 90, 0.25),
        /* 5. Fin contour gris pour détourer la base de la touche */
        0px 0px 0px 1px rgba(150, 155, 160, 0.3),
        /* 6. Petite ombre portée sous la touche sur le papier */
        1px 3px 4px rgba(0, 0, 0, 0.2);
        
    /* Style de la lettre */
    font-family: var(--font-test-code);
    font-weight: 900;
    font-size: var(--type-size-test-special-small);
    color: #333333;
    
    /* Effet "Lettre gravée" dans le plastique */
    text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8);
}

/* --- RÉPONSE DU JEU / NARRATION --- */
.system-response {
    position: relative;
    background-color: #faf9f5; /* Même fond que les témoignages */
    border: 2px dashed #d4cbb3;
    border-left: 4px solid #7f8c8d; /* Un gris neutre au lieu du bleu Police */
    
    /* On réduit le padding à gauche (20px au lieu de 50px) car il n'y a plus de guillemet géant */
    padding: 15px 20px; 
    margin: 15px 0;
    
    font-size: var(--type-size-test-special-text);
    font-style: normal; /* Texte droit, contrairement à l'italique des dialogues */
    line-height: 1.4;
	font-weight: normal;
    color: #4a5b6c;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.02), 2px 2px 4px rgba(0,0,0,0.04);
}

/* L'étiquette pour bien identifier qu'il s'agit du jeu */
.system-response::after {
    content: "SUITE";
    position: absolute;
    top: -9px;
    right: 15px;
    background: #faf9f5;
    padding: 0 8px;
    font-size: var(--type-size-test-special-small);
    color: #7f8c8d;
    font-weight: bold;
    letter-spacing: 1px;
    border: 1px solid #d4cbb3;
    border-radius: 2px;
}

/* --- SÉPARATEUR DE TRANSITION (Changement de lieu/temps) --- */
.investigation-step {
    /* On garde le padding pour ne pas mordre sur la ligne rouge du bristol */
    padding-left: 95px !important; 
    padding-right: 25px;
    margin: 30px 0; /* On donne de l'air au-dessus et en-dessous */
    
    display: flex;
    align-items: center;
    
    /* Typographie "Voix du narrateur" */
    font-weight: bold;
    font-style: italic;
    color: #838e9a; /* Un gris-bleu discret pour ne pas voler la vedette aux témoignages */
    font-size: var(--type-size-test-special-context);
    text-shadow: none;
}

/* La petite ligne pointillée qui remplit l'espace à GAUCHE du texte */
.investigation-step::before {
    content: "";
    flex: 1; 
    border-bottom: 2px solid #bdc3c7; /* <-- "solid" remplace "dotted" */
    margin-right: 15px;
}

/* La ligne continue qui remplit l'espace à DROITE du texte */
.investigation-step::after {
    content: "";
    flex: 1; 
    border-bottom: 2px solid #bdc3c7; /* <-- "solid" remplace "dotted" */
    margin-left: 15px;
}

    /* Responsive */
@media (max-width: 1000px) {
    .testimony-card {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 100%;
    }
    .card-header {
        padding-left: 80px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .main-body, .evidence-area, .investigation-step {
        padding-left: 80px !important;
    }
    .action-block, .analysis-sticky {
        margin-left: 80px;
    }
}


/* CONTENEUR */
.suspects-table-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 20px 0;
    box-sizing: border-box;
}

/* TABLE */
.suspects-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
    table-layout: auto;
    color: #665366;
    border: none !important;
}

.suspects-table th:first-child,
.suspects-table td:first-child {
    width: 1%;
    white-space: nowrap;
}

/* HEADER */
.suspects-table thead {
    background: #f4f1f4;
}

.suspects-table th {
    padding: 12px;
    text-align: left;
    font-size: var(--type-size-test-special-table-head);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #665366;
    border-bottom: 2px solid #e0dce0;
	text-shadow : 1px 1px 1px #cdcdcd, -1px 0px 1px #ccc;
}

/* CELLULES */
.suspects-table td {
    padding: 12px;
    border-bottom: 1px solid #e0dce0;
    vertical-align: top;
    font-size: var(--type-size-test-special-table);
    background: #fff;
    color: #665366;
	text-shadow : 1px 1px 1px #cdcdcd, -1px 0px 1px #ccc;
}



/* BADGES */
.badge {
    display: inline-block;
    padding: 4px 8px;
    font-size: var(--type-size-test-special-table);
    border-radius: 6px;
    font-weight: bold;
}

.badge-neutral { background: #e5e7eb; color: #374151; }
.badge-suspect { background: #fde68a; color: #92400e; }
.badge-guilty { background: #fecaca; color: #991b1b; }
.badge-victim { background: #bfdbfe; color: #1e3a8a; }

/* MOBILE */
@media screen and (max-width: 768px) {
    .suspects-table {
        min-width: unset;
        font-size: var(--type-size-test-special-table);
    }

    .suspects-table thead {
        display: none;
		font-size: var(--type-size-test-special-table);
    }

    .suspects-table tr {
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 15px;
        border: 1px solid #e0dce0;
        border-radius: 8px;
        padding: 10px;
		background: #fff;
    }

    .suspects-table td {
        display: block;
        border: none;
        padding: 6px 0;
        box-sizing: border-box;
        word-break: break-word;
        overflow-wrap: break-word;
		font-size: var(--type-size-test-special-table);
    }

    .suspects-table td::before {
        content: attr(data-label);
        font-weight: bold;
        display: block;
        color: #6b7280;
        font-size: var(--type-size-test-special-table-head);
    }
}


@media (max-width: 650px) {
	.main-body { flex-direction: column; align-items: center; }
	.suspect-portrait { margin-bottom: 15px; }
	.card-header {
		padding-left: 20px !important;
	}
	.main-body, .evidence-area, .investigation-step {
		padding-left: 20px !important;
	}
	.action-block, .analysis-sticky {
		margin-left: 20px !important;
	}
	.paper-clip, .testimony-card::before {
		display: none !important;
	}
}