/* ==========================================================================
   SERVICE DETAIL PAGES  |  Publishing Press USA
   --------------------------------------------------------------------------
   Loaded globally from header.php.
   Section 1 (header sub-menu) is intentionally global.
   Everything else is scoped to .page-service-detail so no existing page
   is affected.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. HEADER NAVIGATION  |  "Our services" dropdown
   -------------------------------------------------------------------------- */
@media screen and (min-width:1160px) {
  #headerSite .overlay.overlayHeaderMenu #navSite #header-menu li.menu-item-has-children {
    position: relative
  }

  #headerSite .overlay.overlayHeaderMenu #navSite #header-menu li.menu-item-has-children>a:after {
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    content: "";
    display: inline-block;
    height: 6px;
    margin-bottom: 3px;
    margin-left: 9px;
    transform: rotate(45deg);
    transition: transform .25s ease;
    width: 6px
  }

  #headerSite .overlay.overlayHeaderMenu #navSite #header-menu li.menu-item-has-children:hover>a:after {
    transform: rotate(225deg)
  }

  #headerSite .overlay.overlayHeaderMenu #navSite #header-menu li>ul.sub-menu {
    background: #fff;
    border-top: 2px solid #000;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .1);
    display: block;
    left: 50%;
    margin-left: 0;
    min-width: 340px;
    opacity: 0;
    padding: 8px 0;
    pointer-events: none;
    position: absolute;
    text-align: left;
    top: 100%;
    transform: translateX(-50%) translateY(12px);
    transition: opacity .25s ease, transform .25s ease;
    visibility: hidden;
    z-index: 20
  }

  #headerSite .overlay.overlayHeaderMenu #navSite #header-menu li.menu-item-has-children:hover>ul.sub-menu,
  #headerSite .overlay.overlayHeaderMenu #navSite #header-menu li.menu-item-has-children:focus-within>ul.sub-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    visibility: visible
  }

  #headerSite .overlay.overlayHeaderMenu #navSite #header-menu li>ul.sub-menu li {
    align-items: stretch;
    display: block;
    height: auto;
    min-height: 0;
    min-width: 100%
  }

  #headerSite .overlay.overlayHeaderMenu #navSite #header-menu li>ul.sub-menu li a {
    display: block;
    font-family: avenir-lt-pro, "sans serif";
    font-size: 1.5rem;
    height: auto;
    justify-content: flex-start;
    letter-spacing: .3px;
    line-height: 1.3;
    min-width: 100%;
    padding: 13px 26px;
    text-align: left;
    transition: background-color .2s ease, color .2s ease;
    white-space: nowrap
  }

  #headerSite .overlay.overlayHeaderMenu #navSite #header-menu li>ul.sub-menu li a:hover {
    background-color: #000;
    color: #fff;
    font-weight: 400;
    letter-spacing: .3px
  }
}

/* Burger overlay (below 1160px): the services list sits open underneath its
   parent, which is what the theme script intends - it writes
   display:block;visibility:visible onto every ul.sub-menu at this width, and
   a tap on a sub-menu link closes the overlay.

   The bug that needed fixing was only that an explicit visibility:visible is
   NOT inherited from the closed overlay, so the list painted over the page
   while the burger was shut. Hence :not(.open) below. !important is required
   because the script writes those two properties as inline styles. */
@media screen and (max-width:1159px) {
  #headerSite .overlay.overlayHeaderMenu:not(.open) #navSite #header-menu li>ul.sub-menu {
    display: none !important;
    visibility: hidden !important
  }

  #headerSite .overlay.overlayHeaderMenu.open #navSite #header-menu li>ul.sub-menu {
    border-left: 2px solid rgba(0, 0, 0, .15);
    display: block !important;
    margin: 4px 0 18px;
    padding-left: 16px;
    visibility: visible !important
  }

  /* Sub-menu rows must not inherit the tall top-level row sizing */
  #headerSite .overlay.overlayHeaderMenu #navSite #header-menu li>ul.sub-menu li {
    height: auto;
    min-height: 0
  }

  #headerSite .overlay.overlayHeaderMenu #navSite #header-menu li>ul.sub-menu li a {
    display: block;
    font-size: 1.7rem;
    line-height: 1.3;
    padding-bottom: .45em;
    padding-top: .45em;
    text-align: left
  }

  /* The menu is now long enough to need scrolling on shorter phones */
  #headerSite .overlay.overlayHeaderMenu {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
  }

  #headerSite .overlay.overlayHeaderMenu #navSite #header-menu {
    padding-bottom: 40px
  }
}


