/* Accueil : composants Gutenberg, palette et typographie reliées au thème. */
.wobly-home {
   margin: 0;
   max-width: none;
   overflow: hidden;
   font-family: var(--wobly-font-family);
   font-size: var(--wobly-text-size);
   line-height: var(--wobly-text-line-height);
}

.wobly-home a {
   text-decoration: none;
   color: inherit
}

.wobly-home .wrap {
   width: min(1190px, calc(100% - 80px));
   margin-inline: auto
}

.wobly-home .wp-block-button__link {
   display: inline-flex;
   gap: 10px;
   align-items: center;
   justify-content: center;
   white-space: nowrap
}

.wobly-home .button-primary .wp-block-button__link {
   color: var(--theme-palette-color-7);
   background: var(--theme-palette-color-1);
   box-shadow: 0 12px 23px var(--wobly-shadow-color)
}

.wobly-home .button-secondary .wp-block-button__link {
   border: 1px solid var(--wobly-line-accent);
   background: var(--theme-palette-color-7);
   color: var(--theme-palette-color-3)
}

.wobly-home .wp-block-button__link:hover {
   background-color: var(--theme-button-background-hover-color);
   color: var(--theme-button-text-hover-color)
}

.wobly-home .wp-block-button__link .arr {
   font-size: var(--theme-button-font-size);
   line-height: var(--theme-button-line-height, var(--wobly-text-line-height))
}

.wobly-home .hero {
   position: relative;
   background: var(--theme-palette-color-6);
   padding: 84px 0 92px
}

.wobly-home .hero:before {
   content: "";
   position: absolute;
   width: 340px;
   height: 340px;
   border-radius: 50%;
   filter: blur(4px);
   background: color-mix(in srgb, var(--theme-palette-color-8) 20%, transparent);
   top: -190px;
   left: -120px;
   pointer-events: none
}

.wobly-home .hero-grid {
   display: grid;
   grid-template-columns: 1.02fr .98fr;
   gap: 44px;
   align-items: center
}

.wobly-home .eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   text-transform: uppercase;
   letter-spacing: .17em;
   font-size: var(--wobly-text-label);
   font-weight: 700;
   color: var(--theme-palette-color-1)
}

.wobly-home .eyebrow .sparkle {
   font-size: var(--wobly-text-lead);
   color: var(--theme-palette-color-8)
}

.wobly-home .hero h1 {
   margin: 22px 0 24px;
   max-width: 650px
}

.wobly-home .lead {
   font-size: var(--wobly-text-lead);
   line-height: var(--wobly-text-line-height);
   color: var(--theme-palette-color-3);
   max-width: 570px;
   margin: 0
}

.wobly-home .hero-actions {
   display: flex;
   gap: 13px;
   flex-wrap: wrap;
   margin: 32px 0 21px
}

.wobly-home .micro {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 11px;
   color: var(--theme-palette-color-4);
   font-size: var(--wobly-text-caption);
   font-weight: 700
}

.wobly-home .micro .dot {
   height: 5px;
   width: 5px;
   border-radius: 50%;
   background: var(--theme-palette-color-8)
}

.wobly-home .hero-visual {
   position: relative;
   min-height: 565px;
   isolation: isolate
}

.wobly-home .hero-visual::before {
   content: "";
   position: absolute;
   inset: 5% 3% 0 4%;
   background: linear-gradient(160deg, var(--wobly-soft-peach), var(--wobly-soft-green) 75%);
   border-radius: 46% 54% 52% 48% / 42% 42% 58% 58%;
   transform: rotate(5deg);
   z-index: -1
}

.wobly-home .hero-visual::after {
   content: "";
   position: absolute;
   right: 5%;
   top: 11%;
   width: 85px;
   height: 85px;
   border-radius: 50%;
   border: 2px dashed var(--wobly-line-accent);
   pointer-events: none;
   z-index: -1
}

.wobly-home .product-hero-photo {
   position: absolute;
   top: 2%;
   left: 16%;
   width: 73%;
   height: 71%;
   overflow: hidden;
   background: var(--theme-palette-color-7);
   border: 9px solid var(--theme-palette-color-7);
   border-radius: 28px;
   transform: rotate(5deg);
   box-shadow: 0 22px 52px var(--wobly-shadow-color)
}

.wobly-home .product-hero-photo img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center
}

