/* Éléments partagés par plusieurs onglets : cartes, tableaux, boutons, couleurs des camps, bandeau sujet + équipes */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.card {
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 1.2rem;
    box-shadow: var(--shadow);
}

.card h3 {
    font-size: 1rem;
    color: var(--heading);
    margin-bottom: 0.7rem;
    border-bottom: 2px solid var(--border);
    padding-bottom: 0.4rem;
}

.card ul { list-style-type: none; }

.card li {
    margin-bottom: 0.5rem;
    position: relative;
    padding-left: 1rem;
    font-size: 0.85rem;
    color: var(--text-soft);
    line-height: 1.4;
}

.card li::before {
    content: "•";
    color: var(--teal);
    font-weight: 700;
    position: absolute;
    left: 0;
}

.card p,
.card li {
    text-align: justify;
    text-justify: inter-word;
}

.styled-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--card);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.styled-table th,
.styled-table td {
    padding: 0.75rem 1rem;
    text-align: left;
}

.styled-table th {
    background-color: var(--navy);
    color: white;
    font-weight: 600;
}

.styled-table tbody tr:nth-child(even) { background-color: var(--surface); }
.styled-table tr:not(:last-child) td { border-bottom: 1px solid var(--border); }

.table-scroll { overflow-x: auto; }

.badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-pro { background-color: var(--highlight); color: var(--navy); }
.badge-con { background-color: var(--contre-bg); color: var(--contre); }

.btn {
    display: inline-block;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    color: white;
    text-decoration: none;
}

.btn.primary { background-color: var(--teal-dark); }
.btn.accent { background-color: var(--blue); }
.btn.secondary { background-color: var(--btn-secondary); }
.btn:disabled { opacity: 0.4; }
.btn.danger { background-color: var(--contre-fill); }

/* Couleur des camps (cartes du tirage et bandeaux sujet + équipes) */
.pour { color: var(--pour); }
.contre { color: var(--contre); }

.summary-banner {
    background: var(--highlight);
    border: 1px solid var(--highlight-border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.summary-topic {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 0.4rem;
}

.summary-roles {
    font-size: 0.9rem;
    color: var(--text-strong);
    font-weight: 600;
}