/* ================================================================
   CEPSO Formations – Feuille de style  v3.0.0
   ================================================================ */

/* ── Variables ─────────────────────────────────────────────────── */
:root {
  --cepso-primary:      #2E3188;
  --cepso-presentiel:   #3FA7F3;
  --cepso-visio:        #5D1854;
  --cepso-orange:       #ff7007;
  --cepso-border:       #d1d5db;
  --cepso-bg-head:      #f1f5f9;
  --cepso-bg-even:      #f9fafb;
  --cepso-blanc:        #ffffff;
  --cepso-noir:         #363636;
  --cepso-radius:       6px;
  --cepso-shadow:       0 2px 8px rgba(0,0,0,.08);
}

/* ================================================================
   ACCORDÉON – Mode toutes catégories
   ================================================================ */

.cepso-categorie {
  margin-bottom: 1rem;
}

/* ── Titre / bouton accordéon ──────────────────────────────────── */
.cepso-cat-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  padding: .65rem 1rem;
  font-size: 22px!important;
  background: rgb(255 171 7 / 10%);
  border-left: 4px solid var(--cepso-orange);
  border-radius: 0 var(--cepso-radius) var(--cepso-radius) 0;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #ff7007!important;
  cursor: pointer;
  user-select: none;
  transition: background .2s;
}

.cepso-cat-title:hover {
  background: rgb(255 171 7 / 20%);
}

/* ── Chevron ───────────────────────────────────────────────────── */
.cepso-cat-chevron {
  display: inline-flex;
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  transition: transform .3s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff7007' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.cepso-cat-title[aria-expanded="false"] .cepso-cat-chevron {
  transform: rotate(-90deg);
}

/* ── Compteur ──────────────────────────────────────────────────── */
.cepso-cat-count {
  font-size: .8rem;
  font-weight: 500;
  opacity: .65;
  letter-spacing: 0;
  text-transform: none;
  margin-left: auto;
}

/* ── Corps de la catégorie (masqué par défaut) ─────────────────── */
.cepso-cat-body {
  display: none;
  padding-top: .85rem;
}

/* ================================================================
   TABLE
   ================================================================ */

/* ── Table wrapper (scroll horizontal sur mobile) ──────────────── */
.cepso-table-wrapper {
  overflow-x: auto;
  border-radius: var(--cepso-radius);
  box-shadow: var(--cepso-shadow);
}

.cepso-table {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
  table-layout: fixed;
  margin-block-end: 0;
}

.cepso-table thead th {
  background: rgb(255 171 7 / 10%);
  color: var(--cepso-orange);
  text-align: left;
  padding: .75rem 1rem;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}

/* ── Largeurs des colonnes ─────────────────────────────────────── */
/* Col 1 – Thème du stage */
.cepso-table th:nth-child(1),
.cepso-table td:nth-child(1) { width: auto; }
/* Col 2 – Date */
.cepso-table th:nth-child(2),
.cepso-table td:nth-child(2) { width: 155px; white-space: nowrap; text-align: center; }
/* Col 3 – Durée */
.cepso-table th:nth-child(3),
.cepso-table td:nth-child(3) { width: 90px;  white-space: nowrap; text-align: center; }
/* Col 4 – Places */
.cepso-table th:nth-child(4),
.cepso-table td:nth-child(4) { width: 160px; white-space: nowrap; text-align: center; }
/* Col 5 – Panier + quantité */
.cepso-table th:nth-child(5),
.cepso-table td:nth-child(5) { width: 155px; white-space: nowrap; text-align: center; }

/* ── Groupe quantité + bouton panier ───────────────────────────── */
.cepso-cart-group {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  justify-content: center;
}

/* ── Input nombre de places ─────────────────────────────────────── */
.cepso-qty-input {
  width: 58px;
  height: 38px;
  padding: 0 .35rem !important;
  border: 1px solid var(--cepso-border) !important;
  border-radius: var(--cepso-radius) !important;
  font-size: .9rem !important;
  text-align: center;
  color: var(--cepso-noir);
  background: var(--cepso-blanc);
  box-shadow: none !important;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  -moz-appearance: textfield;
}

.cepso-qty-input:focus {
  border-color: var(--cepso-orange) !important;
  box-shadow: 0 0 0 2px rgba(255,112,7,.15) !important;
}

/* Masquer les flèches natives sur Chrome/Safari */
.cepso-qty-input::-webkit-inner-spin-button,
.cepso-qty-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cepso-table thead th:first-child { border-radius: var(--cepso-radius) 0 0 0; }
.cepso-table thead th:last-child  { border-radius: 0 var(--cepso-radius) 0 0; }

