/* ==========================================================================
   RouillacProject – style.css
   Palette dynamique + dark mode + UI unifiée
   ========================================================================== */

/* ==========================================================================
   1) VARIABLES GLOBALES (par défaut) + pont Bootstrap
   ========================================================================== */
:root {
  /* Couleurs de base */
  --rp-primary: #1a5276;
  --rp-secondary: #5d6d7e;
  --rp-accent: #27ae60;
  --rp-warning: #f39c12;
  --rp-danger: #c0392b;
  --rp-info: #3498db;

  /* Texte / fonds */
  --rp-text-dark: #212529;
  --rp-text-light: #f8f9fa;
  --rp-bg-light: #ffffff;
  --rp-bg-dark: #343a40;

  /* Bordures */
  --rp-border-light: #dee2e6;
  --rp-border-dark: #444;

  /* Corps */
  --rp-body-bg: var(--rp-bg-light);
  --rp-body-text: var(--rp-text-dark);

  /* Footer */
  --rp-footer-bg: var(--rp-primary);
  --rp-footer-text: var(--rp-text-light);

    /* Cartes (mappe sur les variables Rouillac, avec fallback sûrs) */
    --rp-card-header-bg:   var(--rouillac-card-header-bg, var(--rp-primary));
    --rp-card-header-text: var(--rouillac-card-header-text, var(--rp-text-light));
    --rp-card-subtitle-text: var(--rouillac-card-header-text, var(--rp-text-light));
    --rp-card-body-bg:     var(--rp-bg-light);
    --rp-card-body-text:   var(--rp-text-dark);
    --rp-card-footer-bg:   var(--rouillac-card-footer-bg, #e9ecef);
    --rp-card-footer-text: var(--rp-text-dark);
    --rp-card-border:      var(--rp-primary);


  /* Typo / liens */
  --rp-heading-color: var(--rp-primary);
  --rp-muted: #6c757d;
  --rp-link: var(--rp-info);
  --rp-link-hover: #0056b3;

  /* Boutons "rôles" */
  --rp-btn-edit-bg: var(--rp-info);
  --rp-btn-edit-text: var(--rp-text-light);
  --rp-btn-edit-hover: #125fb3;

  --rp-btn-delete-bg: var(--rp-danger);
  --rp-btn-delete-text: var(--rp-text-light);
  --rp-btn-delete-hover: #8c2a20;

  --rp-btn-add-bg: var(--rp-accent);
  --rp-btn-add-text: var(--rp-text-light);
  --rp-btn-add-hover: #1c7446;

  --rp-btn-bg: var(--rp-primary);
  --rp-btn-text: var(--rp-text-light);
  --rp-btn-hover: #153e5b;

  /* Surfaces/champs (servira à CKEditor/TinyMCE/inputs) */
  --rp-surface:   var(--rp-card-body-bg);
  --rp-surface-1: color-mix(in srgb, var(--rp-card-header-bg) 6%, var(--rp-card-body-bg));
  --rp-surface-2: color-mix(in srgb, var(--rp-card-header-bg) 12%, var(--rp-card-body-bg));

  --rp-input-bg:     var(--rp-card-body-bg);
  --rp-input-text:   var(--rp-card-body-text);
  --rp-input-border: var(--rp-border-light);

  --rp-focus-ring: rgba(52, 152, 219, .35);

  /* Pont Bootstrap */
  --bs-primary: var(--rp-primary);
  --bs-secondary: var(--rp-secondary);
  --bs-success: var(--rp-accent);
  --bs-info: var(--rp-info);
  --bs-warning: var(--rp-warning);
  --bs-danger: var(--rp-danger);
  --bs-light: var(--rp-bg-light);
  --bs-dark: var(--rp-bg-dark);
  --bs-body-color: var(--rp-body-text);
  --bs-border-color: var(--rp-border-light);


  /* === ÉDITEUR (TinyMCE/CKEditor) ======================================= */
  --rp-editor-bg:          var(--rp-card-body-bg);
  --rp-editor-text:        var(--rp-card-body-text);
  --rp-editor-toolbar-bg:  var(--rp-card-header-bg);
  --rp-editor-toolbar-text:var(--rp-card-header-text);
  --rp-editor-border:      var(--rp-card-border);
}

/* ==========================================================================
   2) PALETTES (classes ajoutées au <body> par JS)
   ========================================================================== */
/* Sable */
body.palette-sable {
  --rp-card-header-bg: #c2b280;
  --rp-card-header-text: #3e3b32;
  --rp-card-subtitle-text: #e8e2c8;
  --rp-card-body-bg: #f5f0e1;
  --rp-card-body-text: #3e3b32;
  --rp-card-footer-bg: #e0d8b0;
  --rp-card-footer-text: #3e3b32;
  --rp-card-border: #c2b280;
  --rp-body-bg: #f8f5e9;
  --rp-body-text: #3e3b32;
  --rp-footer-bg: #8b7d6b;
  --rp-footer-text: #fdfbf7;
  --rp-link: #a68b5b;
  --rp-link-hover: #6b5a3c;
  --rp-btn-bg: #c2b280;
  --rp-btn-text: #3e3b32;
  --rp-btn-hover: #a89b6e;
  --rp-editor-bg:   #f7f2e4;  /* + contrasté que #f5f0e1 */
  --rp-editor-text: #2f2a22;
  --rouillac-card-header-bg: #c2b280;
  --rouillac-card-header-text: #3e3b32;
  --rouillac-card-footer-bg: #e0d8b0;
}

/* Nuit */
body.palette-nuit {
  --rp-card-header-bg: #1c1c28;
  --rp-card-header-text: #e2e6ea;
  --rp-card-subtitle-text: #a0aec0;
  --rp-card-body-bg: #2a2a40;
  --rp-card-body-text: #e2e6ea;
  --rp-card-footer-bg: #33334d;
  --rp-card-footer-text: #e2e6ea;
  --rp-card-border: #1c1c28;
  --rp-body-bg: #12121a;
  --rp-body-text: #e2e6ea;
  --rp-footer-bg: #1c1c28;
  --rp-footer-text: #e2e6ea;
  --rp-link: #8ab4f8;
  --rp-link-hover: #adcafc;
  --rp-btn-bg: #33334d;
  --rp-btn-text: #e2e6ea;
  --rp-btn-hover: #1c1c28;
  --rp-editor-bg:   #22243a;  /* un ton + clair que #1c1c28 pour éviter le “noir total” */
  --rp-editor-text: #e8edf3;
  --rouillac-card-header-bg: #1c1c28;
  --rouillac-card-header-text: #e2e6ea;
  --rouillac-card-footer-bg: #33334d;
}

/* Printemps */
body.palette-printemps {
  --rp-card-header-bg: #88c057;
  --rp-card-header-text: #ffffff;
  --rp-card-subtitle-text: #dff3e3;
  --rp-card-body-bg: #f5faf2;
  --rp-card-body-text: #355e3b;
  --rp-card-footer-bg: #c8e6c9;
  --rp-card-footer-text: #355e3b;
  --rp-card-border: #88c057;
  --rp-body-bg: #f0faf4;
  --rp-body-text: #355e3b;
  --rp-footer-bg: #5dae49;
  --rp-footer-text: #ffffff;
  --rp-link: #5dae49;
  --rp-link-hover: #3e7a33;
  --rp-btn-bg: #88c057;
  --rp-btn-text: #ffffff;
  --rp-btn-hover: #6fae44;
  --rp-editor-bg:   #f2f8ee;  /* body-bg éclairci */
  --rp-editor-text: #2e5536;  /* vert foncé lisible */
  --rouillac-card-header-bg: #88c057;
  --rouillac-card-header-text: #ffffff;
  --rouillac-card-footer-bg: #c8e6c9;
}

/* Rouge Révolution */
body.palette-rouge_revolution {
  --rp-card-header-bg: #8b0000;
  --rp-card-header-text: #ffffff;
  --rp-card-subtitle-text: #f2c4c4;
  --rp-card-body-bg: #fdecec;
  --rp-card-body-text: #4d0e0e;
  --rp-card-footer-bg: #e6b3b3;
  --rp-card-footer-text: #4d0e0e;
  --rp-card-border: #8b0000;
  --rp-body-bg: #fff5f5;
  --rp-body-text: #4d0e0e;
  --rp-footer-bg: #660000;
  --rp-footer-text: #ffffff;
  --rp-link: #b22222;
  --rp-link-hover: #7a1c1c;
  --rp-btn-bg: #8b0000;
  --rp-btn-text: #ffffff;
  --rp-btn-hover: #660000;
  --rp-editor-bg:   #f8e3e3;
  --rp-editor-text: #3c0b0b;
  --rouillac-card-header-bg: #8b0000;
  --rouillac-card-header-text: #ffffff;
  --rouillac-card-footer-bg: #e6b3b3;
}

/* Violette — accept both dash and underscore */
body.palette-violette,
body.palette_violette {
  --rp-card-header-bg: #6c43a3;
  --rp-card-header-text: #ffffff;
  --rp-card-subtitle-text: #e4d7f4;
  --rp-card-body-bg: #faf6ff;
  --rp-card-body-text: #2e2540;
  --rp-card-footer-bg: #e9ddfb;
  --rp-card-footer-text: #2e2540;
  --rp-card-border: #6c43a3;
  --rp-body-bg: #f7f0ff;
  --rp-body-text: #2e2540;
  --rp-footer-bg: #533080;
  --rp-footer-text: #ffffff;
  --rp-link: #6c43a3;
  --rp-link-hover: #4e2f77;
  --rp-btn-bg: #6c43a3;
  --rp-btn-text: #ffffff;
  --rp-btn-hover: #5a3890;
  --rp-editor-bg:   #f4ecff;   /* un peu plus soutenu que body-bg */
  --rp-editor-text: #261f33;
  --rouillac-card-header-bg: #6c43a3;
  --rouillac-card-header-text: #ffffff;
  --rouillac-card-footer-bg: #e9ddfb;
}


/* ==========================================================================
   3) DARK MODE (classe ajoutée sur <body>)
   ========================================================================== */
body.dark-mode {
  --rp-body-bg: #1c1c1c;
  --rp-body-text: #e2e6ea;
  --rp-footer-bg: #1c1c1c;
  --rp-footer-text: #e2e6ea;

  --rp-card-header-bg: #2c3e50;
  --rp-card-header-text: #e2e6ea;
  --rp-card-subtitle-text: #b0c4de;
  --rp-card-body-bg: #495057;
  --rp-card-body-text: #e2e6ea;
  --rp-card-footer-bg: #5a6a7c;
  --rp-card-footer-text: #e2e6ea;
  --rp-card-border: #2c3e50;

  --rp-heading-color: #e2e6ea;
  --rp-muted: #aabbc3;
  --rp-link: #8ab4f8;
  --rp-link-hover: #adcafc;

  --rp-btn-edit-bg: #1a73e8;
  --rp-btn-edit-hover: #124ec4;
  --rp-btn-delete-bg: #c53929;
  --rp-btn-delete-hover: #9b281f;
  --rp-btn-add-bg: #34a853;
  --rp-btn-add-hover: #217d3d;
  --rp-btn-bg: #6c757d;
  --rp-btn-hover: #545b62;

  --bs-border-color: var(--rp-border-dark);
}

/* ==========================================================================
   4) BASE
   ========================================================================== */
body {
  font-family: "Inter", sans-serif;
  background: var(--rp-body-bg);
  color: var(--rp-body-text);
  transition: background-color .3s ease, color .3s ease;
}

a { color: var(--rp-link); transition: color .2s ease; }
a:hover { color: var(--rp-link-hover); text-decoration: underline; }
.text-muted { color: var(--rp-muted) !important; }

/* ==========================================================================
   5) NAVBAR / MENU  — forcer la palette (écrase bg-dark & co)
   ========================================================================== */
.navbar,
.navbar.navbar-dark,
.navbar.bg-dark,
.navbar.navbar-dark.bg-dark {
  background: var(--rp-card-header-bg) !important;
  color: var(--rp-card-header-text) !important;
  transition: background-color .3s ease, color .3s ease;
}

/* Liens */
.navbar-brand,
.navbar-nav .nav-link {
  color: var(--rp-card-header-text) !important;
}
.navbar-nav .nav-link:hover {
  color: var(--rp-link-hover) !important;
  text-decoration: underline;
}
.navbar-toggler-icon { filter: invert(1); }

/* Menus déroulants dans la navbar (et ailleurs) = palette dynamique */
.navbar .dropdown-menu,
.dropdown-menu {
  background: var(--rp-card-body-bg) !important;
  color: var(--rp-card-body-text) !important;
  border: 1px solid var(--rp-card-border) !important;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.175) !important;
}
.navbar .dropdown-item,
.dropdown-item {
  color: var(--rp-card-body-text) !important;
}
.navbar .dropdown-item:hover,
.dropdown-item:hover {
  background: color-mix(in srgb, var(--rp-card-header-bg) 12%, transparent) !important;
}


