/*
 * Prayols ensemble — Styles communs
 * Header, footer, boutons, variables, reset
 */

@import 'palette.css';

/* ── Variables ────────────────────────────────────────────────────────────── */

:root {
  /* Couleurs de base */
  --color-text:       var(--noir-texte);
  --color-text-light: var(--gris-texte);
  --color-bg:         var(--gris-fond);
  --color-white:      var(--blanc);
  --color-border:     var(--gris-bord);
  --color-dark:       var(--noir-profond);
  --color-accent:     var(--bleu-accent);

  /* Statuts */
  --color-nouveau:  var(--rouge-vif);
  --color-en-cours: var(--orange-vif);
  --color-resolu:   var(--vert-vif);

  /* Palette brand (vert olive ariégeois) */
  --color-header-primary: var(--olive-vif);
  --color-header-dark:    var(--olive-fonce);
  --color-hero-bg:        var(--olive-pale);
  --color-surface-olive:  var(--olive-leger);
  --color-border-olive:   var(--olive-bord);

  /* Boutons header (sur fond coloré) */
  --color-btn-header-bg:    var(--blanc-voile);
  --color-btn-header-hover: var(--blanc-voile-hov);

  /* Boutons secondaires */
  --color-btn-secondary-bg:    var(--gris-bord);
  --color-btn-secondary-hover: var(--gris-btn-hov);

  /* Interactions accent */
  --color-accent-hover-bg:  var(--bleu-survol);
  --color-accent-active-bg: var(--bleu-survol);
  --color-accent-dim:       var(--bleu-trait);
  --color-focus-ring:       var(--olive-ombre);

  /* Backdrops modales */
  --color-backdrop:          var(--noir-voile-md);
  --color-backdrop-dark:     var(--noir-voile-lg);
  --color-backdrop-lightbox: var(--noir-voile-max);

  /* Messages / retours formulaires */
  --color-msg-error-bg:       var(--rouge-pale);
  --color-msg-error-text:     var(--rouge-texte);
  --color-msg-error-border:   var(--rouge-msg-bord);
  --color-msg-success-bg:     var(--vert-pale);
  --color-msg-success-text:   var(--vert-texte);
  --color-msg-success-border: var(--vert-msg-bord);

  /* Code source */
  --color-code-bg:   var(--gris-code);
  --color-code-dark: var(--gris-bord);   /* même valeur que --gris-bord */

  /* Surfaces légères */
  --color-surface-light: var(--gris-fond);

  /* Bordures variantes */
  --color-border-input: var(--gris-bord-ui);
  --color-border-muted: var(--gris-bord-mut);

  /* Badges statuts vigilance (fond + texte) */
  --color-badge-nouveau-bg:    var(--rouge-pale);
  --color-badge-nouveau-text:  var(--rouge-texte);
  --color-badge-en-cours-bg:   var(--orange-pale);
  --color-badge-en-cours-text: var(--orange-texte);
  --color-badge-resolu-bg:     var(--vert-pale);
  --color-badge-resolu-text:   var(--vert-texte);
  --color-badge-archive-bg:    var(--gris-code);
  --color-badge-archive-text:  var(--gris-arch-txt);
  --color-badge-type-bg:       var(--bleu-badge);
  --color-badge-type-text:     var(--bleu-badge-txt);

  /* Badges disponibilité (accueil) */
  --color-badge-disponible-bg:   var(--vert-pale);
  --color-badge-disponible-text: var(--vert-texte);

  /* Badges difficulté randonnée (fond + texte) */
  --color-badge-facile-bg:      var(--vert-pale);    /* = badge résolu */
  --color-badge-facile-text:    var(--vert-texte);
  --color-badge-moyen-bg:       var(--orange-pale);  /* = badge en cours */
  --color-badge-moyen-text:     var(--orange-texte);
  --color-badge-difficile-bg:   var(--rouge-pale);   /* = badge nouveau */
  --color-badge-difficile-text: var(--rouge-texte);

  /* Actions sémantiques */
  --color-danger:       var(--rouge-fonce);
  --color-danger-dark:  var(--rouge-tres-fonce);
  --color-success:      var(--vert-fonce);
  --color-success-dark: var(--vert-tres-fonce);

  /* Partage — types d'items (fond + texte badge) */
  --color-type-outil:       var(--bleu-info);
  --color-badge-outil-bg:   var(--bleu-info-pale);
  --color-badge-outil-text: var(--bleu-info-txt);
  --color-badge-livre-bg:   var(--jaune-pale);
  --color-badge-livre-text: var(--jaune-texte);
  --color-badge-offre-bg:   var(--vert-offre-pale);
  --color-badge-offre-text: var(--vert-offre-txt);

  /* Carte — contrôles (Leaflet overlays) */
  --color-map-ctrl-bg:           var(--blanc-carte);
  --color-map-ctrl-border:       var(--noir-ombre-carte);
  --color-map-ctrl-hover:        var(--blanc-carte-hov);
  --color-map-ctrl-accent:       var(--bleu-carte);
  --color-map-ctrl-accent-hover: var(--bleu-carte-hov);

  /* Lightbox */
  --color-lightbox-ctrl-bg:    var(--noir-lightbox-ctrl);
  --color-lightbox-ctrl-hover: var(--noir-lightbox-ctrl-hov);
  --color-lightbox-overlay:    var(--noir-voile-sm);

  /* Espacements */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;

  /* Aliases (certaines apps utilisent --spacing-*) */
  --spacing-xs: var(--sp-xs);
  --spacing-sm: var(--sp-sm);
  --spacing-md: var(--sp-md);
  --spacing-lg: var(--sp-lg);
  --spacing-xl: var(--sp-xl);

  /* Layout */
  --header-h: 88px;
  --footer-h: 56px;

  /* Ombres */
  --shadow-sm:       0 2px 4px var(--noir-ombre);
  --shadow-md:       0 4px 6px var(--noir-ombre);
  --shadow-lg:       0 10px 20px var(--noir-ombre-fort);
  --shadow-drawer:   4px 0 20px var(--noir-ombre-fort);
  --shadow-map-ctrl: 0 2px 6px var(--noir-ombre-carte);
  --shadow-map-ctrh: 0 3px 10px var(--noir-ombre-carte-hov);
  --shadow-panel:    0 0 40px var(--noir-ombre);

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

/* ── Lien d'évitement (accessibilité) ────────────────────────────────────── */

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  padding: 8px 16px;
  background: var(--color-dark);
  color: var(--color-white);
  font-size: 0.9rem;
  text-decoration: none;
  z-index: 200;
  border-radius: 0 0 6px 0;
}

