/* =========================================================
   identite-visuel.css
   IDENTITÉ VISUELLE
   ========================================================= */
:root{
  --sun:#FFC93C;
  --coral:#FF6B4A;
  --path-bg:#EAF2FB;
}

/* ---------- Bandeau décoratif en tête de page (pages intérieures) ---------- */
.page-hero{
  position:relative; overflow:hidden;
  background:var(--surface);
  padding:2.5rem 0;
  border-bottom:1px solid var(--border);
}
.page-hero .blob{ position:absolute; border-radius:50%; filter:blur(50px); pointer-events:none; }
.page-hero .blob-1{ width:280px; height:280px; background:var(--coral); top:-120px; right:-80px; opacity:.16; }
.page-hero .blob-2{ width:220px; height:220px; background:var(--sun); top:20%; right:8%; opacity:.22; }
.page-hero .blob-3{ width:180px; height:180px; background:var(--accent); top:40%; left:-90px; opacity:.14; }
.page-hero .container{ position:relative; z-index:1; }

.eyebrow-home{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--sun); color:var(--primary-dark);
  font-weight:800; font-size:.8rem; letter-spacing:.03em; text-transform:uppercase;
  padding:.35rem .8rem; border-radius:999px; margin-bottom:.75rem;
}

/* ---------- Cartes accentuées (reprend .card-homede l'accueil) ---------- */
.card-fun{
  position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; height:100%;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card-fun:hover{ transform:translateY(-3px); box-shadow:0 10px 22px rgba(0,0,0,.09); border-color:#C7DCF0; }
.card-fun:has(.stretched-link:focus-visible),
.card-fun:focus-within{ outline:3px solid var(--focus-color); outline-offset:2px; }
.card-homeimg{ aspect-ratio:16/9; object-fit:cover; width:100%; background:#EAF0F6; }



/* Ruban pilule "VOTÉ" — retour visuel fort quand un projet est sélectionné */
.ribbon-vote{
  position:absolute; top:.75rem; left:.75rem; z-index:2;
  display:inline-flex; align-items:center; gap:.3rem;
  background:var(--accent); color:#fff;
  font-weight:800; font-size:.78rem; letter-spacing:.02em;
  padding:.3rem .65rem; border-radius:999px;
  box-shadow:0 3px 8px rgba(0,0,0,.18);
}
/* Masqué tant que la carte n'est pas sélectionnée (réutilise la classe .selected déjà pilotée en JS) */
.card-fun:not(.selected) .ribbon-vote{ display:none; }