/**
 * fil-modales.css
 * JuMaRo — Fil d'actu V2 · Tiroir + Modales
 *
 * Charte : vert forêt #2D6A4F, fond blanc cassé, typographie système
 * Lowtech : pas de framework, ~230 lignes
 * A11y : focus-visible WCAG AA, reduced-motion, contraste suffisant
 *
 * SPDX-License-Identifier: GPL-3.0-or-later
 */

/* ── Tokens ────────────────────────────────────────────────────── */
:root {
  --jm-vert       : #2D6A4F;
  --jm-vert-hover : #1F5738;
  --jm-vert-light : #EBF5EF;
  --jm-fond       : #F8F7F4;
  --jm-texte      : #1A1A1A;
  --jm-gris       : #6B7280;
  --jm-bordure    : #D1D5DB;
  --jm-erreur     : #B91C1C;
  --jm-erreur-fond: #FEF2F2;
  --jm-radius     : 12px;
  --jm-shadow     : 0 8px 32px rgba(0,0,0,.18);
  --jm-transition : 200ms ease;
}

/* ── Overlay ───────────────────────────────────────────────────── */
#jm-modal-overlay {
  position        : fixed;
  inset           : 0;
  background      : rgba(0,0,0,.45);
  z-index         : 900;
  opacity         : 0;
  pointer-events  : none;
  transition      : opacity var(--jm-transition);
}
#jm-modal-overlay.is-visible {
  opacity        : 1;
  pointer-events : auto;
}

/* ── Tiroir ────────────────────────────────────────────────────── */
#jm-tiroir {
  position   : fixed;
  bottom     : 5rem;
  left       : 50%;
  transform  : translateX(-50%) translateY(1rem);
  width      : min(92vw, 360px);
  background : #fff;
  border-radius : var(--jm-radius);
  box-shadow : var(--jm-shadow);
  z-index    : 950;
  opacity    : 0;
  pointer-events : none;
  transition : opacity var(--jm-transition), transform var(--jm-transition);
  padding    : .5rem 0;
}
#jm-tiroir.is-open {
  opacity        : 1;
  pointer-events : auto;
  transform      : translateX(-50%) translateY(0);
}

.jm-tiroir-item {
  display     : flex;
  align-items : center;
  gap         : 1rem;
  width       : 100%;
  padding     : .85rem 1.25rem;
  border      : none;
  background  : transparent;
  cursor      : pointer;
  text-align  : left;
  transition  : background var(--jm-transition);
  color       : var(--jm-texte);
}
.jm-tiroir-item:hover,
.jm-tiroir-item:focus-visible {
  background : var(--jm-vert-light);
  outline    : none;
}
.jm-tiroir-item:focus-visible {
  box-shadow : inset 0 0 0 2px var(--jm-vert);
}

.jm-tiroir-icon {
  flex-shrink     : 0;
  width           : 2.25rem;
  height          : 2.25rem;
  display         : flex;
  align-items     : center;
  justify-content : center;
  background      : var(--jm-vert-light);
  border-radius   : 8px;
  color           : var(--jm-vert);
}
.jm-tiroir-icon svg { width: 1.2rem; height: 1.2rem; }

.jm-tiroir-text {
  display        : flex;
  flex-direction : column;
  gap            : .1rem;
}
.jm-tiroir-text strong { font-size: .95rem; font-weight: 600; }
.jm-tiroir-text small  { font-size: .78rem; color: var(--jm-gris); }

/* ── Dialog / Modale ──────────────────────────────────────────── */
dialog.jm-modal {
  position      : fixed;
  top           : 50%;
  left          : 50%;
  transform     : translate(-50%, -50%);
  width         : min(94vw, 520px);
  max-height    : 90dvh;
  overflow-y    : auto;
  border        : none;
  border-radius : var(--jm-radius);
  background    : var(--jm-fond);
  box-shadow    : var(--jm-shadow);
  padding       : 0;
  z-index       : 1000;
  animation     : jm-modal-in var(--jm-transition) both;
}
@keyframes jm-modal-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + .75rem)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
dialog.jm-modal::backdrop { display: none; }

