/**
 * Senego Football - Main Styles
 * Design inspire de ESPN/L'Equipe
 */

/* ============================================
   CSS Variables
   ============================================ */
:root {
    /* Primary Colors */
    --sf-primary: #1a1a2e;
    --sf-secondary: #e94560;
    --sf-accent: #0f3460;

    /* Backgrounds */
    --sf-bg-light: #ffffff;
    --sf-bg-card: #f8f9fa;
    --sf-bg-hover: #e9ecef;
    --sf-bg-dark: #1a1a2e;

    /* Text Colors */
    --sf-text-primary: #1a1a2e;
    --sf-text-secondary: #6c757d;
    --sf-text-muted: #adb5bd;
    --sf-text-light: #ffffff;

    /* Match States */
    --sf-live: #dc3545;
    --sf-upcoming: #28a745;
    --sf-finished: #6c757d;

    /* Events */
    --sf-goal: #28a745;
    --sf-yellow: #ffc107;
    --sf-red: #dc3545;
    --sf-sub: #17a2b8;

    /* Borders */
    --sf-border: #dee2e6;
    --sf-border-light: #e9ecef;

    /* Shadows */
    --sf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --sf-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --sf-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);

    /* Spacing */
    --sf-spacing-xs: 4px;
    --sf-spacing-sm: 8px;
    --sf-spacing-md: 16px;
    --sf-spacing-lg: 24px;
    --sf-spacing-xl: 32px;

    /* Border Radius */
    --sf-radius-sm: 4px;
    --sf-radius: 8px;
    --sf-radius-lg: 12px;
    --sf-radius-xl: 16px;

    /* Typography */
    --sf-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --sf-font-size-xs: 11px;
    --sf-font-size-sm: 13px;
    --sf-font-size-base: 15px;
    --sf-font-size-lg: 18px;
    --sf-font-size-xl: 24px;
    --sf-font-size-2xl: 32px;
    --sf-font-size-3xl: 48px;

    /* Transitions */
    --sf-transition: 0.2s ease;
}

/* ============================================
   Base Styles
   ============================================ */
.sf-page-wrapper,
.sf-live-scores,
.sf-fixtures-list,
.sf-standings,
.sf-topscorers,
.sf-match-card,
.sf-team-card {
    font-family: var(--sf-font-family);
    font-size: var(--sf-font-size-base);
    line-height: 1.5;
    color: var(--sf-text-primary);
    -webkit-font-smoothing: antialiased;
    /* Blanc (demande 10/06/2026) — l'ancien beige #f7efe4 datait de l'habillage CAN. */
    background-color: #ffffff;
}

/* Espace en bas du conteneur des pages football. */
.sf-page-wrapper {
    padding-bottom: 30px;
}

.sf-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--sf-spacing-md);
}

/* ============================================
   Badges & Labels
   ============================================ */
.sf-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    font-size: var(--sf-font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--sf-radius-sm);
}

.sf-badge-live {
    background: var(--sf-live);
    color: white;
    animation: sf-pulse 2s infinite;
}

@keyframes sf-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.sf-badge-finished {
    background: var(--sf-finished);
    color: white;
}

.sf-badge-upcoming {
    background: var(--sf-upcoming);
    color: white;
}

/* ============================================
   Team Logos
   ============================================ */
.sf-team-logo,
.sf-team-logo-small,
.sf-team-logo-sm,
.sf-team-logo-mini {
    object-fit: contain;
    flex-shrink: 0;
}

.sf-team-logo { width: 48px; height: 48px; }
.sf-team-logo-small { width: 24px; height: 24px; }
.sf-team-logo-sm { width: 20px; height: 20px; }
.sf-team-logo-mini { width: 16px; height: 16px; }
.sf-team-logo-large { width: 64px; height: 64px; }
.sf-team-logo-xl { width: 80px; height: 80px; }
.sf-team-logo-hero { width: 100px; height: 100px; }

.sf-team-logo-placeholder {
    background: var(--sf-bg-card);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sf-text-muted);
}

/* ============================================
   Live Scores Widget
   ============================================ */
.sf-live-scores {
    background: var(--sf-bg-light);
    border-radius: var(--sf-radius-lg);
    padding: var(--sf-spacing-lg);
    box-shadow: var(--sf-shadow);
}

.sf-live-header {
    display: flex;
    align-items: center;
    gap: var(--sf-spacing-sm);
    margin-bottom: var(--sf-spacing-lg);
    padding-bottom: var(--sf-spacing-md);
    border-bottom: 1px solid var(--sf-border-light);
}

.sf-live-indicator {
    width: 10px;
    height: 10px;
    background: var(--sf-live);
    border-radius: 50%;
    animation: sf-pulse 2s infinite;
}

.sf-live-title {
    font-size: var(--sf-font-size-lg);
    font-weight: 700;
    color: var(--sf-text-primary);
}

.sf-live-count {
    background: var(--sf-live);
    color: white;
    font-size: var(--sf-font-size-xs);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: auto;
}

.sf-live-grid {
    display: grid;
    gap: var(--sf-spacing-md);
}

.sf-live-match {
    display: block;
    background: var(--sf-bg-card);
    border-radius: var(--sf-radius);
    padding: var(--sf-spacing-md);
    text-decoration: none;
    color: inherit;
    transition: all var(--sf-transition);
    border: 1px solid transparent;
}

.sf-live-match:hover {
    background: var(--sf-bg-hover);
    border-color: var(--sf-border);
    transform: translateY(-2px);
    box-shadow: var(--sf-shadow);
}

.sf-live-status {
    text-align: center;
    margin-bottom: var(--sf-spacing-sm);
}

.sf-live-teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sf-spacing-md);
}

.sf-live-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sf-spacing-xs);
    flex: 1;
    min-width: 0;
}

.sf-live-team .sf-team-name {
    font-size: var(--sf-font-size-sm);
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.sf-live-score {
    display: flex;
    align-items: center;
    gap: var(--sf-spacing-sm);
    font-size: var(--sf-font-size-2xl);
    font-weight: 800;
}

.sf-score-separator {
    color: var(--sf-text-muted);
}

.sf-no-live {
    text-align: center;
    padding: var(--sf-spacing-xl) var(--sf-spacing-md);
}

.sf-no-live-icon {
    color: var(--sf-text-muted);
    margin-bottom: var(--sf-spacing-md);
}

.sf-no-live-text {
    font-size: var(--sf-font-size-lg);
    font-weight: 600;
    color: var(--sf-text-primary);
    margin: 0 0 var(--sf-spacing-xs);
}

.sf-no-live-subtext {
    font-size: var(--sf-font-size-sm);
    color: var(--sf-text-secondary);
    margin: 0;
}

/* ============================================
   Fixtures List
   ============================================ */
.sf-fixtures-list {
    display: flex;
    flex-direction: column;
    gap: var(--sf-spacing-lg);
}

.sf-fixtures-date {
    font-size: var(--sf-font-size-base);
    font-weight: 700;
    color: var(--sf-text-primary);
    margin: 0 0 var(--sf-spacing-md);
    padding-bottom: var(--sf-spacing-sm);
    border-bottom: 2px solid var(--sf-primary);
}

.sf-fixtures-items {
    display: flex;
    flex-direction: column;
    gap: var(--sf-spacing-sm);
}

.sf-fixture-item {
    display: block;
    background: var(--sf-bg-light);
    border: 1px solid var(--sf-border-light);
    border-radius: var(--sf-radius);
    padding: var(--sf-spacing-md);
    text-decoration: none;
    color: inherit;
    transition: all var(--sf-transition);
}

.sf-fixture-item:hover {
    border-color: var(--sf-primary);
    box-shadow: var(--sf-shadow);
}

.sf-fixture-live {
    border-left: 3px solid var(--sf-live);
}

.sf-fixture-group {
    font-size: var(--sf-font-size-xs);
    color: var(--sf-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--sf-spacing-sm);
}

.sf-fixture-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sf-spacing-md);
}

.sf-fixture-team {
    display: flex;
    align-items: center;
    gap: var(--sf-spacing-sm);
    flex: 1;
    min-width: 0;
}

.sf-fixture-team-away {
    flex-direction: row-reverse;
    text-align: right;
}

.sf-fixture-team .sf-team-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sf-fixture-center {
    text-align: center;
    flex-shrink: 0;
    min-width: 80px;
}

.sf-fixture-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sf-spacing-xs);
}

.sf-fixture-score .sf-score {
    font-size: var(--sf-font-size-xl);
    font-weight: 800;
}

.sf-fixture-time .sf-time {
    font-size: var(--sf-font-size-lg);
    font-weight: 700;
    color: var(--sf-primary);
}

.sf-fixture-venue {
    display: flex;
    align-items: center;
    gap: var(--sf-spacing-xs);
    font-size: var(--sf-font-size-xs);
    color: var(--sf-text-secondary);
    margin-top: var(--sf-spacing-sm);
}

.sf-no-matches {
    text-align: center;
    padding: var(--sf-spacing-xl);
    color: var(--sf-text-secondary);
}

/* ============================================
   Standings Table
   ============================================ */
.sf-standings-group {
    margin-bottom: var(--sf-spacing-xl);
}

.sf-standings-group-title {
    font-size: var(--sf-font-size-lg);
    font-weight: 700;
    color: var(--sf-primary);
    margin: 0 0 var(--sf-spacing-md);
    padding: var(--sf-spacing-sm) var(--sf-spacing-md);
    background: var(--sf-bg-card);
    border-radius: var(--sf-radius);
}

.sf-standings-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sf-standings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sf-font-size-sm);
}

.sf-standings-table th {
    background: var(--sf-bg-dark);
    color: var(--sf-text-light);
    padding: var(--sf-spacing-sm) var(--sf-spacing-md);
    text-align: center;
    font-weight: 600;
    font-size: var(--sf-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sf-standings-table th:first-child,
.sf-standings-table td.sf-col-pos,
.sf-standings-table td.sf-col-team {
    text-align: left;
}

.sf-standings-table td {
    padding: var(--sf-spacing-sm) var(--sf-spacing-md);
    border-bottom: 1px solid var(--sf-border-light);
    text-align: center;
}

.sf-standings-table tbody tr:hover {
    background: var(--sf-bg-hover);
}

.sf-standings-table tbody tr.sf-pos-qualified {
    background: rgba(40, 167, 69, 0.1);
}

.sf-standings-table tbody tr.sf-pos-playoff {
    background: rgba(255, 193, 7, 0.1);
}

.sf-position {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--sf-bg-card);
    border-radius: 50%;
    font-weight: 700;
    font-size: var(--sf-font-size-xs);
}

.sf-pos-qualified .sf-position {
    background: var(--sf-upcoming);
    color: white;
}

.sf-pos-playoff .sf-position {
    background: var(--sf-yellow);
    color: var(--sf-text-primary);
}

.sf-team-link {
    display: flex;
    align-items: center;
    gap: var(--sf-spacing-sm);
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

.sf-team-link:hover {
    color: var(--sf-secondary);
}

.sf-col-pts {
    font-weight: 700;
    font-size: var(--sf-font-size-base);
}

.sf-positive { color: var(--sf-upcoming); }
.sf-negative { color: var(--sf-live); }

.sf-form-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin: 0 1px;
}

.sf-form-win { background: var(--sf-upcoming); }
.sf-form-draw { background: var(--sf-text-muted); }
.sf-form-loss { background: var(--sf-live); }

.sf-standings-legend {
    display: flex;
    gap: var(--sf-spacing-lg);
    margin-top: var(--sf-spacing-md);
    padding: var(--sf-spacing-sm);
    font-size: var(--sf-font-size-xs);
    color: var(--sf-text-secondary);
}

.sf-legend-item {
    display: flex;
    align-items: center;
    gap: var(--sf-spacing-xs);
}

.sf-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: var(--sf-radius-sm);
}

.sf-legend-qualified .sf-legend-dot { background: rgba(40, 167, 69, 0.3); }
.sf-legend-playoff .sf-legend-dot { background: rgba(255, 193, 7, 0.3); }

/* ============================================
   Topscorers
   ============================================ */
.sf-topscorers-title {
    display: flex;
    align-items: center;
    gap: var(--sf-spacing-sm);
    font-size: var(--sf-font-size-lg);
    font-weight: 700;
    margin: 0 0 var(--sf-spacing-lg);
    padding-bottom: var(--sf-spacing-sm);
    border-bottom: 2px solid var(--sf-primary);
}

.sf-title-icon {
    font-size: var(--sf-font-size-xl);
}

.sf-topscorers-list {
    display: flex;
    flex-direction: column;
    gap: var(--sf-spacing-sm);
}

.sf-scorer-item {
    display: flex;
    align-items: center;
    gap: var(--sf-spacing-md);
    padding: var(--sf-spacing-sm) var(--sf-spacing-md);
    background: var(--sf-bg-light);
    border: 1px solid var(--sf-border-light);
    border-radius: var(--sf-radius);
    transition: all var(--sf-transition);
}

.sf-scorer-item:hover {
    border-color: var(--sf-border);
    box-shadow: var(--sf-shadow-sm);
}

.sf-scorer-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--sf-bg-card);
    border-radius: 50%;
    font-size: var(--sf-font-size-sm);
    font-weight: 700;
    flex-shrink: 0;
}

.sf-rank-top {
    background: var(--sf-secondary);
    color: white;
}

.sf-scorer-player {
    flex: 1;
    min-width: 0;
}

.sf-scorer-link {
    display: flex;
    align-items: center;
    gap: var(--sf-spacing-sm);
    color: inherit;
    text-decoration: none;
}

.sf-scorer-link:hover {
    color: var(--sf-secondary);
}

.sf-player-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.sf-player-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sf-bg-card);
    color: var(--sf-text-muted);
}

.sf-scorer-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sf-scorer-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sf-scorer-team {
    display: flex;
    align-items: center;
    gap: var(--sf-spacing-xs);
    font-size: var(--sf-font-size-xs);
    color: var(--sf-text-secondary);
}

.sf-scorer-stats {
    display: flex;
    align-items: center;
    gap: var(--sf-spacing-sm);
    flex-shrink: 0;
}

.sf-stat-main {
    font-size: var(--sf-font-size-xl);
    font-weight: 800;
    color: var(--sf-primary);
}

.sf-stat-secondary {
    font-size: var(--sf-font-size-xs);
    color: var(--sf-text-secondary);
}

.sf-stat-cards {
    display: flex;
    gap: var(--sf-spacing-xs);
}

/* Ancienne classe carton « .sf-card » retirée : elle entrait en collision avec la
   carte-match « .sf-card » du widget « Matchs du jour » (senego-today.css), dont
   elle écrasait le display:grid → toutes les infos sur une seule ligne. Les cartons
   utilisent .sf-card-icon (et .sf-card-yellow/.sf-card-red ci-dessous). */

.sf-card-yellow { background: var(--sf-yellow); color: #000; }
.sf-card-red { background: var(--sf-live); }

/* ============================================
   Match Card
   ============================================ */
.sf-match-card {
    background: var(--sf-bg-light);
    border-radius: var(--sf-radius-lg);
    overflow: hidden;
    box-shadow: var(--sf-shadow);
    transition: all var(--sf-transition);
}

.sf-match-card:hover {
    box-shadow: var(--sf-shadow-lg);
    transform: translateY(-2px);
}

.sf-match-card-live {
    border: 2px solid var(--sf-live);
}

.sf-match-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.sf-match-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sf-spacing-sm) var(--sf-spacing-md);
    background: var(--sf-bg-card);
    font-size: var(--sf-font-size-xs);
    color: var(--sf-text-secondary);
}

.sf-match-card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sf-spacing-lg);
    gap: var(--sf-spacing-md);
}

.sf-match-card-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sf-spacing-sm);
    flex: 1;
    text-align: center;
}

.sf-match-card-team .sf-team-name {
    font-weight: 600;
    font-size: var(--sf-font-size-sm);
}

.sf-match-card-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sf-spacing-xs);
}

.sf-score-display {
    display: flex;
    align-items: center;
    gap: var(--sf-spacing-sm);
}

.sf-score-display .sf-score-home,
.sf-score-display .sf-score-away {
    font-size: var(--sf-font-size-2xl);
    font-weight: 800;
}

.sf-vs {
    font-size: var(--sf-font-size-lg);
    font-weight: 700;
    color: var(--sf-text-muted);
}

.sf-match-card-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sf-spacing-xs);
    padding: var(--sf-spacing-sm) var(--sf-spacing-md);
    background: var(--sf-bg-card);
    font-size: var(--sf-font-size-xs);
    color: var(--sf-text-secondary);
}

/* ============================================
   Team Card
   ============================================ */
.sf-team-card {
    background: var(--sf-bg-light);
    border-radius: var(--sf-radius-lg);
    padding: var(--sf-spacing-lg);
    box-shadow: var(--sf-shadow);
    transition: all var(--sf-transition);
}

.sf-team-card:hover {
    box-shadow: var(--sf-shadow-lg);
    transform: translateY(-2px);
}

.sf-team-card-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sf-spacing-md);
    color: inherit;
    text-decoration: none;
}

.sf-team-card-name {
    font-size: var(--sf-font-size-lg);
    font-weight: 700;
    margin: 0;
}

.sf-team-card-short {
    color: var(--sf-text-secondary);
    font-size: var(--sf-font-size-sm);
}

.sf-team-card-country,
.sf-team-card-coach {
    display: flex;
    align-items: center;
    gap: var(--sf-spacing-xs);
    font-size: var(--sf-font-size-sm);
    color: var(--sf-text-secondary);
}

.sf-team-card-action {
    display: flex;
    align-items: center;
    gap: var(--sf-spacing-xs);
    color: var(--sf-secondary);
    font-size: var(--sf-font-size-sm);
    font-weight: 600;
    margin-top: var(--sf-spacing-sm);
}

/* ============================================
   Competition Page
   ============================================ */
.sf-competition-header {
    background: linear-gradient(135deg, var(--sf-primary) 0%, var(--sf-accent) 100%);
    color: white;
    padding: var(--sf-spacing-xl) 0;
    margin-bottom: var(--sf-spacing-xl);
}

.sf-competition-title {
    display: flex;
    align-items: center;
    gap: var(--sf-spacing-md);
    font-size: var(--sf-font-size-3xl);
    font-weight: 800;
    margin: 0 0 var(--sf-spacing-xs);
}

.sf-competition-icon {
    font-size: var(--sf-font-size-3xl);
}

.sf-competition-subtitle {
    font-size: var(--sf-font-size-lg);
    opacity: 0.8;
    margin: 0 0 var(--sf-spacing-lg);
}

.sf-competition-nav {
    display: flex;
    gap: var(--sf-spacing-xs);
    flex-wrap: wrap;
}

.sf-nav-item {
    padding: var(--sf-spacing-sm) var(--sf-spacing-md);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    text-decoration: none;
    border-radius: var(--sf-radius);
    font-size: var(--sf-font-size-sm);
    font-weight: 600;
    transition: all var(--sf-transition);
}

.sf-nav-item:hover,
.sf-nav-active {
    background: white;
    color: var(--sf-primary);
}

.sf-section {
    margin-bottom: var(--sf-spacing-xl);
}

.sf-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sf-spacing-md);
}

.sf-section-title {
    display: flex;
    align-items: center;
    gap: var(--sf-spacing-sm);
    font-size: var(--sf-font-size-xl);
    font-weight: 700;
    margin: 0;
}

.sf-section-link {
    color: var(--sf-secondary);
    font-size: var(--sf-font-size-sm);
    font-weight: 600;
    text-decoration: none;
}

.sf-section-link:hover {
    text-decoration: underline;
}

.sf-grid {
    display: grid;
    gap: var(--sf-spacing-xl);
}

.sf-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* ============================================
   Match Page
   ============================================ */
.sf-match-header {
    background: linear-gradient(135deg, var(--sf-primary) 0%, var(--sf-accent) 100%);
    color: white;
    padding: var(--sf-spacing-lg) 0 var(--sf-spacing-xl);
}

.sf-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sf-spacing-xs);
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: var(--sf-font-size-sm);
    margin-bottom: var(--sf-spacing-lg);
}

.sf-back-link:hover {
    color: white;
}

.sf-match-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sf-spacing-lg);
}

.sf-match-team {
    flex: 1;
    text-align: center;
}

.sf-match-team .sf-team-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sf-spacing-sm);
    color: white;
}

.sf-team-name-hero {
    font-size: var(--sf-font-size-lg);
    font-weight: 700;
}

.sf-match-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sf-spacing-sm);
}

.sf-match-score-live,
.sf-match-score-finished {
    display: flex;
    align-items: center;
    gap: var(--sf-spacing-md);
}

.sf-score-big {
    font-size: var(--sf-font-size-3xl);
    font-weight: 800;
}

.sf-match-time-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sf-date-hero {
    font-size: var(--sf-font-size-sm);
    opacity: 0.8;
}

.sf-time-hero {
    font-size: var(--sf-font-size-2xl);
    font-weight: 700;
}

.sf-match-meta {
    display: flex;
    justify-content: center;
    gap: var(--sf-spacing-lg);
    margin-top: var(--sf-spacing-lg);
    font-size: var(--sf-font-size-sm);
    opacity: 0.8;
}

.sf-meta-item {
    display: flex;
    align-items: center;
    gap: var(--sf-spacing-xs);
}

/* Où regarder le match : diffuseurs TV (en-tête de page match) */
.sf-match-tv {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: var(--sf-spacing-md);
    font-size: var(--sf-font-size-sm);
}

.sf-match-tv-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    opacity: 0.9;
}

.sf-match-tv-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-weight: 600;
    white-space: nowrap;
}

.sf-match-tv-more {
    opacity: 0.75;
    font-size: 12px;
}

/* Onglet Diffuseurs : grille des chaînes TV classées par pays */
.sf-tv-section {
    padding: var(--sf-spacing-md) 0;
}

.sf-tv-intro {
    margin: 0 0 var(--sf-spacing-lg);
    color: #64748b;
    font-size: var(--sf-font-size-sm);
}

.sf-tv-country {
    margin-bottom: var(--sf-spacing-xl);
}

.sf-tv-country-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 var(--sf-spacing-md);
    padding-bottom: 6px;
    border-bottom: 2px solid #f1f5f9;
    font-size: var(--sf-font-size-md);
    font-weight: 700;
    color: #1a1a2e;
}

.sf-tv-country-flag {
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.sf-tv-country-count {
    margin-left: auto;
    padding: 2px 9px;
    border-radius: 10px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}

.sf-tv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.sf-tv-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    text-decoration: none;
    color: #1a1a2e;
    transition: all 0.15s ease;
    min-height: 84px;
}

a.sf-tv-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    transform: translateY(-1px);
}

.sf-tv-logo {
    height: 34px;
    max-width: 110px;
    object-fit: contain;
}

.sf-tv-logo-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    color: #94a3b8;
}

.sf-tv-name {
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
    line-height: 1.25;
}

@media (max-width: 480px) {
    .sf-tv-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 8px;
    }
}

/* Tabs */
.sf-match-tabs,
.sf-team-tabs {
    display: flex;
    gap: var(--sf-spacing-xs);
    margin: var(--sf-spacing-lg) 0;
    padding-bottom: var(--sf-spacing-md);
    border-bottom: 1px solid var(--sf-border);
    overflow-x: auto;
}

.sf-tab {
    padding: var(--sf-spacing-sm) var(--sf-spacing-md);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--sf-text-secondary);
    font-size: var(--sf-font-size-sm);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--sf-transition);
}

.sf-tab:hover {
    color: var(--sf-primary);
}

.sf-tab:focus {
    outline: 2px solid var(--sf-secondary);
    outline-offset: 2px;
}

.sf-tab:focus:not(:focus-visible) {
    outline: none;
}

.sf-tab:focus-visible {
    outline: 2px solid var(--sf-secondary);
    outline-offset: 2px;
}

.sf-tab-active {
    color: var(--sf-primary);
    border-bottom-color: var(--sf-secondary);
    font-weight: 700;
}

/* Live dot indicator for tabs */
.sf-tab-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #dc3545;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
    animation: sf-pulse-live 1.5s ease-in-out infinite;
}

@keyframes sf-pulse-live {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

/* Empty indicator for tabs without data */
.sf-tab-empty-indicator {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #cbd5e1;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
    opacity: 0.6;
}

/* Dim tabs without content */
.sf-tab:has(.sf-tab-empty-indicator) {
    opacity: 0.7;
}

.sf-tab:has(.sf-tab-empty-indicator):hover {
    opacity: 1;
}

.sf-tab-panel {
    display: none;
}

.sf-tab-panel-active {
    display: block;
    animation: sf-fade-in 0.2s ease-out;
}

@keyframes sf-fade-in {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   Events Timeline
   ============================================ */
.sf-events-timeline {
    padding: var(--sf-spacing-md) 0;
}

.sf-timeline {
    position: relative;
    padding-left: 80px;
}

.sf-timeline::before {
    content: '';
    position: absolute;
    left: 60px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--sf-border);
}

.sf-event {
    position: relative;
    padding: var(--sf-spacing-sm) 0;
    padding-left: var(--sf-spacing-lg);
}

.sf-event-minute {
    position: absolute;
    left: -80px;
    width: 50px;
    text-align: right;
    font-size: var(--sf-font-size-sm);
    font-weight: 700;
    color: var(--sf-text-secondary);
}

.sf-event-marker {
    position: absolute;
    left: -8px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sf-event-content {
    display: flex;
    align-items: center;
    gap: var(--sf-spacing-sm);
}

.sf-event-player {
    font-weight: 600;
}

.sf-event-related {
    display: flex;
    align-items: center;
    gap: 2px;
    color: var(--sf-text-secondary);
    font-size: var(--sf-font-size-sm);
}

.sf-event-assist {
    color: var(--sf-text-muted);
}

.sf-event-label {
    font-size: var(--sf-font-size-xs);
    color: var(--sf-text-muted);
}

.sf-event-goal .sf-event-icon { color: var(--sf-goal); }
.sf-event-owngoal .sf-event-icon { color: var(--sf-live); }
.sf-event-sub .sf-event-icon { color: var(--sf-sub); }

.sf-card-icon {
    display: inline-block;
    width: 12px;
    height: 16px;
    border-radius: 2px;
}

.sf-card-icon.sf-card-yellow { background: var(--sf-yellow); }
.sf-card-icon.sf-card-red { background: var(--sf-live); }

.sf-card-yellowred {
    display: flex;
    gap: 2px;
}
.sf-card-yellowred span:first-child {
    width: 10px;
    height: 14px;
    background: var(--sf-yellow);
    border-radius: 2px;
}
.sf-card-yellowred span:last-child {
    width: 10px;
    height: 14px;
    background: var(--sf-live);
    border-radius: 2px;
    margin-left: -4px;
}

.sf-var-icon {
    font-size: var(--sf-font-size-xs);
    font-weight: 700;
    padding: 2px 4px;
    background: #17a2b8;
    color: white;
    border-radius: 2px;
}

.sf-no-events {
    text-align: center;
    padding: var(--sf-spacing-xl);
    color: var(--sf-text-secondary);
}

/* ============================================
   Match Stats
   ============================================ */
.sf-match-stats {
    padding: var(--sf-spacing-md) 0;
}

.sf-stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sf-spacing-lg);
    font-weight: 600;
}

.sf-stats-vs {
    color: var(--sf-text-muted);
}

.sf-stats-list {
    display: flex;
    flex-direction: column;
    gap: var(--sf-spacing-md);
}

.sf-stat-row {
    display: flex;
    align-items: center;
    gap: var(--sf-spacing-md);
}

.sf-stat-value {
    width: 60px;
    font-size: var(--sf-font-size-lg);
    font-weight: 700;
}

.sf-stat-home { text-align: right; }
.sf-stat-away { text-align: left; }

.sf-stat-higher {
    color: var(--sf-primary);
}

.sf-stat-center {
    flex: 1;
    text-align: center;
}

.sf-stat-label {
    display: block;
    font-size: var(--sf-font-size-sm);
    color: var(--sf-text-secondary);
    margin-bottom: var(--sf-spacing-xs);
}

.sf-stat-bar {
    display: flex;
    height: 8px;
    background: var(--sf-bg-card);
    border-radius: 4px;
    overflow: hidden;
}

.sf-stat-bar-home {
    background: var(--sf-primary);
    transition: width 0.5s ease;
}

.sf-stat-bar-away {
    background: var(--sf-accent);
    transition: width 0.5s ease;
}

.sf-no-stats {
    text-align: center;
    padding: var(--sf-spacing-xl);
    color: var(--sf-text-secondary);
}

/* ============================================
   Lineups
   ============================================ */
.sf-lineups-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sf-spacing-xl);
}

.sf-lineup-header {
    display: flex;
    align-items: center;
    gap: var(--sf-spacing-sm);
    padding: var(--sf-spacing-md);
    background: var(--sf-bg-card);
    border-radius: var(--sf-radius);
    margin-bottom: var(--sf-spacing-md);
}

.sf-lineup-team-name {
    font-weight: 700;
    flex: 1;
}

.sf-formation {
    font-size: var(--sf-font-size-sm);
    color: var(--sf-text-secondary);
    font-weight: 600;
}

.sf-lineup-section-title {
    font-size: var(--sf-font-size-sm);
    font-weight: 700;
    color: var(--sf-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 var(--sf-spacing-sm);
}

.sf-lineup-list {
    list-style: none;
    margin: 0 0 var(--sf-spacing-lg);
    padding: 0;
}

.sf-lineup-player {
    display: flex;
    align-items: center;
    gap: var(--sf-spacing-sm);
    padding: var(--sf-spacing-sm) 0;
    border-bottom: 1px solid var(--sf-border-light);
}

.sf-player-number-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--sf-bg-card);
    border-radius: var(--sf-radius-sm);
    font-size: var(--sf-font-size-xs);
    font-weight: 700;
    flex-shrink: 0;
}

.sf-player-link {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
}

.sf-player-link:hover {
    color: var(--sf-secondary);
}

.sf-captain-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: var(--sf-yellow);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    margin-left: var(--sf-spacing-xs);
}

.sf-lineup-list-subs .sf-lineup-player {
    opacity: 0.8;
}

.sf-no-lineups {
    text-align: center;
    padding: var(--sf-spacing-xl);
    color: var(--sf-text-secondary);
}

/* ============================================
   H2H
   ============================================ */
.sf-h2h-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sf-spacing-lg);
    padding: var(--sf-spacing-lg);
    background: var(--sf-bg-card);
    border-radius: var(--sf-radius-lg);
}

.sf-h2h-team {
    text-align: center;
}

.sf-h2h-team-name {
    display: block;
    font-size: var(--sf-font-size-sm);
    color: var(--sf-text-secondary);
    margin-bottom: var(--sf-spacing-xs);
}

.sf-h2h-wins {
    display: block;
    font-size: var(--sf-font-size-3xl);
    font-weight: 800;
    color: var(--sf-primary);
}

.sf-h2h-center {
    text-align: center;
}

