/* ==========================================================================
   PCR Énergie — Page: Installation climatisation
   Fichier : assets/css/pages/installation-climatisation.css
   Dépendances : assets/css/variables.css (tokens --pcr-*)
   ========================================================================== */

/* =========================================================
   0) Base page + container
   ========================================================= */
.ic-page{
  background: var(--pcr-color-bg);
  color: var(--pcr-color-text);
}

.ic-container{
  width: min(var(--pcr-container-max), calc(100% - (var(--pcr-container-pad) * 2)));
  margin-inline: auto;
}

/* Typo globale dans la page */
.ic-page h1,
.ic-page h2,
.ic-page h3,
.ic-page h4{
  color: var(--pcr-color-heading);
  font-family: var(--pcr-font-heading);
  line-height: var(--pcr-leading-tight);
  margin: 0 0 var(--pcr-space-3);
}

.ic-page p,
.ic-page li{
  color: var(--pcr-color-text);
  font-family: var(--pcr-font-body);
  line-height: var(--pcr-leading-normal);
}

.ic-muted{ color: var(--pcr-color-muted); }

/* Espacement vertical standard entre blocs */
.ic-section{
  padding: clamp(26px, 3.6vw, 48px) 0;
  border-top: 1px solid var(--pcr-color-divider);
}
.ic-section:first-child{ border-top: 0; }

.ic-section-alt{
  background: linear-gradient(180deg,
    rgba(255,255,255,.03),
    rgba(255,255,255,.00)
  );
}

/* =========================================================
   1) HERO (image + overlay + grid)
   ========================================================= */
.ic-hero{
  position: relative;
  overflow: hidden;
  background: var(--pcr-color-surface);
  border-bottom: 1px solid var(--pcr-color-divider);
}

.ic-hero.has-hero-img{
  min-height: clamp(520px, 72svh, 860px);
}
@supports not (height: 100svh){
  .ic-hero.has-hero-img{ min-height: clamp(540px, 72vh, 860px); }
}

.ic-hero__media{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--pcr-color-surface-3);
}

/* Image full cover */
.ic-hero__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.05);
}

/* Overlay stable (évite “sauts” de luminosité) */
.ic-hero.has-hero-img::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(1200px 520px at 18% 18%,
      rgba(64,196,255,.14),
      rgba(64,196,255,0) 58%
    ),
    radial-gradient(900px 520px at 82% 22%,
      rgba(255,59,48,.12),
      rgba(255,59,48,0) 55%
    ),
    linear-gradient(180deg,
      rgba(0,0,0,.68),
      rgba(0,0,0,.74)
    );
}

/* Micro-grain léger */
.ic-hero.has-hero-img::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.22;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,.04) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 6px
    );
  mix-blend-mode: overlay;
}

.ic-hero .ic-container{
  position: relative;
  z-index: 3;
  padding: clamp(18px, 3vw, 34px) 0 clamp(26px, 4vw, 56px);
}

/* Breadcrumbs */
.ic-breadcrumbs{
  font-size: var(--pcr-text-sm);
  color: var(--pcr-color-muted);
  margin-bottom: var(--pcr-space-4);
}
.ic-breadcrumbs a{
  color: var(--pcr-link-color);
  text-decoration: none;
}
.ic-breadcrumbs a:hover{ color: var(--pcr-link-hover); }
.ic-bc-sep{ margin: 0 var(--pcr-space-2); opacity:.75; }
.ic-breadcrumbs__inner{ display:inline; }

/* Grid hero */
.ic-hero-grid{
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: clamp(16px, 3vw, 30px);
  align-items: start;
}

.ic-hero-content{
  padding: clamp(6px, 1vw, 10px);
}

.ic-kicker{
  display:inline-flex;
  gap: 8px;
  align-items:center;
  width: fit-content;
  font-size: var(--pcr-text-sm);
  color: var(--pcr-color-muted);
  padding: 6px 10px;
  border-radius: var(--pcr-radius-pill);
  border: 1px solid var(--pcr-color-border);
  background: rgba(255,255,255,.04);
  margin: 0 0 var(--pcr-space-4);
}

.ic-title{
  font-size: clamp(28px, 3.3vw, 46px);
  letter-spacing: -.02em;
  margin-bottom: var(--pcr-space-3);
}