/* --------------------------------------------------------------------------
   2. SHARED BUILDING BLOCKS
   -------------------------------------------------------------------------- */
.page-service-detail .svcBreadcrumb {
  padding-top: 25px
}

.page-service-detail .svcBreadcrumb ol {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-family: avenir-lt-pro, sans-serif;
  font-size: 1.2rem;
  justify-content: center;
  letter-spacing: 1.4px;
  list-style: none;
  text-transform: uppercase
}

.page-service-detail .svcBreadcrumb li {
  align-items: center;
  display: flex
}

.page-service-detail .svcBreadcrumb li+li:before {
  content: "/";
  margin: 0 10px;
  opacity: .35
}

.page-service-detail .svcBreadcrumb a {
  color: #000;
  opacity: .55;
  text-decoration: none;
  transition: opacity .2s ease
}

.page-service-detail .svcBreadcrumb a:hover {
  opacity: 1;
  text-decoration: underline
}

.page-service-detail .svcBreadcrumb [aria-current=page] {
  font-weight: 700
}

@media screen and (min-width:800px) {
  .page-service-detail .svcBreadcrumb ol {
    font-size: 1.3rem;
    justify-content: flex-start
  }


}

.page-service-detail .svcSectionHead {
  margin-bottom: 45px;
  text-align: left
}

.page-service-detail .svcEyebrow {
  display: block;
  font-family: avenir-lt-pro, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 2.2px;
  margin-bottom: 16px;
  opacity: .45;
  text-transform: uppercase
}

.page-service-detail .svcLead {
  font-size: 19px;
  line-height: 1.65;
  margin-top: 22px;
  max-width: 900px;
  text-align: left
}

@media screen and (min-width:1160px) {
  .page-service-detail .svcSectionHead {
    margin-bottom: 60px
  }
}


/* Heading above the full-bleed accordion. Padding deliberately mirrors
   .accordion__title (30px, then 4% from 1160px) so the two line up. */
.page-service-detail .svcAccordeonHead {
  padding-left: 30px;
  padding-right: 30px
}

@media screen and (min-width:1160px) {
  .page-service-detail .svcAccordeonHead {
    padding-left: 4%;
    padding-right: 4%
  }
}


/* --------------------------------------------------------------------------
   3. INTRO  |  text + image
   -------------------------------------------------------------------------- */
.page-service-detail .svcIntroGrid {
  align-items: center;
  display: grid;
  gap: 45px;
  grid-template-columns: 1fr
}

.page-service-detail .svcIntroText {
  text-align: left
}

.page-service-detail .svcIntroText p {
  font-size: 19px;
  line-height: 1.75;
  margin-bottom: 20px
}

.page-service-detail .svcIntroText p:last-of-type {
  margin-bottom: 0
}

.page-service-detail .svcIntroMedia {
  overflow: hidden
}

.page-service-detail .svcIntroMedia img {
  display: block;
  height: auto;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .8, .2, 1);
  width: 100%
}

.page-service-detail .svcIntroMedia:hover img {
  transform: scale(1.04)
}

.page-service-detail .svcIntroText .lien-container-accueil {
  margin-top: 40px
}

@media screen and (min-width:1160px) {
  .page-service-detail .svcIntroGrid {
    gap: 85px;
    grid-template-columns: 1fr 45%
  }
}


/* --------------------------------------------------------------------------
   4. WHAT IS INCLUDED  |  hairline card grid
   -------------------------------------------------------------------------- */
.page-service-detail .svcCardGrid {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr
}

/* Hairlines between cells only, no frame around the outside. Real borders
   rather than a 1px grid gap, because a gap is laid out in CSS pixels and
   rounds away to nothing at fractional zoom. The :nth-child(n) rules below
   reset the column maths at each breakpoint, since the earlier breakpoint's
   rules carry the same specificity and would otherwise still apply. */
.page-service-detail .svcCardGrid>*:nth-child(n) {
  border-top: 1px solid #d1d1d1
}