.wobly-home .hero-card {
   position: absolute;
   bottom: 4%;
   width: 27%;
   max-width: 156px;
   filter: drop-shadow(0 14px 16px var(--wobly-shadow-color));
   border-radius: 13px;
   overflow: hidden;
   background: var(--theme-palette-color-8)
}

.wobly-home .hero-card img {
   width: 100%;
   height: auto;
   display: block
}

.wobly-home .hero-card.one {
   left: 14%;
   transform: rotate(-16deg);
   z-index: 3
}

.wobly-home .hero-card.two {
   left: 39%;
   transform: rotate(0deg);
   z-index: 4
}

.wobly-home .hero-card.three {
   left: 64%;
   transform: rotate(13deg);
   z-index: 5
}

.wobly-home .value-strip {
   background: var(--theme-palette-color-7);
   border-top: 1px solid var(--theme-palette-color-5);
   border-bottom: 1px solid var(--theme-palette-color-5)
}

.wobly-home .value-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   padding: 26px 0;
   gap: 24px
}

.wobly-home .value {
   display: flex;
   gap: 13px;
   align-items: center
}

.wobly-home .value-icon {
   height: 39px;
   width: 39px;
   border-radius: 13px;
   display: grid;
   place-items: center;
   flex: none;
   font-size: 21px
}

.wobly-home .value:nth-child(1) .value-icon {
   background: var(--wobly-soft-peach)
}

.wobly-home .value:nth-child(2) .value-icon {
   background: var(--wobly-soft-green)
}

.wobly-home .value:nth-child(3) .value-icon {
   background: color-mix(in srgb, var(--theme-palette-color-11) 15%, var(--theme-palette-color-7))
}

.wobly-home .value strong {
   display: block;
   font-size: var(--wobly-text-small);
   font-weight: 700;
   color: var(--theme-palette-color-3)
}

.wobly-home .value small {
   font-size: var(--wobly-text-caption);
   line-height: var(--wobly-text-line-height);
   color: var(--theme-palette-color-4);
   display: block
}

.wobly-home .section {
   padding: 100px 0
}

.wobly-home .section-head {
   text-align: center;
   max-width: 740px;
   margin: 0 auto 52px
}

.wobly-home .section h2,
.wobly-home .closing h2 {
   margin: 15px 0 16px
}

.wobly-home .section-head p {
   max-width: 635px;
   margin: 0 auto;
   color: var(--theme-palette-color-4);
   font-size: var(--wobly-text-size);
   line-height: var(--wobly-text-line-height)
}

.wobly-home .product {
   background: var(--theme-palette-color-7)
}

.wobly-home .product-layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 90px;
   align-items: center
}

.wobly-home .product-photo {
   background: var(--theme-palette-color-6);
   position: relative;
   overflow: hidden;
   border-radius: 34px;
   min-height: 470px;
   border: 1px solid var(--theme-palette-color-5)
}

.wobly-home .product-photo img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   position: absolute;
   inset: 0;
   display: block
}

.wobly-home .product-photo .photo-label {
   position: absolute;
   right: 20px;
   bottom: 22px;
   z-index: 2;
   padding: 8px 14px;
   border-radius: 99px;
   background: var(--theme-palette-color-7);
   font-weight: 700;
   color: var(--theme-palette-color-1);
   font-size: var(--wobly-text-label);
   letter-spacing: .05em;
   box-shadow: 0 7px 18px var(--wobly-shadow-soft-color)
}

.wobly-home .product-copy h2 {
   max-width: 510px
}

.wobly-home .product-copy p {
   max-width: 515px;
   color: var(--theme-palette-color-4);
   font-size: var(--wobly-text-size);
   line-height: var(--wobly-text-line-height)
}

.wobly-home .feature-lines {
   display: grid;
   gap: 14px;
   margin: 28px 0 32px
}

.wobly-home .feature {
   display: flex;
   align-items: center;
   gap: 12px;
   color: var(--theme-palette-color-3);
   font-size: var(--wobly-text-small);
   font-weight: 700
}

.wobly-home .feature .check {
   display: grid;
   place-items: center;
   flex: none;
   width: 29px;
   height: 29px;
   border-radius: 50%;
   background: var(--wobly-soft-green);
   color: var(--theme-palette-color-1);
   font-size: var(--wobly-text-size);
   font-weight: 700
}

.wobly-home .textlink {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   margin-left: 18px;
   color: var(--theme-palette-color-1);
   font-size: var(--wobly-text-small);
   font-weight: 700;
   border-bottom: 1px solid var(--wobly-line-accent);
   padding-bottom: 3px
}