.jm-modal-header {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  padding         : 1.25rem 1.5rem 1rem;
  border-bottom   : 1px solid var(--jm-bordure);
  position        : sticky;
  top             : 0;
  background      : var(--jm-fond);
  z-index         : 1;
}
.jm-modal-title {
  font-size   : 1.1rem;
  font-weight : 700;
  color       : var(--jm-vert);
  margin      : 0;
}
.jm-modal-close {
  background  : transparent;
  border      : none;
  cursor      : pointer;
  color       : var(--jm-gris);
  padding     : .3rem;
  border-radius : 6px;
  display     : flex;
  align-items : center;
  transition  : color var(--jm-transition);
}
.jm-modal-close:hover { color: var(--jm-texte); }
.jm-modal-close svg   { width: 1.25rem; height: 1.25rem; }
.jm-modal-close:focus-visible {
  outline        : 2px solid var(--jm-vert);
  outline-offset : 2px;
}

/* ── Formulaires ──────────────────────────────────────────────── */
.jm-modal-body {
  padding : 1.25rem 1.5rem 1.5rem;
}
.jm-modal-body form {
  display        : flex;
  flex-direction : column;
  gap            : .85rem;
}
.jm-modal-body label {
  font-size   : .875rem;
  font-weight : 600;
  color       : var(--jm-texte);
  margin-bottom : -.4rem;
}
.jm-modal-body input[type="text"],
.jm-modal-body input[type="number"],
.jm-modal-body input[type="date"],
.jm-modal-body textarea,
.jm-modal-body select {
  width         : 100%;
  padding       : .6rem .85rem;
  border        : 1.5px solid var(--jm-bordure);
  border-radius : 8px;
  background    : #fff;
  font-size     : .9rem;
  color         : var(--jm-texte);
  font-family   : inherit;
  transition    : border-color var(--jm-transition);
  box-sizing    : border-box;
}
.jm-modal-body input:focus,
.jm-modal-body textarea:focus,
.jm-modal-body select:focus {
  outline    : none;
  border-color : var(--jm-vert);
  box-shadow : 0 0 0 3px rgba(45,106,79,.12);
}
.jm-modal-body textarea {
  resize     : vertical;
  min-height : 80px;
}

/* Fieldset radio */
.jm-modal-body fieldset {
  border        : 1.5px solid var(--jm-bordure);
  border-radius : 8px;
  padding       : .75rem 1rem;
  display       : flex;
  gap           : 1.5rem;
  flex-wrap     : wrap;
}
.jm-modal-body legend {
  font-size   : .875rem;
  font-weight : 600;
  padding     : 0 .25rem;
  color       : var(--jm-texte);
}
.jm-radio-label {
  display     : flex;
  align-items : center;
  gap         : .4rem;
  font-size   : .9rem;
  font-weight : 400 !important;
  cursor      : pointer;
  margin      : 0 !important;
}

/* Checkbox */
.jm-checkbox-label {
  display     : flex;
  align-items : center;
  gap         : .5rem;
  font-size   : .9rem;
  font-weight : 400 !important;
  cursor      : pointer;
  margin      : 0 !important;
}

/* Double colonne */
.jm-row-2 {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : .75rem;
}
.jm-row-2 label { margin-bottom: -.2rem; }

/* ── Bouton principal ─────────────────────────────────────────── */
.jm-btn-primary {
  background    : var(--jm-vert);
  color         : #fff;
  border        : none;
  border-radius : 8px;
  padding       : .7rem 1.5rem;
  font-size     : .9rem;
  font-weight   : 600;
  cursor        : pointer;
  transition    : background var(--jm-transition), opacity var(--jm-transition);
  margin-top    : .4rem;
  align-self    : flex-end;
}
.jm-btn-primary:hover:not(:disabled) { background: var(--jm-vert-hover); }
.jm-btn-primary:disabled { opacity: .55; cursor: not-allowed; }
.jm-btn-primary:focus-visible {
  outline        : 2px solid var(--jm-vert);
  outline-offset : 3px;
}

