/* ============================================================
   AuditPro — Theme Organique Afrique
   ============================================================
   Surcharge des variables CSS quand body[data-theme="organique"].
   Palette inspirée de src/AuditPro-Organique.html — terracotta,
   forêt, crème, sable. Adaptée au marché Afrique (Congo, KFT,
   franchise Auriac Studio Afrique).

   Auto-activation : voir lib/theme-switcher.js qui bascule
   automatiquement quand body.dataset.zone commence par "AF_".
   ============================================================ */

body[data-theme="organique"] {
  /* Couleurs principales (mapping vers identités existantes) */
  --navy: #1A3428;            /* forest → header & buttons principaux */
  --navy-dark: #102117;       /* forest très foncé */
  --bg: #EDE6DA;              /* cream — fond général */

  /* Slates → palette warm */
  --slate-900: #1C1C1C;       /* ink — texte fort */
  --slate-700: #3D2F1F;       /* brun warm dark */
  --slate-500: #6B5E4E;       /* warm mid */
  --slate-400: #8A7B68;       /* muted warm */
  --slate-300: #D4C8B8;       /* track sand */
  --slate-200: #E5DCCB;       /* cream-2 */
  --slate-100: #EFE7D7;       /* card-2 */
  --slate-50: #F5EFE6;        /* card */

  /* Accents */
  --red: #C84B2E;             /* danger terracotta plus sombre */
  --orange: #D96B30;          /* terra principale */
  --green: #4F8C5A;           /* success forest leaf */
  --blue: #4B7C9E;            /* info bleu canard, doux */
  --gold: #C98A2E;            /* warning miel */
}

/* Fond général + texture pointillée subtile (clin d'œil sol africain) */
body[data-theme="organique"] {
  background:
    radial-gradient(rgba(217,107,48,0.06) 0.5px, transparent 0.5px),
    var(--bg) !important;
  background-size: 20px 20px;
}