.page-service-detail .svcCardGrid>*:first-child {
  border-top: 0
}
.page-service-detail .svcCard {
  background: #fff;
  padding: 35px 28px;
  text-align: left;
  transition: background-color .35s ease, color .35s ease
}

.page-service-detail .svcCard .svcCardNum {
  display: block;
  font-family: avenir-lt-pro, sans-serif;
  font-size: 1.4rem;
  font-weight: 200;
  letter-spacing: 1.5px;
  margin-bottom: 18px;
  opacity: .45
}

.page-service-detail .svcCard h3 {
  font-family: avenir-lt-pro, sans-serif;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 14px;
  text-transform: uppercase;
  transition: color .35s ease
}

.page-service-detail .svcCard p {
  font-size: 1.6rem;
  line-height: 1.7
}

.page-service-detail .svcCard:hover {
  background: #000;
  color: #fff
}

.page-service-detail .svcCard:hover h3 {
  color: #fff
}

.page-service-detail .svcCard:hover .svcCardNum {
  opacity: .7
}

@media screen and (min-width:800px) {
  .page-service-detail .svcCardGrid {
    grid-template-columns: repeat(2, 1fr)
  }

  .page-service-detail .svcCardGrid>*:nth-child(n) {
    border-left: 1px solid #d1d1d1;
    border-top: 1px solid #d1d1d1
  }

  .page-service-detail .svcCardGrid>*:nth-child(2n+1) {
    border-left: 0
  }

  .page-service-detail .svcCardGrid>*:nth-child(-n+2) {
    border-top: 0
  }

  .page-service-detail .svcCard {
    padding: 45px 38px
  }
}

@media screen and (min-width:1160px) {
  .page-service-detail .svcCardGrid {
    grid-template-columns: repeat(3, 1fr)
  }

  .page-service-detail .svcCardGrid>*:nth-child(n) {
    border-left: 1px solid #d1d1d1;
    border-top: 1px solid #d1d1d1
  }

  .page-service-detail .svcCardGrid>*:nth-child(3n+1) {
    border-left: 0
  }

  .page-service-detail .svcCardGrid>*:nth-child(-n+3) {
    border-top: 0
  }
}


/* --------------------------------------------------------------------------
   5. PROCESS  |  editorial numbered rows
   -------------------------------------------------------------------------- */
.page-service-detail .svcSteps {
  border-bottom: 1px solid #000
}

.page-service-detail .svcStep {
  border-top: 1px solid #000;
  display: grid;
  gap: 8px 22px;
  grid-template-columns: 70px 1fr;
  padding: 30px 0;
  text-align: left
}

.page-service-detail .svcStepNum {
  font-family: avenir-lt-pro, sans-serif;
  font-size: 3.2rem;
  font-weight: 200;
  grid-row: span 2;
  line-height: 1
}

.page-service-detail .svcStep h3 {
  font-family: avenir-lt-pro, sans-serif;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase
}

.page-service-detail .svcStep p {
  font-size: 19px;
  line-height: 1.7
}

@media screen and (min-width:1160px) {
  .page-service-detail .svcStep {
    align-items: start;
    gap: 40px;
    grid-template-columns: 110px 300px 1fr;
    padding: 42px 0;
    transition: padding-left .35s ease
  }

  .page-service-detail .svcStepNum {
    font-size: 4.4rem;
    grid-row: auto
  }

  .page-service-detail .svcStep:hover {
    padding-left: 18px
  }
}


/* --------------------------------------------------------------------------
   5b. MID-PAGE CTA  |  full bleed black band
   Deliberately shorter and single-row so it still reads differently from the
   serviceWhy band and the prestaDevis bands further down the page.
   -------------------------------------------------------------------------- */
