/* =========================================================================
   clean.css — couche de design partagée du thème « clean ».
   Élève les primitifs Bootstrap 4 / Froala à l'identité du Pilotage
   (encre prune, accent teal, neutres clairs). CSS uniquement : aucun markup
   ni logique modifiés. Chargée APRÈS bootstrap/froala pour gagner la cascade.
   ========================================================================= */

:root {
  --ink:        #2b2733;   /* titres, texte fort */
  --ink-body:   #3c3845;   /* corps — ~10:1 sur blanc */
  --ink-muted:  #7c7689;   /* secondaire — 4.6:1 sur blanc */
  --ink-faint:  #9a94a6;   /* méta uniquement */
  --line:       #ece9e4;   /* bordures calmes */
  --line-strong:#dcd8d2;
  --surf:       #ffffff;
  --bg:         #f8f7f5;   /* fond de page — off-white très léger */
  --surf-2:     #f4f2ef;   /* en-têtes de table, zones calmes */

  --teal:       #0a8a99;   /* accent / primaire */
  --teal-dk:    #06616c;   /* liens, hover */
  --teal-50:    #e6f4f6;
  --teal-100:   #cfeaee;

  --ok:    #2f8f63; --ok-bg:  #e7f4ec; --ok-ink:  #1f6b48; --ok-bd:  #c5e6d3;
  --warn:  #a9760f; --warn-bg:#faf0d6; --warn-ink:#7a5510; --warn-bd:#ecd9a6;
  --dang:  #cf4655; --dang-bg:#fbe9eb; --dang-ink:#9a2f3b; --dang-bd:#f0c4ca;
  --info:  #0a8a99; --info-bg:#e6f4f6; --info-ink:#06616c; --info-bd:#bfe3e8;

  --radius:    14px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(40,36,50,.05);
  --shadow:    0 1px 2px rgba(40,36,50,.05), 0 12px 30px -16px rgba(40,36,50,.18);
  --shadow-lg: 0 18px 50px -20px rgba(40,36,50,.28);
  --ease: cubic-bezier(.22,1,.36,1);
}

/* ----------------------------------------------------------------- base */
body {
  background: var(--bg);
  color: var(--ink-body);
  font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: .002em;
}

::selection { background: var(--teal-100); color: var(--ink); }

/* --------------------------------------------------------- typographie */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -.02em;
  text-wrap: balance;
}
h1, .h1 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); }
h2, .h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); }
h3, .h3 { font-weight: 700; }
p { line-height: 1.6; }
a { color: var(--teal-dk); transition: color .15s var(--ease); }
a:hover { color: var(--teal); text-decoration: none; }
.text-muted { color: var(--ink-muted) !important; }
.text-dark  { color: var(--ink) !important; }
hr { border-top-color: var(--line); }