.ic-lead{
  font-size: clamp(16px, 1.35vw, 18px);
  color: rgba(232,237,246,.92);
  max-width: 70ch;
  margin: 0 0 var(--pcr-space-5);
}

/* Badges */
.ic-badges{
  list-style: none;
  padding: 0;
  margin: 0 0 var(--pcr-space-6);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ic-badge{
  font-size: var(--pcr-text-sm);
  color: var(--pcr-color-text);
  padding: 8px 12px;
  border-radius: var(--pcr-radius-pill);
  border: 1px solid var(--pcr-color-border);
  background: rgba(255,255,255,.04);
  box-shadow: var(--pcr-shadow-sm);
}

/* CTA row */
.ic-cta-row{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  margin-bottom: var(--pcr-space-6);
}

/* Quick links chips */
.ic-quicklinks{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.ic-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--pcr-radius-pill);
  border: 1px solid var(--pcr-color-border);
  background: rgba(255,255,255,.03);
  color: var(--pcr-color-text);
  text-decoration:none;
  font-size: var(--pcr-text-sm);
  transition: transform var(--pcr-dur-fast) var(--pcr-ease),
              background var(--pcr-dur-fast) var(--pcr-ease),
              border-color var(--pcr-dur-fast) var(--pcr-ease);
}
.ic-chip:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(64,196,255,.30);
}
.ic-chip:focus-visible{ outline: none; box-shadow: var(--pcr-focus-ring); }

/* =========================================================
   2) Boutons (reprend tokens, texte lisible)
   ========================================================= */
.ic-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  min-height: 44px;
  padding: var(--pcr-btn-pad-y) var(--pcr-btn-pad-x);
  border-radius: var(--pcr-btn-radius);
  font-size: var(--pcr-btn-font-size);
  font-weight: var(--pcr-btn-font-weight);
  text-decoration:none;
  border: 1px solid transparent;
  transition: transform var(--pcr-dur-fast) var(--pcr-ease),
              background var(--pcr-dur-fast) var(--pcr-ease),
              border-color var(--pcr-dur-fast) var(--pcr-ease),
              color var(--pcr-dur-fast) var(--pcr-ease);
  will-change: transform;
}
.ic-btn:focus-visible{ outline:none; box-shadow: var(--pcr-focus-ring); }
.ic-btn:hover{ transform: translateY(-1px); }

/* IMPORTANT: texte blanc sur primaire, comme demandé */
.ic-btn-primary{
  background: var(--pcr-btn-primary-bg);
  color: #ffffff;
  border-color: rgba(255,255,255,.10);
  box-shadow: var(--pcr-shadow-sm);
}
.ic-btn-primary:hover{
  background: var(--pcr-btn-primary-bg-hover);
  color: #ffffff;
}

.ic-btn-ghost{
  background: var(--pcr-btn-ghost-bg);
  color: var(--pcr-btn-ghost-fg);
  border-color: var(--pcr-btn-ghost-border);
}
.ic-btn-ghost:hover{
  background: var(--pcr-btn-ghost-bg-hover);
  border-color: rgba(64,196,255,.22);
}

.ic-btn-soft{
  background: var(--pcr-color-primary-soft);
  color: var(--pcr-color-text);
  border-color: rgba(64,196,255,.22);
}
.ic-btn-soft:hover{
  background: rgba(64,196,255,.22);
}

/* =========================================================
   3) Hero card (aside)
   ========================================================= */
.ic-hero-card{ position: relative; }
.ic-card{
  background: rgba(17,24,39,.78);
  border: 1px solid var(--pcr-color-border);
  border-radius: var(--pcr-radius-lg);
  box-shadow: var(--pcr-shadow-md);
  padding: clamp(16px, 2.2vw, 22px);
  backdrop-filter: blur(10px);
}

.ic-card-title{
  font-size: clamp(16px, 1.2vw, 18px);
  margin-bottom: var(--pcr-space-3);
}

.ic-checklist{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.ic-checklist li{
  position: relative;
  padding-left: 26px;
  color: rgba(232,237,246,.95);
}
.ic-checklist li::before{
  content:"";
  position:absolute;
  left:0;
  top: .45em;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--pcr-color-primary-soft);
  border: 1px solid rgba(64,196,255,.28);
  box-shadow: 0 0 0 2px rgba(0,0,0,.18) inset;
}
.ic-checklist li::after{
  content:"";
  position:absolute;
  left: 4px;
  top: .62em;
  width: 6px;
  height: 3px;
  border-left: 2px solid rgba(255,255,255,.95);
  border-bottom: 2px solid rgba(255,255,255,.95);
  transform: rotate(-45deg);
}

