/* ================================================================
 *   PAGE "TOUS LES CONTRIBUTEURS"
 *   - Compatible layout internal.php (main.site-main > .container)
 *   - Fix fond plein écran + thème dark partout
 *   ================================================================ */

:root{
  --accent: #ff6233;

  --font-sans: 'Montserrat', system-ui, sans-serif;

  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #f5f5f7;

  --text: #111827;
  --muted: #6b7280;

  --border-color: rgba(15, 23, 42, 0.12);

  --shadow-1: 0 6px 18px rgba(15, 23, 42, 0.08);
  --shadow-3: 0 18px 45px rgba(15, 23, 42, 0.16);

  --radius: 18px;
  --radius-sm: 999px;
}

:root[data-theme="dark"]{
  --bg: #0f131b;
  --surface: #0b0e14;
  --surface-2: #0f131b;

  --text: #e8edf5;
  --muted: #9aa4b2;

  --border-color: #1c2230;

  --shadow-1: 0 6px 16px rgba(0,0,0,.35);
  --shadow-3: 0 18px 42px rgba(0,0,0,.45);
}

/* ===================== FULL PAGE BACKGROUND (IMPORTANT) ===================== */
/* Le layout centre le contenu avec .site-main .container.
 *   Donc le fond doit être sur html/body + wrappers header/footer + site-main. */
html, body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.site-main{
  background: var(--bg);
}

/* Header/footer sont "full width" dans le layout */
.internal-header-wrapper,
.internal-footer-wrapper{
  background: var(--bg);
}

/* Evite un éventuel fond blanc injecté ailleurs */
.site-main .container{
  background: transparent;
}

/* ===================== PAGE SPACING ===================== */
/* On recrée la “respiration” que tu attends, sans toucher au layout */
.contribs-page{
  padding: clamp(1.75rem, 4vw, 3.25rem) 0 clamp(2.5rem, 5vw, 4rem);
  min-height: calc(100vh - 40px);
}

/* ===================== HERO ===================== */
.contribs-hero{
  text-align: center;
  margin: 0 0 clamp(1.4rem, 3vw, 2.2rem);
}

.contribs-subtitle{
  margin: 0 auto;
  max-width: 70ch;
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.7;
}

/* ===================== SEARCH ===================== */
.contribs-filter-bar{
  display: flex;
  justify-content: center;
  margin: 0 0 clamp(1.75rem, 3vw, 2.4rem);
}

.search-input-wrapper{
  position: relative;
  width: 100%;
  max-width: 560px;
}

.search-icon{
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 1rem;
  pointer-events: none;
}

.search-input{
  width: 100%;
  padding: 0.95rem 1.2rem 0.95rem 3.2rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-1);
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease;
}

.search-input::placeholder{ color: var(--muted); }

.search-input:focus{
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border-color));
  box-shadow: var(--shadow-3);
}

/* ===================== GRID ===================== */
.contribs-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
}

/* ===================== CARD ===================== */
.contrib-card{
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
}

.contrib-card::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.25, 1, .5, 1);
}

.contrib-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-3);
}

.contrib-card:hover::after{ transform: scaleX(1); }

/* media */
.card-media{
  display: block;
  aspect-ratio: 16 / 10;
  background: color-mix(in srgb, var(--surface-2) 82%, black);
  overflow: hidden;
}

.card-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

.contrib-card:hover .card-img{ transform: scale(1.05); }

.card-img-fallback{
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 2rem;
}

/* content */
.card-content{
  padding: 1.35rem 1.35rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.card-title{
  margin: 0;
  font-size: 1.22rem;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
}

.card-title a{
  color: inherit;
  text-decoration: none;
}

.card-title a:hover{
  text-decoration: none;
}

.city{
  font-weight: 700;
  color: var(--muted);
  margin-left: .35rem;
}

.job{
  margin: .1rem 0 0;
  color: var(--muted);
}

.quote{
  margin: .55rem 0 0;
  color: var(--text);
  font-style: italic;
  border-left: 4px solid var(--accent);
  padding-left: .75rem;
}

/* links */
.links{
  margin-top: .95rem;
  padding-top: .95rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.links .secondary{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.links .primary{
  display: flex;
}

/* buttons */
.btn{
  --btn-bg: var(--surface);
  --btn-fg: var(--text);
  --btn-bd: var(--border-color);

  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .58rem .95rem;
  border-radius: 999px;
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);

  font-weight: 800;
  font-size: .95rem;
  line-height: 1;
  text-decoration: none;

  transition: transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  text-decoration: none;
}

:root[data-theme="dark"] .btn:hover{
  box-shadow: 0 12px 24px rgba(0,0,0,.35);
}

.btn-outline{
  --btn-bg: transparent;
  --btn-fg: var(--muted);
  --btn-bd: var(--border-color);
  border-width: 1.5px;
}

.btn-outline:hover{
  --btn-bg: color-mix(in srgb, var(--surface-2) 75%, transparent);
  --btn-fg: var(--text);
}

.ih-cta{
  --btn-bg: transparent;
  --btn-fg: var(--accent);
  --btn-bd: color-mix(in srgb, var(--accent) 60%, var(--border-color));
  border-width: 1.5px;
}

.ih-cta:hover{
  --btn-bg: color-mix(in srgb, var(--accent) 12%, transparent);
  --btn-bd: color-mix(in srgb, var(--accent) 75%, var(--border-color));
}

/* no results */
.no-results{
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  padding: 1.25rem 0;
}

.contribs-bottom-space{
  height: clamp(1rem, 3vw, 2.5rem);
}

/* sr-only */
.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;
}

@media (max-width: 600px){
  .links{ gap: .75rem; }
}