.sf-h2h-draws {
    display: block;
    font-size: var(--sf-font-size-2xl);
    font-weight: 800;
    color: var(--sf-text-muted);
}

.sf-h2h-label {
    display: block;
    font-size: var(--sf-font-size-xs);
    color: var(--sf-text-muted);
    text-transform: uppercase;
}

.sf-h2h-bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--sf-spacing-xl);
}

.sf-h2h-bar-home { background: var(--sf-primary); }
.sf-h2h-bar-draw { background: var(--sf-text-muted); }
.sf-h2h-bar-away { background: var(--sf-accent); }

.sf-h2h-title {
    font-size: var(--sf-font-size-base);
    font-weight: 700;
    margin: 0 0 var(--sf-spacing-md);
}

.sf-h2h-list {
    display: flex;
    flex-direction: column;
    gap: var(--sf-spacing-sm);
}

.sf-h2h-match {
    display: flex;
    align-items: center;
    gap: var(--sf-spacing-md);
    padding: var(--sf-spacing-sm) var(--sf-spacing-md);
    background: var(--sf-bg-card);
    border-radius: var(--sf-radius);
    color: var(--sf-text-primary);
    border-left: 3px solid var(--sf-border);
}

.sf-h2h-match-date {
    font-size: var(--sf-font-size-xs);
    color: var(--sf-text-muted);
    min-width: 80px;
    flex-shrink: 0;
}

.sf-h2h-match-teams {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sf-spacing-xs);
    font-size: var(--sf-font-size-sm);
}

.sf-h2h-match-teams .sf-h2h-team-name {
    font-weight: 500;
    color: var(--sf-text-primary);
}

.sf-h2h-match-teams .sf-h2h-team-name:first-child {
    text-align: right;
    flex: 1;
}

.sf-h2h-match-teams .sf-h2h-team-name:last-child {
    text-align: left;
    flex: 1;
}

.sf-h2h-match-score {
    font-weight: 700;
    padding: 4px 12px;
    background: var(--sf-primary);
    color: #fff;
    border-radius: var(--sf-radius);
    font-size: var(--sf-font-size-sm);
    white-space: nowrap;
}

.sf-h2h-match-comp {
    font-size: var(--sf-font-size-xs);
    color: var(--sf-text-secondary);
    flex-shrink: 0;
}

/* ============================================
   Predictions
   ============================================ */
.sf-predictions-main {
    margin-bottom: var(--sf-spacing-lg);
}

.sf-predictions-title {
    font-size: var(--sf-font-size-base);
    font-weight: 700;
    margin: 0 0 var(--sf-spacing-md);
}

.sf-predictions-1x2 {
    display: flex;
    flex-direction: column;
    gap: var(--sf-spacing-md);
}

.sf-prediction-item {
    display: flex;
    align-items: center;
    gap: var(--sf-spacing-md);
}

.sf-prediction-label {
    width: 120px;
    font-size: var(--sf-font-size-sm);
    color: var(--sf-text-secondary);
}

.sf-prediction-bar {
    flex: 1;
    height: 24px;
    background: var(--sf-bg-card);
    border-radius: var(--sf-radius);
    overflow: hidden;
}

.sf-prediction-fill {
    height: 100%;
    transition: width 0.5s ease;
}

.sf-prediction-home { background: var(--sf-primary); }
.sf-prediction-draw { background: var(--sf-text-muted); }
.sf-prediction-away { background: var(--sf-accent); }

.sf-prediction-value {
    width: 50px;
    text-align: right;
    font-weight: 700;
}

.sf-predictions-extra {
    display: flex;
    gap: var(--sf-spacing-md);
    flex-wrap: wrap;
    margin-bottom: var(--sf-spacing-lg);
}

.sf-prediction-card {
    flex: 1;
    min-width: 120px;
    padding: var(--sf-spacing-md);
    background: var(--sf-bg-card);
    border-radius: var(--sf-radius);
    text-align: center;
}

.sf-prediction-card-label {
    display: block;
    font-size: var(--sf-font-size-xs);
    color: var(--sf-text-secondary);
    margin-bottom: var(--sf-spacing-xs);
}

.sf-prediction-card-value {
    font-size: var(--sf-font-size-xl);
    font-weight: 700;
    color: var(--sf-primary);
}

.sf-predictions-disclaimer {
    font-size: var(--sf-font-size-xs);
    color: var(--sf-text-muted);
    font-style: italic;
}

/* ============================================
   Team Page
   ============================================ */
.sf-team-header {
    background: linear-gradient(135deg, var(--sf-primary) 0%, var(--sf-accent) 100%);
    color: white;
    padding: var(--sf-spacing-lg) 0 var(--sf-spacing-xl);
}

.sf-team-hero {
    display: flex;
    align-items: center;
    gap: var(--sf-spacing-lg);
    margin-bottom: var(--sf-spacing-lg);
}

.sf-team-info-hero {
    flex: 1;
}

.sf-team-name-xl {
    font-size: var(--sf-font-size-2xl);
    font-weight: 800;
    margin: 0 0 var(--sf-spacing-xs);
}

.sf-team-country {
    font-size: var(--sf-font-size-lg);
    opacity: 0.8;
    margin: 0;
}

.sf-team-coach {
    display: flex;
    align-items: center;
    gap: var(--sf-spacing-md);
    padding: var(--sf-spacing-md);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--sf-radius);
}

.sf-coach-photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.sf-coach-label {
    display: block;
    font-size: var(--sf-font-size-xs);
    opacity: 0.7;
}

.sf-coach-name {
    font-weight: 600;
}

.sf-squad-section {
    margin-bottom: var(--sf-spacing-xl);
}

.sf-squad-title {
    font-size: var(--sf-font-size-lg);
    font-weight: 700;
    margin: 0 0 var(--sf-spacing-md);
    padding-bottom: var(--sf-spacing-sm);
    border-bottom: 2px solid var(--sf-primary);
}

.sf-players-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--sf-spacing-md);
}

.sf-player-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sf-spacing-sm);
    padding: var(--sf-spacing-md);
    background: var(--sf-bg-light);
    border: 1px solid var(--sf-border-light);
    border-radius: var(--sf-radius);
    text-decoration: none;
    color: inherit;
    transition: all var(--sf-transition);
}

.sf-player-card:hover {
    border-color: var(--sf-primary);
    box-shadow: var(--sf-shadow);
}

.sf-player-photo-wrapper {
    position: relative;
}

.sf-player-photo-lg {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.sf-player-card .sf-player-number {
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--sf-primary);
    color: white;
    font-size: var(--sf-font-size-xs);
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--sf-radius-sm);
}

.sf-player-name-card {
    font-size: var(--sf-font-size-sm);
    font-weight: 600;
    text-align: center;
}

.sf-fixtures-section {
    margin-bottom: var(--sf-spacing-xl);
}

.sf-fixtures-title {
    font-size: var(--sf-font-size-base);
    font-weight: 700;
    margin: 0 0 var(--sf-spacing-md);
}

.sf-injuries-list {
    display: flex;
    flex-direction: column;
    gap: var(--sf-spacing-sm);
}

.sf-injury-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sf-spacing-md);
    background: var(--sf-bg-card);
    border-radius: var(--sf-radius);
}

.sf-injury-player {
    display: flex;
    align-items: center;
    gap: var(--sf-spacing-sm);
}

.sf-player-photo-sm {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.sf-injury-name {
    font-weight: 600;
}

.sf-injury-details {
    display: flex;
    align-items: center;
    gap: var(--sf-spacing-sm);
}

.sf-injury-type {
    padding: 2px 8px;
    font-size: var(--sf-font-size-xs);
    font-weight: 600;
    border-radius: var(--sf-radius-sm);
    text-transform: uppercase;
}

.sf-injury-injured { background: var(--sf-live); color: white; }
.sf-injury-suspended { background: var(--sf-yellow); color: #000; }
.sf-injury-doubtful { background: var(--sf-text-muted); color: white; }

.sf-injury-reason {
    font-size: var(--sf-font-size-sm);
    color: var(--sf-text-secondary);
}

/* ============================================
   Player Page
   ============================================ */
.sf-player-header {
    background: linear-gradient(135deg, var(--sf-primary) 0%, var(--sf-accent) 100%);
    color: white;
    padding: var(--sf-spacing-lg) 0 var(--sf-spacing-xl);
}

.sf-player-hero {
    display: flex;
    align-items: center;
    gap: var(--sf-spacing-lg);
    margin-bottom: var(--sf-spacing-lg);
}

.sf-player-photo-hero {
    position: relative;
}

.sf-player-img-hero {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, 0.3);
}

.sf-player-number-hero {
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--sf-secondary);
    color: white;
    font-size: var(--sf-font-size-lg);
    font-weight: 800;
    padding: 4px 12px;
    border-radius: var(--sf-radius);
}

.sf-player-info-hero {
    flex: 1;
}

.sf-player-name-hero {
    font-size: var(--sf-font-size-2xl);
    font-weight: 800;
    margin: 0 0 var(--sf-spacing-xs);
}

.sf-player-position {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--sf-radius);
    font-size: var(--sf-font-size-sm);
    font-weight: 600;
    margin-bottom: var(--sf-spacing-sm);
}

.sf-player-team-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sf-spacing-xs);
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: var(--sf-font-size-sm);
}

.sf-player-team-link:hover {
    color: white;
}

.sf-player-meta {
    display: flex;
    gap: var(--sf-spacing-xl);
    flex-wrap: wrap;
}

.sf-player-meta .sf-meta-item {
    display: flex;
    flex-direction: column;
}

.sf-player-meta .sf-meta-label {
    font-size: var(--sf-font-size-xs);
    opacity: 0.7;
}

.sf-player-meta .sf-meta-value {
    font-weight: 600;
}

/* Player Stats Grid */
.sf-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sf-spacing-md);
    margin-bottom: var(--sf-spacing-xl);
}

.sf-stat-card {
    padding: var(--sf-spacing-lg);
    background: var(--sf-bg-card);
    border-radius: var(--sf-radius-lg);
    text-align: center;
}

.sf-stat-card-primary {
    background: var(--sf-primary);
    color: white;
}

.sf-stat-value-lg {
    display: block;
    font-size: var(--sf-font-size-3xl);
    font-weight: 800;
    line-height: 1;
}

.sf-stat-label-lg {
    display: block;
    font-size: var(--sf-font-size-sm);
    margin-top: var(--sf-spacing-xs);
    opacity: 0.8;
}

.sf-stat-card .sf-stat-value {
    display: block;
    font-size: var(--sf-font-size-xl);
    font-weight: 700;
}

.sf-stat-card .sf-stat-label {
    display: block;
    font-size: var(--sf-font-size-xs);
    color: var(--sf-text-secondary);
}

.sf-stats-details {
    margin-bottom: var(--sf-spacing-xl);
}

.sf-stats-section-title {
    font-size: var(--sf-font-size-base);
    font-weight: 700;
    margin: 0 0 var(--sf-spacing-md);
    padding-bottom: var(--sf-spacing-sm);
    border-bottom: 1px solid var(--sf-border);
}

.sf-stats-table {
    display: flex;
    flex-direction: column;
}

.sf-stats-row {
    display: flex;
    justify-content: space-between;
    padding: var(--sf-spacing-sm) 0;
    border-bottom: 1px solid var(--sf-border-light);
}

.sf-stats-row-label {
    color: var(--sf-text-secondary);
}

.sf-stats-row-value {
    font-weight: 600;
}

.sf-stats-discipline {
    padding: var(--sf-spacing-lg);
    background: var(--sf-bg-card);
    border-radius: var(--sf-radius);
}

.sf-discipline-cards {
    display: flex;
    gap: var(--sf-spacing-lg);
}

.sf-discipline-item {
    display: flex;
    align-items: center;
    gap: var(--sf-spacing-sm);
}

.sf-discipline-count {
    font-size: var(--sf-font-size-xl);
    font-weight: 700;
}

/* ============================================
   Utility Classes
   ============================================ */
.sf-no-data,
.sf-error {
    text-align: center;
    padding: var(--sf-spacing-xl);
    color: var(--sf-text-secondary);
}

.sf-error {
    color: var(--sf-live);
}

.sf-icon {
    flex-shrink: 0;
}

/* ============================================
   Responsive Breakpoints
   ============================================ */
/* See responsive.css for media queries */

/* ============================================================
   Classement de groupe — maquette Claude Design (10/06/2026).
   Variante complète (.sf-stand-card + .sf-stand-table) et
   compacte (.sf-clist). Préfixe sf-stand- pour ne pas entrer
   en collision avec .sf-card (cartons jaunes/rouges).
   ============================================================ */
.sf-standings { font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif; }

