/* ============================================================
   PAGE NOS SOLUTIONS — refonte V2
   ------------------------------------------------------------
   Ce fichier est chargé UNIQUEMENT par solutions.html, et APRÈS
   styles/pages/solutions.css : il surcharge l'habillage sans
   modifier le fichier d'origine du développeur, et ne peut donc
   pas affecter les autres pages du site.

   Il reprend la grammaire visuelle établie sur la page d'accueil :
     étiquette   12.5px · 700 · .05em · bleu marque
     titre       Manrope 700 · clamp(24px,3vw,38px) · #12151c
     paragraphe  14.5px · 400 · #5a6072 · interligne 1.65
     surfaces    blanc / #f6f7fb, rayons 14-28px, pas d'ombres lourdes

   AUCUN identifiant ni classe utilisés par le JavaScript de la page
   n'est renommé (#solutionTabs, .bouton-gammes, #solutionImage,
   #solutionTitle, #solutionDesc, #benefitsList, #modelTabsContainer,
   #specsBars, .progress-*, .faq-*). On ne touche qu'à l'apparence.
   ============================================================ */

/* ---------- Cadre général ----------
   Pas de padding en haut : la photo de la hero remonte jusqu'au sommet de
   la page et passe SOUS la barre de navigation, qui flotte par-dessus en
   transparence — même principe que la page d'accueil. Le décalage est
   reporté dans le padding interne de la hero (voir plus bas), pour que le
   texte ne se retrouve pas caché derrière le menu. */
body {
  padding-top: 0;
  background-color: #fff;
}


/* ============================================================
   1. HERO — étiquette + grand titre + accroche, alignés à gauche
   ============================================================ */
/* solutions.css impose ici fond, padding et marge en !important
   (`background:#f7f9fc !important` etc.) : on ne peut les remplacer
   qu'avec !important à son tour. */
.solutions-hero {
  position: relative;
  /* Hauteur fixée et identique à la page Réalisations. Sans min-height, la
     hauteur dépendait de la longueur du titre : elle aurait bougé au moindre
     changement de texte, et les deux pages ne se seraient jamais alignées.
     170px en haut = 80px de menu + 90px de respiration. */
  min-height: 500px;
  display: flex;
  align-items: center;
  padding: 170px 48px 90px !important;
  margin: 0 !important;
  background-color: #0f1f4a !important;
  background-image:
    linear-gradient(100deg, rgba(9, 20, 60, 0.94) 0%, rgba(9, 20, 60, 0.68) 42%, rgba(9, 20, 60, 0.3) 100%),
    url('../../assets/images/solutions-hero.webp?v=1') !important;
  background-size: cover !important;
  background-position: center 38% !important;
  background-repeat: no-repeat !important;
  overflow: hidden;
}

.solutions-hero .container { background: transparent; width: 100%; }

/* Pas de fondu blanc en bas : il délavait le tiers inférieur de la photo.
   La coupe est franche, comme sur la hero de la page d'accueil — la barre
   d'onglets qui suit assure elle-même la transition vers le blanc. */
.solutions-hero::after { display: none; }

.solutions-hero .container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  z-index: 2;
}

.titre-page-solutions {
  text-align: left;
  background: transparent;
  margin: 0;
  max-width: 620px;
}

/* le <h1> devient le grand titre ; l'étiquette est ajoutée en HTML */
/* Texte en clair sur la photo, comme la hero de la page d'accueil. */
.titre-page-solutions .solutions-eyebrow {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03em;
  color: #bcd0f5;
  margin-bottom: 16px;
}

.titre-page-solutions .heading-xl {
  font-family: var(--font-heading);
  font-size: clamp(32px, 4.4vw, 50px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fff;
  text-align: left;
  margin: 0 0 18px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.18);
}