.wobly-home .product-little {
   display: flex;
   gap: 10px;
   margin: 25px 0 0
}

.wobly-home .product-little img {
   height: 76px;
   width: auto;
   border-radius: 7px;
   box-shadow: 0 5px 12px var(--wobly-shadow-color);
   transition: transform .2s
}

.wobly-home .product-little img:hover {
   transform: translateY(-3px)
}

.wobly-home .video-section {
   background: var(--wobly-soft-green);
   padding: 92px 0 100px
}

.wobly-home .video-layout {
   display: grid;
   grid-template-columns: .75fr 1.25fr;
   gap: 65px;
   align-items: center
}

.wobly-home .video-copy h2 {
   max-width: 470px;
   margin: 20px 0
}

.wobly-home .video-copy p {
   font-size: var(--wobly-text-size);
   line-height: var(--wobly-text-line-height);
   color: var(--theme-palette-color-4)
}

.wobly-home .film-points {
   display: flex;
   flex-direction: column;
   gap: 13px;
   margin-top: 26px;
   font-size: var(--wobly-text-small);
   color: var(--theme-palette-color-4);
   font-weight: 700
}

.wobly-home .film-points p {
   display: flex;
   align-items: center;
   gap: 12px
}

.wobly-home .film-points b {
   display: grid;
   place-items: center;
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: var(--theme-palette-color-10);
   color: var(--theme-palette-color-1);
   font-size: 12px
}

.wobly-home .video-frame {
   position: relative;
   overflow: hidden;
   border: 9px solid var(--theme-palette-color-7);
   border-radius: 28px;
   aspect-ratio: 16/9;
   background: var(--theme-palette-color-10);
   box-shadow: 0 18px 45px var(--wobly-shadow-color)
}

.wobly-home .video-frame img {
   height: 100%;
   width: 100%;
   object-fit: cover;
   object-position: center 55%;
   display: block;
   filter: saturate(.96)
}

.wobly-home .video-frame:after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(0deg, color-mix(in srgb, var(--theme-palette-color-3) 45%, transparent), transparent 45%);
   pointer-events: none
}

.wobly-home .video-caption {
   position: absolute;
   bottom: 23px;
   left: 23px;
   z-index: 2;
   color: var(--theme-palette-color-7);
   /* Preserve caption contrast when the poster image is replaced. */
   background: color-mix(in srgb, var(--theme-palette-color-3) 88%, transparent);
   padding: 8px 12px;
   border-radius: 10px;
   max-width: calc(100% - 46px)
}

.wobly-home .video-caption strong {
   display: block;
   font-size: var(--wobly-text-lead);
   line-height: var(--wobly-text-line-height)
}

.wobly-home .video-caption small {
   display: block;
   font-size: var(--wobly-text-caption);
   margin-top: 5px;
   opacity: 1
}

.wobly-home .video-tag {
   position: absolute;
   right: 19px;
   top: 20px;
   padding: 10px 14px;
   border-radius: 30px;
   background: color-mix(in srgb, var(--theme-palette-color-7) 94%, transparent);
   font-weight: 700;
   color: var(--theme-palette-color-1);
   font-size: var(--wobly-text-label);
   letter-spacing: .1em;
   z-index: 2
}

.wobly-home .story-section {
   background: linear-gradient(180deg, var(--theme-palette-color-7) 0%, var(--theme-palette-color-6) 100%)
}

.wobly-home .stories {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 22px
}

.wobly-home .story {
   box-shadow: 0 12px 30px var(--wobly-shadow-soft-color);
   display: flex;
   flex-direction: column
}

.wobly-home .story-art {
   aspect-ratio: 1.43;
   overflow: hidden;
   position: relative;
   background: var(--wobly-soft-peach)
}

.wobly-home .story-art img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block
}

.wobly-home .story:nth-child(2) .story-art {
   background: var(--wobly-soft-green)
}

.wobly-home .story:nth-child(3) .story-art {
   background: color-mix(in srgb, var(--theme-palette-color-12) 12%, var(--theme-palette-color-7))
}

.wobly-home .story-content {
   padding: 25px 26px 31px;
   flex: 1
}

.wobly-home .story h3 {
   margin: 12px 0;
}

.wobly-home .story p {
   font-size: var(--wobly-text-small);
   line-height: var(--wobly-text-line-height);
   color: var(--theme-palette-color-4);
   margin: 0 0 18px
}