/* Sélecteur de groupe : pilules horizontales scrollables */
.sf-grouptabs {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 4px 4px 10px; margin: 0 0 14px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.sf-grouptabs::-webkit-scrollbar { display: none; }
.sf-pill {
  flex: 0 0 auto; scroll-snap-align: start; appearance: none;
  border: 1px solid #e0e0e0; background: #ffffff; color: #1a1a1a;
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 600; font-size: 13px; line-height: 1;
  padding: 9px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.sf-pill:hover { background: #fafafa; border-color: #d4d4d4; }
.sf-pill[aria-pressed="true"] { background: #ff9900; border-color: #ff9900; color: #fff; }
.sf-pill[aria-pressed="true"]:hover { background: #e68a00; border-color: #e68a00; }
.sf-pill__g { opacity: .65; font-weight: 500; margin-right: 4px; }
.sf-pill[aria-pressed="true"] .sf-pill__g { opacity: .85; }

/* Carte */
.sf-stand-card {
  background: #ffffff; border: 1px solid #eceef1; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.03);
  overflow: hidden; margin-bottom: 16px;
  font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif;
}
.sf-stand-card__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 14px 16px 12px; border-bottom: 1px solid #ececec;
}
.sf-stand-card__title {
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-size: 15px; font-weight: 700; color: #16181c; margin: 0;
  letter-spacing: -.005em; white-space: nowrap;
}
.sf-stand-card__meta { font-size: 12px; color: #666666; white-space: nowrap; }

/* Tableau complet */
.sf-stand-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sf-stand-table thead th {
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
  color: #6b7280; text-transform: uppercase;
  padding: 9px 4px; text-align: center; background: #fafafa;
  border-bottom: 1px solid #ececec;
}
.sf-stand-table thead th.sf-th-team { text-align: left; padding-left: 12px; width: 100%; }
.sf-stand-table thead th.sf-th-pos { width: 30px; }
.sf-stand-table thead th:not(.sf-th-team):not(.sf-th-pos) { width: 34px; }
.sf-stand-table tbody td {
  padding: 0 4px; height: 46px; text-align: center;
  font-size: 14px; color: #1a1a1a; border-bottom: 1px solid #ececec;
}
.sf-stand-table tbody tr:last-child td { border-bottom: none; }
.sf-stand-table .sf-col-num { font-weight: 600; }
.sf-stand-table .sf-col-pts {
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 800; font-size: 15px; color: #16181c;
}
.sf-col-diff { font-weight: 600; }
.sf-diff-pos { color: #16a34a; }
.sf-diff-neg { color: #dc2626; }
.sf-diff-zero { color: #6b7280; }

/* Cellule position + liseré */
.sf-stand-table .sf-td-pos {
  position: relative; width: 30px; padding-left: 10px;
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 700; color: #6b7280;
}
.sf-stand-table .sf-td-pos::before {
  content: ""; position: absolute; left: 0; top: 7px; bottom: 7px;
  width: 3px; border-radius: 0 2px 2px 0; background: transparent;
}

/* Équipe */
.sf-stand-table .sf-td-team { text-align: left; padding-left: 8px; }
.sf-stand-team {
  display: flex; align-items: center; gap: 9px; width: 100%; min-width: 0;
  text-decoration: none; color: inherit;
}
a.sf-stand-team:hover .sf-stand-team__name { color: #e68a00; }
.sf-stand-flag {
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%;
  object-fit: cover; background: #fafafa; border: 1px solid #eceef1; display: block;
}
.sf-stand-team__name {
  flex: 1 1 auto; min-width: 0; font-weight: 600; color: #1a1a1a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Lignes qualification */
.sf-stand-table tr.sf-qual td { background: rgba(22,163,74,.055); }
.sf-stand-table tr.sf-qual .sf-td-pos::before { background: #16a34a; }
.sf-stand-table tr.sf-qual .sf-td-pos .sf-col-num { color: #16a34a; }
.sf-stand-table tr.sf-third td { background: rgba(245,158,11,.07); }
.sf-stand-table tr.sf-third .sf-td-pos::before { background: #f59e0b; }
.sf-stand-table tr.sf-third .sf-td-pos .sf-col-num { color: #b45309; }

/* Légende */
.sf-stand-legend {
  display: flex; flex-wrap: wrap; gap: 14px 18px;
  padding: 11px 16px 13px; border-top: 1px solid #ececec; background: #fafafa;
}
.sf-stand-legend__item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #6b7280; }
.sf-stand-legend__dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.sf-stand-legend__dot--q { background: #16a34a; }
.sf-stand-legend__dot--t { background: #f59e0b; }

/* Variante compacte (sidebar) */
.sf-stand-compact .sf-stand-card__head { padding: 13px 14px 11px; }
.sf-clist { list-style: none; margin: 0; padding: 4px 0; }
.sf-clist li {
  display: flex; align-items: center; gap: 10px; height: 44px;
  padding: 0 14px; border-bottom: 1px solid #ececec; position: relative;
}
.sf-clist li:last-child { border-bottom: none; }
.sf-clist__pos {
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 700; font-size: 13px; color: #6b7280;
  width: 16px; text-align: center; flex: 0 0 16px;
}
.sf-clist__name {
  flex: 1; min-width: 0; font-weight: 600; font-size: 14px; color: #1a1a1a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sf-clist__pts {
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 800; font-size: 15px; color: #16181c; font-variant-numeric: tabular-nums;
}
.sf-clist__pts small {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-weight: 500; font-size: 10px; color: #6b7280; margin-left: 2px; text-transform: uppercase;
}
.sf-clist li.sf-qual::before,
.sf-clist li.sf-third::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 2px 2px 0;
}
.sf-clist li.sf-qual::before { background: #16a34a; }
.sf-clist li.sf-third::before { background: #f59e0b; }
.sf-clist li.sf-qual { background: rgba(22,163,74,.05); }
.sf-clist li.sf-third { background: rgba(245,158,11,.065); }
.sf-clist li.sf-qual .sf-clist__pos { color: #16a34a; }
.sf-clist li.sf-third .sf-clist__pos { color: #b45309; }

/* État vide */
.sf-stand-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 40px 24px 44px; gap: 6px;
}
.sf-stand-empty__icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: #fafafa; border: 1px solid #eceef1;
  display: grid; place-items: center; margin-bottom: 8px; color: #6b7280;
}
.sf-stand-empty__title {
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-size: 15px; font-weight: 700; color: #16181c; margin: 0;
}
.sf-stand-empty__text { font-size: 13px; color: #6b7280; margin: 0; max-width: 30ch; line-height: 1.45; }

/* Densité mobile : masquer V N D BP BC, garder MJ +/- PTS */
@media (max-width: 539px) {
  .sf-col-vnd, .sf-col-bpbc { display: none; }
  .sf-stand-table tbody td { font-size: 13px; }
  .sf-stand-team__name { font-size: 13.5px; }
}

/* ============================================================
   Bandeau « Scores en direct » — mini-cartes horizontales
   scroll-snap (~72px). Masqué quand aucun match en cours.
   ============================================================ */
.sf-ls-strip {
  display: flex; align-items: stretch; gap: 10px;
  background: #ffffff; border: 1px solid #eceef1; border-radius: 12px;
  padding: 10px 12px; margin: 14px 0;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif;
}
.sf-ls-head {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; flex: 0 0 auto; padding: 0 6px 0 2px;
  border-right: 1px solid #ececec;
}
.sf-ls-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #e63900;
  box-shadow: 0 0 0 0 rgba(230,57,0,.5);
  animation: sf-ls-pulse 1.9s ease-out infinite;
}
.sf-ls-label {
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-size: 10px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: #e63900;
  writing-mode: initial; white-space: nowrap;
}
.sf-ls-track {
  display: flex; gap: 8px; overflow-x: auto; min-width: 0;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.sf-ls-track::-webkit-scrollbar { display: none; }
.sf-ls-card {
  flex: 0 0 auto; scroll-snap-align: start;
  display: flex; align-items: center; gap: 10px;
  border: 1px solid #eceef1; border-radius: 10px;
  padding: 8px 12px; min-width: 170px;
  text-decoration: none; color: inherit; background: #ffffff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sf-ls-card:hover { border-color: #ffd592; box-shadow: 0 3px 10px rgba(20,24,28,.07); }
.sf-ls-side { display: inline-flex; align-items: center; gap: 6px; }
.sf-ls-flag {
  width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
  border: 1px solid rgba(0,0,0,.09); background: #f4f5f2; display: block;
}
.sf-ls-tri {
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 800; font-size: 13px; letter-spacing: .02em; color: #16181c;
}
.sf-ls-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 44px; }
.sf-ls-score {
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 800; font-size: 16px; line-height: 1; color: #e63900; white-space: nowrap;
}
.sf-ls-dash { color: #f0b9a8; font-weight: 600; margin: 0 2px; }
.sf-ls-min {
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #e63900; white-space: nowrap;
  max-width: 86px; overflow: hidden; text-overflow: ellipsis;
}
@media (prefers-reduced-motion: reduce) {
  .sf-ls-dot { animation: none; }
}

@keyframes sf-ls-pulse {
  0% { box-shadow: 0 0 0 0 rgba(230,57,0,.45); }
  70% { box-shadow: 0 0 0 5px rgba(230,57,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(230,57,0,0); }
}

/* ============================================================
   Carte « Prochain match » (sf-nm-*) — grande carte VS avec
   compte à rebours, stade, diffuseurs et bouton orange.
   ============================================================ */
.sf-nm-card {
  background: #ffffff; border: 1px solid #eceef1; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 26px rgba(20,24,28,.05);
  padding: 16px 16px 18px; text-align: center; margin: 14px 0;
  font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif;
}
.sf-nm-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 14px;
}
.sf-nm-kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: #ff9900;
}
.sf-nm--live .sf-nm-kicker { color: #e63900; }
.sf-nm-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #e63900;
  box-shadow: 0 0 0 0 rgba(230,57,0,.5);
  animation: sf-ls-pulse 1.9s ease-out infinite;
}
.sf-nm-phase {
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #7a818c; background: #fafafa; border: 1px solid #eceef1;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.sf-nm-body {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
}
.sf-nm-team { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.sf-nm-logo {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  border: 1px solid rgba(0,0,0,.08); box-shadow: 0 2px 6px rgba(0,0,0,.08);
  background: #f4f5f2; display: block;
}
.sf-nm-tri {
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 800; font-size: 15px; letter-spacing: .02em; color: #16181c;
}
.sf-nm-name {
  display: none; font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 700; font-size: 14px; color: #16181c;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
@media (min-width: 480px) {
  .sf-nm-tri { display: none; }
  .sf-nm-name { display: block; }
}
.sf-nm-center { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 6px; }
.sf-nm-vs {
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 800; font-size: 13px; letter-spacing: .12em; color: #c7cbd1;
}
.sf-nm-time {
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 800; font-size: 26px; line-height: 1; color: #16181c; white-space: nowrap;
}
.sf-nm-score {
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 800; font-size: 30px; line-height: 1; color: #16181c; white-space: nowrap;
}
.sf-nm--live .sf-nm-score { color: #e63900; }
.sf-nm-dash { color: #c7cbd1; margin: 0 4px; }
.sf-nm-status {
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #7a818c; white-space: nowrap;
}
.sf-nm-status.is-live { color: #e63900; }
.sf-nm-date {
  margin-top: 12px;
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 700; font-size: 14px; color: #16181c;
}
.sf-nm-countdown {
  display: flex; justify-content: center; gap: 10px; margin-top: 8px;
}
.sf-nm-cd-seg {
  display: inline-flex; align-items: baseline; gap: 3px;
  background: #fafafa; border: 1px solid #eceef1; border-radius: 8px;
  padding: 6px 10px;
}
.sf-nm-cd-seg b {
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 800; font-size: 17px; color: #16181c; font-variant-numeric: tabular-nums;
}
.sf-nm-cd-seg i {
  font-style: normal; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: #6b7280;
}
.sf-nm-venue {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 10px; font-size: 12.5px; color: #666666;
}
.sf-nm-tv {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px; margin-top: 10px; color: #9aa0a6;
}
.sf-nm-tv-chip {
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-size: 11px; font-weight: 600; color: #6b7280;
  background: #fafafa; border: 1px solid #eceef1;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.sf-nm-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px; padding: 10px 22px; border-radius: 999px;
  background: #ff9900; color: #ffffff; text-decoration: none;
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 700; font-size: 14px;
  box-shadow: 0 3px 9px rgba(255,153,0,.32);
  transition: background-color .15s ease, transform .12s ease;
}
.sf-nm-btn:hover { background: #e68a00; color: #fff; }
.sf-nm-btn:active { transform: translateY(1px); }
.sf-nm--live .sf-nm-btn { background: #e63900; box-shadow: 0 3px 9px rgba(230,57,0,.3); }
.sf-nm--live .sf-nm-btn:hover { background: #c93200; }

/* ============================================================
   Classement des buteurs (sf-ts-*) — photos rondes, barre de
   progression relative au leader, médailles top 3.
   ============================================================ */
.sf-ts-list { list-style: none; margin: 0; padding: 4px 0; }
.sf-ts-row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 14px; border-bottom: 1px solid #ececec; position: relative;
}
.sf-ts-row:last-child { border-bottom: none; }
.sf-ts-pos {
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 800; font-size: 13px; color: #9aa0a6;
  width: 20px; flex: 0 0 20px; text-align: center;
}
.sf-ts--m1 .sf-ts-pos { color: #d4a017; }
.sf-ts--m2 .sf-ts-pos { color: #8c9aa8; }
.sf-ts--m3 .sf-ts-pos { color: #b46f3c; }
.sf-ts--m1 .sf-ts-pos::after,
.sf-ts--m2 .sf-ts-pos::after,
.sf-ts--m3 .sf-ts-pos::after { content: "•"; display: block; font-size: 9px; line-height: 2px; }
.sf-ts-main {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  text-decoration: none; color: inherit;
}
a.sf-ts-main:hover .sf-ts-name { color: #e68a00; }
.sf-ts-photo-wrap { position: relative; flex: 0 0 auto; }
.sf-ts-photo {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  background: #f4f5f2; border: 1px solid #eceef1; display: block;
}
.sf-ts-photo--sm { width: 32px; height: 32px; }
.sf-ts-photo--ph { display: block; }
.sf-ts-teamflag {
  position: absolute; right: -3px; bottom: -3px;
  width: 16px; height: 16px; border-radius: 50%; object-fit: cover;
  border: 2px solid #ffffff; background: #f4f5f2;
}
.sf-ts-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sf-ts-name {
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 700; font-size: 14px; color: #16181c;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sf-ts-country { font-size: 12px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-ts-bar {
  height: 4px; border-radius: 2px; background: #f2f3ef;
  overflow: hidden; margin-top: 3px; max-width: 220px;
}
.sf-ts-bar i { display: block; height: 100%; border-radius: 2px; background: #ff9900; }
.sf-ts-total { flex: 0 0 auto; text-align: right; white-space: nowrap; }
.sf-ts-total b {
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 800; font-size: 19px; color: #ff9900; font-variant-numeric: tabular-nums;
}
.sf-ts-total small {
  display: block; font-size: 9.5px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: #9aa0a6;
}
.sf-ts-total--sm b { font-size: 16px; }
.sf-ts-row--sm { padding: 7px 14px; }
.sf-ts-more { text-decoration: none; color: #ff9900; font-weight: 700; }
.sf-ts-more:hover { color: #e68a00; }

/* ============================================================
   Liste de matchs par jour (sf-fxl-*) — rangées compactes
   partagées (programme, résultats, prochains matchs).
   ============================================================ */
.sf-fxl { container-type: inline-size; font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif; }
.sf-fxl-day {
  display: flex; align-items: center; gap: 8px;
  margin: 18px 2px 9px;
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #7a818c;
}
.sf-fxl-day:first-child { margin-top: 4px; }
.sf-fxl-day.is-today .sf-fxl-day__label { color: #e68a00; }
.sf-fxl-day::after { content: ""; flex: 1; height: 1px; background: #ececec; }
.sf-fxl-day__count {
  order: 3; font-size: 10px; color: #8a909a;
  background: #ffffff; border: 1px solid #e7e8e3;
  padding: 2px 8px; border-radius: 999px;
}
.sf-fxl-rows { display: grid; grid-template-columns: 1fr; gap: 8px; }
.sf-fxl-row {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid #eceef1; border-radius: 10px;
  background: #ffffff; padding: 8px 12px 7px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.sf-fxl-row:hover { border-color: #ffd592; box-shadow: 0 3px 12px rgba(20,24,28,.07); background: #fafafa; }
.sf-fxl-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.sf-fxl-side { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sf-fxl-home { justify-content: flex-start; }
.sf-fxl-away { justify-content: flex-end; }
.sf-fxl-away .sf-fxl-code { text-align: right; }
.sf-fxl-flag {
  width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid rgba(0,0,0,.09); object-fit: cover;
  background: #f4f5f2; display: block;
}
.sf-fxl-code { min-width: 0; }
.sf-fxl-tri {
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 800; font-size: 14.5px; line-height: 1; letter-spacing: .02em; color: #16181c;
}
.sf-fxl-name {
  display: none; font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 700; font-size: 15px; line-height: 1.1; color: #16181c;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.sf-fxl-mid { flex: 0 0 auto; text-align: center; min-width: 52px; padding: 0 2px; }
.sf-fxl-sc {
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 800; font-size: 17px; line-height: 1; color: #16181c; white-space: nowrap;
}
.sf-fxl-dash { color: #c7cbd1; font-weight: 600; margin: 0 3px; }
.sf-fxl-time {
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 800; font-size: 15px; line-height: 1; color: #16181c; white-space: nowrap;
}
.sf-fxl-row.sf--live .sf-fxl-sc { color: #e63900; }
.sf-fxl-row.sf--special .sf-fxl-time { color: #9aa0a6; }
.sf-fxl-row.sf--special-bad .sf-fxl-time { color: #9aa0a6; text-decoration: line-through; }
.sf-fxl-meta {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 16px; margin-top: 4px;
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-size: 10.5px; font-weight: 700; line-height: 1; letter-spacing: .045em;
  text-transform: uppercase; color: #9aa0a6; white-space: nowrap; overflow: hidden;
}
.sf-fxl-phase { color: #7a818c; }
.sf-fxl-sep { color: #d2d6db; }
.sf-fxl-state { color: #7a818c; }
.sf-fxl-min { color: #e63900; }
.sf-fxl-pens { color: #7a818c; letter-spacing: .02em; }
.sf-fxl-row.sf--live .sf-fxl-pens { color: #e63900; }
.sf-fxl-live { display: inline-flex; align-items: center; gap: 5px; color: #e63900; }
.sf-fxl-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #e63900;
  box-shadow: 0 0 0 0 rgba(230,57,0,.5);
  animation: sf-ls-pulse 1.9s ease-out infinite;
}
.sf-fxl-special { color: #2563eb; }
.sf-fxl-special-bad { color: #dc2626; }
.sf-fxl-row.sf--done .sf-lose .sf-fxl-tri,
.sf-fxl-row.sf--done .sf-lose .sf-fxl-name { color: #abb0b7; font-weight: 600; }

@container (min-width: 768px) {
  .sf-fxl-tri { display: none; }
  .sf-fxl-name { display: inline-block; }
  .sf-fxl-rows { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sf-fxl-row { padding: 10px 14px 9px; }
  .sf-fxl-mid { min-width: 58px; }
  .sf-fxl-sc { font-size: 18px; }
  .sf-fxl-time { font-size: 16px; }
}
/* Variante compacte (sidebar) : toujours 1 colonne, trigrammes */
.sf-fxl--compact .sf-fxl-rows { grid-template-columns: 1fr; }
.sf-fxl--compact .sf-fxl-tri { display: inline; }
.sf-fxl--compact .sf-fxl-name { display: none; }

/* ============================================================
   Carte équipe (sf-tc-*) — bandeau, chiffres clés, forme,
   prochain match.
   ============================================================ */
.sf-tc-card {
  background: #ffffff; border: 1px solid #eceef1; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.03);
  padding: 14px 16px 16px; margin: 14px 0;
  font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif;
}
.sf-tc-head { display: flex; align-items: center; gap: 12px; }
.sf-tc-logo {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
  border: 1px solid rgba(0,0,0,.08); box-shadow: 0 2px 6px rgba(0,0,0,.07);
  background: #f4f5f2; display: block; flex: 0 0 auto;
}
.sf-tc-id { min-width: 0; flex: 1; }
.sf-tc-name {
  display: block;
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 800; font-size: 17px; color: #16181c; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sf-tc-sub { display: block; margin-top: 2px; font-size: 12.5px; color: #6b7280; }
.sf-tc-tri {
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 800; font-size: 13px; letter-spacing: .04em; color: #9aa0a6;
  background: #fafafa; border: 1px solid #eceef1; border-radius: 8px;
  padding: 5px 9px; flex: 0 0 auto;
}
.sf-tc-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 13px;
}
.sf-tc-stat {
  text-align: center; background: #fafafa; border: 1px solid #eceef1;
  border-radius: 10px; padding: 9px 6px 8px;
}
.sf-tc-stat b {
  display: block;
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 800; font-size: 16px; color: #16181c; font-variant-numeric: tabular-nums;
}
.sf-tc-stat small {
  display: block; margin-top: 2px; font-size: 9.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: #9aa0a6;
}
.sf-tc-stat--pts b { color: #ff9900; font-size: 18px; }
.sf-tc-form {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
}
.sf-tc-form__label {
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #9aa0a6;
}
.sf-tc-form__dots { display: inline-flex; gap: 5px; }
.sf-tc-dot {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-style: normal;
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 800; font-size: 10.5px; color: #fff;
}
.sf-tc-dot--v { background: #16a34a; }
.sf-tc-dot--n { background: #9aa0a6; }
.sf-tc-dot--d { background: #dc2626; }
.sf-tc-next {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 13px; padding: 10px 12px;
  background: #fafafa; border: 1px solid #eceef1; border-radius: 10px;
  text-decoration: none; color: inherit;
  transition: border-color .15s ease;
}
.sf-tc-next:hover { border-color: #ffd592; }
.sf-tc-next__label {
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #9aa0a6; flex: 0 0 auto;
}
.sf-tc-next__match {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 700; font-size: 13.5px; color: #16181c;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sf-tc-next__match em { font-style: normal; font-weight: 500; color: #6b7280; }
.sf-tc-next__flag {
  width: 18px; height: 18px; border-radius: 50%; object-fit: cover;
  border: 1px solid rgba(0,0,0,.08); background: #f4f5f2;
}
.sf-tc-link {
  display: inline-flex; margin-top: 12px;
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 700; font-size: 13px; color: #ff9900; text-decoration: none;
}
.sf-tc-link:hover { color: #e68a00; }

/* ============================================================
   Notes des joueurs (sf-rt-*) — pastilles colorées, homme du
   match, colonnes par équipe avec bascule mobile.
   ============================================================ */
.sf-rt { container-type: inline-size; font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif; }
.sf-rt-motm {
  display: flex; align-items: center; gap: 12px;
  background: #fff7e6; border: 1px solid #f3dfb6; border-radius: 12px;
  padding: 11px 14px; margin-bottom: 14px;
}
.sf-rt-motm__photo {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  border: 2px solid #ffffff; box-shadow: 0 2px 6px rgba(0,0,0,.1);
  background: #f4f5f2;
}
.sf-rt-motm__txt { flex: 1; min-width: 0; }
.sf-rt-motm__label {
  display: block;
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-size: 10px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: #c98a17;
}
.sf-rt-motm__name {
  display: block; margin-top: 2px;
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 800; font-size: 15px; color: #16181c;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sf-rt-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.sf-rt-tab {
  flex: 1; appearance: none; cursor: pointer;
  border: 1px solid #e0e0e0; background: #ffffff; color: #1a1a1a;
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 700; font-size: 13px; padding: 9px 10px; border-radius: 999px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.sf-rt-tab.is-active { background: #ff9900; border-color: #ff9900; color: #fff; }
.sf-rt-cols { display: grid; grid-template-columns: 1fr; gap: 16px; }
.sf-rt-col { display: none; }
.sf-rt-col.is-active { display: block; }
.sf-rt-teamhead {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 800; font-size: 13px; color: #16181c;
  padding-bottom: 8px; border-bottom: 2px solid #f1f5f9; margin-bottom: 4px;
}
.sf-rt-teamlogo { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: #f4f5f2; }
.sf-rt-list { list-style: none; margin: 0; padding: 0; }
.sf-rt-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 4px; border-bottom: 1px solid #ececec;
}
.sf-rt-row:last-child { border-bottom: none; }
.sf-rt-row--motm { background: #fff7e6; border-radius: 8px; padding-left: 8px; padding-right: 8px; }
.sf-rt-photo {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  background: #f4f5f2; border: 1px solid #eceef1; display: block;
}
.sf-rt-id { flex: 1; min-width: 0; }
.sf-rt-name {
  display: block;
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 700; font-size: 13.5px; color: #16181c;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sf-rt-star { color: #d4a017; margin-right: 2px; }
.sf-rt-pos { display: block; margin-top: 1px; font-size: 11px; color: #9aa0a6; text-transform: uppercase; letter-spacing: .04em; }
.sf-rt-pill {
  flex: 0 0 auto; min-width: 38px; text-align: center;
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 800; font-size: 13px; color: #ffffff;
  padding: 5px 8px; border-radius: 8px; font-variant-numeric: tabular-nums;
}
.sf-rt-pill--lg { font-size: 16px; padding: 7px 12px; border-radius: 10px; }
.sf-rt--good { background: #16a34a; }
.sf-rt--mid { background: #ff9900; }
.sf-rt--bad { background: #dc2626; }
.sf-rt--none { background: #e5e7eb; color: #9aa0a6; }

/* Colonne large : 2 équipes côte à côte, onglets masqués */
@container (min-width: 640px) {
  .sf-rt-tabs { display: none; }
  .sf-rt-cols { grid-template-columns: 1fr 1fr; }
  .sf-rt-col { display: block; }
}

/* ============================================================
   Carte match dans article (sf-mc-*) — header sombre, score
   énorme, 3 onglets mini à hauteur plafonnée.
   ============================================================ */
.sf-mc {
  background: #ffffff; border: 1px solid #eceef1; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 22px rgba(20,24,28,.05);
  overflow: hidden; margin: 18px 0;
  font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif;
}
.sf-mc-head {
  display: block; text-decoration: none; color: #ffffff;
  background: #16181c; padding: 12px 16px 15px;
}
.sf-mc-topline {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 11px;
}
.sf-mc-phase {
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: #ffb84d;
}
.sf-mc-statebadge, .sf-mc-livebadge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.1); border-radius: 999px; padding: 4px 10px;
  white-space: nowrap;
}
.sf-mc-livebadge { color: #fff; background: #e63900; }
.sf-mc-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,.6);
  animation: sf-ls-pulse 1.9s ease-out infinite;
}
.sf-mc-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.sf-mc-team { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.sf-mc-flag {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); display: block;
}
.sf-mc-tri {
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 800; font-size: 13.5px; letter-spacing: .03em; color: #fff;
}
.sf-mc-name {
  display: none;
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 700; font-size: 13.5px; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
@media (min-width: 480px) {
  .sf-mc-tri { display: none; }
  .sf-mc-name { display: block; }
}
.sf-mc-center { text-align: center; padding: 0 6px; }
.sf-mc-score {
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 800; font-size: 32px; line-height: 1; color: #fff; white-space: nowrap;
}
.sf-mc-score i { font-style: normal; color: rgba(255,255,255,.35); margin: 0 5px; }
.sf-mc--live .sf-mc-score { color: #ff6a3d; }
.sf-mc-time {
  display: block;
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 800; font-size: 26px; line-height: 1; color: #fff;
}
.sf-mc-date {
  display: block; margin-top: 3px; font-size: 11px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.6);
}
.sf-mc-tabs { display: flex; border-bottom: 1px solid #ececec; }
.sf-mc-tab {
  flex: 1; appearance: none; cursor: pointer; background: none; border: none;
  border-bottom: 2px solid transparent;
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 700; font-size: 13px; color: #6b7280; padding: 10px 8px;
  transition: color .15s ease, border-color .15s ease;
}
.sf-mc-tab:hover { color: #16181c; }
.sf-mc-tab.is-active { color: #e68a00; border-bottom-color: #ff9900; }
.sf-mc-panel { display: none; }
.sf-mc-panel.is-active { display: block; }
/* hauteur plafonnée : la carte ne doit pas écraser l'article */
.sf-mc-comm {
  list-style: none; margin: 0; padding: 6px 0;
  max-height: 340px; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.sf-mc-comm__item {
  display: flex; gap: 10px; padding: 7px 16px;
  border-bottom: 1px solid #f4f5f2; font-size: 13.5px; line-height: 1.45; color: #1a1a1a;
}
.sf-mc-comm__item:last-child { border-bottom: none; }
.sf-mc-comm__item.is-important { background: #fff7e6; }
.sf-mc-comm__min {
  flex: 0 0 34px;
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 800; font-size: 12px; color: #ff9900; text-align: right;
}
.sf-mc-comm__txt { min-width: 0; }
.sf-mc-lineups {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  padding: 12px 16px; max-height: 340px; overflow-y: auto;
}
.sf-mc-lineup__head {
  display: flex; align-items: center; gap: 6px; margin-bottom: 7px;
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-size: 12.5px; color: #16181c;
}
.sf-mc-lineup__head img { border-radius: 50%; }
.sf-mc-lineup__head em { font-style: normal; color: #9aa0a6; font-weight: 600; font-size: 11px; }
.sf-mc-xi { list-style: none; margin: 0; padding: 0; }
.sf-mc-xi li {
  display: flex; gap: 7px; align-items: baseline;
  font-size: 12.5px; color: #1a1a1a; padding: 2.5px 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sf-mc-xi li i {
  font-style: normal; flex: 0 0 18px; text-align: right;
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 700; font-size: 11px; color: #9aa0a6;
}
.sf-mc-nodata { font-size: 12.5px; color: #9aa0a6; margin: 4px 0; }
.sf-mc-stats { list-style: none; margin: 0; padding: 12px 16px; max-height: 340px; overflow-y: auto; }
.sf-mc-stat { padding: 6px 0; }
.sf-mc-stat__nums {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 12px; color: #6b7280; margin-bottom: 4px;
}
.sf-mc-stat__nums b {
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 800; font-size: 13.5px; color: #16181c; font-variant-numeric: tabular-nums;
}
.sf-mc-stat__bar {
  display: flex; gap: 3px; height: 5px; border-radius: 3px; overflow: hidden; background: #f2f3ef;
}
.sf-mc-stat__bar i { display: block; height: 100%; background: #ff9900; border-radius: 3px; }
.sf-mc-stat__bar i.is-away { background: #16181c; margin-left: auto; }
.sf-mc-foot {
  display: block; text-align: center; padding: 11px 16px;
  border-top: 1px solid #ececec; text-decoration: none;
  font-family: 'Public Sans', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 700; font-size: 13px; color: #ff9900;
  transition: color .15s ease, background .15s ease;
}
.sf-mc-foot:hover { color: #e68a00; background: #fafafa; }

/* ============================================================
   ONGLET ACTUALITÉS — cartes des articles liés au match (sf-mn-)
   Avant-match + résumé d'après-match, IDs fournis par le pipeline.
   ============================================================ */
.sf-mn-grid { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 4px 0 8px; }
@media (min-width: 640px) { .sf-mn-grid { grid-template-columns: 1fr 1fr; } }
.sf-mn-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #eceef1;
  border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease; }
.sf-mn-card:hover { border-color: #ffd592; box-shadow: 0 6px 18px rgba(20,24,28,.08); }
.sf-mn-card:active { transform: translateY(1px); }
.sf-mn-card:focus-visible { outline: 2px solid #ff9900; outline-offset: 2px; }
.sf-mn-thumb { aspect-ratio: 16/9; overflow: hidden; background: #f4f5f2; }
.sf-mn-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-mn-body { padding: 14px 16px 15px; display: flex; flex-direction: column; gap: 8px; }
.sf-mn-badge { align-self: flex-start; font: 700 10.5px/1 'Public Sans','Source Sans 3',system-ui,sans-serif;
  letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
.sf-mn-badge--preview { background: rgba(37,99,235,.10); color: #2563eb; }
.sf-mn-badge--result { background: rgba(22,163,74,.10); color: #16a34a; }
.sf-mn-title { margin: 0; font: 700 16.5px/1.3 'Public Sans','Source Sans 3',system-ui,sans-serif; color: #16181c; }
.sf-mn-excerpt { margin: 0; font: 400 14px/1.45 'Source Sans 3',system-ui,sans-serif; color: #6b7280; }
.sf-mn-meta { display: flex; align-items: center; gap: 7px; margin-top: 2px;
  font: 600 12.5px 'Source Sans 3',system-ui,sans-serif; color: #9aa0a6; }
.sf-mn-meta svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; flex: 0 0 auto; }
.sf-mn-more { margin-left: auto; color: #ff9900; font-weight: 700; white-space: nowrap; }
.sf-mn-card:hover .sf-mn-more { color: #e68a00; }
.sf-mn-empty { text-align: center; padding: 28px 16px; color: #6b7280; font: 400 14.5px 'Source Sans 3',system-ui,sans-serif; }
/**
 * Senego Football - Responsive Styles
 */

/* ============================================
   Large Tablets (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {
    .sf-grid-2 {
        grid-template-columns: 1fr;
    }

    .sf-lineups-grid {
        grid-template-columns: 1fr;
    }

    .sf-competition-title {
        font-size: var(--sf-font-size-2xl);
    }

    .sf-score-big {
        font-size: var(--sf-font-size-2xl);
    }

    .sf-team-logo-hero {
        width: 80px;
        height: 80px;
    }

    .sf-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sf-players-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

/* ============================================
   Tablets (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
    :root {
        --sf-spacing-lg: 20px;
        --sf-spacing-xl: 24px;
    }

    .sf-container {
        padding: 0 var(--sf-spacing-sm);
    }

    /* Competition Header */
    .sf-competition-header {
        padding: var(--sf-spacing-lg) 0;
    }

    .sf-competition-title {
        font-size: var(--sf-font-size-xl);
    }

    .sf-competition-subtitle {
        font-size: var(--sf-font-size-base);
    }

    .sf-competition-nav {
        gap: var(--sf-spacing-xs);
    }

    .sf-nav-item {
        padding: var(--sf-spacing-xs) var(--sf-spacing-sm);
        font-size: var(--sf-font-size-xs);
    }

    /* Match Hero */
    .sf-match-hero {
        flex-direction: column;
        gap: var(--sf-spacing-lg);
    }

    .sf-match-team {
        width: 100%;
    }

    .sf-match-team .sf-team-link {
        flex-direction: row;
        justify-content: center;
    }

    .sf-team-logo-hero {
        width: 60px;
        height: 60px;
    }

    .sf-team-name-hero {
        font-size: var(--sf-font-size-base);
    }

    .sf-score-big {
        font-size: var(--sf-font-size-xl);
    }

    .sf-match-meta {
        flex-wrap: wrap;
        gap: var(--sf-spacing-sm);
        font-size: var(--sf-font-size-xs);
    }

    /* Tabs */
    .sf-match-tabs,
    .sf-team-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: var(--sf-spacing-md) calc(-1 * var(--sf-spacing-sm));
        padding: 0 var(--sf-spacing-sm) var(--sf-spacing-md);
    }

    .sf-tab {
        padding: var(--sf-spacing-xs) var(--sf-spacing-md);
        font-size: var(--sf-font-size-xs);
    }

    /* Fixtures */
    .sf-fixture-content {
        flex-wrap: wrap;
    }

    .sf-fixture-team {
        flex: 0 0 calc(50% - 40px);
    }

    .sf-fixture-team .sf-team-name {
        font-size: var(--sf-font-size-sm);
    }

    /* DÉSACTIVÉ - interfère avec le nouveau design mobile
    .sf-fixture-center {
        order: -1;
        width: 100%;
        margin-bottom: var(--sf-spacing-sm);
    }
    */

    /* Standings Table */
    .sf-standings-table {
        font-size: var(--sf-font-size-xs);
    }

    .sf-standings-table th,
    .sf-standings-table td {
        padding: var(--sf-spacing-xs) var(--sf-spacing-sm);
    }

    .sf-col-gf,
    .sf-col-ga,
    .sf-col-form {
        display: none;
    }

    /* Live Scores */
    .sf-live-teams {
        flex-wrap: wrap;
    }

    .sf-live-team {
        flex: 0 0 calc(50% - 30px);
    }

    .sf-live-score {
        width: 100%;
        justify-content: center;
        margin-top: var(--sf-spacing-sm);
    }

    /* Topscorers */
    .sf-scorer-item {
        flex-wrap: wrap;
    }

    .sf-scorer-rank {
        order: 1;
    }

    .sf-scorer-player {
        order: 2;
        flex: 0 0 calc(100% - 100px);
    }

    .sf-scorer-stats {
        order: 3;
    }

    /* Team Page */
    .sf-team-hero {
        flex-direction: column;
        text-align: center;
    }

    .sf-team-name-xl {
        font-size: var(--sf-font-size-xl);
    }

    .sf-players-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sf-spacing-sm);
    }

    .sf-player-card {
        padding: var(--sf-spacing-sm);
    }

    .sf-player-photo-lg {
        width: 60px;
        height: 60px;
    }

    .sf-player-name-card {
        font-size: var(--sf-font-size-xs);
    }

    /* Player Page */
    .sf-player-hero {
        flex-direction: column;
        text-align: center;
    }

    .sf-player-img-hero {
        width: 100px;
        height: 100px;
    }

    .sf-player-name-hero {
        font-size: var(--sf-font-size-xl);
    }

    .sf-player-meta {
        justify-content: center;
        gap: var(--sf-spacing-md);
    }

    .sf-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sf-spacing-sm);
    }

    .sf-stat-value-lg {
        font-size: var(--sf-font-size-2xl);
    }

    /* H2H */
    .sf-h2h-summary {
        flex-wrap: wrap;
        gap: var(--sf-spacing-md);
    }

    .sf-h2h-team {
        flex: 0 0 calc(50% - var(--sf-spacing-md));
    }

    .sf-h2h-center {
        width: 100%;
        order: -1;
    }

    .sf-h2h-wins {
        font-size: var(--sf-font-size-2xl);
    }

    .sf-h2h-match {
        flex-wrap: wrap;
        gap: var(--sf-spacing-xs);
    }

    .sf-h2h-match-date {
        width: 100%;
    }

    /* Predictions */
    .sf-prediction-item {
        flex-wrap: wrap;
    }

    .sf-prediction-label {
        width: 100%;
        margin-bottom: var(--sf-spacing-xs);
    }

    .sf-prediction-bar {
        flex: 1;
    }

    .sf-predictions-extra {
        flex-direction: column;
    }

    .sf-prediction-card {
        min-width: 100%;
    }

    /* Stats - Layout horizontal maintenu */
    .sf-stat-row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
    }

    .sf-stat-value {
        width: 40px;
        min-width: 40px;
        font-size: 13px;
        font-weight: 700;
    }

    .sf-stat-center {
        flex: 1;
        order: 0;
    }

    .sf-stat-label {
        font-size: 11px;
        margin-bottom: 3px;
    }

    .sf-stat-bar {
        height: 6px;
    }

    /* Events Timeline */
    .sf-timeline {
        padding-left: 60px;
    }

    .sf-timeline::before {
        left: 40px;
    }

    .sf-event-minute {
        left: -60px;
        width: 35px;
        font-size: var(--sf-font-size-xs);
    }
}

/* ============================================
   Mobile (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
    :root {
        --sf-font-size-base: 14px;
        --sf-font-size-sm: 12px;
        --sf-font-size-xs: 10px;
    }

    .sf-competition-title {
        font-size: var(--sf-font-size-lg);
        gap: var(--sf-spacing-sm);
    }

    .sf-competition-icon {
        font-size: var(--sf-font-size-xl);
    }

    .sf-competition-subtitle {
        font-size: var(--sf-font-size-sm);
    }

    /* Match Header */
    .sf-team-logo-hero {
        width: 48px;
        height: 48px;
    }

    .sf-score-big {
        font-size: var(--sf-font-size-lg);
    }

    /* Fixtures */
    .sf-fixture-item {
        padding: var(--sf-spacing-sm);
    }

    .sf-fixture-team {
        flex: 0 0 calc(50% - 30px);
    }

    .sf-team-logo {
        width: 32px;
        height: 32px;
    }

    /* Match Card */
    .sf-match-card-body {
        padding: var(--sf-spacing-md);
        flex-wrap: wrap;
    }

    .sf-match-card-team {
        flex: 0 0 40%;
    }

    .sf-match-card-score {
        width: 100%;
        margin-top: var(--sf-spacing-sm);
    }

    .sf-team-logo-large {
        width: 48px;
        height: 48px;
    }

    /* Team Page */
    .sf-team-logo-xl {
        width: 64px;
        height: 64px;
    }

    .sf-players-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sf-player-photo-lg {
        width: 48px;
        height: 48px;
    }

    /* Player Page */
    .sf-player-img-hero {
        width: 80px;
        height: 80px;
    }

    .sf-stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .sf-stat-card {
        padding: var(--sf-spacing-sm);
    }

    .sf-stat-value-lg {
        font-size: var(--sf-font-size-xl);
    }

    /* Match Stats - Mobile compact */
    .sf-match-stats {
        padding: 10px;
    }

    .sf-stats-header {
        font-size: 12px;
        margin-bottom: 12px;
    }

    .sf-stats-team-name {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sf-stats-list {
        gap: 10px;
    }

    .sf-stat-row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
    }

    .sf-stat-value {
        width: 32px;
        min-width: 32px;
        font-size: 12px;
        font-weight: 700;
    }

    .sf-stat-center {
        flex: 1;
        order: 0;
    }

    .sf-stat-label {
        font-size: 10px;
        margin-bottom: 2px;
    }

    .sf-stat-bar {
        height: 5px;
    }

    /* Standings */
    .sf-standings-table th,
    .sf-standings-table td {
        padding: var(--sf-spacing-xs);
    }

    .sf-col-w,
    .sf-col-d,
    .sf-col-l,
    .sf-col-gd {
        display: none;
    }

    .sf-team-link .sf-team-name {
        max-width: 80px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Lineups */
    .sf-lineup-player {
        font-size: var(--sf-font-size-xs);
    }

    /* Topscorers */
    .sf-player-photo {
        width: 32px;
        height: 32px;
    }

    .sf-stat-main {
        font-size: var(--sf-font-size-lg);
    }

    /* Events */
    .sf-timeline {
        padding-left: 50px;
    }

    .sf-timeline::before {
        left: 30px;
    }

    .sf-event-minute {
        left: -50px;
        width: 28px;
    }

    .sf-event-content {
        flex-wrap: wrap;
        font-size: var(--sf-font-size-sm);
    }

    /* Live Scores */
    .sf-live-score {
        font-size: var(--sf-font-size-xl);
    }

    .sf-live-team .sf-team-name {
        font-size: var(--sf-font-size-xs);
    }
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
    .sf-competition-nav,
    .sf-match-tabs,
    .sf-team-tabs,
    .sf-back-link,
    .sf-section-link,
    .sf-team-card-action {
        display: none !important;
    }

    .sf-competition-header,
    .sf-match-header,
    .sf-team-header,
    .sf-player-header {
        background: none !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .sf-page-wrapper {
        padding: 0;
    }

    .sf-badge-live {
        animation: none;
    }
}

/* ============================================
   Dark Mode Support (if theme supports it)
   ============================================ */
@media (prefers-color-scheme: dark) {
    /*
    Uncomment to enable automatic dark mode:

    :root {
        --sf-bg-light: #1a1a2e;
        --sf-bg-card: #16213e;
        --sf-bg-hover: #0f3460;
        --sf-text-primary: #ffffff;
        --sf-text-secondary: #adb5bd;
        --sf-border: #374151;
        --sf-border-light: #1f2937;
    }
    */
}

/* ============================================
   Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .sf-badge-live {
        animation: none;
    }

    .sf-live-indicator {
        animation: none;
    }
}

/* ============================================
   High Contrast Mode
   ============================================ */
@media (prefers-contrast: high) {
    :root {
        --sf-border: #000000;
        --sf-text-secondary: #4a4a4a;
    }

    .sf-fixture-item,
    .sf-scorer-item,
    .sf-match-card,
    .sf-team-card,
    .sf-player-card {
        border-width: 2px;
    }
}
/* Dialog control */

.perfecty-push-dialog-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: none;
  z-index: 100000;
}

.perfecty-push-dialog-box {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-around;
  width: 550px;
  background: white;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0px 7px 30px 0px grey;
  margin: 0 auto;
  text-align: center;
}

@media only screen and (max-width: 370px) {
  .perfecty-push-dialog-box {
	width: 320px;
	flex-wrap: wrap;
  }
}

@media only screen and (min-width: 370px) and (max-width: 425px) {
  .perfecty-push-dialog-box {
	width: 350px;
	flex-wrap: wrap;
  }
}

.perfecty-push-dialog-box .perfecty-push-dialog-icon {
  width: 100px;
}

.perfecty-push-dialog-container .perfecty-push-dialog-form .perfecty-push-dialog-title {
  margin: 20px 0px;
}

.perfecty-push-dialog-container .perfecty-push-dialog-form button{
  margin: 5px 10px;
  font-size: 1em;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
  letter-spacing: 0.0222em;
  line-height: 1.25;
  opacity: 1;
  padding: 1em 1.2em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity 0.15s linear;
}

.perfecty-push-dialog-container .perfecty-push-dialog-form #perfecty-push-dialog-cancel {
  background-color: #ffffff;
  color: #f77924;
}

.perfecty-push-dialog-container .perfecty-push-dialog-form #perfecty-push-dialog-subscribe {
  background-color: #f77924;
  color: #ffffff;
}

/* Settings control */

.perfecty-push-settings-container {
  z-index: 100000;
  display: none;
}

.perfecty-push-settings-container #perfecty-push-settings-form {
display: none;
border: 1px solid rgb(221, 221, 221);
background-color: white;
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
}

.perfecty-push-settings-container #perfecty-push-settings-form label{
  display: inline;
}

.perfecty-push-settings-container {
  position: fixed;
  bottom: 10px;
  left: 10px;
}

.perfecty-push-settings-container #perfecty-push-settings-open {
  height: 56px;
  width: 56px;
  background-color: transparent;
  border: 0px;
  margin: 0px;
  padding: 0px;
  outline: 0px;
  box-sizing: border-box;
  box-shadow: none;
}

.perfecty-push-settings-container #perfecty-push-settings-open svg {
  color: #ffffff;
  padding: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #f77924;
  transition: padding .1s ease-in-out;
  cursor: pointer;
  fill: #fff;
  outline: none;
  box-sizing: border-box;
}

.perfecty-push-settings-container #perfecty-push-settings-open svg:hover,
.perfecty-push-settings-container #perfecty-push-settings-open svg:focus {
  padding: 12px;
}
/**
 * Senego Account — Modales (auth + abonnement) et menus utilisateur.
 *
 * Migré depuis themes/senego/assets/css/header.css le 23/05/2026.
 * Objectif : que le plugin reste autonome côté UI si on change de thème.
 *
 * Contenu :
 *  - Bouton de connexion topbar (.topbar-login)
 *  - Avatars utilisateur (.avatar, .avatar.premium, .av)
 *  - Boutons CTA abonnement header (.cta-sub, .compact-cta, .compact-login, .compact-premium, .premium-badge-main)
 *  - Menu déroulant compte (.account-wrap, .account-menu)
 *  - Boutons partagés (.oauth-btn, .submit-btn, .modal-close) réutilisés par le drawer mobile
 *  - Tabs partagés (.tabs) réutilisés par le plugin football (team-single, match-single)
 *  - Visibilité par état utilisateur (.when-anon, .when-loggedin, .when-premium)
 *
 * Les variables CSS (--orange, --ease, --shadow-md, …) restent définies dans header.css du thème.
 */

  /* ============ Bouton login topbar ============ */
  .topbar-login {
    color: #fff;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
    transition: background .15s var(--ease);
  }
  .topbar-login:hover { background: rgba(255,255,255,.1); }

  /* ============ Avatars utilisateur ============ */
  .avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--senego-color-primary), var(--senego-color-accent));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0;
    border: 1.5px solid rgba(255,255,255,.15);
    cursor: pointer;
    transition: transform .15s var(--ease);
  }
  .avatar:hover { transform: scale(1.05); }
  .avatar.premium {
    background: linear-gradient(135deg, #ffd27a, var(--senego-color-premium));
    border-color: rgba(255,255,255,.3);
  }

  /* ============ CTA abonnement (mainbar) ============ */
  .cta-sub {
    height: 44px;
    padding: 0 18px;
    border-radius: 8px;
    background: var(--orange);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .005em;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 6px 16px rgba(255,153,0,.28);
    transition: all .18s var(--ease);
    white-space: nowrap;
  }
  .cta-sub:hover {
    background: var(--orange-dark);
    transform: translateY(-1px);
    box-shadow: 0 2px 0 rgba(0,0,0,.05), 0 10px 22px rgba(255,153,0,.35);
  }
  .cta-sub:active { transform: translateY(0); }
  /* Libellé court masqué par défaut (affiché seulement sur très petits écrans). */
  .cta-sub .label-short { display: none; }
  .cta-sub .sparkle {
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
  }
  .cta-sub.accent {
    background: var(--red);
    box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 6px 16px rgba(230,57,0,.32);
  }
  .cta-sub.accent:hover { background: #c93300; }

  /* ============ Badge Premium (mainbar) ============ */
  .premium-badge-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px 0 4px;
    border-radius: 999px;
    background: var(--premium-bg);
    border: 1px solid rgba(201,138,23,.25);
    color: var(--gold);
    font-weight: 600;
    font-size: 13px;
  }
  .premium-badge-main .av {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd27a, var(--senego-color-premium));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* ============ CTA / login / premium dans la compactbar ============ */
  .compact-cta {
    height: 36px;
    padding: 0 14px;
    border-radius: 6px;
    background: var(--orange);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s var(--ease);
  }
  .compact-cta:hover { background: var(--orange-dark); }
  .compact-cta.accent { background: var(--red); }
  .compact-cta.accent:hover { background: #c93300; }
  .compact-login {
    height: 36px;
    padding: 0 12px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--ink);
    font-weight: 500;
    font-size: 13px;
    transition: all .15s var(--ease);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
  }
  .compact-login:hover { background: var(--bg-soft); }
  /* Compactbar + mainbar mobile (≤767px) : style Yahoo épuré.
     On retire les CTA "Sans pub" (accessibles depuis le drawer/page abonnement)
     et "Se connecter" devient un bouton rond avec juste l'icône personne,
     côté mainbar comme côté compactbar (cohérence). */
  @media (max-width: 767px) {
    /* CTA « Soutenir Senego » désormais VISIBLE sur mobile : c'est le point
       d'entrée du tunnel d'abonnement (70% du trafic). Pilule compacte pour
       laisser respirer le header (le logo est réduit en parallèle). */
    .compactbar .compact-cta,
    .mainbar .cta-sub {
      display: inline-flex;
      height: 32px;
      padding: 0 14px;
      font-size: 12.5px;
      border-radius: var(--senego-radius-pill, 50px);
      white-space: nowrap;
    }
    /* Espace mobile : pas d'icône dans le CTA, mais libellé COMPLET
       « Soutenir Senego » (le logo est très réduit à 18px et l'icône
       utilisateur est retirée → le header respire). */
    .mainbar .cta-sub .sparkle,
    .compactbar .compact-cta svg { display: none; }
    .mainbar .cta-sub .label-full { display: inline; }
    .mainbar .cta-sub .label-short { display: none; }
    /* Icône « Se connecter » retirée sur mobile : la connexion se fait via le
       menu hamburger (bouton « Se connecter » en haut du drawer). */
    .compactbar .compact-login,
    .mainbar .topbar-login { display: none !important; }
  }
  .compact-premium {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 10px 0 3px;
    border-radius: 999px;
    background: var(--premium-bg);
    border: 1px solid rgba(201,138,23,.25);
    color: var(--gold);
    font-size: 12px; font-weight: 600;
  }
  .compact-premium .av {
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg, #ffd27a, var(--senego-color-premium)); color: #fff;
    font-size: 10px; font-weight: 700;
    display:inline-flex; align-items:center; justify-content:center;
  }

  /* ============ Account dropdown ============ */
  .account-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--soft-radius);
    box-shadow: var(--shadow-md);
    min-width: 240px;
    padding: 6px;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .18s var(--ease), transform .18s var(--ease);
    z-index: 110;
  }
  .account-menu.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .account-menu .header {
    padding: 12px 12px 10px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 6px;
  }
  .account-menu .name { font-weight: 600; font-size: 14px; }
  .account-menu .email { font-size: 12px; color: var(--meta); margin-top: 2px; }
  .account-menu a, .account-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border-radius: 6px;
    font-size: 13.5px;
    color: var(--ink);
    background: none;
    border: none;
    text-align: left;
    transition: background .12s var(--ease);
  }
  .account-menu a:hover, .account-menu button:hover { background: var(--bg-soft); }
  .account-menu .divider { height: 1px; background: var(--line); margin: 6px 0; }
  .account-menu .logout { color: var(--red); }

  .account-wrap { position: relative; }

  .modal-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--bg-soft);
    color: var(--meta);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .15s var(--ease);
  }
  .modal-close:hover { background: var(--line); color: var(--ink); }
  .tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--bg-soft);
    border-radius: 8px;
    padding: 4px;
    margin-bottom: 18px;
    position: relative;
  }
  .tabs button {
    background: transparent;
    border: none;
    height: 36px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--meta);
    transition: all .2s var(--ease);
    position: relative;
    z-index: 1;
  }
  .tabs button.active { color: var(--ink); background: #fff; box-shadow: var(--shadow-sm); font-weight: 600; }

  .oauth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 46px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
    border: 1px solid var(--line-strong);
    background: #fff;
    color: var(--ink);
    transition: all .15s var(--ease);
  }
  .oauth-btn:hover { background: var(--bg-soft); border-color: #c8c8c8; }
  .oauth-btn.apple { background: #000; color: #fff; border-color: #000; }
  .oauth-btn.apple:hover { background: var(--senego-color-text); }
  .oauth-btn svg { flex-shrink: 0; }

  .submit-btn {
    width: 100%;
    height: 46px;
    border-radius: 8px;
    background: var(--orange);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    border: none;
    transition: background .15s var(--ease);
    margin-top: 4px;
  }
  .submit-btn:hover { background: var(--orange-dark); }
  /* ============ Visibilité par état utilisateur ============ */
  body[data-user="anon"] .when-loggedin,
  body[data-user="anon"] .when-premium { display: none !important; }
  body[data-user="loggedin"] .when-anon,
  body[data-user="loggedin"] .when-premium { display: none !important; }
  body[data-user="premium"] .when-anon,
  body[data-user="premium"] .when-loggedin { display: none !important; }

  /* ============ Barre d'action en HAUT du drawer (design system) ============ */
  .drawer-cta {
    padding: 14px 16px;
    border-bottom: 1px solid var(--senego-color-border-line, #ececec);
  }
  .drawer-cta .drawer-actions { display: flex; gap: 10px; align-items: stretch; }
  .drawer-cta .drawer-actions__login { flex: 0 0 auto; }
  .drawer-cta .drawer-actions__cta   { flex: 1 1 auto; }
  .drawer-cta .drawer-actions__cta--full { width: 100%; }
  /* Boutons confortables au toucher, alignés sur le design system. */
  .drawer-cta .senego-btn {
    height: 46px;
    font-size: 14px;
    border-radius: var(--senego-radius-sm, 8px);
    justify-content: center;
  }
  /* Carte « compte premium » dans le drawer. */
  .drawer-cta .drawer-actions.when-premium { display: block; }
  .drawer-cta .drawer-premium-card {
    display: flex; align-items: center; gap: 12px;
    text-decoration: none; color: inherit; padding: 2px 0 12px;
  }
  .drawer-cta .drawer-premium-card .avatar.premium { width: 40px; height: 40px; font-size: 14px; }
  .drawer-cta .drawer-premium-card__title { display: block; font-weight: 600; font-size: 14px; }
  .drawer-cta .drawer-premium-card__sub { font-size: 12px; font-weight: 600; color: var(--senego-color-premium, #c98a17); }
  .drawer-cta .when-premium .senego-btn { width: 100%; }

  /* ============ Responsive ============ */
  @media (max-width: 980px) {
    .cta-sub { padding: 0 12px; font-size: 12.5px; height: 38px; }
  }
/* ============================================================================
   SENEGO ADS — Feuille de style UNIQUE de toutes les publicités.
   (Fichier inclus dans le plugin senego-ads, chargé en BLOQUANT pour l'anti-CLS.)

   Principe d'harmonie avec le thème :
     - chaque emplacement pub est une CARTE : fond blanc, radius 8, ombre douce ;
     - .senego-ad EST la carte ; les wrappers sidebar ne font que positionner ;
     - espacement par marge basse uniforme (--card-gap), jamais haut+bas (anti-cumul) ;
     - en liste d'articles, c'est le gap de .posts-container qui gère l'espace.

   Variables reprises du thème (avec repli si absentes) :
     --soft-surface #fff | --soft-radius 8px | --card-gap 16px
     --soft-shadow 0 1px 2px rgba(16,24,40,.06), 0 6px 16px rgba(16,24,40,.06)
   ============================================================================ */

/* ── Carte publicitaire (base) ── */
.senego-ad,
.senego-banner {
  position: relative;
  display: block;
  overflow: hidden;
  text-align: center;
  clear: both;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto var(--card-gap, 16px);   /* marge basse uniforme — anti-cumul */
  padding: 34px 10px 14px;                /* haut = place pour le label PUBLICITÉ */
  background: var(--soft-surface, #fff);
  border: 0;
  border-radius: var(--soft-radius, 8px);
  box-shadow: var(--soft-shadow, 0 1px 2px rgba(16,24,40,.06), 0 6px 16px rgba(16,24,40,.06));
  min-height: 50px;
}

/* Label « PUBLICITÉ » — pilule au-dessus de la pub */
.senego-ad::before,
.senego-banner::before {
  content: 'PUBLICITÉ';
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #999;
  white-space: nowrap;
  z-index: 2;
}

/* Unité AdSense / contenu centré */
.senego-ad ins { display: block; margin: 0 auto; }
.senego-banner img { max-width: 100%; height: auto; display: inline-block; }
.senego-banner a { display: inline-block; line-height: 0; }

/* ── Anti-CLS : hauteur réservée avant chargement de la pub ──
   (déplacé de l'ancien <style> anti-FOUC ; ce fichier est bloquant, donc
   appliqué avant le premier rendu → aucun saut de mise en page.) */
/* top_banner — décision produit 2026-05-30 :
   • MOBILE (≤767px) : verrouillé à 300×250 strict (anti-CLS + format uniforme).
     AdSense (Auto Ads actif sur le compte) injecte `max-height: none !important`
     en inline sur le wrapper ET sur l'<ins> pour étendre la pub — ces inline
     !important battent toute règle CSS. Solution : on ajoute (côté PHP) un div
     intermédiaire `.senego-ad-frame` qu'AdSense N'ATTAQUE PAS → c'est ce div
     qui porte la contrainte 300×250 + overflow:hidden, intouchable par Google.
   • DESKTOP (>767px) : aucune contrainte → la pub reste responsive (format
     leaderboard / large rectangle servi par AdSense). */
/* top_banner — décision produit 2026-05-30 :
   • MOBILE (≤767px) : 300×250 STRICT (slot AdSense "Fixed 300×250").
     Le wrapper-carte fait 320×298 (300 contenu ad + 10+10 padding lat. +
     34+14 padding vert. pour le label PUBLICITÉ) avec box-sizing:border-box
     hérité de la base .senego-ad. Marge 16px haut/bas pour ne pas coller
     au menu ni à l'article vedette. overflow:hidden contre l'extension Google.
   • DESKTOP (>767px) : responsive standard (slot AdSense "Responsive").
     Aucune contrainte → AdSense sert un leaderboard adapté à la largeur. */
.senego-ad--top_banner { min-height: 250px; }
@media (max-width: 767px) {
  .senego-ad--top_banner {
    width: 320px !important;
    height: 298px !important;
    max-width: 320px !important;
    max-height: 298px !important;
    margin: 16px auto !important;
    overflow: hidden !important;
  }
  .senego-ad--top_banner ins.adsbygoogle {
    width: 300px !important;
    height: 250px !important;
    max-width: 300px !important;
    max-height: 250px !important;
  }
}
.senego-ad--above_featured { min-height: 250px; }
@media (min-width: 768px) {
  .senego-ad--above_featured { min-height: 100px; }
}
.senego-ad--sidebar_top,
.senego-ad--in_feed { min-height: 250px; }
.senego-ad--article_paragraph,
.senego-ad--placement { min-height: 280px; }

/* ── Pub in-feed : le gap de .posts-container gère l'espace → aucune marge propre (anti-cumul) ── */
.posts-container > .senego-ad { margin: 0; }

/* ── Variantes sidebar collantes (carte autonome, sans wrapper) ── */
.senego-ad--sidebar_sticky_left,
.senego-ad--sidebar_sticky_right { position: sticky; top: 90px; }

/* ── Wrappers sidebar = simples conteneurs de positionnement (transparents).
   La carte visible reste le .senego-ad interne → pas de carte dans une carte. ── */
.sidebar-top-ad-wrapper {
  width: 100%;
  text-align: center;
  margin: 0;
}
.sidebar-sticky-ad-wrapper {
  position: sticky;
  top: 80px;
  text-align: center;
  z-index: 10;
}
/* La pub interne au wrapper sticky ne doit pas être collante elle aussi. */
.sidebar-sticky-ad-wrapper .senego-ad { position: static; }

/* ── Bannière image personnalisée (insertion manuelle) ── */
.custom-banner-container {
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: center;
  margin: 0 auto var(--card-gap, 16px);
  line-height: 0;
}
.custom-banner-container a { display: inline-block; transition: opacity 0.3s ease; }
.custom-banner-container a:hover { opacity: 0.9; }
.custom-banner-container img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  border-radius: var(--soft-radius, 8px);
  box-shadow: var(--soft-shadow, 0 1px 2px rgba(16,24,40,.06), 0 6px 16px rgba(16,24,40,.06));
}

/* ── Responsive (≤767px) ── */
@media (max-width: 767px) {
  .senego-ad,
  .senego-banner { padding-top: 30px; }
}

/* ── Impression / accessibilité ── */
@media print {
  .senego-ad,
  .senego-banner,
  .custom-banner-container { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .custom-banner-container a { transition: none; }
}
/*
 * SENEGO DESIGN SYSTEM — TOKENS (source unique de vérité)
 * =======================================================
 * Toutes les valeurs de design du thème (couleurs, typo, espacements, rayons,
 * ombres) sont définies ICI, et NULLE PART AILLEURS. Changer une valeur ici la
 * propage à tout le site, les plugins et l'éditeur de blocs.
 *
 * RÈGLE : pour tout NOUVEAU développement (plugin, bloc, carte, formulaire…),
 * utiliser exclusivement les variables `--senego-*` ci-dessous.
 *
 * Le bloc « ALIAS » en bas re-mappe les anciens noms de variables (issus de
 * core.css, header.css, account.css) vers ces tokens, AUX VALEURS IDENTIQUES,
 * pour que tout le CSS existant continue de fonctionner sans le moindre
 * changement visuel pendant la migration progressive.
 *
 * Ce fichier doit être chargé EN PREMIER (avant core.css, header.css, plugins).
 */

:root {

  /* ════════════════════════ COULEURS ════════════════════════ */
  /* Marque */
  --senego-color-primary:        #ff9900;   /* orange Senego */
  --senego-color-primary-dark:   #e68a00;   /* hover/actif */
  --senego-color-accent:         #e63900;   /* rouge d'accent (alertes éditoriales, liens forts) */

  /* Texte */
  --senego-color-text:           #1a1a1a;   /* texte principal des composants */
  --senego-color-heading:        #16181c;   /* titres */
  --senego-color-muted:          #6b7280;   /* texte secondaire */
  --senego-color-meta:           #666666;   /* méta : date, catégorie, auteur */

  /* Surfaces & fonds */
  --senego-color-bg:             #f2f3ef;   /* fond de page */
  --senego-color-surface:        #ffffff;   /* cartes, encarts, surfaces */
  --senego-color-surface-subtle: #fafafa;   /* fond doux (zones secondaires) */

  /* Bordures */
  --senego-color-border:         #e0e0e0;   /* bordure standard */
  --senego-color-border-line:    #ececec;   /* séparateurs (header, compte) */
  --senego-color-border-soft:    #eceef1;   /* bordure discrète (cartes) */
  --senego-color-border-strong:  #d8d8d8;   /* bordure marquée */
  --senego-color-border-focus:   #aaaaaa;   /* bordure au focus clavier */
  --senego-color-surface-muted:  #f8f9fa;   /* fond neutre (lignes survolées) */

  /* Premium */
  --senego-color-premium-bg:     #fff7e6;   /* fond des blocs premium */
  --senego-color-premium:        #c98a17;   /* doré premium */

  /* États sémantiques (succès / erreur / avertissement / info) */
  --senego-color-success:        #16a34a;   --senego-color-success-bg: #ecfdf3;
  --senego-color-error:          #dc2626;   --senego-color-error-bg:   #fef2f2;
  --senego-color-warning:        #f59e0b;   --senego-color-warning-bg: #fffbeb;
  --senego-color-info:           #2563eb;   --senego-color-info-bg:    #eff6ff;

  /* Barre supérieure (topbar noire) */
  --senego-color-topbar-bg:      #000000;
  --senego-color-topbar-text:    #ffffff;

  /* ════════════════════════ TYPOGRAPHIE ════════════════════════ */
  --senego-font-base:    'Source Sans 3', system-ui, -apple-system, sans-serif;
  /* Titres : Public Sans (self-hosted), repli sur Source Sans 3 — choix 2026-05-31. */
  --senego-font-heading: 'Public Sans', 'Source Sans 3', system-ui, -apple-system, sans-serif;

  /* Échelle de tailles de texte */
  --senego-text-xs:   0.75rem;   /* 12px */
  --senego-text-sm:   0.875rem;  /* 14px */
  --senego-text-base: 1rem;      /* 16px — corps */
  --senego-text-md:   1.125rem;  /* 18px */
  --senego-text-lg:   1.25rem;   /* 20px */
  --senego-text-xl:   1.5rem;    /* 24px */
  --senego-text-2xl:  1.875rem;  /* 30px */

  /* Tailles des titres (alignées sur l'existant h1–h6) */
  --senego-h1: 2.5rem;
  --senego-h2: 2rem;
  --senego-h3: 1.75rem;
  --senego-h4: 1.5rem;
  --senego-h5: 1.25rem;
  --senego-h6: 1rem;

  /* Graisses & interlignes */
  --senego-weight-normal:   400;
  --senego-weight-medium:   500;
  --senego-weight-semibold: 600;
  --senego-weight-bold:     700;
  --senego-leading-tight: 1.3;   /* titres */
  --senego-leading-base:  1.7;   /* corps */

  /* ════════════════════════ ESPACEMENTS ════════════════════════ */
  --senego-space-xs:  4px;
  --senego-space-sm:  8px;
  --senego-space-md:  16px;
  --senego-space-lg:  24px;
  --senego-space-xl:  32px;
  --senego-space-2xl: 48px;
  --senego-card-gap:  16px;   /* écart vertical unique entre cartes/blocs */

  /* ════════════════════════ RAYONS ════════════════════════ */
  --senego-radius-xs:   6px;   /* badges, petites puces */
  --senego-radius-sm:   8px;   /* cartes, boutons, champs */
  --senego-radius-md:   10px;
  --senego-radius-lg:   12px;  /* grandes surfaces */
  --senego-radius-pill: 50px;  /* pilules, boutons arrondis */

  /* ════════════════════════ OMBRES ════════════════════════ */
  --senego-shadow-sm: 0 1px 2px rgba(16,24,40,.06);
  --senego-shadow-md: 0 1px 2px rgba(16,24,40,.06), 0 6px 16px rgba(16,24,40,.06);
  --senego-shadow-lg: 0 10px 28px rgba(16,24,40,.14);

  /* ════════════════════════ HAUTEURS DE GABARIT (header) ════════════════════════ */
  --senego-topbar-h:  34px;
  --senego-mainbar-h: 84px;
  --senego-navbar-h:  44px;
  --senego-compact-h: 56px;

  /* ════════════════════════ MOUVEMENT ════════════════════════ */
  --senego-ease:       cubic-bezier(.2,.7,.2,1);
  --senego-transition: 120ms;

  /* Cibles tactiles accessibles (≥ 44px recommandé) */
  --senego-tap-target: 44px;

  /* ════════════════════════ SPÉCIFIQUES MOBILE ════════════════════════ */
  /* Valeurs utilisées par les media queries mobile (cartes, espacements). */
  --senego-mobile-radius:  12px;
  --senego-mobile-gap:     12px;
  --senego-mobile-padding: 16px;
  /* Gouttière horizontale du contenu en mobile (le contenu ne touche jamais les
     bords de l'écran → les arrondis des cartes restent visibles). */
  --senego-mobile-gutter:  12px;
  --senego-shadow-card:        0 1px 3px rgba(0,0,0,.08);
  --senego-shadow-card-hover:  0 4px 12px rgba(0,0,0,.12);


  /* ╔══════════════════════════════════════════════════════════════════════╗
     ║  ALIAS RÉTRO-COMPATIBLES — NE PAS UTILISER POUR DU NOUVEAU CODE        ║
     ║  Anciens noms (core/header/account) → tokens, valeurs IDENTIQUES.      ║
     ║  Permet de supprimer les :root dupliqués sans rien casser.            ║
     ╚══════════════════════════════════════════════════════════════════════╝ */

  /* — core.css — */
  --color-text:          #000000;                       /* texte body historique (inchangé) */
  --color-meta:          var(--senego-color-meta);
  --color-background:    var(--senego-color-bg);
  --color-primary:       var(--senego-color-primary);
  --color-secondary:     var(--senego-color-primary-dark);
  --color-border:        var(--senego-color-border);
  --color-border-focus:  var(--senego-color-border-focus);
  --color-bg-alt:        var(--senego-color-surface);
  --color-bg-subtle:     var(--senego-color-surface-subtle);
  --color-top-bar-bg:    var(--senego-color-topbar-bg);
  --color-top-bar-text:  var(--senego-color-topbar-text);
  --color-main-nav-bg:   var(--senego-color-primary);
  --font-primary:        var(--senego-font-base);
  --font-headings:       var(--senego-font-heading);
  --spacing-unit:        1rem;
  --soft-accent:         var(--senego-color-accent);
  --soft-ink:            var(--senego-color-heading);
  --soft-muted:          var(--senego-color-muted);
  --soft-radius:         var(--senego-radius-sm);
  --soft-radius-sm:      var(--senego-radius-sm);
  --soft-shadow:         var(--senego-shadow-md);
  --soft-shadow-hover:   var(--senego-shadow-lg);
  --soft-surface:        var(--senego-color-surface);
  --soft-line:           var(--senego-color-border-soft);
  --card-gap:            var(--senego-card-gap);
  --mobile-radius:       var(--senego-mobile-radius);
  --mobile-gap:          var(--senego-mobile-gap);
  --mobile-padding:      var(--senego-mobile-padding);
  --card-shadow:         var(--senego-shadow-card);
  --card-shadow-hover:   var(--senego-shadow-card-hover);
  --mobile-font-body:    var(--senego-font-base);
  --mobile-font-heading: var(--senego-font-heading);

  /* — header.css — */
  --orange:        var(--senego-color-primary);
  --orange-dark:   var(--senego-color-primary-dark);
  --red:           var(--senego-color-accent);
  --ink:           var(--senego-color-text);
  --meta:          var(--senego-color-meta);
  --line:          var(--senego-color-border-line);
  --line-strong:   var(--senego-color-border-strong);
  --bg:            #ffffff;
  --bg-soft:       var(--senego-color-surface-subtle);
  --black:         #000000;
  --gold:          var(--senego-color-premium);
  --premium-bg:    var(--senego-color-premium-bg);
  --shadow-sm:     0 1px 0 rgba(0,0,0,.04);
  --shadow-md:     0 8px 24px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --shadow-lg:     0 24px 60px rgba(0,0,0,.18), 0 6px 18px rgba(0,0,0,.08);
  --ease:          var(--senego-ease);
  --topbar-h:      var(--senego-topbar-h);
  --mainbar-h:     var(--senego-mainbar-h);
  --navbar-h:      var(--senego-navbar-h);
  --compact-h:     var(--senego-compact-h);

  /* — account.css (plugin) — */
  --primary:       var(--senego-color-primary);
  --primary-dark:  var(--senego-color-primary-dark);
  --accent-red:    var(--senego-color-accent);
  --gold-soft:     var(--senego-color-premium-bg);
  --gold-line:     #ead8ab;
  --ink-2:         #2d2d2d;
  --meta-2:        #8a8a8a;
  --line-2:        #f0f0f0;
  --bg-2:          var(--senego-color-surface-subtle);
  --bg-3:          var(--senego-color-surface-muted);
  --r-sm:          var(--senego-radius-sm);
  --r-md:          var(--senego-radius-md);
  --r-lg:          var(--senego-radius-lg);
  --shadow-1:      0 1px 2px rgba(20,20,20,.04);
  --shadow-2:      0 2px 8px rgba(20,20,20,.05);
  --shadow-3:      0 10px 30px rgba(20,20,20,.08);
  /* Espace compte unifié sur les polices du site — décision 2026-05-31.
     --ui = corps (Source Sans 3) ; --serif = display/titres (Public Sans). */
  --ui:            var(--senego-font-base);
  --serif:         var(--senego-font-heading);
}
/*
 * SENEGO DESIGN SYSTEM — COMPOSANTS RÉUTILISABLES
 * ===============================================
 * Classes prêtes à l'emploi pour tout nouveau développement (thème ou plugin).
 * Toutes construites sur les tokens `--senego-*` (cf. tokens.css). AUCUN
 * `!important` : on s'appuie sur une spécificité simple et cohérente.
 *
 * Préfixe `.senego-` obligatoire pour ne jamais entrer en collision avec
 * l'existant. Charger APRÈS tokens.css.
 */

/* ════════════════════════ BOUTONS ════════════════════════ */
/* Le sélecteur .senego-account .btn (espace compte) est rattaché au composant
   bouton du DS : tous les boutons du compte héritent du même style. */
.senego-btn,
.senego-account .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--senego-space-sm);
  min-height: var(--senego-tap-target);          /* cible tactile accessible */
  padding: 10px 18px;
  border: 1px solid var(--senego-color-border);
  border-radius: var(--senego-radius-sm);
  background: var(--senego-color-surface);
  color: var(--senego-color-text);
  font-family: var(--senego-font-base);
  font-size: var(--senego-text-sm);
  font-weight: var(--senego-weight-semibold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--senego-transition), border-color var(--senego-transition),
              color var(--senego-transition), transform var(--senego-transition);
}
.senego-btn:hover, .senego-account .btn:hover  { background: var(--senego-color-surface-subtle); border-color: #d6d6d6; }
.senego-btn:active, .senego-account .btn:active { transform: translateY(1px); }
.senego-btn:disabled,
.senego-btn[aria-disabled="true"],
.senego-btn.is-disabled {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}
.senego-btn .senego-btn__icon { width: 18px; height: 18px; flex: 0 0 auto; }

/* Variantes (les classes .btn-* de l'espace compte sont rattachées aux variantes DS) */
.senego-btn--primary,
.senego-account .btn-primary {
  background: var(--senego-color-primary);
  border-color: var(--senego-color-primary);
  color: #fff;
}
.senego-btn--primary:hover,
.senego-account .btn-primary:hover {
  background: var(--senego-color-primary-dark);
  border-color: var(--senego-color-primary-dark);
}
.senego-btn--secondary {
  background: transparent;
  border-color: var(--senego-color-primary);
  color: var(--senego-color-primary);
}
.senego-btn--secondary:hover {
  background: var(--senego-color-primary);
  color: #fff;
}
.senego-btn--ghost,
.senego-account .btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--senego-color-muted);
}
.senego-btn--ghost:hover,
.senego-account .btn-ghost:hover { background: var(--senego-color-surface-subtle); color: var(--senego-color-text); }
.senego-btn--danger,
.senego-account .btn-danger {
  background: var(--senego-color-error-bg);
  border-color: #f4cfc6;
  color: var(--senego-color-error);
}
.senego-btn--danger:hover,
.senego-account .btn-danger:hover { background: #ffe9e2; border-color: #f0b8aa; }
.senego-btn--premium,
.senego-account .btn-gold {
  background: var(--senego-color-heading);
  border-color: var(--senego-color-heading);
  color: #fff;
}
.senego-btn--premium:hover,
.senego-account .btn-gold:hover { background: #000; }
/* CTA éditorial dégradé orange→rouge en pilule (ex : « Commenter », actions fortes).
   Variante officielle qui capture une identité visuelle existante du site. */
.senego-btn--gradient {
  background: linear-gradient(135deg, var(--senego-color-primary), var(--senego-color-accent));
  border-color: transparent;
  color: #fff;
  border-radius: var(--senego-radius-pill);
  font-weight: var(--senego-weight-bold);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.senego-btn--gradient:hover {
  background: linear-gradient(135deg, var(--senego-color-primary-dark), var(--senego-color-accent));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(230, 57, 0, .3);
}

/* Tailles */
.senego-btn--sm  { min-height: 36px; padding: 7px 12px; font-size: var(--senego-text-xs); }
.senego-btn--lg  { min-height: 52px; padding: 14px 26px; font-size: var(--senego-text-base); }
.senego-btn--pill  { border-radius: var(--senego-radius-pill); }
.senego-btn--block { display: flex; width: 100%; }

/* ════════════════════════ CARTES ════════════════════════ */
.senego-card {
  background: var(--senego-color-surface);
  border: 1px solid var(--senego-color-border-soft);
  border-radius: var(--senego-radius-sm);
  box-shadow: var(--senego-shadow-md);
  padding: var(--senego-space-md);
}
.senego-card--flat   { box-shadow: none; }
.senego-card--lg     { border-radius: var(--senego-radius-lg); padding: var(--senego-space-lg); }
.senego-card--hover  { transition: box-shadow var(--senego-transition), transform var(--senego-transition); }
.senego-card--hover:hover { box-shadow: var(--senego-shadow-lg); transform: translateY(-1px); }
.senego-card__title  { margin: 0 0 var(--senego-space-sm); font-size: var(--senego-text-lg); font-weight: var(--senego-weight-bold); color: var(--senego-color-heading); }
.senego-card__body   { color: var(--senego-color-text); }
.senego-card__meta   { color: var(--senego-color-meta); font-size: var(--senego-text-sm); }

/* ════════════════════════ FORMULAIRES ════════════════════════ */
.senego-field { margin-bottom: var(--senego-space-md); }
.senego-label {
  display: block;
  margin-bottom: var(--senego-space-xs);
  font-size: var(--senego-text-sm);
  font-weight: var(--senego-weight-semibold);
  color: var(--senego-color-text);
}
.senego-input,
.senego-textarea,
.senego-select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--senego-color-border);
  border-radius: var(--senego-radius-sm);
  background: var(--senego-color-surface);
  color: var(--senego-color-text);
  font-family: var(--senego-font-base);
  font-size: var(--senego-text-base);
  line-height: 1.4;
  transition: border-color var(--senego-transition), box-shadow var(--senego-transition);
}
.senego-textarea { min-height: 120px; resize: vertical; }
.senego-input:focus,
.senego-textarea:focus,
.senego-select:focus {
  outline: none;
  border-color: var(--senego-color-primary);
  box-shadow: 0 0 0 3px rgba(255,153,0,.15);
}
.senego-input::placeholder,
.senego-textarea::placeholder { color: var(--senego-color-muted); }
.senego-input:disabled,
.senego-textarea:disabled,
.senego-select:disabled { background: var(--senego-color-surface-subtle); opacity: .7; cursor: not-allowed; }
.senego-field.is-invalid .senego-input,
.senego-field.is-invalid .senego-textarea { border-color: var(--senego-color-error); }
.senego-help  { margin-top: var(--senego-space-xs); font-size: var(--senego-text-sm); color: var(--senego-color-muted); }
.senego-help--error { color: var(--senego-color-error); }

/* ════════════════════════ BADGES ════════════════════════ */
.senego-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--senego-radius-xs);
  background: var(--senego-color-primary);
  color: #fff;
  font-size: var(--senego-text-xs);
  font-weight: var(--senego-weight-bold);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.2;
}
.senego-badge--accent  { background: var(--senego-color-accent); }
.senego-badge--premium { background: var(--senego-color-premium-bg); color: var(--senego-color-premium); }
.senego-badge--neutral { background: var(--senego-color-surface-subtle); color: var(--senego-color-meta); }
/* Badge en surimpression sur une image (coin haut-gauche d'une carte/vignette).
   Variante officielle pour remplacer les anciens .category-tag positionnés. */
.senego-badge--overlay {
  position: absolute;
  top: var(--senego-space-md);
  left: var(--senego-space-md);
  z-index: 1;
}
.senego-badge--overlay-sm { top: var(--senego-space-sm); left: var(--senego-space-sm); }

/* ════════════════════════ EN-TÊTE DE SECTION (bandeau) ════════════════════════ */
/* Bandeau unifié pour toutes les sections (Débats du jour, Derniers articles…).
   Titre en Public Sans, casse normale (identité minuscule), barre d'accent orange
   à gauche qui « ancre » le titre dans sa section. */
.senego-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--senego-space-md);
  margin-bottom: var(--senego-space-md);
}
.senego-section-head__title {
  position: relative;
  margin: 0;
  padding-left: 14px;
  font-family: var(--senego-font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--senego-color-heading);
  text-transform: none; /* identité minuscule (sentence case) */
}
.senego-section-head__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: .14em;
  bottom: .14em;
  width: 4px;
  border-radius: 2px;
  background: var(--senego-color-primary);
}
/* Lien optionnel « voir tout » à droite du bandeau */
.senego-section-head__link {
  flex: 0 0 auto;
  font-size: var(--senego-text-sm);
  font-weight: var(--senego-weight-semibold);
  color: var(--senego-color-primary);
  text-decoration: none;
}
.senego-section-head__link:hover { color: var(--senego-color-primary-dark); }

/* ════════════════════════ ÉTIQUETTES (TAGS) ════════════════════════ */
/* Chip neutre arrondi pour mots-clés d'article (≠ badge majuscule). */
.senego-tag {
  display: inline-block;
  background: var(--senego-color-surface-subtle);
  color: var(--senego-color-muted);
  border: 1px solid var(--senego-color-border-soft);
  border-radius: var(--senego-radius-pill);
  padding: 6px 14px;
  font-size: var(--senego-text-sm);
  font-weight: var(--senego-weight-medium);
  text-decoration: none;
  transition: background var(--senego-transition), color var(--senego-transition), border-color var(--senego-transition);
}
.senego-tag:hover {
  background: var(--senego-color-primary);
  color: #fff;
  border-color: var(--senego-color-primary);
}

/* ════════════════════════ ALERTES / MESSAGES ════════════════════════ */
.senego-alert {
  display: flex;
  gap: var(--senego-space-sm);
  padding: 12px 16px;
  border: 1px solid transparent;
  border-left-width: 4px;
  border-radius: var(--senego-radius-sm);
  font-size: var(--senego-text-sm);
  line-height: 1.5;
}
.senego-alert--success { background: var(--senego-color-success-bg); border-color: var(--senego-color-success); color: #14532d; }
.senego-alert--error   { background: var(--senego-color-error-bg);   border-color: var(--senego-color-error);   color: #7f1d1d; }
.senego-alert--warning { background: var(--senego-color-warning-bg); border-color: var(--senego-color-warning); color: #78350f; }
.senego-alert--info    { background: var(--senego-color-info-bg);    border-color: var(--senego-color-info);    color: #1e3a8a; }

/* ════════════════════════ TABLEAUX ════════════════════════ */
.senego-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--senego-text-sm);
}
.senego-table th,
.senego-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--senego-color-border-soft);
  text-align: left;
}
.senego-table thead th {
  background: var(--senego-color-surface-subtle);
  color: var(--senego-color-heading);
  font-weight: var(--senego-weight-semibold);
}
.senego-table tbody tr:hover { background: var(--senego-color-surface-subtle); }

/* ════════════════════════ GRILLES ════════════════════════ */
.senego-grid { display: grid; gap: var(--senego-card-gap); }
.senego-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.senego-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.senego-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ════════════════════════ ACCESSIBILITÉ ════════════════════════ */
/* Anneau de focus clavier homogène pour tous les composants interactifs. */
.senego-btn:focus-visible,
.senego-input:focus-visible,
.senego-textarea:focus-visible,
.senego-select:focus-visible,
.senego-badge:focus-visible {
  outline: 2px solid var(--senego-color-primary);
  outline-offset: 2px;
}

/* ════════════════════════ RESPONSIVE ════════════════════════ */
/* Tablette */
@media (max-width: 991px) {
  .senego-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .senego-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Mobile */
@media (max-width: 767px) {
  .senego-grid--2,
  .senego-grid--3,
  .senego-grid--4 { grid-template-columns: 1fr; }
  .senego-btn--block-mobile { display: flex; width: 100%; }
}

/* Mouvement réduit : on neutralise transitions/animations des composants. */
@media (prefers-reduced-motion: reduce) {
  .senego-btn, .senego-card--hover, .senego-input, .senego-textarea, .senego-select {
    transition: none;
  }
}

/* =========================================================================
   Pagination des pages de sujet d'actu  (.senego-topic-pagination)
   Précédent / numéros / Suivant — calquée sur le composant bouton (.senego-btn).
   ========================================================================= */
.senego-topic-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--senego-space-sm);
  margin: var(--senego-space-xl) 0 var(--senego-space-md);
  padding-top: var(--senego-space-lg);
  border-top: 1px solid var(--senego-color-border-line);
}
.senego-topic-pagination__nav { white-space: nowrap; }
.senego-topic-pagination__pages {
  display: flex;
  align-items: center;
  gap: var(--senego-space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}
.senego-topic-pagination__pages li { margin: 0; }

.senego-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--senego-tap-target);
  min-height: var(--senego-tap-target);
  padding: 0 10px;
  border: 1px solid var(--senego-color-border);
  border-radius: var(--senego-radius-sm);
  background: var(--senego-color-surface);
  color: var(--senego-color-text);
  font-family: var(--senego-font-base);
  font-size: var(--senego-text-sm);
  font-weight: var(--senego-weight-semibold);
  line-height: 1;
  text-decoration: none;
  transition: background var(--senego-transition), border-color var(--senego-transition),
              color var(--senego-transition);
}
a.senego-page:hover {
  border-color: var(--senego-color-primary);
  color: var(--senego-color-primary);
}
.senego-page.is-current {
  background: var(--senego-color-primary);
  border-color: var(--senego-color-primary);
  color: #fff;
}
.senego-page--dots {
  min-width: 28px;
  border-color: transparent;
  background: transparent;
  color: var(--senego-color-muted);
  cursor: default;
}

@media (max-width: 767px) {
  .senego-topic-pagination__pages { order: 3; width: 100%; justify-content: center; }
  .senego-topic-pagination__nav { flex: 1 1 0; }
}
/*
 * SENEGO DESIGN SYSTEM — BLOCS ÉDITORIAUX, PUBLICITAIRES & PREMIUM
 * ===============================================================
 * Patrons réutilisables propres à Senego, calqués sur le rendu validé du site
 * (carte article, encart pub, bloc premium, encart éditorial). Un nouveau
 * plugin / une page spéciale (CAN, World Cup, météo, classement…) doit
 * réutiliser ces classes plutôt que d'inventer un style isolé.
 *
 * Construits sur les tokens `--senego-*`. Aucun `!important`. Charger après
 * tokens.css + components.css.
 */

/* ════════════════════════ CARTE ARTICLE ════════════════════════ */
/* Hiérarchie standard : image → catégorie → titre → méta. */
.senego-article-card {
  display: flex;
  flex-direction: column;
  background: var(--senego-color-surface);
  border: 1px solid var(--senego-color-border-soft);
  border-radius: var(--senego-radius-sm);
  box-shadow: var(--senego-shadow-md);
  overflow: hidden;
  transition: box-shadow var(--senego-transition), transform var(--senego-transition);
}
.senego-article-card:hover { box-shadow: var(--senego-shadow-lg); transform: translateY(-1px); }

.senego-article-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--senego-color-surface-subtle);
}
.senego-article-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Badge catégorie en surimpression (orange, comme .category-tag historique). */
.senego-article-card__category {
  position: absolute;
  top: var(--senego-space-md);
  left: var(--senego-space-md);
  padding: 4px 12px;
  border-radius: var(--senego-radius-xs);
  background: var(--senego-color-primary);
  color: #fff;
  font-size: var(--senego-text-sm);
  font-weight: var(--senego-weight-bold);
  text-transform: uppercase;
  z-index: 1;
}
.senego-article-card__body  { padding: var(--senego-space-md); display: flex; flex-direction: column; gap: var(--senego-space-sm); }
.senego-article-card__title {
  margin: 0;
  font-family: var(--senego-font-heading);
  font-size: var(--senego-text-lg);
  font-weight: var(--senego-weight-bold);
  line-height: var(--senego-leading-tight);
  color: var(--senego-color-heading);
}
.senego-article-card__title a { color: inherit; text-decoration: none; }
.senego-article-card__title a:hover { color: var(--senego-color-primary); }
.senego-article-card__meta { color: var(--senego-color-meta); font-size: var(--senego-text-sm); }

/* ════════════════════════ ENCART PUBLICITAIRE ════════════════════════ */
/* Comportement cohérent : surface neutre, label « PUBLICITÉ », hauteur réservée
   (anti-CLS) pour éviter tout saut de mise en page au chargement de l'annonce. */
.senego-ad-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--senego-space-sm);
  background: var(--senego-color-surface);
  border: 1px solid var(--senego-color-border-soft);
  border-radius: var(--senego-radius-sm);
  padding: var(--senego-space-md);
  min-height: 280px;                 /* réserve l'espace : pas de reflow */
  overflow: hidden;
}
.senego-ad-slot::before {
  content: "PUBLICITÉ";
  font-size: var(--senego-text-xs);
  letter-spacing: .08em;
  color: var(--senego-color-muted);
  text-transform: uppercase;
}
.senego-ad-slot--inline  { min-height: 100px; }
.senego-ad-slot--sidebar { min-height: 250px; }
.senego-ad-slot--flat    { box-shadow: none; background: transparent; border-style: dashed; }

/* ════════════════════════ BLOC PREMIUM ════════════════════════ */
.senego-premium {
  position: relative;
  background: var(--senego-color-premium-bg);
  border: 1px solid var(--senego-color-premium);
  border-radius: var(--senego-radius-lg);
  padding: var(--senego-space-lg);
  color: var(--senego-color-heading);
}
.senego-premium__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  margin-bottom: var(--senego-space-sm);
  border-radius: var(--senego-radius-xs);
  background: var(--senego-color-premium);
  color: #fff;
  font-size: var(--senego-text-xs);
  font-weight: var(--senego-weight-bold);
  text-transform: uppercase;
}
.senego-premium__title { margin: 0 0 var(--senego-space-sm); font-size: var(--senego-text-xl); font-weight: var(--senego-weight-bold); }
.senego-premium__text  { color: var(--senego-color-text); margin: 0 0 var(--senego-space-md); }

/* ════════════════════════ ENCART ÉDITORIAL ════════════════════════ */
/* Mise en avant rédactionnelle (chapô, « à lire aussi », encadré). */
.senego-editorial {
  background: var(--senego-color-surface);
  border-left: 4px solid var(--senego-color-accent);
  border-radius: var(--senego-radius-sm);
  padding: var(--senego-space-md) var(--senego-space-lg);
  box-shadow: var(--senego-shadow-sm);
}
.senego-editorial__kicker {
  margin: 0 0 var(--senego-space-xs);
  font-size: var(--senego-text-xs);
  font-weight: var(--senego-weight-bold);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--senego-color-accent);
}
.senego-editorial__title { margin: 0 0 var(--senego-space-sm); font-size: var(--senego-text-lg); font-weight: var(--senego-weight-bold); color: var(--senego-color-heading); }

/* ════════════════════════ RESPONSIVE ════════════════════════ */
@media (max-width: 767px) {
  .senego-ad-slot          { min-height: 250px; }
  .senego-premium          { padding: var(--senego-space-md); }
  .senego-article-card__title { font-size: var(--senego-text-md); }
}
@media (prefers-reduced-motion: reduce) {
  .senego-article-card { transition: none; }
}
/*
 * Main Stylesheet for News Theme V2
 * This file contains all the primary styling, including the responsive grid,
 * typography, component styles, and accessibility improvements.
 *
 * Version updated to reflect the original theme's visual identity.
 */

/*--------------------------------------------------------------
# 1.0 - Configuration & Globals
--------------------------------------------------------------*/

/* --- Font Imports --- */
/* Google Fonts chargées via critical-css.php pour de meilleures performances */

/* --- Variables ---
 * Les variables (--color-*, --soft-*, --card-gap, --font-*) sont désormais
 * définies dans le Design System : assets/css/design-system/tokens.css
 * (source unique de vérité, chargé avant ce fichier). Les anciens noms y sont
 * conservés comme alias des tokens --senego-*. Ne plus déclarer de :root ici.
 */

/* --- Normalize & Base Body --- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text);
    background-color: var(--color-background);
    margin: 0;
    overflow-x: hidden; /* Prevent horizontal scroll on body */
}

/* Responsive Sidebar Management - Remplace la logique JavaScript pour de meilleures performances */
@media (max-width: 767px) {
    #secondary-left,
    #secondary,
    .featured-ad-area {
        display: none !important;
    }

    .home-content-area {
        display: block !important;
    }

    .site-main {
        width: 100% !important;
    }
}

@media (min-width: 768px) {
    #secondary-left,
    #secondary,
    .featured-ad-area {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@media (min-width: 768px) {
    .mobile-mobile{
        display: none;
    }
}

/*--------------------------------------------------------------
# 2.0 - Accessibility
--------------------------------------------------------------*/
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

/*--------------------------------------------------------------
# 3.0 - Layout & Grid System
--------------------------------------------------------------*/
.container {
    max-width: 1312px;
    width: 92%;
    margin-left: auto;
    margin-right: auto;
}
.site-main {
    flex-grow: 1;
}
#content {
    margin-top: var(--spacing-unit);
}

/* Default layout for archive, single, etc. */
.standard-content-area {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 1);
}

/* 3-column layout specifically for the homepage */
.home-content-area {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    background-color: transparent;
    padding: var(--spacing-unit) 0;
    width: 100%;
}
.home-content-area > *:not(#secondary-left):not(.site-main):not(.widget-area) {
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-basis: 0 !important;
    flex-grow: 0 !important;
}

@media (min-width: 992px) {
    .standard-content-area {
        grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr);
        background-color: transparent;
        padding: 0;
    }
    .standard-content-area > .site-main {
        background-color: transparent;
        padding: 0;
    }
    .home-content-area {
        grid-template-columns: 300px 1fr 380px;
    }
}

@media (max-width: 991px) {
    .container {
        width: 100%;
    }
    /* Gouttière mobile/tablette sur le conteneur de contenu principal (#content) :
       le contenu ne colle plus aux bords → les arrondis des cartes restent visibles.
       Cible #content (pas tous les .container) pour ne pas décaler le header. */
    #content.container {
        padding-left: var(--senego-mobile-gutter);
        padding-right: var(--senego-mobile-gutter);
    }
    .standard-content-area, .home-content-area {
        display: block;
    }
    .home-content-area .widget-area-left,
    .home-content-area .widget-area,
    .standard-content-area .widget-area {
        display: none;
    }
}

/*--------------------------------------------------------------
# 4.0 - Typography & Base Elements
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headings);
    /* Identité minuscule (sentence case) — plus d'uppercase global sur les titres.
       Les petites étiquettes/badges qui doivent rester en capitales déclarent
       leur propre text-transform (cf. .senego-badge, .senego-tag, category). */
    text-transform: none;
    line-height: 1.3;
    margin: calc(var(--spacing-unit) * 1.5) 0 var(--spacing-unit);
    font-weight: 700;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p { margin: 0 0 var(--spacing-unit); }

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}
a:hover, a:focus {
    color: var(--color-secondary);
    text-decoration: underline;
}

ul, ol {
    margin: 0 0 var(--spacing-unit) var(--spacing-unit);
    padding-left: var(--spacing-unit);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}
.post-thumbnail img, .entry-content img {
    margin: 0 auto;
    border-radius: 5px;
}
.entry-content iframe{
    max-width: 100%;
    margin: 0 auto;
    display: block;

}

.entry-content iframe[src*="youtube.com"],
.entry-content iframe[src*="youtu.be"] {
    max-width: 100%;
    max-height: 450px;
    margin: 0 auto;
    display: block;
}

hr {
    border: 0;
    height: 1px;
    background: var(--color-border);
    margin: calc(var(--spacing-unit) * 2) 0;
}

/*--------------------------------------------------------------
# 5.0 - Header & Navigation (Corrected and Final)
--------------------------------------------------------------*/
.site-header {
    /* position, top, height, z-index gérés dans critical CSS */
    background-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

/* --- 5.1 Top Bar (Redesigned) --- */
.top-bar {
    background-color: var(--color-top-bar-bg);
    color: var(--color-top-bar-text);
    padding: 0.4rem 1rem;
    font-size: 0.9rem;
}
.top-bar .container {
    display: flex;
    justify-content: flex-end; /* Align all items to the right */
    align-items: center;
}

/* --- 5.2 Main Navigation Bar --- */
.main-navigation-container {
    background-color: #ffffff;
    border-bottom: 3px solid var(--color-primary);
}
.main-navigation-container .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    padding: 0 1rem;
    margin: 5px auto;
    gap: 1rem;
}

/* --- 5.3 Drawer Menu (Mobile) --- */
.drawer-toggle {
    background: none; border: none; cursor: pointer; color: var(--color-primary);
    padding: 0.5rem; display: flex; align-items: center; justify-content: center;
}
.drawer-menu-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6); z-index: 1998;
    opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out;
}
.drawer-menu-overlay.is-visible { opacity: 1; visibility: visible; }

.drawer-menu {
    position: fixed; top: 0; left: 0; width: 320px; max-width: 85%;
    height: 100%; background-color: var(--color-bg-alt);
    box-shadow: 4px 0 20px rgba(0,0,0,0.15); z-index: 1999;
    transform: translateX(-100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column;
}
.drawer-menu.is-open { transform: translateX(0); }
.drawer-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.5rem; border-bottom: 1px solid var(--color-border);
}
.drawer-title { margin: 0; font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 1.3rem; }
.drawer-close { background: none; border: none; cursor: pointer; padding: 5px; color: var(--color-primary); }
.drawer-content { padding: 1rem; overflow-y: auto; }
ul.drawer-navigation { list-style: none; margin: 0; padding: 0; }
ul.drawer-navigation li a {
    display: block; padding: 0.9rem 1rem; color: #333;
    border-radius: 5px; transition: background-color 0.2s, color 0.2s;
    font-weight: 500; font-size: 1rem;
    text-decoration: none;
}
ul.drawer-navigation li a:hover,
ul.drawer-navigation .current-menu-item > a {
    background-color: var(--color-primary); color: #fff;
}

/* --- 5.4 Desktop Navigation --- */
/* .desktop-navigation display géré dans critical CSS */

/* --- 5.5 Dynamic Search Form --- */
.search-form-container { position: relative; }
.search-form { display: flex; align-items: center; }
.search-toggle {
    display: block; /* Visible by default, hidden by media query */
    background: none; border: none; cursor: pointer; padding: 0.5rem; color: var(--color-primary);
    position: relative; width: 40px; height: 40px;
}
.search-submit {
    background: none; border: none; cursor: pointer; color: var(--color-primary);
    display: flex; align-items: center; transition: color 0.2s;
}
.search-submit:hover { color: var(--color-primary); }

.site-branding {
    background-color: #ffffff;
}

/* =============================================================
   DESKTOP STYLES - @media (min-width: 992px)
   ============================================================= */
@media (min-width: 992px) {
    .main-navigation-container .container {
        display: flex;
        justify-content: space-between;
    }
    .site-branding {
        flex-shrink: 0;
        max-width: 180px;
        border-radius: 0.4rem;
    }
    .site-branding img {
        max-width: 100%;
        height: auto;
    }
    /* .menu-toggle-wrapper display géré dans critical CSS */

    .desktop-navigation {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
        min-width: 0;
    }
    #primary-menu-desktop a:hover,
    #primary-menu-desktop .current-menu-item > a {
        background-color: var(--color-primary);
        color: #fff;
    }

    .search-toggle { display: none; } /* Hide mobile search toggle */
    .search-form-container {
        position: relative;
    }
    .search-form {
        position: static;
    }
    .search-field {
        border: 1px solid var(--color-border);
        background-color: var(--color-bg-subtle);
        border-radius: 25px;
        padding: 0.6rem 3rem 0.6rem 1.5rem;
        width: 200px;
        font-size: 0.9rem;
        transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s;
    }
    .search-field:focus {
        width: 280px;
        background-color: #fff;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.2);
    }
    .search-submit {
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        padding: 0.5rem;
    }
}

/* =============================================================
   MOBILE STYLES - @media (max-width: 991px)
   ============================================================= */
@media (max-width: 991px) {

    .site-header {
        height: 84px;
    }
    .main-navigation-container .container {
        display: grid;
        grid-template-columns: auto 1fr auto;
    }
    .site-branding {
        justify-self: left; /* Center logo between hamburger and search */
        max-width: 150px;
        border-radius: 0.2rem;
    }
    .site-branding img {
        max-width: 100%;
        height: auto;
    }
    .menu-toggle-wrapper { justify-self: start; }

    .desktop-navigation { display: none; }
    .search-form { display: none; }

    .search-toggle .icon {
        position: absolute; top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        transition: opacity 0.3s ease, transform 0.3s ease;
        stroke-width: 2.5;
    }
    .search-toggle .icon-close { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
    .search-form-container.is-active .search-toggle .icon-search { opacity: 0; transform: translate(-50%, -50%) rotate(-90deg); }
    .search-form-container.is-active .search-toggle .icon-close { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }

    .search-form-container .search-form {
        display: flex;
        position: absolute;
        top: calc(100% + 10px); right: 0rem;
        background: var(--color-bg-alt);
        padding: 10px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        border-radius: 8px;
        width: calc(100vw - 2rem);
        z-index: 1011;
        opacity: 0; visibility: hidden; transform: translateY(-15px);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;

    }
    .search-form-container.is-active .search-form {
        opacity: 1; visibility: visible; transform: translateY(0);
        transition-delay: 0s;
    }
    .search-field { width: 100%; font-size: 1.1rem; padding: 1rem 3.5rem 1rem 1.5rem; border-radius: 25px; }
    .search-submit { right: 8px; top: 50%; transform: translateY(-50%); position: absolute; padding: 2rem; }
}

/*--------------------------------------------------------------
# 6.0 - Content Sections & Modules
--------------------------------------------------------------*/

/* --- 6.1 Section Headers --- */
.section-header {
    margin-bottom: var(--spacing-unit);
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 0.5rem;
}
.section-header .section-title {
    margin: 0;
    font-size: 1.5rem;
}

/*--------------------------------------------------------------
# 7.0 - Content Area (Archive, Single, Page)
--------------------------------------------------------------*/

/* --- 7.1 Archive & Blog Post Cards --- */
/* Cartes d'articles : design déplacé dans components/card-article.css
   (chargé sur home/archive/recherche). Doublon retiré ici pour alléger main.css. */
.entry-meta {
    font-size: 0.8rem;
    margin-bottom: 1rem;
    color: var(--color-meta);
}
/* (.post-card mobile + summary/footer : voir components/card-article.css) */

/*--------------------------------------------------------------
# 12.0 - Footer
--------------------------------------------------------------*/
.site-footer {
    padding: calc(var(--spacing-unit) * 2) 0;
    margin-top: calc(var(--spacing-unit) * 2);
    background-color: #1d1d1d;
    font-size: 0.9rem;
    color: #ccc;
}
.site-footer a {
    color: #fff;
}
@media (max-width: 767px) {
}

/*--------------------------------------------------------------
# 14.0 - App Promo Popup
--------------------------------------------------------------*/
body.popup-is-active {
    overflow: hidden; /* Block page scroll */
}

.app-promo-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.app-promo-popup.is-hidden {
    opacity: 0;
    visibility: hidden;
    /* display:none retire totalement la popup du rendu tant qu'elle est masquée.
       Sans cela, la règle de base (display:flex, opacity:1) + la transition 0.3s
       animaient un fondu de sortie à CHAQUE chargement = clignotement visible
       sur desktop et mobile. La popup étant toujours dans le DOM et masquée par
       défaut, display:none garantit zéro affichage avant son ouverture par le JS. */
    display: none;
}

.popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    /* backdrop-filter removed for CPU performance */
}

.popup-content {
    position: relative;
    background: #fff;
    padding: 2rem;
    border-radius: var(--soft-radius);
    text-align: center;
    max-width: 90%;
    width: 340px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    transform: scale(1);
    transition: transform 0.3s ease;
}

.app-promo-popup.is-hidden .popup-content {
    transform: scale(0.9);
}

.close-popup-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--senego-color-border);
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    color: var(--senego-color-meta);
}
.close-popup-btn:hover {
    background: #ccc;
}

.popup-logo {
    max-width: 120px;
    margin: 0 auto 1rem;
}

.popup-title {
    font-size: 1.5rem;
    margin: 0 0 0.5rem;
    color: var(--color-text);
}

.popup-description {
    font-size: 1rem;
    color: var(--color-meta);
    margin-bottom: 1.5rem;
}

.popup-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.popup-button {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    text-decoration: none;
    border-radius: 8px;
    color: #fff;
    transition: opacity 0.2s;
}
.popup-button:hover {
    opacity: 0.9;
}

.popup-button.ios-button {
    background-color: #000;
}
.popup-button.android-button {
    background-color: #000;
}

.store-icon {
    width: 30px;
    height: 30px;
    margin-right: 1rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Icône App Store iOS avec le logo Apple officiel */
.store-icon.ios {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>');
}

/* Icône Google Play Store avec le logo Play officiel */
.store-icon.android {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z"/></svg>');
}

.button-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.button-label {
    font-size: 0.8rem;
    opacity: 0.8;
}
.store-name {
    font-size: 1.2rem;
    font-weight: 700;
}

/*--------------------------------------------------------------
# 16.0 - Utilities
--------------------------------------------------------------*/
#infinite-scroll-trigger { height: 50px; width: 100%; }
.loader { display: none; text-align: center; padding: var(--spacing-unit); }
.loader.is-loading { display: block; }

/* Load More Button (after auto-scroll stops) */
.load-more-btn {
    display: block;
    width: 100%;
    max-width: 400px;
    margin: 24px auto;
    padding: 14px 24px;
    background: var(--color-primary, var(--senego-color-primary));
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: 'Source Sans 3', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}
.load-more-btn:hover {
    background: var(--senego-color-primary-dark);
    transform: translateY(-1px);
}
.load-more-btn:disabled {
    background: #ccc;
    cursor: wait;
    transform: none;
}
.load-more-btn:active {
    transform: translateY(0);
}

/*--------------------------------------------------------------
# MOBILE REDESIGN 2026 - Merged from mobile-redesign.css
--------------------------------------------------------------*/
/*
 * Mobile Redesign 2026 - Senego.com
 * Modern news mobile experience
 * Only active on screens <= 767px
 * Overrides main.css mobile styles
 */

/* =================================================================
   MOBILE ONLY - All styles wrapped in max-width: 767px
   ================================================================= */
@media (max-width: 767px) {

    /* --- CSS Variables Override --- */
    /* Variables mobile (--mobile-*, --card-shadow) déplacées dans
       design-system/tokens.css (source unique). */

    /* --- Base & Body --- */
    body {
        background-color: #f5f5f5;
        font-size: 15px;
        line-height: 1.6;
        -webkit-text-size-adjust: 100%;
    }

    #content {
        margin-top: 0;
        padding: 0;
        width: 100%;
    }

    .container {
        width: 100%;
        padding: 0;
    }

    /* --- Header Redesign --- */
    .site-header {
        height: auto;
        position: sticky;
        top: 0;
        z-index: 1000;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .top-bar {
        padding: 4px 12px;
        font-size: 0.75rem;
    }

    .top-bar .container {
        justify-content: space-between;
    }

    .main-navigation-container {
        min-height: 48px !important;
        height: 48px;
    }

    .main-navigation-container .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 48px;
        padding: 0 12px;
        margin: 0 auto;
    }

    .site-branding {
        max-width: 130px;
        border-radius: 4px;
        flex-shrink: 0;
    }

    .site-branding img {
        max-width: 100%;
        height: auto;
    }

    .drawer-toggle {
        padding: 8px;
    }

    .search-toggle {
        width: 36px;
        height: 36px;
        padding: 6px;
    }

    /* --- Drawer Menu Enhancement --- */
    .drawer-menu {
        width: 300px;
        max-width: 85%;
    }

    .drawer-header {
        padding: 16px 20px;
        background: var(--color-primary);
    }

    .drawer-title {
        color: #fff;
        font-size: 1.1rem;
    }

    .drawer-close {
        color: #fff;
    }

    ul.drawer-navigation li a {
        padding: 14px 16px;
        font-size: 0.95rem;
        border-bottom: 1px solid #f0f0f0;
        border-radius: 0;
    }

    ul.drawer-navigation li:last-child a {
        border-bottom: none;
    }

    /* ================================================================
       ARTICLE CARDS - Complete Redesign (Vertical Stack)
       ================================================================ */
    .section-header {
        padding: 0 var(--mobile-padding) 8px;
        margin-bottom: var(--mobile-gap);
        border-bottom-width: 3px;
    }

    .section-header .section-title {
        font-size: 1rem;
        letter-spacing: 0.5px;
    }

    /* ================================================================
       HOME CONTENT AREA
       ================================================================ */
    .home-content-area {
        display: block !important;
        padding: 0;
        gap: 0;
        background: transparent;
    }

    .site-main {
        width: 100% !important;
        background: transparent;
        padding: 0;
    }

    /* Section Derniers Articles header */
    .site-main > .section-header {
        background: #fff;
        padding: 12px var(--mobile-padding) 8px;
        margin-bottom: 0;
    }

    .mobile-mobile {
        background: #fff;
        padding: 8px 0;
    }

    /* ================================================================
       FOOTER - Mobile Optimized
       ================================================================ */
    .site-footer {
        padding: 24px var(--mobile-padding);
        margin-top: 0;
    }

    /* ================================================================
       ARCHIVE / SEARCH PAGES
       ================================================================ */
    .standard-content-area {
        padding: 0;
    }

    .standard-content-area .site-main {
        padding: 0;
        background: transparent;
    }

    .page-header {
        padding: 16px var(--mobile-padding);
        background: #fff;
        margin-bottom: 2px;
    }

    .page-header .page-title {
        font-size: 1.4rem;
        margin: 0 0 8px;
    }

    .page-header .archive-description,
    .page-header .taxonomy-description {
        font-size: 0.85rem;
        color: var(--senego-color-meta);
        line-height: 1.5;
    }

    .page-header .taxonomy-description p {
        margin: 0;
    }

    /* Search results page */
    .search-results .page-header .page-title {
        font-size: 1.2rem;
    }

    /* ================================================================
       INFINITE SCROLL
       ================================================================ */
    #infinite-scroll-trigger {
        height: 30px;
    }

    .loader {
        padding: 16px;
        font-size: 0.85rem;
        color: #999;
    }

    /* ================================================================
       404 PAGE
       ================================================================ */
    .error-404 {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 60vh;
        padding: var(--mobile-padding);
        background: #fff;
    }

    .error-content {
        text-align: center;
        max-width: 320px;
    }

    .error-404-title {
        font-size: 5rem;
        font-weight: 900;
        color: var(--color-primary);
        margin: 0;
        line-height: 1;
    }

    .error-404 .page-title {
        font-size: 1.4rem !important;
        margin: 8px 0 12px;
    }

    .error-message {
        font-size: 0.9rem;
        color: var(--senego-color-meta);
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .error-404 .search-form {
        margin-bottom: 16px;
    }

    /* Bouton 404 migré vers le Design System : <a class="senego-btn senego-btn--primary">
       (cf. components.css). L'ancienne règle .error-404 .button-primary est supprimée. */

    /* ================================================================
       STATIC PAGES
       ================================================================ */
    .page .site-main {
        padding: var(--mobile-padding);
        background: #fff;
    }

    .page .entry-title {
        font-size: 1.4rem;
        text-align: center;
        margin-bottom: 1rem;
    }

    .page .entry-content {
        font-size: 1rem;
        line-height: 1.75;
    }

    /* ================================================================
       UTILITIES & OVERRIDES
       ================================================================ */

    /* Typography refinements */
    h1, h2, h3, h4, h5, h6 {
        text-transform: none;
    }

    /* App promo popup on mobile */
    .popup-content {
        width: 92%;
        max-width: 340px;
        padding: 1.5rem;
        border-radius: var(--mobile-radius);
    }

    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
    }

    /* Touch targets minimum 44px - only for standalone buttons/nav links */
    .drawer-toggle,
    .search-toggle,
    .drawer-navigation a,
    .share-button,
    .popup-content a,
    button[type="submit"] {
        min-height: 40px;
    }

    /* Taboo ad wrapper */
    .taboolaAdWrapper {
        padding: 8px;
    }

}

/* --- Desktop (992px+): proper 3-column grid, no overlap --- */
@media (min-width: 992px) {

    /* Proper CSS Grid layout — sidebars fixées à 340px (pour pubs/widgets ≥300px
       padding compris), colonne centrale = espace restant (~552px sur site 1312px). */
    .home-content-area {
        display: grid !important;
        grid-template-columns: 340px minmax(0, 1fr) 340px !important;
        gap: 24px !important;
        overflow: clip;
    }

    /* Force sidebars to stay within their grid cells */
    /* overflow: clip (not hidden) to allow position: sticky inside */
    .home-content-area #secondary-left,
    .home-content-area .widget-area-left {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 340px;
        overflow: clip;
    }

    .home-content-area #secondary,
    .home-content-area > .widget-area:not(.widget-area-left) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 340px;
        overflow: clip;
    }

    /* Main content respects its grid cell */
    .home-content-area .site-main {
        min-width: 0;
        overflow: hidden;
    }

    /* Cartes d'articles (hero + compactes) : design déplacé dans
       components/card-article.css (chargé sur home/archive/recherche après main.css).
       Ne rien remettre ici pour éviter les doublons et les conflits !important. */

    /* Widgets inside narrower sidebars: prevent overflow */
    .home-content-area .widget {
        overflow: hidden;
        word-wrap: break-word;
    }

}

/* ==========================================================================
   FOOTER MEGA GRID
   ========================================================================== */
.footer-mega {
    display: grid;
    /* Le footer compte 4 colonnes de contenu (Rubriques, Services, Séries+Radios,
       A propos+Social). On colle la grille au nombre réel pour éviter une colonne
       vide à droite. */
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding: 30px 0;
    border-bottom: 1px solid #333;
}
.footer-col-title {
    color: #fff;
    font-family: 'Source Sans 3', system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 12px;
    letter-spacing: 0.5px;
}
.footer-col-title-sub {
    margin-top: 18px;
}
.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-col ul li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer-col ul a {
    display: block;
    padding: 3px 0;
    color: #999;
    text-decoration: none;
    font-size: 0.82rem;
    font-family: 'Source Sans 3', system-ui, sans-serif;
    transition: color 0.15s;
}
.footer-col ul a:hover {
    color: var(--color-primary, var(--senego-color-primary));
}
.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}
.footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #333;
    color: #ccc;
    transition: background 0.2s, color 0.2s;
}
.footer-social-link:hover {
    background: var(--color-primary, var(--senego-color-primary));
    color: #fff;
}
.footer-bottom {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 0 10px;
}
.footer-bottom p {
    color: #777;
    font-size: 0.78rem;
    margin: 0;
}
.footer-bottom-logo img {
    opacity: 0.7;
    transition: opacity 0.2s;
}
.footer-bottom-logo:hover img {
    opacity: 1;
}

@media (max-width: 991px) {
    /* 4 colonnes de contenu → grille 2×2 sur tablette (plus propre que 3 cols
       avec une 4ᵉ orpheline sur la 2ᵉ ligne). */
    .footer-mega { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 767px) {
    .footer-mega { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .footer-bottom { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
    /* Mobile : 2 colonnes compactes (au lieu de 1 col qui faisait un footer
       interminable). Gap et tailles réduits pour tenir jusqu'à ~320px. */
    .footer-mega { grid-template-columns: repeat(2, 1fr); gap: 14px 12px; padding: 24px 0; }
    .footer-col-title { font-size: 0.78rem; margin-bottom: 8px; }
    .footer-col-title-sub { margin-top: 14px; }
    .footer-col ul a { font-size: 0.78rem; padding: 2px 0; }
    .footer-social { gap: 8px; flex-wrap: wrap; }
    .footer-social-link { width: 32px; height: 32px; }
}

/* Widget « Matchs du jour » (plugin senego-football) — wrapper rendu par header.php sur
   TOUTES les pages !is_page() (accueil, article, archive, recherche…). Règle placée dans
   core.css (chargé partout) et non dans home.css (accueil seulement), sinon la marge basse
   manque hors accueil → le widget paraît « collé » au contenu suivant sur les articles. */
.home-matchs-jour {
    margin: 0 0 calc(var(--spacing-unit) * 2);
}
/* HOME — Article vedette (featured) + Débats du jour (popular). Chargé is_home(). Extrait de main.css. */
/* --- 6.2 Featured Posts Section --- */
.featured-section {
    margin-bottom: calc(var(--spacing-unit) * 2);
}
.featured-grid {
    display: grid;
    /* 3 colonnes : Tendances (gauche) | Vedette (centre, ~60%) | Pub (droite) */
    grid-template-columns: 250px minmax(0, 1fr) 340px;
    gap: var(--senego-space-lg);
    align-items: start;
}
.featured-main-article {
    background: transparent;
    border: none;
    padding: 0;
}
.featured-image-container {
    position: relative;
    margin-bottom: 1rem;
    border-radius: var(--soft-radius);
    overflow: hidden;
}
/*.featured-image-container .attachment-news-theme-featured {*/
/*    width: 100%;*/
/*}*/
.featured-image-container .post-thumbnail, .featured-image-container .attachment-news-theme-featured  {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.featured-image-container a, .featured-image-container picture {
    width: 100%;
}
.featured-image-container a:hover .post-thumbnail {
    transform: scale(1.05);
}
/* Badge catégorie migré vers le Design System :
   <span class="senego-badge senego-badge--overlay"> (cf. components.css). */
.featured-main-article .entry-header {
    margin-bottom: 0.5rem;
}
.featured-main-article .entry-title {
    font-size: 2.2rem;
    line-height: 1.2;
    margin: 0;
}
.featured-main-article .entry-title a {
    color: var(--color-text);
    text-decoration: none;
}
.featured-main-article .entry-title a:hover {
    color: var(--color-primary);
}
.featured-main-article .entry-meta {
    font-size: 0.9rem;
    color: var(--color-meta);
    margin-top: 0.5rem;
}
.featured-main-article .entry-summary {
    color: var(--senego-color-muted);
    font-size: 1rem;
}
/* Méta de la vedette (date · commentaires) */
.featured-main-article .featured-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--senego-space-sm);
    margin-top: var(--senego-space-sm);
    font-family: var(--senego-font-base);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--senego-color-meta);
}
.featured-main-article .featured-meta__sep { opacity: .55; }
.featured-ad-area {
    display: flex;
    justify-content: center;
    position: sticky;
    top: 90px; /* reste visible sous le header */
}

/* ===== Colonne gauche : Sujets tendance (ai-editor) ===== */
.trending {
    position: sticky;
    top: 90px;
    background: var(--senego-color-surface);
    border: 1px solid var(--senego-color-border-soft);
    border-radius: var(--senego-radius-sm);
    padding: 14px 14px 4px;
}
.trending__head { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.trending__flame { font-size: 15px; line-height: 1; }
.trending__title {
    margin: 0;
    font-family: var(--senego-font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: none;
    color: var(--senego-color-heading);
}
.trending__list { list-style: none; margin: 0; padding: 0; }
.trending__item { border-top: 1px solid var(--senego-color-border-soft); }
.trending__item:first-child { border-top: none; }
.trending__link { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; text-decoration: none; }
.trending__rank {
    flex: 0 0 auto;
    width: 24px;
    text-align: center;
    font-family: var(--senego-font-heading);
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1;
    color: var(--senego-color-border-strong);
}
.trending__link:hover .trending__rank { color: var(--senego-color-primary); }
.trending__body { min-width: 0; }
.trending__label {
    display: block;
    font-family: var(--senego-font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--senego-color-heading);
}
.trending__link:hover .trending__label { color: var(--senego-color-primary); }
.trending__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; font-size: 0.72rem; line-height: 1; }
.trending__cat { color: var(--senego-color-primary); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.trending__count { color: var(--senego-color-muted); }

@media (max-width: 991px) {
    .featured-grid {
        grid-template-columns: 1fr;
    }
    /* Vedette en premier, puis tendances, puis pub */
    .featured-main-article { order: 1; }
    .trending { order: 2; position: static; }
    .featured-ad-area { order: 3; position: static; margin-top: var(--senego-space-md); }
    .featured-main-article .entry-title {
        font-size: 1.8rem;
    }
}

/* --- 6.3 Popular Posts Section (Débats du jour) --- */
.popular-posts-section {
    margin-bottom: calc(var(--spacing-unit) * 2);
    padding: 28px 0 32px;
}
/* En-tête « Débats du jour » : composant DS .senego-section-head (cf. components.css). */
.popular-posts-slider {
    position: relative;
    /* Aligné sur la vedette et le reste du contenu (plus de retrait 20px orphelin). */
    padding: 0;
}
.popular-posts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.popular-post-card {
    background: var(--senego-color-surface);
    border: 1px solid var(--senego-color-border-soft);
    border-radius: var(--senego-radius-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--senego-shadow-sm);
    transition: transform var(--senego-transition), box-shadow var(--senego-transition);
}
.popular-post-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--senego-shadow-md);
}
.popular-post-thumbnail {
    position: relative;
}
.popular-post-thumbnail a {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.popular-post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.popular-post-card:hover .popular-post-thumbnail img {
    transform: scale(1.06);
}
.popular-rank {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--senego-color-primary), var(--senego-color-accent));
    color: #fff;
    font-size: 0.95rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(230, 57, 0, 0.35);
    z-index: 2;
}
.popular-post-content {
    padding: var(--senego-space-md);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: var(--senego-space-sm);
}
.popular-post-cat {
    align-self: flex-start;
    font-family: var(--senego-font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--senego-color-primary);
    text-decoration: none;
}
.popular-post-cat:hover { color: var(--senego-color-primary-dark); }
.popular-post-title {
    font-family: var(--senego-font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.popular-post-title a {
    color: var(--senego-color-heading);
    text-decoration: none;
    transition: color var(--senego-transition);
}
.popular-post-title a:hover {
    color: var(--senego-color-primary);
}
.popular-post-meta {
    margin-top: auto;
}
.comment-count {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--senego-color-accent);
    background: var(--senego-color-surface-subtle);
    padding: 3px 10px;
    border-radius: var(--senego-radius-pill);
}
.comment-count svg {
    width: 14px;
    height: 14px;
}
.slider-nav {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
    transition: opacity 0.2s, visibility 0.2s, box-shadow 0.2s;
    color: #333;
}
.slider-nav:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.slider-nav.prev { left: 4px; }
.slider-nav.next { right: 4px; }
.slider-nav.is-hidden {
    opacity: 0;
    visibility: hidden;
}

@media (max-width: 767px) {
    .popular-posts-section {
        border-radius: 0;
        padding: 20px 0 24px;
    }
    .popular-posts-slider {
        padding: 0;
    }
    .slider-nav {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .slider-nav.prev { left: 4px; }
    .slider-nav.next { right: 4px; }
    .popular-posts-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 12px;
        padding: 4px 16px 12px;
        scrollbar-width: none;
    }
    .popular-posts-grid::-webkit-scrollbar {
        display: none;
    }
    .popular-post-card {
        flex: 0 0 75%;
        scroll-snap-align: start;
    }
}
@media (min-width: 768px) and (max-width: 1200px) {
    .popular-posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1201px) {
    .slider-nav {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}



/* === Featured desktop (hero overlay) — déplacé de core.css (modularité) === */
@media (min-width: 992px) {
    /* =============================================================
       PREMIUM FEATURED SECTION (Hero Overlay Style)
       Inspired by: Awwwards editorial grids, Ahmad Shadeed overlay
       techniques, cinematic gradient with easing stops
       ============================================================= */

    /* Section container — 3 colonnes séparées (pas de carte unique).
       PAS d'overflow:hidden ici : il casserait le position:sticky des colonnes. */
    .featured-section {
        padding: 0;
        margin-bottom: 2rem;
    }

    /* Grid 2 colonnes : Vedette (gauche, large) | Sujets d'actu (droite). Plus de pub ici. */
    .featured-grid {
        grid-template-columns: minmax(0, 1fr) 300px !important;
        gap: var(--senego-space-lg) !important;
        align-items: start !important;
    }

    /* --- Hero article: overlay style --- */
    .featured-main-article {
        position: relative;
        max-width: none;
    }

    .featured-image-container {
        position: relative;
        margin-bottom: 0 !important;
        border-radius: var(--senego-radius-lg) !important;
        aspect-ratio: 16/9;
        overflow: hidden;
        box-shadow: var(--senego-shadow-md);
    }

    .featured-image-container a {
        display: block;
        width: 100%;
        height: 100%;
    }

    /* Dégradé continu sur TOUTE la hauteur : léger voile dès le haut, qui s'assombrit
       progressivement (easing, sans zone plate) jusqu'à 0.9 en bas → aucune coupure,
       fort contraste du titre sans ombre. */
    .featured-image-container a::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.03) 0%,
            rgba(0, 0, 0, 0.08) 25%,
            rgba(0, 0, 0, 0.16) 42%,
            rgba(0, 0, 0, 0.28) 55%,
            rgba(0, 0, 0, 0.42) 66%,
            rgba(0, 0, 0, 0.60) 78%,
            rgba(0, 0, 0, 0.80) 90%,
            rgba(0, 0, 0, 0.90) 100%
        );
        z-index: 1;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    /* Badge catégorie (DS .senego-badge--overlay) : version desktop élevée. */
    .featured-image-container .senego-badge--overlay {
        top: 1.2rem;
        left: 1.2rem;
        background: var(--senego-color-primary);
        color: #fff;
        padding: 0.3rem 1rem;
        border-radius: 10px;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        z-index: 3;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }

    /* Title moves ON TOP of the image */
    .featured-main-article .entry-header {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 2rem 1.8rem 1.6rem;
        z-index: 2;
        margin-bottom: 0;
    }

    /* Kicker catégorie (façon Yahoo : petite légende JUSTE au-dessus du titre,
       plus le badge dans le coin). Orange Senego pour l'identité. */
    .featured-main-article .featured-kicker {
        display: inline-block;
        margin: 0 0 0.45rem;
        padding: 0.18rem 0.55rem;
        background: var(--senego-color-primary);   /* pastille orange = lisible sur le noir */
        font-family: var(--senego-font-heading);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #fff;                               /* texte blanc sur la pastille */
        border-radius: var(--senego-radius-xs);
    }

    .featured-main-article .entry-title {
        font-size: clamp(1.5rem, 2.2vw, 1.95rem);   /* ~30px façon Yahoo */
        line-height: 1.2;
        letter-spacing: -0.02em;                     /* titre serré (Yahoo -0.6px) */
        margin: 0;
        font-weight: 600;                            /* ~550 Yahoo (Public Sans 600) */
        text-transform: none !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;                       /* max 3 lignes comme Yahoo */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .featured-main-article .entry-title a {
        color: #fff !important;
        font-weight: 600;
        text-decoration: none !important;
        /* Aucune ombre : c'est le dégradé profond qui porte le contraste (comme Yahoo). */
    }

    .featured-main-article .entry-title a:hover {
        color: var(--senego-color-primary) !important;
    }

    /* Méta sur l'overlay sombre : texte clair */
    .featured-main-article .featured-meta {
        color: rgba(255, 255, 255, 0.9);
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    }

    /* Hover: subtle zoom on image */
    .featured-image-container a:hover img,
    .featured-image-container a:hover .attachment-news-theme-featured {
        transform: scale(1.04);
    }

    .featured-image-container img,
    .featured-image-container .attachment-news-theme-featured {
        transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    /* --- Ad area: colonne droite sticky, propre --- */
    .featured-ad-area {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 0;
        /* position:sticky + top hérités de la règle de base */
    }

    /* Label "PUBLICITÉ" already added by PHP — no ::before needed */
}

/* === Featured responsive mobile (déplacé de core.css) === */
@media (max-width: 767px) {
    /* ================================================================
       FEATURED ARTICLE - Hero Card Style
       ================================================================ */
    .featured-section {
        padding: 0;
        margin-bottom: 0;
        background: transparent;
    }

    /* IMPORTANT : grille à 1 colonne (PAS flex). La base .featured-grid a
       align-items:start ; en display:flex colonne, ça empêche l'étirement des
       enfants → la vedette se réduisait à la largeur de l'image et se collait à
       gauche, UNIQUEMENT sur Chrome/Blink mobile (WebKit étirait quand même).
       En grid 1fr, align-items:start n'agit que sur l'axe vertical → pleine
       largeur garantie sur tous les navigateurs. */
    .featured-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--senego-space-md);
    }
    /* Vedette en premier, puis les sujets d'actu (la pub est masquée sur mobile). */
    .featured-main-article { order: 1; }
    /* Marge basse pour ne pas coller la pub située juste en dessous sur mobile */
    .trending { order: 2; margin-bottom: var(--senego-space-xl); }

    .featured-main-article {
        position: relative;
        max-width: 100%;
        overflow: hidden;
        border-radius: 0;
    }

    .featured-image-container {
        position: relative;
        margin-bottom: 0;
        border-radius: var(--senego-radius-lg);
        aspect-ratio: 3/2 !important;   /* proportion Yahoo (plus cinématographique) */
        width: 100%;
    }

    /* Dégradé continu sur toute la hauteur (easing, sans coupure) */
    .featured-image-container::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.03) 0%,
            rgba(0, 0, 0, 0.08) 25%,
            rgba(0, 0, 0, 0.16) 42%,
            rgba(0, 0, 0, 0.28) 55%,
            rgba(0, 0, 0, 0.42) 66%,
            rgba(0, 0, 0, 0.60) 78%,
            rgba(0, 0, 0, 0.80) 90%,
            rgba(0, 0, 0, 0.90) 100%
        );
        pointer-events: none;
        z-index: 1;
    }

    .featured-main-article .entry-header {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 20px var(--mobile-padding);
        z-index: 2;
        margin-bottom: 0;
    }

    /* Kicker catégorie au-dessus du titre (façon Yahoo) */
    .featured-main-article .featured-kicker {
        display: inline-block;
        margin: 0 0 6px;
        padding: 2px 8px;
        background: var(--senego-color-primary);
        font-family: var(--senego-font-heading);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #fff;
        border-radius: var(--senego-radius-xs);
    }

    .featured-main-article .entry-title {
        font-size: 1.25rem;        /* 20px façon Yahoo */
        line-height: 1.25;
        letter-spacing: -0.02em;   /* serré comme Yahoo */
        margin: 0;
        font-weight: 600;
        color: #fff !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        /* pas d'ombre : le dégradé profond porte le contraste */
    }

    .featured-main-article .entry-title a {
        color: #fff !important;
        font-weight: 600;
        text-decoration: none;
    }
    .featured-main-article .featured-meta {
        color: rgba(255, 255, 255, 0.9);
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        font-size: 0.8rem;
        margin-top: 6px;
    }

    .senego-badge--overlay {
        position: absolute;
        top: 12px;
        left: 12px;
        background-color: var(--color-primary);
        color: #fff;
        padding: 4px 10px;
        border-radius: 4px;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        z-index: 2;
        letter-spacing: 0.5px;
    }

    .featured-ad-area {
        display: none !important;
    }
}

/* === Popular (débats du jour) responsive mobile — déplacé de core.css === */
@media (max-width: 767px) {
    /* ================================================================
       POPULAR POSTS (DÉBATS DU JOUR) - Modern Horizontal Cards
       ================================================================ */
    .popular-posts-section {
        margin: 0;
        padding: 16px 0 20px;
    }

    .popular-posts-section .section-header {
        padding: 0 var(--mobile-padding) 10px;
        margin-bottom: 4px;
    }

    .popular-posts-section .section-title {
        font-size: 0.95rem;
        letter-spacing: 0.5px;
    }

    .popular-posts-slider {
        padding: 0;
    }

    .popular-posts-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: var(--mobile-gap);
        padding: 4px var(--mobile-padding) 12px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .popular-posts-grid::-webkit-scrollbar {
        display: none;
    }

    .popular-post-card {
        flex: 0 0 72%;
        scroll-snap-align: start;
        border-radius: var(--mobile-radius);
        overflow: hidden;
        border: none;
        box-shadow: var(--card-shadow);
        background: #fff;
    }

    .popular-post-thumbnail a {
        aspect-ratio: 16/9;
        min-height: auto;
    }

    .popular-post-thumbnail img {
        border-radius: 0;
    }

    .popular-rank {
        width: 26px;
        height: 26px;
        font-size: 0.8rem;
        top: 8px;
        left: 8px;
    }

    .popular-post-content {
        padding: 10px 12px 12px;
    }

    .popular-post-title {
        font-size: 0.88rem;
        line-height: 1.35;
        -webkit-line-clamp: 3;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 8px;
    }

    .popular-post-meta {
        padding-top: 0;
    }

    .comment-count {
        font-size: 0.75rem;
        padding: 3px 8px;
    }

    /* Slider navigation arrows - hidden on mobile (swipe only) */
    .slider-nav {
        display: none !important;
    }
}

/* .home-matchs-jour (wrapper du widget « Matchs du jour ») → déplacé dans core.css :
   le widget est rendu par header.php sur TOUTES les pages !is_page() (accueil, article,
   archive, recherche…), pas seulement l'accueil. Sa règle doit donc être globale,
   sinon la marge manque partout sauf sur l'accueil (aspect différent constaté). */
/* SIDEBAR & WIDGETS — vidéos, populaires hebdo, sticky. Chargé sur home + single. Extrait de main.css (2026-05-29). */

/* Espacement vertical UNIFORME entre tous les blocs de sidebar (anti-cumul) :
   margin-bottom unique, margin-top 0 → écarts identiques quel que soit le widget. */
#secondary > *,
#secondary-left > * {
    margin-top: 0;
    margin-bottom: var(--card-gap);
}
#secondary > *:last-child,
#secondary-left > *:last-child {
    margin-bottom: 0;
}

/*--------------------------------------------------------------
# 9.0 - Sidebar & Widgets
--------------------------------------------------------------*/
#secondary {
    /* Pas de width fixe — la cellule de grille parente (home: 380px, single:
       340px) définit la largeur. `width: auto` annule explicitement l'ancienne
       règle 380px qui peut survivre dans le critical CSS inline. min-width:0
       évite que le contenu (image, iframe) ne force la colonne à s'élargir. */
    width: auto;
    min-width: 0;
}
.widget-area {
    padding-top: 0;
    /* This allows the sticky element to calculate its boundary correctly */
    height: 100%;
}
.widget {
    margin-bottom: var(--spacing-unit);
    background: var(--soft-surface);
    padding: var(--spacing-unit);
    border: 0;
    border-radius: var(--soft-radius);
    box-shadow: var(--soft-shadow);
}
/* Bandeau de widget — aligné sur le composant DS (.senego-section-head), version
   sidebar : barre d'accent à gauche, Public Sans, casse normale, tokens. */
.widget-title {
    position: relative;
    margin: 0 0 var(--senego-space-md);
    padding: 0 0 0 12px;
    font-family: var(--senego-font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: none;
    color: var(--senego-color-heading);
    border-bottom: none;
}
.widget-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: .14em;
    bottom: .14em;
    width: 4px;
    border-radius: 2px;
    background: var(--senego-color-primary);
}
.widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.widget ul li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}
.widget ul li:last-child {
    border-bottom: none;
}
.widget .search-form .search-submit {
    display: none;
}
/* =========================================
   PINNED ARTICLES COMPONENT
   ========================================= */

/* CSS pour Articles Épinglés - Template Part */
.pinned-articles-sidebar {
    width: 100%;
    margin-bottom: 2rem;
}

.pinned-articles-container {
    position: relative;
}

.pinned-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
    background: var(--color-primary);
    padding: 5px;
    border-radius: 6px 6px 0 0;
}

.pinned-title {
    color: rgba(255,255,255,0.9);
    font-family: var(--font-headings);
    font-size: 19px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.pinned-icon {
    color: rgba(255,255,255,0.9);
}

.pinned-badge {
    background: linear-gradient(45deg, #ff6b6b, #e74c3c);
    color: var(--color-bg-alt);
    padding: 6px 14px;
    border-radius: 20px;
    font-family: var(--font-headings);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
}

.pinned-articles-list {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pinned-article {
    background: var(--color-bg-alt);
    border-radius: var(--soft-radius);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    border: 1px solid var(--color-border);
    position: relative;
}

.pinned-article:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.pinned-article-image {
    position: relative;
    height: 140px;
    overflow: hidden;
}

.pinned-article-image a {
    display: block;
    height: 100%;
}

.pinned-article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.pinned-article:hover .pinned-article-image img {
    transform: scale(1.05);
}

.pinned-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pinned-article:hover .pinned-overlay {
    opacity: 1;
}

.play-icon {
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.pinned-article:hover .play-icon {
    transform: scale(1);
}

.pinned-article-content {
    padding: 18px;
}

.pinned-article-title {
    margin: 0 0 10px 0;
    font-family: var(--font-headings);
    font-size: 16px;
    line-height: 1.4;
}

.pinned-article-title a {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pinned-article-title a:hover {
    color: var(--color-primary);
}

.pinned-article-excerpt {
    color: var(--color-meta);
    font-family: var(--font-primary);
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 14px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pinned-article-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
}

.pinned-meta-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pinned-date {
    color: var(--color-meta);
    font-family: var(--font-primary);
    font-weight: 500;
}

.pinned-author {
    color: var(--color-meta);
    font-family: var(--font-primary);
    font-size: 10px;
    opacity: 0.8;
}

.pinned-read-more {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-primary);
    font-family: var(--font-headings);
    font-weight: 600;
    text-decoration: none;
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 20px;
    background: rgba(255, 153, 0, 0.1);
    transition: all 0.3s ease;
}

.pinned-read-more:hover {
    background: rgba(255, 153, 0, 0.2);
    color: var(--color-secondary);
    transform: translateX(3px);
}

.pinned-read-more svg {
    transition: transform 0.3s ease;
}

.pinned-read-more:hover svg {
    transform: translateX(2px);
}

/* Animation d'apparition */
.pinned-articles-container {
    animation: slideInUp 0.6s ease-out;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .pinned-articles-container {
        padding: 20px;
        border-radius: var(--soft-radius);
    }

    .pinned-title {
        font-size: 17px;
    }

    .pinned-article-image {
        height: 120px;
    }

    .pinned-article-content {
        padding: 16px;
    }

    .pinned-article-title {
        font-size: 15px;
    }

    .pinned-article-excerpt {
        font-size: 12px;
    }

    .pinned-article-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .pinned-read-more {
        align-self: flex-end;
    }
}

@media (max-width: 480px) {
    .pinned-header {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .pinned-badge {
        align-self: flex-end;
    }
}

/* États de chargement */
.pinned-article.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
    .pinned-article,
    .pinned-article-image img,
    .pinned-overlay,
    .pinned-read-more {
        transition: none;
    }

    .pinned-badge {
        animation: none;
    }

    .pinned-articles-container {
        animation: none;
    }
}

/* Focus states pour l'accessibilité */
.pinned-article-title a:focus,
.pinned-read-more:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 8px;
}

/* --- 9.1 Video Posts Widget --- */
#secondary-left {
    width: 300px;
    flex-shrink: 0;
}
.widget_video_posts .widget-title {
    margin-bottom: var(--spacing-unit);
}
.video-posts-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-unit);
}
.video-post-card {
    background-color: var(--color-bg-subtle);
    border-radius: var(--soft-radius);
    overflow: hidden;
}
.video-thumbnail-container {
    position: relative;
}
.video-thumbnail-container a {
    display: block;
}
.video-thumbnail-container .post-thumbnail {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: filter 0.3s ease;
}
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.video-post-card:hover .video-overlay {
    opacity: 1;
}
.video-post-card:hover .post-thumbnail {
    filter: brightness(0.8);
}
.play-icon {
    width: 48px;
    height: 48px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    stroke: #fff;
    transition: transform 0.3s ease;
}
.video-post-card:hover .play-icon {
    transform: scale(1.1);
}
.video-post-content {
    padding: 1rem;
}
.video-post-title {
    font-family: var(--font-headings);
    font-size: 1.1rem;
    line-height: 1.4;
    margin: 0;
}
.video-post-title a {
    color: var(--color-text);
    text-decoration: none;
}
.video-post-title a:hover {
    color: var(--color-primary);
}

/* --- 9.2 Weekly Popular Widget --- */
.widget_popular_weekly .popular-weekly-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: popular-counter;
}
.popular-weekly-item {
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border);
    counter-increment: popular-counter;
}
.popular-weekly-item:first-child {
    padding-top: 0;
}
.popular-weekly-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.popular-weekly-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
}
.popular-weekly-link::before {
    content: counter(popular-counter);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-meta);
    min-width: 2rem;
    text-align: center;
}
.popular-weekly-thumbnail img {
    border-radius: var(--soft-radius);
    width: 60px;
    height: 60px;
    object-fit: cover;
}
.popular-weekly-content {
    flex: 1;
}
.popular-weekly-title {
    font-family: var(--font-headings);
    font-size: 1rem;
    line-height: 1.4;
    margin: 0 0 0.25rem 0;
    color: var(--color-text);
}
.popular-weekly-link:hover .popular-weekly-title {
    color: var(--color-primary);
}

/* --- 9.3 Sticky Sidebar --- */
.sticky-sidebar-wrapper {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    /* The ad will stick below the sticky header */
    top: 120px; /* Adjust based on sticky header height + desired margin */
}

/* === Widgets sidebar desktop : NOS VIDÉOS + DÉBATS DE LA SEMAINE (déplacé de core.css — modularité) === */
@media (min-width: 992px) {
       PREMIUM "NOS VIDÉOS" SIDEBAR (Left Column)
       Hero first card + compact list, glassmorphism play button
       ============================================================= */

    /* Widget container */
    .widget_video_posts {
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: var(--soft-shadow);
        padding: 0 !important;
    }

    /* Bandeau unifié = même style que le composant DS (.senego-section-head) :
       fine barre orange à gauche, Public Sans, séparateur discret. Plus de rond
       orange 22px ni de soulignement orange épais (incohérents avec le reste). */
    .widget_video_posts .widget-title {
        position: relative;
        display: block;
        font-size: 1.05rem;
        font-weight: 700;
        text-transform: none !important;
        letter-spacing: 0;
        padding: 0.85rem 1.1rem 0.7rem 1.5rem;
        margin-bottom: 0 !important;
        border-bottom: 1px solid var(--senego-color-border-soft);
    }
    .widget_video_posts .widget-title::before {
        content: "";
        position: absolute;
        left: 1.1rem;
        top: 0.9rem;
        bottom: 0.7rem;
        width: 4px;
        border-radius: 2px;
        background: var(--senego-color-primary);
    }

    /* Video list: remove gap, tighter spacing */
    .widget_video_posts .video-posts-list {
        gap: 0 !important;
        padding: 0;
    }

    /* --- First video card: Hero style with overlay title --- */
    .widget_video_posts .video-post-card:first-child {
        border-radius: 0;
        position: relative;
    }

    .widget_video_posts .video-post-card:first-child .video-thumbnail-container {
        aspect-ratio: 16/9;
    }

    .widget_video_posts .video-post-card:first-child .video-thumbnail-container a {
        height: 100%;
    }

    /* Gradient overlay on first card */
    .widget_video_posts .video-post-card:first-child .video-overlay {
        opacity: 1 !important;
        background: linear-gradient(
            to top,
            hsla(0, 0%, 0%, 0.85) 0%,
            hsla(0, 0%, 0%, 0.55) 35%,
            hsla(0, 0%, 0%, 0.15) 60%,
            hsla(0, 0%, 0%, 0) 100%
        ) !important;
    }

    .widget_video_posts .video-post-card:first-child .video-post-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0.8rem 1rem;
        z-index: 2;
    }

    .widget_video_posts .video-post-card:first-child .video-post-title {
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
        text-transform: none !important;
    }

    .widget_video_posts .video-post-card:first-child .video-post-title a {
        color: #fff !important;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    }

    /* Glassmorphism play button */
    .widget_video_posts .play-icon {
        width: 40px !important;
        height: 40px !important;
        background: rgba(255, 255, 255, 0.2) !important;
        /* backdrop-filter removed for CPU performance */
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    }

    .widget_video_posts .play-icon svg {
        width: 18px;
        height: 18px;
        fill: #fff;
        stroke: #fff;
    }

    /* First card: play button repositioned top-right */
    .widget_video_posts .video-post-card:first-child .play-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;
    }

    /* --- Cards 2-5: Compact horizontal layout --- */
    .widget_video_posts .video-post-card:not(:first-child) {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        border-radius: 0 !important;
        background: #fff !important;
        border-top: 1px solid #f0f0f0;
        padding: 0.6rem 1rem;
        gap: 0.7rem;
    }

    .widget_video_posts .video-post-card:not(:first-child) .video-thumbnail-container {
        flex: 0 0 80px;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
    }

    .widget_video_posts .video-post-card:not(:first-child) .video-thumbnail-container img {
        width: 80px !important;
        height: 52px !important;
        aspect-ratio: auto !important;
        object-fit: cover;
    }

    /* Small play button on compact cards */
    .widget_video_posts .video-post-card:not(:first-child) .play-icon {
        width: 24px !important;
        height: 24px !important;
    }

    .widget_video_posts .video-post-card:not(:first-child) .play-icon svg {
        width: 11px;
        height: 11px;
    }

    .widget_video_posts .video-post-card:not(:first-child) .video-overlay {
        opacity: 1 !important;
        background: rgba(0, 0, 0, 0.25) !important;
        border-radius: 8px;
    }

    .widget_video_posts .video-post-card:not(:first-child) .video-post-content {
        flex: 1;
        min-width: 0;
        padding: 0 !important;
    }

    .widget_video_posts .video-post-card:not(:first-child) .video-post-title {
        font-size: 0.78rem !important;
        line-height: 1.3 !important;
        text-transform: none !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .widget_video_posts .video-post-card:not(:first-child) .video-post-title a {
        color: #333 !important;
        text-decoration: none;
    }

    .widget_video_posts .video-post-card:not(:first-child) .video-post-title a:hover {
        color: var(--senego-color-primary) !important;
    }

    /* Hover effect on compact cards */
    .widget_video_posts .video-post-card:not(:first-child):hover {
        background: var(--senego-color-surface-subtle) !important;
    }

    /* Right sidebar ad containers */
    .home-content-area #secondary .widget {
        max-width: 100%;
        overflow: hidden;
    }

    /* =============================================================
       PREMIUM "DÉBATS DE LA SEMAINE" WIDGET
       Inspired by: NYT "Most Popular" sidebar, The Verge trending,
       numbered ranking with accent color highlight
       ============================================================= */

    .widget_popular_weekly {
        background: #fff;
        border-radius: var(--soft-radius);
        overflow: hidden;
        box-shadow: var(--soft-shadow);
        padding: 0 !important;
        margin-bottom: 1.5rem;
    }

    /* Bandeau unifié = même style que le composant DS (.senego-section-head). */
    .widget_popular_weekly .widget-title {
        position: relative;
        display: block;
        font-size: 1.05rem;
        font-weight: 700;
        text-transform: none !important;
        letter-spacing: 0;
        padding: 0.85rem 1.1rem 0.7rem 1.5rem;
        margin-bottom: 0 !important;
        border-bottom: 1px solid var(--senego-color-border-soft);
    }
    .widget_popular_weekly .widget-title::before {
        content: "";
        position: absolute;
        left: 1.1rem;
        top: 0.9rem;
        bottom: 0.7rem;
        width: 4px;
        border-radius: 2px;
        background: var(--senego-color-primary);
    }

    .widget_popular_weekly .popular-weekly-list {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Each ranked item */
    .widget_popular_weekly .popular-weekly-item {
        padding: 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    .widget_popular_weekly .popular-weekly-item:last-child {
        border-bottom: none !important;
    }

    .widget_popular_weekly .popular-weekly-link {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        padding: 0.75rem 1rem;
        text-decoration: none;
        transition: background 0.15s ease;
    }
    .widget_popular_weekly .popular-weekly-link:hover {
        background: var(--senego-color-surface-subtle);
    }

    /* Large rank number — bold accent style */
    .widget_popular_weekly .popular-weekly-link::before {
        font-size: 1.6rem !important;
        font-weight: 800 !important;
        color: var(--senego-color-primary) !important;
        min-width: 1.8rem !important;
        text-align: center;
        line-height: 1;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    /* Top 3 get special treatment */
    .widget_popular_weekly .popular-weekly-item:nth-child(1) .popular-weekly-link::before {
        color: #ff6600 !important;
        font-size: 1.8rem !important;
    }
    .widget_popular_weekly .popular-weekly-item:nth-child(2) .popular-weekly-link::before {
        color: #ff8800 !important;
    }
    .widget_popular_weekly .popular-weekly-item:nth-child(3) .popular-weekly-link::before {
        color: #ffaa00 !important;
    }

    /* Thumbnail — rounded square */
    .widget_popular_weekly .popular-weekly-thumbnail {
        flex-shrink: 0;
        width: 56px !important;
        height: 56px !important;
        border-radius: 8px;
        overflow: hidden;
    }
    .widget_popular_weekly .popular-weekly-thumbnail img {
        width: 56px !important;
        height: 56px !important;
        object-fit: cover;
        border-radius: 8px;
    }

    /* Title text */
    .widget_popular_weekly .popular-weekly-title {
        font-size: 0.82rem !important;
        line-height: 1.35 !important;
        font-weight: 600;
        color: var(--senego-color-text);
        margin: 0 0 0.2rem 0 !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-transform: none !important;
    }
    .widget_popular_weekly .popular-weekly-link:hover .popular-weekly-title {
        color: var(--senego-color-primary);
    }

    /* Comment count badge */
    .widget_popular_weekly .comment-count {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        font-size: 0.72rem;
        color: #595959;
        font-weight: 500;
    }
    .widget_popular_weekly .comment-count svg {
        width: 12px;
        height: 12px;
        color: #767676;
    }

    /* "Aucun article" fallback */
    .widget_popular_weekly > p {
        padding: 1.5rem 1rem;
        color: #999;
        font-size: 0.85rem;
        text-align: center;
    }
}

/* === Pinned articles responsive (déplacé de core.css — modularité) === */
@media (max-width: 767px) {
    /* Pinned articles (sidebar component - show on mobile too) */
    .pinned-articles-sidebar {
        margin: 0;
        padding: 0 var(--mobile-padding);
    }

    .pinned-articles-container {
        padding: 0;
    }

    .pinned-article-image {
        height: 100px;
        border-radius: 8px 8px 0 0;
    }

    .pinned-article {
        border-radius: var(--mobile-radius);
        box-shadow: var(--card-shadow);
    }
}
/* =========================================================================
   Senego — Carte « Télécharger l'application » — MOBILE UNIQUEMENT, centrée.
   Affichée seulement sur iPhone / Android (voir senego-app-card.js), jamais
   sur ordinateur. Un seul bouton store (celui de l'OS), CENTRÉ et EN BAS.
   Aucun !important. Variantes de contexte : --inline / --list / --grid.
   ========================================================================= */

.senego-app-card {
  --sac-orange:  var(--senego-color-primary, #ff9900);
  --sac-accent:  var(--senego-color-accent,  #e63900);
  --sac-bg:      var(--senego-color-bg,       #f2f3ef);
  --sac-surface: var(--senego-color-surface,  #ffffff);
  --sac-heading: var(--senego-color-heading,  #16181c);
  --sac-text:    var(--senego-color-text,     #1a1a1a);
  --sac-meta:    var(--senego-color-meta,      #666666);
  --sac-border:  var(--senego-color-border,   #e0e0e0);
  --sac-font-h:  var(--senego-font-heading, 'Public Sans', system-ui, sans-serif);
  --sac-font-b:  var(--senego-font-base,    'Source Sans 3', system-ui, sans-serif);

  box-sizing: border-box;
  margin: 24px 0;
  background: var(--sac-surface);
  border: 1px solid var(--sac-border);
  border-top: 2px solid var(--sac-orange);   /* accent marque : suit les coins arrondis */
  border-radius: 12px;
  padding: 20px 18px;
  color: var(--sac-text);
  font-family: var(--sac-font-b);
  text-align: center;                         /* tous les éléments centrés */
}
.senego-app-card *,
.senego-app-card *::before,
.senego-app-card *::after { box-sizing: border-box; }

/* ---- Affichage piloté par l'OS (senego-app-card.js) --------------------- */
.senego-app-card[hidden] { display: none; }                 /* jamais sur PC, ni avant le JS */
.senego-app-card__store[data-os] { display: none; }         /* les 2 boutons masqués par défaut */
.senego-app-card.is-ios     .senego-app-card__store[data-os="ios"]     { display: inline-flex; }
.senego-app-card.is-android .senego-app-card__store[data-os="android"] { display: inline-flex; }

/* ---- En-tête centré ---------------------------------------------------- */
.senego-app-card__brand {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; margin-bottom: 8px;
}
.senego-app-card__logo { height: 20px; width: auto; display: block; }
.senego-app-card__eyebrow {
  font-family: var(--sac-font-h);
  font-size: 20px; font-weight: 800;          /* coordonné à la hauteur du logo */
  letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--sac-orange);                   /* lockup « L'APP » + logo SENEGO */
}
.senego-app-card__title {
  font-family: var(--sac-font-h);
  font-weight: 700; font-size: 17px; line-height: 1.3;
  color: var(--sac-heading);
  margin: 0 auto; max-width: 22em; text-wrap: pretty;
}
.senego-app-card__text {
  font-size: 14px; line-height: 1.5; color: var(--sac-meta);
  margin: 5px auto 0; max-width: 26em; text-wrap: pretty;
}

/* ---- Badge store OFFICIEL : centré, en bas, taille naturelle ----------- */
.senego-app-card__stores { display: flex; justify-content: center; margin-top: 16px; }
.senego-app-card__store {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 9px 16px 9px 13px; border-radius: 9px;
  background: #000000; color: #ffffff;        /* badge NOIR officiel */
  text-decoration: none; border: 1px solid rgba(255,255,255,0.20);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.15s ease,
              transform 0.15s var(--senego-ease, cubic-bezier(.2,.7,.2,1));
}
.senego-app-card__store:hover { background: #111111; transform: translateY(-1px); }
.senego-app-card__store:focus-visible { outline: 2px solid var(--sac-orange); outline-offset: 2px; }
/* Le corps d'article (single.css : `.entry-content a`) souligne TOUS les liens en
   orange — sa spécificité (0,1,1) battait `.senego-app-card__store` (0,1,0), d'où le
   trait orange sous le texte des badges. On reprend la main avec une spécificité
   supérieure (0,2,1), sans !important. Couvre hover/focus/visited. */
.senego-app-card a.senego-app-card__store,
.senego-app-card a.senego-app-card__store:hover,
.senego-app-card a.senego-app-card__store:focus,
.senego-app-card a.senego-app-card__store:visited {
  text-decoration: none;
  color: #ffffff;
}
/* Icône : Apple en blanc (fill inline) ; Google Play conserve ses couleurs. */
.senego-app-card__icon { display: flex; align-items: center; justify-content: center; width: 26px; height: 28px; flex: none; }
.senego-app-card__icon svg { display: block; height: 100%; width: auto; }
.senego-app-card__store-txt { display: flex; flex-direction: column; line-height: 1; text-align: left; }
.senego-app-card__store-txt small { font-size: 11px; font-weight: 400; color: rgba(255,255,255,0.95); letter-spacing: .01em; }
.senego-app-card__store-txt strong { font-family: var(--sac-font-h); font-size: 19px; font-weight: 600; color: #ffffff; letter-spacing: .01em; margin-top: 3px; }
/* Google Play : petite ligne en capitales espacées, comme le badge officiel. */
.senego-app-card__store[data-os="android"] .senego-app-card__store-txt small { text-transform: uppercase; font-size: 10px; letter-spacing: .09em; font-weight: 500; }
.senego-app-card__store[data-os="android"] .senego-app-card__store-txt strong { font-weight: 500; }

/* ---- Variantes de contexte (légères différences) ----------------------- */
.senego-app-card--inline { margin: 26px 0; }                /* corps d'article */
.senego-app-card--list   { margin: 12px 0; }                /* item plein largeur dans une liste */
.senego-app-card--grid   { height: 100%; }                  /* tuile d'accueil */
/**
 * Senego Context Block - CSS
 *
 * Bloc d'articles liés sémantiquement affiché en bas des pages d'article.
 * Utilise les variables CSS du thème principal (--color-primary, --font-*, etc.)
 */

.senego-context-block {
    margin: 2rem 0;
    padding: 0;
    font-family: var(--font-primary);
}

.senego-context-block .context-section {
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--color-bg-subtle, var(--senego-color-surface-subtle));
    border-left: 3px solid var(--color-primary, var(--senego-color-primary));
    border-radius: 4px;
}

.senego-context-block .context-section:last-child {
    margin-bottom: 0;
}

/* Section "Même sujet" - accent plus fort */
.senego-context-block .context-same-topic {
    border-left-color: var(--color-primary, var(--senego-color-primary));
    background: #fff7ed;
}

/* Section "Contexte" - accent moyen */
.senego-context-block .context-deep {
    border-left-color: var(--color-secondary, var(--senego-color-primary-dark));
}

/* Section "À lire aussi" - accent discret */
.senego-context-block .context-also-read {
    border-left-color: var(--color-border, var(--senego-color-border));
}

.senego-context-block .context-title {
    font-family: var(--font-headings, 'Source Sans 3', system-ui, sans-serif);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    color: var(--color-text, #000);
    text-transform: none;
    letter-spacing: 0.02em;
}

.senego-context-block .context-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.senego-context-block .context-item {
    margin: 0;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.senego-context-block .context-item:last-child {
    border-bottom: none;
}

.senego-context-block .context-link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    text-decoration: none;
    color: var(--color-text, #000);
    transition: color 0.2s;
}

.senego-context-block .context-link:hover,
.senego-context-block .context-link:focus {
    color: var(--color-primary, var(--senego-color-primary));
}

.senego-context-block .context-link:hover .context-item-title,
.senego-context-block .context-link:focus .context-item-title {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.senego-context-block .context-item-title {
    flex: 1;
    font-size: 0.95rem;
    line-height: 1.4;
}

.senego-context-block .context-item-date {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--color-meta, var(--senego-color-meta));
    white-space: nowrap;
}

/* Responsive mobile */
@media (max-width: 640px) {
    .senego-context-block .context-section {
        padding: 0.875rem 1rem;
    }

    .senego-context-block .context-title {
        font-size: 1rem;
    }

    .senego-context-block .context-link {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .senego-context-block .context-item-title {
        font-size: 0.9rem;
    }

    .senego-context-block .context-item-date {
        font-size: 0.75rem;
    }
}

/* === Sidebar Dossiers widget === */
.senego-dossiers-sidebar.widget {
    margin: 0 0 1.5rem 0;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-top: 3px solid #d8232a;
    border-radius: 4px;
}
.senego-dossiers-sidebar .widget-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--senego-color-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f0f0f0;
}
.senego-dossiers-sidebar .widget-title svg {
    color: #d8232a;
    flex-shrink: 0;
}
.senego-dossiers-sidebar .dossiers-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.senego-dossiers-sidebar .dossier-item {
    margin: 0;
}
.senego-dossiers-sidebar .dossier-item a {
    text-decoration: none;
}
.senego-dossiers-sidebar .dossier-pill {
    display: inline-block;
    padding: 0.4rem 0.7rem;
    background: #f5f5f5;
    color: var(--senego-color-text);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}
.senego-dossiers-sidebar .dossier-item a:hover .dossier-pill,
.senego-dossiers-sidebar .dossier-item a:focus .dossier-pill {
    background: #d8232a;
    color: #fff;
}

/* === Dossiers — FAQ design system === */
.dossier-faq {
    margin: 2.5rem 0 1.5rem;
    padding: 1.5rem 1.5rem 1rem;
    background: linear-gradient(180deg, #fff 0%, var(--senego-color-surface-subtle) 100%);
    border: 1px solid var(--senego-color-border-line);
    border-radius: var(--soft-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.dossier-faq > h2 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1.25rem 0;
    padding: 0 0 0.85rem 0;
    border-bottom: 2px solid #d8232a;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--senego-color-text);
    line-height: 1.2;
}

.dossier-faq > h2::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d8232a'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    flex-shrink: 0;
}

.dossier-faq .faq-item {
    margin: 0 0 0.6rem 0;
    padding: 0;
    background: #fff;
    border: 1px solid var(--senego-color-border-line);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.dossier-faq .faq-item:hover {
    border-color: #d0d0d0;
}

.dossier-faq .faq-item[open] {
    border-color: #d8232a;
    box-shadow: 0 2px 8px rgba(216, 35, 42, 0.08);
}

.dossier-faq .faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 1rem 3rem 1rem 1.1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--senego-color-text);
    line-height: 1.4;
    position: relative;
    user-select: none;
    transition: color 0.18s ease, background-color 0.18s ease;
}

.dossier-faq .faq-item summary::-webkit-details-marker { display: none; }
.dossier-faq .faq-item summary::marker { content: ""; }

.dossier-faq .faq-item summary:hover,
.dossier-faq .faq-item summary:focus-visible {
    background-color: #fef7f7;
    color: #d8232a;
    outline: none;
}

.dossier-faq .faq-item summary::after {
    content: "";
    position: absolute;
    right: 1.1rem;
    top: 50%;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    background: #f5f5f5;
    border-radius: 50%;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23555'%3E%3Cpath d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    transition: transform 0.22s ease, background-color 0.18s ease;
}

.dossier-faq .faq-item[open] summary::after {
    transform: rotate(180deg);
    background-color: #d8232a;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E");
}

.dossier-faq .faq-item .faq-answer {
    padding: 0 1.1rem 1.1rem 1.1rem;
    color: #333;
    font-size: 0.95rem;
    line-height: 1.65;
    border-top: 1px solid #f3f3f3;
    margin-top: 0.5rem;
    padding-top: 0.85rem;
    animation: faq-fade-in 0.22s ease-out;
}

.dossier-faq .faq-item .faq-answer p:first-child { margin-top: 0; }
.dossier-faq .faq-item .faq-answer p:last-child  { margin-bottom: 0; }

@keyframes faq-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
    .dossier-faq { padding: 1.2rem 1rem 0.8rem; border-radius: 8px; }
    .dossier-faq > h2 { font-size: 1.2rem; }
    .dossier-faq .faq-item summary { padding: 0.85rem 2.6rem 0.85rem 0.9rem; font-size: 0.95rem; }
    .dossier-faq .faq-item .faq-answer { font-size: 0.9rem; padding-left: 0.9rem; padding-right: 0.9rem; }
}
/* Self-hosted Source Sans 3 (corps) + Public Sans (titres) — police du Design System — RGPD + CWV, no Google CDN */
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url('/wp-content/themes/senego/assets/fonts/sourcesans3-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url('/wp-content/themes/senego/assets/fonts/sourcesans3-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Source Sans 3';font-style:italic;font-weight:400;font-display:swap;src:url('/wp-content/themes/senego/assets/fonts/sourcesans3-400i-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Source Sans 3';font-style:italic;font-weight:400;font-display:swap;src:url('/wp-content/themes/senego/assets/fonts/sourcesans3-400i-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url('/wp-content/themes/senego/assets/fonts/sourcesans3-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url('/wp-content/themes/senego/assets/fonts/sourcesans3-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:700;font-display:swap;src:url('/wp-content/themes/senego/assets/fonts/sourcesans3-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:700;font-display:swap;src:url('/wp-content/themes/senego/assets/fonts/sourcesans3-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:900;font-display:swap;src:url('/wp-content/themes/senego/assets/fonts/sourcesans3-900-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:900;font-display:swap;src:url('/wp-content/themes/senego/assets/fonts/sourcesans3-900-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* Public Sans (titres) — self-hosted, OFL, RGPD + CWV, no Google CDN (2026-05-31) */
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/wp-content/themes/senego/assets/fonts/publicsans-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/wp-content/themes/senego/assets/fonts/publicsans-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/wp-content/themes/senego/assets/fonts/publicsans-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/wp-content/themes/senego/assets/fonts/publicsans-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/wp-content/themes/senego/assets/fonts/publicsans-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/wp-content/themes/senego/assets/fonts/publicsans-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* Header Senego
 * Variables (--orange, --ink, --shadow-*, --topbar-h, --mainbar-h…) définies dans
 * le Design System : assets/css/design-system/tokens.css (alias des tokens
 * --senego-*). Les surcharges responsive de --mainbar-h/--compact-h plus bas
 * (dans @media) restent ici car spécifiques au comportement du header.
 */

  /* Tout est SCOPÉ au header / modales / drawer — ne touche jamais le reste du site */
  .senego-header, .senego-header *,
  .modal-backdrop, .modal-backdrop *,
  .drawer, .drawer * { box-sizing: border-box; }

  .senego-header, .modal, .drawer {
    font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  .senego-header a, .modal a, .drawer a { color: inherit; text-decoration: none; }
  .senego-header button, .modal button, .drawer button { font: inherit; cursor: pointer; }

  /* Exception : les boutons à FOND PLEIN (orange/rouge/sombre) gardent un texte
     blanc lisible. Sans ça, le `color: inherit` ci-dessus les repasse en sombre
     (--ink) → texte noir illisible sur fond orange (cas CTA « Naviguer sans pub »,
     « Sans pub », « Se connecter »). */
  .senego-header a.cta-sub,    .modal a.cta-sub,    .drawer a.cta-sub,
  .senego-header a.compact-cta, .modal a.compact-cta, .drawer a.compact-cta,
  .senego-header a.submit-btn, .modal a.submit-btn, .drawer a.submit-btn,
  .senego-header a.senego-btn--primary, .modal a.senego-btn--primary, .drawer a.senego-btn--primary,
  .senego-header a.senego-btn--premium, .modal a.senego-btn--premium, .drawer a.senego-btn--premium,
  .senego-header a.btn-primary, .modal a.btn-primary, .drawer a.btn-primary {
    color: #fff;
  }

  /* ============ Header shell ============ */
  .senego-header {
    position: relative;
    z-index: 100;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }

  /* ============ Top bar (black) ============ */
  .topbar {
    background: var(--black);
    color: #fff;
    height: var(--topbar-h);
    font-size: 12.5px;
    letter-spacing: .01em;
    overflow: hidden;
  }
  .topbar-inner {
    max-width: 1320px;
    margin: 0 auto;
    height: 100%;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .topbar-left, .topbar-right { display: flex; align-items: center; gap: 18px; }

  /* Lien Contact dans la topbar droite (icône enveloppe + texte) */
  .topbar-contact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,.78);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s var(--ease);
  }
  .topbar-contact:hover { color: #fff; }
  .topbar-contact svg { opacity: .85; }

  /* Séparateur vertical entre Contact et réseaux sociaux */
  .topbar-sep {
    display: inline-block;
    width: 1px;
    height: 14px;
    background: rgba(255,255,255,.22);
  }

  /* Icônes réseaux sociaux dans la topbar */
  .topbar-social {
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  .topbar-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: rgba(255,255,255,.78);
    border-radius: 4px;
    transition: color .15s var(--ease), background .15s var(--ease);
  }
  .topbar-social a:hover { color: #fff; background: rgba(255,255,255,.08); }
  .topbar-social svg { display: block; }
  .topbar-item {
    color: rgba(255,255,255,.78);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }
  .topbar-item .dot { color: rgba(255,255,255,.32); }
  .topbar-item svg { opacity: .85; }
  .lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.78);
  }
  .lang-switch .active { color: #fff; font-weight: 500; }
  .lang-switch .sep { color: rgba(255,255,255,.28); }
  .premium-pill .check {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #ffd27a;
    color: #000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 900;
  }

  /* ============ Main bar ============ */
  .mainbar {
    height: var(--mainbar-h);
    display: flex;
    align-items: center;
    /* PAS d'overflow:hidden ici sinon le menu déroulant `.account-menu`
       (qui dépasse vers le bas pour s'afficher sous le bouton Premium)
       est clippé et masqué par la navbar orange en dessous. */
    overflow: visible;
    position: relative;
    z-index: 50;
  }
  .mainbar-inner {
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr minmax(280px, 520px) 1fr;
    align-items: center;
    gap: 32px;
  }
  /* Le logo garde TOUJOURS ses proportions : on neutralise le max-width:100%
     global des images (qui, dans un header serré, l'écrasait). La largeur suit
     la hauteur via width:auto — jamais de déformation. */
  .senego-header .logo img,
  .senego-header .compact-logo img { width: auto; max-width: none; }
  .logo {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    font-family: 'Source Sans 3', system-ui, sans-serif;
    font-weight: 900;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--ink);
    transition: font-size .3s var(--ease);
  }
  .logo .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--orange);
    margin-left: 4px;
    transform: translateY(-2px);
  }
  .logo .tagline {
    font-size: 10px;
    font-weight: 400;
    color: var(--meta);
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-left: 10px;
    transform: translateY(-2px);
    display: inline-block;
  }

  /* Search */
  .search {
    position: relative;
    width: 100%;
  }
  .search input {
    width: 100%;
    height: 44px;
    border: 1px solid var(--line-strong);
    background: var(--bg-soft);
    border-radius: 8px;
    padding: 0 14px 0 44px;
    font-size: 14.5px;
    font-family: inherit;
    color: var(--ink);
    transition: all .2s var(--ease);
  }
  .search input::placeholder { color: var(--meta); }
  .search input:focus {
    outline: none;
    border-color: var(--orange);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255,153,0,.12);
  }
  .search .search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--meta);
    pointer-events: none;
  }
  .search .kbd {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: var(--meta);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 2px 6px;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  }

  /* Right cluster */
  .main-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
  }
  /* Modales et menus utilisateur : migrés vers plugin senego-account/assets/css/modals.css */

  .icon-btn {
    width: 40px; height: 40px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .15s var(--ease);
    position: relative;
  }
  .icon-btn:hover { background: var(--bg-soft); border-color: var(--line); }

  /* ============ Nav bar (orange) ============ */
  .navbar {
    background: var(--orange);
    height: var(--navbar-h);
    overflow: hidden;
  }
  .navbar-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .nav-list {
    display: flex;
    align-items: stretch;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
  }
  .nav-list li { display: flex; }
  .nav-list a {
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 16px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .005em;
    position: relative;
    transition: background .15s var(--ease);
  }
  .nav-list a:hover { background: rgba(0,0,0,.08); }
  .nav-list a.active { background: rgba(0,0,0,.12); font-weight: 700; }
  .nav-list a.active::after {
    content: '';
    position: absolute;
    left: 12px; right: 12px; bottom: 0;
    height: 3px;
    background: #fff;
    border-radius: 2px 2px 0 0;
  }
  .nav-list .new-badge {
    margin-left: 6px;
    font-size: 10px;
    background: var(--red);
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
  }
  .nav-aux {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.85);
    font-size: 13px;
  }
  .nav-aux a {
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: 500;
    transition: background .15s var(--ease);
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .nav-aux a:hover { background: rgba(0,0,0,.1); }
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); }
    70% { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  }

  /* ============ Compact bar (barre fixe au scroll) ============ */
  .compactbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--compact-h);
    display: flex;
    align-items: center;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 2px 14px rgba(0,0,0,.06);
    z-index: 101;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform .3s var(--ease), opacity .25s var(--ease);
    will-change: transform;
  }
  .compactbar-inner {
    max-width: 1320px;
    margin: 0 auto;
    width: 100%;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .compact-logo {
    font-weight: 900;
    font-size: 20px;
    letter-spacing: -.02em;
    color: var(--ink);
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
  }
  .compact-logo .dot {
    width: 5px; height: 5px;
    background: var(--orange);
    border-radius: 50%;
    display: inline-block;
    margin-left: 2px;
    transform: translateY(-1px);
  }
  .compact-nav {
    display: flex;
    gap: 2px;
    flex: 1;
    overflow: hidden;
  }
  .compact-nav a {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
    transition: background .15s var(--ease);
    white-space: nowrap;
  }
  .compact-nav a:hover { background: var(--bg-soft); }
  .compact-nav a.active { color: var(--orange-dark); }
  .compact-right {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  /* Modales et menus utilisateur : migrés vers plugin senego-account/assets/css/modals.css */

  /* ============ Affichage du compact-bar au scroll ============ */
  .senego-header.is-compact .compactbar {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  /* Auto-hide directionnel (2026-06-21) : en mode compact, la barre se cache en
     DESCENDANT (écran épuré) et réapparaît en REMONTANT (menu à portée). La classe
     .is-hidden est ajoutée/retirée par header.js selon la direction du scroll.
     La transition est héritée de .compactbar → glissement fluide. */
  .senego-header.is-compact.is-hidden .compactbar {
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
  }
  .field { margin-bottom: 12px; }
  .field label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--meta);
    margin-bottom: 6px;
  }
  .field input {
    width: 100%;
    height: 44px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    padding: 0 14px;
    font: inherit;
    font-size: 14px;
    background: #fff;
    transition: all .15s var(--ease);
  }
  .field input:focus {
    outline: none;
    border-color: var(--orange);
    box-shadow: 0 0 0 4px rgba(255,153,0,.12);
  }
  /* Modales et menus utilisateur : migrés vers plugin senego-account/assets/css/modals.css */

  /* ============ Mobile ============ */
  .burger {
    display: none;
    width: 40px; height: 40px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    align-items: center; justify-content: center;
  }
  .mobile-only { display: none; }

  /* Mobile drawer */
  .drawer {
    position: fixed;
    top: 0; left: 0;
    width: min(86vw, 360px);
    /* Audit 2026-05-27 : 100dvh évite le bug Safari iOS où 100vh ignore l'URL bar. */
    height: 100vh;
    height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom);
    background: #fff;
    /* z-index très élevé : essaie de passer au-dessus des anchor ads AdSense
       (qui utilisent souvent 2147483647). Combiné avec le masquage CSS ci-dessous
       sous body.drawer-open pour garantir la visibilité du drawer. */
    z-index: 2147483646;
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    transition: transform .35s cubic-bezier(.25,.46,.45,.94);
    will-change: transform;
    display: flex;
    flex-direction: column;
  }
  .drawer.open { transform: translateX(0); }

  /* Quand le drawer est ouvert : masque les pubs AdSense flottantes
     (anchor ads, vignettes plein écran) qui couvriraient le bas du drawer.
     Cible les patterns standards d'anchor ads sans toucher aux pubs in-page. */
  body.drawer-open ins.adsbygoogle[data-anchor-status],
  body.drawer-open ins.adsbygoogle[data-anchor-shown],
  body.drawer-open iframe[id*="aswift_"][name*="aswift_"],
  body.drawer-open .google-anchor,
  body.drawer-open #google_ads_iframe_anchor,
  body.drawer-open ins.adsbygoogle[data-google-query-id][style*="position: fixed"] {
    display: none !important;
    visibility: hidden !important;
  }
  /* Filet de sécurité : padding-bottom dans la liste du drawer pour s'assurer
     que le dernier élément reste visible même si une pub passe entre les mailles. */
  .drawer-list { padding-bottom: 80px; }

  /* Mini topbar noire dans le drawer (Contact + réseaux sociaux), juste sous le logo */
  .drawer-topbar {
    background: var(--ink, var(--senego-color-text));
    color: rgba(255,255,255,.85);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
  }
  .drawer-topbar-contact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background .15s var(--ease);
  }
  .drawer-topbar-contact:hover { background: rgba(255,255,255,.08); }
  .drawer-topbar-contact svg { opacity: .85; flex-shrink: 0; }
  .drawer-topbar-social {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .drawer-topbar-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: rgba(255,255,255,.85);
    border-radius: 4px;
    transition: background .15s var(--ease), color .15s var(--ease);
  }
  .drawer-topbar-social a:hover {
    color: #fff;
    background: rgba(255,255,255,.1);
  }
  .drawer-topbar-social svg { display: block; }
  .drawer-head {
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
  }
  .drawer-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
  }
  .drawer-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 12px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  .drawer-list a:last-child { border-bottom: none; }
  .drawer-list a:hover { background: var(--bg-soft); }
  .drawer-foot {
    padding: 16px 20px;
    border-top: 1px solid var(--line);
    background: var(--bg-soft);
  }
  .drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.4);
    /* z-index très élevé : passer au-dessus des anchor ads AdSense (juste sous le drawer). */
    z-index: 2147483645;
    opacity: 0; pointer-events: none;
    transition: opacity .25s var(--ease);
  }
  .drawer-backdrop.open { opacity: 1; pointer-events: auto; }

  @media (max-width: 980px) {
    .topbar-item.weather, .topbar-item.date { display: none; }
    .topbar-inner { padding: 0 16px; }
    .mainbar-inner {
      grid-template-columns: auto 1fr auto;
      gap: 12px;
      padding: 0 16px;
    }
    .logo { font-size: 26px; }
    .logo .tagline { display: none; }
    /* '.search { display:none }' RETIRÉ le 2026-06-01 : ce sélecteur nu masquait
       AUSSI <body class="search"> (classe ajoutée par WordPress sur les pages de
       résultats de recherche) → page de recherche TOUTE BLANCHE sur mobile. Le
       champ de recherche desktop (.search.desktop-only) reste masqué en mobile
       par la règle .desktop-only ci-dessous. */
    .navbar { display: none; }
    .burger { display: inline-flex; }
    /* .cta-sub responsive : migré vers plugin senego-account/assets/css/modals.css */
    .icon-btn.search-mobile { display: inline-flex; }
    .mobile-only { display: inline-flex; }
    .desktop-only { display: none !important; }
    .compactbar-inner { padding: 0 16px; }
    .compact-nav { display: none; }
    :root { --mainbar-h: 64px; --compact-h: 56px; }
  }
  @media (min-width: 981px) {
    .icon-btn.search-mobile { display: none; }
    .burger { display: none; }
  }
  /* ─── Mobile (≤ 620 px) : 70-75 % de l'audience Senego ─────
   * État NON RÉTRACTÉ (avant scroll) : on dégraisse la mainbar et on cache la topbar
   * noire (FR/EN seul, pas utile sur petit écran). Toutes les actions utilisateur
   * restent accessibles via le drawer (burger) ou les pages dédiées /abonnement /connexion. */
  @media (max-width: 620px) {
    /* Topbar noire conservée sur mobile — version « icônes uniquement »
       (textes cachés pour gain de place, icônes restent visibles). */
    .topbar { height: 34px; font-size: 11px; }
    .topbar-inner { padding: 0 10px; gap: 8px; }
    .topbar-left, .topbar-right { gap: 10px; }

    /* Cache les LIBELLÉS texte (date longue, "Dakar 28°C") — on garde l'icône SVG */
    .topbar-label { display: none; }
    /* Cache les séparateurs `·` qui n'ont plus de sens sans textes */
    .topbar-item.dot-sep { display: none; }
    /* Cache la langue FR/EN (raccourci pas utilisable utilement sur petit écran) */
    .topbar-item.lang { display: none; }

    /* Lien Contact : on cache le mot "Contact", on garde l'icône enveloppe */
    .topbar-contact span { display: none; }
    .topbar-contact { padding: 2px; }

    /* Séparateur vertical plus discret entre Contact et sociaux */
    .topbar-sep { height: 12px; }

    /* Icônes sociales un peu plus compactes pour tout faire tenir */
    .topbar-social { gap: 8px; }
    .topbar-social a { width: 22px; height: 22px; }

    /* Mainbar : hauteur réduite, padding/gap resserrés, logo plus petit */
    :root { --mainbar-h: 56px; }
    .mainbar { height: 56px; }
    .mainbar-inner { padding: 0 12px; gap: 8px; }
    /* Logo très réduit sur mobile, AVANT et APRÈS défilement (proportions
       conservées : width auto + max-width:none, ratio 5.75 intact). */
    .logo img,
    .compactbar .compact-logo img { height: 18px !important; }

    /* Le CTA « Soutenir Senego » reste VISIBLE sur mobile (point d'entrée du
     * tunnel) ; seul le libellé "Se connecter" est masqué (devient une icône). */
    .main-right .topbar-login .label-full { display: none; }

    /* Avatar / badge Premium : compactés mais conservés (raccourci visuel vers /mon-compte) */
    .main-right .premium-badge-main {
      height: 32px; padding: 0 10px 0 4px; font-size: 12px; gap: 6px;
    }
    .main-right .premium-badge-main .av { width: 24px; height: 24px; font-size: 10px; }
    .main-right .avatar { width: 32px; height: 32px; font-size: 11px; }
    .main-right { gap: 6px; }
  }

/* Visibilité par état utilisateur (.when-anon/.when-loggedin/.when-premium) :
   migrée vers plugin senego-account/assets/css/modals.css */

/* ============ Overlay de recherche ============ */
.search-overlay {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 130;
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  padding: 18px 24px;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform .28s var(--ease), opacity .2s var(--ease);
}
.search-overlay.open { transform: translateY(0); opacity: 1; visibility: visible; }
/* Ligne : [ formulaire (champ + bouton Rechercher) ] [ bouton fermer ].
   Le bouton fermer est HORS du formulaire → toujours visible, jamais poussé
   hors écran sur mobile. */
.search-overlay-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.search-overlay-form {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--senego-color-border, #e0e0e0);
  border-radius: var(--senego-radius-md, 10px);
  background: var(--senego-color-surface, #fff);
  padding: 0 6px 0 14px;
  height: 52px;
}
.search-overlay-form:focus-within {
  border-color: var(--senego-color-primary, #ff9900);
  box-shadow: 0 0 0 4px rgba(255,153,0,.14);
}
.search-overlay input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font: inherit; font-size: 16px; color: var(--senego-color-text, #1a1a1a);
}
.search-overlay input::placeholder { color: var(--senego-color-muted, #6b7280); }

/* Bouton « Rechercher » (variante primaire du design system) */
.search-overlay-submit {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px; padding: 0 18px;
  background: var(--senego-color-primary, #ff9900);
  color: #fff; border: 0;
  border-radius: var(--senego-radius-sm, 8px);
  font: inherit; font-weight: 600; font-size: 14px; line-height: 1;
  cursor: pointer; white-space: nowrap;
  transition: background .15s var(--ease, ease);
}
.search-overlay-submit svg { width: 18px; height: 18px; flex-shrink: 0; }
.search-overlay-submit:hover { background: var(--senego-color-primary-dark, #e68a00); }

/* Bouton fermer — toujours visible, à droite de la carte */
.search-overlay-close {
  flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--senego-color-border, #e0e0e0);
  background: var(--senego-color-surface, #fff);
  color: var(--senego-color-muted, #6b7280);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.search-overlay-close:hover {
  background: var(--senego-color-surface-muted, #f8f9fa);
  color: var(--senego-color-text, #1a1a1a);
  border-color: var(--senego-color-border-strong, #d8d8d8);
}

/* Mobile : « Rechercher » réduit à son icône → le champ ET la croix restent
   toujours visibles et bien espacés. */
@media (max-width: 600px) {
  .search-overlay { padding: 12px 14px; }
  .search-overlay-inner { gap: 8px; }
  .search-overlay-form { height: 48px; gap: 6px; padding: 0 6px 0 12px; }
  .search-overlay-submit { width: 40px; height: 40px; padding: 0; gap: 0; }
  .search-overlay-submit-text { display: none; }
  .search-overlay-close { width: 42px; height: 42px; }
}

/* ============================================================================
   Boutons de validation de la recherche (2026-06-01)
   Un utilisateur doit pouvoir LANCER la recherche au clic, pas seulement avec
   Entrée. Bouton orange design system, dans la barre desktop ET dans l'overlay.
   ============================================================================ */
/* La barre desktop est le repère de positionnement du bouton (absolu). */
.search { position: relative; }
.search .search-submit {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--orange, #ff9900);
  color: #fff;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  z-index: 2;
  transition: background .15s var(--ease, ease);
}
.search .search-submit:hover { background: #e68a00; }
/* Plus d'icône à gauche → padding gauche normal ; place à droite pour le bouton. */
.search input { padding-left: 14px; padding-right: 54px; }
/* (Les styles de l'overlay sont dans le bloc « Overlay de recherche (design system) ».) */
/* Senego — Styles du footer (« archives par année »).
 * Extrait du <style> inline de footer.php pour permettre la mise en cache
 * navigateur et la maintenabilité. */

.archives-band {
	background: #222;
	padding: 20px 0;
	border-top: 3px solid var(--color-primary, var(--senego-color-primary));
}
.archives-band .container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
}
.archives-title {
	color: #fff;
	font-family: 'Source Sans 3', system-ui, sans-serif;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	margin: 0 0 12px;
	letter-spacing: 0.5px;
}
.archives-years {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.archive-year-link {
	display: inline-block;
	padding: 6px 14px;
	background: #333;
	color: #ccc;
	text-decoration: none;
	border-radius: 4px;
	font-size: 0.85rem;
	font-weight: 600;
	font-family: "Source Sans 3", sans-serif;
	transition: background 0.2s, color 0.2s;
}
.archive-year-link:hover {
	background: var(--color-primary, var(--senego-color-primary));
	color: #fff;
}

@media (max-width: 767px) {
	.archives-years { gap: 6px; }
	.archive-year-link { padding: 5px 10px; font-size: 0.8rem; }
}
/* Senego — Styles du dropdown « Services » + barre Services homepage.
 * Extrait du <style id="services-dropdown-css"> précédemment inline dans
 * inc/services-dropdown.php (hook wp_head).
 * Enqueued globalement depuis functions.php (senego_header_assets). */

/* Services Dropdown (Desktop) */
.services-dropdown { position: relative; }
.services-chevron { vertical-align: middle; margin-left: 2px; transition: transform 0.2s; }
.services-dropdown:hover .services-chevron { transform: rotate(180deg); }
.services-mega-menu {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	width: 320px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 6px 24px rgba(0,0,0,0.12);
	border: 1px solid var(--senego-color-border);
	z-index: 2000;
	padding: 0.5rem 0;
	padding-top: 0.8rem;
}
.services-mega-menu::before {
	content: "";
	position: absolute;
	top: -15px;
	left: 0;
	right: 0;
	height: 15px;
}
.services-dropdown:hover .services-mega-menu { display: block; }
.mega-menu-grid { display: flex; flex-direction: column; }
.mega-item {
	display: flex !important;
	align-items: center;
	gap: 0.7rem;
	padding: 0.55rem 1.2rem !important;
	text-decoration: none;
	color: #333 !important;
	background: transparent !important;
	font-size: 0.88rem !important;
	font-weight: 400 !important;
	font-family: "Source Sans 3", sans-serif !important;
	text-transform: none !important;
	border-radius: 0 !important;
	transition: background 0.15s, color 0.15s;
}
.mega-item:hover { background: #f8f8f8 !important; color: var(--senego-color-primary) !important; }
.mega-icon { font-size: 1.1rem; flex-shrink: 0; width: 20px; text-align: center; }
.mega-label { font-family: "Source Sans 3", sans-serif; text-transform: none; }
.mega-menu-footer { border-top: 1px solid #f0f0f0; margin-top: 0.2rem; padding: 0.5rem 1.2rem; }
.mega-see-all {
	display: block;
	color: var(--senego-color-primary);
	font-weight: 600;
	font-size: 0.85rem;
	text-decoration: none;
	padding: 0.5rem 0;
	text-align: center;
	border-radius: 5px;
	transition: background 0.2s;
}
.mega-see-all:hover { background: #fff5e6; }

/* Hide mega-menu inside drawer (mobile) */
.drawer-navigation .services-mega-menu { display: none !important; }
.drawer-navigation .services-chevron { display: none; }

@media (max-width: 991px) {
	.services-mega-menu { display: none !important; }
}

/* === Services Bar (Homepage) === */
.services-bar-section {
	padding: 10px 0;
}
.services-bar-section .container {
	width: 100%;
	margin: 0 auto;
	padding: 0 1rem;
}
.services-bar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.6rem;
	border-bottom: 1px solid #e0dbdb;
}
.services-bar-title {
	font-family: var(--senego-font-heading);
	font-size: 0.95rem;
	font-weight: 700;
	text-transform: none;
	color: var(--senego-color-heading);
	margin: 0 auto;
}
.services-bar-all {
	font-size: 0.8rem;
	color: var(--senego-color-primary);
	font-weight: 600;
	text-decoration: none;
}
.services-bar-all:hover { text-decoration: underline; }
.services-bar-track {
	display: flex;
	gap: 0.4rem;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 2px;
}
.services-bar-track::-webkit-scrollbar { display: none; }
.services-bar-item {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0.7rem;
	background: #f8f8f8;
	border: 1px solid #d8d7d7;
	border-radius: 8px;
	text-decoration: none;
	color: #333;
	white-space: nowrap;
	font-size: 0.78rem;
	font-weight: 500;
	flex-shrink: 0;
}
.services-bar-item:hover {
	background: #fff5e6;
	border-color: var(--senego-color-primary);
	color: var(--senego-color-primary);
}
.services-bar-icon { font-size: 0.95rem; }
.services-bar-label { font-family: "Source Sans 3", sans-serif; }

@media (max-width: 767px) {
	.services-bar-section { margin: 0.5rem 0; padding: 0.6rem 0.8rem; border-radius: 8px; }
	.services-bar-item { padding: 0.35rem 0.6rem; font-size: 0.72rem; }
}
/* Senego — Styles du widget « Série actuelle » dans la sidebar.
 * Extrait du <style> inline de template-parts/series-sidebar.php.
 * Enqueued conditionnellement sur les pages d'article (single).
 */

.series-sidebar-block {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.2rem;
}
.series-sidebar-block .ssb-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--senego-color-primary);
}
.series-sidebar-block .ssb-title {
    font-family: var(--senego-font-heading);
    font-size: 1rem;
    font-weight: 700;
    text-transform: none;
    color: var(--senego-color-heading);
    margin: 0;
}
.series-sidebar-block .ssb-icon {
    font-size: 1.2rem;
}
.series-sidebar-block .ssb-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.series-sidebar-block .ssb-item {
    margin: 0;
    padding: 0;
}
.series-sidebar-block .ssb-item + .ssb-item {
    border-top: 1px solid #f2f2f2;
}
.series-sidebar-block .ssb-link {
    display: flex;
    gap: 0.6rem;
    padding: 0.5rem 0.3rem;
    text-decoration: none;
    color: #333;
    border-radius: 5px;
    transition: background 0.15s;
}
.series-sidebar-block .ssb-link:hover {
    background: #fff5e6;
}
.series-sidebar-block .ssb-thumb {
    flex-shrink: 0;
    width: 80px;
    height: 50px;
    border-radius: 4px;
    overflow: hidden;
    background: #eee;
}
.series-sidebar-block .ssb-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.series-sidebar-block .ssb-info {
    flex: 1;
    min-width: 0;
}
.series-sidebar-block .ssb-ep-title {
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    color: #222;
    margin: 0 0 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.series-sidebar-block .ssb-meta {
    font-size: 0.7rem;
    color: #888;
}
.series-sidebar-block .ssb-meta span + span::before {
    content: " · ";
}
.series-sidebar-block .ssb-cta {
    display: block;
    margin-top: 0.8rem;
    padding: 0.55rem 1rem;
    background: var(--senego-color-primary);
    color: #fff;
    font-family: 'Source Sans 3', system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    border-radius: 20px;
    transition: background 0.2s, transform 0.15s;
    letter-spacing: 0.3px;
}
.series-sidebar-block .ssb-cta:hover {
    background: var(--senego-color-primary-dark);
    transform: translateY(-1px);
}
/* Senego — Styles du widget « Radios Senegal » dans la sidebar.
 * Extrait du <style> inline de template-parts/radios-sidebar.php.
 * Enqueued conditionnellement sur les pages d'article (single).
 */

.radios-sidebar-block {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.2rem;
}
.radios-sidebar-block .rsb-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--senego-color-primary);
}
.radios-sidebar-block .rsb-title {
    font-family: var(--senego-font-heading);
    font-size: 1rem;
    font-weight: 700;
    text-transform: none;
    color: var(--senego-color-heading);
    margin: 0;
}
.radios-sidebar-block .rsb-icon {
    font-size: 1.2rem;
}
.radios-sidebar-block .rsb-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.radios-sidebar-block .rsb-item {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.2rem;
}
.radios-sidebar-block .rsb-item + .rsb-item {
    border-top: 1px solid #f2f2f2;
}
.radios-sidebar-block .rsb-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: #333;
    border-radius: 5px;
    transition: background 0.15s;
    padding: 2px 4px;
}
.radios-sidebar-block .rsb-link:hover {
    background: #fff5e6;
}
.radios-sidebar-block .rsb-logo {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.radios-sidebar-block .rsb-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.radios-sidebar-block .rsb-info {
    flex: 1;
    min-width: 0;
}
.radios-sidebar-block .rsb-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #222;
    margin: 0;
    line-height: 1.2;
}
.radios-sidebar-block .rsb-freq {
    font-size: 0.72rem;
    color: var(--color-primary, var(--senego-color-primary));
    font-weight: 600;
}
.radios-sidebar-block .rsb-play {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-primary, var(--senego-color-primary));
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.15s;
}
.radios-sidebar-block .rsb-play:hover {
    background: var(--senego-color-primary-dark);
    transform: scale(1.1);
}
.radios-sidebar-block .rsb-play.playing {
    background: #d32f2f;
    animation: rsb-pulse 2s infinite;
}
.radios-sidebar-block .rsb-play.playing:hover {
    background: #b71c1c;
}
@keyframes rsb-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(211,47,47,0.4); }
    50% { box-shadow: 0 0 0 6px rgba(211,47,47,0); }
}
.radios-sidebar-block .rsb-play svg {
    width: 14px;
    height: 14px;
}
.radios-sidebar-block .rsb-cta {
    display: block;
    margin-top: 0.8rem;
    padding: 0.55rem 1rem;
    background: var(--senego-color-primary);
    color: #fff;
    font-family: 'Source Sans 3', system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    border-radius: 20px;
    transition: background 0.2s, transform 0.15s;
    letter-spacing: 0.3px;
}
.radios-sidebar-block .rsb-cta:hover {
    background: var(--senego-color-primary-dark);
    transform: translateY(-1px);
}

/* Mini floating player for sidebar radio */
#rsb-player {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--senego-color-text);
    color: #fff;
    padding: 8px 16px;
    z-index: 9999;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
    align-items: center;
    gap: 10px;
}
#rsb-player.active { display: flex; }
#rsb-player .rsb-p-logo {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    overflow: hidden;
}
#rsb-player .rsb-p-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#rsb-player .rsb-p-name {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#rsb-player .rsb-p-btn {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 4px;
}
#rsb-player .rsb-p-btn:hover { opacity: 0.8; }
/* ============================================================================
   COMPOSANT — Cartes d'articles dans les listes (home / archive / recherche)
   Source : maquette validée (preview _preview_cards.html). Valeurs reprises
   À L'IDENTIQUE — ne pas réinventer (arrondi 16px, ombre douce, line-clamp 3,
   skeleton frugal). Mappé sur les classes réelles de template-parts/content-post.php :
     .post-card        ← .card
     .post-thumbnail   ← .thumb
     .entry-container  ← .body
     .card-category    ← .cat
     .entry-title      ← .title
     .entry-footer     ← .meta
   ============================================================================ */
.posts-container{
  --accent:var(--senego-color-accent);
  --ink:var(--senego-color-heading);
  --muted:var(--senego-color-muted);
  --card-radius:8px;
  --card-shadow:0 1px 2px rgba(16,24,40,.06), 0 6px 16px rgba(16,24,40,.06);
  --card-shadow-hover:0 10px 28px rgba(16,24,40,.14);
  --sk:#e9ebee;
  display:flex;
  flex-direction:column;
  gap:var(--card-gap);
}

/* ── Carte de base ── */
.posts-container .post-card{
  background:#fff;
  border:0;
  border-radius:var(--card-radius);
  overflow:hidden;
  box-shadow:var(--card-shadow);
  display:flex;
  margin:0;
  transition:box-shadow .18s ease, transform .18s ease;
}
.posts-container .post-card:hover{
  box-shadow:var(--card-shadow-hover);
  transform:translateY(-2px);
}
.posts-container .post-card .post-thumbnail{
  position:relative;
  overflow:hidden;
  background:var(--sk);
  flex:none;
  margin:0;
  border-radius:0;
}
.posts-container .post-card .post-thumbnail a{display:block;height:100%}
.posts-container .post-card .post-thumbnail-container{
  width:100%;height:100%;min-height:0;
}
.posts-container .post-card .post-thumbnail img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease;
}
.posts-container .post-card:hover .post-thumbnail img{transform:scale(1.05)}

.posts-container .post-card .entry-container{
  display:flex;flex-direction:column;gap:7px;flex:1;min-width:0;
}
.posts-container .post-card .entry-header{margin:0}
.posts-container .post-card .card-category{
  display:block;
  color:var(--accent);font-size:11.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;line-height:1;
}
.posts-container .post-card .entry-title{
  font-size:17px;line-height:1.3;font-weight:700;margin:0;
  text-transform:none;            /* annule le h2 uppercase global du thème */
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.posts-container .post-card .entry-title a{color:var(--ink)}
.posts-container .post-card .entry-footer{
  margin-top:auto;display:flex;align-items:center;gap:14px;
  font-size:12px;color:var(--muted);padding-top:2px;border:0;
}
.posts-container .post-card .entry-footer .card-author,
.posts-container .post-card .entry-footer .card-time,
.posts-container .post-card .entry-footer .card-comments{
  display:inline-flex;align-items:center;gap:5px;
}
.posts-container .post-card .entry-footer svg{
  width:13px;height:13px;stroke:var(--muted);fill:none;stroke-width:2;
}

/* ── HERO : 1 carte tous les 5 (la plus vue, placée en tête de groupe) ── */
.posts-container > article.post-card:nth-of-type(5n+1){
  flex-direction:column;
}
.posts-container > article.post-card:nth-of-type(5n+1) .post-thumbnail{
  width:100%;aspect-ratio:16/9;
}
.posts-container > article.post-card:nth-of-type(5n+1) .entry-container{
  padding:16px 20px 18px;gap:10px;
}
.posts-container > article.post-card:nth-of-type(5n+1) .entry-title{
  font-size:26px;line-height:1.22;
}

/* ── STANDARD : horizontale, grande image à gauche ── */
.posts-container > article.post-card:not(:nth-of-type(5n+1)){
  flex-direction:row;padding:11px;gap:16px;align-items:stretch;
}
.posts-container > article.post-card:not(:nth-of-type(5n+1)) .post-thumbnail{
  width:240px;aspect-ratio:3/2;border-radius:8px;
}
.posts-container > article.post-card:not(:nth-of-type(5n+1)) .entry-container{
  padding:3px 6px 3px 0;
}
.posts-container > article.post-card:not(:nth-of-type(5n+1)) .entry-title{
  font-size:18px;
}

/* ── SKELETON LOADER (animation frugale, GPU-composited) ──
   Balayage via transform:translateX (composé GPU, aucun repaint de layout).
   Pause hors écran / onglet caché (.sk-paused). Retiré du DOM par
   infinite-scroll.js dès l'arrivée du contenu : zéro consommation permanente. */
/* Carte-squelette : <div> (jamais comptée par :nth-of-type des <article>),
   format horizontal identique aux cartes standard. */
.posts-container .post-card.skeleton{
  pointer-events:none;box-shadow:var(--card-shadow);
  flex-direction:row;padding:11px;gap:16px;align-items:stretch;
}
.posts-container .post-card.skeleton .post-thumbnail{
  width:240px;aspect-ratio:3/2;border-radius:8px;flex:none;
}
.posts-container .post-card.skeleton .entry-container{
  display:flex;flex-direction:column;flex:1;min-width:0;padding:3px 6px 3px 0;
}
.sk-el{position:relative;background:var(--sk);border-radius:6px;overflow:hidden}
.sk-el::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:sk-sweep 1.4s ease-in-out infinite;will-change:transform;
}
@keyframes sk-sweep{100%{transform:translateX(100%)}}
.posts-container .post-card.skeleton .post-thumbnail{background:var(--sk)}
.sk-line{height:13px;margin-bottom:7px}
.sk-cat{height:10px;width:34%;margin-bottom:10px}
.sk-meta{height:10px;width:55%;margin-top:8px}
.posts-container.sk-paused .sk-el::after{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){
  .sk-el::after{animation:none;background:none}
}

/* ── MOBILE (≤767px) ── */
@media (max-width:767px){
  .posts-container > article.post-card:nth-of-type(5n+1) .entry-title{font-size:19px}
  .posts-container > article.post-card:not(:nth-of-type(5n+1)){border-radius:8px;padding:8px;gap:12px}
  .posts-container > article.post-card:not(:nth-of-type(5n+1)) .post-thumbnail{width:116px;aspect-ratio:1/1}
  .posts-container > article.post-card:not(:nth-of-type(5n+1)) .entry-title{font-size:15px}
  .posts-container > article.post-card:not(:nth-of-type(5n+1)) .card-category{font-size:10.5px}
  .posts-container .post-card.skeleton{border-radius:8px;padding:8px;gap:12px}
  .posts-container .post-card.skeleton .post-thumbnail{width:116px;aspect-ratio:1/1}
}