body { scroll-behavior: smooth; }
.navbar .nav-link.active {
  font-weight: 600;
  color: #0d6efd;
}

/* Bloc image pleine largeur (colonne droite) */
.hero-portrait {
    border-radius: 1rem;
    overflow: hidden;
    /* box-shadow: 0 4px 14px rgba(0,0,0,.08); */
    background: transparent;
  }
  .hero-portrait img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }
  
  .hero-image {
  max-width: 80%;
  /* height: auto; */
  border-radius: 1rem;
  /* overflow: hidden; */
  /* box-shadow: 0 4px 14px rgba(0,0,0,.08); */
}

/* Rail de cartes */
.feature-row {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    scroll-snap-type: x proximity;
  }
  
  /* Carte */
  .feature-card {
    position: relative;
    flex: 1 1 280px;          /* largeur de base */
    min-width: 220px;
    max-width: 720px;
    height: 360px;
    border-radius: 16px;
    overflow: hidden;
    scroll-snap-align: start;
    transition: flex-basis .35s ease, transform .35s ease, box-shadow .35s ease;
    box-shadow: 0 8px 30px rgba(0,0,0,.18);
    cursor: pointer;
  }
  
  /* Quand le conteneur est survolé, toutes se rétractent… */
  .feature-row:hover .feature-card { flex: 0 0 150px; }
  /* …sauf la carte survolée/focus qui s’étend */
  .feature-card:hover,
  .feature-card:focus-within {
    flex: 1 1 640px;
    transform: translateY(-2px);
    box-shadow: 0 14px 40px rgba(0,0,0,.22);
  }
  
  /* Image de fond */
  .fc-bg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: saturate(1.05);
  }
  
  /* Dégradé d’assombrissement pour la lisibilité */
  .feature-card::after {
    content: "";
    position: absolute; inset: 0;
    /* background: linear-gradient(135deg, rgba(0,0,0,.45), rgba(0,0,0,.2) 40%, rgba(0,0,0,0) 70%); */
    pointer-events: none;
  }
  
  /* Titre vertical (état compact) */
  .fc-label {
    position: absolute;
    left: 8px; top: 16px; bottom: 16px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    color: rgba(255,255,255,.9);
    font-weight: 600;
    letter-spacing: .5px;
  }
  
  /* Contenu interne (état étendu) */
  .fc-body {
    position: absolute;
    inset: 0;
    padding: 24px;
    color: #fff;
    display: grid;
    align-content: center;
    gap: .5rem;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s ease, transform .25s ease;
  }
  
  /* Afficher le corps en état étendu */
  .feature-card:hover .fc-body,
  .feature-card:focus-within .fc-body {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Styles des titres & textes */
  .fc-body h3 {
    margin: 0 0 .25rem 0;
    font-weight: 700;
  }
  .fc-body p { margin: 0 0 .5rem 0; }
  
  /* Dégradés de fond doux (apparaissent quand l'image est sombre/absente) */
  .gradient-blue   { background: radial-gradient(1200px 600px at 10% 10%, #5b7fff 0%, #28376b 60%, #101828 100%); }
  .gradient-pink   { background: radial-gradient(1200px 600px at 10% 10%, #ffa1c1 0%, #8b4473 60%, #1f1026 100%); }
  .gradient-teal   { background: radial-gradient(1200px 600px at 10% 10%, #7ad7cf 0%, #407a86 60%, #0d1b1e 100%); }
  .gradient-purple { background: radial-gradient(1200px 600px at 10% 10%, #caa8ff 0%, #6a3ea1 60%, #1a1330 100%); }
  
  /* Responsive : en mobile on empile sans effet d’étirement */
  @media (max-width: 768px) {
    .feature-row {
      flex-direction: column;
    }
    .feature-row:hover .feature-card { flex: 1 1 auto; }
    .feature-card { height: 300px; }
    .fc-label { display: none; }         /* on évite le texte vertical sur mobile */
    .fc-body { opacity: 1; }             /* le contenu est toujours visible en mobile */
  }
  
  /* ==== THEME CLAIR POUR LA SECTION CATEGORIES ==== */

/* Menu catégories (pills) */
.category-menu {
  display: flex; flex-direction: column; gap: .75rem;
  position: sticky; top: 90px;
}
.cat-btn {
  background: #f8fafc;                 /* slate-50 */
  border: 1px solid #e5e7eb;            /* slate-200 */
  color: #334155;                       /* slate-700 */
  padding: .75rem 1rem;
  border-radius: 999px;
  text-align: left;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s;
}
.cat-btn:hover {
  background: #eef2ff;                  /* indigo-50 */
  border-color: #dbeafe;                /* blue-100 */
  color: #1f2937;                       /* slate-800 */
}
.cat-btn.active, .cat-btn[aria-selected="true"] {
  background: #2563eb;                  /* blue-600 */
  border-color: #2563eb;
  color: #fff;
  box-shadow: 0 6px 18px rgba(37, 99, 235, .18);
}

/* Panneaux */
.subcategory-panel { transition: opacity .2s ease; }
.is-hidden { display: none; opacity: 0; }

/* Cartes sous-catégories (claires) */
.subcard {
  position: relative; display: block; text-decoration: none;
  border-radius: 16px; overflow: hidden; height: 260px;
  border: 1px solid #e5e7eb;            /* léger contour */
  background: #fff; color: #0f172a;     /* texte foncé */
  box-shadow: 0 6px 16px rgba(2, 6, 23, .06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.subcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(2, 6, 23, .10);
  border-color: #dbeafe;                 /* bleu très léger */
}

/* Image/placeholder */
.subcard-media, .subcard-img, .media-fallback {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.subcard-img { object-fit: cover; }

/* Dégradés clairs de secours (si pas d'image) */
.media-fallback { opacity: 1; }
.gradient-teal   .media-fallback  { background: radial-gradient(800px 400px at 10% 10%, #e6fffb 0%, #c7f5ef 55%, #ebf9ff 100%); }
.gradient-purple .media-fallback  { background: radial-gradient(800px 400px at 10% 10%, #f3e8ff 0%, #e9d5ff 55%, #eef2ff 100%); }

/* Voile de lisibilité très léger (clair) */
.subcard::after {
  content:""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.0) 40%, rgba(255,255,255,.55) 100%);
}

/* Contenu */
.subcard-body {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
  padding: 16px;
}
.subcard-title { font-weight: 700; font-size: 1.05rem; color: #0f172a; }
.subcard-cta {
  align-self: flex-start; padding: .35rem .6rem; border-radius: 999px;
  background: rgba(37,99,235,.10); color: #1d4ed8;   /* bleu clair */
  font-size: .85rem; border: 1px solid rgba(37,99,235,.15);
}

/* Liens internes des cartes : toujours en couleur carte (pas bleu par défaut) */
a.subcard, a.subcard:hover { color: inherit; text-decoration: none; }

/* Responsive */
@media (max-width: 768px) {
  .category-menu { flex-direction: row; overflow-x: auto; gap: .5rem; }
  .cat-btn { white-space: nowrap; }
  .subcard { height: 220px; }
}

/* (Option) Harmonise les titres de section en thème clair */
section.bg-white .display-6 { color: #0f172a; }
section.bg-white p, section.bg-white .text-muted { color: #334155; }



/* ---- Panel ---- */
.opp-panel .card-title { font-weight: 700; }

/* ---- Cartes ---- */
.opp-card{
  border:1px solid #e5e7eb; border-radius:14px; background:#fff;
  box-shadow:0 6px 16px rgba(2,6,23,.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
}
.opp-card:hover{
  transform: translateY(-2px);
  box-shadow:0 12px 28px rgba(2,6,23,.10);
  border-color:#dbeafe;
}
/* liseré gauche par type */
.opp-card.type-job{    border-left:4px solid #1d4ed8; }
.opp-card.type-grant{  border-left:4px solid #059669; }
.opp-card.type-event{  border-left:4px solid #ea580c; }
.opp-card.type-project{border-left:4px solid #7c3aed; }

.opp-title-link{
  font-weight:600; color:#0f172a; text-decoration:none;
}
.opp-title-link:hover{ color:#1d4ed8; }

.opp-meta{
  display:flex; gap:.75rem; flex-wrap:wrap;
  color:#475569; font-size:.9rem;
}
.opp-meta i{ opacity:.7; }

.opp-badge{
  font-size:.75rem; border-radius:999px; padding:.25rem .5rem;
  border:1px solid transparent; background:#eff6ff; color:#1d4ed8; /* défaut bleu */
}
.type-grant .opp-badge{   background:#ecfdf5; color:#047857; border-color:#bbf7d0; }
.type-event .opp-badge{   background:#fff7ed; color:#c2410c; border-color:#fed7aa; }
.type-project .opp-badge{ background:#f5f3ff; color:#6d28d9; border-color:#ddd6fe; }

.opp-actions .btn{ padding:.35rem .6rem; font-size:.85rem; }

/* ---- Teaser vérouillé pour visiteurs ---- */
.opp-locked .locked-overlay{
  position:absolute; inset:0; display:grid; place-items:center;
  background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.9));
  border-radius:12px;
}



/* sa se pou seeker */

/* Filtres */
.btn-filter{
  background:#f8fafc;border:1px solid #e5e7eb;border-radius:999px;
  padding:.4rem .75rem;font-size:.9rem;color:#334155;
}
.btn-filter:hover{ background:#eef2ff; border-color:#dbeafe; color:#1f2937; }
.btn-filter.active{ background:#2563eb; border-color:#2563eb; color:#fff; }

/* Cat chips */
.cat-chip{
  display:block; padding:.9rem 1rem; border:1px solid #e5e7eb; border-radius:12px;
  background:#fff; color:#0f172a; text-decoration:none; box-shadow:0 6px 16px rgba(2,6,23,.05);
}
.cat-chip:hover{ border-color:#dbeafe; box-shadow:0 12px 24px rgba(2,6,23,.08); }

/* Bouton icône */
.btn-icon{ border:none; background:transparent; padding:.35rem; }
.btn-icon .bi{ font-size:1.1rem; color:#64748b; }
.btn-icon.active .bi{ color:#2563eb; }


.nav-icon-btn{
  border:1px solid #e5e7eb;background:#fff;
  width:40px;height:40px;border-radius:999px;
  display:inline-grid;place-items:center;
}
.nav-icon-btn:hover{ background:#f8fafc; }
.badge-dot{ position:absolute; top:-4px; right:-4px; font-size:.7rem; padding:.15rem .35rem; }
.avatar{ width:36px;height:36px; object-fit:cover;
  border:2px solid #fff; box-shadow:0 0 0 1px #e5e7eb; }
.dropdown-menu{ border-color:#e5e7eb; }
.list-group-item{ border-color:#f1f5f9; }


/* sa se seeker, feeds */

/* Feed */
.post-card{
  border:1px solid #e5e7eb; border-radius:14px; background:#fff;
  box-shadow:0 6px 16px rgba(2,6,23,.06);
  padding: .75rem 1rem;
}
.post-card .badge.border{ border-color:#e5e7eb !important; }
.post-head{ display:flex; align-items:center; gap:.75rem; }
.post-head .avatar{ width:40px;height:40px;object-fit:cover;border-radius:999px; }
.post-title{ font-weight:700; color:#0f172a; text-decoration:none; }
.post-title:hover{ color:#0d6efd; }
.post-text{ margin:.25rem 0 .5rem 0; color:#334155; }
.post-tags{ display:flex; gap:.4rem; flex-wrap:wrap; }

.btn-action{
  border:none; background:transparent; color:#475569;
  display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .5rem;
}
.btn-action:hover{ color:#0d6efd; background:#f1f5f9; border-radius:8px; }
.btn-icon{ border:none; background:transparent; color:#64748b; }
.text-purple{ color:#7c3aed !important; }
.text-orange{ color:#ea580c !important; }

.btn-filter{ background:#f8fafc;border:1px solid #e5e7eb;color:#334155; }
.btn-filter.active{ background:#2563eb;border-color:#2563eb;color:#fff; }


.flag {
  width: 20px; height: 14px; display: inline-block;
  background-size: cover; background-position: center;
  border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}
.flag-ht{ background-image:url("/static/flags/ht.svg"); }
.flag-fr{ background-image:url("/static/flags/fr.svg"); }
.flag-en{ background-image:url("/static/flags/en.svg"); }  /* ou gb.svg */

/* res kod nan style2 */

  /* Responsive : en mobile on empile sans effet d’étirement */
  @media (max-width: 768px) {
    .feature-row {
      flex-direction: column;
    }
    .feature-row:hover .feature-card { flex: 1 1 auto; }
    .feature-card { height: 300px; }
    .fc-label { display: none; }         /* on évite le texte vertical sur mobile */
    .fc-body { opacity: 1; }             /* le contenu est toujours visible en mobile */
  }
  
  /* ==== THEME CLAIR POUR LA SECTION CATEGORIES ==== */

/* Menu catégories (pills) */
.category-menu {
  display: flex; flex-direction: column; gap: .75rem;
  position: sticky; top: 90px;
}
.cat-btn {
  background: #f8fafc;                 /* slate-50 */
  border: 1px solid #e5e7eb;            /* slate-200 */
  color: #334155;                       /* slate-700 */
  padding: .75rem 1rem;
  border-radius: 999px;
  text-align: left;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s;
}
.cat-btn:hover {
  background: #eef2ff;                  /* indigo-50 */
  border-color: #dbeafe;                /* blue-100 */
  color: #1f2937;                       /* slate-800 */
}
.cat-btn.active, .cat-btn[aria-selected="true"] {
  background: #2563eb;                  /* blue-600 */
  border-color: #2563eb;
  color: #fff;
  box-shadow: 0 6px 18px rgba(37, 99, 235, .18);
}

/* Panneaux */
.subcategory-panel { transition: opacity .2s ease; }
.is-hidden { display: none; opacity: 0; }

/* Cartes sous-catégories (claires) */
.subcard {
  position: relative; display: block; text-decoration: none;
  border-radius: 16px; overflow: hidden; height: 260px;
  border: 1px solid #e5e7eb;            /* léger contour */
  background: #fff; color: #0f172a;     /* texte foncé */
  box-shadow: 0 6px 16px rgba(2, 6, 23, .06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.subcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(2, 6, 23, .10);
  border-color: #dbeafe;                 /* bleu très léger */
}

/* Image/placeholder */
.subcard-media, .subcard-img, .media-fallback {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.subcard-img { object-fit: cover; }

/* Dégradés clairs de secours (si pas d'image) */
.media-fallback { opacity: 1; }
.gradient-teal   .media-fallback  { background: radial-gradient(800px 400px at 10% 10%, #e6fffb 0%, #c7f5ef 55%, #ebf9ff 100%); }
.gradient-purple .media-fallback  { background: radial-gradient(800px 400px at 10% 10%, #f3e8ff 0%, #e9d5ff 55%, #eef2ff 100%); }

/* Voile de lisibilité très léger (clair) */
.subcard::after {
  content:""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.0) 40%, rgba(255,255,255,.55) 100%);
}

/* Contenu */
.subcard-body {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
  padding: 16px;
}
.subcard-title { font-weight: 700; font-size: 1.05rem; color: #0f172a; }
.subcard-cta {
  align-self: flex-start; padding: .35rem .6rem; border-radius: 999px;
  background: rgba(37,99,235,.10); color: #1d4ed8;   /* bleu clair */
  font-size: .85rem; border: 1px solid rgba(37,99,235,.15);
}

/* Liens internes des cartes : toujours en couleur carte (pas bleu par défaut) */
a.subcard, a.subcard:hover { color: inherit; text-decoration: none; }

/* Responsive */
@media (max-width: 768px) {
  .category-menu { flex-direction: row; overflow-x: auto; gap: .5rem; }
  .cat-btn { white-space: nowrap; }
  .subcard { height: 220px; }
}

/* (Option) Harmonise les titres de section en thème clair */
section.bg-white .display-6 { color: #0f172a; }
section.bg-white p, section.bg-white .text-muted { color: #334155; }



/* ---- Panel ---- */
.opp-panel .card-title { font-weight: 700; }

/* ---- Cartes ---- */
.opp-card{
  border:1px solid #e5e7eb; border-radius:14px; background:#fff;
  box-shadow:0 6px 16px rgba(2,6,23,.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
}
.opp-card:hover{
  transform: translateY(-2px);
  box-shadow:0 12px 28px rgba(2,6,23,.10);
  border-color:#dbeafe;
}
/* liseré gauche par type */
.opp-card.type-job{    border-left:4px solid #1d4ed8; }
.opp-card.type-grant{  border-left:4px solid #059669; }
.opp-card.type-event{  border-left:4px solid #ea580c; }
.opp-card.type-project{border-left:4px solid #7c3aed; }

.opp-title-link{
  font-weight:600; color:#0f172a; text-decoration:none;
}
.opp-title-link:hover{ color:#1d4ed8; }

.opp-meta{
  display:flex; gap:.75rem; flex-wrap:wrap;
  color:#475569; font-size:.9rem;
}
.opp-meta i{ opacity:.7; }

.opp-badge{
  font-size:.75rem; border-radius:999px; padding:.25rem .5rem;
  border:1px solid transparent; background:#eff6ff; color:#1d4ed8; /* défaut bleu */
}
.type-grant .opp-badge{   background:#ecfdf5; color:#047857; border-color:#bbf7d0; }
.type-event .opp-badge{   background:#fff7ed; color:#c2410c; border-color:#fed7aa; }
.type-project .opp-badge{ background:#f5f3ff; color:#6d28d9; border-color:#ddd6fe; }

.opp-actions .btn{ padding:.35rem .6rem; font-size:.85rem; }

/* ---- Teaser vérouillé pour visiteurs ---- */
.opp-locked .locked-overlay{
  position:absolute; inset:0; display:grid; place-items:center;
  background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.9));
  border-radius:12px;
}



/* sa se pou seeker */

/* Filtres */
.btn-filter{
  background:#f8fafc;border:1px solid #e5e7eb;border-radius:999px;
  padding:.4rem .75rem;font-size:.9rem;color:#334155;
}
.btn-filter:hover{ background:#eef2ff; border-color:#dbeafe; color:#1f2937; }
.btn-filter.active{ background:#2563eb; border-color:#2563eb; color:#fff; }

/* Cat chips */
.cat-chip{
  display:block; padding:.9rem 1rem; border:1px solid #e5e7eb; border-radius:12px;
  background:#fff; color:#0f172a; text-decoration:none; box-shadow:0 6px 16px rgba(2,6,23,.05);
}
.cat-chip:hover{ border-color:#dbeafe; box-shadow:0 12px 24px rgba(2,6,23,.08); }

/* Bouton icône */
.btn-icon{ border:none; background:transparent; padding:.35rem; }
.btn-icon .bi{ font-size:1.1rem; color:#64748b; }
.btn-icon.active .bi{ color:#2563eb; }




/* Utilities */
.hero-image { max-width: 100%; height: auto; border-radius: 12px; }
.opp-panel .opp-card { border: 1px solid #eee; border-radius: 12px; background: #fff; }
.opp-badge { font-size: .75rem; background: #eef6ff; color: #0d6efd; padding: .25rem .5rem; border-radius: 999px; }
.opp-title-link { font-weight: 600; color: #111; text-decoration: none; }
.opp-title-link:hover { text-decoration: underline; }
.opp-meta span { margin-right: .75rem; color: #6c757d; font-size: .9rem; }

/* Gradients */
.gradient-teal { background: linear-gradient(135deg, #00b894, #00cec9); color: #fff; }
.gradient-purple { background: linear-gradient(135deg, #6f42c1, #9b59b6); color: #fff; }

/* Category menu */
.category-menu { display: grid; gap: .5rem; }
.cat-btn { width: 100%; text-align: left; border: 1px solid #e7e7e7; background: #fff; padding: .6rem .8rem; border-radius: 10px; }
.cat-btn.active { border-color: #0d6efd; box-shadow: 0 0 0 .1rem rgba(13,110,253,.2); }
.subcategory-panel.is-hidden { display: none; }
.subcard { position: relative; display: block; border-radius: 16px; overflow: hidden; color: #fff; min-height: 160px; }
.subcard .media-fallback { height: 80px; opacity: .15; background: #000; }
.subcard-body { padding: 1rem; }
.subcard-title { font-weight: 600; }
.subcard-cta { opacity: .9; font-size: .9rem; }

/* Stats strip */
.stats-strip .stat-number { font-size: 1.75rem; font-weight: 800; }
.stats-strip .stat-label { color: #6c757d; }

/* How it works */
.how-card { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 1rem; height: 100%; }
.how-step { width: 36px; height: 36px; border-radius: 50%; background: #0d6efd; color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: .5rem; }

/* CTA dual */
.cta-dual .cta-card { border-radius: 16px; padding: 1.25rem; height: 100%; }
.avatar { width: 36px; height: 36px; object-fit: cover; border-radius: 50%; }
.avatar-sm { width: 28px; height: 28px; border-radius: 50%; }


/* Explorer */
.explorer .filter-card {
  position: sticky;
  top: 1rem;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
}

/* Chips & checkboxes */
.chip-check { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.chip-check input { display: none; }
.chip {
  display: inline-block;
  padding: .35rem .6rem;
  border-radius: 999px;
  font-size: .85rem;
  background: #f5f7fb;
  color: #334155;
  border: 1px solid transparent;
  user-select: none;
}
.chip-outline { background: #fff; border-color: #e5e7eb; }
.chip-check input:checked + .chip { background: #e9f2ff; color: #0d6efd; border-color: #b6d4fe; }

/* Organisation logo placeholder */
.org-logo { width: 40px; height: 40px; object-fit: contain; opacity: .8; }

/* Teaser box */
.locked-more { background: #fcfcfd; }

/* Responsive tweaks */
@media (max-width: 991.98px) {
  .explorer .filter-card { position: static; }
}



/* Public limited pages */
.public-fe.filter-bar { background:#fff; border:1px solid #eee; border-radius:12px; }
.fe-card { border:1px solid #eee; border-radius:12px; background:#fff; }
.fe-badge-course { background:#e6fff6; color:#16a085; }
.fe-badge-event  { background:#f1e9ff; color:#6f42c1; }
.fe-label { font-size:.75rem; background:#f8f9fa; color:#334155; padding:.2rem .5rem; border-radius:999px; white-space:nowrap; }
.fe-level{ background:#e8f1ff; color:#0d6efd; }
.ticket-label { font-size:.8rem; background:#fff5e6; color:#b76e00; padding:.2rem .5rem; border:1px solid #ffe0b2; border-radius:8px; }
.locked-more { background:#fcfcfd; }

/* Carte évènement avec image */
.img-cover {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.card.event-card {
  transition: transform .18s ease, box-shadow .18s ease;
  border: 1px solid rgba(0,0,0,.06);
}
.card.event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}

/* Ruban "À la une" */
.ribbon-featured {
  position: absolute;
  top: .5rem;
  left: .5rem;
  background: #ffecb5;
  color: #7a5a00;
  font-size: .75rem;
  font-weight: 600;
  padding: .2rem .5rem;
  border-radius: .25rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* Titre sur 2 lignes max */
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ===== Palette & helpers ===== */
:root{
  --c1:#0d6efd;  /* bleu */
  --c2:#6f42c1;  /* violet */
  --c3:#ff6b6b;  /* corail/rouge doux */
  --c4:#22c55e;  /* vert */
  --c5:#f59e0b;  /* orange */
  --c6:#06b6d4;  /* cyan */
}

/* Texte dégradé */
.text-gradient{
  background: linear-gradient(90deg, var(--c1), var(--c2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ===== Hero coloré ===== */
.about-hero-color{
  position: relative;
  background:
    radial-gradient(800px 400px at -10% -20%, #e8f1ff 0%, transparent 70%),
    radial-gradient(700px 360px at 110% -10%, #fff0f2 0%, transparent 65%),
    radial-gradient(600px 320px at 120% 100%, #f3e8ff 0%, transparent 70%);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* ===== Cartes piliers colorées ===== */
.pillar-card{
  border-radius: 14px;
  padding: 16px;
  background: #fff;
  position: relative;
  border:1px solid rgba(0,0,0,.06);
}
.pillar-card .pillar-icon{
  width: 44px; height: 44px;
  border-radius: 50%;
  color:#fff; display:inline-flex; align-items:center; justify-content:center;
  font-size: 1.1rem; margin-bottom:.5rem;
}
.bg-g1{ background: linear-gradient(135deg, var(--c1), #7aa8ff); }
.bg-g2{ background: linear-gradient(135deg, var(--c2), #b388ff); }
.bg-g3{ background: linear-gradient(135deg, var(--c3), #ff9aa7); }
.bg-g4{ background: linear-gradient(135deg, var(--c4), #7ee2a8); }
.bg-g5{ background: linear-gradient(135deg, var(--c5), #ffd08a); }
.bg-g6{ background: linear-gradient(135deg, var(--c6), #7ee8ff); }

/* Bordure dégradée subtile */
.gradient-border{
  border: 1px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--gb, linear-gradient(90deg, var(--c1), var(--c2))) border-box;
}
.gradient-border.g1{ --gb: linear-gradient(90deg, var(--c1), var(--c6)); }
.gradient-border.g2{ --gb: linear-gradient(90deg, var(--c2), var(--c1)); }
.gradient-border.g3{ --gb: linear-gradient(90deg, var(--c3), var(--c5)); }
.gradient-border.g4{ --gb: linear-gradient(90deg, var(--c4), var(--c6)); }
.gradient-border.g5{ --gb: linear-gradient(90deg, var(--c5), var(--c3)); }
.gradient-border.g6{ --gb: linear-gradient(90deg, var(--c6), var(--c2)); }

/* ===== Band stats colorée ===== */
.stats-band-color{
  background: linear-gradient(90deg, #f7fbff, #fff6f6);
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.stat-chip{
  border-radius: 12px; padding: 16px;
  color:#0c0c0c; background:#fff; border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 16px rgba(0,0,0,.04);
}
.stat-chip.gradient.g1{ background: linear-gradient(135deg, #edf4ff, #e8fcff); }
.stat-chip.gradient.g2{ background: linear-gradient(135deg, #f0eaff, #eaf4ff); }
.stat-chip.gradient.g3{ background: linear-gradient(135deg, #ffecef, #fff4e8); }
.stat-chip.gradient.g6{ background: linear-gradient(135deg, #e8fdff, #eef2ff); }
.stat-chip .n{ font-weight:800; font-size:1.25rem; }
.stat-chip .l{ font-size:.85rem; color:#5c6670; }

/* ===== Timeline colorée ===== */
.timeline{ position: relative; margin-left: .4rem; }
.timeline.color:before{
  content:""; position:absolute; left:8px; top:0; bottom:0; width:2px;
  background: linear-gradient(180deg, var(--c1), var(--c3), var(--c5));
  opacity:.3;
}
.tl-item{ display:flex; gap:12px; position: relative; }
.tl-item + .tl-item{ margin-top: 14px; }
.tl-point{
  width:18px; height:18px; border-radius:50%;
  border:3px solid #fff; margin-left:-1px; margin-top:.2rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.tl-point.g1{ background: var(--c1); }
.tl-point.g3{ background: var(--c3); }
.tl-point.g5{ background: var(--c5); }
.tl-body .tl-date{ font-size:.8rem; color:#6c757d; }
.tl-body .tl-title{ font-weight:600; }

/* ===== Encadrés latéraux ===== */
.side-box{
  background:#fff; border-radius:12px; border:1px solid rgba(0,0,0,.06);
}

/* ===== Logos ===== */
.bg-logos{
  background: radial-gradient(600px 280px at -10% 10%, #f2f8ff 0%, transparent 70%),
              radial-gradient(500px 240px at 110% 0%, #fff0f2 0%, transparent 60%);
}
.logo-grid{
  display:grid; grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 18px; align-items:center;
}
.logo-grid img{
  max-height: 36px; width:auto; filter: grayscale(100%); opacity:.75;
  transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}
.logo-grid img:hover{ filter:none; opacity:1; transform: translateY(-1px); }

/* ===== CTA color ===== */
.cta-color{
  background: linear-gradient(90deg, var(--c1), var(--c2));
  color:#fff;
}

/* RWD logos */
@media (max-width: 992px){
  .logo-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 576px){
  .logo-grid{ grid-template-columns: repeat(2, 1fr); }
}