/* ==========================================================================
   6) FOOTER
   ========================================================================== */
footer {
  background: var(--rp-footer-bg);
  color: var(--rp-footer-text);
  transition: background-color .3s ease, color .3s ease;
}

/* ==========================================================================
   7) CARDS
   ========================================================================== */
.card {
  background: var(--rp-card-body-bg);
  color: var(--rp-card-body-text);
  border: 2px solid var(--rp-card-border);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,.1);
  transition: box-shadow .2s ease;
}
.card:hover { box-shadow: 0 8px 16px rgba(0,0,0,.2); }

.card-header {
  background: var(--rp-card-header-bg);
  color: var(--rp-card-header-text);
  border-bottom: 2px solid var(--rp-card-border);
  padding: 1rem;
}
.card-header .card-title,
.card-header .card-subtitle,
.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6 {
  color: var(--rp-card-header-text);
}
.card-body { background: var(--rp-card-body-bg); color: var(--rp-card-body-text); }
.card-body h3, .card-body h5 { color: var(--rp-heading-color); }
.card-footer {
  background: var(--rp-card-footer-bg);
  color: var(--rp-card-footer-text);
  border-top: 1px solid var(--rp-card-border);
}

/* Harmoniser les "panneaux gris" avec la palette du footer de carte */
.card .bg-body-secondary,
.card .bg-light,
.card .alert-secondary {
  background-color: var(--rp-card-footer-bg) !important;
  border-color: var(--rp-card-footer-border, transparent) !important;
  color: var(--rp-card-footer-color, inherit) !important;
}


/* ==========================================================================
   8) BOUTONS
   ========================================================================== */
.btn { border-radius: 2rem; font-weight: 500; font-size: .95rem; padding: .45rem 1.2rem; }

