/*
 Theme Name:     Lucas Roussy Portfolio 2026 test
 Theme URI:      https://lucasroussy.fr
 Description:    Theme pour le portfolio de 2026
 Author:         Lucas
 Author URI:     https://lucasroussy.fr
 Version:        1.0
*/

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}

@-webkit-keyframes bounce {
    0% { transform:translateY(0%); }
    35% { transform:translateY(25%); }
    42% { transform:translateY(0%); }
    47% { transform:translateY(15%); }
    60% { transform:translateY(0%); }
}

@keyframes bounce {
    0% { transform:translateY(0%); }
    35% { transform:translateY(25%); }
    42% { transform:translateY(0%); }
    47% { transform:translateY(15%); }
    60% { transform:translateY(0%); }
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* FORM */
.rgpdInfos {
  margin: 1.2rem 0 3rem;
}
.rgpdInfos p {
  font-size: 0.9rem;
  line-height: 1;
  color: #535353;
}
.rgpdInfos p a {
  color: #444;
  transition: color 0.5s ease-in-out;
}
.rgpdInfos p a:hover {
  color: #000;
}
.wpcf7-form .line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.wpcf7-form .line > p {
  width: 100%;
}

.wpcf7-form label {
  margin-bottom: 0.5rem;
  color: var(--wp--preset--color--dark-blue);
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(20px, 1.354vw, 28px);
}

.wpcf7-form
  input:where(
    [type="text"],
    [type="email"],
    [type="tel"],
    [type="url"],
    [type="number"],
    [type="search"],
    [type="password"]
  ),
.wpcf7-form textarea {
  width: 100%;
  border: 0;
  transition: background-color 0.5s ease-in-out;
  padding: 0.45rem;
  margin-bottom: 0.5rem;
  color: var(--wp--preset--color--dark-blue);
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--text);
  border: 1px solid var(--wp--preset--color--dark-blue);
}

.wpcf7-form
  input:where(
    [type="text"],
    [type="email"],
    [type="tel"],
    [type="url"],
    [type="number"],
    [type="search"],
    [type="password"]
  ):hover,
.wpcf7-form
  input:where(
    [type="text"],
    [type="email"],
    [type="tel"],
    [type="url"],
    [type="number"],
    [type="search"],
    [type="password"]
  ):focus,
.wpcf7-form textarea:hover,
.wpcf7-form textarea:focus {
  background-color: #f5f5f5;
}

.wpcf7-acceptance label span.wpcf7-list-item-label {
  font-weight: normal;
  color: #000;
}
.wpcf7-acceptance label :where(input, .wpcf7-list-item-label) {
  vertical-align: middle;
}
.wpcf7-acceptance > .wpcf7-list-item {
  margin-left: 0;
}
.wpcf7-acceptance label input {
  margin-right: 10px;
}
input[readonly="readonly"] {
  background: #f5f5f5;
  cursor: not-allowed;
  color: #787878;
}
.wpcf7-form input[type="submit"] {
  margin-top: 1rem;
  background-color: var(--wp--preset--color--dark-blue);
  border: none;
  color: white;
  border-radius: 5px;
  padding: 0.75rem 1.5rem;
  font-size: var(--wp--preset--font-size--text);
  cursor: pointer;
}

.wpcf7-form input[type="submit"]:disabled {
  background-color: var(--wp--preset--color--light-gray);
  color: var(--wp--preset--color--gray);;
}

.clickable-card {
  position: relative;
}

.clickable-card .card-link a {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
}

.hero {
  position: relative;
}

.hero figure.hero-bg {
  position: absolute;
  display: block;
  max-width: 85%;
  height: auto;
  top: 60%;
  left: 48%;
  transform: translate(-50%, -50%);
  z-index: -1;
  width: 100%;
}

.bouton-arrow-center {
  width: max-content !important;
}

.bouton-arrow-center:hover img {
  -webkit-animation: bounce 1s ease infinite;
  animation: bounce 2s ease infinite;
}

.scrolling-catchline .catchline {
    white-space: nowrap;
}