.page-service-detail .svcMidCta {
  background-attachment: scroll;
  background-color: #000;
  background-image: url(../images/bg-cta.jpg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  margin-top: 60px;
  padding: 50px 0;
  position: relative
}

/* Dark wash so the copy stays readable whatever part of the photo shows. */
.page-service-detail .svcMidCta:before {
  background: linear-gradient(90deg, rgba(0, 0, 0, .88), rgba(0, 0, 0, .66));
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0
}

.page-service-detail .svcMidCtaInner {
  display: grid;
  gap: 26px;
  position: relative;
  text-align: left;
  z-index: 1
}

.page-service-detail .svcMidCtaTitle {
  font-family: avenir-lt-pro, sans-serif;
  font-size: 2.2rem;
  font-weight: 200;
  line-height: 1.2
}

.page-service-detail .svcMidCtaTitle strong {
  color: #fff;
  display: block;
  font-family: avenir-lt-pro, sans-serif;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.1;
  margin-top: 8px;
  text-transform: uppercase
}

.page-service-detail .svcMidCtaNote {
  font-size: 19px;
  line-height: 1.65;
  margin-top: 18px;
  max-width: 660px;
  opacity: .7
}

/* The themed button assumes a white background, so invert it here:
   white label plus the white-stroke arrow the theme already ships for
   its own dark bands (.lien-container-devis). */
/* The CTA button sits in a grid column already sized to the button, so the
   global 60% width would make it overflow its own box. Keep it full width. */
.page-service-detail .svcMidCtaAction .lien-container-accueil {
  background-color: transparent;
  color: #fff;
  margin: 0;
  width: 100%
}

.page-service-detail .svcMidCtaAction .lien-container-accueil a .buttonOnBackground {
  color: #fff
}

@media screen and (max-width:599px) {
  .page-service-detail .svcMidCtaAction .lien-container-accueil a .buttonOnBackground:after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='2' viewBox='-50 0 74 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m14 5 7 7m0 0-7 7m7-7h-71'/%3E%3C/svg%3E")
  }
    #headerSite .overlay.overlayHeaderMenu #navSite #header-menu li {
    text-align: left !important;
}

/* Scale with the viewport instead of a fixed size: the letters are nowrap
   flex items, so a fixed size runs long titles off the edge on small phones. */
.page-nos-prestations .prestationsBlocTitreH1 .line.creative {
    font-size: min(7.6vw, 34px);
}

.page-nos-prestations .prestationsBlocTitreH1 .line.agence {
    font-size: min(7.8vw, 35px);
}
}

@media screen and (min-width:600px) {
  .page-service-detail .svcMidCtaAction .lien-container-accueil a .buttonOnBackground:after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m14 5 7 7m0 0-7 7m7-7H3'/%3E%3C/svg%3E")
  }
}

@media screen and (min-width:800px) {
  .page-service-detail .svcMidCtaTitle {
    font-size: 2.4rem
  }

  .page-service-detail .svcMidCtaTitle strong {
    font-size: 3.3rem
  }
}

@media screen and (min-width:1160px) {
  .page-service-detail .svcMidCta {
    margin-top: 100px;
    padding: 70px 0
  }

  .page-service-detail .svcMidCtaInner {
    align-items: center;
    gap: 70px;
    grid-template-columns: 1fr auto
  }

  .page-service-detail .svcMidCtaTitle strong {
    font-size: 3.8rem
  }

  .page-service-detail .svcMidCtaAction .lien-container-accueil.notCentered a {
    padding-top: 0
  }
}


/* --------------------------------------------------------------------------
   6. WHY US  |  black band
   -------------------------------------------------------------------------- */
.page-service-detail .serviceWhy {
  background: #000;
  color: #fff;
  margin-top: 60px;
  padding: 70px 0
}

.page-service-detail .serviceWhy h2,
.page-service-detail .serviceWhy h2 strong,
.page-service-detail .serviceWhy h3 {
  color: #fff
}

.page-service-detail .serviceWhy .svcEyebrow {
  opacity: .6
}

.page-service-detail .svcWhyGrid {
  display: grid;
  gap: 38px;
  grid-template-columns: 1fr
}

.page-service-detail .svcWhyItem {
  border-top: 1px solid hsla(0, 0%, 100%, .25);
  padding-top: 22px;
  text-align: left
}

.page-service-detail .svcWhyItem h3 {
  font-family: avenir-lt-pro, sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 12px;
  text-transform: uppercase
}

.page-service-detail .svcWhyItem p {
  font-size: 19px;
  line-height: 1.7;
  opacity: .8
}

@media screen and (min-width:800px) {
  .page-service-detail .svcWhyGrid {
    gap: 45px 55px;
    grid-template-columns: repeat(2, 1fr)
  }
}

@media screen and (min-width:1160px) {
  .page-service-detail .serviceWhy {
    margin-top: 100px;
    padding: 100px 0
  }
}


/* --------------------------------------------------------------------------
   7. GENRE / DELIVERABLE TAGS
   -------------------------------------------------------------------------- */
