/* ISM Front Styles */
:root{ --ism-accent:#4CAAB0; --ism-black:#0b0b0c; --ism-muted:#6b7280; --ism-border:#e5e7eb; }
.ism-catalog{ display:grid; gap:24px; margin:24px 0; }
.ism-cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.ism-cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.ism-cols-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width:900px){ .ism-cols-4,.ism-cols-3{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .ism-cols-4,.ism-cols-3,.ism-cols-2{ grid-template-columns: 1fr; } }

.ism-card{ display:block; border:1px solid var(--ism-border); border-radius:14px; overflow:hidden; background:#fff; text-decoration:none; color:inherit; box-shadow: 0 4px 18px rgba(0,0,0,.05); transition: transform .2s ease, box-shadow .2s ease; }
.ism-card:hover{ transform: translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.08); border-color: var(--ism-accent); }
.ism-card-thumb img{ display:block; width:100%; height:auto; aspect-ratio: 16/9; object-fit: cover; }
.ism-card-body{ padding:16px; }
.ism-card-title{ margin:0 0 8px; font-weight:700; color:#111; }
.ism-card-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.ism-badge{ background:#111; color:#fff; border-radius:999px; padding:6px 10px; font-size:.82rem; }
.ism-badge:nth-child(odd){ background: var(--ism-accent); }

.ism-card-excerpt{ margin:0; color:var(--ism-muted); }

/* Single */
.ism-single{ max-width: 1100px; margin: 0 auto; padding: 28px 16px; }
.ism-hero-img img{ width:100%; height:auto; border-radius:16px; }
.ism-hero-title{ font-size: clamp(28px, 4vw, 40px); margin: 14px 0 10px; color: var(--ism-black); }
.ism-hero-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 16px; }
.ism-section{ margin-top: 28px; }
.ism-points{ padding-left: 1.2em; }
.ism-year{ color: var(--ism-black); margin: 16px 0 8px; }
.ism-table-wrap{ border:1px solid var(--ism-border); border-radius: 12px; overflow:hidden; }
.ism-grid{ width:100%; border-collapse: collapse; }
.ism-grid th, .ism-grid td{ border-bottom:1px solid var(--ism-border); padding:12px 14px; }
.ism-grid th{ background:#f9fafb; text-align:left; }

/* Accent elements */
.ism-hero-title::selection, .ism-card-title::selection { background: var(--ism-accent); color:#fff; }

/* Big Filter Header */
.ism-filter-wrap{ margin:24px 0 10px; background:linear-gradient(135deg,#0f1115,#1b1f27); border-radius:16px; padding:18px; color:#fff; box-shadow:0 10px 24px rgba(0,0,0,.18); }
.ism-filter-inner{ display:flex; flex-direction:column; gap:14px; }
.ism-filter-row{ display:grid; grid-template-columns: 1fr 1fr 1.2fr; gap:14px; gap:14px; }
@media(max-width:900px){ .ism-filter-row{ display:grid; grid-template-columns: 1fr 1fr 1.2fr; gap:14px; } }
.ism-filter-group{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:8px; justify-content:space-between; }
.ism-filter-label{ font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; opacity:.8; display:block; margin-bottom:8px; }

.ism-seg{ display:inline-flex; gap:8px; background:rgba(255,255,255,.06); padding:6px; border-radius:999px; }
.ism-seg-btn{ background:transparent; border:none; color:#fff; padding:8px 14px; border-radius:999px; cursor:pointer; transition:all .15s ease; }
.ism-seg-btn.active{ background:#4CAAB0; color:#0b0b0c; font-weight:700; }

.ism-pills{ display:flex; flex-wrap:wrap; gap:8px; }
.ism-pill{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:6px 10px; cursor:pointer; }
.ism-pill.active{ background:#4CAAB0; color:#0b0b0c; border-color:#4CAAB0; }

.ism-filter-search input[type=search]{ width:100%; padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#fff; outline:none; }
.ism-filter-search input::placeholder{ color:rgba(255,255,255,.6); }

.ism-filter-meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.92rem; opacity:.9; }
.ism-reset{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:10px; padding:6px 10px; cursor:pointer; }
.ism-reset:hover{ border-color:#4CAAB0; color:#4CAAB0; }

/* Visual Cards */
.ism-card.visual-only{ position:relative; border:none; border-radius:16px; overflow:hidden; background:#0b0b0c; box-shadow:0 8px 24px rgba(0,0,0,.22); }
.ism-card.visual-only .ism-card-thumb{ position:relative; }
.ism-card.visual-only .ism-card-thumb img, .ism-thumb-placeholder{ width:100%; height:auto; display:block; aspect-ratio:1/1; object-fit:cover; background:#0e1116; }
.ism-card.visual-only .ism-card-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:22px; background: linear-gradient(180deg, rgba(0,0,0,.0) 35%, rgba(0,0,0,.78) 100%); }
.ism-card.visual-only .ism-card-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.ism-card.visual-only .ism-badge{ background:rgba(224,224,224,.20); color:#fff; border:none; border-radius:999px; padding:8px 12px; font-size:.86rem; line-height:1; backdrop-filter: blur(4px) saturate(115%); box-shadow: 0 2px 6px rgba(0,0,0,.22); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.ism-card.visual-only .ism-card-badge-accent{ background:#4CAAB0; color:#0b0b0c; border-color:#4CAAB0; }
.ism-card.visual-only .ism-card-title{ margin:0; color:#fff; font-weight:800; font-size: clamp(22px, 3vw, 28px); text-shadow: 0 1px 3px rgba(0,0,0,.75); }

/* Neutral hover states for filters (no pink) */
.ism-seg-btn:hover:not(.active){
  background: rgba(224,224,224,.20);
  color:#fff;
}
.ism-pill:hover{
  background: rgba(224,224,224,.20);
  color:#fff;
  border-color: rgba(224,224,224,.35);
}

/* --- Responsive filter tweaks --- */
@media (max-width: 900px){
  .ism-filter-row{
    grid-template-columns: 1fr;
  }
  .ism-filter-group{
    width: 100%;
  }
  .ism-filter-meta{
    flex-wrap: wrap;
    gap: 10px;
  }
}
/* Type segmented control: wrap cleanly and avoid overflow on small screens */
.ism-seg{
  width: 100%;
  flex-wrap: wrap;
}
.ism-seg-btn{
  /* allow wrapping nicely */
  flex: 0 1 auto;
  min-width: 140px;
  text-align: center;
}
@media (max-width: 560px){
  .ism-seg-btn{
    flex: 1 1 100%;
    min-width: 0;
  }
}
/* Organisation pills: wrap + spacing */
.ism-pills{
  width: 100%;
  flex-wrap: wrap;
  gap: 10px;
}
.ism-pill{
  flex: 0 1 auto;
  min-width: 160px;
  text-align: center;
}
@media (max-width: 560px){
  .ism-pill{
    flex: 1 1 100%;
    min-width: 0;
  }
}
/* Search input spans full width on narrow screens */
@media (max-width: 900px){
  .ism-filter-search input[type=search]{
    width: 100%;
  }
}

/* --- Responsive segmented control fix --- */
/* Desktop: keep the glossy pill track */
.ism-seg{
  background: rgba(255,255,255,.06);
  padding: 6px;
  border-radius: 999px;
}

/* Tablet & down: remove track so wrapping looks clean */
@media (max-width: 900px){
  .ism-seg{
    background: transparent;
    padding: 0;
    border-radius: 0;
    gap: 10px;
  }
  .ism-seg-btn{
    flex: 1 1 100%;
    min-width: 0;
    text-align: center;
    border: 1px solid rgba(224,224,224,.20);
    background: rgba(224,224,224,.10);
    padding: 10px 14px;
    border-radius: 10px;
  }
  .ism-seg-btn.active{
    background: #4CAAB0;
    color: #0b0b0c;
    border-color: #4CAAB0;
  }
  .ism-seg-btn:hover:not(.active){
    background: rgba(224,224,224,.18);
    color: #fff;
  }
}

/* --- Layout: Type on top (desktop) --- */
.ism-filter-row{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap:14px;
}
.ism-filter-row > .ism-filter-group:first-child{
  grid-column: 1 / -1; /* Type spans full width */
}
@media (max-width: 900px){
  .ism-filter-row{
    grid-template-columns: 1fr; /* already stacked on mobile */
  }
  .ism-filter-row > .ism-filter-group:first-child{
    grid-column: auto;
  }
}

/* --- Segmented control rail sizing (desktop) --- */
.ism-filter-group .ism-seg{
  display: inline-flex;
  width: auto;
  flex-wrap: nowrap;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

/* Keep mobile behavior */
@media (max-width: 900px){
  .ism-filter-group .ism-seg{
    display: flex;
    width: 100%;
    justify-content: stretch;
    margin-left: 0;
    margin-right: 0;
  }
}

/* === Single revamp (bannière, badges, sections) === */
.ism-hero-full{ width:100vw; margin-left: calc(50% - 50vw); }
.ism-hero-full__img, .ism-hero-full__placeholder{
  width:100%; height: clamp(280px, 45vh, 520px); object-fit: cover; display:block;
}
.ism-hero-full__placeholder{ background:#0f1115; }

.container.ism-single-wrap{ max-width:1100px; margin:0 auto; padding:20px 16px; }

/* Badges : bleu foncé (#0f1e25) + texte clair */
.ism-badges-row{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.ism-badge{
  background:#0f1e25; color:#e6f4f5;
  border:1px solid rgba(76,170,176,.35);
  border-radius:999px; padding:7px 11px; font-size:.85rem; line-height:1;
}

.ism-section{ margin:24px 0; }
.ism-section__title{ font-size: clamp(22px, 3.4vw, 30px); margin:0 0 8px; color:#0b0b0c; }
.ism-section__title.inv{ color:#fff; }

.ism-intro{ font-size:1.05rem; color:#1a1f26; }

/* — Checklist avec icône Elementor — */
.ism-checklist{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ism-checklist li{ display:flex; gap:10px; align-items:flex-start; }
.ism-check{
  width:22px; height:22px; flex:0 0 22px;
  display:flex; align-items:center; justify-content:center;
  margin-top:2px;
  color:#4CAAB0; /* couleur de l'icône (currentColor) */
}
.ism-check .elementor-icon{ line-height:0; display:inline-flex; }
.ism-check .e-font-icon-svg{ width:22px; height:22px; display:block; }
.ism-check .e-font-icon-svg path{ fill: var(--ism-accent); } /* comme Elementor */

/* — Carte bleu foncé “Et après ?” — */
.ism-card-blue{
  background:#0f1e25; border:1px solid rgba(76,170,176,.35);
  border-radius:16px; padding:18px; color:#e8f3f4;
}
.ism-deb{ margin:0; color:#d7eef0; }

/* === Contrôles grilles (toggle + select) === */
.ism-grid-controls{
  display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin-bottom:14px;
}
.ism-toggle{
  display:flex; gap:10px; align-items:center;
  padding:0; background:transparent; border:0;
}
.ism-toggle__btn{
  -webkit-appearance:none; appearance:none;
  border:1px solid rgba(15,30,37,.18);
  background:transparent;
  color:#0f1e25;
  padding:10px 16px;
  border-radius:999px;
  font-weight:700;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
  outline:none;
  -webkit-tap-highlight-color: transparent;
}
.ism-toggle__btn:hover{
  background:rgba(15,30,37,.06);
  border-color:rgba(15,30,37,.28);
}
.ism-toggle__btn.is-active{
  background:#4CAAB0;
  color:#0b0b0c;
  border-color:#4CAAB0;
  box-shadow:0 2px 10px rgba(76,170,176,.25);
}
.ism-toggle__btn:focus,
.ism-toggle__btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(76,170,176,.25);
  border-color:#4CAAB0;
}
.ism-select label{ display:block; font-size:.95rem; color:#4b5563; margin-bottom:6px; }
.ism-select select{
  -webkit-appearance:none; appearance:none;
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  min-width:120px;
  background:#fff; color:#0f1e25;
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.ism-select select:hover{ border-color:#d1d5db; }
.ism-select select:focus,
.ism-select select:focus-visible{
  outline:none;
  border-color:#4CAAB0;
  box-shadow:0 0 0 2px rgba(76,170,176,.25);
}

/* === Grille moderne v2 (compact + barres + total) === */
.ism-grid-modern2{
  border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; background:#fff;
}
.ism-grid-modern2__head{
  display:flex; align-items:center; gap:12px; padding:12px;
  background:#f9fafb; border-bottom:1px solid #e5e7eb;
}
.ism-grid-modern2__head .title{ font-weight:700; }

.ism-grid-modern2__row{ padding:12px; border-top:1px solid #f2f4f7; }
.ism-grid-modern2__row .top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.ism-grid-modern2__row .label{ font-weight:600; line-height:1.3; }
.ism-grid-modern2__row .hours{
  font-variant-numeric: tabular-nums;
  background:#0f1e25; color:#e6f4f5; border-radius:999px; padding:4px 10px;
}
.ism-grid-modern2__row .bar{
  margin-top:8px; height:6px; border-radius:999px; background:#eef2f7; overflow:hidden;
}
.ism-grid-modern2__row .bar > span{ display:block; height:100%; background:#4CAAB0; }

.ism-grid-modern2__foot{
  display:flex; justify-content:flex-end; gap:8px; padding:10px 12px;
  background:#fafafa; border-top:1px solid #e5e7eb; font-weight:600;
}

/* État vide */
.ism-grid-empty{
  padding:12px; background:#fff; border:1px dashed #e5e7eb;
  border-radius:12px; color:#6b7280;
}

/* === Aération globale === */
.ism-hero-full { margin-bottom: 22px; }
.container.ism-single-wrap { max-width: 1140px; padding: 28px 18px; }
.ism-section__title { margin: 0 0 14px; line-height: 1.2; }
.ism-single-wrap p, .ism-single-wrap li { line-height: 1.65; }
.ism-section { margin: 34px 0; }
@media (max-width: 900px){ .ism-section { margin: 28px 0; } }
.ism-badges-row { gap: 10px 10px; margin: 18px 0 8px; }
.ism-badge { padding: 8px 12px; }
.ism-checklist { gap: 12px; }
.ism-card-blue { padding: 22px; }
@media (max-width: 520px){ .ism-card-blue { padding: 18px; } }
.ism-grid-controls { gap: 18px; margin: 16px 0 16px; }
.ism-toggle__btn { padding: 11px 18px; }
.ism-grid-modern2__head { padding: 14px; }
.ism-grid-modern2__row  { padding: 14px; }
.ism-grid-modern2__row .top { gap: 14px; }
.ism-grid-modern2__foot { padding: 12px 14px; }
@media (max-width: 520px){
  .container.ism-single-wrap { padding: 24px 14px; }
  .ism-grid-controls { gap: 12px; }
  .ism-toggle__btn { padding: 10px 14px; }
}

.ism-toggle__btn.is-active:hover {
    border: 1px solid #6b6b6b;
}

/* Ligne header d’un cours */
.ism-grid-modern2__row .top{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

/* Titre du cours : peut revenir à la ligne */
.ism-grid-modern2__row .label{
  flex:1 1 auto;
  min-width:0;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Compteur d’heures : JAMAIS cassé */
.ism-grid-modern2__row .hours{
  flex:0 0 auto;
  min-width:3ch;            /* au moins "99h" */
  text-align:right;
  white-space:nowrap;       /* empêche le retour à la ligne */
  font-weight:700;
}