/* =========================================================
   JSRR - DEVENIR PARTENAIRE
   PREMIUM V2
   CLUB DE TERRITOIRE MONTS, RANCE & ROUGIER

   Image de fond :
   fond-jsrr.png

   Compatible :
   - Cloudflare Pages
   - Footeo iframe
   - Desktop
   - Tablette
   - Mobile
========================================================= */

/* =========================================================
   VARIABLES
========================================================= */

:root {
  --jsrr-green: #00843d;

  --jsrr-green-dark: #0c5842;

  --jsrr-green-deep: #08402f;

  --jsrr-orange: #f58220;

  --jsrr-orange-dark: #d9680d;

  --white: #ffffff;

  --black: #111111;

  --text: #333333;

  --glass: rgba(0, 0, 0, 0.42);

  --glass-light: rgba(255, 255, 255, 0.95);

  --border: rgba(255, 255, 255, 0.18);

  --shadow: 0 15px 40px rgba(0, 0, 0, 0.22);

  --shadow-hover: 0 20px 45px rgba(0, 0, 0, 0.3);

  --radius: 24px;
}

/* =========================================================
   RESET
========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  padding: 0;

  font-family: "Poppins", Arial, Helvetica, sans-serif;

  color: var(--white);

  background-color: var(--jsrr-green-dark);

  /*
    IMAGE DE FOND JSRR

    Le fichier fond-jsrr.png doit être
    dans le même dossier que style.css
  */

  background-image:
    linear-gradient(rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.48)),
    url("fond-jsrr.png");

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  background-attachment: scroll;

  min-height: 100vh;

  overflow-x: hidden;
}

/* =========================================================
   PAGE
========================================================= */

.page {
  width: 100%;

  max-width: 1200px;

  margin: auto;

  padding: 40px 25px;
}

/* =========================================================
   HERO
========================================================= */

.hero {
  min-height: 560px;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  margin-bottom: 40px;

  padding: 60px 30px;

  border-radius: 30px;

  background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.5));

  border: 1px solid rgba(255, 255, 255, 0.15);

  box-shadow: var(--shadow);
}

.hero-content {
  max-width: 850px;
}

.hero-badge {
  display: inline-block;

  padding: 10px 20px;

  margin-bottom: 20px;

  border-radius: 50px;

  background: rgba(255, 255, 255, 0.95);

  color: var(--jsrr-green);

  font-size: 14px;

  font-weight: 800;
}

.hero h1 {
  margin: 0 0 15px;

  font-size: clamp(32px, 6vw, 58px);

  line-height: 1.1;

  font-weight: 900;

  text-shadow: 0 5px 20px rgba(0, 0, 0, 0.65);
}

.hero h2 {
  margin: 0 0 20px;

  font-size: clamp(20px, 3vw, 30px);

  color: #ffffff;

  font-weight: 700;
}

.hero p {
  max-width: 700px;

  margin: 0 auto 30px;

  font-size: 19px;

  line-height: 1.7;

  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
}

/* =========================================================
   BOUTON HERO
========================================================= */

.hero-button {
  display: inline-block;

  padding: 16px 30px;

  border-radius: 50px;

  background: linear-gradient(135deg, var(--jsrr-green), var(--jsrr-orange));

  color: #ffffff;

  text-decoration: none;

  font-weight: 800;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);

  transition: 0.3s ease;
}

.hero-button:hover {
  transform: translateY(-4px) scale(1.03);

  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.35);
}

/* =========================================================
   SECTIONS
========================================================= */

.section {
  position: relative;

  margin-bottom: 35px;

  padding: 35px;

  border-radius: var(--radius);

  background: var(--glass);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  border: 1px solid var(--border);

  box-shadow: var(--shadow);

  overflow: hidden;
}

.section::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 5px;

  background: linear-gradient(
    90deg,
    var(--jsrr-green) 0%,

    var(--jsrr-green) 50%,

    var(--jsrr-orange) 50%,

    var(--jsrr-orange) 100%
  );
}

/* =========================================================
   SECTION HEADING
========================================================= */

.section-heading {
  display: flex;

  align-items: center;

  gap: 15px;

  margin-bottom: 25px;
}

.section-heading.centered {
  justify-content: center;

  text-align: center;
}

.section-icon {
  font-size: 32px;
}

.section-heading h2 {
  margin: 0;

  font-size: clamp(24px, 4vw, 34px);

  font-weight: 900;

  color: #ffffff;

  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.55);
}

.section-content p {
  font-size: 17px;

  line-height: 1.75;

  font-weight: 500;

  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.65);
}

.section-content strong {
  font-weight: 800;
}

/* =========================================================
   IMAGES
========================================================= */

/* =========================================================
   IMAGES - AFFICHAGE COMPLET + OUVERTURE AU CLIC
========================================================= */

