/* ═══════════════════════════════════════════════════════════════════════════
   sf-lite.css — remplace Bootstrap sur le storefront.
   Sous-ensemble compat : UNIQUEMENT les classes réellement utilisées par les
   templates storefront + recruitment (inventaire du 2026-07-06). Les couleurs
   des composants restent skinnées par base.css (chargé après).
   Si un template ajoute une classe Bootstrap absente d'ici → l'ajouter ici.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Mini-reboot (remplace bootstrap reboot) ────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-size: 1rem; line-height: 1.5; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: .5rem; font-weight: 500; line-height: 1.2; }
h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3, .h3 { font-size: 1.75rem; }
h4, .h4 { font-size: 1.5rem; } h5, .h5 { font-size: 1.25rem; } h6, .h6 { font-size: 1rem; }
p { margin-top: 0; margin-bottom: 1rem; }
ul, ol { margin-top: 0; margin-bottom: 1rem; padding-left: 2rem; }
hr { margin: 1rem 0; border: 0; border-top: 1px solid rgba(158,163,168,.25); opacity: .5; }
small, .small { font-size: .875em; }
strong, b { font-weight: bolder; }
img, svg { vertical-align: middle; }
table { caption-side: bottom; border-collapse: collapse; }
th { text-align: inherit; }
label { display: inline-block; }
button { border-radius: 0; }
input, button, select, optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
button, select { text-transform: none; }
button, [type="button"], [type="submit"] { -webkit-appearance: button; }
textarea { resize: vertical; }
a { text-decoration: underline; }
[hidden] { display: none !important; }

/* ── Layout : container + grille ────────────────────────────────────────── */
.container { width: 100%; padding-right: .75rem; padding-left: .75rem; margin-right: auto; margin-left: auto; }
.row {
  --g-x: 1.5rem; --g-y: 0rem;
  display: flex; flex-wrap: wrap;
  margin-top: calc(-1 * var(--g-y));
  margin-right: calc(-.5 * var(--g-x));
  margin-left: calc(-.5 * var(--g-x));
}
.row > * {
  flex-shrink: 0; width: 100%; max-width: 100%;
  padding-right: calc(.5 * var(--g-x));
  padding-left: calc(.5 * var(--g-x));
  margin-top: var(--g-y);
}
.g-2 { --g-x: .5rem; --g-y: .5rem; }
.g-3 { --g-x: 1rem; --g-y: 1rem; }
.g-4 { --g-x: 1.5rem; --g-y: 1.5rem; }
.col-4 { width: 33.3333%; } .col-5 { width: 41.6667%; } .col-6 { width: 50%; }
.col-7 { width: 58.3333%; } .col-8 { width: 66.6667%; } .col-12 { width: 100%; }
@media (min-width: 576px) { .col-sm-6 { width: 50%; } }

/* ── Utilitaires display / flex ─────────────────────────────────────────── */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }
.d-inline-block { display: inline-block !important; }
.d-inline-flex { display: inline-flex !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.gap-1 { gap: .25rem !important; }
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }
.flex-fill { flex: 1 1 auto !important; }
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.min-vh-100 { min-height: 100vh !important; }
.position-relative { position: relative !important; }
.align-middle { vertical-align: middle !important; }

/* ── Espacement (échelle bootstrap : 1=.25 2=.5 3=1 4=1.5 5=3 rem) ─────── */
.m-auto { margin: auto !important; }
.mx-auto { margin-right: auto !important; margin-left: auto !important; }
.ms-auto { margin-left: auto !important; }
.ms-1 { margin-left: .25rem !important; } .ms-2 { margin-left: .5rem !important; }
.me-1 { margin-right: .25rem !important; } .me-2 { margin-right: .5rem !important; }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: .25rem !important; }
.mb-2 { margin-bottom: .5rem !important; } .mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; } .mb-5 { margin-bottom: 3rem !important; }
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: .25rem !important; }
.mt-2 { margin-top: .5rem !important; } .mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.p-2 { padding: .5rem !important; } .p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; } .p-5 { padding: 3rem !important; }
.pt-1 { padding-top: .25rem !important; } .pt-2 { padding-top: .5rem !important; }
.pb-2 { padding-bottom: .5rem !important; } .pb-5 { padding-bottom: 3rem !important; }
.ps-3 { padding-left: 1rem !important; }
.px-1 { padding-right: .25rem !important; padding-left: .25rem !important; }
.px-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
.px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
.py-1 { padding-top: .25rem !important; padding-bottom: .25rem !important; }
.py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
@media (min-width: 768px) { .p-md-5 { padding: 3rem !important; } }