.skip-link:focus {
  top: 0;
}

/* ── Reset ────────────────────────────────────────────────────────────────── */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { overflow-y: scroll; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  /* Sticky footer : footer collé en bas même si main est court */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* main remplit l'espace entre header et footer (sticky footer) */
main { flex: 1; }

/* ── Conteneur centré ─────────────────────────────────────────────────────── */

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

/* ── Header ───────────────────────────────────────────────────────────────── */

header {
  background: linear-gradient(135deg, var(--color-header-primary) 0%, var(--color-header-dark) 100%);
  color: var(--color-white);
  padding: var(--sp-md) 0;
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 0;
  z-index: 50;
  flex-shrink: 0;
}

.header-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-md);
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}

.header-title {
  text-align: center;
  flex: 1;
}

header h1 {
  font-size: 1.8rem;
  margin: 0;
  line-height: 1.2;
}

header .tagline {
  font-size: 0.95rem;
  opacity: 0.9;
  margin: 0;
}

.back-home,
.contact-btn,
.help-btn {
  display: flex;
  align-items: center;
  color: var(--color-white);
  text-decoration: none;
  font-size: 1.2rem;
  font-family: inherit;
  padding: var(--sp-sm) var(--sp-md);
  background: var(--color-btn-header-bg);
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.back-home:hover,
.contact-btn:hover,
.help-btn:hover { background: var(--color-btn-header-hover); }

.help-btn { font-size: 1rem; }

/* Remplace le bouton retour quand noBack:true (garde le centrage du titre) */
.header-spacer {
  width: 100px;
  flex-shrink: 0;
}

.hamburger {
  display: none;
  background: var(--color-btn-header-bg);
  border: none;
  border-radius: 20px;
  cursor: pointer;
  padding: var(--sp-sm) 12px;
  color: var(--color-white);
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: background 0.2s;
}

.hamburger:hover { background: var(--color-btn-header-hover); }

/* ── Footer ───────────────────────────────────────────────────────────────── */

footer {
  background: var(--color-header-dark);
  color: var(--color-white);
  padding: var(--sp-md) 0;
  text-align: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}

footer a { color: var(--color-white); text-decoration: underline; }
footer a:hover { opacity: 0.8; }

/* ── Boutons ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-lg);
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  transition: var(--transition);
  text-decoration: none;
}

.btn-primary {
  background: var(--color-header-primary);
  color: var(--color-white);
}

.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }

.btn-secondary {
  background: var(--color-btn-secondary-bg);
  color: var(--color-text);
}

.btn-secondary:hover { background: var(--color-btn-secondary-hover); }

/* ── Nav drawer minimal (#layout-nav) ─────────────────────────────────────── */
/* Utilisé par les apps sans nav latérale propre (vigilance, contact, rando…) */

#layout-nav { display: none; }


/* ── Contact modal (contenu) ──────────────────────────────────────────────── */
/* Structure : dialog.modal générique (voir « Modal générique » plus bas)    */

.contact-intro {
  font-size: 0.9rem;
  color: var(--color-text-light);
  margin-bottom: var(--sp-lg);
}

.contact-fg {
  margin-bottom: var(--sp-md);
}

.contact-fg label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--sp-xs);
  font-size: 0.9rem;
}