.btn-primary { background: var(--rp-btn-bg); color: var(--rp-btn-text); border: none; }
.btn-primary:hover { background: var(--rp-btn-hover); color: var(--rp-btn-text); }

.btn-secondary { background: var(--rp-card-footer-bg); color: var(--rp-card-footer-text); border: none; }

.btn-success, .btn-add { background: var(--rp-btn-add-bg); color: var(--rp-btn-add-text); border: none; }
.btn-success:hover, .btn-add:hover { background: var(--rp-btn-add-hover); }

.btn-info, .btn-edit { background: var(--rp-btn-edit-bg); color: var(--rp-btn-edit-text); border: none; }
.btn-info:hover, .btn-edit:hover { background: var(--rp-btn-edit-hover); }

.btn-danger, .btn-delete { background: var(--rp-btn-delete-bg); color: var(--rp-btn-delete-text); border: none; }
.btn-danger:hover, .btn-delete:hover { background: var(--rp-btn-delete-hover); }

.btn-warning { background: var(--bs-warning); color: #222; border: 1px solid color-mix(in srgb, var(--bs-warning) 55%, black); }

/* Boutons ton "card header" — dynamiques clair/sombre */
.btn-header-tone{
  background-color: var(--rouillac-card-header-bg);
  color: var(--rouillac-card-header-text);
  border: 1px solid var(--rouillac-card-border);
}
.btn-header-tone:hover,
.btn-header-tone:focus{
  background-color: var(--rouillac-card-header-bg);
  color: var(--rouillac-card-header-text);
  filter: brightness(0.94);       /* léger foncé au survol */
}
.btn-header-tone:active{
  filter: brightness(0.88);
}

/* Ghost buttons (aucun fond) */
.btn-ghost{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit;
  padding: .375rem .6rem;
}
.btn-ghost:hover,
.btn-ghost:focus{
  background: transparent !important;
  text-decoration: underline;
}
.btn-ghost:disabled,
.btn-ghost.disabled{
  opacity: .55;
  pointer-events: none;
}

/* Variantes par couleur (utilise les variables Bootstrap) */
.btn-ghost-primary { color: var(--bs-primary) !important; }
.btn-ghost-secondary { color: var(--bs-secondary) !important; }
.btn-ghost-danger { color: var(--bs-danger) !important; }

/* Chip "succès" outline — 100% dynamique via --rp-btn-add-* */
.btn-chip-success{
  --_ok: var(--rp-btn-add-bg);
  color: var(--_ok) !important;                /* texte = couleur succès dynamique */
  border: 1px solid var(--_ok) !important;     /* bordure dynamique */
  background: transparent !important;          /* outline */
  line-height: 1.2;
}
.btn-chip-success:hover,
.btn-chip-success:focus{
  /* léger fond au survol, en restant lisible quel que soit le thème */
  background: color-mix(in srgb, var(--_ok) 14%, transparent) !important;
}
.btn-chip-success:disabled{
  opacity: .95;                                /* lisible mais discret */
  background: transparent !important;
  color: var(--_ok) !important;
  border-color: var(--_ok) !important;
}
.btn-chip-success i{ color: currentColor !important; } /* icône suit la couleur */



/* ==========================================================================
   9) ACCORDIONS
   ========================================================================== */
.accordion-item {
  background: var(--rp-card-header-bg);
  border: 1px solid var(--rp-card-border);
  border-radius: 15px;
  box-shadow: 0 2px 5px rgba(0,0,0,.05);
  overflow: hidden;
}
.accordion-button {
  background: var(--rp-card-header-bg);
  color: var(--rp-card-header-text);
  border-radius: 15px;
  padding-top: .75rem; padding-bottom: .75rem;
}
.accordion-button:not(.collapsed) {
  background: var(--rp-card-header-bg);
  color: var(--rp-card-header-text);
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  margin-bottom: 0;
}
.accordion-button:focus { box-shadow: none; }
.accordion-body {
  background: var(--rp-card-body-bg);
  color: var(--rp-card-body-text);
  padding-top: .5rem;
  border-top: none;
}

/* Arrondis propres pour les chapitres */
#chaptersAccordion .accordion-item {
  border-radius: .75rem;
  overflow: hidden;
}
#chaptersAccordion .accordion-item > .accordion-header .accordion-button {
  border-radius: .75rem; /* garde l’arrondi même au premier item */
}


/* Badge “Commentaires” – suit la palette */
.badge-comment{
  /* fond et bordure dynamiques basés sur la palette */
  --_bg:  color-mix(in srgb, var(--rp-card-header-bg) 15%, var(--rp-card-body-bg));
  --_bd:  color-mix(in srgb, var(--rp-card-header-bg) 45%, transparent);

  background-color: var(--_bg) !important;
  color: var(--rp-card-header-bg) !important;   /* texte = couleur du fond du header */
  border: 1px solid var(--_bd) !important;

  font-size: .75rem;
  line-height: 1;
  padding: .35rem .55rem;
}

/* Renforce la couleur à l'intérieur du bouton accordéon */
.accordion-button .badge-comment{
  color: var(--rp-card-header-bg) !important;
}

/* Option : léger survol */
.accordion-button:hover .badge-comment{
  background-color: color-mix(in srgb, var(--rp-card-header-bg) 22%, var(--rp-card-body-bg));
}

/* === Mobile: header d'accordéon plus compact et retour à la ligne === */
@media (max-width: 576px) {

  /* Autorise le passage à la ligne et réduit l'padding */
  .accordion-button{
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;           /* -> titre sur 1ère ligne, le reste dessous */
    padding: .5rem .75rem;
  }

  /* Titre plus petit (adapte la classe si tu en as une) */
  .accordion-button .rp-title,
  .accordion-button h1,
  .accordion-button h2,
  .accordion-button h3,
  .accordion-button h4,
  .accordion-button h5 {
    font-size: clamp(.9rem, 2.6vw, 1rem);
    line-height: 1.15;
    flex: 1 0 100%;            /* le titre prend toute la ligne */
    margin: 0;
  }

  /* Badge “Commentaires” passe sous le titre, aligné à gauche */
  .accordion-button .badge-comment{
    margin-left: 0;
    margin-top: .35rem;
  }
}

/* ==========================================================================
   10) TABLES
   ========================================================================== */
.table {
  --table-header-bg: var(--rp-card-header-bg);
  --table-header-text: var(--rp-card-header-text);
  --table-body-bg: var(--rp-card-body-bg);
  --table-text: var(--rp-card-body-text);
  --table-border: var(--rp-card-border);
  --table-footer-bg: var(--rp-card-footer-bg);

  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--table-body-bg);
  color: var(--table-text);
  border: 2px solid var(--table-border);
  border-radius: .75rem;
  overflow: hidden;
  font-size: .95rem;

  /* neutralise les variables Bootstrap qui perturbent */
  --bs-table-bg: var(--table-body-bg);
  --bs-table-striped-bg: color-mix(in srgb, var(--table-header-bg) 8%, var(--table-body-bg));
  --bs-table-hover-bg: color-mix(in srgb, var(--table-footer-bg) 20%, var(--table-body-bg));
  --bs-table-color: var(--table-text);
}
.table thead th {
  background: var(--table-header-bg);
  color: var(--table-header-text);
  font-weight: 600;
  padding: .75rem;
  border-bottom: 2px solid var(--table-border);
}
.table tbody td {
  padding: .65rem;
  border-bottom: 1px solid color-mix(in srgb, var(--table-header-bg) 25%, var(--table-body-bg));
  background: var(--bs-table-bg);
}
.table-striped tbody tr:nth-of-type(odd) { background: var(--bs-table-striped-bg); }
.table-striped tbody tr:nth-of-type(even) { background: color-mix(in srgb, var(--table-footer-bg) 12%, var(--table-body-bg)); }
.table-hover tbody tr:hover { background: var(--bs-table-hover-bg); transition: background-color .25s ease; }