/* ── Typographie ────────────────────────────────────────────────────────── */
.fs-1 { font-size: 2.5rem !important; }
.fs-3 { font-size: 1.75rem !important; }
.fs-5 { font-size: 1.25rem !important; }
.fw-bold { font-weight: 700 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-normal { font-weight: 400 !important; }
.fst-italic { font-style: italic !important; }
.text-start { text-align: left !important; }
.text-center { text-align: center !important; }
.text-end { text-align: right !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-decoration-none { text-decoration: none !important; }
.text-white { color: #fff !important; }
.text-muted { color: rgba(255,255,255,.65) !important; }
.text-danger { color: #f87171 !important; }
.text-success { color: #4ade80 !important; }
.text-info { color: #38bdf8 !important; }
.list-unstyled { padding-left: 0; list-style: none; }

/* ── Bordures / coins / ombres / fonds ──────────────────────────────────── */
.border { border: 1px solid rgba(158,163,168,.3) !important; }
.border-0 { border: 0 !important; }
.border-secondary { border-color: rgba(158,163,168,.5) !important; }
.border-top { border-top: 1px solid rgba(158,163,168,.2) !important; }
.border-bottom { border-bottom: 1px solid rgba(158,163,168,.2) !important; }
.rounded { border-radius: .375rem !important; }
.rounded-3 { border-radius: .5rem !important; }
.rounded-circle { border-radius: 50% !important; }
.rounded-pill { border-radius: 50rem !important; }
.shadow-sm { box-shadow: 0 .125rem .25rem rgba(0,0,0,.25) !important; }
.bg-success { background-color: #22c55e !important; }
.bg-white { background-color: #fff !important; }

/* ── Boutons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block; padding: .375rem .75rem;
  font-size: 1rem; font-weight: 400; line-height: 1.5;
  color: inherit; text-align: center; text-decoration: none; vertical-align: middle;
  cursor: pointer; user-select: none;
  border: 1px solid transparent; border-radius: .375rem;
  background-color: transparent;
  transition: color .15s, background-color .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.btn:disabled { pointer-events: none; opacity: .65; }
.btn-sm { padding: .25rem .5rem; font-size: .875rem; border-radius: .25rem; }
.btn-lg { padding: .5rem 1rem; font-size: 1.25rem; border-radius: .5rem; }
.btn-primary { color: #fff; background-color: #FF7E1B; border-color: #FF7E1B; }
.btn-secondary { color: #fff; background-color: rgba(255,255,255,.1); border-color: rgba(158,163,168,.2); }
.btn-dark { color: #fff; background-color: #212529; border-color: #212529; }
.btn-dark:hover { background-color: #000; }
.btn-danger { color: #fff; background-color: rgba(239,68,68,.2); border-color: rgba(239,68,68,.4); }
.btn-outline-secondary { color: #fff; border-color: rgba(158,163,168,.3); }
.btn-outline-secondary:hover { background-color: rgba(158,163,168,.1); }
.btn-outline-danger { color: #fff; border-color: rgba(239,68,68,.4); }
.btn-outline-danger:hover { background-color: rgba(239,68,68,.2); }
.btn-outline-light { color: #f8f9fa; border-color: #f8f9fa; }
.btn-outline-light:hover { color: #000; background-color: #f8f9fa; }

/* Croix de fermeture (alertes, dialogues) */
.btn-close {
  width: 1em; height: 1em; padding: .25em;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E") center/1em auto no-repeat;
  border: 0; border-radius: .375rem; opacity: .8; cursor: pointer;
}
.btn-close-white { filter: invert(1) grayscale(100%) brightness(200%); }

/* ── Badge ──────────────────────────────────────────────────────────────── */
.badge {
  display: inline-block; padding: .35em .65em;
  font-size: .75em; font-weight: 700; line-height: 1;
  color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline;
  border-radius: .375rem;
}

/* ── Cartes ─────────────────────────────────────────────────────────────── */
.card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  word-wrap: break-word; background-clip: border-box;
  border: 1px solid rgba(158,163,168,.2); border-radius: .5rem;
}
.card-body { flex: 1 1 auto; padding: 1rem; }
.card-header { padding: .5rem 1rem; margin-bottom: 0; border-bottom: 1px solid rgba(158,163,168,.15); }

/* ── Alertes ────────────────────────────────────────────────────────────── */
.alert { position: relative; padding: 1rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: .5rem; }
.alert-success { background-color: rgba(34,197,94,.1); border-color: rgba(34,197,94,.3); }
.alert-danger  { background-color: rgba(239,68,68,.1); border-color: rgba(239,68,68,.3); }
.alert-warning { background-color: rgba(251,191,36,.1); border-color: rgba(251,191,36,.3); }
.alert-info    { background-color: rgba(56,189,248,.1); border-color: rgba(56,189,248,.3); }

/* ── Formulaires ────────────────────────────────────────────────────────── */
.form-label { margin-bottom: .5rem; }
.form-text { margin-top: .25rem; font-size: .875em; }
.form-control, .form-select {
  display: block; width: 100%;
  padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5;
  border: 1px solid rgba(158,163,168,.3); border-radius: .375rem;
  appearance: none; background-color: transparent; color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus { outline: 0; }
.form-control-lg { padding: .5rem 1rem; font-size: 1.25rem; border-radius: .5rem; }
.form-select { padding-right: 2.25rem; }
.form-select-sm { padding-top: .25rem; padding-bottom: .25rem; padding-left: .5rem; font-size: .875rem; }
textarea.form-control { min-height: calc(1.5em + .75rem + 2px); }
.form-check { display: block; min-height: 1.5rem; padding-left: 1.75em; }
.form-check .form-check-input { float: left; margin-left: -1.75em; }
.form-check-input { flex-shrink: 0; }
.form-check-label { cursor: pointer; }
.form-switch { padding-left: 3.25em; }
.form-switch .form-check-input { margin-left: -3.25em; }
.invalid-feedback { display: none; width: 100%; margin-top: .25rem; font-size: .875em; color: #f87171; }
.is-invalid ~ .invalid-feedback { display: block; }

/* ── Input group ────────────────────────────────────────────────────────── */
.input-group { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; }
.input-group > .form-control, .input-group > .form-select {
  position: relative; flex: 1 1 auto; width: 1%; min-width: 0;
}
.input-group-text {
  display: flex; align-items: center; padding: .375rem .75rem;
  font-size: 1rem; font-weight: 400; line-height: 1.5; white-space: nowrap;
  border: 1px solid rgba(158,163,168,.3); border-radius: .375rem;
}
.input-group > :not(:first-child) { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* ── List group ─────────────────────────────────────────────────────────── */
.list-group { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; border-radius: .5rem; }
.list-group-item { position: relative; display: block; padding: .5rem 1rem; border: 1px solid rgba(158,163,168,.15); }
.list-group-item:not(:first-child) { border-top-width: 0; }
.list-group-item:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.list-group-item:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
.list-group-flush { border-radius: 0; }
.list-group-flush > .list-group-item { border-width: 0 0 1px; }
.list-group-flush > .list-group-item:last-child { border-bottom-width: 0; }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.table { width: 100%; margin-bottom: 1rem; vertical-align: top; }
.table > :not(caption) > * > * { padding: .5rem; border-bottom: 1px solid rgba(158,163,168,.15); }
.table-sm > :not(caption) > * > * { padding: .25rem; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Spinner ────────────────────────────────────────────────────────────── */
@keyframes sf-spinner { to { transform: rotate(360deg); } }
.spinner-border {
  display: inline-block; width: 2rem; height: 2rem; vertical-align: -.125em;
  border: .25em solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: .75s linear infinite sf-spinner;
}
.spinner-border-sm { width: 1rem; height: 1rem; border-width: .2em; }

/* ── Transitions ────────────────────────────────────────────────────────── */
.fade { transition: opacity .15s linear; }
.fade:not(.show) { opacity: 0; }

/* ── sf-dialog : remplace le modal Bootstrap (confirmation, etc.) ───────── */
.sf-dialog-overlay {
  position: fixed; inset: 0; z-index: 2200;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.6); padding: 1rem;
}
.sf-dialog-overlay.open { display: flex; }
.sf-dialog {
  width: 100%; max-width: 420px;
  background: var(--sf-dark2, #2E3238);
  border: 1px solid rgba(158,163,168,.25); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  display: flex; flex-direction: column; max-height: 85vh; overflow: hidden;
}
.sf-dialog-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.1rem; border-bottom: 1px solid rgba(158,163,168,.15);
}
.sf-dialog-title { margin: 0; font-size: 1.05rem; font-weight: 700; }
.sf-dialog-body { padding: 1rem 1.1rem; overflow-y: auto; }
.sf-dialog-footer {
  display: flex; gap: .5rem; justify-content: flex-end;
  padding: .75rem 1.1rem; border-top: 1px solid rgba(158,163,168,.15);
}

/* ── sf-toast : remplace les toasts Bootstrap (messages flash) ──────────── */
.sf-toasts {
  position: fixed; top: .75rem; right: .75rem; left: .75rem; z-index: 2300;
  display: flex; flex-direction: column; gap: .5rem; align-items: flex-end;
  pointer-events: none;
}
.sf-toast {
  display: flex; align-items: center; gap: .6rem;
  max-width: 420px; width: auto;
  padding: .7rem .9rem; border-radius: 12px;
  color: #fff; font-size: .9rem; font-weight: 600;
  box-shadow: 0 6px 24px rgba(0,0,0,.4);
  pointer-events: auto;
  animation: sf-toast-in .3s cubic-bezier(.22,.61,.36,1);
  transition: opacity .3s, transform .3s;
}
.sf-toast.hide { opacity: 0; transform: translateY(-8px); }
@keyframes sf-toast-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
.sf-toast-success { background: #15803d; border: 1px solid rgba(74,222,128,.5); }
.sf-toast-danger  { background: #b91c1c; border: 1px solid rgba(252,165,165,.5); }
.sf-toast-warning { background: #b45309; border: 1px solid rgba(253,224,71,.4); }
.sf-toast-info    { background: #0369a1; border: 1px solid rgba(125,211,252,.5); }
.sf-toast .sf-toast-close {
  margin-left: auto; border: none; background: none; color: rgba(255,255,255,.7);
  font-size: .9rem; cursor: pointer; padding: .15rem; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .sf-toast, .fade, .spinner-border { animation: none; transition: none; }
}