.contact-req { color: var(--color-nouveau); }

.contact-fg input,
.contact-fg select,
.contact-fg textarea {
  width: 100%;
  padding: var(--sp-sm) var(--sp-md);
  border: 2px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-fg input:focus,
.contact-fg select:focus,
.contact-fg textarea:focus {
  outline: none;
  border-color: var(--color-header-primary);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.contact-fg textarea { resize: vertical; min-height: 100px; }

.contact-form-actions {
  display: flex;
  gap: var(--sp-md);
  justify-content: flex-end;
  margin-top: var(--sp-lg);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--color-border);
}

.cm-msg {
  padding: var(--sp-sm) var(--sp-md);
  border-radius: 6px;
  font-size: 0.9rem;
  margin-bottom: var(--sp-md);
}

.cm-msg--error   { background: var(--color-msg-error-bg);   color: var(--color-msg-error-text); }
.cm-msg--success { background: var(--color-msg-success-bg); color: var(--color-msg-success-text); }


/* ── Confidentialité modal (contenu) ──────────────────────────────────────── */
/* Structure : dialog.modal.modal--lg générique                              */

#privacy-modal .modal-body {
  display: block;
  padding: var(--sp-lg);
  overflow-y: auto;
  font-size: 0.95rem;
  line-height: 1.7;
}

#privacy-modal .modal-body h2 {
  font-size: 1rem;
  margin: var(--sp-lg) 0 var(--sp-sm);
}

#privacy-modal .modal-body p,
#privacy-modal .modal-body ul { margin-bottom: var(--sp-sm); }

#privacy-modal .modal-body ul { padding-left: 20px; }
#privacy-modal .modal-body li { margin-bottom: 4px; }

#privacy-modal .modal-body .rgpd-contact {
  margin-top: var(--sp-xl);
  padding: var(--sp-md) var(--sp-lg);
  background: var(--color-surface-olive);
  border-radius: 10px;
  border: 1px solid var(--color-border-olive);
}

#privacy-modal .modal-body .rgpd-contact p { margin-bottom: var(--sp-sm); }

#privacy-modal .modal-body .rgpd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
}

#privacy-modal .modal-body .btn-rgpd {
  display: inline-block;
  padding: 10px 20px;
  background: var(--color-header-primary);
  color: var(--color-white);
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.2s;
}

#privacy-modal .modal-body .btn-rgpd:hover { background: var(--color-header-dark); }

#privacy-modal .modal-body .btn-rgpd-access {
  background: var(--color-border);
  color: var(--color-text);
}

#privacy-modal .modal-body .btn-rgpd-access:hover { background: var(--color-btn-secondary-hover); }

/* Boutons Help / Contact dans le drawer mobile */
.layout-nav-help,
.layout-nav-contact {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  color: var(--color-accent);
  text-align: left;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s;
}

.layout-nav-help:hover,
.layout-nav-contact:hover { background: var(--color-accent-hover-bg); }

