/* =========================================================
   UPC — HOMEPAGE MODULE (home.css)
   ========================================================= */

/* ---------- HERO ---------- */
.hero{
  position:relative;
  background:var(--noir);
  color:var(--texte-clair);
  padding:90px 0 70px;
}

.hero .wrap{
  position:relative;
  z-index:2;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:'IBM Plex Mono';
  font-size:0.76rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ambre);
  margin-bottom:22px;
}

.eyebrow::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--ambre);
  box-shadow:0 0 0 0 rgba(224,138,30,0.6);
  animation:pulse 2.2s infinite;
}

@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(224,138,30,0.55);}
  70%{box-shadow:0 0 0 10px rgba(224,138,30,0);}
  100%{box-shadow:0 0 0 0 rgba(224,138,30,0);}
}

.hero h1{
  font-size:clamp(2.6rem, 6.4vw, 5.3rem);
  max-width:14ch;
  margin-bottom:26px;
}

.hero h1 span{
  color:var(--rouge);
}

.hero p.lead{
  max-width:52ch;
  font-size:1.12rem;
  color:#d9d5cb;
  margin-bottom:38px;
}

.hero-actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:64px;
}

.stat-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid rgba(255,255,255,0.15);
  padding-top:28px;
  max-width:720px;
}

.stat-row div{
  padding-right:20px;
}

.stat-row .num{
  font-family:'Big Shoulders Display';
  font-weight:900;
  font-size:2.6rem;
  color:#fff;
  line-height:1;
}

.stat-row .lbl{
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:#b7b2a7;
  margin-top:6px;
}

/* ---------- MISSION ---------- */
.mission-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:64px;
  align-items:start;
}

.mission-grid .lead-text{
  font-size:1.2rem;
  color:var(--texte);
  font-weight:500;
}

.mission-grid .lead-text strong{
  color:var(--rouge);
}

.mission-points{
  display:flex;
  flex-direction:column;
  gap:22px;
}

.mission-point{
  display:flex;
  gap:16px;
  border-top:1px solid var(--pierre-2);
  padding-top:18px;
}

.mission-point .n{
  font-family:'IBM Plex Mono';
  color:var(--rouge);
  font-weight:600;
  font-size:0.85rem;
  padding-top:2px;
}

.mission-point h3{
  font-family:'Public Sans';
  text-transform:none;
  font-weight:700;
  font-size:1rem;
  letter-spacing:0;
  margin-bottom:4px;
}

.mission-point p{
  color:var(--gris);
  font-size:0.94rem;
}

/* ---------- COMBATS ---------- */
.combats{
  background:var(--noir-2);
  color:var(--texte-clair);
}

.combats .section-head h2{
  color:#fff;
}

.combats .section-head p{
  color:#bfbab0;
}

.combats .tag{
  color:var(--ambre);
}

.card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  background:rgba(255,255,255,0.1);
}

.card{
  background:var(--noir-2);
  padding:34px 28px;
  transition:background .25s ease;
  border-bottom:2px solid transparent;
}

.card:hover{
  background:#2c2925;
  border-bottom-color:var(--rouge);
}

.card svg{
  width:30px;
  height:30px;
  margin-bottom:22px;
  color:var(--rouge);
}

.card h3{
  font-family:'Public Sans';
  text-transform:none;
  font-weight:700;
  font-size:1.08rem;
  letter-spacing:0;
  margin-bottom:10px;
}

.card p{
  color:#b7b2a7;
  font-size:0.92rem;
}

