/**
 * pedagogie.css — Styles du composant com_pedagogie
 * Adapté au template JA Stark / Bootstrap 5
 * Pont-Aven, Ecole d'Art
 */

/* ── Variables cohérentes avec JA Stark ── */
:root {
    --pg-primary:    #2c3e50;
    --pg-accent:     #e67e22;
    --pg-accent-dk:  #d35400;
    --pg-green:      #1D9E75;
    --pg-green-lt:   #E1F5EE;
    --pg-border:     #dee2e6;
    --pg-light:      #f8f9fa;
    --pg-text:       #333333;
    --pg-muted:      #6c757d;
    --pg-radius:     10px;
    --pg-font:       'Segoe UI', Arial, sans-serif;
}

/* ── Reset de base pour notre composant ── */
.pg-wrap * { box-sizing: border-box; }
.pg-wrap { font-family: var(--pg-font); color: var(--pg-text); }

/* ── Forcer les textes blancs sur fonds sombres (fix JA Stark) ── */
.pg-hero h1,
.pg-hero h2,
.pg-hero h3,
.pg-hero p,
.pg-hero span,
.pg-header h2,
.pg-header h3,
.pg-theme-head h3,
.pg-map-title,
.pg-cta p,
.gal-hero h1,
.gal-hero p,
.gtm-left h3,
.gtm-left p,
.part-hero h1,
.part-hero p,
.mod-section h2 { color: #fff !important; }

/* ── Hero sections ── */
.pg-hero,
.gal-hero,
.part-hero {
    background: var(--pg-primary);
    color: #fff;
    border-radius: var(--pg-radius);
    padding: 24px 28px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.pg-hero-icon,
.gal-hero-icon { font-size: 2.2em; flex-shrink: 0; }

/* ── Cards génériques ── */
.pg-card {
    background: #fff;
    border: 1px solid var(--pg-border);
    border-radius: var(--pg-radius);
    padding: 16px 20px;
    margin-bottom: 16px;
    transition: box-shadow .2s;
}

.pg-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.08); }

.pg-card h2 {
    font-size: 1em;
    font-weight: 600;
    color: var(--pg-primary);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--pg-border);
}

/* ── Formulaires ── */
.lbl-field {
    display: block;
    font-size: .85em;
    font-weight: 600;
    color: #444;
    margin-bottom: 4px;
}

.pg-control {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--pg-border);
    border-radius: 8px;
    font-size: .92em;
    font-family: var(--pg-font);
    background: #fff;
    color: var(--pg-text);
    transition: border-color .2s;
}

.pg-control:focus {
    outline: none;
    border-color: var(--pg-accent);
    box-shadow: 0 0 0 3px rgba(230,126,34,.12);
}

/* ── Boutons ── */
.pg-btn {
    display: inline-block;
    padding: 10px 22px;
    border: none;
    border-radius: 8px;
    font-size: .95em;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--pg-font);
    text-decoration: none;
    transition: background .2s, transform .15s;
}

.pg-btn:active { transform: translateY(1px); }

