/* ============================================
   UPDY — Énergies Espagne (stylesheet complet)
   ============================================ */

/* ---------- HERO ---------- */
.hero-page{
  background: url('assets/images/energie-espagne-hero.png') center 64% / cover no-repeat;
  color:#fff;
  padding:6rem 0;
  text-align:center;
  position:relative;
}
.hero-page h1{
  font-family: var(--font-serif);
  font-size:3rem;
  font-weight:800;
  margin-bottom:.6rem;
  letter-spacing:-.5px;
}
.hero-page p{
  font-size:1.22rem;
  max-width:720px;
  margin:0 auto;
  opacity:.95;
}

/* ---------- TITRES DE SECTION GÉNÉRIQUES ---------- */
.section-title{
  text-align:center;
  font-family: var(--font-serif);
  font-size:2rem;
  font-weight:800;
  margin:0 0 1.8rem;
  letter-spacing:-.5px;
  position:relative;
}
.section-title::after{
  content:"";
  display:block;
  width:56px; height:4px;
  background: var(--primary, #FF8C00);
  border-radius:2px;
  margin:.55rem auto 0;
}

/* ---------- SERVICES (2 cartes centrées) ---------- */
.services-section{ padding:3rem 0 2rem; }

.services-grid.two{
  display:grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap:1.2rem;
  max-width:1000px;
  margin:0 auto;
  padding:0 1rem;
}

.service-card{
  background:#fff;
  border:1px solid #eee;
  border-radius:16px;
  padding:1.3rem 1.2rem 1.2rem;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  text-align:left;
}
.service-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(0,0,0,.1);
  border-color:#f3e3d1;
}
.service-card .service-icon{
  width:46px; height:46px; object-fit:contain; margin-bottom:.6rem;
}
.service-card h3{
  font-weight:800; color:#2B1C08; font-size:1.18rem; letter-spacing:-.2px;
  margin:.2rem 0 .5rem;
}

/* Liste points du service */
.service-list{
  list-style:none; padding:0; margin:.2rem 0 .9rem;
  color:#2B1C08; font-size:.98rem; line-height:1.45;
}
.service-list li{ margin:.35rem 0; }

/* Rangée de logos plateformes (optionnelle) */
.brand-row{
  display:flex; gap:.5rem; align-items:center; margin:.2rem 0 .6rem; flex-wrap:wrap;
}
.brand-row li{ list-style:none; }
.brand-row img{
  width:22px; height:22px; display:block; opacity:.92;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.03));
}

/* CTA des cartes */
.btn-outline{
  display:inline-block;
  padding:.68rem 1.1rem;
  border:1px solid var(--primary, #FF8C00);
  color: var(--primary, #FF8C00);
  font-weight:700; border-radius:10px; text-decoration:none;
  transition: background .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.btn-outline:hover{
  background: var(--primary, #FF8C00);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(255,140,0,.28);
}

/* ---------- SECTION CIBLES ---------- */
.target-section{
  background: var(--bg-light, #FFF8F0);
  padding:3.2rem 0;
  text-align:center;
}
.target-section p{
  max-width:820px; margin:0 auto 2rem;
  font-size:1.05rem; color:#2B1C08; opacity:.9;
}
.target-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:1.4rem;
  max-width:1000px; margin:0 auto;
}
.target-card{
  background:#fff;
  padding:1.6rem 1.4rem;
  border-radius:16px;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.target-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,.1);
}
.target-card img{
  width:48px; height:48px; object-fit:contain; margin-bottom:.7rem;
}
.target-card h3{
  font-size:1.12rem; font-weight:800; color:#2B1C08; margin:.1rem 0 .35rem;
}
.target-card p{
  font-size:.97rem; color:#2B1C08; opacity:.92; line-height:1.5; margin:0;
}

/* ---------- AVANTAGES ---------- */
.advantages{ padding:3.2rem 0 2rem; }

.advantages-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap:1.2rem;
  max-width:1100px; margin:0 auto;
}
.advantage{
  background:#fff;
  border:1px solid #eee;
  border-radius:16px;
  padding:1.3rem 1.2rem;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  text-align:center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  margin-bottom: 3rem; /* <-- ajoute un espace entre les cartes et le CTA */
}
.advantage:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(0,0,0,.1);
  border-color:#f3e3d1;
}
.advantage img{
  width:70px; height:70px; object-fit:contain; margin-bottom:.7rem;
}
.advantage h3{
  font-size:1.08rem; font-weight:800; color: var(--primary, #FF8C00); margin:.05rem 0 .4rem;
}
.advantage p{
  font-size:.96rem; color:#2B1C08; opacity:.9; line-height:1.5; margin:0;
}

/* ---------- CTA PIED DE PAGE ---------- */
.cta-section{
  background: var(--primary, #FF8C00);
  color:#fff; text-align:center;
  padding:3rem 0; margin:0;
}
.cta-section h2{
  font-size:2rem; font-weight:800; letter-spacing:-.4px; margin:0 0 1rem;
}
.cta-section .btn-primary{
  background:#fff; color: var(--primary, #FF8C00);
  font-weight:700; padding:.78rem 1.6rem;
  border-radius:12px; text-decoration:none;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
  transition: transform .12s ease, box-shadow .18s ease, background .15s ease, color .15s ease;
}
.cta-section .btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(0,0,0,.22);
  background: #FFF8F0; color:#B35F06;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px){
  .hero-page{ padding:4rem 0; }
  .hero-page h1{ font-size:2.2rem; }
  .hero-page p{ font-size:1.02rem; }

  .services-grid.two{ grid-template-columns:1fr; max-width:640px; }
}
@media (max-width: 560px){
  .section-title{ font-size:1.6rem; }
  .brand-row img{ width:20px; height:20px; }
  .service-card{ padding:1.1rem 1rem; }
}