/* Page « Nos services et outils » (page d'atterrissage de la campagne Ads). Préfixe so- : aucun
   effet sur les autres pages du site. Couleurs reprises de homepage.css. */

.so-page {
  --so-rouge: #cc0000;
  --so-rouge-fonce: #a30000;
  --so-noir: #1a1a1a;
  --so-gris: #f4f4f4;
  --so-texte: #333;
  font-family: "Open Sans", sans-serif;
  color: var(--so-texte);
}

/* Arrivée par une annonce sur une ancre : saut direct à la section (homepage.css rend le défilement
   doux sur html et body, ce qui faisait traverser la page et fausser la position d'arrivée).
   Les liens internes restent doux : homepage.js le demande explicitement au clic. */
html:has(.so-page),
html:has(.so-page) body {
  scroll-behavior: auto;
}

.so-page section {
  padding: 4rem 1.5rem;
  scroll-margin-top: 100px;
}

.so-conteneur {
  max-width: 1120px;
  margin: 0 auto;
}

.so-page h1,
.so-page h2,
.so-page h3,
.so-page h4 {
  font-family: "Montserrat", sans-serif;
  color: var(--so-noir);
}

/* ----- Boutons ----- */
.so-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.so-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.3rem;
  border-radius: 6px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.so-btn:hover,
.so-btn:focus-visible {
  text-decoration: none;
  transform: translateY(-2px);
}

.so-btn-principal {
  background: var(--so-rouge);
  color: #fff;
  border: 2px solid var(--so-rouge);
}

.so-btn-principal:hover,
.so-btn-principal:focus-visible {
  background: var(--so-rouge-fonce);
  border-color: var(--so-rouge-fonce);
  color: #fff;
}

.so-btn-secondaire {
  background: #fff;
  color: var(--so-noir);
  border: 2px solid var(--so-noir);
}

.so-btn-secondaire:hover,
.so-btn-secondaire:focus-visible {
  background: var(--so-noir);
  color: #fff;
}

/* ----- Haut de page ----- */
.so-page .so-hero {
  /* 1120 px de contenu, comme les sections (.so-conteneur), plus les marges intérieures. */
  max-width: calc(1120px + 3rem);
  margin: 0 auto;
  /* Le menu du site est fixe : il recouvrirait le surtitre. */
  padding-top: 6rem;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2.5rem;
  align-items: center;
}

.so-surtitre {
  color: var(--so-noir);
  font-weight: 600;
  letter-spacing: 0.01em;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.4;
  margin-bottom: 0.8rem;
}

.so-hero h1 {
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 1rem;
}

.so-chapo {
  font-size: 1.1rem;
  line-height: 1.6;
}

.so-piliers {
  display: grid;
  gap: 0.9rem;
}

.so-pilier {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  column-gap: 0.9rem;
  align-items: center;
  padding: 1rem 1.2rem;
  border: 1px solid #e3e3e3;
  border-left: 4px solid var(--so-rouge);
  border-radius: 8px;
  background: #fff;
  color: var(--so-texte);
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s ease, transform 0.1s ease;
}

.so-pilier:hover,
.so-pilier:focus-visible {
  color: var(--so-texte);
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.so-pilier > i {
  grid-row: span 3;
  font-size: 1.6rem;
  color: var(--so-rouge);
  text-align: center;
}

.so-pilier-titre {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  color: var(--so-noir);
}

.so-pilier-texte {
  font-size: 0.95rem;
}

/* Incitation au clic sur chaque offre */
.so-pilier-lien {
  margin-top: 0.35rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--so-rouge);
}

.so-pilier-lien i {
  margin-left: 0.3rem;
  font-size: 0.8rem;
  transition: transform 0.2s;
}

.so-pilier:hover .so-pilier-lien,
.so-pilier:focus-visible .so-pilier-lien {
  text-decoration: underline;
}

.so-pilier:hover .so-pilier-lien i,
.so-pilier:focus-visible .so-pilier-lien i {
  transform: translateX(3px);
}

/* ----- Sections ----- */
.so-section-fond {
  background: var(--so-gris);
}

.so-titre-section {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  margin-bottom: 1rem;
}

.so-titre-section span {
  color: var(--so-rouge);
}

.so-intro {
  font-size: 1.1rem;
  max-width: 820px;
  margin-bottom: 2rem;
}