.pg-btn-primary { background: var(--pg-accent); color: #fff; }
.pg-btn-primary:hover { background: var(--pg-accent-dk); color: #fff; }

.pg-btn-secondary {
    background: #fff;
    color: var(--pg-text);
    border: 1px solid var(--pg-border);
}
.pg-btn-secondary:hover { background: var(--pg-light); }

.pg-btn-green { background: var(--pg-green); color: #fff; }
.pg-btn-green:hover { background: #0F6E56; color: #fff; }

.pg-btn-block { width: 100%; text-align: center; }

/* ── Onglets ── */
.pg-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--pg-border);
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.pg-tab {
    padding: 9px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: .9em;
    font-weight: 500;
    color: var(--pg-muted);
    cursor: pointer;
    font-family: var(--pg-font);
    transition: color .2s, border-color .2s;
    white-space: nowrap;
}

.pg-tab:hover { color: var(--pg-primary); }
.pg-tab.active { color: var(--pg-accent); border-bottom-color: var(--pg-accent); font-weight: 600; }

/* ── Galerie grille ── */
.gal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.gal-card {
    background: #fff;
    border: 1px solid var(--pg-border);
    border-radius: var(--pg-radius);
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    transition: transform .2s, box-shadow .2s;
}

.gal-card:hover { transform: translateY(-3px); box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.gal-card img { width: 100%; height: 160px; object-fit: cover; display: block; }
.gal-card-body { padding: 10px 12px; }
.gal-card-titre { font-weight: 600; font-size: .88em; color: var(--pg-primary); margin-bottom: 3px; }
.gal-card-meta  { font-size: .76em; color: var(--pg-muted); margin-bottom: 8px; }

/* ── Partage réseaux sociaux ── */
.gal-share { display: flex; gap: 5px; flex-wrap: wrap; }

.gal-btn-fb {
    display: inline-flex; align-items: center; gap: 4px;
    background: #1877f2; color: #fff !important;
    font-size: .72em; font-weight: 600;
    padding: 4px 9px; border-radius: 5px; text-decoration: none;
}

.gal-btn-ig {
    display: inline-flex; align-items: center; gap: 4px;
    background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
    color: #fff !important; font-size: .72em; font-weight: 600;
    padding: 4px 9px; border-radius: 5px; text-decoration: none; cursor: pointer;
}

/* ── Thèmes ── */
.gal-theme { margin-bottom: 32px; }

.gal-theme-title {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px; padding-bottom: 8px;
    border-bottom: 2px solid var(--pg-accent);
}

.gal-theme-title h2 { margin: 0; font-size: 1.1em; color: var(--pg-primary) !important; }

.gal-theme-count {
    font-size: .78em; background: var(--pg-light); color: #666;
    padding: 2px 10px; border-radius: 99px; border: 1px solid var(--pg-border);
}

/* ── Stats ── */
.gal-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 20px; }
.gal-stat  { background: #fff; border: 1px solid var(--pg-border); border-radius: var(--pg-radius); padding: 14px; text-align: center; }
.gal-stat-val { font-size: 1.8em; font-weight: 700; color: var(--pg-primary); }
.gal-stat-lbl { font-size: .78em; color: var(--pg-muted); margin-top: 2px; }

/* ── Carte mondiale ── */
.gal-map-wrap {
    background: #fff; border: 1px solid var(--pg-border);
    border-radius: var(--pg-radius); padding: 16px; margin-bottom: 24px;
}

.gal-map-title {
    font-size: 1em; font-weight: 600; color: var(--pg-primary) !important;
    margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}

.gal-pays-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.gal-pays-pill {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--pg-light); border: 1px solid var(--pg-border);
    border-radius: 99px; padding: 4px 12px; font-size: .78em; color: #444;
}

.gal-pays-pill .nb {
    background: var(--pg-primary); color: #fff;
    border-radius: 99px; padding: 1px 6px; font-size: .85em; font-weight: 600;
}

.gal-pays-pill.france { background: var(--pg-green-lt); border-color: #a5d6a7; }

/* ── Thème du mois ── */
.gal-theme-mois {
    background: linear-gradient(135deg, var(--pg-accent), var(--pg-accent-dk));
    color: #fff; border-radius: var(--pg-radius);
    padding: 16px 20px; margin-bottom: 24px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
}

.gtm-btn {
    background: #fff; color: var(--pg-accent-dk);
    font-weight: 700; padding: 9px 20px; border-radius: 7px;
    text-decoration: none; font-size: .88em; white-space: nowrap;
}
.gtm-btn:hover { background: #fff8f0; color: var(--pg-accent-dk); }

/* ── CTA bandes ── */
.gal-cta {
    background: var(--pg-accent); color: #fff;
    border-radius: var(--pg-radius); padding: 20px 24px; margin-top: 24px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
}

.gal-cta a {
    background: #fff; color: var(--pg-accent);
    font-weight: 700; padding: 9px 20px;
    border-radius: 7px; text-decoration: none; font-size: .9em;
}
.gal-cta a:hover { background: #fff3e0; color: var(--pg-accent-dk); }
.gal-cta-dark { background: var(--pg-primary); }
.gal-cta-dark a { color: var(--pg-primary); }

/* ── Galerie vide ── */
.gal-empty {
    text-align: center; padding: 40px; color: var(--pg-muted);
    background: var(--pg-light); border-radius: var(--pg-radius);
    border: 1px dashed var(--pg-border);
}

/* ── Formulaire participation ── */
.part-hero { background: var(--pg-primary); }
.part-card { background: #fff; border: 1px solid var(--pg-border); border-radius: var(--pg-radius); padding: 20px 24px; margin-bottom: 16px; }
.part-card h2 { font-size: 1em; font-weight: 600; color: var(--pg-primary) !important; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--pg-border); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group.full { grid-column: 1/-1; }
.form-label { font-size: .85em; font-weight: 600; color: #444; }
.form-label span { color: #dc3545; margin-left: 2px; }
.form-control { padding: 9px 12px; border: 1.5px solid var(--pg-border); border-radius: 8px; font-size: .92em; font-family: var(--pg-font); background: #fff; color: var(--pg-text); transition: border-color .2s; }
.form-control:focus { outline: none; border-color: var(--pg-accent); box-shadow: 0 0 0 3px rgba(230,126,34,.12); }
.form-hint { font-size: .76em; color: var(--pg-muted); }

.themes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 10px; }
.theme-opt { border: 2px solid var(--pg-border); border-radius: 8px; padding: 10px 12px; cursor: pointer; transition: border-color .2s, background .2s; }
.theme-opt:hover { border-color: var(--pg-accent); background: #fff8f0; }
.theme-opt.selected { border-color: var(--pg-accent); background: #fff3e0; }
.theme-opt input[type=radio] { margin-right: 8px; accent-color: var(--pg-accent); }
.theme-opt label { cursor: pointer; font-size: .88em; font-weight: 500; color: var(--pg-text); }

.btn-submit { width: 100%; padding: 13px; background: var(--pg-accent); color: #fff; border: none; border-radius: var(--pg-radius); font-size: 1em; font-weight: 600; cursor: pointer; font-family: var(--pg-font); transition: background .2s; }
.btn-submit:hover { background: var(--pg-accent-dk); }
.btn-submit:disabled { background: #ccc; cursor: not-allowed; }

.progress-bar { height: 4px; background: var(--pg-border); border-radius: 99px; margin-top: 10px; overflow: hidden; display: none; }
.progress-fill { height: 100%; background: var(--pg-accent); border-radius: 99px; width: 0%; transition: width .3s; }

/* ── Espace élève ── */
.pg-espace-header {
    background: var(--pg-primary);
    border-radius: var(--pg-radius);
    padding: 20px 24px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    color: #fff;
}

.pg-espace-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--pg-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2em; flex-shrink: 0;
}

.pg-espace-name { font-size: 1.1em; font-weight: 600; color: #fff !important; margin: 0; }
.pg-espace-group { font-size: .85em; color: rgba(255,255,255,.75) !important; margin: 0; }

.pg-seances-restantes {
    margin-left: auto; background: rgba(255,255,255,.15);
    border-radius: var(--pg-radius); padding: 10px 16px; text-align: center;
}
.pg-seances-nb { font-size: 1.8em; font-weight: 700; color: #fff !important; }
.pg-seances-lbl { font-size: .75em; color: rgba(255,255,255,.75) !important; }

/* ── Upload zone ── */
.pg-upload-zone {
    border: 2px dashed var(--pg-border); border-radius: var(--pg-radius);
    padding: 30px; text-align: center; color: var(--pg-muted); margin-bottom: 20px;
}

/* ── Modération admin ── */
.mod-wrap { max-width: 1100px; }
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 16px; }
.mod-card { border: 1px solid var(--pg-border); border-radius: var(--pg-radius); overflow: hidden; background: #fff; }
.mod-card img { width: 100%; height: 180px; object-fit: cover; display: block; }
.mod-card-body { padding: 10px 12px; }
.mod-card-name { font-weight: 700; font-size: .92em; color: var(--pg-primary); }
.mod-card-meta { font-size: .78em; color: var(--pg-muted); margin: 3px 0 8px; }
.mod-actions { display: flex; gap: 6px; }

.btn-valider { flex:1; padding:7px; background:#28a745; color:#fff; border:none; border-radius:6px; font-size:.82em; font-weight:600; cursor:pointer; }
.btn-valider:hover { background:#218838; }
.btn-refuser { flex:1; padding:7px; background:#dc3545; color:#fff; border:none; border-radius:6px; font-size:.82em; font-weight:600; cursor:pointer; }
.btn-refuser:hover { background:#c82333; }
.btn-revalider { flex:1; padding:7px; background:#6c757d; color:#fff; border:none; border-radius:6px; font-size:.82em; cursor:pointer; }

/* ── Confirmation ── */
.confirmation-box { background:#d4edda; border:1px solid #a5d6a7; border-radius:var(--pg-radius); padding:28px; text-align:center; margin-bottom:20px; }
.confirmation-box h2 { color:#155724 !important; }
.confirmation-box p { color:#1d6a2e; }
.btn-autre { display:inline-block; padding:10px 24px; background:var(--pg-primary); color:#fff !important; border-radius:8px; text-decoration:none; font-weight:600; font-size:.9em; }

/* ── Responsive ── */
@media (max-width: 640px) {
    .form-grid { grid-template-columns: 1fr; }
    .gal-grid  { grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); }
    .gal-stats { grid-template-columns: repeat(3,1fr); }
    .pg-hero, .gal-hero, .part-hero { flex-direction: column; gap: 10px; }
    .gal-cta { flex-direction: column; }
    .pg-espace-header { flex-wrap: wrap; }
    .pg-seances-restantes { margin-left: 0; width: 100%; }
}