/*
Theme Name: FROID24
Theme URI: https://example.com/froid24
Author: CH2E
Author URI: https://example.com
Description: Thème WordPress vitrine + blog pour CH2E (énergies renouvelables) utilisant Bootstrap et ACF.
Version: 1.0.0
Text Domain: froid24
*/

/* ------------------------------
   Variables & base
--------------------------------*/
:root {
  --froid24-blue-dark: rgb(50, 89, 168);
  --froid24-blue-light: rgb(28, 135, 193);
  --froid24-yellow: rgb(237, 191, 84);
  --froid24-snow: #FFFAFA;
  --froid24-black: #1E191A;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--froid24-black);
  background-color: var(--froid24-snow);
}

h1, h2, h3, h4, h5, h6,
.navbar-brand {
  font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

a {
  color: var(--froid24-blue-light);
}

a:hover, a:focus {
  color: var(--froid24-blue-dark);
  text-decoration: none;
}

/* ------------------------------
   Layout utilitaires
--------------------------------*/
.section-padding {
  padding: 3rem 0;
}

@media (min-width: 992px) {
  .section-padding {
    padding: 4rem 0;
  }
}

.bg-soft-blue {
  background: rgba(50, 89, 168, 0.04);
}

.bg-soft-yellow {
  background: rgba(237, 191, 84, 0.08);
}

.text-blue-dark {
  color: var(--froid24-blue-dark);
}

.text-blue-light {
  color: var(--froid24-blue-light);
}

.btn-froid-primary {
  background: linear-gradient(135deg, var(--froid24-blue-dark), var(--froid24-blue-light));
  border: none;
  color: #fff;
  font-weight: 600;
  padding: 0.8rem 1.7rem;
  border-radius: 999px;
  box-shadow: 0 10px 25px rgba(50, 89, 168, 0.25);
}

.btn-froid-primary:hover,
.btn-froid-primary:focus {
  background: linear-gradient(135deg, var(--froid24-blue-light), var(--froid24-blue-dark));
  color: #fff;
}

.badge-prestation {
  background-color: rgba(28, 135, 193, 0.08);
  color: var(--froid24-blue-light);
  border-radius: 999px;
  font-size: 0.8rem;
  padding: 0.35rem 0.9rem;
  font-weight: 600;
}

/* ------------------------------
   Navbar
--------------------------------*/
.navbar-froid {
  background-color: #ffffff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
}

.navbar-froid .navbar-brand span {
  font-weight: 700;
  color: var(--froid24-blue-dark);
}

.navbar-froid .nav-link {
  font-weight: 500;
  color: var(--froid24-black);
}

.navbar-froid .nav-link:hover,
.navbar-froid .nav-link:focus,
.navbar-froid .nav-link.active {
  color: var(--froid24-blue-light);
}

/* ------------------------------
   Hero
--------------------------------*/
.hero-home {
  background: radial-gradient(circle at top left, rgba(237, 191, 84, 0.28), transparent 55%),
              radial-gradient(circle at bottom right, rgba(50, 89, 168, 0.25), transparent 55%),
              #f5f7fb;
  min-height: 70vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hero-home-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px),
                    linear-gradient(210deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px);
  background-size: 38px 38px;
  pointer-events: none;
}

.hero-home-content {
  position: relative;
  z-index: 1;
}

.hero-kpi-card {
  background-color: #ffffff;
  border-radius: 1.25rem;
  padding: 1rem 1.3rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

/* ------------------------------
   Cards prestations
--------------------------------*/
.prestation-card {
  border-radius: 1.25rem;
  border: 1px solid rgba(0, 0, 0, 0.04);
  background-color: #ffffff;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.03);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  height: 100%;
}

.prestation-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 45px rgba(0, 0, 0, 0.08);
  border-color: rgba(50, 89, 168, 0.18);
}

.prestation-card img {
  border-top-left-radius: 1.25rem;
  border-top-right-radius: 1.25rem;
}

.prestation-card-body {
  padding: 1.4rem 1.4rem 1.6rem;
}

/* ------------------------------
   Galerie réalisations
--------------------------------*/
.realisations-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .realisations-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.realisations-grid img {
  border-radius: 0.9rem;
  object-fit: cover;
  width: 100%;
  aspect-ratio: 4/3;
}

/* ------------------------------
   Bloc rassurance
--------------------------------*/
.rassurance-item {
  background-color: #ffffff;
  padding: 1.4rem 1.6rem;
  border-radius: 1.2rem;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.04);
  height: 100%;
}

/* ------------------------------
   Logos médias
--------------------------------*/
.media-logos img {
  max-height: 40px;
  opacity: 0.7;
}

/* ------------------------------
   Avis clients
--------------------------------*/
.avis-card {
  background-color: #ffffff;
  border-radius: 1.1rem;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05);
  height: 100%;
}

.star-rating {
  color: #f5b50a;
  font-size: 0.95rem;
}

/* ------------------------------
   Blog cards & single
--------------------------------*/
.post-card {
  border-radius: 1.2rem;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.04);
  background-color: #ffffff;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.post-card img {
  aspect-ratio: 16/9;
  object-fit: cover;
}

.post-card-body {
  padding: 1.3rem 1.4rem 1.6rem;
  flex: 1;
}

.single-article-toc {
  border-radius: 0.9rem;
  background-color: rgba(50, 89, 168, 0.04);
  padding: 1.1rem 1.3rem;
}

.single-article-faq .accordion-button {
  font-weight: 600;
}

/* ------------------------------
   Prestations – galerie & CTA
--------------------------------*/
.prestation-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .prestation-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.prestation-gallery img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 0.9rem;
}

.cta-prestation {
  border-radius: 1.4rem;
  background: linear-gradient(135deg, var(--froid24-blue-dark), var(--froid24-blue-light));
  color: #ffffff;
  padding: 2.2rem 1.8rem;
}

.cta-prestation h2,
.cta-prestation h3 {
  color: #ffffff;
}

/* ------------------------------
   404
--------------------------------*/
.page-404-illustration {
  font-size: 5rem;
}