.cepso-table tbody tr {
  border-bottom: 1px solid var(--cepso-border);
  background-color: var(--cepso-blanc);
  transition: background .15s;
}
.cepso-table tbody tr td {
  background-color: hsla(0,0%,50%,0)!important;
}

.cepso-table tbody tr:nth-child(even) { background-color: var(--cepso-blanc); }
.cepso-table tbody tr:hover           { background-color: var(--cepso-blanc); }

.cepso-table tbody tr.cepso-row--link          { cursor: pointer; }
.cepso-table tbody tr.cepso-row--link:hover    { background: #dbeafe; }

/* ── Lien sur le titre de la formation ─────────────────────────── */
.cepso-theme-link {
  color: var(--cepso-noir)!important;
  font-weight: 600;
  text-decoration: underline !important;
  text-decoration-color: currentColor;
  transition: color .15s, text-decoration-color .15s;
}

.cepso-theme-link:hover {
  color: var(--cepso-orange)!important;
  text-decoration: none!important;
}

/* ── Bouton panier ──────────────────────────────────────────────── */
.cepso-col-cart {
  padding: .4rem .5rem !important;
}

.cepso-cart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--cepso-radius);
  border: none;
  background-color: var(--e-global-color-5a853ed);
  color: var(--cepso-blanc)!important;
  cursor: pointer;
  text-decoration: none !important;
  transition: background .18s, transform .1s, box-shadow .18s;
  flex-shrink: 0;
}

.cepso-cart-btn:hover {
  background-color: var(--e-global-color-secondary);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(46,49,136,.35);
}

.cepso-cart-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.cepso-cart-btn--disabled {
  background: #d1d5db!important;
  color: #9ca3af!important;
  cursor: not-allowed;
  pointer-events: none;
}

.cepso-btn-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
  display: block;
  flex-shrink: 0;
}

.cepso-table td {
  padding: .65rem 1rem;
  vertical-align: middle;
  font-size: .9rem;
}

/* ── Séparateurs de groupes (Présentiel / Visio) ───────────────── */
.cepso-table tbody tr.cepso-separator td {
  padding: .6rem 1rem;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
}

.cepso-table tbody tr.cepso-sep-presentiel>td {
  background: rgb(255 171 7 / 5%)!important;
  color: var(--cepso-orange);
  border-bottom-color: hsla(0,0%,50%,.502);
}

.cepso-table tbody tr.cepso-sep-visio td {
  background: rgb(255 171 7 / 5%)!important;
  color: var(--cepso-orange);
  border-bottom-color: hsla(0,0%,50%,.502);
}

/* ================================================================
   BADGES PLACES
   ================================================================ */

.cepso-places-ok {
  display: inline-block;
  padding: .2rem .55rem;
  background: #dcfce7;
  color: #15803d;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
}

.cepso-places-low {
  display: inline-block;
  padding: .2rem .55rem;
  background: #fff7ed;
  color: #c2410c;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
}

.cepso-places-full {
  display: inline-block;
  padding: .2rem .55rem;
  background: #fff3cd;
  color: #856404;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
}

.cepso-places-na {
  color: #9ca3af;
}

/* ── Message « aucun résultat » ────────────────────────────────── */
.cepso-vide {
  text-align: center;
  padding: 2rem;
  color: #6b7280;
  font-style: italic;
}

/* ── Messages d'erreur ─────────────────────────────────────────── */
.cepso-error,
.cepso-no-results {
  padding: .75rem 1rem;
  border-radius: var(--cepso-radius);
  font-size: .9rem;
}