.ic-card-divider{
  height: 1px;
  background: var(--pcr-color-divider);
  margin: var(--pcr-space-5) 0;
}

.ic-mini{
  font-size: var(--pcr-text-sm);
  color: var(--pcr-color-muted);
  margin: 0 0 var(--pcr-space-4);
}
.ic-mini strong{ color: var(--pcr-color-heading); }

.ic-card-note{
  border-radius: var(--pcr-radius-md);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 12px 12px;
  font-size: var(--pcr-text-sm);
  color: rgba(232,237,246,.90);
}

/* =========================================================
   4) Body & sections
   ========================================================= */
.ic-body{
  background: var(--pcr-color-bg);
}
.ic-body__inner{
  padding: clamp(14px, 2vw, 22px) 0 clamp(32px, 5vw, 64px);
}

/* Head de section */
.ic-section-head{
  margin-bottom: clamp(14px, 2.2vw, 22px);
}
.ic-section-head h2{
  font-size: clamp(20px, 2vw, 28px);
  margin-bottom: var(--pcr-space-2);
}
.ic-section-head p{
  margin: 0;
  color: rgba(232,237,246,.88);
  max-width: 85ch;
}

/* Panels */
.ic-panel{
  background: var(--pcr-color-surface);
  border: 1px solid var(--pcr-color-border);
  border-radius: var(--pcr-radius-lg);
  box-shadow: var(--pcr-shadow-sm);
  padding: clamp(16px, 2.2vw, 22px);
}

.ic-panel h3{
  font-size: clamp(16px, 1.3vw, 18px);
  margin-bottom: var(--pcr-space-3);
}
.ic-panel p{ margin: 0 0 var(--pcr-space-3); }
.ic-panel p:last-child{ margin-bottom: 0; }

.ic-note{
  color: var(--pcr-color-muted);
  font-size: var(--pcr-text-sm);
  margin-top: var(--pcr-space-3);
}

/* Lists */
.ic-list{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}
.ic-list li{ color: rgba(232,237,246,.92); }

/* Grids */
.ic-grid-2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2.2vw, 20px);
}
.ic-grid-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2.2vw, 20px);
}

.ic-mt{ margin-top: clamp(12px, 2.2vw, 20px); }

/* Icon boxes */
.ic-iconbox{
  border-radius: var(--pcr-radius-lg);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 16px;
}
.ic-ib-ico{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--pcr-color-primary-soft);
  border: 1px solid rgba(64,196,255,.24);
  margin-bottom: 10px;
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
}
.ic-iconbox h4{
  font-size: 16px;
  margin-bottom: 6px;
}
.ic-iconbox p{
  color: rgba(232,237,246,.88);
  margin: 0;
  font-size: var(--pcr-text-sm);
}

/* =========================================================
   5) CTA band (au milieu des sections)
   ========================================================= */
.ic-cta-band{
  margin-top: clamp(14px, 2.4vw, 22px);
}
.ic-cta-band__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 16px;
  border-radius: var(--pcr-radius-lg);
  border: 1px solid rgba(64,196,255,.22);
  background:
    radial-gradient(800px 260px at 18% 20%, rgba(64,196,255,.16), rgba(64,196,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  box-shadow: var(--pcr-shadow-sm);
}
.ic-cta-band__text strong{
  display:block;
  color: var(--pcr-color-heading);
  margin-bottom: 2px;
}
.ic-cta-band__text span{
  color: rgba(232,237,246,.88);
  font-size: var(--pcr-text-sm);
}
.ic-cta-band__actions{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

/* =========================================================
   6) Local (pills + trust)
   ========================================================= */
.ic-local-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2.2vw, 20px);
}

.ic-pills{
  list-style:none;
  margin: 12px 0 0;
  padding: 0;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.ic-pills li{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--pcr-radius-pill);
  border: 1px solid var(--pcr-color-border);
  background: rgba(255,255,255,.03);
  color: rgba(232,237,246,.92);
  font-size: var(--pcr-text-sm);
}

.ic-local-cta{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 14px;
}

.ic-trust{
  margin-top: 16px;
  border-radius: var(--pcr-radius-lg);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 14px;
}
.ic-trust h4{
  font-size: 16px;
  margin-bottom: 10px;
}