/* actualités */
  .news-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
  .news-card{background:#fff; border:1px solid var(--pierre-2);}
  .news-card .thumb{
    height:140px; background:linear-gradient(135deg, var(--lagon), #0a4f56);
    position:relative; overflow:hidden;
  }
  .news-card .thumb::after{
    content:""; position:absolute; inset:0;
    background-image:repeating-linear-gradient(-45deg, rgba(255,255,255,0.07) 0 10px, transparent 10px 20px);
  }
  .news-card .body{padding:24px;}
  .news-card .date{
    font-family:'IBM Plex Mono'; font-size:0.72rem; color:var(--rouge); text-transform:uppercase; letter-spacing:0.08em;
  }
  .news-card h3{
    font-family:'Public Sans'; text-transform:none; font-weight:700; font-size:1.06rem; letter-spacing:0;
    margin:10px 0 10px;
  }
  .news-card p{color:var(--gris); font-size:0.9rem;}
  .news-card .more{
    display:inline-block; margin-top:14px; font-size:0.82rem; font-weight:700;
    text-transform:uppercase; color:var(--texte); border-bottom:2px solid var(--rouge);
  }

.news-card .thumb.has-image{
  background:none; /* on retire le SVG */
}

.news-card .thumb.has-image::after{
  display:none; /* on retire le motif diagonal */
}

.news-card .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:brightness(0.92);
}



/* ---------- TERRITOIRE ---------- */
.territoire-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

.prov{
  border:1px solid var(--pierre-2);
  padding:30px;
  background:#fff;
}

.prov .tag{
  font-family:'IBM Plex Mono';
  font-size:0.72rem;
  color:var(--lagon);
  text-transform:uppercase;
  letter-spacing:0.1em;
}

.prov-head{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:14px;
}

.prov-photo{
  width:84px;
  height:84px;
  border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
  border:2px solid var(--lagon);
}

.prov-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.prov h3{
  font-family:'Public Sans';
  font-weight:700;
  font-size:1.15rem;
  margin:0 0 8px;
}

.prov-info .role{
  color:var(--gris);
  font-size:0.92rem;
  margin:0;
}

/* ---------- ADHÉRER ---------- */
.adherer{
  background:var(--rouge);
  color:#fff;
  position:relative;
}

.adherer .wrap{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:64px;
  align-items:center;
}

.adherer h2{
  font-size:clamp(2rem, 4vw, 2.9rem);
  margin-bottom:20px;
  color:#fff;
}

.adherer p{
  color:#f6d9d3;
  max-width:48ch;
  margin-bottom:30px;
  font-size:1.02rem;
}

.adh-btns {
  display: flex;
  gap: 16px;
  margin-top: 24px;
  align-items: center; /* FIX du décalage vertical */
}

.steps{
  display:flex;
  flex-direction:column;
  gap:0;
}

.step{
  display:flex;
  gap:18px;
  padding:20px 0;
  border-top:1px solid rgba(255,255,255,0.25);
}

.step:last-child{
  border-bottom:1px solid rgba(255,255,255,0.25);
}

.step .n{
  font-family:'Big Shoulders Display';
  font-weight:900;
  font-size:1.6rem;
  color:#fff;
  opacity:0.75;
}

.step h3{
  font-family:'Public Sans';
  text-transform:none;
  font-weight:700;
  font-size:1rem;
  margin-bottom:4px;
}

.step p{
  color:#f6d9d3;
  font-size:0.88rem;
}

.adherer .btn{
  background:#fff;
  color:var(--rouge-2);
}

.adherer .btn:hover{
  background:#f2e8e5;
}
/* ============================
   SECTION TARIFS UPC — PREMIUM
   ============================ */

.tarifs-upc {
  margin-top: 32px;
  padding: 24px 28px;
  background: #717171;
  border: 1px solid #e5e1da;
  border-radius: 12px;
}

.tarifs-upc h3 {
  font-size: 1.35rem;
  margin-bottom: 16px;
  font-weight: 700;
  color: #1a1a1a;
}

.tarifs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 24px;
}

.tarifs-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 1rem;
  border-bottom: 1px solid #e5e1da;
}

.tarifs-list li:last-child {
  border-bottom: none;
}

.tarif {
  color: #8c1d1d;
  font-weight: 700;
  font-size: 1rem;
}
/* 📱 Ultra petits écrans (iPhone SE, vieux Android) */
@media (max-width: 360px) {
  .tarifs-list {
    grid-template-columns: 1fr;
    gap: 6px 0;
  }

  .tarifs-list li {
    padding: 8px 0;
    font-size: 0.95rem;
  }

  .tarif {
    font-size: 0.95rem;
  }
  .tarifs-upc {
  
  padding: 12 14px;
  
}
}

/* ---------- BANNIÈRE BOUTIQUE (homepage) ---------- */
.boutique-banner{
  background:url('https://upc.nc/images/assets/boutique.webp') center/cover no-repeat;
  padding:90px 0;
  position:relative;
  z-index:0; /* pour éviter qu’elle passe au-dessus du sidebar */
}


.boutique-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.45);
}

.boutique-banner .wrap{
  position:relative;
  z-index:2;
}

.boutique-content{
  text-align:center;
  color:#fff;
}

.boutique-content h2{
  color:#fff;
  margin-bottom:16px;
}

.boutique-content p{
  color:#f2f2f2;
  margin-bottom:26px;
}

.boutique-content .btn{
  background:#fff;
  color:var(--rouge);
}

.boutique-content .btn:hover{
  background:#f2e8e5;
}

/* ---------- RESPONSIVE HOMEPAGE ---------- */
@media (max-width: 900px){
  .mission-grid,
  .adherer .wrap{
    grid-template-columns:1fr;
    gap:36px;
  }

  .card-grid,
  .news-grid,
  .territoire-grid{
    grid-template-columns:1fr;
  }

  .stat-row{
    grid-template-columns:1fr;
    gap:18px;
  }
 
}