.rocchi-index{width:100%;font-family:inherit;color:#111;font-size:13px;line-height:1.25}.rocchi-index-tabs{display:flex;gap:18px;align-items:center;min-height:34px;border-bottom:1px solid #111}.rocchi-index-controls{display:flex;gap:18px;align-items:center;margin-left:auto;justify-content:flex-end}.rocchi-index-controls button{border:0;background:none;padding:0;color:inherit;font:inherit;cursor:pointer}.rocchi-index-controls button:hover{color:#2f211e;background:transparent}.rocchi-index-head,.rocchi-project-row{display:grid;grid-template-columns:24% 18% 25% 25% 8%;align-items:center}.rocchi-index-head{min-height:34px;border-bottom:1px solid #111}.rocchi-project-row{min-height:52px;border-bottom:1px solid #aaa}.rocchi-project-title-button,.rocchi-project-media-button{border:0;background:transparent;color:inherit;font:inherit;text-align:left;padding:0;margin:0;cursor:pointer}.rocchi-project-title-button{font-weight:500}.rocchi-project-year{text-align:right;padding-right:8px}.rocchi-project-services{padding-right:16px}.rocchi-project-media-button{width:100%;overflow:hidden}.rocchi-closed-thumbs{display:flex;align-items:center;gap:var(--rocchi-closed-gap,8px);overflow:hidden}.rocchi-closed-thumbs img,.rocchi-closed-thumbs video{height:var(--rocchi-closed-height,35px);width:auto;max-width:none;display:block;object-fit:cover;flex:0 0 auto}.rocchi-project-detail{display:none;border-bottom:1px solid #111;grid-template-columns:25% 75%;padding:28px 0 30px}.rocchi-project.is-open>.rocchi-project-detail{display:grid}.rocchi-project-copy{padding-right:28px}.rocchi-project-copy p{margin:0 0 22px}.rocchi-project-copy a{margin-right:18px;color:inherit;text-decoration:underline}.rocchi-open-gallery{width:100%;overflow:hidden}.rocchi-open-track{display:flex;align-items:stretch;gap:var(--rocchi-open-gap,10px);width:max-content;height:var(--rocchi-open-height,420px);will-change:transform}.rocchi-open-item{height:var(--rocchi-open-height,420px);width:auto;max-width:none;display:block;object-fit:cover;flex:0 0 auto}.rocchi-editor-project{padding:12px 0 18px;border-bottom:1px solid #ddd}.rocchi-editor-preview{margin-top:20px}@media(max-width:800px){.rocchi-index{font-size:12px}.rocchi-index-head{display:none}.rocchi-project-row{grid-template-columns:1fr auto;grid-template-areas:"title year" "client client" "media media" "services services";row-gap:6px;padding:12px 0}.rocchi-project-title-button{grid-area:title}.rocchi-project-year{grid-area:year}.rocchi-project-client{grid-area:client}.rocchi-project-media-button{grid-area:media}.rocchi-project-services{grid-area:services;padding:0}.rocchi-project-detail{grid-template-columns:1fr;padding:20px 0}.rocchi-project-copy{padding-right:0;margin-bottom:18px}.rocchi-index-controls{gap:12px;flex-wrap:wrap}}

.rocchi-index-head .rocchi-head-date{text-align:right;padding-right:8px}.rocchi-project-year{text-align:right;padding-right:8px}

.rocchi-project-media-button:hover,.rocchi-project-media-button:focus{background:transparent;box-shadow:none;opacity:1}.rocchi-closed-thumbs img:hover,.rocchi-closed-thumbs video:hover{opacity:1;transform:none;filter:none}

/* v8: neutral title/media buttons and square thumbnails */
.rocchi-project-title-button,
.rocchi-project-title-button:hover,
.rocchi-project-title-button:focus,
.rocchi-project-title-button:active,
.rocchi-project-media-button,
.rocchi-project-media-button:hover,
.rocchi-project-media-button:focus,
.rocchi-project-media-button:active {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
  outline: none !important;
}
.rocchi-project-detail {
  border-bottom: 0 !important;
}
.rocchi-project-media-button {
  border-radius: 0 !important;
  overflow: hidden;
}
.rocchi-closed-thumbs,
.rocchi-closed-thumbs img,
.rocchi-closed-thumbs video {
  border-radius: 0 !important;
}
.rocchi-open-gallery,
.rocchi-open-track,
.rocchi-open-item {
  border-radius: 0 !important;
}

/* v9 layout and controls */
.rocchi-index-tabs{position:relative}
.rocchi-index-controls{width:100%;box-sizing:border-box;justify-content:flex-end;margin-left:0;padding:0 0 8px}
.rocchi-index-tabs + .rocchi-index-controls{margin-top:0}
.rocchi-project-row{border-bottom:1px solid #aaa}
.rocchi-project.is-open>.rocchi-project-row{border-bottom:0}
.rocchi-project-detail{grid-template-columns:42% 58% !important;border-bottom:0 !important;padding-top:28px}
.rocchi-open-gallery{margin:0;padding:0}
.rocchi-open-track{margin:0;padding:0}
.rocchi-closed-thumbs{margin:0;padding:0}

/* v10 */
.rocchi-project-media-button{
  padding:10px 0 !important;
  margin:0 !important;
  box-sizing:border-box;
}
.rocchi-closed-thumbs{
  width:100%;
  overflow:hidden;
  display:block;
  padding:0 !important;
  margin:0 !important;
}
.rocchi-closed-track{
  display:flex;
  align-items:center;
  gap:var(--rocchi-closed-gap,8px);
  width:max-content;
  padding:0 !important;
  margin:0 !important;
  will-change:transform;
}
.rocchi-closed-track img,
.rocchi-closed-track video{
  flex:0 0 auto;
  margin:0 !important;
}
.rocchi-open-track{
  gap:var(--rocchi-open-gap,10px) !important;
  padding:0 !important;
  margin:0 !important;
}
.rocchi-open-item{
  margin:0 !important;
}
.rocchi-project-title-button:hover,
.rocchi-project-title-button:focus{
  color:#aa9b8d !important;
  background:transparent !important;
}

/* v11 */
.rocchi-closed-viewport{
  display:block;
  width:100%;
  overflow:hidden;
  padding-right:20px;
  box-sizing:border-box;
}
.rocchi-closed-thumbs{
  display:block;
  width:max-content;
  margin:0;
  padding:0;
  overflow:visible;
}
.rocchi-closed-track{
  display:flex;
  align-items:center;
  gap:var(--rocchi-closed-gap,8px);
  width:max-content;
  margin:0;
  padding:0;
  will-change:transform;
}
.rocchi-closed-track img,
.rocchi-closed-track video{
  flex:0 0 auto;
}
.rocchi-project-title-button:hover,
.rocchi-project-title-button:focus{
  color:#aa9b8d !important;
}
.rocchi-index-controls button:hover,
.rocchi-index-controls button:focus{
  color:#aa9b8d !important;
}
.rocchi-project.is-open>.rocchi-project-row{
  border-bottom:1px solid #aaa !important;
}

/* v12 */
.rocchi-project-title-button:hover{
  color:#aa9b8d !important;
}
.rocchi-project-title-button:focus,
.rocchi-project-title-button:active{
  color:inherit !important;
}
.rocchi-index-controls button:hover{
  color:#aa9b8d !important;
}
.rocchi-index-controls button:focus,
.rocchi-index-controls button:active{
  color:inherit !important;
}
.rocchi-project.is-open>.rocchi-project-row{
  border-bottom:0 !important;
}
.rocchi-project.is-open>.rocchi-project-detail{
  border-bottom:1px solid #aaa !important;
}

/* v16 */
.rocchi-index-tabs{display:none !important;}
.rocchi-closed-viewport{width:100% !important;padding-right:20px !important;box-sizing:border-box !important;overflow:hidden !important;}
.rocchi-project-media-button{width:100% !important;box-sizing:border-box !important;}
.rocchi-open-gallery{width:100% !important;padding-right:20px !important;box-sizing:border-box !important;overflow:hidden !important;}
.rocchi-project.is-open>.rocchi-project-row{border-bottom:0 !important;}
.rocchi-project.is-open>.rocchi-project-detail{border-bottom:1px solid #aaa !important;}

/* v17: seamless closed-gallery loop + 20px right padding */
.rocchi-closed-viewport{
  width:100% !important;
  padding:0 20px 0 0 !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}
.rocchi-closed-thumbs{
  width:max-content !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
}
.rocchi-closed-track{
  display:flex !important;
  width:max-content !important;
  gap:var(--rocchi-closed-gap,8px) !important;
  margin:0 !important;
  padding:0 !important;
  will-change:transform;
}

/* v18: 20px breathing room between closed gallery and Services column */
.rocchi-project-media-button{
  padding:10px 20px 10px 0 !important;
  box-sizing:border-box !important;
}
.rocchi-closed-viewport{
  padding-right:0 !important;
}


/* Definitive interaction states */
.rocchi-index .rocchi-index-controls{
  display:flex;
  gap:18px;
  align-items:center;
  margin-left:auto;
  justify-content:flex-end;
}
.rocchi-index .rocchi-index-controls > button{
  all:unset !important;
  box-sizing:border-box !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
  margin:0 !important;
  padding:0 !important;
  color:#111 !important;
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  text-shadow:none !important;
  filter:none !important;
  opacity:1 !important;
  font:inherit !important;
  line-height:inherit !important;
  cursor:pointer !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  -webkit-tap-highlight-color:transparent !important;
}
.rocchi-index .rocchi-index-controls > button::before,
.rocchi-index .rocchi-index-controls > button::after{
  content:none !important;
  display:none !important;
}
.rocchi-index .rocchi-index-controls > button .rocchi-filter-arrow{
  color:#111 !important;
}
/* Filter: hover only when inactive */
.rocchi-index .rocchi-index-controls > button:not(.is-active-filter):hover,
.rocchi-index .rocchi-index-controls > button:not(.is-active-filter):hover .rocchi-filter-arrow{
  color:#aa9b8d !important;
}
/* Filter: active = brown, even while the mouse remains over it */
.rocchi-index .rocchi-index-controls > button.is-active-filter,
.rocchi-index .rocchi-index-controls > button.is-active-filter:hover,
.rocchi-index .rocchi-index-controls > button.is-active-filter:focus,
.rocchi-index .rocchi-index-controls > button.is-active-filter:focus-visible,
.rocchi-index .rocchi-index-controls > button.is-active-filter:active,
.rocchi-index .rocchi-index-controls > button.is-active-filter .rocchi-filter-arrow{
  color:#aa9b8d !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
}
/* Inactive filter: black in every non-hover state */
.rocchi-index .rocchi-index-controls > button:not(.is-active-filter):focus,
.rocchi-index .rocchi-index-controls > button:not(.is-active-filter):focus-visible,
.rocchi-index .rocchi-index-controls > button:not(.is-active-filter):active,
.rocchi-index .rocchi-index-controls > button:not(.is-active-filter):focus .rocchi-filter-arrow,
.rocchi-index .rocchi-index-controls > button:not(.is-active-filter):focus-visible .rocchi-filter-arrow,
.rocchi-index .rocchi-index-controls > button:not(.is-active-filter):active .rocchi-filter-arrow{
  color:#111 !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
}
/* Project title: black normally, brown only on hover, black immediately after click */
.rocchi-index .rocchi-project-title-button{
  all:unset !important;
  box-sizing:border-box !important;
  display:inline !important;
  margin:0 !important;
  padding:0 !important;
  color:#111 !important;
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  text-shadow:none !important;
  filter:none !important;
  opacity:1 !important;
  font:inherit !important;
  font-weight:500 !important;
  line-height:inherit !important;
  text-align:left !important;
  cursor:pointer !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  -webkit-tap-highlight-color:transparent !important;
}
.rocchi-index .rocchi-project-title-button:hover:not(.rocchi-clicked),
.rocchi-index .rocchi-project-title-button:hover:not(.rocchi-clicked) *{
  color:#aa9b8d !important;
}
.rocchi-index .rocchi-project-title-button.rocchi-clicked,
.rocchi-index .rocchi-project-title-button.rocchi-clicked:hover,
.rocchi-index .rocchi-project-title-button:focus,
.rocchi-index .rocchi-project-title-button:focus-visible,
.rocchi-index .rocchi-project-title-button:active{
  color:#111 !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
}
.rocchi-index .rocchi-project-title-button::before,
.rocchi-index .rocchi-project-title-button::after{
  content:none !important;
  display:none !important;
}


/* V25 — project title follows the exact same interaction model as filters */
.rocchi-index .rocchi-project-title-button,
.rocchi-index .rocchi-project-title-button:focus,
.rocchi-index .rocchi-project-title-button:focus-visible,
.rocchi-index .rocchi-project-title-button:active {
  color:#111 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:0 !important;
}

.rocchi-index .rocchi-project-title-button:hover:not(.is-active-project) {
  color:#aa9b8d !important;
  background:transparent !important;
}

.rocchi-index .rocchi-project-title-button.is-active-project,
.rocchi-index .rocchi-project-title-button.is-active-project:hover,
.rocchi-index .rocchi-project-title-button.is-active-project:focus,
.rocchi-index .rocchi-project-title-button.is-active-project:focus-visible,
.rocchi-index .rocchi-project-title-button.is-active-project:active {
  color:#aa9b8d !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:0 !important;
}

.rocchi-index .rocchi-project-title-button * {
  color:inherit !important;
}

/* v40: smoother gallery motion */
.rocchi-index .rocchi-closed-track,
.rocchi-index .rocchi-open-track{
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  perspective:1000px;
  -webkit-perspective:1000px;
  will-change:transform;
}
.rocchi-index .rocchi-closed-track > *,
.rocchi-index .rocchi-open-track > *{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* V41: reduce media paint flashes during continuous looping */
.rocchi-closed-thumbs img,.rocchi-closed-thumbs video,.rocchi-open-track img,.rocchi-open-track video{backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(0);}
.rocchi-closed-track,.rocchi-open-track{backface-visibility:hidden;-webkit-backface-visibility:hidden;}


/* v43: reduce per-slide layout/paint work */
.rocchi-index .rocchi-closed-track,
.rocchi-index .rocchi-open-track{
  contain: layout paint style;
}
.rocchi-index .rocchi-closed-track > *,
.rocchi-index .rocchi-open-track > *{
  contain: layout paint;
}


/* Website: no underline, independently of theme link styles */
.rocchi-index .rocchi-project-copy a.rocchi-website-link,
.rocchi-index .rocchi-project-copy a.rocchi-website-link:hover,
.rocchi-index .rocchi-project-copy a.rocchi-website-link:focus,
.rocchi-index .rocchi-project-copy a.rocchi-website-link:focus-visible,
.rocchi-index .rocchi-project-copy a.rocchi-website-link:active,
.rocchi-index .rocchi-project-copy a.rocchi-website-link:visited {
  text-decoration: none !important;
  text-decoration-line: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* v56: phone-only layout. Desktop and tablet remain unchanged. */
@media (max-width:600px){
  .rocchi-index-head{
    display:grid !important;
    grid-template-columns:1.25fr 1.1fr 1.35fr .55fr !important;
    grid-template-areas:"project client services date" !important;
    align-items:center !important;
    min-height:32px !important;
    border-bottom:1px solid #111 !important;
    column-gap:10px !important;
    padding:0 !important;
  }
  .rocchi-index-head span:nth-child(1){grid-area:project;}
  .rocchi-index-head span:nth-child(2){grid-area:client;}
  .rocchi-index-head span:nth-child(3){display:none !important;}
  .rocchi-index-head span:nth-child(4){grid-area:services;}
  .rocchi-index-head span:nth-child(5){grid-area:date; text-align:right !important; padding-right:0 !important;}

  .rocchi-project-row{
    display:grid !important;
    grid-template-columns:1.25fr 1.1fr 1.35fr .55fr !important;
    grid-template-areas:
      "title client services year"
      "media media media media" !important;
    align-items:start !important;
    column-gap:10px !important;
    row-gap:10px !important;
    min-height:0 !important;
    padding:14px 0 !important;
  }
  .rocchi-project-title-button{grid-area:title !important; min-width:0;}
  .rocchi-project-client{grid-area:client !important; min-width:0;}
  .rocchi-project-services{grid-area:services !important; min-width:0; padding-right:0 !important;}
  .rocchi-project-year{grid-area:year !important; min-width:0; padding-right:0 !important; text-align:right !important;}
  .rocchi-project-media-button{grid-area:media !important; width:100% !important; padding:0 !important;}

  .rocchi-project-detail{
    display:none;
    grid-template-columns:1fr !important;
    padding:18px 0 24px !important;
  }
  .rocchi-project.is-open>.rocchi-project-detail{
    display:grid !important;
  }
  .rocchi-project-copy{
    padding-right:0 !important;
    margin-bottom:20px !important;
  }
  .rocchi-open-gallery{
    width:100% !important;
    padding-right:0 !important;
    overflow:hidden !important;
  }
  .rocchi-open-track{
    height:var(--rocchi-open-height,420px) !important;
  }
}

/* v57: mobile only — Website below the large gallery.
   Desktop and tablet remain unchanged. */
@media (max-width:600px){
  .rocchi-project-detail > .rocchi-project-copy{
    display:contents !important;
  }

  .rocchi-project-detail > .rocchi-project-copy > p{
    order:1 !important;
    margin:0 0 20px !important;
  }

  .rocchi-project-detail > .rocchi-open-gallery{
    order:2 !important;
  }

  .rocchi-project-detail > .rocchi-project-copy > .rocchi-website-link{
    order:3 !important;
    display:block !important;
    margin:18px 0 0 !important;
  }

  .rocchi-project-detail > .rocchi-project-copy > a:not(.rocchi-website-link){
    order:4 !important;
  }
}

/* v58: phone landscape follows the tablet/desktop layout.
   Portrait phone layout remains unchanged. */
@media (max-width:1000px) and (orientation:landscape){
  /* Phone landscape uses the same two-column/tablet layout. */
  .rocchi-index{
    font-size:12px !important;
    line-height:1.25 !important;
  }

  .rocchi-index-head{
    display:grid !important;
    grid-template-columns:24% 18% 25% 25% 8% !important;
    grid-template-areas:none !important;
    align-items:center !important;
    min-height:34px !important;
    border-bottom:1px solid #111 !important;
    column-gap:0 !important;
    padding:0 !important;
  }
  .rocchi-index-head span:nth-child(1){grid-area:auto;display:block !important;}
  .rocchi-index-head span:nth-child(2){grid-area:auto;display:block !important;}
  .rocchi-index-head span:nth-child(3){display:block !important;}
  .rocchi-index-head span:nth-child(4){grid-area:auto;display:block !important;}
  .rocchi-index-head span:nth-child(5){grid-area:auto;text-align:right !important;padding-right:8px !important;}

  .rocchi-project-row{
    display:grid !important;
    grid-template-columns:24% 18% 25% 25% 8% !important;
    grid-template-areas:none !important;
    align-items:center !important;
    column-gap:0 !important;
    row-gap:0 !important;
    min-height:52px !important;
    padding:0 !important;
  }
  .rocchi-project-title-button{grid-area:auto !important;min-width:0;}
  .rocchi-project-client{grid-area:auto !important;min-width:0;}
  .rocchi-project-media-button{grid-area:auto !important;width:100% !important;padding:10px 20px 10px 0 !important;}
  .rocchi-project-services{grid-area:auto !important;min-width:0;padding-right:16px !important;}
  .rocchi-project-year{grid-area:auto !important;min-width:0;padding-right:8px !important;text-align:right !important;}

  .rocchi-project-detail{
    display:none;
    grid-template-columns:42% 58% !important; /* v102: matches the row's title(24%)+client(18%)=42% so the media/gallery column starts at the same x as the closed thumbnails */
    padding:28px 0 30px !important;
    align-items:start !important;
  }
  .rocchi-project.is-open>.rocchi-project-detail{
    display:grid !important;
  }
  .rocchi-project-copy{
    padding-right:28px !important;
    margin-bottom:0 !important;
    display:block !important;
  }
  .rocchi-project-detail > .rocchi-project-copy > p{
    margin:0 0 22px !important;
  }
  .rocchi-project-detail > .rocchi-open-gallery{
    order:initial !important;
    width:100% !important;
    padding-right:20px !important;
    overflow:hidden !important;
  }
  .rocchi-project-detail > .rocchi-project-copy > .rocchi-website-link,
  .rocchi-project-detail > .rocchi-project-copy > a:not(.rocchi-website-link){
    display:inline !important;
    margin:0 18px 0 0 !important;
  }
}


/* v59: definitive phone-landscape/tablet layout */
@media screen and (max-width:1000px) and (orientation:landscape){
  .rocchi-index-head{display:grid !important;}
  .rocchi-index-head span:nth-child(1),
  .rocchi-index-head span:nth-child(2),
  .rocchi-index-head span:nth-child(3),
  .rocchi-index-head span:nth-child(4),
  .rocchi-index-head span:nth-child(5){display:block !important;}

  .rocchi-project-row{
    display:grid !important;
    grid-template-columns:24% 18% 25% 25% 8% !important;
    grid-template-areas:none !important;
    min-height:52px !important;
    padding:0 !important;
    row-gap:0 !important;
    align-items:center !important;
  }

  .rocchi-project-title-button,
  .rocchi-project-client,
  .rocchi-project-media-button,
  .rocchi-project-services,
  .rocchi-project-year{
    grid-area:auto !important;
  }

  .rocchi-project-media-button{
    width:100% !important;
    padding:10px 20px 10px 0 !important;
  }

  .rocchi-project-detail{
    display:none !important;
    grid-template-columns:42% 58% !important; /* v102: matches this breakpoint's row (24%+18%=42%) */
    grid-template-areas:none !important;
    padding:28px 0 30px !important;
    align-items:start !important;
  }
  .rocchi-project.is-open>.rocchi-project-detail{display:grid !important;}

  .rocchi-project-copy{
    display:block !important;
    grid-area:auto !important;
    padding-right:28px !important;
    margin:0 !important;
  }
  .rocchi-project-copy p{margin:0 0 22px !important;}
  .rocchi-project-copy .rocchi-website-link{
    display:inline-block !important;
    margin:0 18px 0 0 !important;
  }
  .rocchi-open-gallery{
    grid-area:auto !important;
    width:100% !important;
    padding-right:20px !important;
    overflow:hidden !important;
  }
}

/* V60 — phone landscape: use the exact same single-line index/table layout as tablet.
   This targets the short landscape viewport of phones without changing tablet or desktop. */
@media screen and (orientation: landscape) and (max-height: 600px) {
  .rocchi-index {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  /* Column headers: Projet / Client / Médias / Services / Date */
  .rocchi-index .rocchi-index-head {
    display: grid !important;
    grid-template-columns: 24% 18% 25% 25% 8% !important;
    grid-template-areas: none !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #111 !important;
    column-gap: 0 !important;
    box-sizing: border-box !important;
  }

  .rocchi-index .rocchi-index-head > span {
    display: block !important;
    min-width: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .rocchi-index .rocchi-index-head .rocchi-head-date {
    text-align: right !important;
    padding-right: 8px !important;
  }

  /* Every project stays on ONE horizontal line. */
  .rocchi-index .rocchi-project-row {
    display: grid !important;
    grid-template-columns: 24% 18% 25% 25% 8% !important;
    grid-template-areas: none !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 52px !important;
    height: 52px !important;
    padding: 0 !important;
    margin: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid #aaa !important;
  }

  .rocchi-index .rocchi-project-row > * {
    grid-area: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .rocchi-index .rocchi-project-title-button,
  .rocchi-index .rocchi-project-client,
  .rocchi-index .rocchi-project-services,
  .rocchi-index .rocchi-project-year {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  .rocchi-index .rocchi-project-year {
    text-align: right !important;
    padding-right: 8px !important;
  }

  .rocchi-index .rocchi-project-services {
    padding-right: 16px !important;
  }

  .rocchi-index .rocchi-project-media-button {
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px 20px 10px 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .rocchi-index .rocchi-closed-viewport {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding-right: 0 !important;
  }

  /* Open project: same two-column arrangement as tablet. */
  .rocchi-index .rocchi-project-detail {
    display: none;
    grid-template-columns: 39% 61% !important; /* v102: matches this breakpoint's row, redefined below (V63) to 22%+17%=39% */
    grid-template-areas: none !important;
    align-items: start !important;
    width: 100% !important;
    padding: 28px 0 30px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .rocchi-index .rocchi-project.is-open > .rocchi-project-detail {
    display: grid !important;
  }

  .rocchi-index .rocchi-project-copy {
    display: block !important;
    padding-right: 28px !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  .rocchi-index .rocchi-project-copy p {
    margin: 0 0 22px !important;
  }

  .rocchi-index .rocchi-open-gallery {
    width: 100% !important;
    min-width: 0 !important;
    padding-right: 20px !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
}

/* V61 — phone landscape: wrap long text instead of clipping it. */
@media screen and (orientation: landscape) and (max-height: 600px) {
  .rocchi-index .rocchi-project-row {
    height: auto !important;
    min-height: 52px !important;
    align-items: start !important;
    row-gap: 0 !important;
  }

  .rocchi-index .rocchi-project-title-button,
  .rocchi-index .rocchi-project-client,
  .rocchi-index .rocchi-project-services {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    height: auto !important;
    min-height: 52px !important;
    box-sizing: border-box !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }

  .rocchi-index .rocchi-project-year {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    height: auto !important;
    min-height: 52px !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    box-sizing: border-box !important;
  }

  .rocchi-index .rocchi-project-media-button {
    height: auto !important;
    min-height: 52px !important;
  }
}


/* V63 — phone landscape: real wrapping inside the five-column index. */
@media screen and (orientation: landscape) and (max-height: 600px){
  .rocchi-index .rocchi-index-head,
  .rocchi-index .rocchi-project-row{
    grid-template-columns: 22% 17% 24% 29% 8% !important;
  }

  .rocchi-index .rocchi-project-row{
    height:auto !important;
    min-height:52px !important;
    align-items:stretch !important;
    overflow:visible !important;
  }

  .rocchi-index .rocchi-project-row > *{
    min-width:0 !important;
    width:auto !important;
    max-width:none !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }

  .rocchi-index .rocchi-project-title-button,
  .rocchi-index .rocchi-project-client,
  .rocchi-index .rocchi-project-services{
    display:block !important;
    min-width:0 !important;
    width:auto !important;
    height:auto !important;
    min-height:52px !important;
    max-height:none !important;
    padding:15px 12px 15px 0 !important;
    box-sizing:border-box !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
    hyphens:none !important;
    line-height:1.25 !important;
  }

  .rocchi-index .rocchi-project-year{
    display:block !important;
    min-width:0 !important;
    width:auto !important;
    height:auto !important;
    min-height:52px !important;
    padding:15px 8px 15px 0 !important;
    box-sizing:border-box !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
    line-height:1.25 !important;
  }

  .rocchi-index .rocchi-project-media-button{
    min-width:0 !important;
    width:auto !important;
    height:auto !important;
    min-height:52px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  .rocchi-index .rocchi-closed-viewport,
  .rocchi-index .rocchi-closed-thumbs{
    min-width:0 !important;
    max-width:100% !important;
  }
}


/* V64 — phone landscape: keep index text on one line and scroll overflowing values. */
@media screen and (orientation: landscape) and (max-height: 600px){
  .rocchi-index .rocchi-project-title-button,
  .rocchi-index .rocchi-project-client,
  .rocchi-index .rocchi-project-services{
    display:block !important;
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:clip !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    padding-right:12px !important;
    box-sizing:border-box !important;
  }

  .rocchi-index .rocchi-marquee-inner{
    display:inline-block !important;
    width:max-content !important;
    max-width:none !important;
    white-space:nowrap !important;
    transform:translateX(0);
  }

  .rocchi-index .rocchi-marquee-active .rocchi-marquee-inner{
    animation-name:rocchiLandscapeMarquee;
    animation-duration:8s;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
    animation-delay:1s;
    animation-fill-mode:both;
  }

  @keyframes rocchiLandscapeMarquee{
    0%,12%{transform:translateX(0);}
    48%,64%{transform:translateX(calc(-1 * var(--rocchi-marquee-distance, 0px)));}
    100%{transform:translateX(0);}
  }
}

/* v98: French Voir plus toggle with multiline extra text */
.rocchi-view-more-toggle{
  border:0 !important;
  background:transparent !important;
  color:#111 !important;
  padding:0 20px 0 0 !important;
  margin:0 18px 0 0 !important;
  font:inherit !important;
  line-height:inherit !important;
  cursor:pointer !important;
  text-decoration:none !important;
  -webkit-appearance:none !important;
  appearance:none !important;
}
.rocchi-view-more-toggle:hover{
  color:#aa9b8d !important;
}
.rocchi-view-more-toggle:focus,
.rocchi-view-more-toggle:active{
  color:#111 !important;
  outline:none !important;
}
.rocchi-view-more-text{
  margin:0 0 22px 0 !important;
  white-space:pre-line !important;
  line-height:inherit !important;
}
.rocchi-view-more-text[hidden]{display:none !important;}


/* v99: View more and Website are always adjacent and share the same appearance. */
.rocchi-index .rocchi-project-copy .rocchi-view-more-toggle,
.rocchi-index .rocchi-project-copy .rocchi-website-link{
  display:inline-block !important;
  vertical-align:baseline !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  color:#111 !important;
  font:inherit !important;
  line-height:inherit !important;
  text-decoration:none !important;
  -webkit-text-decoration:none !important;
  border:0 !important;
  border-bottom:0 !important;
  box-shadow:none !important;
  background:none !important;
  background-image:none !important;
}
.rocchi-index .rocchi-project-copy .rocchi-view-more-toggle{
  padding:0 20px 0 0 !important;
  margin-right:18px !important;
  cursor:pointer !important;
  -webkit-appearance:none !important;
  appearance:none !important;
}
.rocchi-index .rocchi-project-copy .rocchi-website-link{
  padding:0 !important;
  margin-right:18px !important;
  cursor:pointer !important;
}
.rocchi-index .rocchi-project-copy .rocchi-view-more-toggle:hover,
.rocchi-index .rocchi-project-copy .rocchi-website-link:hover{
  color:#aa9b8d !important;
}
.rocchi-index .rocchi-project-copy .rocchi-view-more-toggle:focus,
.rocchi-index .rocchi-project-copy .rocchi-view-more-toggle:focus-visible,
.rocchi-index .rocchi-project-copy .rocchi-view-more-toggle:active,
.rocchi-index .rocchi-project-copy .rocchi-website-link:focus,
.rocchi-index .rocchi-project-copy .rocchi-website-link:focus-visible,
.rocchi-index .rocchi-project-copy .rocchi-website-link:active{
  color:#111 !important;
  outline:none !important;
}
.rocchi-index .rocchi-project-copy .rocchi-view-more-text{
  display:block !important;
  width:100% !important;
  clear:both !important;
  margin:22px 0 22px 0 !important;
  white-space:pre-line !important;
}
.rocchi-index .rocchi-project-copy .rocchi-view-more-text[hidden]{display:none !important;}

/* v100: Website + Voir plus are one fixed inline action row on every format. */
.rocchi-index .rocchi-project-actions{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:baseline !important;
  justify-content:flex-start !important;
  width:max-content !important;
  max-width:100% !important;
  gap:0 !important;
  margin:0 !important;
  padding:0 !important;
}
.rocchi-index .rocchi-project-actions .rocchi-view-more-toggle,
.rocchi-index .rocchi-project-actions .rocchi-website-link{
  display:inline-block !important;
  flex:0 0 auto !important;
  width:auto !important;
  white-space:nowrap !important;
  vertical-align:baseline !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  color:#111 !important;
  font:inherit !important;
  line-height:inherit !important;
  text-decoration:none !important;
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  background-image:none !important;
  outline:none !important;
}
.rocchi-index .rocchi-project-actions .rocchi-view-more-toggle{
  padding:0 20px 0 0 !important;
  margin-right:18px !important;
  cursor:pointer !important;
  -webkit-appearance:none !important;
  appearance:none !important;
}
.rocchi-index .rocchi-project-actions .rocchi-website-link{
  padding:0 !important;
  margin-right:18px !important;
  cursor:pointer !important;
}
.rocchi-index .rocchi-project-actions .rocchi-view-more-toggle:hover,
.rocchi-index .rocchi-project-actions .rocchi-website-link:hover{
  color:#aa9b8d !important;
}
.rocchi-index .rocchi-project-actions .rocchi-view-more-toggle:focus,
.rocchi-index .rocchi-project-actions .rocchi-view-more-toggle:focus-visible,
.rocchi-index .rocchi-project-actions .rocchi-view-more-toggle:active,
.rocchi-index .rocchi-project-actions .rocchi-website-link:focus,
.rocchi-index .rocchi-project-actions .rocchi-website-link:focus-visible,
.rocchi-index .rocchi-project-actions .rocchi-website-link:active{
  color:#111 !important;
  outline:none !important;
}
.rocchi-index .rocchi-project-copy .rocchi-view-more-text{
  display:block !important;
  width:100% !important;
  clear:both !important;
  margin:22px 0 22px 0 !important;
  white-space:pre-line !important;
}
.rocchi-index .rocchi-project-copy .rocchi-view-more-text[hidden]{display:none !important;}
@media (max-width:600px){
  .rocchi-index .rocchi-project-actions{
    order:3 !important;
    width:max-content !important;
    max-width:100% !important;
    flex-wrap:nowrap !important;
  }
}


/* V101 — final View more / Website behavior and spacing. */
.rocchi-index .rocchi-project-actions{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:baseline !important;
  gap:0 !important;
}
.rocchi-index .rocchi-project-actions .rocchi-view-more-toggle,
.rocchi-index .rocchi-project-actions .rocchi-website-link{
  color:#111 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  text-decoration:none !important;
  outline:none !important;
  font:inherit !important;
  line-height:inherit !important;
  cursor:pointer !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  -webkit-tap-highlight-color:transparent !important; /* v102: same as the title button and sort buttons — removes the grey tap flash on mobile */
}
.rocchi-index .rocchi-project-actions .rocchi-view-more-toggle:active,
.rocchi-index .rocchi-project-actions .rocchi-website-link:active{
  background:transparent !important;
  opacity:1 !important;
}
.rocchi-index .rocchi-project-actions .rocchi-view-more-toggle{
  padding:0 20px 0 0 !important;
  margin:0 18px 0 0 !important;
}
.rocchi-index .rocchi-project-actions .rocchi-website-link{
  padding:0 !important;
  margin:0 !important;
}
.rocchi-index .rocchi-project-actions .rocchi-view-more-toggle:hover,
.rocchi-index .rocchi-project-actions .rocchi-website-link:hover{
  color:#aa9b8d !important;
}
.rocchi-index .rocchi-project-actions .rocchi-view-more-toggle:focus,
.rocchi-index .rocchi-project-actions .rocchi-view-more-toggle:focus-visible,
.rocchi-index .rocchi-project-actions .rocchi-view-more-toggle:active,
.rocchi-index .rocchi-project-actions .rocchi-website-link:focus,
.rocchi-index .rocchi-project-actions .rocchi-website-link:focus-visible,
.rocchi-index .rocchi-project-actions .rocchi-website-link:active{
  color:#111 !important;
  outline:none !important;
}
.rocchi-index .rocchi-project-copy .rocchi-view-more-text{
  display:block !important;
  clear:both !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  white-space:pre-line !important;
  max-height:0 !important;
  opacity:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
}
/* v102: the text stays permanently in the DOM/flex tree (fixed order:4 from
   first paint) and is only collapsed visually. Previously we toggled the
   native `hidden` attribute, which removes/re-adds the element from the flex
   layout tree — on some phones (reported on Chrome for Android) this caused
   the browser to momentarily misplace it before re-applying its `order`,
   making it appear above the gallery instead of below the actions row. */
.rocchi-index .rocchi-project-copy .rocchi-view-more-text.is-visible{
  margin:10px 0 22px !important;
  max-height:none !important;
  opacity:1 !important;
  overflow:visible !important;
  pointer-events:auto !important;
}
.rocchi-index .rocchi-project-copy .rocchi-view-more-text[hidden]{display:none !important;}

/* v112: le column-gap décalait le point de départ de la 2e colonne de la
   grille (donc la grande galerie) vers la droite par rapport à la petite
   galerie, qui n'a pas ce gap — d'où l'impression de padding à gauche.
   On passe le gap à 0 (départ de colonne identique à la petite galerie)
   et on reporte l'espacement visuel en padding-right sur le texte, ce qui
   ne déplace pas la galerie. */
.rocchi-index .rocchi-project-detail{
  column-gap:0 !important;
}
.rocchi-index .rocchi-project-copy{
  padding-right:38px !important;
}
@media (max-width:600px){
  .rocchi-index .rocchi-project-detail{
    row-gap:0 !important;
    column-gap:0 !important;
  }
  .rocchi-index .rocchi-project-detail > .rocchi-open-gallery{
    margin-bottom:10px !important;
  }
  .rocchi-index .rocchi-project-detail > .rocchi-project-copy > .rocchi-project-actions{
    margin-top:10px !important;
  }
}

/* v112: règle finale et sans ambiguïté — 10px entre l'action row (Voir
   plus / Website) et le texte qui se déplie en dessous. */
.rocchi-index .rocchi-project-copy .rocchi-view-more-text.is-visible{
  margin-top:10px !important;
}

/* V111 — mobile vertical order only: Description → large gallery → actions → additional text. */
@media screen and (max-width:600px) and (orientation:portrait){
  .rocchi-index .rocchi-project-detail{
    display:none;
    flex-direction:column !important;
    padding:20px 0 30px !important;
    border-bottom:1px solid #111 !important;
  }
  .rocchi-index .rocchi-project.is-open > .rocchi-project-detail{
    display:flex !important;
  }
  .rocchi-index .rocchi-project-detail > .rocchi-project-copy{
    display:contents !important;
  }
  .rocchi-index .rocchi-project-detail > .rocchi-project-copy > p{
    order:1 !important;
    width:100% !important;
    margin:0 0 22px !important;
  }
  .rocchi-index .rocchi-project-detail > .rocchi-open-gallery{
    order:2 !important;
    width:100% !important;
    margin:0 0 10px !important;
  }
  .rocchi-index .rocchi-project-detail > .rocchi-project-copy > .rocchi-project-actions{
    order:3 !important;
    margin:0 !important;
  }
  .rocchi-index .rocchi-project-detail > .rocchi-project-copy > .rocchi-view-more-text{
    order:4 !important;
    width:100% !important;
    margin:10px 0 22px !important;
    padding:0 !important;
    white-space:pre-line !important;
  }
}

/* v114 — fix 1/4: gallery images/videos must never exceed the height set in
   the block settings. Themes/Sections commonly ship a generic
   `... img{height:auto}`-type rule (via the Group/Section block's own
   styles) whose selector can be more specific than our old un-!important
   height rule, so the image displayed at its full native size instead of
   the configured thumbnail/gallery height. Forcing !important here makes
   our height win in every context, including inside a Section. */
.rocchi-index .rocchi-closed-thumbs img,
.rocchi-index .rocchi-closed-thumbs video,
.rocchi-index .rocchi-closed-track img,
.rocchi-index .rocchi-closed-track video{
  height:var(--rocchi-closed-height,35px) !important;
  width:auto !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  display:block !important;
}
.rocchi-index .rocchi-open-item{
  height:var(--rocchi-open-height,420px) !important;
  width:auto !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  display:block !important;
}

/* v114 — fix 2/4: +10px de padding supplémentaire entre la rangée
   "Voir plus / Site Web" et le texte qui se déplie en dessous
   (10px -> 20px). Placée en toute fin de fichier pour être certaine
   de l'emporter sur les anciennes règles v102/v111/v112 de même
   spécificité. */
.rocchi-index .rocchi-project-copy .rocchi-view-more-text.is-visible{
  margin-top:20px !important;
}
@media screen and (max-width:600px) and (orientation:portrait){
  .rocchi-index .rocchi-project-detail > .rocchi-project-copy > .rocchi-view-more-text{
    margin-top:20px !important;
  }
}

/* v114 — fix 3/4: quand le bloc est placé dans une Section (Group), WordPress
   ajoute automatiquement un espacement vertical ("blockGap") au-dessus et
   en dessous des blocs enfants. Ce espacement est appliqué en marge sur le
   bloc lui-même ; on la neutralise explicitement ici. (Si la Section utilise
   un layout flex/grid avec un vrai "gap" plutôt qu'un espacement de flux,
   ce gap se règle uniquement depuis les réglages de la Section elle-même,
   pas depuis un bloc enfant.) */
.rocchi-index{
  margin-top:0 !important;
  margin-bottom:0 !important;
  margin-block-start:0 !important;
  margin-block-end:0 !important;
}

/* v115: sur le thème Kadence, le bloc est placé dans une colonne
   `.kt-inside-inner-col` (Row Layout Kadence) qui porte son propre
   padding vertical réglé dans les paramètres de la colonne — ce n'est
   pas une marge de "Section" WordPress, donc le fix margin ci-dessus
   ne suffisait pas. On neutralise ce padding uniquement sur la
   colonne qui contient directement notre bloc, sans toucher aux
   autres colonnes Kadence du site. */
.kt-inside-inner-col:has(> .rocchi-index){
  padding-top:0 !important;
  padding-bottom:0 !important;
}

/* v114 — fix 4/4: bouton "Website" -> "Site Web" + flèche diagonale. */
.rocchi-index .rocchi-website-link{
  display:inline-flex !important;
  align-items:baseline !important;
  gap:4px !important;
}
.rocchi-index .rocchi-website-link .rocchi-website-arrow{
  display:inline-block !important;
}
.rocchi-editor-add-project{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid #ddd;
}


/* v117 — force the gallery item itself to keep its intrinsic ratio.
   Some WordPress/Kadence rules can impose min-width:100% on media.
   That stretches a correctly sized image into a full-width black rectangle. */
.rocchi-index .rocchi-open-track > .rocchi-open-item,
.rocchi-index .rocchi-closed-track > img,
.rocchi-index .rocchi-closed-track > video{
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;
  flex-grow:0 !important;
  flex-shrink:0 !important;
  flex-basis:auto !important;
  aspect-ratio:auto !important;
}


/* v118 — WordPress can rewrite an image into a <picture> wrapper. The
   gallery sizing must therefore apply to the picture AND its inner img.
   Without this, the picture becomes a full-width flex item while the img
   keeps its theme-generated dimensions, producing the large solid rectangle. */
.rocchi-index .rocchi-open-track > picture.rocchi-open-item{
  height:var(--rocchi-open-height,420px) !important;
  width:auto !important;
  max-width:none !important;
  max-height:none !important;
  min-width:0 !important;
  min-height:0 !important;
  flex:0 0 auto !important;
  flex-grow:0 !important;
  flex-shrink:0 !important;
  aspect-ratio:auto !important;
  display:block !important;
}
.rocchi-index .rocchi-open-track > picture.rocchi-open-item > img{
  height:100% !important;
  width:auto !important;
  max-width:none !important;
  max-height:none !important;
  min-width:0 !important;
  min-height:0 !important;
  display:block !important;
  object-fit:contain !important;
  aspect-ratio:auto !important;
}

/* v119 — editor only: remove the vertical spacing around the block preview.
   The 20px top margin on .rocchi-editor-preview and Gutenberg/Kadence
   block spacing can otherwise leave a visible gap above and below the table. */
.editor-styles-wrapper .rocchi-editor-wrap,
.block-editor-block-list__layout .rocchi-editor-wrap{
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.editor-styles-wrapper .rocchi-editor-preview,
.block-editor-block-list__layout .rocchi-editor-preview{
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.editor-styles-wrapper .wp-block-rocchi-project-index-v50,
.block-editor-block-list__layout .wp-block-rocchi-project-index-v50{
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}

/* v120 — filters are integrated directly into the Service and Date header cells. */
.rocchi-index .rocchi-head-service,
.rocchi-index .rocchi-head-date{
  min-width:0 !important;
}
.rocchi-index .rocchi-head-service{
  text-align:left !important;
  padding-right:16px !important;
}
.rocchi-index .rocchi-head-date{
  text-align:right !important;
  padding-right:8px !important;
}
.rocchi-index .rocchi-head-service .rocchi-filter-button,
.rocchi-index .rocchi-head-date .rocchi-filter-button{
  all:unset !important;
  box-sizing:border-box !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:4px !important;
  margin:0 !important;
  padding:0 !important;
  color:#111 !important;
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  font:inherit !important;
  line-height:inherit !important;
  cursor:pointer !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  -webkit-tap-highlight-color:transparent !important;
}
.rocchi-index .rocchi-head-date .rocchi-filter-button{
  margin-left:auto !important;
}
.rocchi-index .rocchi-filter-button::before,
.rocchi-index .rocchi-filter-button::after{
  content:none !important;
  display:none !important;
}
.rocchi-index .rocchi-filter-button .rocchi-filter-arrow{
  color:#111 !important;
}
.rocchi-index .rocchi-filter-button:not(.is-active-filter):hover,
.rocchi-index .rocchi-filter-button:not(.is-active-filter):hover .rocchi-filter-arrow{
  color:#aa9b8d !important;
}
.rocchi-index .rocchi-filter-button.is-active-filter,
.rocchi-index .rocchi-filter-button.is-active-filter:hover,
.rocchi-index .rocchi-filter-button.is-active-filter:focus,
.rocchi-index .rocchi-filter-button.is-active-filter:focus-visible,
.rocchi-index .rocchi-filter-button.is-active-filter:active,
.rocchi-index .rocchi-filter-button.is-active-filter .rocchi-filter-arrow{
  color:#aa9b8d !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
}
.rocchi-index .rocchi-filter-button:not(.is-active-filter):focus,
.rocchi-index .rocchi-filter-button:not(.is-active-filter):focus-visible,
.rocchi-index .rocchi-filter-button:not(.is-active-filter):active,
.rocchi-index .rocchi-filter-button:not(.is-active-filter):focus .rocchi-filter-arrow,
.rocchi-index .rocchi-filter-button:not(.is-active-filter):focus-visible .rocchi-filter-arrow,
.rocchi-index .rocchi-filter-button:not(.is-active-filter):active .rocchi-filter-arrow{
  color:#111 !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
}

/* v120 — the website label has no external-link arrow. */
.rocchi-index .rocchi-website-link .rocchi-website-arrow{
  display:none !important;
}

/* Keep the filter buttons aligned inside their cells on the compact landscape layout. */
@media screen and (orientation:landscape) and (max-height:600px){
  .rocchi-index .rocchi-head-service{
    padding-right:16px !important;
  }
  .rocchi-index .rocchi-head-date{
    padding-right:8px !important;
  }
}

/* V121 — configurable maximum height for the large gallery on phones.
   The desktop gallery height remains unchanged. On portrait phones, the
   gallery uses the smaller of the normal height and the mobile maximum. */
@media screen and (max-width:600px){
  .rocchi-index .rocchi-open-track{
    height:min(var(--rocchi-open-height,420px),var(--rocchi-mobile-open-max-height,420px)) !important;
  }
  .rocchi-index .rocchi-open-gallery{
    max-height:min(var(--rocchi-open-height,420px),var(--rocchi-mobile-open-max-height,420px)) !important;
  }
}


/* v123 — plus de défilement automatique : petites et grandes galeries sont des bandes qu'on fait glisser
   (doigt sur tablette/mobile, geste du trackpad, ou glisser-déposer à la souris). */
.rocchi-index .rocchi-closed-viewport,
.rocchi-index .rocchi-index-list .rocchi-project .rocchi-closed-viewport,
.rocchi-index .rocchi-open-gallery,
.rocchi-index .rocchi-index-list .rocchi-project .rocchi-project-detail .rocchi-open-gallery{
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  -ms-overflow-style:none;
  touch-action:pan-x pan-y;
  cursor:grab;
}
.rocchi-index .rocchi-closed-viewport::-webkit-scrollbar,
.rocchi-index .rocchi-open-gallery::-webkit-scrollbar{display:none;width:0;height:0}
.rocchi-index .rocchi-closed-viewport.is-dragging,
.rocchi-index .rocchi-open-gallery.is-dragging{cursor:grabbing}
.rocchi-index .rocchi-project-media-button,
.rocchi-index .rocchi-open-gallery{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.rocchi-index .rocchi-closed-track,
.rocchi-index .rocchi-open-track{transform:none !important;transition:none !important}
.rocchi-index .rocchi-closed-track img,
.rocchi-index .rocchi-closed-track video,
.rocchi-index .rocchi-open-track img,
.rocchi-index .rocchi-open-track video{-webkit-user-drag:none;user-drag:none}


/* v123.1 — pistes : le "contain: paint" des anciennes versions rognait tout ce qui dépassait de la piste
   (seul le premier média restait visible). Dans une bande qu'on fait glisser, la piste doit simplement
   avoir la largeur de tous ses médias, sur une seule ligne. */
.rocchi-index .rocchi-closed-track,
.rocchi-index .rocchi-open-track{
  contain:none !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  width:max-content !important;
  min-width:0 !important;
  max-width:none !important;
}
.rocchi-index .rocchi-closed-track > *,
.rocchi-index .rocchi-open-track > *{
  contain:none !important;
  flex-shrink:0 !important;
}