#main-page-tel #contents-wrapper {
  background-image: url(../images/FOND-MAISONS-TEL.png);
  background-position: top center;
  background-repeat: repeat-y;
  background-color: #ededed;
}

#tel-page-title {
  width: 100%;
  padding-top: 5%;
  padding-bottom: 2%;
  margin-left: calc( 5% + 1.5rem );
  gap: 0;
}
#tel-page-title img {
  max-width: 210px;
}

.detail-tel-description {
  padding: 0;
  margin: 0;
}

.detail-tel-description .form-tel-wrapper .frm-tel .button-submit {
  text-align: right;
}
.detail-tel-description .form-tel-wrapper .frm-tel .button-submit input[type="submit"] {
  color: #fff;
  background-color: #d9434a;
  border: none;
  border-radius: 4px;
  padding: 8px 15px;
  cursor: pointer;
  opacity: 1;
}
.detail-tel-description .form-tel-wrapper .frm-tel .button-submit button[disabled] {
  opacity: 0.5;
  cursor: default;
}

.detail-tel-description .form-tel-wrapper .frm-tel #lieu-construction {
  width: 100%;
  max-width: 600px;
  padding: 10px;
  border-radius: 5px;
  border-color: #aaa;
}
.detail-tel-description .form-tel-wrapper .frm-tel #info-liste-agences {
  margin-top: 20px;
  padding: 0;
  text-align: center;
}
.detail-tel-description .form-tel-wrapper .frm-tel #info-liste-agences span {
  color: #d9434a;
}
.detail-tel-description .form-tel-wrapper .frm-tel #liste-agences {
  padding: 30px 0;
}
.detail-tel-description .form-tel-wrapper .frm-tel #liste-agences .columns {
  align-items: end;
  gap: 10px;
  margin: 0 auto;
  font-size: 80%;
}
.detail-tel-description .form-tel-wrapper .frm-tel #liste-agences .columns .column {
  flex: 1;
  padding: 0 !important;
}
.detail-tel-description .form-tel-wrapper .frm-tel .agence-tel-detail {
  padding: 20px 0.75rem;
  color: #706f6f;
  background-color: #fff;
  border: 1px solid #706f6f;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
}
.detail-tel-description .form-tel-wrapper .frm-tel .agence-tel-detail > div {
  display: inline-block;
}
.detail-tel-description .form-tel-wrapper .frm-tel .agence-libelle {
  margin-top: 20px;
  min-height: 80px;
  font-size: calc( 100% + 3px );
  color: #c3a24d;
}
.detail-tel-description .form-tel-wrapper .frm-tel .agence-libelle span:nth-of-type(1) {
  font-size: calc( 100% - 3px );
}
.detail-tel-description .form-tel-wrapper .frm-tel .agence-coche {
  display: none;
}
.detail-tel-description .form-tel-wrapper .frm-tel .agence-coord {
  min-height: 100px;
}
.detail-tel-description .form-tel-wrapper .frm-tel .agence-tel {
  font-size: 115%;
  font-family: "gotham-medium";
}
.detail-tel-description .form-tel-wrapper .frm-tel img.agence-logo {
  width: 80%;
}
.detail-tel-description .form-tel-wrapper .frm-tel #liste-agences .columns .column.active {
  flex: 1.5;
  /*transform: scaleY(1.1);*/
}
.detail-tel-description .form-tel-wrapper .frm-tel #liste-agences .columns .column.active .agence-tel-detail,
.detail-tel-description .form-tel-wrapper .frm-tel .agence-tel-detail.active {
  border: 2px solid #be1e2d;
  cursor: default;
}
/*
.detail-tel-description .form-tel-wrapper .frm-tel #liste-agences .columns .column.active .agence-tel-detail > div * {
  transform: scale(1.15);
}
*/
.detail-tel-description .form-tel-wrapper .frm-tel #liste-agences .columns .column.active .agence-tel-detail > div p {
  white-space: normal;
  overflow-wrap: normal;
  word-break: break-word;
  font-size: calc( 115% + 3px ) !important;
}
.detail-tel-description .form-tel-wrapper .frm-tel #liste-agences .columns .column.active .agence-tel-detail > div .agence-coche,
.detail-tel-description .form-tel-wrapper .frm-tel .columns .column:has(.agence-tel-detail.active) .agence-coche {
  display: inline;
}
.detail-tel-description .form-tel-wrapper .frm-tel .columns .column:has(.agence-tel-detail.active) {
  max-width : 18%;
}