/* Header navy → forêt + texture */
body[data-theme="organique"] .app-header {
  background: linear-gradient(135deg, #1A3428 0%, #224136 100%);
}

/* Stepper */
body[data-theme="organique"] .stepper {
  background: rgba(0,0,0,0.15);
}
body[data-theme="organique"] .step.active .num {
  background: #D96B30;
  color: #1C1C1C;
}

/* Cartes / option-card → tons crème + warm shadow */
body[data-theme="organique"] .option-card,
body[data-theme="organique"] .recap-panel,
body[data-theme="organique"] .calc-panel,
body[data-theme="organique"] .identity-card,
body[data-theme="organique"] .manual-card,
body[data-theme="organique"] .zone-card,
body[data-theme="organique"] .pack-row,
body[data-theme="organique"] .bundle-panel,
body[data-theme="organique"] .accept-box,
body[data-theme="organique"] .final-summary {
  box-shadow: 0 4px 20px rgba(180,120,60,0.10);
}

body[data-theme="organique"] .option-card.recommended {
  background: linear-gradient(135deg, #F5EFE6 0%, #EFE7D7 100%);
  border: 2px solid #D96B30;
}

body[data-theme="organique"] .option-ribbon {
  background: #D96B30;
  color: #FFFFFF;
}

body[data-theme="organique"] .option-tier {
  color: #1A3428;
}

/* Boutons */
body[data-theme="organique"] .option-btn,
body[data-theme="organique"] .btn.primary,
body[data-theme="organique"] [data-id-confirm],
body[data-theme="organique"] [data-manual-confirm] {
  background: #1A3428;
  color: #F5EFE6;
}
body[data-theme="organique"] .option-btn:hover,
body[data-theme="organique"] .btn.primary:hover {
  background: #224136;
}

body[data-theme="organique"] .option-card.recommended .option-btn {
  background: #D96B30;
}
body[data-theme="organique"] .option-card.recommended .option-btn:hover {
  background: #BF5A23;
}

/* Identity card (FR uniquement, donc invisible en thème organique en pratique) */
body[data-theme="organique"] .identity-card {
  background: linear-gradient(135deg, #F5EFE6 0%, #EFE7D7 100%);
  border: 2px solid #1A3428;
}
body[data-theme="organique"] .id-title {
  color: #1A3428;
}
body[data-theme="organique"] .id-source {
  color: #1A3428;
  border-color: #1A3428;
}

/* Zone cards */
body[data-theme="organique"] .zone-card {
  background: #F5EFE6;
  border-color: #D4C8B8;
}
body[data-theme="organique"] .zone-card:hover {
  border-color: #D96B30;
}
body[data-theme="organique"] .zone-card.selected {
  background: linear-gradient(135deg, #F5EFE6 0%, #EFE7D7 100%);
  border-color: #1A3428;
  box-shadow: 0 4px 12px rgba(180,120,60,0.18);
}
body[data-theme="organique"] .zone-card .zone-name {
  color: #1A3428;
}
body[data-theme="organique"] .zone-card .zone-currency {
  color: #D96B30;
}

/* Manual card */
body[data-theme="organique"] .manual-card h3 {
  color: #1A3428;
}

/* Recap panels */
body[data-theme="organique"] .recap-name {
  color: #1A3428;
}

/* Bundle panel (__KEEP_ANSEMOK__ STAY) → contraste fort, fond forêt */
body[data-theme="organique"] .bundle-panel {
  background: linear-gradient(135deg, #1A3428 0%, #102117 100%);
}
body[data-theme="organique"] .bundle-savings {
  background: #D96B30;
  color: #FFFFFF;
}

/* Calc panel → carte crème + accent terracotta */
body[data-theme="organique"] .calc-panel {
  background: #F5EFE6;
  border: 2px solid #1A3428;
}
body[data-theme="organique"] .calc-total .big {
  color: #D96B30;
}

/* Zone banner Step 2 */
body[data-theme="organique"] .zone-banner {
  background: #F5EFE6;
  border-left-color: #D96B30;
}

/* Step gate (yellow → warm version) */
body[data-theme="organique"] .step-gate {
  background: linear-gradient(135deg, rgba(217,107,48,0.10) 0%, rgba(217,107,48,0.18) 100%);
  border-color: #D96B30;
}
body[data-theme="organique"] .step-gate h3,
body[data-theme="organique"] .step-gate p {
  color: #BF5A23;
}

/* Tags */
body[data-theme="organique"] .tag,
body[data-theme="organique"] .badge {
  background: rgba(217,107,48,0.12);
  color: #BF5A23;
}

/* Final summary footer */
body[data-theme="organique"] .final-summary {
  background: linear-gradient(135deg, #1A3428 0%, #102117 100%);
}

/* Commit grid (engagements réciproques) */
body[data-theme="organique"] .commit-col.us {
  background: rgba(168,197,160,0.18);
  border-color: #4F8C5A;
}
body[data-theme="organique"] .commit-col.us h4 {
  color: #2D6A4F;
}
body[data-theme="organique"] .commit-col.you {
  background: rgba(217,107,48,0.10);
  border-color: #D96B30;
}
body[data-theme="organique"] .commit-col.you h4 {
  color: #BF5A23;
}

/* Footer fixe */
body[data-theme="organique"] .app-footer {
  background: #F5EFE6;
  border-top-color: #D4C8B8;
}

/* ============================================================
   V1 selectors (public/index.html + public/app.js)
   ============================================================
   Ajouté 13/05 — la V1 est l'app principale TARMAC 22/05.
   On surcharge les variables CSS V1 (:root définit --navy etc.
   dans <style> inline d'index.html) + on cible quelques classes
   V1 spécifiques (header, .tab, .btn-primary, .q-option, .card,
   .section-header, .prospect-pill).
   ============================================================ */

body[data-theme="organique"] {
  /* Surcharge variables V1 (priorité plus haute que :root grâce au sélecteur composé) */
  --bg: #EDE6DA;
  --border: #D4C8B8;
  --gray: #6B5E4E;
}

/* Header — forest profonde */
body[data-theme="organique"] header {
  background: linear-gradient(135deg, #1A3428 0%, #224136 100%) !important;
}
body[data-theme="organique"] header span {
  color: rgba(245, 239, 230, 0.6) !important;
}

/* Cards — fond crème, ombre warm */
body[data-theme="organique"] .card {
  background: #F5EFE6 !important;
  border-color: #D4C8B8 !important;
  box-shadow: 0 4px 20px rgba(180,120,60,0.10) !important;
}

/* Onglets */
body[data-theme="organique"] .tab.active {
  color: #1A3428 !important;
  border-bottom-color: #D96B30 !important;
}
body[data-theme="organique"] .tab {
  color: #6B5E4E !important;
}

/* Boutons primaires — forest avec hover terra */
body[data-theme="organique"] .btn-primary {
  background: #1A3428 !important;
  color: #F5EFE6 !important;
}
body[data-theme="organique"] .btn-primary:hover {
  background: #D96B30 !important;
}
body[data-theme="organique"] .btn-success {
  background: #4F8C5A !important;
}

/* Section header audit — forest avec bord terra */
body[data-theme="organique"] .section-header {
  background: linear-gradient(135deg, #1A3428 0%, #224136 100%) !important;
  border-left: 4px solid #D96B30 !important;
}
body[data-theme="organique"] .section-badge {
  background: rgba(217,107,48,0.25) !important;
}

/* Question blocks */
body[data-theme="organique"] .q-block {
  background: #F5EFE6 !important;
  border-color: #D4C8B8 !important;
}

/* Q-options — terra quand sélectionné */
body[data-theme="organique"] .q-option {
  background: #FFFFFF !important;
  border-color: #D4C8B8 !important;
  color: #1A3428 !important;
}
body[data-theme="organique"] .q-option.selected {
  background: #D96B30 !important;
  border-color: #BF5A23 !important;
  color: #FFFFFF !important;
}

/* Progress bar — terra */
body[data-theme="organique"] .progress-fill {
  background: #D96B30 !important;
}

/* Score cards */
body[data-theme="organique"] .score-card {
  background: #F5EFE6 !important;
  border-color: #D4C8B8 !important;
}

/* Prospect pills */
body[data-theme="organique"] .prospect-pill {
  background: #F5EFE6 !important;
  border-color: #D4C8B8 !important;
}
body[data-theme="organique"] .prospect-pill:hover {
  border-color: #D96B30 !important;
}
body[data-theme="organique"] .prospect-icon {
  background: rgba(217,107,48,0.15) !important;
  color: #BF5A23 !important;
}

/* Form inputs/selects — focus terra */
body[data-theme="organique"] input:focus-visible,
body[data-theme="organique"] select:focus-visible,
body[data-theme="organique"] textarea:focus-visible {
  border-color: #D96B30 !important;
  box-shadow: 0 0 0 3px rgba(217,107,48,.25) !important;
}

/* Alert info — fond crème + bordure terra */
body[data-theme="organique"] .alert-info {
  background: rgba(217,107,48,0.10) !important;
  border-color: #D96B30 !important;
  color: #BF5A23 !important;
}

/* Body texture subtile */
body[data-theme="organique"] {
  background:
    radial-gradient(rgba(217,107,48,0.06) 0.5px, transparent 0.5px),
    #EDE6DA !important;
  background-size: 20px 20px;
}