.titre-page-solutions .heading-xl .hl {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.titre-page-solutions .subtitle {
  text-align: left;
  margin: 0;
  max-width: 470px;
}

.titre-page-solutions .subtitle p {
  font-family: var(--font-primary);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.6;
  color: #e2e8f7;
  text-align: left;
  margin: 0;
}


/* ============================================================
   2. ONGLETS DE GAMMES — pilules, défilement horizontal sur mobile
   ============================================================ */
/* Les 8 onglets passent à la ligne au lieu de défiler horizontalement :
   plus aucune pilule tronquée aux extrémités, et tout est visible d'emblée.
   Le défilement horizontal n'est conservé que sur petits écrans. */
.tabs-container {
  position: sticky;
  top: 80px;
  z-index: 30;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(18, 21, 28, 0.07);
  padding: 0 48px;
  margin: 0;
  max-width: none;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  overflow: visible;
  padding: 16px 0;
  max-width: 1180px;
  margin: 0 auto;
  border-bottom: none;
}

/* Onglets principaux uniquement : les sous-onglets de modèles
   réutilisent la même classe, ils sont traités plus bas. */
.tabs .bouton-gammes {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(18, 21, 28, 0.12);
  background: #fff;
  color: #5a6072;
  font-family: var(--font-primary);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
}

.tabs .bouton-gammes .tab-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.tabs .bouton-gammes:hover {
  border-color: rgba(36, 81, 196, 0.35);
  color: #12151c;
  transform: translateY(-1px);
}

.tabs .bouton-gammes.active {
  background: #12151c;
  border-color: #12151c;
  color: #fff;
}


/* ============================================================
   3. BLOC GAMME — photo + présentation en deux colonnes
   ============================================================ */
.solution-section {
  background: #fff;
  padding: 56px 48px 90px;
  margin: 0;
}

.solution-section .container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
}

.solution-row-top {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 72px;
}

/* -- Photo -- */
.solution-image {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #eef1f7;
  margin: 0;
  box-shadow: none;
}

.solution-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .45s ease;
}

.solution-image:hover img { transform: scale(1.04); }

/* -- Texte -- */
.solution-intro {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.solution-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.solution-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: rgba(36, 81, 196, 0.08);
  color: var(--brand-blue);
  padding: 9px;
  box-shadow: none;
}

.solution-icon svg { width: 100%; height: 100%; }

.solutionTitle {
  font-family: var(--font-heading);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #12151c;
  text-align: left;
  margin: 0;
}

.solution-content p,
.texte-presentation-gamme {
  font-family: var(--font-primary);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.7;
  color: #5a6072;
  text-align: left;
  max-width: 560px;
  margin: 0 0 26px;
}

.btn-devis-solution {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #12151c;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 13.5px;
  font-weight: 700;
  padding: 13px 24px;
  border-radius: 999px;
  border: none;
  text-decoration: none;
  transition: transform .18s ease, background .25s ease;
}

.btn-devis-solution:hover {
  transform: translateY(-2px);
  background: var(--brand-blue);
  color: #fff;
}


/* ============================================================
   3 bis. « CONCRÈTEMENT » — le problème vécu, puis le résultat
   Contenu injecté par js/solutions-v2.js.
   ============================================================ */
#gammeContext { margin: 0 0 22px; }

.gamme-probleme {
  position: relative;
  font-family: var(--font-heading);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.45;
  color: #12151c;
  margin: 0 0 12px;
  padding-left: 16px;
  max-width: 560px;
  border-left: 3px solid var(--brand-blue);
}

.gamme-resultat {
  font-family: var(--font-primary);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.65;
  color: #5a6072;
  margin: 0;
  padding-left: 16px;
  max-width: 560px;
}

/* La description technique d'origine passe au second plan : elle reste
   disponible pour qui veut le détail, sans écraser le message simple. */
.texte-presentation-gamme {
  font-size: 13px;
  line-height: 1.65;
  color: #8990a3;
}


/* ============================================================
   3 ter. « IDÉAL SI… » — trois situations concrètes
   Contenu injecté par js/solutions-v2.js.
   ============================================================ */
.gamme-cas {
  margin: 0 0 64px;
}

.gamme-cas-titre {
  font-family: var(--font-primary);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin: 0 0 20px;
  padding-top: 20px;
  border-top: 2px solid var(--brand-blue);
}

