/* ==========================================================================
   BOURSE AUX IDÉES — CSS soignée, 100% namespacée
   ========================================================================== */

.ideas {
  /* Palette verte douce */
  --accent:   #147a52;
  --accent-2: #199d69;
  --accent-3: #20b07a;

  --text:   #0f172a;
  --muted:  #64748b;
  --soft:   #f6f8fb;
  --panel:  #ffffff;
  --line:   #e2e8f0;

  --radius: 16px;
  --shadow-card: 0 8px 26px rgba(2,8,23,.05);
  --shadow-btn:  0 2px 6px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.15) inset;

  color: var(--text);
}

/* Layout de page */
.ideas .container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 28px 20px;
}

/* Hero */
.ideas h1 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 .25rem 0;
  color: #0b2f22;
}
.ideas .ideas__tagline { margin: 0; color: var(--muted); }

/* Toolbar */
.ideas .ideas__toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-top: 16px;
}
.ideas .ideas__modes { display: flex; gap: 10px; align-items: center; }

.ideas .ideas__segmented {
  display: inline-flex; gap: 6px; padding: 4px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
}
.ideas .ideas__segmented .seg {
  appearance: none; border: 0; background: transparent; color: var(--muted);
  padding: 8px 14px; border-radius: 999px; cursor: pointer; font-weight: 600;
}
.ideas .ideas__segmented .seg.is-active {
  background: var(--soft); color: var(--text);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
}

.ideas .ideas__pager-controls { display:flex; align-items:center; gap:8px; color:var(--muted); }
.ideas .ideas__pager-controls select {
  background:#fff; color:var(--text); border:1px solid var(--line);
  border-radius: 12px; padding:8px 10px;
}

/* Boutons (i-btn) — isolés et lisibles */
.ideas a.i-btn { text-decoration: none !important; }
.ideas .i-btn{
  --bg1: color-mix(in srgb, var(--accent) 96%, white 4%);
  --bg2: color-mix(in srgb, var(--accent) 88%, white 12%);
  display:inline-flex; align-items:center; justify-content:center; gap:.5ch;
  padding:10px 14px; border-radius:12px;
  border:1px solid color-mix(in srgb, var(--accent) 85%, black 15%);
  background: linear-gradient(180deg, var(--bg1), var(--bg2));
  color:#fff !important; font-weight:700; box-shadow: var(--shadow-btn); cursor:pointer;
  transition: transform .12s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
}
.ideas .i-btn:is(:hover, :focus-visible){
  --bg1: color-mix(in srgb, var(--accent-2) 96%, white 4%);
  --bg2: color-mix(in srgb, var(--accent-2) 88%, white 12%);
  border-color: color-mix(in srgb, var(--accent-2) 85%, black 15%);
  color:#fff !important; transform: translateY(-1px);
  box-shadow: 0 8px 26px rgba(25,157,105,.18), 0 2px 8px rgba(0,0,0,.10), 0 0 0 2px color-mix(in srgb, var(--accent-3) 22%, transparent) inset;
}
.ideas .i-btn:active { transform: translateY(0); box-shadow: 0 2px 10px rgba(0,0,0,.12) inset, 0 1px 4px rgba(0,0,0,.10); }

.ideas .i-btn.is-ghost{
  background: linear-gradient(180deg, #ffffff, #f7fbf9);
  color: var(--accent) !important;
  border:1px solid color-mix(in srgb, var(--accent) 18%, var(--line) 82%);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
}
.ideas .i-btn.is-ghost:is(:hover, :focus-visible){
  background: linear-gradient(180deg, #ffffff, #eef7f2);
  color: var(--accent-2) !important;
  border-color: color-mix(in srgb, var(--accent-2) 32%, #dfe9e3 68%);
  box-shadow: 0 6px 16px rgba(0,0,0,.06), 0 0 0 2px color-mix(in srgb, var(--accent-3) 18%, transparent) inset;
  transform: translateY(-1px);
}

/* Grille responsive */
.ideas .ideas__grid { display:grid; grid-template-columns: repeat(1, 1fr); gap: 18px; margin-top: 14px; }
@media (min-width: 700px){ .ideas .ideas__grid{ grid-template-columns: repeat(2, 1fr);} }
@media (min-width: 1024px){ .ideas .ideas__grid{ grid-template-columns: repeat(3, 1fr);} }

/* Carte */
.ideas .card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display:flex; flex-direction:column;
}
.ideas .card > header{ padding: 16px 16px 0; }
.ideas .card .card-title{ margin:0; font-size: clamp(1.1rem, 2vw, 1.35rem); }
.ideas .card .card-date{ display:block; color:var(--muted); font-size:.92rem; margin-top:4px; }
.ideas .card .card-body{ padding: 10px 16px 0; }
.ideas .card .card-body h3{ font-size:1rem; margin: 14px 0 6px; }

/* Footer carte avec boutons en grille, plus de débordement */
.ideas .card .card-actions{
  display:grid; grid-template-columns: 1fr auto;
  gap: 12px; align-items:center;
  padding:12px 16px; border-top:1px solid var(--line); background:#fff;
}
.ideas .card .share-group{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.ideas .card .share-group .i-btn{
  width:100%; padding:10px 12px; justify-content:center;
}
.ideas .card .permalink{
  justify-self:end; color: var(--muted); text-decoration:none; white-space:nowrap;
}
.ideas .card .permalink:hover{ text-decoration: underline; }

/* Markdown minimal */
.ideas .md p{ margin:0 0 8px; }
.ideas .md-inline p{ display:inline; margin:0; }

/* Pagination */
.ideas .ideas__pagination{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin: 22px 0 10px;
}

/* Dialog */
.ideas #random-dialog{
  border: 1px solid var(--line); background:#fff; color: var(--text);
  border-radius: 14px; padding: 0;
}
.ideas #random-dialog .dialog-content{
  padding: 16px; display:flex; gap:12px; align-items:center;
}

/* Accessibilité & motion */
.ideas [role="tab"][aria-selected="true"]{ outline: 2px solid transparent; }
@media (prefers-reduced-motion: reduce){ .ideas .i-btn{ transition:none; } }

/* Petits écrans : permalien passe sous les boutons */
@media (max-width: 520px){
  .ideas .card .card-actions{ grid-template-columns: 1fr; }
  .ideas .card .permalink{ justify-self:start; }
}
/* Accessibilité : texte caché pour lecteurs d'écran */
.ideas .sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Bouton icône compact */
.ideas .i-btn--icon {
  padding: 10px;                /* carré confortable */
  width: 42px; height: 42px;    /* taille visuelle cohérente */
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0;                       /* pas d’espace texte/icône */
}

/* Icône héritant de la couleur du bouton */
.ideas .i-btn--icon > svg {
  display: block;
  width: 20px; height: 20px;
}

/* Groupe des partages : 2 icônes côte à côte, s’adapte sans déborder */
.ideas .card .share-group{
  display:grid;
  grid-template-columns: repeat(2, minmax(42px, 1fr));
  gap: 8px;
}

/* Variante hover des icônes (mêmes effets que .i-btn classique) */
.ideas .i-btn--icon:is(:hover, :focus-visible) {
  transform: translateY(-1px);
}
/* Conserve un alignement propre quand un bouton est masqué */
.ideas .ideas__pagination { gap: 12px; }

/* Empêche le thème global de ré-afficher des éléments qu'on veut cacher */
.ideas [hidden] { display: none !important; visibility: hidden !important; }