/* ── Modale Aide (contenu) ────────────────────────────────────────────────── */
/* Structure : dialog.modal.modal--lg générique                              */

#help-modal .modal-body {
  display: block;
  padding: var(--sp-lg);
  overflow-y: auto;
  font-size: 0.95rem;
  line-height: 1.7;
}

/* Sections repliables */
#help-modal .modal-body details {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin-bottom: var(--sp-md);
  overflow: hidden;
}

#help-modal .modal-body summary {
  font-weight: 600;
  font-size: 1rem;
  padding: var(--sp-md) var(--sp-lg);
  cursor: pointer;
  background: var(--color-surface-olive);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  -webkit-user-select: none;
  user-select: none;
}

#help-modal .modal-body summary::-webkit-details-marker { display: none; }

#help-modal .modal-body summary::after {
  content: '▾';
  font-size: 0.9rem;
  flex-shrink: 0;
  transition: transform 0.2s;
}

#help-modal .modal-body details[open] summary::after { transform: rotate(-180deg); }

#help-modal .modal-body details > :not(summary) { padding: 0 var(--sp-lg) var(--sp-md); }
#help-modal .modal-body details > :not(summary):first-of-type { padding-top: var(--sp-md); }

#help-modal .modal-body p   { margin-bottom: var(--sp-sm); }
#help-modal .modal-body ul,
#help-modal .modal-body ol  { padding-left: 20px; margin-bottom: var(--sp-sm); }
#help-modal .modal-body li  { margin-bottom: 4px; }
#help-modal .modal-body h3  { font-size: 0.95rem; margin: var(--sp-sm) 0 var(--sp-xs); }
#help-modal .modal-body a   { color: var(--color-header-dark); }
#help-modal .modal-body code {
  background: var(--color-code-bg);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 0.88em;
}

.help-loading,
.help-error {
  color: var(--color-text-light);
  font-style: italic;
  text-align: center;
  padding: var(--sp-xl) 0;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 680px) {
  /* Hauteurs réelles après réduction des paddings (pour les calc internes) */
  :root { --header-h: 44px; --footer-h: 40px; }

  .hamburger { display: block; }
  header h1  { font-size: 1.4rem; }
  header .tagline { display: none; }
  header { padding: 8px 0; }
  footer { padding: 8px 0; }

  /* Toutes les apps : hamburger à gauche, back-home, ⓘ et ✉️ masqués */
  header.has-nav .back-home,
  header.has-nav .header-spacer,
  header.has-nav .help-btn,
  header.has-nav .contact-btn { display: none; }
  header.has-nav .hamburger { order: -1; }

  /* Nav drawer minimal : slide depuis la gauche */
  #layout-nav {
    display: block;
    position: fixed;
    top: var(--header-h);
    left: 0;
    width: 240px;
    background: var(--color-bg);
    border-right: 1px solid var(--color-border);
    z-index: 99;
    transform: translateX(-100%);
    transition: transform 0.2s;
    box-shadow: var(--shadow-drawer);
    padding: 8px 0;
  }

  #layout-nav.open { transform: translateX(0); }

  #layout-nav a {
    display: block;
    padding: 12px 16px;
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
  }

  #layout-nav a:hover { background: var(--color-accent-hover-bg); }
}

/* ═════════════════════════════════════════════════════════════════════════════
   COMPOSANTS PARTAGÉS (apps)
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── Utilitaire ──────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── Modal générique ─────────────────────────────────────────────────────── */

dialog.modal {
  border: none;
  background: transparent;
  padding: var(--sp-md);
  margin: 0;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
  overflow: hidden;
}

dialog[open].modal {
  display: flex;
  align-items: center;
  justify-content: center;
}

dialog.modal::backdrop {
  background: var(--color-backdrop);
}

.modal-content {
  background: var(--color-white);
  border-radius: 12px;
  width: min(580px, 100%);
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.modal--sm .modal-content { max-width: 480px; }
.modal--lg .modal-content { width: min(700px, 100%); }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-md) var(--sp-lg);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.modal-header h2 { margin: 0; font-size: 1.1rem; }

.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-light);
  padding: 0 4px;
  transition: color 0.2s;
}

.close-btn:hover { color: var(--color-text); }

.modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--sp-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

/* ── Formulaire ──────────────────────────────────────────────────────────── */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-group label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text);
}

