/* =============================================================================
   Moto-GT Articles Publics — Feuille de style front-end
   Style cohérent avec le thème WordPress de moto-gt.fr
   ============================================================================= */

/* --- Variables (reprend les couleurs du thème Moto-GT) --- */
:root {
    --motogt-primary:      #d32f2f;   /* Rouge Moto-GT */
    --motogt-primary-dark: #b71c1c;
    --motogt-secondary:    #546e7a;   /* Gris ardoise */
    --motogt-text:         #333333;
    --motogt-bg:           #f9f9f9;
    --motogt-border:       #e0e0e0;
    --motogt-success:      #2e7d32;
    --motogt-warning:      #f57c00;
    --motogt-error:        #c62828;
    --motogt-radius:       4px;
    --motogt-shadow:       0 1px 3px rgba(0,0,0,.12);
}

/* --- Conteneur principal --- */
.motogt-ap-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 0 2em;
    font-family: inherit;
    color: var(--motogt-text);
}

/* --- Titres --- */
.motogt-ap-form-title {
    font-size: 1.6em;
    margin-bottom: .4em;
    color: var(--motogt-text);
    border-bottom: 2px solid var(--motogt-primary);
    padding-bottom: .3em;
}

.motogt-ap-intro {
    background: #e8f5e9;
    border-left: 4px solid #4caf50;
    padding: .75em 1em;
    margin-bottom: 1.5em;
    font-size: .92em;
    border-radius: 0 var(--motogt-radius) var(--motogt-radius) 0;
}

/* --- Notices / Alertes --- */
.motogt-ap-notice {
    padding: .85em 1.1em;
    margin-bottom: 1.2em;
    border-radius: var(--motogt-radius);
    font-size: .92em;
    line-height: 1.5;
}

.motogt-ap-notice--success {
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    color: var(--motogt-success);
}

.motogt-ap-notice--error {
    background: #ffebee;
    border: 1px solid #ef9a9a;
    color: var(--motogt-error);
}

.motogt-ap-notice--warning {
    background: #fff8e1;
    border: 1px solid #ffe082;
    color: var(--motogt-warning);
}

.motogt-ap-login-required {
    text-align: center;
    padding: 2em;
}

/* --- Formulaire --- */
.motogt-ap-form {
    background: #fff;
    padding: 1.8em;
    border: 1px solid var(--motogt-border);
    border-radius: var(--motogt-radius);
    box-shadow: var(--motogt-shadow);
}

.motogt-ap-field {
    margin-bottom: 1.3em;
}

.motogt-ap-label {
    display: block;
    font-weight: 600;
    margin-bottom: .4em;
    font-size: .95em;
    color: #444;
}

.motogt-ap-hint {
    font-weight: 400;
    font-size: .85em;
    color: #777;
    margin-left: .4em;
}

.motogt-ap-required {
    color: var(--motogt-primary);
    margin-left: 2px;
}

/* Champs texte & select */
.motogt-ap-input,
.motogt-ap-select,
.motogt-ap-textarea {
    width: 100%;
    padding: .55em .8em;
    font-size: .95em;
    border: 1px solid #ccc;
    border-radius: var(--motogt-radius);
    background: #fff;
    color: var(--motogt-text);
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
    font-family: inherit;
}

.motogt-ap-input:focus,
.motogt-ap-select:focus,
.motogt-ap-textarea:focus {
    outline: none;
    border-color: var(--motogt-primary);
    box-shadow: 0 0 0 3px rgba(211, 47, 47, .15);
}

.motogt-ap-textarea--short {
    resize: vertical;
    min-height: 80px;
}

/* Compteur de caractères */
.motogt-ap-char-count {
    display: block;
    text-align: right;
    font-size: .78em;
    color: #888;
    margin-top: 3px;
}

.motogt-ap-char-count.near-limit { color: var(--motogt-warning); }
.motogt-ap-char-count.at-limit   { color: var(--motogt-error); font-weight: 600; }

/* Éditeur TinyMCE */
.motogt-ap-editor-wrap .wp-editor-wrap {
    border: 1px solid #ccc;
    border-radius: var(--motogt-radius);
    overflow: hidden;
}

/* Image à la une */
.motogt-ap-thumbnail-wrap {
    display: flex;
    align-items: center;
    gap: 1em;
    flex-wrap: wrap;
}

.motogt-ap-thumbnail-wrap img {
    max-width: 120px;
    height: auto;
    border-radius: var(--motogt-radius);
    border: 1px solid var(--motogt-border);
}

/* Checkbox */
.motogt-ap-field--checkbox {
    margin-top: 1.5em;
}

.motogt-ap-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: .6em;
    cursor: pointer;
    font-size: .92em;
    line-height: 1.5;
}

.motogt-ap-checkbox {
    margin-top: .2em;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--motogt-primary);
}

/* --- Boutons --- */
.motogt-ap-actions {
    display: flex;
    gap: .8em;
    flex-wrap: wrap;
    margin-top: 1.5em;
    padding-top: 1.2em;
    border-top: 1px solid var(--motogt-border);
}

.motogt-ap-btn {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .55em 1.3em;
    font-size: .92em;
    font-weight: 600;
    border: none;
    border-radius: var(--motogt-radius);
    cursor: pointer;
    text-decoration: none;
    transition: background .2s, transform .1s;
    font-family: inherit;
    line-height: 1.4;
}

.motogt-ap-btn:active { transform: scale(.98); }