/* ── Erreur ──────────────────────────────────────────────────── */
.jm-modal-error {
  background    : var(--jm-erreur-fond);
  color         : var(--jm-erreur);
  border        : 1px solid #FECACA;
  border-radius : 6px;
  padding       : .6rem .85rem;
  font-size     : .85rem;
  margin        : 0;
}

/* ── Reduced-motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  dialog.jm-modal        { animation: none; }
  #jm-tiroir,
  #jm-modal-overlay      { transition: none; }
}

/* ── Mobile bottom-sheet ─────────────────────────────────────── */
@media (max-width: 480px) {
  dialog.jm-modal {
    top                  : auto;
    bottom               : 0;
    left                 : 0;
    right                : 0;
    transform            : none;
    width                : 100%;
    max-height           : 92dvh;
    border-bottom-left-radius  : 0;
    border-bottom-right-radius : 0;
    animation            : jm-sheet-up var(--jm-transition) both;
  }
  @keyframes jm-sheet-up {
    from { opacity: 0; transform: translateY(2rem); }
    to   { opacity: 1; transform: translateY(0); }
  }
  #jm-tiroir {
    bottom : 4.5rem;
    width  : 92vw;
  }
  .jm-row-2 { grid-template-columns: 1fr; }
}

/* ── FAB fixe bas-droite (desktop) ──────────────────────────
   Ouvre le tiroir des modales V2
   Masqué sur mobile : le bouton + central de la bottom nav
   prend le relais via topbar.js                            */
.jm-fab {
  position      : fixed;
  bottom        : 2rem;
  right         : 2rem;
  width         : 3.25rem;
  height        : 3.25rem;
  border-radius : 50%;
  background    : #2D6A4F;
  color         : #fff;
  border        : none;
  cursor        : pointer;
  display       : flex;
  align-items   : center;
  justify-content: center;
  box-shadow    : 0 4px 16px rgba(45,106,79,.35);
  z-index       : 800;
  transition    : background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.jm-fab:hover {
  background : #1F5738;
  transform  : scale(1.08);
  box-shadow : 0 6px 20px rgba(45,106,79,.45);
}
.jm-fab:focus-visible {
  outline        : 2px solid #2D6A4F;
  outline-offset : 3px;
}
.jm-fab svg { width: 1.5rem; height: 1.5rem; }

/* Masquer sur mobile — le + de la bottom nav prend le relais */
@media (max-width: 720px) {
  .jm-fab { display: none; }
}
/* ── Tiroir sections ──────────────────────────────────────────────── */
.jm-tiroir-section {
  padding: .5rem 1.25rem .3rem;
  font: 700 .58rem/1 'DM Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--soft);
}
.jm-tiroir-sep {
  height: 1px;
  background: var(--line);
  margin: .4rem 1.25rem;
}
.jm-badge-premium {
  font: 600 .58rem/1 'DM Sans', sans-serif;
  background: #f59e0b;
  color: #fff;
  padding: .1rem .35rem;
  border-radius: 6px;
  margin-left: .3rem;
  vertical-align: middle;
}

/* ── Modale Compétences — sous-menu ──────────────────────────────── */
.jm-comp-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .6rem;
  border: none;
  background: none;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: background .15s;
  border-bottom: 1px solid var(--line);
}
.jm-comp-item:last-child { border-bottom: none; }
.jm-comp-item:hover { background: var(--bbg); }
.jm-comp-item:disabled { cursor: not-allowed; }
.jm-comp-ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--brand);
}
.jm-comp-ico svg { width: 18px; height: 18px; }
.jm-comp-text strong {
  display: block;
  font: 700 .8rem/1.2 'DM Sans', sans-serif;
  color: var(--ink);
}
.jm-comp-text small {
  display: block;
  font: 400 .65rem/1.3 'DM Sans', sans-serif;
  color: var(--soft);
  margin-top: .1rem;
}