/* =========================================================
  homepage.css
   PAGE D'ACCUEIL —
   ========================================================= */
.bp-full-bleed{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}
/* ---------- HERO ludique ---------- */
.hero-home{
  position:relative; overflow:hidden;
  background:var(--surface);
  color:var(--text); padding:4rem 0 0;
  border-bottom:1px solid var(--border);
}
.hero-home .blob{ position:absolute; border-radius:50%; filter:blur(50px); }
.hero-home .blob-1{ width:340px; height:340px; background:var(--coral); top:-140px; right:-100px; opacity:.20; }
.hero-home .blob-2{ width:280px; height:280px; background:var(--sun); top:6%; right:4%; opacity:.28; }
.hero-home .blob-3{ width:220px; height:220px; background:var(--accent); top:45%; left:-100px; opacity:.16; }
.hero-home .container{ padding-bottom:3rem; }
.hero-home h1{ font-weight:900; font-size:clamp(2rem, 4vw, 3rem); line-height:1.1; margin-top: 1rem }
.hero-home .highlight{ position:relative; display:inline-block; }
.hero-home .highlight svg{ position:absolute; left:0; bottom:-.35rem; width:100%; height:.5rem; }
.hero-home .lead{ font-size:1.15rem; color:var(--text-secondary); max-width:42rem; }


/* le pin (marqueur de carte) est un pictogramme plein, pas un contour :
   on force fill:currentColor spécifiquement pour lui, sans toucher au
   style des autres icônes du site qui restent en contour */
.pin-cluster .pin i{ fill:currentColor; stroke:none; }


.pin-cluster{ position:relative; height:340px; }
.pin-cluster .pin{
  position:absolute; display:flex; align-items:center; gap:.45rem;
  background:var(--surface); border:1.5px solid transparent;
  color:var(--text); font-size:.74rem; font-weight:800; white-space:nowrap;
  padding:.3rem .7rem .3rem .3rem; border-radius:999px;
  box-shadow:0 5px 14px rgba(0,60,121,.14);
}
.pin-cluster .pin i{
  width:1.5em; height:1.5em; flex-shrink:0; padding:0.4em .5em 0.1em 0.8em;
  border-radius:50%; box-sizing:content-box;
}

/* 4 familles de couleurs qui tournent — icône + bulle teintée + liseré assorti
   (sélecteur renforcé avec .pin-cluster pour gagner sur toute règle .pin svg
   plus générique, quel que soit son ordre de chargement) */
.pin-cluster .pin:nth-of-type(4n+1){ border-color:rgba(30,142,90,.25); }
.pin-cluster .pin:nth-of-type(4n+1) i{ color:var(--accent); background:rgba(30,142,90,.12); }