/* ==========================================================================
   11) FORMULAIRES (harmonisés)
   ========================================================================== */
.form-control, .form-select, textarea {
  color: var(--rp-body-text);
  background: var(--rp-body-bg);
  border-color: var(--bs-border-color);
}
.card .form-control, .card .form-select, .card textarea {
  color: var(--rp-card-body-text);
  background: var(--rp-card-body-bg);
  border-color: var(--rp-card-footer-bg);
}

/* Taille réduite des titres de cartes */
.home-card .card-header .card-title {
font-size: 1rem; /* par ex. 16px */
}

.home-card .card-header .card-subtitle {
font-size: 0.875rem; /* 14px */
}

/* Accueil : compacter le footer des cartes */
.home-card .card-footer { padding: .35rem .5rem; }
.home-card .card-footer .d-flex { row-gap: .25rem; }
.home-card .card-footer .footer-meta,
.home-card .card-footer .small { line-height: 1.2; }

/* Compacter le footer des cartes */
.home-card .card-footer {
  padding-top: .25rem;
  padding-bottom: .25rem;
}

/* Supprimer la marge artificielle du bloc interne */
.home-card .card-footer .mt-2 {
  margin-top: 0 !important;
}


.form-control::placeholder, textarea::placeholder { color: var(--rp-muted); opacity: 1; }