.image-card {
  position: relative;

  margin-top: 30px;

  overflow: hidden;

  border-radius: 22px;

  background: #ffffff;

  border: 3px solid rgba(255, 255, 255, 0.95);

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

/* LIEN CLIQUABLE */

.image-link {
  position: relative;

  display: block;

  width: 100%;

  background: #ffffff;

  cursor: zoom-in;

  text-decoration: none;

  overflow: hidden;
}

/* IMAGE ENTIÈRE */

.image-card img {
  display: block;

  width: 100%;

  height: auto;

  max-height: 650px;

  object-fit: contain;

  background: #ffffff;

  transition:
    transform 0.4s ease,
    filter 0.4s ease;
}

/* EFFET AU SURVOL */

.image-link:hover img {
  transform: scale(1.02);

  filter: brightness(0.78);
}

/* OVERLAY CLIQUER POUR AGRANDIR */

.image-overlay {
  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%) scale(0.95);

  padding: 12px 22px;

  border-radius: 50px;

  background: rgba(0, 0, 0, 0.75);

  color: #ffffff;

  font-size: 14px;

  font-weight: 700;

  white-space: nowrap;

  opacity: 0;

  transition: 0.3s ease;

  pointer-events: none;
}

/* AFFICHAGE OVERLAY AU SURVOL */

.image-link:hover .image-overlay {
  opacity: 1;

  transform: translate(-50%, -50%) scale(1);
}

/* LÉGENDE */

.image-caption {
  position: relative;

  width: 100%;

  padding: 15px 18px;

  text-align: center;

  background: linear-gradient(135deg, var(--jsrr-green), var(--jsrr-orange));

  color: #ffffff;

  font-size: 15px;

  font-weight: 700;

  line-height: 1.4;
}

/* =========================================================
   IMAGE 2
========================================================= */

.second-image {
  margin-top: 0;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {
  .image-card {
    border-radius: 18px;

    border-width: 2px;
  }

  .image-card img {
    width: 100%;

    height: auto;

    max-height: none;

    object-fit: contain;
  }

  /* Sur mobile, l'overlay reste discret */

  .image-overlay {
    opacity: 1;

    transform: translate(-50%, -50%) scale(0.9);

    padding: 9px 15px;

    font-size: 12px;
  }

  .image-caption {
    padding: 12px 10px;

    font-size: 13px;
  }
}

/* =========================================================
   VALEURS
========================================================= */

.center-text {
  max-width: 850px;

  margin: 0 auto 30px;

  text-align: center;

  font-size: 17px;

  line-height: 1.7;
}

.values-grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 20px;
}

.value-card {
  padding: 25px 20px;

  text-align: center;

  background: rgba(255, 255, 255, 0.96);

  color: var(--text);

  border-radius: 20px;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);

  transition: 0.3s ease;
}

.value-card:hover {
  transform: translateY(-8px);

  box-shadow: var(--shadow-hover);
}

.value-icon {
  font-size: 38px;

  margin-bottom: 10px;
}

.value-card h3 {
  margin: 10px 0;

  color: var(--jsrr-green);

  font-size: 18px;
}

.value-card p {
  margin: 0;

  font-size: 14px;

  line-height: 1.6;
}

/* =========================================================
   POURQUOI PARTENAIRE
========================================================= */

.why-section {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 35px;

  align-items: center;
}

.why-section .image-card {
  margin: 0;
}

.why-section .image-card img {
  height: 480px;
}

.benefits {
  display: flex;

  flex-direction: column;

  gap: 15px;
}

.benefit {
  display: flex;

  align-items: flex-start;

  gap: 12px;

  padding: 15px;

  border-radius: 14px;

  background: rgba(255, 255, 255, 0.1);

  border: 1px solid rgba(255, 255, 255, 0.1);
}

.benefit span {
  font-size: 20px;
}

.benefit p {
  margin: 0;

  font-size: 15px;

  line-height: 1.6;
}

/* =========================================================
   TERRITOIRE
========================================================= */

.territory-section {
  position: relative;

  margin-bottom: 35px;

  padding: 45px 35px;

  border-radius: 25px;

  background: linear-gradient(
    135deg,
    rgba(0, 132, 61, 0.88),
    rgba(8, 64, 47, 0.92)
  );

  box-shadow: var(--shadow);
}

.territory-content {
  max-width: 900px;

  margin: auto;

  text-align: center;
}

.territory-content p {
  font-size: 17px;

  line-height: 1.75;
}

.territory-highlight {
  display: inline-block;

  margin-top: 20px;

  padding: 15px 25px;

  border-radius: 50px;

  background: rgba(255, 255, 255, 0.95);

  color: var(--jsrr-green);
}

/* =========================================================
   CONTACT
========================================================= */

.contact-section {
  margin-bottom: 35px;

  padding: 45px 35px;

  border-radius: 25px;

  background: rgba(255, 255, 255, 0.97);

  color: var(--text);

  box-shadow: var(--shadow);
}