.detail-tel-description .form-tel-wrapper .frm-tel .frm-tel-contact-wrapper {
  /*background-color: transparent;*/
  padding: 10px 15px;
  margin-bottom: 20px; }
  .detail-tel-description .form-tel-wrapper .frm-tel .frm-tel-contact-wrapper input,
  .detail-tel-description .form-tel-wrapper .frm-tel .frm-tel-contact-wrapper textarea,
  .detail-tel-description .form-tel-wrapper .frm-tel .frm-tel-contact-wrapper select {
    width: 100%;
    border-radius: 5px; }
  .detail-tel-description .form-tel-wrapper .frm-tel .frm-tel-contact-wrapper textarea {
    padding: 8px; }
  .detail-tel-description .form-tel-wrapper .floating-labels .frm-tel-contact-wrapper .control {
    position: relative;
    margin-bottom: 12px; }
    .detail-tel-description .form-tel-wrapper .floating-labels .frm-tel-contact-wrapper .control .label {
      position: absolute;
      top: 6px;
      left: 12px;
      margin-top: 0;
      font-size: 1.4rem;
      cursor: text;
      color: #939393;
      -webkit-transition: top 0.2s, left 0.2s, font-size 0.2s;
      -moz-transition: top 0.2s, left 0.2s, font-size 0.2s;
      transition: top 0.2s, left 0.2s, font-size 0.2s;
      z-index: 10; }
      .detail-tel-description .form-tel-wrapper .floating-labels .frm-tel-contact-wrapper .control .label.float {
        /* move label out the input field */
        font-size: 1rem;
        top: -6px !important;
        left: 10px !important;
        color: #939393;
        background-color: #fff;
        padding: 0 5px; }
    .detail-tel-description .form-tel-wrapper .floating-labels .frm-tel-contact-wrapper .control input {
      height: 34px; }
      .detail-tel-description .form-tel-wrapper .floating-labels .frm-tel-contact-wrapper .control input.error {
        border: 1px solid red;
        padding-left: 10px; }
    .detail-tel-description .form-tel-wrapper .floating-labels .frm-tel-contact-wrapper .control select {
      height: 34px;
      background-color: #fff;
      border: 1px solid #8f8f9d; }
    .detail-tel-description .form-tel-wrapper .floating-labels .frm-tel-contact-wrapper .control .validationMessage {
      display: block;
      color: red;
      font-size: 1.2rem; }
  .detail-tel-description .form-tel-wrapper .floating-labels .frm-tel-contact-wrapper .columns {
    margin-bottom: 0 !important; }
    .detail-tel-description .form-tel-wrapper .floating-labels .frm-tel-contact-wrapper .columns .column {
      padding-bottom: 0 !important; }
  .detail-tel-description .form-tel-wrapper .floating-labels .frm-tel-contact-wrapper #control-legal > div:nth-of-type(1) {
    width: 100%;
    padding-top: 0; }
    .detail-tel-description .form-tel-wrapper .floating-labels .frm-tel-contact-wrapper #control-legal > div:nth-of-type(1) div {
      width: 1px; }
    .detail-tel-description .form-tel-wrapper .floating-labels .frm-tel-contact-wrapper #control-legal > div:nth-of-type(1) input[type="checkbox"] {
      width: 18px !important;
      float: left; }
    .detail-tel-description .form-tel-wrapper .floating-labels .frm-tel-contact-wrapper #control-legal > div:nth-of-type(1) span.validationMessage {
      margin-left: 30px; }
  .detail-tel-description .form-tel-wrapper .floating-labels .frm-tel-contact-wrapper #control-legal > div:nth-of-type(2) {
    margin-left: 30px; }
    @media screen and (max-width: 1024px) {
      .detail-tel-description .form-tel-wrapper .floating-labels .frm-tel-contact-wrapper #control-legal > div:last-child {
        flex: 18; } }
  .detail-tel-description .form-tel-wrapper .floating-labels .frm-tel-contact-wrapper .is-control {
    height: 0;
    overflow: hidden; }
  .detail-tel-description .form-tel-wrapper .frm-tel .frm-tel-contact-wrapper .frm-contact-spacer {
    background-color: #afbd0e;
    color: #fff;
    padding: 5px 20px;
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: 12px; }


.detail-tel-description #tel-confirm-wrapper .columns {
  gap: 2rem;
}
.detail-tel-description #tel-confirm-wrapper .columns #tel-confirm {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
}
.detail-tel-description #tel-confirm-wrapper .columns #tel-confirm p:nth-of-type(1) {
  display: flex;
  gap: 20px;
  padding-left: 1em;
  align-items: center;
  font-size: 2.5em;
  font-family: "lobster-regular", "actonia-hand";
  font-weight: bold;
  color: #d9434a;
}
.detail-tel-description #tel-confirm-wrapper .columns #tel-confirm p:nth-of-type(3) {
  padding-left: 25px;
  font-style: italic;
  background-image: url(../images/PICTO-MAIL.png);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
}

.detail-tel-description #tel-confirm-wrapper .columns #tel-recap {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
}
.detail-tel-description #tel-confirm-wrapper .columns #tel-recap p {
  margin-bottom: 10px;
}

@media screen and (max-width: 500px) {
  .detail-tel-description .form-tel-wrapper .floating-labels .frm-tel-contact-wrapper #control-legal > div:first-child div {
    width: 1px;
    height: 150px; } }