.wobly-home .story .bridge {
   font-size: var(--wobly-text-small);
   font-weight: 700;
   color: var(--theme-palette-color-1);
   margin-bottom: 0
}

.wobly-home .mind-note {
   display: flex;
   gap: 17px;
   align-items: center;
   max-width: 815px;
   margin: 47px auto 0;
   padding: 24px 30px;
   border: 1px solid var(--theme-palette-color-5);
   border-radius: 20px;
   background: var(--wobly-soft-green)
}

.wobly-home .mind-note .heart {
   display: grid;
   place-items: center;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: var(--theme-palette-color-10);
   flex: none;
   font-size: var(--wobly-text-lead)
}

.wobly-home .mind-note strong {
   display: block;
   font-size: var(--wobly-text-size);
   color: var(--theme-palette-color-1)
}

.wobly-home .mind-note p {
   margin: 4px 0 0;
   color: var(--theme-palette-color-4);
   font-size: var(--wobly-text-small);
   line-height: var(--wobly-text-line-height)
}

.wobly-home .journey {
   background: var(--theme-palette-color-6);
   padding: 85px 0
}

.wobly-home .journey-inner {
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
   gap: 50px;
   padding: 43px 52px;
   background: var(--theme-palette-color-7);
   border: 1px solid var(--theme-palette-color-5);
   border-radius: 29px
}

.wobly-home .journey h2 {
   margin: 12px 0 12px
}

.wobly-home .journey p {
   max-width: 630px;
   color: var(--theme-palette-color-4);
   font-size: var(--wobly-text-size);
   line-height: var(--wobly-text-line-height);
   margin: 0
}

.wobly-home .journey-flow span {
   border-radius: 12px;
   background: var(--wobly-soft-green);
   padding: 13px
}

.wobly-home .journey-flow b {
   color: var(--wobly-line-accent)
}

.wobly-home .closing {
   background: linear-gradient(118deg, var(--wobly-soft-peach) 0%, var(--wobly-soft-peach) 45%, var(--wobly-soft-green) 100%);
   text-align: center;
   padding: 83px 25px 92px;
   position: relative
}

.wobly-home .closing h2 {
   max-width: 750px;
   margin: 16px auto 21px
}

.wobly-home .closing p {
   font-size: var(--wobly-text-size);
   line-height: var(--wobly-text-line-height);
   max-width: 690px;
   margin: 0 auto;
   color: var(--theme-palette-color-4)
}

/* The closing eyebrow uses the closing copy colour rather than the default teal. */
.wobly-home .closing .eyebrow {
   color: var(--theme-palette-color-4)
}

.wobly-home .closing .highlight {
   font-weight: 700;
   color: var(--theme-palette-color-1);
   margin-top: 16px
}

.wobly-home .closing .wp-block-button__link {
   margin-top: 28px
}

/* Native paragraph and button wrappers preserve independent content editing. */
/* These paragraph classes override section-specific paragraph typography. */
.wobly-home p.eyebrow {
   font-size: var(--wobly-text-label);
   line-height: var(--wobly-text-line-height);
   color: var(--theme-palette-color-1);
   margin: 0;
   max-width: none
}

.wobly-home .product-copy>p:not(.eyebrow) {
   margin: 1em 0
}

.wobly-home .video-copy>p:not(.eyebrow):not(.guide-link) {
   margin: 1em 0
}

.wobly-home .product-copy .feature {
   font-size: var(--wobly-text-small);
   line-height: var(--wobly-text-line-height);
   color: var(--theme-palette-color-3);
   margin: 0
}

.wobly-home .product-links {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 18px
}

.wobly-home .product-links .textlink {
   margin: 0;
   font-size: var(--wobly-text-small);
   line-height: var(--wobly-text-line-height);
   color: var(--theme-palette-color-1)
}

.wobly-home .product-little figure {
   display: block
}

.wobly-home .video-frame>figure {
   height: 100%;
   width: 100%
}

.wobly-home .video-copy .guide-link {
   margin: 24px 0 0;
   font-size: var(--wobly-text-small);
   line-height: var(--wobly-text-line-height);
   color: var(--theme-palette-color-1)
}

.wobly-home .story .story-overline {
   font-size: var(--wobly-text-label);
   text-transform: uppercase;
   letter-spacing: .14em;
   font-weight: 700;
   color: var(--theme-palette-color-4);
   margin: 0;
   line-height: var(--wobly-text-line-height)
}

