Embed

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&display=swap" rel="stylesheet">

<style>

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

  .jsb-avis-intro,
  .jsb-avis-intro * {
    box-sizing: border-box;
  }


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

  .jsb-avis-intro {
    --background: #FBFAF8;
    --dark: #372C1F;
    --text: #6F665F;
    --terracotta: #B86445;

    width: 100%;
    margin: 0;

    padding:
      92px
      28px
      96px;

    background: var(--background);

    color: var(--dark);

    text-align: center;
  }


  /* ========================================
     CONTENEUR
  ======================================== */

  .jsb-avis-intro-inner {
    width: 100%;
    max-width: 820px;

    margin: 0 auto;
  }


  /* ========================================
     LABEL
  ======================================== */

  .jsb-avis-intro-label {
    display: inline-block;

    margin:
      0
      0
      17px;

    color: var(--terracotta);

    font-family:
      Manrope,
      Arial,
      Helvetica,
      sans-serif;

    font-size: 11px;
    font-weight: 600;
    line-height: 1;

    letter-spacing: 0.18em;
    text-transform: uppercase;
  }


  /* ========================================
     TITRE
  ======================================== */

  .jsb-avis-intro-title {
    max-width: 760px;

    margin:
      0
      auto;

    color: var(--dark);

    font-family:
      Georgia,
      "Times New Roman",
      serif;

    font-size:
      clamp(
        40px,
        4.4vw,
        58px
      );

    font-weight: 400;
    line-height: 1.04;

    letter-spacing: -0.03em;
  }


  /* ========================================
     TRAIT TERRACOTTA
  ======================================== */

  .jsb-avis-intro-line {
    display: block;

    width: 48px;
    height: 1px;

    margin:
      23px
      auto
      21px;

    background: var(--terracotta);
  }


  /* ========================================
     TEXTE
  ======================================== */

  .jsb-avis-intro-text {
    max-width: 620px;

    margin: 0 auto;

    color: var(--text);

    font-family:
      Manrope,
      Arial,
      Helvetica,
      sans-serif;

    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.7;
  }


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

  @media (max-width: 900px) {

    .jsb-avis-intro {
      padding:
        76px
        24px
        82px;
    }

    .jsb-avis-intro-title {
      max-width: 680px;

      font-size:
        clamp(
          36px,
          5.8vw,
          50px
        );
    }

    .jsb-avis-intro-text {
      max-width: 560px;

      font-size: 15px;
    }

  }


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

  @media (max-width: 700px) {

    .jsb-avis-intro {
      padding:
        58px
        18px
        64px;
    }

    .jsb-avis-intro-inner {
      max-width: 390px;
    }

    .jsb-avis-intro-label {
      margin-bottom: 14px;

      font-size: 10.5px;
    }

    .jsb-avis-intro-title {
      max-width: 365px;

      font-size:
        clamp(
          34px,
          9vw,
          43px
        );

      line-height: 1.04;
    }

    .jsb-avis-intro-line {
      width: 38px;

      margin:
        19px
        auto
        18px;
    }

    .jsb-avis-intro-text {
      max-width: 345px;

      font-size: 14.5px;
      line-height: 1.65;
    }

  }


  /* ========================================
     PETITS MOBILES
  ======================================== */

  @media (max-width: 390px) {

    .jsb-avis-intro {
      padding:
        52px
        14px
        58px;
    }

    .jsb-avis-intro-title {
      max-width: 330px;

      font-size:
        clamp(
          31px,
          8.8vw,
          39px
        );
    }

    .jsb-avis-intro-text {
      max-width: 310px;

      font-size: 14px;
    }

  }

</style>


<section class="jsb-avis-intro">

  <div class="jsb-avis-intro-inner">

    <span class="jsb-avis-intro-label">
      Vos avis
    </span>

    <h1 class="jsb-avis-intro-title">
      L’expérience de nos clients, en quelques mots.
    </h1>

    <span class="jsb-avis-intro-line"></span>

    <p class="jsb-avis-intro-text">
      Découvrez les retours de celles et ceux qui nous ont confié leur intérieur,
      leur projet, leur confiance.
    </p>

  </div>

</section>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&display=swap" rel="stylesheet">