.pin-cluster .pin:nth-of-type(4n+2){ border-color:rgba(201,74,46,.25); }
.pin-cluster .pin:nth-of-type(4n+2) i{ color:#C94A2E; background:rgba(201,74,46,.12); }

.pin-cluster .pin:nth-of-type(4n+3){ border-color:rgba(0,60,121,.2); }
.pin-cluster .pin:nth-of-type(4n+3) i{ color:var(--primary); background:rgba(0,60,121,.1); }

.pin-cluster .pin:nth-of-type(4n+4){ border-color:rgba(201,122,0,.25); }
.pin-cluster .pin:nth-of-type(4n+4) i{ color:#C97A00; background:rgba(201,122,0,.12); }

/* légère rotation alternée façon petites étiquettes posées à la main */
.pin-cluster .pin.p1{ top:0%;  left:85%; }
.pin-cluster .pin.p2{ top:16%; left:70%; }
.pin-cluster .pin.p3{ top:25%;  left:95%; }
.pin-cluster .pin.p4{ top:30%; left:24%; }
.pin-cluster .pin.p5{ top:40%; left:66%; }
.pin-cluster .pin.p6{ top:52%; left:4%; }
.pin-cluster .pin.p7{ top:58%; left:40%; }
.pin-cluster .pin.p8{ top:72%; left:60%; }
.pin-cluster .pin.p9{ top:14%; left:34%; }
.pin-cluster .pin.p10{ top:54%; left:86%; }
.pin-cluster .pin.p11{ top:80%; left:14%; }
.pin-cluster .pin.p12{ top:92%; left:38%; }

@media (prefers-reduced-motion: no-preference){
  .pin-cluster .pin{ animation:bob 3.6s ease-in-out infinite; }
  .pin-cluster .pin:nth-of-type(odd){ animation-name:bob-left; }
  .pin-cluster .pin:nth-of-type(even){ animation-name:bob-right; }
  .pin-cluster .pin:nth-of-type(3n+1){ animation-delay:.3s; }
  .pin-cluster .pin:nth-of-type(3n+2){ animation-delay:.9s; }
  .pin-cluster .pin:nth-of-type(3n+3){ animation-delay:1.4s; }
  @keyframes bob-left{ 0%,100%{ transform:rotate(-2deg) translateY(0); } 50%{ transform:rotate(-2deg) translateY(-6px); } }
  @keyframes bob-right{ 0%,100%{ transform:rotate(2deg) translateY(0); } 50%{ transform:rotate(2deg) translateY(-6px); } }
}



/* ---------- Chiffres clés accentués (reprend .stat-homede l'accueil) ---------- */


.stats-home-wrapper{
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.5rem 1rem; text-align:center; height:100%;
  border-top:1px solid var(--surface);
  transition:transform .18s ease, box-shadow .18s ease;
}

.stat{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1rem;
  text-align: center;
  height: 100%;
  border-top: 4px solid var(--primary);
  transition: transform .18s ease, box-shadow .18s ease;
}
.stat:hover{ transform:translateY(-4px); box-shadow:0 10px 24px rgba(0,60,121,.1); }
.stat.c-accent{ border-top-color:var(--accent); }
.stat.c-sun{ border-top-color:var(--sun); }
.stat.c-coral{ border-top-color:var(--coral); }

.stat-value{ font-size:2.1rem; font-weight:900; color:var(--text); line-height:1; }

/* Variation de couleur des 4 chiffres clés, par position
   (reprend le pattern c-accent/c-sun/c-coral du prototype) */
.stats-home-wrapper .col-md-3:nth-child(2) .stat{ border-top-color: var(--accent); }
.stats-home-wrapper .col-md-3:nth-child(3) .stat{ border-top-color: var(--sun); }
.stats-home-wrapper .col-md-3:nth-child(4) .stat{ border-top-color: var(--coral); }





/* ---------- LE CHEMIN DU PROJET (élément signature, section
   "Comment participer ?") ---------- */
.journey, .top-projects, .top-faq{ background:var(--path-bg); padding:4rem 0; position:relative; }
.journey-title{ font-weight:900; font-size:clamp(1.5rem,3vw,2rem); }
.journey-sub{ color:var(--text-secondary); max-width:38rem; margin:0 auto; }
.journey-path{ list-style:none; margin:3rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:2rem 0; position:relative; counter-reset:step; }
.journey-path::before{
  content:""; position:absolute; top:34px; left:0; right:0; height:0;
  border-top:3px dashed #B9CFE6; z-index:0; display:none;
}

/* Projets lauréats — nombre variable (3, 5…) : les cartes grandissent
   jusqu'à 22rem puis restent centrées ; 1 par ligne sur mobile. */
.top-projects__list{ display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.5rem;
  margin:0;
  padding:0;
  list-style:none; }
.top-projects__list .content-page ul, .content-page ol {
  padding-left: 0;
}
.top-projects__item{ display:flex; flex:1 1 10rem; max-width:22rem; }
.top-projects__item > .card{ width:100%; }
.top-projects__status{ font-size:.85rem; }
.top-projects__title{ font-size:1rem; margin-top:0; overflow-wrap:break-word; hyphens:auto; }
@media (max-width:575.98px){ .top-projects__item{ flex-basis:100%; } }

@media (min-width:992px){ .journey-path::before{ display:block; } }
.journey-stop{ flex:1 1 220px; position:relative; z-index:1; text-align:center; padding:0 .75rem; }
.stop-pin{
  width:68px; height:68px; border-radius:50%; background:var(--surface);
  border:3px solid var(--primary); color:var(--primary);
  display:flex; align-items:center; justify-content:center; margin:0 auto .9rem;
  font-weight:900; font-size:1.4rem; box-shadow:0 4px 10px rgba(0,60,121,.12);
}
.journey-stop:nth-child(2) .stop-pin{ border-color:var(--accent); color:var(--accent); }
.journey-stop:nth-child(3) .stop-pin{ border-color:#C97A00; color:#C97A00; }
.journey-stop:nth-child(4) .stop-pin{ border-color:#C94A2E; color:#C94A2E; }
.journey-stop h3{ font-weight:800; font-size:1rem; }
.journey-stop p{ color:var(--text-secondary); font-size:.9rem; }


@media (max-width:767px){
  .hero h1{ font-size:1.7rem; }
}

.calendar-home-wrapper{background:var(--bg)}
.edition-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:2rem; }
.badge-status{ display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .7rem; border-radius:999px; font-weight:700; font-size:.8rem; }
.badge-open{ background:var(--success-bg); color:var(--accent-dark); }
.badge-closed{ background:#EDEFF1; color:var(--text-secondary); }
.progress{ border-radius:999px; background:#DCE7F2; }

/* Ruban rond (ex. classement 1er/2e/3e sur l'accueil) */
.ribbon{
  position:absolute; top:.75rem; left:.75rem;
  width:2.4rem; height:2.4rem; border-radius:50%;
  background:var(--surface); border:2px solid var(--sun);
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:.85rem; color:var(--primary-dark);
  box-shadow:0 3px 8px rgba(0,0,0,.15);
}


/* Cartes "Actualités récentes" (accueil) — ligne à gauche + badge
   de date colorés selon la catégorie, assignée par position dans
   le vocabulaire (voir bp_content_preprocess_paragraph__bp_para_top_news) */
.news-teaser{
  border-left: 4px solid var(--border);
}
.news-teaser--news-cat-0{ border-left-color: var(--info-text); }
.news-teaser--news-cat-1{ border-left-color: var(--success-text); }
.news-teaser--news-cat-2{ border-left-color: var(--warning-text); }

.news-date-badge{
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  padding: .25rem .6rem;
  border-radius: var(--radius-sm);
  width: fit-content;
}
.news-date-badge--news-cat-0{ background: var(--info-bg); color: var(--info-text); }
.news-date-badge--news-cat-1{ background: var(--success-bg); color: var(--success-text); }
.news-date-badge--news-cat-2{ background: var(--warning-bg); color: var(--warning-text); }
.news-teaser__title{
  font-size: 1rem;
  margin-top: 0;
}
.news-teaser__link{
  align-self: flex-start;
  min-width: 150px;
}

.news-home-wrapper{ background: var(--bg); }

.path-frontpage h2{
  margin-top: 0;
}


/* L'animation standard */
.bouger {
  display: inline-block;
  animation: retourner15s 15s infinite steps(100);
}

@keyframes retourner15s {
  0%, 93% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg); /* За последнюю 1 секунду плавно переворачиваются */
  }
}

/* ♿ Désactivation automatique si l'utilisateur refuse les mouvements */
@media (prefers-reduced-motion: reduce) {
  .bouger {
    animation: none !important; /* L'icône redevient statique */
    transform: none !important;
  }
}