.page-service-detail .svcTags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  text-align: left
}

.page-service-detail .svcTags li {
  border: 1px solid #000;
  font-family: avenir-lt-pro, sans-serif;
  font-size: 1.4rem;
  letter-spacing: .6px;
  padding: 11px 20px;
  text-transform: uppercase;
  transition: background-color .25s ease, color .25s ease
}

.page-service-detail .svcTags li:hover {
  background: #000;
  color: #fff
}


/* --------------------------------------------------------------------------
   8. FAQ  |  used on the service pages and on the home page
   -------------------------------------------------------------------------- */
.svcFaq {
  border-bottom: 1px solid #000
}

.svcFaq details {
  border-top: 1px solid #000;
  text-align: left
}

.svcFaq summary {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  font-family: avenir-lt-pro, sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  gap: 25px;
  justify-content: space-between;
  line-height: 1.35;
  list-style: none;
  padding: 26px 0;
  text-transform: uppercase
}

.svcFaq summary::-webkit-details-marker {
  display: none
}

.svcFaq summary::marker {
  content: ""
}

.svcFaq summary:after {
  content: "+";
  flex-shrink: 0;
  font-size: 2.6rem;
  font-weight: 200;
  line-height: .8;
  transition: transform .25s ease
}

.svcFaq details[open] summary:after {
  content: "–"
}

.svcFaq summary:hover {
  opacity: .6
}

.svcFaq .svcFaqAnswer {
  font-size: 19px;
  line-height: 1.75;
  max-width: 980px;
  padding: 0 0 30px
}

.svcFaq .svcFaqAnswer p+p {
  margin-top: 16px
}

@media screen and (min-width:1160px) {
  .svcFaq summary {
    font-size: 2.1rem;
    padding: 32px 0
  }
}


/* --------------------------------------------------------------------------
   9. RELATED SERVICES
   -------------------------------------------------------------------------- */
.page-service-detail .svcRelatedGrid {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr
}

/* Hairlines between cells only, no frame around the outside. Real borders
   rather than a 1px grid gap, because a gap is laid out in CSS pixels and
   rounds away to nothing at fractional zoom. The :nth-child(n) rules below
   reset the column maths at each breakpoint, since the earlier breakpoint's
   rules carry the same specificity and would otherwise still apply. */
.page-service-detail .svcRelatedGrid>*:nth-child(n) {
  border-top: 1px solid #d1d1d1
}

.page-service-detail .svcRelatedGrid>*:first-child {
  border-top: 0
}
.page-service-detail .svcRelatedCard {
  background: #fff;
  color: #000;
  display: block;
  padding: 32px 28px;
  text-align: left;
  text-decoration: none;
  transition: background-color .35s ease, color .35s ease
}

.page-service-detail .svcRelatedCard h3 {
  font-family: avenir-lt-pro, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 12px;
  text-transform: uppercase;
  transition: color .35s ease
}

.page-service-detail .svcRelatedCard p {
  font-size: 19px;
  line-height: 1.65
}

.page-service-detail .svcRelatedCard .svcRelatedArrow {
  display: inline-block;
  font-family: avenir-lt-pro, sans-serif;
  font-size: 1.3rem;
  letter-spacing: 1.6px;
  margin-top: 20px;
  text-transform: uppercase;
  transition: transform .3s ease
}

.page-service-detail .svcRelatedCard:hover {
  background: #000;
  color: #fff
}

.page-service-detail .svcRelatedCard:hover h3 {
  color: #fff
}

.page-service-detail .svcRelatedCard:hover .svcRelatedArrow {
  transform: translateX(8px)
}

@media screen and (min-width:800px) {
  .page-service-detail .svcRelatedGrid {
    grid-template-columns: repeat(2, 1fr)
  }

  .page-service-detail .svcRelatedGrid>*:nth-child(n) {
    border-left: 1px solid #d1d1d1;
    border-top: 1px solid #d1d1d1
  }

  .page-service-detail .svcRelatedGrid>*:nth-child(2n+1) {
    border-left: 0
  }

  .page-service-detail .svcRelatedGrid>*:nth-child(-n+2) {
    border-top: 0
  }

  .page-service-detail .svcRelatedCard {
    padding: 40px 34px
  }
}