/* =========================================================
   7) FAQ (details)
   ========================================================= */
.ic-faq{
  display:grid;
  gap: 12px;
}

.ic-faq-item{
  border: 1px solid var(--pcr-color-border);
  border-radius: var(--pcr-radius-lg);
  background: var(--pcr-color-surface);
  box-shadow: var(--pcr-shadow-sm);
  overflow: clip;
}

.ic-faq-q{
  cursor: pointer;
  list-style: none;
  padding: 14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  font-weight: var(--pcr-weight-semibold);
  color: var(--pcr-color-heading);
}
.ic-faq-q::-webkit-details-marker{ display:none; }

/* Chevron */
.ic-faq-q::after{
  content:"";
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(232,237,246,.80);
  border-bottom: 2px solid rgba(232,237,246,.80);
  transform: rotate(45deg);
  transition: transform var(--pcr-dur) var(--pcr-ease);
  flex: 0 0 auto;
}

.ic-faq-item[open] .ic-faq-q::after{
  transform: rotate(-135deg);
}

.ic-faq-a{
  padding: 0 16px 16px;
  color: rgba(232,237,246,.90);
  border-top: 1px solid var(--pcr-color-divider);
}
.ic-faq-a p{ margin: 12px 0 0; }

/* =========================================================
   8) Final CTA
   ========================================================= */
.ic-final-cta{
  margin-top: clamp(16px, 2.6vw, 26px);
}
.ic-final-cta__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: clamp(16px, 2.4vw, 22px);
  border-radius: var(--pcr-radius-xl);
  border: 1px solid rgba(255,59,48,.20);
  background:
    radial-gradient(900px 260px at 18% 18%, rgba(255,59,48,.14), rgba(255,59,48,0) 60%),
    radial-gradient(900px 260px at 78% 18%, rgba(64,196,255,.12), rgba(64,196,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  box-shadow: var(--pcr-shadow-md);
}
.ic-final-cta__text strong{
  display:block;
  color: var(--pcr-color-heading);
  margin-bottom: 4px;
  font-size: clamp(16px, 1.3vw, 18px);
}
.ic-final-cta__text span{
  color: rgba(232,237,246,.88);
  font-size: var(--pcr-text-sm);
}
.ic-final-cta__actions{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

/* =========================================================
   9) Contenu Gutenberg (si the_content)
   ========================================================= */
.ic-article{
  margin-top: clamp(18px, 3vw, 30px);
}
.ic-article__content{
  background: var(--pcr-color-surface);
  border: 1px solid var(--pcr-color-border);
  border-radius: var(--pcr-radius-lg);
  padding: clamp(16px, 2.2vw, 22px);
  box-shadow: var(--pcr-shadow-sm);
}
.ic-article__content a{
  color: var(--pcr-link-color);
}
.ic-article__content a:hover{
  color: var(--pcr-link-hover);
}

/* Pagination WP */
.ic-pagination{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.ic-pagination a,
.ic-pagination span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: var(--pcr-radius-pill);
  border: 1px solid var(--pcr-color-border);
  background: rgba(255,255,255,.03);
  color: var(--pcr-color-text);
  text-decoration:none;
}
.ic-pagination a:hover{
  border-color: rgba(64,196,255,.22);
  background: rgba(255,255,255,.06);
}

/* =========================================================
   10) Responsive
   ========================================================= */
@media (max-width: 980px){
  .ic-hero-grid{
    grid-template-columns: 1fr;
  }
  .ic-card{
    background: rgba(17,24,39,.86);
  }
  .ic-grid-3{
    grid-template-columns: 1fr;
  }
  .ic-final-cta__inner,
  .ic-cta-band__inner{
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 720px){
  .ic-grid-2,
  .ic-local-grid{
    grid-template-columns: 1fr;
  }

  .ic-cta-row{
    gap: 10px;
  }
  .ic-btn{
    width: 100%;
  }
  .ic-quicklinks{
    gap: 8px;
  }
  .ic-chip{
    height: 34px;
  }
}

@media (prefers-reduced-motion: reduce){
  .ic-btn,
  .ic-chip,
  .ic-faq-q::after{
    transition: none !important;
  }
  .ic-btn:hover,
  .ic-chip:hover{
    transform: none !important;
  }
  .ic-hero__img{
    transform: none;
  }
}