/* --------------------------------------------------------------- navbar */
header .navbar { padding-top: .6rem; padding-bottom: .6rem; }
.navbar-brand img { transition: transform .2s var(--ease); }
.navbar-brand:hover img { transform: translateY(-1px); }
.navbar .nav-link {
  color: var(--ink-body) !important;
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.navbar .nav-link:hover { color: var(--teal-dk) !important; background: var(--teal-50); }
.navbar .nav-item.active .nav-link,
.navbar .nav-item.active > .nav-link {
  color: var(--teal-dk) !important;
  background: var(--teal-50);
}
.dropdown-menu {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: .4rem;
}
.dropdown-item { border-radius: 8px; padding: .5rem .75rem; font-weight: 500; }
.dropdown-item:hover { background: var(--teal-50); color: var(--teal-dk); }
.dropdown-divider { border-top-color: var(--line); }

/* --------------------------------------------------------------- boutons */
.btn {
  border-radius: var(--radius-sm);
  font-weight: 600;
  letter-spacing: .005em;
  transition: background .15s var(--ease), border-color .15s var(--ease),
              color .15s var(--ease), box-shadow .15s var(--ease), transform .08s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:focus, .btn.focus { box-shadow: 0 0 0 3px rgba(10,138,153,.28); }

/* NB : on ne stylise QUE les variantes Bootstrap standard + .btn-default.
   Les classes maison (btn-blue/btn-cyan/btn-pri/btn-ok/btn-list) sont
   appliquées de façon imprévisible (ex. btn-blue sur un <nav> barre d'icônes)
   et conservent leurs définitions inline existantes — on n'y touche pas. */
.btn-primary {
  background: var(--teal); border-color: var(--teal); color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--teal-dk); border-color: var(--teal-dk); color: #fff;
}
.btn-outline-primary, .btn-outline-info {
  color: var(--teal-dk); border-color: var(--teal); background: transparent;
}
.btn-outline-primary:hover, .btn-outline-info:hover {
  background: var(--teal); border-color: var(--teal); color: #fff;
}
.btn-info { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn-info:hover { background: var(--teal-dk); border-color: var(--teal-dk); color: #fff; }

/* btn-default : classe Bootstrap 3 (non stylée en BS4) → bouton neutre propre */
.btn-default {
  background: var(--surf);
  border: 1px solid var(--line-strong);
  color: var(--ink-body);
}
.btn-default:hover {
  background: var(--surf-2); border-color: var(--ink-muted); color: var(--ink);
}
.btn-secondary, .btn-outline-secondary {
  border-radius: var(--radius-sm);
}
.btn-outline-secondary { color: var(--ink-body); border-color: var(--line-strong); }
.btn-outline-secondary:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.btn-success { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-success:hover { background: var(--ok-ink); border-color: var(--ok-ink); color: #fff; }
.btn-outline-success { color: var(--ok-ink); border-color: var(--ok); }
.btn-outline-success:hover { background: var(--ok); border-color: var(--ok); color: #fff; }

.btn-danger { background: var(--dang); border-color: var(--dang); }
.btn-danger:hover { background: var(--dang-ink); border-color: var(--dang-ink); }
.btn-outline-danger { color: var(--dang-ink); border-color: var(--dang); }
.btn-outline-danger:hover { background: var(--dang); border-color: var(--dang); color: #fff; }

.btn-warning { background: var(--warn); border-color: var(--warn); color: #fff; }
.btn-warning:hover { background: var(--warn-ink); border-color: var(--warn-ink); color: #fff; }
.btn-light { background: var(--surf); border-color: var(--line); color: var(--ink-body); }

/* ----------------------------------------------------------- formulaires */
.form-control, .custom-select {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink-body);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.form-control:focus, .custom-select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(10,138,153,.18);
}
.form-control::placeholder { color: var(--ink-faint); }
label, .form-group > label { color: var(--ink); font-weight: 600; font-size: .92rem; }
.input-group-text { background: var(--surf-2); border-color: var(--line-strong); color: var(--ink-muted); }

/* ---------------------------------------------------------------- cartes */
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  background: var(--surf);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.card-header { background: var(--surf); border-bottom-color: var(--line); font-weight: 700; color: var(--ink); }
.card-footer { background: var(--surf); border-top-color: var(--line); }
.card-title { color: var(--ink); font-weight: 700; }

/* --------------------------------------------------------------- tables */
.table { color: var(--ink-body); }
.table thead th {
  border-top: 0;
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink-muted);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.table td, .table th { border-top-color: var(--line); vertical-align: middle; }
.table-hover tbody tr { transition: background .12s var(--ease); }
.table-hover tbody tr:hover { background: var(--teal-50); }

/* --------------------------------------------------------------- badges */
.badge { font-weight: 600; border-radius: var(--radius-pill); padding: .35em .7em; }
.badge-info, .badge-primary { background: var(--teal); color: #fff; }
.badge-success { background: var(--ok); color: #fff; }
.badge-warning { background: var(--warn); color: #fff; }
.badge-danger  { background: var(--dang); color: #fff; }
.badge-secondary { background: #6b6577; color: #fff; }

/* --------------------------------------------------------------- alertes */
.alert { border-radius: var(--radius-sm); border-width: 1px; }
.alert-success { background: var(--ok-bg);  border-color: var(--ok-bd);  color: var(--ok-ink); }
.alert-warning { background: var(--warn-bg);border-color: var(--warn-bd);color: var(--warn-ink); }
.alert-danger  { background: var(--dang-bg);border-color: var(--dang-bd);color: var(--dang-ink); }
.alert-info    { background: var(--info-bg);border-color: var(--info-bd);color: var(--info-ink); }

/* Bandeau flash : rendu en flux (cf. base.twig) — ne recouvre plus la navbar. */
#welcomeMessageContainer .alert {
  border-radius: 0;
  border-left: 0; border-right: 0; border-top: 0;
  margin-bottom: 0;
  box-shadow: var(--shadow-sm);
}

/* ---------------------------------------------------------------- footer */
footer.fdb-block { background: var(--surf); border-top: 1px solid var(--line); margin-top: 3rem; }
footer .nav-item .btn { color: var(--ink-muted); }
footer small { color: var(--ink-faint) !important; }

/* ----------------------------------------------------- froala / divers */
.fdb-block { background: transparent; }
.modal-content { border: 0; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.modal-header { border-bottom-color: var(--line); }
.list-group-item { border-color: var(--line); }
.list-group-item.active { background: var(--teal); border-color: var(--teal); }
.page-link { color: var(--teal-dk); }
.page-item.active .page-link { background: var(--teal); border-color: var(--teal); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}