@media screen and (min-width:1160px) {
  .page-service-detail .svcRelatedGrid {
    grid-template-columns: repeat(3, 1fr)
  }

  .page-service-detail .svcRelatedGrid>*:nth-child(n) {
    border-left: 1px solid #d1d1d1;
    border-top: 1px solid #d1d1d1
  }

  .page-service-detail .svcRelatedGrid>*:nth-child(3n+1) {
    border-left: 0
  }

  .page-service-detail .svcRelatedGrid>*:nth-child(-n+3) {
    border-top: 0
  }
}


/* --------------------------------------------------------------------------
   10. OUR SERVICES HUB  |  room for the extra "learn more" button
   -------------------------------------------------------------------------- */
.page-nos-prestations .prestaAccordeon .accordion .accordion__content__wrapper .accordion_link .lien-container-accueil+.lien-container-accueil {
  margin-top: 2.6rem
}



/*.accordion__item p {
    font-size: 19px;
}*/
.accordion__content p {
    font-size: 19px;
}
.pad-off {
    padding: 0 !important;
}

/* --------------------------------------------------------------------------
   11. TESTIMONIAL CARDS  |  testimonials page + home page teaser
   -------------------------------------------------------------------------- */
.svcQuoteGrid {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr
}

/* Hairlines between cells only, no frame around the outside. Real borders
   rather than a 1px grid gap, because a gap is laid out in CSS pixels and
   rounds away to nothing at fractional zoom. The :nth-child(n) rules below
   reset the column maths at each breakpoint, since the earlier breakpoint's
   rules carry the same specificity and would otherwise still apply. */
.svcQuoteGrid>*:nth-child(n) {
  border-top: 1px solid #d1d1d1
}

.svcQuoteGrid>*:first-child {
  border-top: 0
}
.svcQuoteCard {
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: 35px 28px;
  text-align: left
}

.svcQuoteStars {
  color: #000;
  font-size: 1.5rem;
  letter-spacing: 3px;
  line-height: 1;
  margin-bottom: 20px
}

.svcQuoteStarOff {
  opacity: .22
}

.svcQuoteCard blockquote {
  flex: 1;
  font-size: 1.7rem;
  line-height: 1.75;
  margin: 0 0 26px
}

.svcQuoteCard footer {
  border-top: 1px solid #d1d1d1;
  padding-top: 18px
}

.svcQuoteName {
  display: block;
  font-family: avenir-lt-pro, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase
}

.svcQuoteRole {
  display: block;
  font-size: 1.4rem;
  margin-top: 6px;
  opacity: .55
}

@media screen and (min-width:800px) {
  .svcQuoteGrid {
    grid-template-columns: repeat(2, 1fr)
  }

  .svcQuoteGrid>*:nth-child(n) {
    border-left: 1px solid #d1d1d1;
    border-top: 1px solid #d1d1d1
  }

  .svcQuoteGrid>*:nth-child(2n+1) {
    border-left: 0
  }

  .svcQuoteGrid>*:nth-child(-n+2) {
    border-top: 0
  }

  .svcQuoteCard {
    padding: 45px 38px
  }
}

@media screen and (min-width:1160px) {
  .svcQuoteGrid {
    grid-template-columns: repeat(3, 1fr)
  }

  .svcQuoteGrid>*:nth-child(n) {
    border-left: 1px solid #d1d1d1;
    border-top: 1px solid #d1d1d1
  }

  .svcQuoteGrid>*:nth-child(3n+1) {
    border-left: 0
  }

  .svcQuoteGrid>*:nth-child(-n+3) {
    border-top: 0
  }
}


.svcQuoteSource {
  margin-top: 30px;
  text-align: left
}


/* --------------------------------------------------------------------------
   12. FAQ GROUPS  |  FAQ page
   -------------------------------------------------------------------------- */
.svcFaqGroup {
  margin-bottom: 55px
}

.svcFaqGroup:last-child {
  margin-bottom: 0
}

.svcFaqGroupTitle {
  font-family: avenir-lt-pro, sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 2.2px;
  margin-bottom: 14px;
  opacity: .45;
  text-align: left;
  text-transform: uppercase
}

@media screen and (min-width:1160px) {
  .svcFaqGroup {
    margin-bottom: 70px
  }
}