.horizontalScroll__container{
  contain:paint;
  position:relative;
  height:350vh;
}

.multistep-title__section .horizontalScroll__container {
  height:180vh;
}

.multistep-title mark {
  margin-bottom: 1rem;
}
.horizontalScroll__sticky{
  position:sticky;
  top:25%;
}
.horizontalScroll__sticky .catchline {
  pointer-events: none;
}

.horizontalScroll__sticky--right{
  position:sticky;
  top:25%;
  right:0
}

.horizontalScroll__scrolling{
  width:fit-content;
  padding-right:var(--columnExt);
  transition: .5s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}

.horizontalScroll__scrolling.reduce-section{
  min-width: 100%;
}

.horizontalScroll__scrolling.reduce-section ~ .wp-block-group {
  min-width: 40%;
}

.central-title {
  width: fit-content;
  max-width: 62%;
  position: relative;
}

.central-title::after {
  content: '';
  display: block;
  margin-inline: auto;
  width: 110%;
  height: 48px;
  background-color: var(--wp--preset--color--light-gray);
  transform: translate(-50%, 30%) skew(-14deg);
  z-index: -1;
  position: absolute;
  left: 50%;
  bottom: 0;
  max-width: 35rem;
}

#services, .graphic-design-services, #form, #rdv {
  contain: paint;
}

.tab-service {
  position: relative;
}

.tab-service::after {
  content: '';
  width: 100%;
  max-width: 156px;
  aspect-ratio: 2/4.5;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-41%, -50%) skew(23deg);
  z-index: -1;
  background-color: var(--wp--preset--color--light-gray);
  transition: background-color 1.2s cubic-bezier(0.22, 1, 0.36, 1);
 }

.tab-service.right::after {
  transform: translate(41%, -50%) skew(-23deg);
  left: initial;
  right: 0;
  transform-origin: center;
}

.tab-service.clickable-card:hover::after {
  background-color: #FF890136;
}

.offset_grid ul {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(15, 5.573vw);
  grid-column-gap: 1.042vw;
  grid-row-gap: 0px; 
}

.offset_grid ul li:nth-child(1) {
  grid-area: 1 / 4 / 6 / 10; 
}

.offset_grid ul li:nth-child(1) img {
  aspect-ratio: 890/632;
}
.offset_grid ul li:not(:first-child) img {
  aspect-ratio: 586/749;
}

.offset_grid ul li:nth-child(2) {
  grid-area: 9 / 2 / 16 / 6; 
}

.offset_grid ul li:nth-child(3) {
  grid-area: 8 / 8 / 15 / 12; 
}

.offset_grid ul li {
  position: relative;
}