.gamme-cas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.gamme-cas-item {
  background: #f6f7fb;
  border: 1px solid rgba(18, 21, 28, 0.05);
  border-radius: 16px;
  padding: 22px 22px 24px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.gamme-cas-item:hover {
  transform: translateY(-3px);
  border-color: rgba(36, 81, 196, 0.25);
  box-shadow: 0 16px 36px rgba(15, 31, 74, 0.07);
}

.gamme-cas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

/* Repère de public : le particulier se reconnaît, le professionnel voit que
   son cas est traité — sans transformer la page en catalogue B2B. */
.gamme-cas-public {
  font-family: var(--font-primary);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.gamme-cas-public--particulier {
  background: rgba(36, 81, 196, 0.09);
  color: var(--brand-blue);
}

.gamme-cas-public--pro {
  background: rgba(18, 21, 28, 0.07);
  color: #5a6072;
}

.gamme-cas-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: #fff;
  color: var(--brand-blue);
  padding: 9px;
  box-shadow: 0 2px 8px rgba(15, 31, 74, 0.06);
}

.gamme-cas-icon svg { width: 100%; height: 100%; }

.gamme-cas-label {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: #12151c;
  margin-bottom: 6px;
}

.gamme-cas-text {
  font-family: var(--font-primary);
  font-size: 13px;
  line-height: 1.55;
  color: #6b7185;
  margin: 0;
}


/* ============================================================
   4. AVANTAGES + CARACTÉRISTIQUES
   ------------------------------------------------------------
   Disposition revue : plus de deux colonnes de hauteurs inégales
   (qui laissaient un grand vide à gauche). On empile deux bandes
   pleine largeur :
     — « Ce que ça change » : les bénéfices, sur deux colonnes
     — « Les chiffres » : les mesures reprises en gros caractères
       dégradés, comme les résultats clés de la page d'accueil,
       chacune traduite en français courant.
   Les barres de progression sont supprimées : sur un indicateur
   comme le facteur solaire, où plus bas veut dire meilleur, une
   barre à moitié remplie induisait le lecteur en erreur.
   ============================================================ */
.solution-row-bottom {
  display: block;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  margin-bottom: 0;
}

.solution-benefits,
.solution-specs {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}

.solution-benefits { margin-bottom: 56px; }

/* la FAQ est imbriquée dans cette section : il faut de l'air avant elle */
.solution-specs { margin-bottom: 90px; }

.titre-avantage {
  font-family: var(--font-primary);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--brand-blue);
  text-align: left;
  margin: 0 0 24px;
  padding-top: 20px;
  border-top: 2px solid var(--brand-blue);
}

/* -- Liste d'avantages sur deux colonnes -- */
.benefits-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 40px;
}

.benefits-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
}

.benefits-list .check {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(36, 81, 196, 0.1);
  position: relative;
}

.benefits-list .check::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 5px;
  width: 4px;
  height: 8px;
  border-right: 2px solid var(--brand-blue);
  border-bottom: 2px solid var(--brand-blue);
  transform: rotate(45deg);
}

.texte-avantage {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #3d4356;
  max-width: none;
  text-align: left;
}

/* -- Sélecteur de modèle -- */
.model-tabs-container { margin: 0 0 28px; }

/* solutions.css centre ces pilules : on les réaligne à gauche, comme le
   reste de la page. */
.model-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px;
}

.model-tabs .bouton-gammes {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(18, 21, 28, 0.12);
  background: #fff;
  color: #5a6072;
  font-family: var(--font-primary);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.model-tabs .bouton-gammes:hover {
  border-color: rgba(36, 81, 196, 0.35);
  color: #12151c;
}

.model-tabs .bouton-gammes.active {
  background: #12151c;
  border-color: #12151c;
  color: #fff;
}

/* -- Chiffres clés : même traitement que la page d'accueil -- */
.progress-bars-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 32px;
}

.progress-card {
  background: transparent;
  border: none;
  padding: 22px 0 0;
  box-shadow: none;
  border-top: 1px solid rgba(18, 21, 28, 0.1);
}

/* on inverse l'ordre : le chiffre d'abord, le libellé ensuite */
.progress-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-bottom: 8px;
}

/* Le chiffre porte une couleur en style inline (posée par le script
   d'origine) : -webkit-text-fill-color prend le pas dessus et laisse
   apparaître le dégradé de marque. */
.progress-value {
  order: -1;
  font-family: var(--font-heading);
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent !important;
  color: transparent;
}

.progress-label {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 600;
  color: #12151c;
  margin-top: 6px;
}

.progress-note {
  font-family: var(--font-primary);
  font-size: 12.5px;
  line-height: 1.5;
  color: #6b7185;
  margin: 0;
  max-width: 280px;
}

/* Barres supprimées : le chiffre et sa traduction suffisent, et la
   barre était trompeuse pour les indicateurs « plus bas = mieux ». */
.progress-track { display: none; }

/* ============================================================
   5. TRANSITION AU CHANGEMENT DE GAMME
   La classe est posée/retirée par js/solutions-v2.js.
   ============================================================ */
.solution-section .container.is-switching .solution-row-top,
.solution-section .container.is-switching .solution-row-bottom {
  opacity: 0;
  transform: translateY(10px);
}

.solution-section .container .solution-row-top,
.solution-section .container .solution-row-bottom {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .35s ease, transform .35s ease;
}


/* ============================================================
   6. FAQ
   ============================================================ */
/* components/faq.css est écrit pour l'ancienne charte sombre
   (fond var(--primary-dark), cartes translucides, texte clair) : on repasse
   l'ensemble en clair, uniquement sur cette page. */