/* --------------------------------------------------------------------------
   13. FAQ PAGE  |  larger question text
   Scoped to .page-faqs so the FAQ blocks on the service pages and the home
   page keep their own smaller sizing. The two-class selector also outranks
   the 1160px rule in section 8, so one declaration covers every breakpoint.
   -------------------------------------------------------------------------- */
.page-faqs .svcFaq summary {
  font-size: 23px
}

/* --------------------------------------------------------------------------
   14. TESTIMONIAL CARDS ON MOBILE
   Single column, so the 1px hairline grid stops reading as cards - they just
   look like stacked text. Below 800px drop the grid lines and give each one a
   real box, matching the theme's own .temoignage cards on the home page
   (5px radius, same shadow).
   -------------------------------------------------------------------------- */
@media screen and (max-width:799px) {
  .svcQuoteGrid {
    background: none;
    border: 0;
    gap: 22px
  }

  .svcQuoteGrid>*:nth-child(n) {
    border: 0
  }

  .svcQuoteCard {
    border-radius: 5px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .37);
    padding: 30px 26px
  }
}

/* --------------------------------------------------------------------------
   15. CONTACT PAGE
   app.css pushes the intro text and the black details panel across with
   padding-left 20% (50% from 1650px) and right-aligns the text. Both are
   brought back to the same left gutter so the paragraph, the email and the
   postal address line up as one column. Equal specificity, and this file
   loads after app.css, so one 1160px block also overrides its 1650px rule.
   -------------------------------------------------------------------------- */
/* app.css paints the details panel black with white text. Drop the panel
   background and set the text dark so it reads as part of the white page. */
.page-contact .infos-map .informations,
.page-contact .infos-map .informations #contactMap {
  background-color: transparent;
  color: #000
}

@media screen and (min-width:1160px) {
  /* Paragraph and contact details sit side by side in one row instead of
     stacked. app.css had .infos-map as a column, the text right-aligned and
     both blocks pushed across with padding-left 20% / 50%. */
  /* No height here on purpose. A flex item only stretches to its line when
     its cross size computes to auto, so height:100% would make this column
     collapse to its content and the map would stop short of the form. */
  .page-contact .infos-map {
    align-self: stretch;
    flex-direction: column;
    flex-wrap: nowrap
  }

  /* intro text now has the row to itself */
  .page-contact .infos-map .infosMapTop {
    display: block
  }

  /* map takes whatever height is left, so the column ends level with the form */
  .page-contact .infos-map #contactGoogleMap {
    display: flex;
    flex: 1;
    min-height: 300px
  }

  .page-contact .infos-map #contactGoogleMap iframe {
    flex: 1;
    height: auto;
    min-height: 0
  }

  .page-contact .infos-map .sectionTexteHaut {
    padding-left: 8%;
    padding-right: 8%;
    padding-top: 60px;
    text-align: left;
    width: 100%
  }

  .page-contact .infos-map .informations {
    align-items: stretch;
    height: auto;
    justify-content: flex-start;
    padding-left: 0;
    padding-right: 0
  }

  .page-contact .infos-map .informations #contactMap {
    align-items: flex-start;
    flex: none;
    justify-content: flex-start;
    padding-left: 10%;
    padding-right: 8%;
    padding-top: 60px
  }
}

/* Google map, directly under the intro text and the contact details */
.page-contact #contactGoogleMap {
  display: block;
  font-size: 0;
  line-height: 0;
  width: 100%
}

.page-contact #contactGoogleMap iframe {
  border: 0;
  display: block;
  height: 40vh;
  min-height: 300px;
  width: 100%
}

/* Bottom contact strip: phone, email and address across one row.
   The section carries .widthGlobalContent (max-width 1500/1650px, centred),
   which is overridden here so the three columns span the full page. */
.page-contact #contactRecrutement {
  max-width: none;
  padding-left: 4%;
  padding-right: 4%;
  width: 100%
}

.page-contact #contactRecrutement .contactRecrutementGrid {
  display: grid;
  gap: 45px;
  grid-template-columns: 1fr
}

.page-contact #contactRecrutement .contactRecrutementAdr {
  display: block;
  font-family: avenir-lt-pro, sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.45;
  margin-top: 4px
}

@media screen and (min-width:800px) {
  .page-contact #contactRecrutement .contactRecrutementGrid {
    align-items: start;
    gap: 40px;
    grid-template-columns: repeat(3, 1fr)
  }
}