.cepso-error      { background: #fee2e2; color: #b91c1c; }
.cepso-no-results { background: #f3f4f6; color: #6b7280; }

/* ================================================================
   Barre CTA fixe – S'inscrire à une formation
   ================================================================ */
.cepso-insc-cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  background: var(--cepso-primary);
  padding: .85rem 2rem;
  box-shadow: 0 -4px 18px rgba(46,49,136,.25);

  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .35s;
  opacity: 0;
  pointer-events: none;
}

.cepso-insc-cta-bar.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.cepso-insc-cta-text {
  margin: 0;
  font-size: .9375rem;
  color: rgba(255,255,255,.85);
  font-weight: 500;
  white-space: nowrap;
}

.cepso-insc-cta-btn {
  display: inline-flex;
  align-items: center;
  padding: .6rem 1.5rem !important;
  background: #ffffff;
  color: var(--cepso-primary) !important;
  border: none !important;
  border-radius: var(--cepso-radius);
  font-size: .9375rem !important;
  font-weight: 700;
  text-decoration: none !important;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .2s, transform .1s;
  white-space: nowrap;
}

.cepso-insc-cta-btn:hover  { background: #eef2ff; transform: translateY(-1px); }
.cepso-insc-cta-btn:active { transform: translateY(0); }

body.has-cepso-cta { padding-bottom: 72px; }

/* ================================================================
   Barre de recherche globale
   ================================================================ */
.cepso-search-wrap {
  position: relative;
  margin-bottom: 1.5rem;
}

button#cepso-search-clear {
    background-color: var(--cepso-orange);
}

.cepso-search-inner {
  display: flex;
  align-items: center;
  background: var(--cepso-blanc);
  border: 2px solid var(--cepso-border);
  border-radius: var(--cepso-radius);
  box-shadow: var(--cepso-shadow);
  transition: border-color .2s, box-shadow .2s;
  padding: 0 .75rem;
}

.cepso-search-inner:focus-within {
  border-color: var(--cepso-orange);
  box-shadow: 0 0 0 3px rgba(46,49,136,.15);
}

.cepso-search-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: #9ca3af;
  margin-right: .5rem;
}

.cepso-search-input {
  flex: 1;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: .75rem 0 !important;
  font-size: 1rem !important;
  color: var(--cepso-noir);
  background: transparent;
  min-width: 0;
}

.cepso-search-input::placeholder { color: #9ca3af; }
.cepso-search-input::-webkit-search-cancel-button { display: none; }

.cepso-search-clear {
  flex-shrink: 0;
  background: none;
  border: none !important;
  font-size: 1.25rem;
  line-height: 1;
  color: #9ca3af;
  cursor: pointer;
  padding: 0 .2rem !important;
  transition: color .15s;
}
.cepso-search-clear:hover { color: var(--cepso-orange); }

/* ── Panneau de résultats ── */
.cepso-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 999;
  background: var(--cepso-blanc);
  border: 1px solid var(--cepso-border);
  border-radius: var(--cepso-radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  overflow: hidden;
}

.cepso-search-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cepso-search-result {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .7rem 1rem;
  text-decoration: none !important;
  color: var(--cepso-primary);
  transition: background .15s;
  border-bottom: 1px solid #f3f4f6;
}

.cepso-search-list li:last-child .cepso-search-result { border-bottom: none; }
.cepso-search-result:hover { background: #eef2ff; }

.cepso-search-theme {
  font-size: .9rem;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cepso-search-meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .78rem;
  color: #6b7280;
}

.cepso-search-date   { white-space: nowrap; }
.cepso-search-cat    { white-space: nowrap; font-style: italic; }

.cepso-search-mode {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}

.cepso-search-mode--presentiel { background: #dbeafe; color: var(--cepso-primary); }
.cepso-search-mode--visio      { background: #ede9fe; color: #5b21b6; }

/* Mise en évidence du texte correspondant */
.cepso-search-result mark {
  background: #fef08a;
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

.cepso-search-empty,
.cepso-search-hint {
  margin: 0;
  padding: .75rem 1rem;
  font-size: .875rem;
  color: #6b7280;
  font-style: italic;
}

.cepso-search-hint {
  border-top: 1px solid #f3f4f6;
  font-style: normal;
  font-size: .8rem;
  text-align: center;
}

/* ================================================================
   Responsive – vue carte sur mobile (< 992 px)
   ================================================================ */
@media (max-width: 991px) {

  .cepso-table-wrapper { overflow-x: visible; }

  .cepso-table {
    table-layout: auto;
    min-width: 0;
    width: 100%;
  }

  .cepso-table thead { display: none; }

  .cepso-table tbody,
  .cepso-table tr    { display: block; width: 100%; }

  .cepso-table tr {
    margin-bottom: 1rem;
    border: 1px solid var(--cepso-border);
    border-radius: var(--cepso-radius);
    overflow: hidden;
  }

  .cepso-table th,
  .cepso-table td {
    display: flex;
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
    padding: .55rem .9rem;
    font-size: .875rem;
    border-bottom: 1px solid #f3f4f6;
  }

  .cepso-table td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: .8rem;
    color: var(--cepso-primary);
    text-transform: uppercase;
    letter-spacing: .04em;
    flex: 0 0 40%;
  }

  /* ── Barre CTA : texte masqué, seul le bouton reste ── */
  .cepso-insc-cta-bar   { gap: .6rem; padding: .7rem 1rem; }
  .cepso-insc-cta-text  { display: none; }
  .cepso-insc-cta-btn   { width: 100%; text-align: center; justify-content: center; }
  body.has-cepso-cta    { padding-bottom: 60px; }
}