<style>

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

  .jsb-review-form-intro,
  .jsb-review-form-intro * {
    box-sizing: border-box;
  }


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

  .jsb-review-form-intro {
    --background: #FBFAF8;
    --dark: #372C1F;
    --text: #6F665F;
    --terracotta: #B86445;

    width: 100%;
    margin: 0;

    padding:
      72px
      28px
      34px;

    background: var(--background);
    color: var(--dark);
  }


  /* ========================================
     CONTENEUR
  ======================================== */

  .jsb-review-form-intro-inner {
    display: grid;

    grid-template-columns:
      minmax(0, 1.2fr)
      1px
      minmax(0, 0.9fr);

    gap: 54px;

    width: 100%;
    max-width: 1120px;

    margin: 0 auto;

    align-items: center;
  }


  /* ========================================
     COLONNE GAUCHE
  ======================================== */

  .jsb-review-form-main {
    min-width: 0;
  }


  /* ========================================
     LABEL
  ======================================== */

  .jsb-review-form-label {
    display: inline-block;

    margin:
      0
      0
      20px;

    color: var(--terracotta);

    font-family:
      Manrope,
      Arial,
      Helvetica,
      sans-serif;

    font-size: 11px;
    font-weight: 600;
    line-height: 1;

    letter-spacing: 0.18em;
    text-transform: uppercase;
  }


  /* ========================================
     GRAND TITRE — PLUS FIN
  ======================================== */

  .jsb-review-form-title {
    margin: 0;

    color: var(--dark);

    font-family:
      Georgia,
      "Times New Roman",
      serif;

    font-weight: 400;

    line-height: 0.98;

    letter-spacing: -0.035em;
  }


  .jsb-review-form-title-line {
    display: block;
  }


  /* ET SI */

  .jsb-review-form-title-line--one {
    font-size:
      clamp(
        39px,
        3.8vw,
        54px
      );
  }


  /* VOUS PARTAGIEZ */

  .jsb-review-form-title-line--two {
    margin-top: 7px;

    font-size:
      clamp(
        41px,
        4vw,
        57px
      );
  }


  /* VOTRE EXPÉRIENCE ? */

  .jsb-review-form-title-line--accent {
    margin-top: 7px;

    color: var(--terracotta);

    font-size:
      clamp(
        40px,
        3.95vw,
        56px
      );

    font-style: italic;
    font-weight: 400;

    letter-spacing: -0.03em;
  }


  /* ========================================
     BARRE VERTICALE
  ======================================== */

  .jsb-review-form-divider {
    width: 1px;
    height: 220px;

    background: var(--terracotta);

    opacity: 0.92;
  }


  /* ========================================
     TEXTE DROITE — SERIF ÉLÉGANTE
  ======================================== */

  .jsb-review-form-side {
    min-width: 0;
  }

  .jsb-review-form-text {
    max-width: 410px;

    margin: 0;

    color: var(--dark);

    font-family:
      Georgia,
      "Times New Roman",
      serif;

    font-size: 17px;
    font-weight: 400;
    font-style: italic;

    line-height: 1.72;

    letter-spacing: -0.01em;
  }


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

  @media (max-width: 900px) {

    .jsb-review-form-intro {
      padding:
        64px
        24px
        30px;
    }

    .jsb-review-form-intro-inner {
      grid-template-columns:
        minmax(0, 1.15fr)
        1px
        minmax(0, 0.95fr);

      gap: 38px;

      max-width: 900px;
    }

    .jsb-review-form-divider {
      height: 190px;
    }

    .jsb-review-form-title-line--one {
      font-size:
        clamp(
          36px,
          4.6vw,
          48px
        );
    }

    .jsb-review-form-title-line--two {
      font-size:
        clamp(
          38px,
          4.9vw,
          51px
        );
    }

    .jsb-review-form-title-line--accent {
      font-size:
        clamp(
          37px,
          4.8vw,
          50px
        );
    }

    .jsb-review-form-text {
      max-width: 360px;

      font-size: 15.5px;
      line-height: 1.68;
    }

  }


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

  @media (max-width: 700px) {

    .jsb-review-form-intro {
      padding:
        54px
        18px
        20px;
    }

    .jsb-review-form-intro-inner {
      display: block;

      max-width: 390px;
    }

    .jsb-review-form-main {
      text-align: left;
    }

    .jsb-review-form-label {
      margin-bottom: 16px;

      font-size: 10.5px;
    }

    .jsb-review-form-title {
      line-height: 0.99;
    }


    /* ET SI */

    .jsb-review-form-title-line--one {
      font-size:
        clamp(
          31px,
          8vw,
          38px
        );
    }


    /* VOUS PARTAGIEZ */

    .jsb-review-form-title-line--two {
      margin-top: 5px;

      font-size:
        clamp(
          33px,
          8.5vw,
          40px
        );
    }


    /* VOTRE EXPÉRIENCE ? */

    .jsb-review-form-title-line--accent {
      margin-top: 5px;

      font-size:
        clamp(
          32px,
          8.3vw,
          39px
        );
    }


    /* BARRE MOBILE */

    .jsb-review-form-divider {
      width: 46px;
      height: 1px;

      margin:
        28px
        0
        24px;

      background: var(--terracotta);
    }


    /* TEXTE MOBILE */

    .jsb-review-form-side {
      max-width: 340px;
    }

    .jsb-review-form-text {
      max-width: 330px;

      font-size: 15px;
      line-height: 1.65;
    }

  }


  /* ========================================
     PETITS MOBILES
  ======================================== */

  @media (max-width: 390px) {

    .jsb-review-form-intro {
      padding:
        48px
        14px
        18px;
    }

    .jsb-review-form-title-line--one {
      font-size: 30px;
    }

    .jsb-review-form-title-line--two {
      font-size: 32px;
    }

    .jsb-review-form-title-line--accent {
      font-size: 31px;
    }

    .jsb-review-form-text {
      max-width: 305px;

      font-size: 14.5px;
    }

  }

</style>


<section class="jsb-review-form-intro">

  <div class="jsb-review-form-intro-inner">


    

    <div class="jsb-review-form-main">

      <span class="jsb-review-form-label">
        Votre avis compte
      </span>

      <h2 class="jsb-review-form-title">

        <span class="jsb-review-form-title-line jsb-review-form-title-line--one">
          Et si
        </span>

        <span class="jsb-review-form-title-line jsb-review-form-title-line--two">
          vous partagiez
        </span>

        <span class="jsb-review-form-title-line jsb-review-form-title-line--accent">
          votre expérience&nbsp;?
        </span>

      </h2>

    </div>


    

    <div
      class="jsb-review-form-divider"
      aria-hidden="true"
    ></div>


    

    <div class="jsb-review-form-side">

      <p class="jsb-review-form-text">
        Votre retour nous aide à continuer d’avancer,
        à nous améliorer et à faire connaître
        notre manière de travailler.
      </p>

    </div>


  </div>

</section>

Contact form

name

email

message

June Services BTP

JSB accompagne vos projets de rénovation intérieure tous corps d’état en Île-de-France et ses alentours, avec un suivi adapté à chaque projet.

Satoshi

Comfortaa

Barlow Semi Condensed

Zodiak

L’expérience de nos clients, en quelques mots.

Et si vous partagiez votre expérience ?