/* ===============================
   ÉNERGIE FRANCE – STYLE ALIGNÉ
   =============================== */

/* HERO */
.hero-page {
  background: url('assets/images/energie-france-hero.jpg') center/cover no-repeat;
  color: #fff;
  padding: 6rem 0;
  text-align: center;
  position: relative;
}

.hero-page h1 {
  font-family: var(--font-serif);
  font-size: 3rem;
  margin-bottom: var(--space-sm);
  font-weight: 800;
}

.hero-page p {
  font-size: 1.25rem;
  max-width: 700px;
  margin: 0 auto;
  opacity: 0.95;
}

/* ===============================
   SECTION SERVICES FRANCE
   =============================== */
/* ====== SECTION SERVICES FRANCE (alignée sur l'Espagne) ====== */
.services-section {
  padding: 5rem 0;
}

.services-section .section-title {
  font-size: 2rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 2.5rem;
  position: relative;
}
.services-section .section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: var(--primary);
  margin: .6rem auto 0;
  border-radius: 3px;
}

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

.service-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  padding: 2rem 1.8rem;
  text-align: left;                 /* <-- alignement à gauche */
  transition: transform .25s ease, box-shadow .25s ease;
}
.service-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

/* Icône en haut à gauche */
.service-card .service-icon{
  width: 44px;
  height: 44px;
  display: block;
  margin: 0 0 .9rem 0;              /* <-- collée à gauche */
  object-fit: contain;
}

/* Titre */
.service-card h3{
  color: var(--primary);
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 0 .8rem 0;
}

/* Logos plateformes (gauche) */
.brand-row{
  display:flex;
  align-items:center;
  gap:.65rem;
  list-style:none;
  padding:0;
  margin:.1rem 0 1.1rem 0;
}
.brand-row img{
  width:26px;
  height:26px;
  object-fit:contain;
  opacity:.95;
  transition:opacity .2s ease, transform .2s ease;
}
.brand-row img:hover{
  opacity:1;
  transform: translateY(-1px);
}

/* Liste des points – pastille orange comme en Espagne */
.service-list{
  list-style:none;
  padding:0;
  margin:0 0 1.4rem 0;
}
.service-list li{
  position:relative;
  padding-left:1.15rem;
  margin:.5rem 0;
  color:#2B1C08;
  line-height:1.45;
}
.service-list li::before{
  content:'';
  position:absolute;
  left:0;
  top:.55em;
  width:.5rem;
  height:.5rem;
  border-radius:50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px #ffe7cf;  /* halo doux */
}

/* CTA rectangulaire (pas ovale) */
.btn-outline{
  display:inline-block;
  padding:.78rem 1.05rem;
  border:2px solid var(--primary);
  border-radius:12px;              /* <-- bords arrondis, pas pill */
  font-weight:700;
  color:var(--primary);
  text-decoration:none;
  background:#fff;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.btn-outline:hover{
  background:var(--primary);
  color:#fff;
  box-shadow: 0 6px 16px rgba(199,108,19,.25);
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 980px){
  .services-grid.two{
    grid-template-columns: 1fr;
  }
}


/* ===============================
   SECTION CIBLES
   =============================== */
.target-section {
  background: var(--bg-light);
  padding: var(--space-xl) 0;
  text-align: center;
}
.target-section h2 {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  position: relative;
}
.target-section h2::after {
  content: '';
  display: block;
  width: 50px;
  height: 4px;
  background: var(--primary);
  margin: 0.5rem auto 0;
  border-radius: 2px;
}
.target-section p {
  max-width: 800px;
  margin: 0 auto 2.5rem;
  font-size: 1.05rem;
  color: var(--text-light);
}
.target-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}
.target-card {
  background: #fff;
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.target-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.target-card img {
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  object-fit: contain;
}
.target-card h3 {
  font-size: 1.2rem;
  color: var(--primary-dark);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.target-card p {
  font-size: 0.95rem;
  color: var(--text-light);
}

/* ===============================
   SECTION AVANTAGES
   =============================== */
.advantages {
  padding: var(--space-xl) 0;
}
.advantages h2 {
  text-align: center;
  font-family: var(--font-serif);
  font-size: 2.2rem;
  margin-bottom: var(--space-lg);
  position: relative;
}
.advantages h2::after {
  content: '';
  display: block;
  width: 50px;
  height: 4px;
  background-color: var(--primary);
  margin: 0.5rem auto 0;
  border-radius: 2px;
}
.advantages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-lg);
  max-width: 1100px;
  margin: 0 auto;
}
.advantage {
  background: var(--bg-white);
  border-radius: var(--radius);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: transform var(--speed), box-shadow var(--speed);
  margin-bottom: 4rem; /* espace avant CTA */
}
.advantage:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.advantage img {
  width: 72px;
  height: 72px;
  margin-bottom: var(--space-md);
}
.advantage h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: var(--space-sm);
}
.advantage p {
  font-size: 0.95rem;
  color: var(--text-light);
}

/* ===============================
   SECTION CTA
   =============================== */
.cta-section {
  background: var(--primary);
  color: #fff;
  text-align: center;
  padding: var(--space-xl) 0;
  margin-bottom: 0;
}
.cta-section h2 {
  font-size: 2rem;
  margin-bottom: var(--space-md);
  font-weight: 700;
}
.cta-section .btn-primary {
  background: #fff;
  color: var(--primary);
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: var(--radius);
  transition: background var(--speed), color var(--speed);
  text-decoration: none;
}
.cta-section .btn-primary:hover {
  background: var(--bg-light);
  color: var(--primary-dark);
}

/* ===============================
   RESPONSIVE GÉNÉRAL
   =============================== */
@media (max-width: 768px) {
  .hero-page h1 {
    font-size: 2rem;
  }
  .hero-page p {
    font-size: 1rem;
  }
}