.form-group small {
  font-size: 0.78rem;
  color: var(--color-text-light);
}

.form-group input,
.form-group textarea,
.form-group select {
  padding: 8px 12px;
  border: 1px solid var(--color-border-input);
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: inherit;
  background: var(--color-white);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--color-header-primary);
  box-shadow: 0 0 0 2px var(--color-focus-ring);
}

.required { color: var(--color-nouveau); }

.form-actions {
  display: flex;
  gap: var(--sp-sm);
  justify-content: flex-end;
  margin-top: var(--sp-lg);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

/* ── Toast ────────────────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  padding: 12px 24px;
  border-radius: 8px;
  z-index: 3000;
  opacity: 0;
  transition: all 0.3s ease;
  max-width: 90vw;
  text-align: center;
  pointer-events: none;
  font-size: 0.9rem;
}

.toast.toast-ok {
  background: var(--color-success);
  color: var(--color-white);
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast.toast-err {
  background: var(--color-msg-error-text);
  color: var(--color-white);
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Toolbar catalogue/calendrier ────────────────────────────────────────── */

.toolbar {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.toolbar-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-md);
  padding: var(--sp-sm) var(--sp-lg);
  flex-wrap: wrap;
}

.toolbar-filters {
  display: flex;
  gap: var(--sp-sm);
  flex-wrap: wrap;
}

.toolbar-sep {
  width: 1px;
  height: 24px;
  background: var(--color-border-input);
  flex-shrink: 0;
}

.filter-btn {
  padding: 6px 16px;
  border: 1px solid var(--color-border-input);
  border-radius: 20px;
  background: var(--color-bg);
  cursor: pointer;
  font-size: 0.9rem;
  transition: var(--transition);
}

.filter-btn.active,
.filter-btn:hover {
  background: var(--color-header-primary);
  color: var(--color-white);
  border-color: var(--color-header-primary);
}

.toolbar-proposer {
  padding: 8px 18px;
  background: var(--color-header-primary);
  color: var(--color-white);
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.toolbar-proposer:hover { background: var(--color-header-dark); }

/* ── Contenu Markdown ────────────────────────────────────────────────────── */

.markdown h1 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-border);
  line-height: 1.2;
}

.markdown h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 32px 0 12px;
}

.markdown h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 24px 0 8px;
}

.markdown p {
  font-size: 0.95rem;
  line-height: 1.75;
  margin-bottom: 14px;
}

.markdown ul, .markdown ol {
  padding-left: 24px;
  margin-bottom: 14px;
}

.markdown li {
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 4px;
}

.markdown li.task-item {
  list-style: none;
}

.markdown a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-dim);
}

.markdown a:hover { text-decoration-color: var(--color-accent); }

.markdown blockquote {
  border-left: 3px solid var(--color-accent);
  padding: 8px 16px;
  margin: 16px 0;
  background: var(--color-bg);
  border-radius: 0 6px 6px 0;
  color: var(--color-text-light);
  font-style: italic;
}

.markdown code {
  font-family: 'Courier New', monospace;
  background: var(--color-bg);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.88em;
  color: var(--color-accent);
}

.markdown pre {
  background: var(--color-dark);
  color: var(--color-code-dark);
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  margin-bottom: 16px;
}

.markdown pre code { background: none; color: inherit; padding: 0; }

.markdown table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-size: 0.88rem;
}

.markdown th {
  background: var(--color-bg);
  padding: 8px 12px;
  text-align: left;
  border-bottom: 2px solid var(--color-border);
  font-weight: 600;
}

.markdown td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
}

.markdown tr:last-child td { border-bottom: none; }

.markdown hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 28px 0;
}

.markdown strong { font-weight: 700; }
.markdown em { font-style: italic; }

/* ── Composants partagés — mobile ────────────────────────────────────────── */
@media (max-width: 600px) {
  dialog[open].modal {
    align-items: flex-start;
    padding: 0;
  }

  .modal-content {
    border-radius: 0;
    max-height: 100dvh;
    width: 100%;
  }

  .toolbar { padding: 0; }
  .toolbar-top {
    padding: var(--sp-sm) 2px;
    justify-content: flex-start;
    row-gap: 0;
  }
  .toolbar-filters {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .toolbar-sep { width: 100%; height: 0; }
  .toolbar-proposer {
    padding: 10px;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
  }
}