/* --------------------------------------------------------------------------
   16. BANNER SUBHEADING
   Sits under the animated title. That title is built from one <i> per letter
   and its font sizes run to 110px, so it can only carry two short lines - a
   long descriptive heading has to live in its own element.
   Switching the banner block to a column is safe on pages without this
   subheading: with a single centred child, row and column look identical.
   -------------------------------------------------------------------------- */
.page-service-detail .prestationsBlocTitreH1 {
  flex-direction: column;
  height: auto;
  min-height: 315px;
  padding-bottom: 10px
}

.page-service-detail .prestationsSubHead {
  font-family: avenir-lt-pro, sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 1.2px;
  line-height: 1.45;
  margin: 18px auto 0;
  max-width: 760px;
  padding: 0 30px;
  text-align: center;
  text-transform: uppercase
}

@media screen and (min-width:800px) {
  .page-service-detail .prestationsSubHead {
    font-size: 1.9rem;
    margin-top: 24px;
    max-width: 900px
  }
}

@media screen and (min-width:1160px) {
  .page-service-detail .prestationsBlocTitreH1 {
    min-height: 350px
  }

  .page-service-detail .prestationsSubHead {
    font-size: 2.1rem;
    max-width: 1000px
  }
}

/* --------------------------------------------------------------------------
   17. LONG BANNER TITLE  (.isLongTitle)
   The hero sizes in app.css (70-110px bold, 50-100px Tenor Sans) assume two
   short lines. A longer headline needs smaller type or it runs off the side,
   since .line carries flex-wrap:nowrap and the letters cannot reflow.
   Selector depth beats the app.css rules it overrides.
   -------------------------------------------------------------------------- */
.page-nos-prestations .prestationsBlocTitreH1 h1.prestationsH1.isLongTitle .line.agence {
  font-size: min(7.2vw, 30px)
}

.page-nos-prestations .prestationsBlocTitreH1 h1.prestationsH1.isLongTitle .line.creative {
  font-size: min(6vw, 24px)
}

@media screen and (min-width:800px) {
  .page-nos-prestations .prestationsBlocTitreH1 h1.prestationsH1.isLongTitle .line.agence {
    font-size: 46px
  }

  .page-nos-prestations .prestationsBlocTitreH1 h1.prestationsH1.isLongTitle .line.creative {
    font-size: 40px
  }
}

@media screen and (min-width:1160px) {
  .page-nos-prestations .prestationsBlocTitreH1 h1.prestationsH1.isLongTitle .line.agence {
    font-size: 60px
  }

  .page-nos-prestations .prestationsBlocTitreH1 h1.prestationsH1.isLongTitle .line.creative {
    font-size: 54px
  }
}

@media screen and (min-width:2000px) {
  .page-nos-prestations .prestationsBlocTitreH1 h1.prestationsH1.isLongTitle .line.agence {
    font-size: 78px
  }

  .page-nos-prestations .prestationsBlocTitreH1 h1.prestationsH1.isLongTitle .line.creative {
    font-size: 70px
  }
}

/* Three or four stacked rows need less gap than the default two */
.page-nos-prestations .prestationsBlocTitreH1 h1.prestationsH1.isLongTitle .line.creative-and-humaine {
  margin-top: 4px
}

/* Plain black variant of the CTA band, for a second one on the same page
   where repeating the cover photo would be too much. */
.page-service-detail .svcMidCta.svcMidCtaPlain {
  background-image: none
}

.page-service-detail .svcMidCta.svcMidCtaPlain:before {
  display: none
}

/* A single bold line with no light line above it needs no top margin */
.page-service-detail .svcMidCtaTitle>strong:only-child {
  margin-top: 0
}



.serviceIntro h2 {
    font-size: 4.5rem;
    line-height: 1.2;
    text-transform: uppercase;
}
/* --------------------------------------------------------------------------
   BREADCRUMB - HIDDEN ON MOBILE
   It eats vertical space above the fold on a phone without adding much there.
   The BreadcrumbList JSON-LD in each page head is untouched, so Google still
   gets the breadcrumb trail for the search result.
   -------------------------------------------------------------------------- */
@media screen and (max-width:799px) {
  .page-service-detail .svcBreadcrumb {
    display: none
  }
}