/* Champs dans les formulaires de chapitres */
.form-chapter-body input[type="text"],
.form-chapter-body input[type="email"],
.form-chapter-body input[type="number"],
.form-chapter-body input[type="file"],
.form-chapter-body input[type="url"],
.form-chapter-body input[type="datetime-local"],
.form-chapter-body select,
.form-chapter-body textarea {
  background: var(--rp-card-body-bg);
  color: var(--rp-card-body-text);
  border: 2px solid var(--rp-card-footer-bg);
  border-radius: .5rem;
  padding: .4rem .6rem;
  font-size: .95rem;
  width: 100%;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.form-chapter-body input:focus,
.form-chapter-body select:focus,
.form-chapter-body textarea:focus {
  outline: none;
  border-color: var(--rp-info);
  box-shadow: 0 0 0 .25rem rgba(52,152,219,.25);
  background: var(--rp-bg-light);
  color: var(--rp-text-dark);
}

/* Checkboxes & radios custom */
.form-chapter-body .form-check-input {
  width: 18px; height: 18px; cursor: pointer;
  border: 2px solid var(--rp-border-light); background: var(--rp-card-body-bg);
}
.form-chapter-body .form-check-input:checked {
  background-color: var(--rp-accent);
  border-color: var(--rp-accent);
}
body.dark-mode .form-chapter-body .form-check-input {
  border-color: var(--rp-border-dark); background: var(--rp-card-body-bg);
}
body.dark-mode .form-chapter-body .form-check-input:checked {
  background-color: var(--rp-info); border-color: var(--rp-info);
}

/* Select “marque Rouillac” */
.rouillac-select {
  background: var(--rp-card-body-bg);
  color: var(--rp-card-body-text);
  border: 2px solid var(--rp-card-footer-bg);
  border-radius: .5rem;
  padding: .4rem 1rem;
}
.rouillac-select:focus {
  outline: none;
  border-color: var(--rp-info);
  box-shadow: 0 0 0 .25rem rgba(52,152,219,.25);
  background: var(--rp-bg-light);
  color: var(--rp-text-dark);
}

/* ==========================================================================
   12) CKEditor 5 (thématisation dynamique)
   ========================================================================== */
.ck.ck-editor{ --ck-border-radius: 12px; }
:root{
  --ck-toolbar-bg:     var(--rp-card-header-bg);
  --ck-toolbar-text:   var(--rp-card-header-text);
  --ck-toolbar-border: var(--rp-card-border);
  --ck-toolbar-hover:  rgba(255,255,255,.10);
}
.ck.ck-editor .ck-toolbar{
  background: var(--ck-toolbar-bg);
  color: var(--ck-toolbar-text);
  border-color: var(--ck-toolbar-border);
  border-top-left-radius: var(--ck-border-radius);
  border-top-right-radius: var(--ck-border-radius);
}
.ck.ck-toolbar .ck-button{ color: var(--ck-toolbar-text); }
.ck.ck-toolbar .ck-button .ck-icon{ fill: var(--ck-toolbar-text); }
.ck.ck-toolbar .ck-button:hover,
.ck.ck-toolbar .ck-button.ck-on{ background: var(--ck-toolbar-hover); }
.ck.ck-toolbar .ck-toolbar__separator{ background: var(--ck-toolbar-border); opacity:.9; }
.ck.ck-dropdown__panel,.ck.ck-balloon-panel{
  background: var(--rp-surface-2); color: var(--rp-input-text); border-color: var(--rp-input-border);
}
.ck.ck-editor__editable,.ck.ck-editor__main .ck-content{
  background: var(--rp-input-bg); color: var(--rp-input-text); border-color: var(--rp-input-border);
  border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:12px;border-bottom-right-radius:12px;
  min-height:520px;max-height:900px;
}
.ck.ck-editor__editable:focus{ box-shadow:0 0 0 3px var(--rp-focus-ring); outline:none; }
.ck.ck-editor__editable.ck-placeholder::before{ color:var(--rp-muted); }
.ck.ck-editor__main .ck-content a{ color:var(--rp-link); text-decoration:underline; }
.ck.ck-editor__main .ck-content table td,.ck.ck-editor__main .ck-content table th{
  background:var(--rp-surface-1); border-color:var(--rp-input-border);
}
.ck.ck-editor__main .ck-content pre,.ck.ck-editor__main .ck-content blockquote{
  background:var(--rp-surface-1); border-left:4px solid var(--rp-accent); padding:.75rem 1rem; border-radius:10px;
}


/* ========================================================================== */
/* 13) TinyMCE — toolbar dynamique, zone de saisie DYNAMIQUE (pas de violet)  */
/* ========================================================================== */

/* Pas de fond imposé sur le conteneur */
body .tox-tinymce{
  border: 2px solid var(--rp-editor-border, currentColor) !important;
  border-radius: 15px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  background-clip: padding-box !important;
}
body .card .tox-tinymce{ border-radius: inherit !important; }

/* Clean des bordures internes */
body .tox .tox-editor-container,
body .tox .tox-editor-header,
body .tox .tox-toolbar-overlord,
body .tox .tox-toolbar__primary,
body .tox .tox-toolbar,
body .tox .tox-statusbar{
  border: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Toolbar = suit la palette (et on TUE les dégradés/bordures de groupe) */
body .tox .tox-toolbar,
body .tox .tox-toolbar__primary,
body .tox .tox-toolbar-overlord,
body .tox .tox-editor-header{
  background: var(--rp-editor-toolbar-bg) !important;
  color:      var(--rp-editor-toolbar-text) !important;
  background-image: none !important;   /* supprime tout dégradé */
}
body .tox .tox-editor-header{
  box-shadow: inset 0 -2px 0 var(--rp-editor-border) !important;
}

/* Groupes de boutons : pas de bordure ni fond */
body .tox .tox-toolbar__group{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Icônes lisibles */
body .tox .tox-tbtn,
body .tox .tox-tbtn svg{
  color: var(--rp-editor-toolbar-text) !important;
  fill:  var(--rp-editor-toolbar-text) !important;
}
body .tox .tox-tbtn:hover,
body .tox .tox-tbtn--enabled:hover{
  background: rgba(255,255,255,.10) !important;
}

/* =======> ZONE DE SAISIE : couleur DYNAMIQUE (comme le corps de carte) <=== */
body .tox .tox-edit-area{
  background: var(--rp-card-body-bg) !important;   /* suit la palette */
  padding: 0 !important;
}

/* L’iframe reste transparente (aucun blanc quand on change de palette) */
body .tox .tox-edit-area__iframe{
  display: block !important;
  background: transparent !important;
}
.tox .tox-edit-area__iframe html,
.tox .tox-edit-area__iframe body,
.tox .tox-edit-area__iframe .mce-content-body{
  background: transparent !important;
  color: var(--rp-card-body-text) !important;
}

/* Statusbar = palette */
body .tox .tox-statusbar{
  background: var(--rp-card-footer-bg) !important;
  color:      var(--rp-card-footer-text) !important;
  box-shadow: inset 0 1px 0 var(--rp-editor-border) !important;
}
body .tox .tox-statusbar__resize-handle{ margin-right: 4px !important; }

/* Menus / overlays */
body .tox .tox-menu,
body .tox .tox-collection--list,
body .tox .tox-toolbar__overflow{
  background: var(--rp-surface-2) !important;
  color:      var(--rp-card-body-text) !important;
  border: 1px solid var(--rp-editor-border) !important;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}
body .tox .tox-collection__item{ color: var(--rp-card-body-text) !important; }
body .tox .tox-collection__item--active{
  background: color-mix(in srgb, var(--rp-editor-toolbar-bg) 20%, transparent) !important;
}

/* Empilement de plusieurs éditeurs */
body .tox-tinymce + .tox-tinymce{ margin-top: 1rem !important; }

/* Fallback (textarea natif) = suit aussi la palette, pas de violet fixe */
textarea.form-control,
.card textarea.form-control{
  background: var(--rp-card-body-bg) !important;
  color: var(--rp-card-body-text) !important;
  border-color: var(--rp-editor-border) !important;
}
textarea.form-control::placeholder{ color: var(--rp-muted) !important; opacity: 1; }


/* ========================================================================== */
/* 14) RESSOURCES (cartes vignettes)                                          */
/* ========================================================================== */
.resource-card{
  height:260px; display:flex; flex-direction:column; justify-content:space-between; transition:transform .2s ease-in-out;
}
.resource-card:hover{ transform:translateY(-5px); }
.resource-card .card-header{
  font-size:1.1rem; font-weight:700; text-align:center; padding:.6rem .75rem;
  background:var(--rp-card-header-bg); color:var(--rp-card-header-text);
}
.resource-card .card-body{
  flex:1; display:flex; flex-direction:column; justify-content:space-between; padding:.75rem; background:var(--rp-card-body-bg);
}
.resource-card .card-text{
  font-size:.9rem; color:var(--rp-muted); margin-bottom:1rem; flex-grow:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; min-height:3.8em;
}
.resource-card .btn-sm{ min-width:90px; text-align:center; }

/* ========================================================================== */
/* 15) ÉDITEURS / TEXTAREA taille pleine                                      */
/* ========================================================================== */
textarea,.form-control.custom-textarea,.django-ckeditor-widget{
  width:100% !important; max-width:100% !important; display:block; min-height:250px;
}
.card-body .mb-3{ width:100%; }

/* ========================================================================== */
/* 16) Sitemap programme – couleurs d’état                                    */
/* ========================================================================== */
.card .sitemap-link.wf-public{ color: var(--bs-success); }
.card .sitemap-link.wf-draft{ color: var(--rp-muted); }
.card .sitemap-link.wf-draft:hover{ color:#495057; }

/* ========================================================================== */
/* 17) Divers                                                                  */
/* ========================================================================== */
.programme-content-image{ max-height:600px; width:100%; object-fit:cover; }
.pagination-container{ margin-top:30px; }
.alert--cardbg{ background:var(--rp-card-body-bg); color:var(--rp-card-body-text); border:1px solid var(--bs-border-color); }
.navbar-dark .navbar-brand,.navbar-dark .nav-link{ color:var(--rp-card-header-text) !important; }

/* Chapitre – espacement des éléments de la ligne méta */
.chapter-meta{
  display: flex;              /* déjà présent via la classe, on renforce ici */
  flex-wrap: wrap;
  column-gap: 1.25rem;        /* espace horizontal entre éléments */
  row-gap: .5rem;             /* espace quand ça va à la ligne */
}

.chapter-meta .meta-item{
  display: inline-flex;
  align-items: center;
  line-height: 1.6;           /* un peu plus de hauteur pour respirer */
}

/* (optionnel) petit espace avant les liens dans la méta */
.chapter-meta .programme-link{ margin-left: .25rem; }


/* ========================================================================== */
/* 99) Helpers & resets globaux                                               */
/* ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }


/* ===== NAVBAR : override final anti-noir (bg-dark & dropdown-menu-dark) ==== */

/* 1) Fond de la barre – bat .bg-dark même si chargé après */
body header .navbar.navbar-dark.bg-dark,
body .navbar.navbar-dark.bg-dark,
body header .navbar.bg-dark,
body .navbar.bg-dark,
body header .navbar,
body .navbar {
  background-color: var(--rp-card-header-bg) !important;
  background-image: none !important;
  color: var(--rp-card-header-text) !important;

  /* Variables BS5 pour tous les sous-éléments */
  --bs-navbar-color:            var(--rp-card-header-text);
  --bs-navbar-hover-color:      var(--rp-link-hover);
  --bs-navbar-active-color:     var(--rp-card-header-text);
  --bs-navbar-brand-color:      var(--rp-card-header-text);
  --bs-navbar-brand-hover-color:var(--rp-link-hover);
}

/* 2) Liens et marque (au cas où un thème recolle ses couleurs) */
body .navbar .navbar-brand,
body .navbar .nav-link {
  color: var(--rp-card-header-text) !important;
}
body .navbar .nav-link:hover,
body .navbar .navbar-brand:hover {
  color: var(--rp-link-hover) !important;
  text-decoration: underline;
}

/* 3) Menus déroulants : clair et dynamique, même si .dropdown-menu-dark */
body .navbar .dropdown-menu,
body .dropdown-menu,
body .dropdown-menu.show,
body .dropdown-menu-dark {
  background-color: var(--rp-card-body-bg) !important;
  color: var(--rp-card-body-text) !important;
  border: 1px solid var(--rp-card-border) !important;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.175) !important;

  /* variables BS5 pour homogénéiser */
  --bs-dropdown-bg:             var(--rp-card-body-bg);
  --bs-dropdown-color:          var(--rp-card-body-text);
  --bs-dropdown-link-color:     var(--rp-card-body-text);
  --bs-dropdown-link-hover-color:var(--rp-card-body-text);
  --bs-dropdown-link-hover-bg:  color-mix(in srgb, var(--rp-card-header-bg) 12%, transparent);
}
body .dropdown-item:hover {
  background: color-mix(in srgb, var(--rp-card-header-bg) 12%, transparent) !important;
}

/* 4) Icône burger lisible */
body .navbar .navbar-toggler-icon { filter: invert(1); }

/* ===== NAVBAR : anti-noir ultime (écrase bg-dark, pseudo-éléments, etc.) === */

/* Fond + texte de la barre (spécificité très élevée) */
body header .navbar.navbar-dark.bg-dark.fixed-top,
body header .navbar.navbar-dark.bg-dark,
body header .navbar.bg-dark,
body .navbar.navbar-dark.bg-dark,
body .navbar.bg-dark,
body header .navbar,
body #navbar,
body header[role="banner"] .navbar {
  background-color: var(--rp-card-header-bg) !important;
  background-image: none !important;
  color: var(--rp-card-header-text) !important;

  /* Variables BS5 pour neutraliser .bg-dark */
  --bs-bg-opacity: 1;
  --bs-navbar-color:             var(--rp-card-header-text);
  --bs-navbar-hover-color:       var(--rp-link-hover);
  --bs-navbar-active-color:      var(--rp-card-header-text);
  --bs-navbar-brand-color:       var(--rp-card-header-text);
  --bs-navbar-brand-hover-color: var(--rp-link-hover);
}

/* Pseudo-éléments/inner wrappers parfois utilisés par des thèmes */
body .navbar::before,
body .navbar::after,
body .navbar .navbar-inner,
body .navbar .container-fluid {
  background-color: var(--rp-card-header-bg) !important;
  background-image: none !important;
}

/* Liens de la nav */
body .navbar .navbar-brand,
body .navbar .nav-link { color: var(--rp-card-header-text) !important; }
body .navbar .nav-link:hover,
body .navbar .navbar-brand:hover {
  color: var(--rp-link-hover) !important;
  text-decoration: underline;
}

/* Menu déroulant : neutralise .dropdown-menu-dark si présent */
body .navbar .dropdown-menu,
body .dropdown-menu,
body .dropdown-menu-dark {
  background-color: var(--rp-card-body-bg) !important;
  color: var(--rp-card-body-text) !important;
  border: 1px solid var(--rp-card-border) !important;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.175) !important;

  /* variables BS */
  --bs-dropdown-bg:              var(--rp-card-body-bg);
  --bs-dropdown-color:           var(--rp-card-body-text);
  --bs-dropdown-link-color:      var(--rp-card-body-text);
  --bs-dropdown-link-hover-color:var(--rp-card-body-text);
  --bs-dropdown-link-hover-bg:   color-mix(in srgb, var(--rp-card-header-bg) 12%, transparent);
}
body .dropdown-item:hover {
  background: color-mix(in srgb, var(--rp-card-header-bg) 12%, transparent) !important;
}

/* Icône burger lisible sur fonds foncés/clairs */
body .navbar .navbar-toggler-icon { filter: invert(1); }


/* ===== TinyMCE : toolbar 100% palette (anti-noir) ======================== */
/* Place ce bloc tout à la fin de style.css */

body .tox .tox-editor-header,
body .tox .tox-toolbar-overlord,
body .tox .tox-toolbar,
body .tox .tox-toolbar__primary,
body .tox .tox-toolbar__overflow{
  background-color: var(--rp-card-header-bg) !important;
  color: var(--rp-card-header-text) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: inset 0 -2px 0 var(--rp-card-border) !important;
}

/* Groupes de boutons = transparents */
body .tox .tox-toolbar__group{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Icônes/texte des boutons lisibles */
body .tox .tox-tbtn,
body .tox .tox-tbtn svg{
  color: var(--rp-card-header-text) !important;
  fill:  var(--rp-card-header-text) !important;
}
body .tox .tox-tbtn:hover,
body .tox .tox-tbtn--enabled:hover{
  background: rgba(255,255,255,.10) !important;
}

/* Menu/overlays TinyMCE */
body .tox .tox-menu,
body .tox .tox-collection--list,
body .tox .tox-toolbar__overflow--open{
  background: var(--rp-card-body-bg) !important;
  color: var(--rp-card-body-text) !important;
  border: 1px solid var(--rp-card-border) !important;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}
body .tox .tox-collection__item--active{
  background: color-mix(in srgb, var(--rp-card-header-bg) 20%, transparent) !important;
}

/* Zone d’édition déjà OK, on laisse ton réglage dynamique */

/* ========= FINITIONS DE PALETTES / CONTRASTES & LIENS ================== */

/* Valeurs par défaut (si une palette ne redéfinit pas) */
:root{
  /* Liens alignés à la teinte primaire */
  --rp-link:        color-mix(in srgb, var(--rp-card-header-bg) 45%, #2680ff);
  --rp-link-hover:  color-mix(in srgb, var(--rp-card-header-bg) 65%, #0a58ca);

  /* Bouton principal calé sur l’en-tête de carte */
  --rp-btn-bg:      var(--rp-card-header-bg);
  --rp-btn-hover:   color-mix(in srgb, var(--rp-card-header-bg) 85%, black);
}

/* Ajuste aussi la couleur des dividers selon la palette courante */
.dropdown-divider,
.table thead th,
.card-header,
.card-footer {
  --_divider: color-mix(in srgb, var(--rp-card-header-bg) 35%, var(--rp-card-body-bg));
  border-color: var(--_divider) !important;
}

/* État focus cohérent sur inputs/btn */
:root{
  --rp-focus-ring: color-mix(in srgb, var(--rp-link) 35%, transparent);
}
.form-control:focus,
.form-select:focus,
.btn:focus,
.tox .tox-tbtn:focus {
  box-shadow: 0 0 0 .2rem var(--rp-focus-ring) !important;
}

/* TinyMCE – statusbar & bord haut de toolbar, selon palette */
body .tox .tox-statusbar{
  background: var(--rp-card-footer-bg) !important;
  color:      var(--rp-card-footer-text) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rp-card-header-bg) 50%, transparent) !important;
}
body .tox .tox-editor-header{
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--rp-card-header-bg) 60%, transparent) !important;
}

/* Nav – boutons outline lisibles quelle que soit la palette */
.navbar .btn.btn-outline-light,
.navbar .btn.btn-outline-dark{
  --_btnOutline: color-mix(in srgb, var(--rp-card-header-text) 80%, white);
  color: var(--_btnOutline) !important;
  border-color: var(--_btnOutline) !important;
}
.navbar .btn.btn-outline-light:hover,
.navbar .btn.btn-outline-dark:hover{
  background: color-mix(in srgb, var(--rp-card-header-text) 12%, transparent) !important;
}

/* Tables – survol/striping un peu plus doux */
.table{
  --bs-table-striped-bg: color-mix(in srgb, var(--rp-card-header-bg) 7%, var(--rp-card-body-bg));
  --bs-table-hover-bg:   color-mix(in srgb, var(--rp-card-footer-bg) 16%, var(--rp-card-body-bg));
}

/* Checkbox/radio – focus & checked */
.form-check-input:focus{
  box-shadow: 0 0 0 .2rem var(--rp-focus-ring) !important;
}
.form-check-input:checked{
  background-color: var(--rp-link) !important;
  border-color:     var(--rp-link) !important;
}

/* ====== LIENS/BOUTONS affinés par palette (contraste garanti) ======= */

/* Sable */
body.palette-sable{
  --rp-link:       #a68b5b;
  --rp-link-hover: #6b5a3c;
  --rp-btn-bg:     #c2b280;
  --rp-btn-hover:  #a89b6e;
}

/* Violette */
body.palette-violette, body.palette_violette{
  --rp-link:       #6c43a3;
  --rp-link-hover: #4e2f77;
  --rp-btn-bg:     #6c43a3;
  --rp-btn-hover:  #5a3890;
}

/* Printemps */
body.palette-printemps{
  --rp-link:       #5dae49;
  --rp-link-hover: #3e7a33;
  --rp-btn-bg:     #88c057;
  --rp-btn-hover:  #6fae44;
}

/* Rouge Révolution */
body.palette-rouge_revolution{
  --rp-link:       #b22222;
  --rp-link-hover: #7a1c1c;
  --rp-btn-bg:     #8b0000;
  --rp-btn-hover:  #660000;
}

/* Nuit */
body.palette-nuit{
  --rp-link:       #8ab4f8;
  --rp-link-hover: #adcafc;
  --rp-btn-bg:     #33334d;
  --rp-btn-hover:  #1c1c28;
}

/* Dark mode générique : liens un peu + clairs */
body.dark-mode{
  --rp-link:       #8ab4f8;
  --rp-link-hover: #adcafc;
}


/* ===== Palettes manquantes (bleue, orange, verte, grise) ================== */

/* Bleue (principale) */
body.palette-bleue,
body.palette-principale {
  --rouillac-card-header-bg: #1a5276;
  --rouillac-card-header-text: #ffffff;
  --rouillac-card-footer-bg: #d5e6f3;

  --rp-card-header-bg: var(--rouillac-card-header-bg);
  --rp-card-header-text: var(--rouillac-card-header-text);
  --rp-card-subtitle-text: #bcd3e6;

  --rp-card-body-bg: #eef5fb;
  --rp-card-body-text: #1e2a33;
  --rp-card-footer-bg: var(--rouillac-card-footer-bg);
  --rp-card-footer-text: #1e2a33;
  --rp-card-border: #1a5276;

  --rp-link: #297fbf;
  --rp-link-hover: #1b5a88;
  --rp-btn-bg: #1a5276;
  --rp-btn-hover: #153e5b;

  /* TinyMCE & CKEditor suivent via --rp-card-* déjà défini */
}

/* Orange */
body.palette-orange {
  --rouillac-card-header-bg: #de6a1f;
  --rouillac-card-header-text: #ffffff;
  --rouillac-card-footer-bg: #ffe0c7;

  --rp-card-header-bg: var(--rouillac-card-header-bg);
  --rp-card-header-text: var(--rouillac-card-header-text);
  --rp-card-subtitle-text: #ffd6b8;

  --rp-card-body-bg: #fff4eb;
  --rp-card-body-text: #3a2a21;
  --rp-card-footer-bg: var(--rouillac-card-footer-bg);
  --rp-card-footer-text: #3a2a21;
  --rp-card-border: #de6a1f;

  --rp-link: #c45a16;
  --rp-link-hover: #8f3f0f;
  --rp-btn-bg: #de6a1f;
  --rp-btn-hover: #b45116;
}

/* Verte */
body.palette-verte {
  --rouillac-card-header-bg: #2e7d32;
  --rouillac-card-header-text: #ffffff;
  --rouillac-card-footer-bg: #d6efda;

  --rp-card-header-bg: var(--rouillac-card-header-bg);
  --rp-card-header-text: var(--rouillac-card-header-text);
  --rp-card-subtitle-text: #cfe6d2;

  --rp-card-body-bg: #edf7ef;
  --rp-card-body-text: #203a24;
  --rp-card-footer-bg: var(--rouillac-card-footer-bg);
  --rp-card-footer-text: #203a24;
  --rp-card-border: #2e7d32;

  --rp-link: #2a6f2e;
  --rp-link-hover: #1f5322;
  --rp-btn-bg: #2e7d32;
  --rp-btn-hover: #244f27;
}

/* Grise */
body.palette-grise {
  --rouillac-card-header-bg: #56606b;
  --rouillac-card-header-text: #ffffff;
  --rouillac-card-footer-bg: #e4e7ea;

  --rp-card-header-bg: var(--rouillac-card-header-bg);
  --rp-card-header-text: var(--rouillac-card-header-text);
  --rp-card-subtitle-text: #cdd3d9;

  --rp-card-body-bg: #f4f6f8;
  --rp-card-body-text: #232a31;
  --rp-card-footer-bg: var(--rouillac-card-footer-bg);
  --rp-card-footer-text: #232a31;
  --rp-card-border: #56606b;

  --rp-link: #3a4754;
  --rp-link-hover: #2a3440;
  --rp-btn-bg: #56606b;
  --rp-btn-hover: #414a54;
}

/* TinyMCE (dans l’iframe) — forcer la couleur du texte basée sur nos variables */
html body.mce-content-body,
.mce-content-body {
  color: var(--rp-card-body-text, var(--rp-body-text, #222)) !important;
  caret-color: var(--rp-card-body-text, var(--rp-body-text, #222)) !important;
  background: transparent !important;
}

/* (optionnel) liens dans l’éditeur */
.mce-content-body a {
  color: var(--rp-link, #0d6efd) !important;
}


/* ==== Formset "Question" — alignement & compacité ======================= */
.formset-form .row.g-3 { --bs-gutter-y: .5rem; }     /* espace vertical réduit */
.formset-form .form-label { margin-bottom: .25rem; }

/* Champs compacts mais lisibles */
.formset-form .form-control,
.formset-form .form-select {
  height: 2.25rem;          /* ~36px */
  padding: .25rem .5rem;
  font-size: .95rem;
}

/* Colonne "Ordre" : champ court et aligné à droite */
.formset-form .col-order input[type="number"] {
  max-width: 110px;
  width: 100%;
  text-align: right;
  -moz-appearance: textfield;
}
.formset-form .col-order input[type="number"]::-webkit-outer-spin-button,
.formset-form .col-order input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* Feedback d'erreur compact */
.formset-form .invalid-feedback { margin-top: .2rem; font-size: .875rem; }

/* Aération sous la prévisualisation */
.formset-form .preview-block { margin-top: .25rem; }

/* === Mobile: le bloc des likes passe sous le titre === */
@media (max-width: 576px) {

  .programme-header {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
  }

  .programme-header .programme-title {
    font-size: clamp(1rem, 3vw, 1.25rem);
    margin-bottom: .8rem;  /* <-- un peu plus d'espace sous le titre */
  }

  .programme-header .ms-3 {
    margin-left: 0 !important;
    margin-top: .5rem;      /* <-- espace au-dessus du bloc Like/Dislike */
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .programme-header .ms-3 > .d-flex {
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
  }

  .programme-header .btn-header-tone {
    font-size: .9rem;
    padding: .35rem .6rem;
  }
}

/* ===== Bouton "Parcourir…" dynamique (header par défaut, body au survol) === */

/* État normal – même teinte que card-header */
input[type="file"]::file-selector-button,
.form-control[type="file"]::file-selector-button,
.form-chapter-body input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button,
.form-control[type="file"]::-webkit-file-upload-button,
.form-chapter-body input[type="file"]::-webkit-file-upload-button {
  background-color: var(--rp-card-header-bg) !important;
  color: var(--rp-card-header-text) !important;
  border: 1px solid var(--rp-card-border, var(--rp-border-light)) !important;
  border-radius: 2rem;
  padding: .45rem 1.2rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* Survol – même teinte que card-body (fini le gris) */
input[type="file"]::file-selector-button:hover,
.form-control[type="file"]::file-selector-button:hover,
.form-chapter-body input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover,
.form-control[type="file"]::-webkit-file-upload-button:hover,
.form-chapter-body input[type="file"]::-webkit-file-upload-button:hover {
  background-color: var(--rp-card-body-bg) !important;
  color: var(--rp-card-body-text) !important;
  border-color: var(--rp-card-border, var(--rp-border-light)) !important;
}

/* Actif (clic maintenu) – surface 2 dans la même palette */
input[type="file"]::file-selector-button:active,
.form-control[type="file"]::file-selector-button:active,
.form-chapter-body input[type="file"]::file-selector-button:active,
input[type="file"]::-webkit-file-upload-button:active,
.form-control[type="file"]::-webkit-file-upload-button:active,
.form-chapter-body input[type="file"]::-webkit-file-upload-button:active {
  background-color: var(--rp-surface-2) !important;
  color: var(--rp-card-body-text) !important;
  border-color: var(--rp-card-border, var(--rp-border-light)) !important;
}

/* Focus clavier – anneau thème */
input[type="file"]:focus-visible::file-selector-button,
.form-control[type="file"]:focus-visible::file-selector-button,
.form-chapter-body input[type="file"]:focus-visible::file-selector-button {
  box-shadow: 0 0 0 .2rem var(--rp-focus-ring);
}


/* === LISTE ÉVÉNEMENTS — cartes ENFANTS uniquement (aucun impact ailleurs) === */

/* 1) Header/ footer compacts et sans flex sur les cartes enfants */
.card.events-list-mode > .card-body .card > .card-header{
  display:block !important;                 /* annule d-flex du header enfant */
  padding:.35rem .75rem !important;         /* écrase padding:1rem de Bootstrap */
}
.card.events-list-mode > .card-body .card > .card-footer{
  padding:.35rem .75rem !important;         /* pied compact */
}

/* 2) Titre + sous-titre alignés à gauche, sans marges parasites */
.card.events-list-mode > .card-body .card > .card-header h1,
.card.events-list-mode > .card-body .card > .card-header h2,
.card.events-list-mode > .card-body .card > .card-header h3,
.card.events-list-mode > .card-body .card > .card-header .card-title{
  margin:0 !important;
  line-height:1.15 !important;
  text-align:left !important;
}
.card.events-list-mode > .card-body .card > .card-header .card-subtitle{
  margin:.15rem 0 0 0 !important;
  text-align:left !important;
}

/* 3) Corps : image à gauche / texte à droite (même en mobile) */
.card.events-list-mode > .card-body .card .event-row{
  flex-wrap:nowrap;
  width:100%;
  min-width:0;
}
.card.events-list-mode > .card-body .card .event-row > [class^="col-"],
.card.events-list-mode > .card-body .card .event-row > [class*=" col-"]{
  min-width:0;                                /* permet le scroll dans le texte */
}

/* 4) Image contenue dans une hauteur fixe */
:root{ --event-img-max: 170px; }
.card.events-list-mode > .card-body .card .event-img-wrap{
  height:var(--event-img-max);
  display:flex; align-items:center; justify-content:flex-start;
}
.card.events-list-mode > .card-body .card .event-img{
  max-height:100%; max-width:100%;
  width:auto; height:auto;
  object-fit:contain; object-position:left center; border-radius:.6rem;
}

/* 5) Texte borné en hauteur + ascenseur */
.card.events-list-mode > .card-body .card .event-desc{
  height:var(--event-img-max) !important;
  overflow:auto !important;
  scrollbar-gutter:stable;
}
.card.events-list-mode > .card-body .card .event-desc-inner{
  line-height:1.35; white-space:normal;
}
.card.events-list-mode > .card-body .card .event-desc-inner p{
  margin:0 0 .3rem 0;
}

/* 6) (optionnel) scrollbars plus fines */
.card.events-list-mode > .card-body .card .event-desc::-webkit-scrollbar{ width:8px; }
.card.events-list-mode > .card-body .card .event-desc::-webkit-scrollbar-track{ background:rgba(0,0,0,.08); border-radius:8px; }
.card.events-list-mode > .card-body .card .event-desc::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.3); border-radius:8px; }
.card.events-list-mode > .card-body .card .event-desc{ scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.3) rgba(0,0,0,.08); }

/* 7) Mobile : tu peux ajuster légèrement la hauteur si besoin */
/* MOBILE — corps de carte scrollable (évite que le footer sorte de l'écran) */
@media (max-width: 576px){
  /* La carte devient une colonne : header (haut) + body (scroll) + footer (bas) */
  .events-list-mode .row > .col > .card{
    display: flex;
    flex-direction: column;
    max-height: 78vh;      /* hauteur totale raisonnable en mobile */
  }

  /* Le body prend l'espace restant et scroll si besoin */
  .events-list-mode .row > .col > .card .card-body{
    flex: 1 1 auto;
    min-height: 0;                      /* indispensable pour autoriser le scroll en flex */
    overflow: auto;                     /* ascenseur */
    -webkit-overflow-scrolling: touch;  /* inertie iOS */
    scrollbar-gutter: stable;           /* évite les sauts de mise en page */
  }

  /* Le footer reste visible, collé en bas de la carte */
  .events-list-mode .row > .col > .card .card-footer{
    flex: 0 0 auto;
  }

  /* Dans l’organisation image/texte, on évite les débordements horizontaux */
  .events-list-mode .event-row{
    flex-wrap: nowrap;
    min-width: 0;
  }
  .events-list-mode .event-row > [class^="col-"],
  .events-list-mode .event-row > [class*=" col-"]{
    min-width: 0;
  }
}

/* === LISTE ÉVÉNEMENTS — rétablit les clics sur Modifier/Supprimer === */
.card.events-list-mode > .card-body .card{ position: relative; }

/* Désactive le voile cliquable généré par .stretched-link (uniquement ici) */
.card.events-list-mode > .card-body .card .stretched-link::after{
  content: none !important;            /* supprime l’overlay */
  /* alternative plus douce : pointer-events:none; si tu préfères garder le ::after
     pointer-events: none !important;
  */
}

/* S’assure que le footer et ses boutons passent au-dessus */
.card.events-list-mode > .card-body .card > .card-footer{
  position: relative;
  z-index: 10;
}
.card.events-list-mode > .card-body .card > .card-footer .btn{
  position: relative;
  z-index: 20;
  pointer-events: auto;
}

/* ========================================================================== */
/* MOBILE XS (<400px) — Meilleur redimensionnement des blocs et textes        */
/* ========================================================================== */
@media (max-width: 400px) {

  /* Réduit la taille globale de police et les marges horizontales */
  html, body {
    font-size: 0.9rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* Cartes : marges et paddings plus fins */
  .card {
    margin: 0.5rem 0;
    border-width: 1px;
  }
  .card-header,
  .card-body,
  .card-footer {
    padding: 0.65rem;
  }

  /* Titres trop grands (accordéons, h1-h3 dans cartes) */
  h1, h2, h3 {
    font-size: clamp(1rem, 4vw, 1.2rem);
  }

  /* Images dans les cartes : ne jamais dépasser le conteneur */
  img, .programme-content-image {
    max-width: 100%;
    height: auto;
  }

  /* Accordéons : texte et badge mieux proportionnés */
  .accordion-button {
    font-size: 0.9rem;
  }

  /* Empêche les éléments de dépasser horizontalement */
  * {
    max-width: 100%;
    word-wrap: break-word;
  }
}