.so-sous-titre {
  font-size: 1.3rem;
  margin: 3rem 0 1.2rem;
}

.so-bloc {
  margin-bottom: 2.5rem;
  scroll-margin-top: 100px;
}

.so-bloc h3 {
  font-size: 1.3rem;
  margin-bottom: 0.8rem;
}

.so-bloc h3 i {
  color: var(--so-rouge);
  margin-right: 0.3rem;
}

.so-bloc-image {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.5rem;
  align-items: center;
}

.so-bloc-inverse > figure {
  order: -1;
}

.so-page figure {
  margin: 0;
}

.so-page figure img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  background: #fff;
}

.so-page figcaption {
  font-size: 0.85rem;
  color: #666;
  margin-top: 0.4rem;
  text-align: center;
}

.so-liste {
  padding-left: 1.2rem;
  margin-bottom: 1rem;
}

.so-liste li {
  margin-bottom: 0.4rem;
}

.so-liste-coches {
  list-style: none;
  padding-left: 0;
}

.so-liste-coches li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--so-rouge);
  margin-right: 0.6rem;
}

.so-sources {
  font-size: 0.8rem;
  color: #666;
  font-style: italic;
}

.so-cartes,
.so-preuves {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

/* Bloc « Intérêt et avantages du solaire » : espace avant le bloc APER qui suit. */
.so-avantages {
  margin-bottom: 3.5rem;
}

.so-carte,
.so-preuve {
  background: #fff;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  padding: 1.2rem;
}

.so-carte img {
  width: 100%;
  height: 170px;
  object-fit: contain;
  margin-bottom: 0.8rem;
}

.so-carte h4,
.so-preuve h4 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

.so-preuve i {
  font-size: 1.6rem;
  color: var(--so-rouge);
  margin-bottom: 0.6rem;
}

.so-final {
  background: var(--so-noir);
  text-align: center;
}

.so-final .so-titre-section,
.so-final .so-intro {
  color: #fff;
  margin-left: auto;
  margin-right: auto;
}

.so-final .so-contact {
  justify-content: center;
}

.so-final .so-btn-secondaire {
  border-color: #fff;
}

/* Arrivée par une annonce sur une ancre (#aper, #socalts…) : la section visée est mise en avant. */
.so-section:target {
  animation: so-mise-en-avant 2.5s ease-out;
}

/* Un bloc n'a pas de marge intérieure : le cadre est tracé autour (sans décaler la mise en page),
   pour ne pas recouvrir le texte. */
.so-bloc:target {
  border-radius: 10px;
  outline: 3px solid transparent;
  outline-offset: 10px;
  animation: so-mise-en-avant-bloc 2.5s ease-out;
}

@keyframes so-mise-en-avant-bloc {
  0% {
    outline-color: var(--so-rouge);
    background-color: #fff3f3;
    box-shadow: 0 0 0 10px #fff3f3;
  }

  100% {
    outline-color: transparent;
    box-shadow: 0 0 0 10px transparent;
  }
}

@keyframes so-mise-en-avant {
  0% {
    box-shadow: inset 0 0 0 4px var(--so-rouge);
    background-color: #fff3f3;
  }

  100% {
    box-shadow: inset 0 0 0 4px transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .so-section:target {
    animation: none;
    box-shadow: inset 0 0 0 4px var(--so-rouge);
  }

  .so-bloc:target {
    animation: none;
    outline-color: var(--so-rouge);
  }
}

/* Barre rendez-vous / appel : téléphone et tablette seulement. */
.so-barre-mobile {
  display: none;
}

/* ----- Tablette et téléphone ----- */
@media (max-width: 900px) {
  /* Les boutons de contact restent en haut et en bas ; entre les deux, la barre fixe les remplace. */
  .so-contact-section {
    display: none;
  }

  .so-barre-mobile {
    display: flex;
    gap: 0.6rem;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
  }

  .so-barre-mobile .so-btn {
    flex: 1;
    justify-content: center;
    padding: 0.75rem 0.5rem;
  }

  /* Le pied de page ne passe pas sous la barre. */
  body:has(.so-barre-mobile) {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
  }

  .so-page .so-hero,
  .so-bloc-image {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .so-bloc-inverse > figure {
    order: 0;
  }

  .so-cartes,
  .so-preuves {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .so-page section {
    padding: 2.5rem 1rem;
  }

  .so-btn {
    width: 100%;
    justify-content: center;
  }
}