.motogt-ap-btn--primary {
    background: var(--motogt-primary);
    color: #fff;
}
.motogt-ap-btn--primary:hover {
    background: var(--motogt-primary-dark);
    color: #fff;
    text-decoration: none;
}

.motogt-ap-btn--secondary {
    background: #fff;
    color: var(--motogt-secondary);
    border: 1px solid var(--motogt-secondary);
}
.motogt-ap-btn--secondary:hover {
    background: var(--motogt-secondary);
    color: #fff;
    text-decoration: none;
}

.motogt-ap-btn--danger {
    background: #fff;
    color: var(--motogt-error);
    border: 1px solid var(--motogt-error);
}
.motogt-ap-btn--danger:hover {
    background: var(--motogt-error);
    color: #fff;
    text-decoration: none;
}

.motogt-ap-btn--sm {
    padding: .3em .8em;
    font-size: .83em;
}

.motogt-ap-btn[disabled],
.motogt-ap-btn.is-loading {
    opacity: .65;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- "Mes articles" --- */
.motogt-ap-mes-articles-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .8em;
    margin-bottom: 1.2em;
}

.motogt-ap-empty {
    text-align: center;
    padding: 3em 2em;
    background: #fff;
    border: 1px solid var(--motogt-border);
    border-radius: var(--motogt-radius);
    color: #666;
}

.motogt-ap-table-wrap {
    overflow-x: auto;
}

.motogt-ap-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9em;
    background: #fff;
    border: 1px solid var(--motogt-border);
    border-radius: var(--motogt-radius);
    overflow: hidden;
    box-shadow: var(--motogt-shadow);
}

.motogt-ap-table th,
.motogt-ap-table td {
    padding: .7em .9em;
    text-align: left;
    border-bottom: 1px solid var(--motogt-border);
    vertical-align: middle;
}

.motogt-ap-table thead th {
    background: #f5f5f5;
    font-weight: 700;
    color: #444;
    font-size: .85em;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.motogt-ap-table tbody tr:hover { background: #fafafa; }
.motogt-ap-table tbody tr:last-child td { border-bottom: none; }

.motogt-ap-col-title a {
    color: var(--motogt-primary);
    font-weight: 600;
    text-decoration: none;
}
.motogt-ap-col-title a:hover { text-decoration: underline; }

.motogt-ap-col-actions {
    white-space: nowrap;
    display: flex;
    gap: .4em;
    flex-wrap: wrap;
}

/* Badges de statut */
.motogt-ap-badge {
    display: inline-block;
    padding: .2em .65em;
    border-radius: 999px;
    font-size: .8em;
    font-weight: 600;
    white-space: nowrap;
}

.motogt-ap-badge--publish { background: #e8f5e9; color: #2e7d32; }
.motogt-ap-badge--pending { background: #fff8e1; color: #f57c00; }
.motogt-ap-badge--draft   { background: #f5f5f5; color: #555; }
.motogt-ap-badge--trash   { background: #ffebee; color: #c62828; }

/* Légende */
.motogt-ap-legend {
    margin-top: 1em;
    font-size: .82em;
    color: #666;
}
.motogt-ap-legend .motogt-ap-badge {
    margin: 0 .2em;
}

/* Ligne supprimée (animation) */
.motogt-ap-table tr.is-deleting {
    opacity: 0;
    transition: opacity .4s;
}

/* --- Liste articles membres (style /articles/) --- */
.motogt-membres-liste article {
    margin-bottom: 2em;
    padding-bottom: 2em;
    border-bottom: 1px solid var(--motogt-border);
}

.motogt-membres-liste article:last-child {
    border-bottom: none;
}

/* --- Cartes de modération --- */
.motogt-ap-moderation-card {
    background: #fff;
    border: 1px solid var(--motogt-border);
    border-radius: var(--motogt-radius);
    box-shadow: var(--motogt-shadow);
    margin-bottom: 1.5em;
    overflow: hidden;
    transition: opacity .4s;
}

.motogt-ap-moderation-card--highlight {
    border-color: var(--motogt-primary);
    box-shadow: 0 0 0 3px rgba(211, 47, 47, .2);
}

.motogt-ap-moderation-card-header {
    background: #f5f5f5;
    padding: .9em 1.2em;
    border-bottom: 1px solid var(--motogt-border);
}

.motogt-ap-moderation-card-header h3 {
    margin: 0 0 .4em;
    font-size: 1.1em;
    color: var(--motogt-text);
}

.motogt-ap-moderation-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .8em;
    font-size: .82em;
    color: #666;
}

.motogt-ap-moderation-card-excerpt {
    padding: 1em 1.2em;
    font-size: .92em;
    color: #555;
    border-bottom: 1px solid var(--motogt-border);
}

.motogt-ap-moderation-content {
    margin-top: .5em;
    line-height: 1.6;
}

.motogt-ap-moderation-card-actions {
    padding: .8em 1.2em;
    display: flex;
    gap: .6em;
    flex-wrap: wrap;
    background: #fafafa;
}

.motogt-ap-moderation-card.is-deleting {
    opacity: 0;
}

/* --- Responsive --- */
@media (max-width: 640px) {
    .motogt-ap-form { padding: 1.2em; }
    .motogt-ap-table th:nth-child(2),
    .motogt-ap-table td:nth-child(2) { display: none; }
    .motogt-ap-mes-articles-header { flex-direction: column; align-items: flex-start; }
}