.wobly-home .mind-note-copy>p:first-child {
   margin: 0;
   font-size: var(--wobly-text-size)
}

.wobly-home .journey .journey-flow {
   display: flex;
   align-items: center;
   gap: 9px;
   color: var(--theme-palette-color-1);
   font-size: var(--wobly-text-small);
   line-height: var(--wobly-text-line-height);
   font-weight: 700;
   white-space: nowrap;
   max-width: none
}

.wobly-home .closing .wp-block-buttons {
   justify-content: center;
   display: flex
}

@media(max-width:1090px) {
   .wobly-home .wrap {
      width: min(1190px, calc(100% - 48px))
   }

   .wobly-home .hero-grid {
      gap: 14px
   }

   .wobly-home .hero-visual {
      min-height: 510px
   }

   .wobly-home .product-layout {
      gap: 35px
   }

   .wobly-home .video-layout {
      gap: 32px
   }
}

@media(max-width:760px) {
   .wobly-home .wrap {
      width: calc(100% - 38px)
   }

   .wobly-home .hero {
      padding: 38px 0 48px
   }

   .wobly-home .hero-grid {
      display: flex;
      flex-direction: column;
      gap: 22px
   }

   .wobly-home .hero h1 {
      margin: 18px 0 18px
   }

   .wobly-home .hero-actions {
      gap: 8px;
      margin: 22px 0 14px
   }

   .wobly-home .hero-visual {
      width: min(520px, 100%);
      min-height: 390px;
      margin: 0 auto
   }

   .wobly-home .product-hero-photo {
      left: 14%;
      width: 77%;
      height: 69%;
      border-width: 6px
   }

   .wobly-home .hero-card {
      width: 28%;
      max-width: 133px;
      bottom: 2%
   }

   .wobly-home .hero-card.one {
      left: 10%
   }

   .wobly-home .hero-card.two {
      left: 37%
   }

   .wobly-home .hero-card.three {
      left: 64%
   }

   .wobly-home .value-grid {
      grid-template-columns: 1fr;
      gap: 17px;
      padding: 21px 0
   }

   .wobly-home .value {
      gap: 11px
   }

   .wobly-home .value-icon {
      width: 34px;
      height: 34px
   }

   .wobly-home .section {
      padding: 67px 0
   }

   .wobly-home .section-head {
      margin-bottom: 30px
   }

   .wobly-home .product-layout,
   .wobly-home .video-layout {
      grid-template-columns: 1fr;
      gap: 25px
   }

   .wobly-home .product-photo {
      min-height: 350px
   }

   .wobly-home .feature-lines {
      margin: 23px 0 25px
   }

   .wobly-home .textlink {
      margin: 18px 0 0;
      display: table
   }

   .wobly-home .product-little img {
      height: 60px
   }

   .wobly-home .video-section {
      padding: 68px 0
   }

   .wobly-home .video-frame {
      border-width: 5px;
      border-radius: 18px
   }

   .wobly-home .video-caption {
      left: 15px;
      bottom: 15px
   }

   .wobly-home .video-tag {
      top: 10px;
      right: 10px;
      padding: 7px 9px;
   }

   .wobly-home .stories {
      grid-template-columns: 1fr;
      gap: 15px;
      max-width: 530px;
      margin: auto
   }

   .wobly-home .story-art {
      aspect-ratio: 1.8
   }

   .wobly-home .story-content {
      padding: 22px
   }

   .wobly-home .mind-note {
      margin: 27px auto 0;
      padding: 18px;
      gap: 12px
   }

   .wobly-home .mind-note .heart {
      width: 38px;
      height: 38px;
   }

   .wobly-home .journey {
      padding: 30px 0 62px
   }

   .wobly-home .journey-inner {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 27px;
      gap: 24px
   }

   .wobly-home .journey-flow span {
      padding: 10px
   }

   .wobly-home .closing {
      padding: 62px 19px
   }

   .wobly-home .product-links {
      display: block
   }

   .wobly-home .product-links .textlink {
      margin: 18px 0 0;
      display: table
   }

   .wobly-home .journey .journey-flow {
      gap: 5px;
      flex-wrap: wrap
   }

   .wobly-home .hero-grid>.hero-copy {
      width: 100%
   }

}

@media(min-width:761px) and (max-width:900px) {

   .wobly-home .hero-visual {
      min-height: 450px
   }

   .wobly-home .story-content {
      padding: 18px
   }
}