/* ETIKA theme tweaks layered on top of the V3 vendor CSS. */

/* services_list view: alternate image/content sides like the V3 static design. */
.my-business-service-area .service-row:nth-child(even) .single-service-list-area .row {
  flex-direction: row-reverse;
}

/* services_list view: per-position colour variants (icon bg + button), mirroring
   the V3 .single-service-list-area.service-red / .service-bleu rules. */
.my-business-service-area .service-row.service-red .inner-content .head .icon {
  background: var(--etika-red, #C1272D);
}
.my-business-service-area .service-row.service-bleu .inner-content .head .icon {
  background: var(--etika-bleu, #0055A4);
}
.my-business-service-area .service-row.service-red .tmp-btn {
  background: var(--etika-red, #C1272D);
  border-color: var(--etika-red, #C1272D);
}
.my-business-service-area .service-row.service-red .tmp-btn:hover {
  background: #a0202a;
  border-color: #a0202a;
}
.my-business-service-area .service-row.service-bleu .tmp-btn {
  background: var(--etika-bleu, #0055A4);
  border-color: var(--etika-bleu, #0055A4);
}
.my-business-service-area .service-row.service-bleu .tmp-btn:hover {
  background: #004080;
  border-color: #004080;
}

/* Strip Drupal's contextual/menu-block chrome that the vendor CSS doesn't expect. */
.main-menu ul.mainmenu {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Dropdown parents (Services, Nous rejoindre): the feather caret is an absolutely
   positioned ::after at right:-3px, but this header's links have padding:0
   (v3-consulter.css sets `.header-menu .main-menu > ul > li > a { padding: 10px 0 }`),
   so the caret lands on top of the label. Reserve room on the right for it.
   Selector mirrors the winning v3-consulter rule + the dropdown class so it
   outranks it. */
.v3-consulter .header-menu .main-menu > ul > li.has-menu-child-item > a {
  padding-right: 16px;
}

/* Hero: between 1200px and 1399px the V3 media margin-left:-239px pulls the photo
   left over the title. Keep the photo inside its column so the text stays in the
   navy area. The base margin-right full-bleed (calc(-50vw + 50%), % = column width)
   over-extends the box ~280px past the viewport right edge in this range, cropping
   the right-hand person. Re-derive it so the photo bleeds to exactly the viewport
   edge (container fixed at 1140px here): right edge = box left (vw/2) + width, so
   margin-right = 555px - 50vw lands it on the edge with the whole photo visible. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .v3-consulter .banner-home__media {
    margin-left: 0 !important;
    margin-right: calc(400px - 50vw) !important;
  }
}

/* Pre-footer contact webform — match the V3 .single-personal-info styling. */
.contact-form .webform-submission-form .js-form-item,
.contact-form .webform-submission-form .form-item {
  margin: 0;
}
.contact-form .webform-submission-form input[type="text"],
.contact-form .webform-submission-form input[type="email"],
.contact-form .webform-submission-form input[type="tel"],
.contact-form .webform-submission-form textarea {
  width: 100%;
  padding: 15px 20px;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  font-size: 15px;
  margin-bottom: 15px;
  background: #fff;
  transition: border-color 0.3s ease;
}
.contact-form .webform-submission-form input[type="text"]:focus,
.contact-form .webform-submission-form input[type="email"]:focus,
.contact-form .webform-submission-form input[type="tel"]:focus,
.contact-form .webform-submission-form textarea:focus {
  outline: none;
  border-color: var(--etika-green, #448600);
}
/* Job-application form in the offer-detail sidebar: keep field labels + the
   CV / cover-letter upload rows tidy alongside the contact-form input styling. */
.contact-form .webform-submission-form label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
}
.contact-form .webform-submission-form .form-managed-file {
  margin-bottom: 15px;
}
.contact-form .webform-submission-form .description {
  font-size: 12px;
  color: #777;
  margin: 4px 0 0;
}
.contact-form .webform-submission-form textarea {
  min-height: 120px;
  resize: vertical;
}

/* File uploads (CV / lettre): webform's #button renders a <label.webform-file-button>
   wired to the file input, which it moves off-screen (.webform-file-button-input).
   Restyle that label as a branded outline "upload" control (replaces the raw
   "Choisir un fichier / Aucun fichier choisi" box). */
.contact-form .webform-submission-form .webform-file-button-input {
  position: fixed !important;
  top: -1000px !important;
  left: -1000px !important;
}
.contact-form .webform-submission-form .webform-file-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 6px;
  padding: 13px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #448600;
  background: #f6faf0;
  border: 1.5px dashed #448600;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.25s ease;
  /* reset webform/core .button.button-action chrome */
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
}
.contact-form .webform-submission-form .webform-file-button::before {
  content: "\e9f0"; /* feather-upload-cloud */
  font-family: "feather" !important;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}
.contact-form .webform-submission-form .webform-file-button:hover {
  color: #fff;
  background: #448600;
  border-style: solid;
}
/* After upload: filename + "Retirer" as a compact, on-brand row. */
.contact-form .webform-submission-form .webform-managed-file-preview,
.contact-form .webform-submission-form .file {
  font-size: 13px;
  word-break: break-word;
}
.contact-form .webform-submission-form .js-form-managed-file .button {
  margin: 6px 0 0;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #c1272d;
  background: transparent;
  border: 1px solid #e5c2c4;
  border-radius: 4px;
  text-transform: none;
  cursor: pointer;
}
.contact-form .webform-submission-form .js-form-managed-file .button:hover {
  color: #fff;
  background: #c1272d;
  border-color: #c1272d;
}
.contact-form .webform-submission-form .form-actions {
  margin-top: 5px;
}
/* Neutralise Drupal's default button chrome so .theme-btn.btn-red wins. */
.contact-form .webform-submission-form .form-actions .button {
  margin: 0;
}
/* The V3 .theme-btn.btn-red styling is scoped to .v3-consulter (present around
   the pre-footer contact form, absent in the offer-detail sidebar). Re-apply it
   to the webform submit so the application form's button matches the contact
   form's. Only targets the primary submit, not the file "upload" buttons. */
.contact-form .webform-submission-form .webform-button--submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 5px;
  background: #448600;
  color: #fff;
  border: 2px solid #448600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.contact-form .webform-submission-form .webform-button--submit:hover {
  background: #3d7600;
  border-color: #3d7600;
}

/* Language switcher in the top bar. */
.top-header .header-lang {
  margin-left: 20px;
}
.top-header .header-lang ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.top-header .header-lang li {
  margin: 0;
  line-height: 1;
}
.top-header .header-lang li + li {
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  padding-left: 12px;
}
.top-header .header-lang a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  text-transform: uppercase;
  transition: color 0.3s ease;
}
.top-header .header-lang a:hover,
.top-header .header-lang a.is-active {
  color: #fff;
}

/* Language switcher inside the mobile popup menu (light background). */
.popup-mobile-menu .mobile-menu-lang {
  margin: 30px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.popup-mobile-menu .mobile-menu-lang ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.popup-mobile-menu .mobile-menu-lang li {
  margin: 0;
}
.popup-mobile-menu .mobile-menu-lang a {
  color: #666;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
}
.popup-mobile-menu .mobile-menu-lang a.is-active {
  color: var(--etika-green, #448600);
}

/* ---------------------------------------------------------------------------
   Blog archive (/blog) — alternating card layout (V3 html/blog).
   Middle card of every row of 3 shows its image at the bottom.
   Scoped to .row--15 so the home "articles récents" grid (.row g-5) is
   untouched.
   --------------------------------------------------------------------------- */
.blog-area .row--15 > [class*="col-"]:nth-child(3n + 2) .tmp-card .inner {
  display: flex;
  flex-direction: column-reverse;
}
.blog-area .row--15 > [class*="col-"]:nth-child(3n + 2) .tmp-card .inner .content {
  margin-bottom: 24px;
}

/* Vertical rhythm between grid rows. The wrapper carries mt_dec--30 (-30px),
   so every col gets a 30px top margin: the first row cancels out, rows 2+
   gain the V3 gap (matches html/blog `.mt--30` on the second-row cols). */
.blog-area .row--15 > [class*="col-"] {
  margin-top: 30px;
}

/* Pager — V3 .tmp-pagination (pager.html.twig) */
.tmp-pagination.pager,
nav.pager .tmp-pagination {
  margin-top: 50px;
}

/* Service detail video banner — client photo (shooting Etika-166).
   Overrides style.css .bg_image--2-webp (its ../../images/ path is wrong). */
.service-video-area .bg_image--2-webp {
  background-image: url(../images/service-video-bg.webp);
  background-position: center;
  background-size: cover;
}