.offset_grid ul li::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--wp--preset--color--dark-blue);
  opacity: 0.1;
  z-index: 1;
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.offset_grid ul li:hover::after {
  opacity: 0.35;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.offset_grid ul li figure {
  margin: 0;
  height: 100%;
  width: 100%;
}
.offset_grid ul li img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.offset_grid ul li a {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 3;
}

.offset_grid ul li .wp-block-post-title {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 1.5rem 2.5rem;
  text-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
  font-size: 2rem;
  font-weight: normal;
  z-index: 2;
}

.side-titles {
  align-items: normal;
  gap: 8.958vw;
}

.side-titles .wp-block-group {
  width: 50%;
}
.side-titles .wp-block-group:nth-child(1) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.hero-service {
  contain: paint;
}

.hero-service figure {
  position: relative;
  max-width: 650px;
}

.hero-service figure::after {
content: '';
  width: 110%;
  max-width: 1738px;
  height: 110%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(10%, -10%);
  z-index: -1;
  background: radial-gradient(ellipse 40% 30% at 50% 50%, #d9d9d9 0%, transparent 100%);
  pointer-events: none;
}

.hero-service .wp-block-column:nth-child(1) {
  transform: translate(-30%);
}
.hero-service .wp-block-column:nth-child(2) {
  transform: translate(30%);
}

.hero-service .wp-block-column:is(:nth-child(1), :nth-child(2)) {
  opacity: 0;
  animation: .8s ease-out .5s 1 forwards slideTo, .5s ease-out .5s 1 forwards fromVisible;
}

.services-grid {
  display: grid;
}

.services-grid > .wp-block-group {
  padding: clamp(2rem, 3.125vw, 3.75rem) clamp(3rem, 5.729vw, 6.875rem);
}

.responsive-section.horizontalScroll__container {
  height: 300vh;
}
.responsive-section > .wp-block-group:nth-child(1) {
  container: grid-main / inline-size;
}

.service-catchline {
  padding: clamp(2.25rem, 5.729vw, 6.875rem) clamp(4.5rem, 10.938vw, 13.125rem);
}

.presentation-4-col .wp-block-columns .wp-block-column .wp-block-group{
  height: 100%;
}

.others-services .wp-block-column .wp-block-group {
  padding: clamp(2rem, 3.125vw, 3.75rem) clamp(3rem, 5.729vw, 6.875rem);
  height: 100%;
}

.presentation .wp-block-column:nth-child(1) {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.page-numbers[aria-current="page"] {
  color: var(--wp--preset--color--bright-orange);
  font-weight: normal;
}

:is(.wp-block-post-navigation-link__arrow-next, .wp-block-post-navigation-link__arrow-previous, .wp-block-query-pagination-previous-arrow, .wp-block-query-pagination-next-arrow) {
  vertical-align: middle;
}

.responsive-grid-exemple .grey-bloc {
  background-color: #d9d9d9;
  width: 100%;
  height: 100%;
  min-height: 12rem;
}

/* 2. Base & Fallback Media Queries */
.responsive-grid-exemple {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
}

/* Le premier bloc prend toute la largeur par défaut */
.responsive-grid-exemple .grey-bloc:nth-child(1) {
  grid-column: 1 / -1; 
}

.multistep-title {
  position: relative;
  width: fit-content;
}

.multistep-title mark:nth-of-type(1)::before, .multistep-title mark:nth-of-type(3)::after {
  content: '';
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  width: 35%;
  aspect-ratio: 1;
  opacity: 0;
  transition: opacity 0.8s ease-out .5s;
}

.multistep-title mark:nth-of-type(1)::before {
  display: block;
  background-image: url(https://lucasroussy.fr/wp-content/uploads/2026/04/fleche_bleu.svg);
  left: 0;
  translate: -120% -70%;
}

.multistep-title mark:nth-of-type(3)::after {
  display: block;
  background-image: url(https://lucasroussy.fr/wp-content/uploads/2026/04/fleche_jaune.svg);
  right: 0;
  translate: 120% -30%;
}

.multistep-title mark:nth-of-type(1).animated::before, .multistep-title mark:nth-of-type(3).animated::after {
  opacity: 1;
}

.multistep-title mark {
  display: inline-block;
  opacity: 0;
  transition: 0.5s ease-out, translate .3s  ease-out .2s;
}
.multistep-title mark:nth-of-type(2) {
  position: relative;
  z-index: -1;
  translate: 0 -100%;
}

.multistep-title mark:nth-of-type(2).animated {
  translate: 0 0;
}

.multistep-title mark:nth-of-type(3) {
  transform: translateY(-100%) rotate(0);
  transition: opacity 0.5s ease-out .3s, transform .3s  ease-out .2s;
}

.multistep-title mark:nth-of-type(3).animated {
  transform: translateY(0) rotate(-4deg);
}

.multistep-title mark.animated {
  opacity: 1;
}

.services-offset {
  position: relative;
}

#realisations .realisations_container {
  background-image: url(https://lucasroussy.fr/wp-content/themes/lucasroussy2026/assets/img/bg-real.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.a-propos b {
  font-weight: 500;
}

.archives-realisations {
  position: relative;
}
.svgScrollAnimatedPath {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  transform: translate(-50%);
  display: flex;
  justify-content: center;
}
.offset_grid ul li > div {
  height: 100%;
  width: 100%;
}
.offset_grid ul li > div figure {
  max-width: 100%;
}

.project-visuals {
  contain: paint;
}

/* Animation */

@keyframes slideTo {
  to {
    transform: translateX(0%);
  }
}
@keyframes fromVisible {
  to {
    opacity: 1;
  }
}

.ease-in {
  transition-timing-function: ease-in;
}

.ease-out {
  transition-timing-function: ease-out;
}

.ease-in-out {
  transition-timing-function: ease-in-out;
}

.fade-in {
  opacity: 0;
  transition-duration: .5s;
}
.slide-right {
  transform: translate(-30%);
}
.slide-left {
  transform: translate(30%);
}
.slide-top {
  transform: translateY(30%);
}
.slide-bottom {
  transform: translateY(-30%);
}
:is(.slide-right, .slide-left , .slide-top ,.slide-bottom) {
  transition-duration: .5s;
}
.fade-in.animated {
  opacity: 1;
}
:is(.slide-right, .slide-left , .slide-top ,.slide-bottom).animated {
  transform: translate(0);
}

.word-writting .animatedText span {
  display: inline-block;
  opacity: 0;
  transform: translateY(-25%);
  transition: .8s ease-out;
}
.word-writting .wp-block-create-block-button-with-icon {
  opacity: 0;
  transition: .8s ease-out;
}
.word-writting .wp-block-create-block-button-with-icon.animated {
  opacity: 1;
}

:is(.animated-columns, .animated-columns-in) .wp-block-column, :is(.animated-grid, .animated-grid-in) .wp-block-group {
  opacity: 0;
  transition: opacity .8s ease-in-out;
}

:is(.animated-columns, .animated-columns-in).animated .wp-block-column, :is(.animated-grid, .animated-grid-in).animated .wp-block-group {
  opacity: 1;
}

:is(.title-portfolio, .hero-home) :is(h1, h2, p) {
  transform: translateY(10rem);
  opacity: 0;
  animation: .8s ease-out .5s 1 forwards slideTo, .5s ease-out .5s 1 forwards fromVisible;
}
:is(.title-portfolio, .hero-home) :is(h2, p) {
  animation-delay: .4s;
}

.title-text :is(h1, h2, h3, p) {
  transform: translateY(10rem);
  opacity: 0;
  transition: .8s;
}

.title-text.animated :is(h1, h2, h3, p) {
  opacity: 1;
  transform: translate(0);
}

.svgScrollAnimatedPath{
  opacity: 0;
}

.svgScrollAnimatedPath.ready {
  animation: .5s ease-out 0s 1 forwards fromVisible;
}

.hero-project {
  opacity: 0;
  animation: .5s ease-out .5s 1 forwards fromVisible;
}
.menu_item--highlight {
  background-color: var(--wp--preset--color--bright-orange) !important;
  color: #ffffff;
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm) !important;
  cursor: pointer !important;
  border-radius: 5px !important;
  transition:  background-color .8s ease-out;
}

.menu_item--highlight a{
  text-decoration: none;
}

.menu_item--highlight:hover {
  background-color: var(--wp--preset--color--dark-blue) !important;
}

.menu_item--highlight:hover a{
  text-decoration: none;
}



@media (min-width: 600px) {
  .responsive-grid-exemple { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1500px) {
  .responsive-grid-exemple { grid-template-columns: repeat(4, 1fr); }
}


/* On réinitialise ou on ajuste ici pour que seul le container décide */
@container grid-main (max-width: 599px) { 
  .responsive-grid-exemple { grid-template-columns: repeat(1, 1fr); }
}
@container grid-main (min-width: 600px) and (max-width: 999px) { 
  .responsive-grid-exemple { grid-template-columns: repeat(2, 1fr); }
}

@container grid-main (min-width: 1000px) and (max-width: 1499px) { 
  .responsive-grid-exemple { grid-template-columns: repeat(3, 1fr); }
  .responsive-grid-exemple  .grey-bloc:last-child {
    grid-column: 1 / -1; 
  }
}

@container grid-main (min-width: 1500px) { 
  .responsive-grid-exemple { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
  .wpcf7-form .demi-input {
    width: 47.5%;
    min-width: 300px;
  }
  .ssa_booking_iframe {
    min-height: 600px;
  }
  .services-grid, .offset_grid ul {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 1fr) 1fr repeat(5, auto) 1fr repeat(3, auto);
    grid-column-gap: 1.042vw;
    grid-row-gap: 0px;
  }
  .services-grid, .offset_grid ul {
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: repeat(3, 1fr) 1fr repeat(5, auto) 1fr repeat(3, auto);
      grid-column-gap: 1.042vw;
      grid-row-gap: 0px;
  }
  
  .services-grid > .wp-block-group:nth-child(1), .offset_grid ul li:nth-child(1) {
    grid-area: 1 / 4 / 4 / 10;
  }
  .services-grid > .wp-block-group:nth-child(2), .offset_grid ul li:nth-child(2) {
    grid-area: 5 / 2 / 9 / 6;
  }
  .services-grid > .wp-block-group:nth-child(3), .offset_grid ul li:nth-child(3) {
    grid-area: 6 / 7 / 10 / 12;
  }
  .services-grid > .wp-block-group:nth-child(4), .offset_grid ul li:nth-child(4) {
    grid-area: 11 / 3 / 14 / 9;
  }
  .wp-block-create-block-button-with-icon.yellow-hover:hover {
    background-color: var(--wp--preset--color--bright-orange) !important; 
  }
  .backend-path.mobile {
    display: none;
  }
  .backend-path:not(.mobile) {
    display: block;
  }
  .wp-block-create-block-button-with-icon.is-mobile {
    display: none;
  }
  .wp-block-create-block-button-with-icon.is-desktop {
    display: block;

  }
}
@media (max-width: 1023px) {
  .wpcf7-form .demi-input {
    width: 100%;
  }
  .section-rdv {
    flex-direction: column-reverse;
  }
  .central-title {
    max-width: 85%;
    margin-bottom: clamp(7.5rem, 12.083vw, 14.5rem);
  }
  .responsive-section {
    flex-direction: column-reverse;
  }
  .responsive-section .horizontalScroll__sticky {
    flex-wrap: wrap !important;
    gap: 100px;
    top:0%;
  }

  .responsive-grid-exemple .grey-bloc {
    min-height: 8rem;
  }
  .presentation-4-col .wp-block-heading {
    max-width: 60%;
  }
  .section-txt-img.right {
    flex-direction: column-reverse;
  }
  .section-txt-img.right .wp-block-column:nth-child(1) .wp-block-group {
    padding-left: 0 !important;
  }
  .title-list > .wp-block-group > .wp-block-group {
    padding: 0 !important;
  }
  .title-list p {
      text-align: center;
  }
  .related-services .wp-block-group-is-layout-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .others-services .wp-block-column .wp-block-group {
    min-height: 12rem;
    max-width: 550px;
    margin-inline: auto;
  }
  .title-two-buttons .wp-block-group:nth-child(2) {
    flex-direction: column;
  }
  .section-central-txt {
    padding-inline: clamp(1.25rem, 25vw, 9.375rem) !important;
  }
  .services-offset > .wp-block-group {
    max-width: 100%;
  }
  .services-offset > .wp-block-group h2{
    font-size: clamp(1.8rem, 10.6vw , 4rem) !important;
  }
  .presentation .wp-block-column:nth-child(1) {
    justify-content: center;
    padding: 5rem;
  }
  .project-entreprise {
    flex-direction: column-reverse;
    gap: var(--wp--preset--spacing--l);
  }
  .project-entreprise .wp-block-column:nth-child(1) {
    display: flex;
    flex-direction: row;
  }
  .backend-path.mobile {
    display: block;
  }
  .backend-path:not(.mobile) {
    display: none;
  }
  .wp-block-create-block-button-with-icon.is-mobile {
    display: block;
    margin-bottom: var(--wp--preset--spacing--l);
  }
  .wp-block-create-block-button-with-icon.is-desktop {
    display: none;
  }
}

@media (max-width: 1023px) and (min-width: 782px) {
  .presentation-4-col .wp-block-columns {
    flex-wrap: wrap !important;  }
  .presentation-4-col .wp-block-columns .wp-block-column {
    flex-basis:48.8% !important;
  }
  .section-txt-img {
    flex-wrap: wrap !important;
  }

  .related-services .wp-block-group-is-layout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-presentation .wp-block-columns {
    flex-direction: column;
  }
  .has-super-title-font-size {
    font-size: 4rem !important;
  }
}

@media (max-width: 782px) {
  footer .wp-block-group:nth-child(2) {
    justify-content: space-between;
  }
  .hero-home {
    padding-inline: 0 !important;
  }
  .central-title::after {
    height: 2rem;
  }
  .services-offset {
    padding-inline: 10vw;
  }
  .services-offset .clickable-card {
    margin-bottom: 200px !important;
  }

  .realisations_container .wp-block-query .wp-block-post-title {
    padding: 1rem 1.2rem;
    font-size: clamp(1rem, 10.667vw, 1.5rem);
  }
  .logo-header {
    margin-inline: auto !important;
    display: inline-block;
  }
  .wp-block-navigation__submenu-container .wp-block-navigation-item {
    text-align: center;
  }
  .multistep-title mark:nth-of-type(1)::before {
    translate: -0% -130%;
    rotate: 50deg;
  }
  .multistep-title mark:nth-of-type(3)::after {
    translate: 0% 30%;
    rotate: 20deg;
  }
  .services-grid, .offset_grid ul  {
    grid-template-columns: 1fr 2fr 10fr 2fr 1fr !important;
    grid-template-rows: repeat(4, auto);
    grid-column-gap: 0;
    grid-row-gap: 4rem;
  }
  .services-grid > .wp-block-group:nth-child(1), .offset_grid ul li:nth-child(1) {
    grid-area: 1 / 2 / 2 / 5;
  }
  .services-grid > .wp-block-group:nth-child(2), .offset_grid ul li:nth-child(2) {
    grid-area: 2 / 1 / 3 / 4;
  }
  .services-grid > .wp-block-group:nth-child(3), .offset_grid ul li:nth-child(3) {
    grid-area: 3 / 3 / 4 / 6;
  }
  .services-grid > .wp-block-group:nth-child(4), .offset_grid ul li:nth-child(4) {
    grid-area: 4 / 2 / 5 / 5;
  }
  .section-central-txt {
    padding-inline: clamp(1.25rem, 25vw, 1.5rem) !important;
  }
  .is-column-mobile {
    flex-direction: column !important;
  }
  .is-fullsize-mobile * {
    max-width: 75vw;
    margin-inline: auto;
  }
}
@media (max-width: 425px) {
  footer .wp-block-group:nth-child(2) {
    flex-direction: column;
    margin-top: 2.5rem;
  }
  .hero-home .subtitle-container h2 {
    max-width: 100% !important;
  }
  .offset_grid ul {
    grid-template-columns: 1fr !important;
    grid-row-gap: clamp(2rem, 21.333vw , 2rem);
  }
  .offset_grid ul li .wp-block-post-title {
    padding: 10px;
    font-size: clamp(1rem, 10.667vw, 1.2rem);
  }

  .offset_grid ul li:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4)) {
  grid-area: initial;
  }

  .responsive-grid-exemple .grey-bloc {
    min-height: 5rem;
  }
  .wp-block-create-block-button-with-icon {
    padding-right: 1.2rem !important;
    padding-left: 1.2rem !important;
  }
  *:not(li) > ul {
    padding-left: 0;
  }
  li > ul {
    padding-left: 1.4rem;
  }
  .is-fullsize-mobile * {
    max-width: 100%;
  }
  .wp-block-post-featured-image img {
    max-width: 350px !important;
  }
}
@media (max-width: 320px) {
  header > div {
    padding-right: var(--wp--preset--spacing--60) !important;
    padding-left: var(--wp--preset--spacing--60) !important;
  }

  .wp-block-create-block-button-with-icon .wp-block-button-icon {
    display: none;
  }

  .realisations_container .wp-block-query {
    max-width: 100%;
  }
   .word-writting .animatedText span {
    opacity: 1;
    transform: translateY(0%);
   }
}