.faq-section {
  background: #f6f7fb;
  padding: 90px 48px;
  margin: 0;
  overflow: visible;
}

.faq-section::before { display: none; }

.faq-section .processus-subtitle {
  font-family: var(--font-primary);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.65;
  color: #5a6072;
  text-align: left;
  max-width: 560px;
  margin: 0 0 32px;
}

/* Dans le HTML, #faqList est un frère de .faq-container (et non son enfant) :
   il faut donc lui appliquer la même largeur pour que les questions
   s'alignent sur le titre. */
.faq-container,
.faq-section #faqList {
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
}

.faq-section .section-title,
.faq-section .heading-xl {
  text-align: left;
}

.faq-section .heading-xl {
  font-family: var(--font-heading);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #12151c;
  margin: 0 0 32px;
}

.faq-item {
  background: #fff;
  border: 1px solid rgba(18, 21, 28, 0.07);
  border-radius: 14px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.faq-item:hover { border-color: rgba(36, 81, 196, 0.3); }

.faq-item.open {
  border-color: rgba(36, 81, 196, 0.35);
  box-shadow: 0 10px 30px rgba(15, 31, 74, 0.06);
}

/* faq.css force `color: var(--text-white) !important` (charte sombre
   d'origine) : on ne peut le neutraliser qu'avec !important à son tour. */
.faq-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: #12151c !important;
}

.faq-header:hover { color: var(--brand-blue) !important; background: transparent; }

.faq-item,
.faq-answer-text { color: #5a6072; }

.faq-chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--brand-blue);
  transition: transform .3s ease;
}

.faq-item.open .faq-chevron { transform: rotate(180deg); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(.22, 1, .36, 1);
}

.faq-item.open .faq-answer { max-height: 720px; }

.faq-answer-text {
  padding: 0 22px 20px;
  border-top: none;
  font-family: var(--font-primary);
  font-size: 13.5px;
  line-height: 1.7;
  color: #5a6072;
}

.faq-item.open .faq-answer-text { padding-top: 0 !important; }

.faq-answer-text p { margin: 0 0 10px; }
.faq-answer-text ul { margin: 0 0 10px; padding-left: 18px; }
.faq-answer-text li { margin: 0 0 4px; }
.faq-answer-text strong { color: #12151c; }


/* ============================================================
   7. RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  /* 64px de menu + respiration */
  .solutions-hero { padding: 150px 24px 70px !important; min-height: 430px; }
  .tabs-container { padding: 0 24px; top: 64px; }

  /* sur mobile, on repasse en défilement horizontal : 8 pilules empilées
     prendraient trop de hauteur avant d'atteindre le contenu */
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 12px 0;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs .bouton-gammes { flex: 0 0 auto; }
  .solution-section { padding: 40px 24px 70px; }
  .faq-section { padding: 70px 24px; }

  .solution-row-top {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 56px;
  }

  .solution-row-bottom {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .solution-image { aspect-ratio: 16 / 10; }

  .gamme-cas { margin-bottom: 48px; }
  .gamme-cas-grid { grid-template-columns: 1fr 1fr; }
  .benefits-list { grid-template-columns: 1fr; gap: 14px; }
  .progress-bars-container { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 980px) {
  /* Sous-onglets de modèles : 30px de haut, c'est en dessous de ce qu'un
     pouce vise correctement. On passe à 40px et on agrandit le texte. */
  .model-tabs { gap: 8px; }
  .model-tabs .bouton-gammes {
    min-height: 40px;
    padding: 10px 16px;
    font-size: 12.5px;
  }

  /* Repères de public : 10.5px est trop petit pour être lu confortablement
     sur un téléphone. */
  .gamme-cas-public { font-size: 11.5px; padding: 5px 10px; }
}

@media (max-width: 560px) {
  /* 60px de menu + respiration */
  .solutions-hero { padding: 125px 18px 56px !important; min-height: 360px; }
  .tabs-container { padding: 0 18px; top: 60px; }
  .solution-section { padding: 32px 18px 56px; }
  .gamme-cas-grid { grid-template-columns: 1fr; }
  .faq-section { padding: 56px 18px; }
  .faq-header { padding: 16px 18px; font-size: 14.5px; }
  .faq-answer-text { padding: 0 18px 18px; }
  .gamme-cas-grid { grid-template-columns: 1fr; }
  .gamme-probleme { font-size: 15.5px; }
  .progress-bars-container { grid-template-columns: 1fr; gap: 18px; }
}