.contact-header {
  max-width: 800px;

  margin: auto;

  text-align: center;
}

.contact-header h2 {
  color: var(--jsrr-green);

  font-size: 32px;
}

.contact-header p {
  font-size: 17px;

  line-height: 1.7;
}

.contact-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 25px;

  margin-top: 30px;
}

.contact-card {
  padding: 25px;

  text-align: center;

  border-radius: 20px;

  background: #f7f7f7;

  border: 2px solid rgba(0, 132, 61, 0.1);
}

.contact-icon {
  font-size: 38px;
}

.contact-card h3 {
  color: var(--jsrr-green);
}

.contact-card p {
  font-size: 14px;

  line-height: 1.6;
}

.contact-card a {
  display: inline-block;

  color: var(--jsrr-green);

  font-size: 14px;

  font-weight: 700;

  word-break: break-word;
}

/* =========================================================
   BOUTON CONTACT
========================================================= */

.contact-button-wrapper {
  text-align: center;

  margin-top: 35px;
}

.main-button {
  display: inline-block;

  padding: 16px 30px;

  border-radius: 50px;

  background: linear-gradient(135deg, var(--jsrr-green), var(--jsrr-orange));

  color: #ffffff;

  text-decoration: none;

  font-weight: 800;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);

  transition: 0.3s ease;
}

.main-button:hover {
  transform: translateY(-4px) scale(1.03);
}

/* =========================================================
   RESEAUX SOCIAUX
========================================================= */

.social-section {
  margin-bottom: 35px;

  padding: 40px 30px;

  border-radius: 25px;

  background: rgba(0, 0, 0, 0.42);

  backdrop-filter: blur(12px);

  box-shadow: var(--shadow);
}

.social-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 20px;

  max-width: 700px;

  margin: 30px auto 0;
}

.social-card {
  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 8px;

  padding: 25px;

  border-radius: 20px;

  background: rgba(255, 255, 255, 0.95);

  color: var(--jsrr-green);

  text-decoration: none;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);

  transition: 0.3s ease;
}

.social-card:hover {
  transform: translateY(-6px);

  box-shadow: var(--shadow-hover);
}

.social-card span {
  font-size: 35px;
}

.social-card strong {
  font-size: 18px;
}

.social-card small {
  color: #555;
}

/* =========================================================
   CTA FINAL
========================================================= */

.final-cta {
  padding: 50px 30px;

  margin-bottom: 30px;

  text-align: center;

  border-radius: 25px;

  background: linear-gradient(135deg, var(--jsrr-green), var(--jsrr-orange));

  box-shadow: var(--shadow);
}

.final-icon {
  font-size: 45px;
}

.final-cta h2 {
  font-size: 32px;
}

.final-cta p {
  max-width: 800px;

  margin: auto auto 20px;

  font-size: 17px;

  line-height: 1.7;
}

.final-cta strong {
  font-size: 18px;
}

/* =========================================================
   FOOTER
========================================================= */

footer {
  text-align: center;

  padding: 25px 0 10px;

  font-size: 17px;

  font-weight: 700;

  line-height: 1.7;

  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
}

/* =========================================================
   TABLETTE
========================================================= */

@media (max-width: 900px) {
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .why-section {
    grid-template-columns: 1fr;
  }

  .why-section .image-card {
    order: 1;
  }

  .why-content {
    order: 2;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {
  .page {
    padding: 20px 15px;
  }

  .hero {
    min-height: 500px;

    padding: 45px 20px;

    border-radius: 20px;
  }

  .hero h1 {
    font-size: 30px;
  }

  .hero h2 {
    font-size: 20px;
  }

  .hero p {
    font-size: 16px;
  }

  .section {
    padding: 25px 18px;

    border-radius: 18px;
  }

  .section-heading {
    align-items: flex-start;
  }

  .section-heading h2 {
    font-size: 24px;
  }

  .image-card img {
    height: 300px;
  }

  .values-grid {
    grid-template-columns: 1fr;
  }

  .why-section .image-card img {
    height: 320px;
  }

  .territory-section {
    padding: 35px 20px;
  }

  .contact-section {
    padding: 35px 20px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .social-grid {
    grid-template-columns: 1fr;
  }

  .final-cta {
    padding: 40px 20px;
  }

  .final-cta h2 {
    font-size: 26px;
  }
}

/* =========================================================
   PETITS ECRANS
========================================================= */

@media (max-width: 400px) {
  .page {
    padding: 15px 10px;
  }

  .hero {
    min-height: 450px;
  }

  .hero h1 {
    font-size: 25px;
  }

  .hero h2 {
    font-size: 18px;
  }

  .hero-button,
  .main-button {
    width: 100%;

    padding: 14px 15px;

    font-size: 14px;
  }

  .image-card img {
    height: 250px;
  }

  .section-heading h2 {
    font-size: 21px;
  }

  .contact-card a {
    font-size: 12px;
  }
}