/*
 * Component styles for the theme. Loaded AFTER tokens.css and base.css
 * (those provide the design tokens and global resets/utilities).
 */

/* Header touch + scroll defaults — kept here so the rest of the header
   block stays grouped together. */
.burger_menu_icon, .close_menu_icon {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
}

.dropdown_menu {
  -webkit-overflow-scrolling: touch;
}

.giant404 {
    font-size: 100px;
    font-weight: bold;
    text-align: center;
    margin-top: 100px;
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main_header{
    position: relative;
}
.main_header ul{
    list-style: none;
}
.top_header{
    position: relative;
    padding: 20px;
    background-color: #fff;
    border-bottom: 2px solid #000; 
    z-index: 999;
}
.div_header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.burger_menu_icon{
    display: block;
}
.close_menu_icon{
    display: none;
}
.burger_menu_icon, .close_menu_icon{
    border-radius: 50%;
    cursor: pointer;
}
.main_header.menu_open .burger_menu_icon{
    display: none;
}
.main_header.menu_open .close_menu_icon{
    display: block;
}
.header_title, .header_lang a{
    font-size: 24px;
    font-weight: 600;
    color:black;
}
.header_title{
    letter-spacing: 12px;
}

.main_header .div_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative; 
}

/* Header layout — pin the burger absolutely to the left and center the
   title absolutely at the viewport's horizontal midpoint. This is robust
   at every viewport (replaces the old `1fr auto 1fr` grid, which drifted
   left because the burger's intrinsic width forced the left 1fr column
   wider than the empty right 1fr column). */
.main_header .top_header { position: relative; }

.main_header .div_header {
  display: block;
  grid-template-columns: none;
  position: static;
  min-height: 75px;          /* matches the burger SVG at desktop */
}

.main_header .div_header > :first-child {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  justify-self: auto;
  z-index: 2;
}

.main_header .div_header > :nth-child(2) {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}
.main_header .div_header > :nth-child(2) a { pointer-events: auto; }

.main_header .div_header > :last-child:not(:first-child):not(:nth-child(2)) {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  justify-self: auto;
}

.main_header .header_title {
  position: static;
  transform: none;
  white-space: nowrap;
}

.header_title span {
    font-weight:600;
}

.menu-button {
  grid-column-gap: .1875em;
  grid-row-gap: .1875em;
  flex-flow: column;
  padding: 1em;
  font-size: 1em;
  display: flex;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  border: none;
}

.menu-button-line {
  background-color: #e7dddb;
  width: 2em;
  height: .1875em;
}

.dropdown_menu {
    height:0;
}

.dropdown_menu ul {
  position: absolute;
  width: 100%;
  top: 100%;
  left: 0;
  height: 0;
  opacity: 1;              /* start hidden; JS animates to 1 */
  z-index: 999;
  background-color: #fff;
}

.dropdown_menu li {
  border-bottom: 2px solid #000;
  transition: all 0.5s;
  opacity: 0;
}
.dropdown_menu li:hover{
    background-color: #050505;
}
.dropdown_menu li a{
    color: #000;
    font-size: 72px;
    font-weight: 500;
    line-height: 1.5;
    display: block;
    margin-left:19vw;
    padding: 0 20px;
    position: relative;
    white-space: nowrap;        /* no wrapping */
    overflow: hidden;           /* hide overflow */
    text-overflow: ellipsis; 
}
.dropdown_menu li a:before{
    content: '';
    position: absolute;
    left: -100px;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
}

/* base link */
.dropdown_menu li a {
  position: relative;
}

/* circle */
.dropdown_menu li a::before {
  content: "";
  position: absolute;
  left: -6.5rem;                /* tweak if you want it closer/further */
  top: 50%;
  transform: translateY(-50%);
  width: 65px;
  height: 65px;
  border-radius: 50%;
  border: 2px solid #fff;       /* outline so you see it even before hover */
  background: transparent;
  opacity: 0;                   /* hidden by default */
  transition:
    opacity .3s ease,
    background-color .3s ease;
  pointer-events: none;
}

/* row hover */
.dropdown_menu li:hover {
  background-color: #050505;
}

/* circle + text on hover */
.dropdown_menu li:hover a {
  color: #fff;
  overflow: visible;
}

.dropdown_menu li:hover a::before {
  opacity: 1;
  background-color: #fff;
}

/* `.is-tapped` mirrors the hover state — these rules are kept in a separate
   block (without :hover in the selector) so the touch-device hover-stripping
   pass in main.js leaves them intact. The class is added by JS when a menu
   item is tapped, held for the duration of the animation, then the link
   navigates. */
.dropdown_menu li.is-tapped {
  background-color: #050505;
}
.dropdown_menu li.is-tapped a {
  color: #fff;
  overflow: visible;
}
.dropdown_menu li.is-tapped a::before {
  opacity: 1;
  background-color: #fff;
}


.dropdown_menu .animated_menu > li {
  height: calc((100vh - var(--header-offset, 0px)) / var(--menu-rows));
  display: flex;
  align-items: center;
}

.dropdown_menu .animated_menu > li > a {
  display: block;
  width: 100%;
  line-height: 1; 
    overflow: visible;
  font-size: clamp(
    20px,
    calc(
      (100vh - 100px - var(--header-offset, 0px)) / var(--menu-rows) * 0.72
    ),
    14vw
  );
}

@media (max-width: 1280px){
    .dropdown_menu .animated_menu > li > a {
        font-size: 48px;
        margin-left: 60px;
    }
    .dropdown_menu .animated_menu > li {
        padding-top:0!important;
        height: calc((100vh - var(--header-offset)) / 7);
    }
}
@media (max-width: 960px) {
    .dropdown_menu .animated_menu > li > a {
        margin-left: 0;
        font-size: 40px;
        text-wrap: auto;
    }
}
@media (max-width: 880px) {
    .dropdown_menu .animated_menu > li > a {
        margin-left: 0;
        font-size: 32px;
        text-wrap: auto;
    }
}

@media (max-width: 640px) {
    .dropdown_menu .animated_menu > li > a {
        font-size: 34px;
    }

}

.dropdown_menu li:hover a{
    color: #fff;
}
 
.section_box_container{
    padding-left:20px;
    padding-right:20px;
}

.section_box {
    max-width: 1700px;
    margin: 0 auto;
    padding: 30px 30px 40px;
    overflow: hidden;
}
.section_box span{
    font-size: 22px;
}
.section_box .left_text{
    font-size: 44px;
    margin: 20px 0 0;
    max-width: 1040px;
}
.section_box > div{
    margin-top: 30px;
    border-radius: var(--radius-md);
} 

.section_box span {
    font-size: 44px;
}

.section_box .content {
    display: flex;
    flex-direction: row;
}

.section_box .content.content_vertical {
    display: flex;
    flex-direction: column;
}

.section_box .content .content_inner:first-child {
    width: 34%;
    display: flex;
    flex-direction: column;
}

.section_box .content .content_inner:nth-child(2) {
    width: 66%;
}

.sec_banner_propos{
    /* unified with .page-banner-img (Nous joindre as reference) */
    padding: 30px 20px;
}

.div_banner_propos{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: var(--radius-md);
    /* Match Nous joindre's .div_banner_nous_joind min-height. */
    min-height: 570px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.div_banner_propos h1,
.page_header_wrapper h1 {
    color: #fff;
    font-size: 88px;
    font-weight: 500;
}


.desc-line  { overflow: hidden; }      /* SplitText wraps each line with this class */
.desc-line > * { display: inline-block; will-change: transform; }

.main_header {
  position: fixed;
  top: 0; left: 0; right: 0;
  transform: translateY(-100%);
  transition: transform 0.45s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
  z-index: 1000; /* above content */
}

.main_header.is-visible,
.main_header.menu_open {
  transform: translateY(0);
}

.admin-bar .main_header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .main_header { top: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .main_header { transition: none; }
}

/* Generic layout */
:where([data-reveal-scope]) { position: relative; border-radius: 16px; overflow: hidden; }
:where([data-reveal-scope] > :not(.bg)) { position: relative; z-index: 1; }

/* Default background via CSS var (fallback) */
:where([data-reveal-scope]) { --section-bg: var(--moba_blue, #1e5bd6); }

:where([data-reveal-scope] > .bg) {
  position: absolute;
  inset: 0;
  z-index: 0;

  /* image behavior */
  background-image: var(--section-bg-image, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  /* color fallback kept separate so it doesn't reset the others */
  background-color: var(--section-bg, transparent);
}

/* Palette mapping */
:where([data-bg="blue"])       { --section-bg: var(--moba_blue); }
:where([data-bg="grey"])       { --section-bg: var(--moba_grey); }

/* Optional: gradients too */
:where([data-bg="gradient-1"]) { --section-bg: linear-gradient(180deg,#cfe3ff, #1e5bd6); }

.section_box_container .div_temoig_home {
  position: relative;
  overflow: hidden;
}

.section_box_container .div_temoig_home .bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transform-origin: center;
  will-change: transform, opacity;
}

.section_box_container .slideup_reveal {
  display: inline-block;
  will-change: transform, opacity;
}

.section_box_container .testimonial_card {
  will-change: transform, opacity;
}

.sec_footer{
    background: #000;
    padding: 50px 20px 30px;
    color: #fff;
}

.footer_content{
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 30px;
}

.sec_footer .footer_logo img {
  filter: brightness(0) invert(1);
}

.sec_footer .footer_logo img.no-invert {
  filter: none;
}

.footer_content > div{
    flex: 1;
}
.div_footer_menu p{
    font-size: 16px;
    margin-bottom: 20px;
}
.footer_content ul li{
    line-height: 2;
}
.footer_content ul li a{
    color: #fff;
    font-size: 16px;
}
.footer_content ul li a:hover{
    color:  var(--moba_orange);
}
.footer_content .footer_logo{
    display: flex;
    align-items: flex-end;
    /* Fixed box height drives the logo size. Sized so both logos (Moba ~2.64
       and Movia ~2.51 aspect) fit their ~300–340px columns without their
       width hitting a cap — that's what guarantees equal height, and so
       identical top AND bottom edges across the two logos. */
    height: 110px;
    margin-bottom: 40px;
}
.footer_content .footer_logo img{
    /* Size by HEIGHT (not width): both logos fill the box height exactly, so
       their tops and bottoms line up regardless of differing aspect ratios.
       object-fit/position keep things graceful if a narrow column ever caps
       the width (bottom-left anchored letterbox instead of a stretch). */
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: left bottom;
}
.footer_copyright{
    margin-top: 30px;
}
.footer_copyright p{
    font-size: 15px;
    font-weight: 600;
}
@media (max-width: 640px) {
    .footer_copyright p {
        font-size: 12px;
    }
}

.div_moba_logo{
    position: relative;
}
.div_moba_logo:after{
    content: '';
    position: absolute;
    right: 5%;
    top: 0;
    height: 100%;
    border-right: 1px solid #fff; 

}
.div_moba_logo img{
    /* Width is driven by the height rule now; cap only at the column width so
       the differing per-logo max-widths can't make the two heights unequal. */
    max-width: 100%;
}
.div_movia_logo{
    padding-left: 40px;
}
.div_movia_logo img{
    max-width: 100%;
}

.nos_projets_page {
    background: rgba(131,220,255,0.5);
}
.nos_projets_title{
    padding: 50px 20px 20px;
    display: flex;
    justify-content: center;
}
.nos_projets_title h1{
    font-size: 88px;
    font-weight: 500;
    text-align: center;
}

.page-banner{
    /* Equal vertical padding so the title sits in the vertical middle
       of the banner without growing the section's height. */
    padding: 45px 20px;
    border-bottom: 2px solid black;
}
.page-banner h1{
    font-size: 88px;
    font-weight: 500;
    text-align: center;
}

/* En cours / years badge on the single project page. */
.right_fiche_content .project-status {
  display: inline-block;
  padding: 4px 14px;
  margin: 8px 0 14px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}
.right_fiche_content .project-status--current {
  background-color: var(--moba_orange);
  color: #fff;
}
.right_fiche_content .project-status--past {
  background-color: var(--moba_grey);
  color: #000;
}

/* "Retour à la liste des projets" link at the bottom-left of single-project
   templates. Arrow icon + 3-line label, styled to match the site's text
   weight + interaction (subtle slide of the arrow on hover). */
.sec_back_link {
    padding: 60px 40px 80px;
}
.sec_back_link .fixed_container {
    display: flex;
    justify-content: flex-start;
}
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    color: #000;
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.25;
}
.back-link__arrow {
    flex-shrink: 0;
    transition: transform .25s ease;
}
.back-link:hover .back-link__arrow {
    transform: translateX(-6px);
}
.back-link__label {
    display: block;
    text-align: left;
}
@media (max-width: 640px) {
    .sec_back_link {
        padding: 40px 20px 60px;
    }
    .back-link {
        font-size: 16px;
        gap: 12px;
    }
    .back-link__arrow {
        width: 48px;
        height: 24px;
    }
}

.projet_tags{
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}
.projet_tags ul{
    display: flex;
    flex-wrap: wrap;
    column-gap: 15px;
    row-gap: 5px;
}
.projet_tags a{
    font-size: 16px;
}

.page-banner-img{
    padding: 30px 20px;
    padding-top:30px;
    height:575px;
}
.div_fiche_thum img,
.fiche_bottom_img__item img
{
    width: 100%;
    border-radius: var(--radius-md);
    height:575px;
    object-fit: cover;
}

.right_fiche_content {
    padding-top:30px;
    padding-bottom: 30px;
}

.right_fiche_content h2{
    font-size: 44px;
    margin: 50px 0;
}

.right_fiche_content p{
    font-size: 22px;
    max-width: 570px;
    line-height: 1.4;
    font-weight: 100;
}
/* Make hyperlinks in the project intro visible — the global `a` rule strips
   underlines, so a link would otherwise look like plain body text. */
.right_fiche_content p a{
    color: var(--moba_orange);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.right_fiche_content p a:hover{
    text-decoration: none;
}

.left_fiche_content {
    container-type: inline-size;
}

.left_fiche_content h2{
    margin: 50px 0;
    line-height: 1.4;

    font-size: clamp(20px, 6cqw, 44px); 
    text-wrap: balance;     
    overflow-wrap: anywhere;
}
.left_fiche_content p{
    font-size: 22px;
}

.sec_fiche_content{
    padding: 30px 20px;
    padding-top:0;
}

.sec_fiche_bottom_img{
    padding: 30px 20px 50px;
}

.nos_campagnes_page .grid_projets_boxes{
    margin-top: 0;
}

/* Sponsor block under the accordions on the single-event page
   ("Possible grâce au financement" label + sponsor logo). */
.event_sponsor {
    padding-top: 40px;
}
.event_sponsor__label {
    margin: 0 0 16px;
    font-size: 20px;
}
.event_sponsor__img {
    margin: 0;
}
.event_sponsor__img img {
    display: block;
    max-width: 220px;
    height: auto;
}

.sec_filter_nos{
    padding: 20px 20px 40px;
}
.div_filter_nos{
    padding-bottom: 30px;
}

.div_toggle_filter{
    padding: 20px 0;
}

.filters-toggle[aria-expanded="false"] .filters-toggle__icon {
  transform: rotate(45deg);
}

.filters-toggle[aria-expanded="true"] .filters-toggle__icon {
  transform: rotate(90deg);
}


.div_filtres {
    display: flex;
    align-items: center;
    gap: 20px;

    overflow: hidden;
    height: auto;
    transition: height 0.3s ease;
    width:100%;
}

.div_filtres:last-child {
    margin-bottom:0;
}

.div_filtres p{
    min-width:200px;
}


.div_filtres.is_closed {
    height: 0 !important;
}

.div_filtres p{
    font-size: 16px;
}
.div_filtres ul{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.div_filtres ul li a{
    font-size: 16px;
    background: #fff;
    border-radius: 20px;
    padding: 5px 12px;
}
.div_filtres ul li.selected a{
    background: var(--moba_orange_warm);
}

.grid_events_boxes{
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 30px;
    padding-top: 40px;
}
.grid_events_boxes .event_box {
    width: 100% ;
    background: #fff;
    padding: 10px 0;

    position: relative;
}
.grid_events_boxes .event_box img{
    border-radius: 20px;
    width: calc(100% - 20px);
    margin: 0 auto;

    filter: grayscale(100%);
    transition: filter 0.3s ease;
}
.grid_events_boxes .event_box:hover img{
    filter: none;
}
/* Mobile equivalent — the centermost row gets the "hover" treatment
   (image goes from grayscale to full colour) since touch devices can't
   hover. Class is added by main.js scroll handler. Kept in its own block
   so the :hover-stripping pass on touch devices doesn't kill it. */
.grid_events_boxes .event_box.is-centered img{
    filter: none;
}
.grid_events_boxes .event_info{
    width: calc(100% - 40px);
    z-index: 1;
}
.grid_events_boxes .event_info h2{
    font-size: 24px;
}
.grid_events_boxes .event_info a{
    color: #000;
    transition: color 0.3s ease-in-out;
}
.grid_events_boxes .event_info a:hover{
    color: var(--moba_orange_warm);
}
.grid_events_boxes .event_tags a{
    font-size: 15px;
}
.grid_events_boxes .event_box:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}
.nos_projets_page .grid_events_boxes .event_box:hover:after{
    opacity: 0.2;
}

.sec_projets_grid{
    padding: 50px 20px;
    border: solid #000;
    border-width: 2px 0;
}
.grid_projets_boxes{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 30px;
    row-gap: 60px;
    margin-top: 50px;
}

.grid_projets_boxes .projet_box{
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 0;
    background: #fff;
    width: 100% !important;
    padding: 0;
    aspect-ratio: 1.3;
}

/* Projects listing — adopt the news/outils tile style (clipped image
   + title strip at the bottom of the tile), but with the "revealed"
   state always on instead of being hover-triggered. */
.nos_projets_page .grid_projets_boxes .projet_box > a {
    position: relative;
    z-index: 2;
    /* Permanent clip: removes the bottom 20% of the image so the title
       strip underneath shows through. Matches the news page's hover
       end-state. All four corners rounded — the tile itself has a white
       background (see .projet_box rule below) so the gap left by the
       rounded bottom corners shows white, not the blue page background.
       Strip height (20%) must stay in sync with .projet_info height. */
    clip-path: inset(0 0 20% 0 round 25px);
    display: block;
    width: 100%;
    height: 100%;
}
.nos_projets_page .grid_projets_boxes .projet_box > a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #fff;
}

/* Title strip — pinned to the bottom 25%, always visible, white card
   with no border, project title centered both vertically and horizontally. */
.nos_projets_page .grid_projets_boxes .projet_box .projet_info {
    position: absolute;
    inset: auto 0 0 0;
    width: 100%;
    height: 20%;
    z-index: 1;
    background: #fff;
    border: 0;
    color: #000;
    padding: 6px 14px;
    box-sizing: border-box;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}
/* Cancel the legacy slide-up hover that the project page used to use. */
.nos_projets_page .grid_projets_boxes .projet_box:hover .projet_info {
    transform: none;
}
/* Hide the tags inside the strip — only the project title should show. */
.nos_projets_page .grid_projets_boxes .projet_box .projet_info .projet_tags {
    display: none;
}
.nos_projets_page .grid_projets_boxes .projet_box .projet_info h2 {
    /* 16px — Material `titleMedium` / typical card-title size. Smaller
       than the previous 18px so the white strip can stay slim, but
       still title-tier (heavier than a body caption). Mobile drops one
       notch to 15px below. */
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    color: inherit;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nos_projets_page .grid_projets_boxes .projet_box .projet_info a {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
}

/* Grid item width override — `.projet_tile` wears the `.filter-list__item`
   class which sets width: 25% globally. Force back to full column width. */
.grid_projets_boxes .projet_tile {
  width: 100%;
  padding: 0;
  align-self: start;
  min-width: 0;
}

.grid_projets_boxes .projet_box > a{
    display: flex;
    align-items: center;
    height: 100%;
}

.news_page .grid_projets_boxes .projet_box > a{
    display: flex;
    align-items: flex-end;
}

.grid_projets_boxes .projet_box a img {
    display: block;
    object-fit: cover;
}

.news_page .publicat_grid.grid_projets_boxes {
  align-items: stretch;
}

.news_page .publicat_grid.grid_projets_boxes .projet_box{
  aspect-ratio: auto;
  height: auto;
  display: flex;
  flex-direction: column;
}

.news_page .publicat_grid.grid_projets_boxes .projet_box > a{
  display: block;
  height: auto;
  align-items: initial;
}

.news_page .publicat_grid.grid_projets_boxes .projet_box > a img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  border-radius: var(--radius-md);
}

/* ==== News tile hover: image crops from the bottom, revealing the
   article title in the freed space. The image stays fixed in place
   (only its bottom edge clips up). Border-radius is preserved via
   clip-path's `round` argument. ==== */

/* The tile becomes the positioning context for the absolute title.
   - aspect-ratio: 16/9 so child `height: 25%` resolves (parent must have a
     defined height for percentage children). Matches the image's own ratio.
   - display: block (instead of flex) since the absolutely-positioned title
     no longer needs flex layout.
   - background: moba orange — only visible in the strip revealed when the
     image clips on hover.
   - No blue border on news tiles — that styling is project-listing-only. */
.news_page .publicat_grid.grid_projets_boxes .projet_box {
  position: relative;
  border: none;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  background-color: var(--moba_orange);
  border-radius: var(--radius-md);
}

/* The image link should fill the tile exactly (no extra natural height). */
.news_page .publicat_grid.grid_projets_boxes .projet_box > a {
  height: 100%;
}
.news_page .publicat_grid.grid_projets_boxes .projet_box > a img {
  height: 100%;
  aspect-ratio: auto;
}

/* Image link: top layer. On desktop the bottom 25% is clipped PERMANENTLY (no
   hover animation) so the white title strip beneath is always visible —
   matching the projects/campaigns listing. Only the top corners are rounded so
   the image meets the white strip flush. The mobile block (640px, below)
   overrides this to reveal only the centred tile, like the projects page. */
.news_page .publicat_grid.grid_projets_boxes .projet_box > a {
  position: relative;
  z-index: 2;
  clip-path: inset(0 0 25% 0 round 25px 25px 0 0);
  transition: clip-path .45s cubic-bezier(.4, 0, .2, 1);
}

/* Title row: always rendered behind the image; uncovered when the image
   clips. Override the generic .projet_info "slide-up overlay" rule. */
.news_page .publicat_grid.grid_projets_boxes .projet_box .projet_info {
  position: absolute;
  inset: auto 0 0 0;
  height: 25%;
  z-index: 1;
  /* Always-visible white strip (matches the projects/campaigns listing). The
     generic .projet_info slides up on hover (transform: translateY(100%));
     cancel that so the strip is simply always present and the image clip is
     what controls whether it shows. */
  transform: none;
  background: #fff;
  color: #000;
  padding: 8px 14px 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
  width: 100%;
  margin: 0;
}

.news_page .publicat_grid.grid_projets_boxes .projet_box .projet_info .projet_tags {
  margin: 0;
  margin-bottom: 0;
}
.news_page .publicat_grid.grid_projets_boxes .projet_box .projet_info .projet_tags li {
  font-size: 12px;
}
.news_page .publicat_grid.grid_projets_boxes .projet_box .projet_info h2 {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Defensive width caps so the h2 can't escape the .projet_info bounds. */
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* The wrapping <a> around the title. Flex column + justify-content:
   flex-end pushes the h2 to the BOTTOM of the .projet_info reveal band.
   align-items: flex-end aligns it to the right on the cross-axis.
   width: 100% + min-width: 0 still let the h2's own width: 100% resolve
   against the .projet_info column without escaping the right edge. */
.news_page .publicat_grid.grid_projets_boxes .projet_box .projet_info a {
  color: inherit;
  text-decoration: none;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0 14px;
  text-align: center;
  display: flex;
  justify-content: flex-end;
}

/* Cancel the legacy slide-up on hover for news tiles (the generic rule
   transforms .projet_info on hover). */
.news_page .publicat_grid.grid_projets_boxes .projet_box:hover .projet_info {
  transform: none;
}
/* Same neutralisation for the mobile .is-centered state — kept separate
   so the :hover-stripping pass doesn't kill it. */
.news_page .publicat_grid.grid_projets_boxes .projet_box.is-centered .projet_info {
  transform: none;
}

/* Mobile: behave like the projects page. The image fills the tile by default
   (the white strip stays hidden behind it) and only the centred tile clips to
   reveal the strip. JS (newsCenteredTile in main.js) toggles .is-centered on
   scroll. Kept in its own (hover-free) block so the touch-device :hover
   stripping pass can't remove the reveal. */
@media (max-width: 640px) {
  .news_page .publicat_grid.grid_projets_boxes .projet_box > a {
    clip-path: inset(0 round 25px);
  }
  .news_page .publicat_grid.grid_projets_boxes .projet_box.is-centered > a {
    clip-path: inset(0 0 25% 0 round 25px 25px 0 0);
  }
}


.nos_projets_page img{
    width: 100%;
    height: 100%;
}

.nos_campagnes_page .projet_box a img {
    max-width: calc(100% - 20px);
    max-height: calc(100% - 60px);
    object-fit: contain;
}

/* Campaigns/événements tiles: the category reveal (the .projet_info slide-up)
   is a DESKTOP hover affordance only. On touch devices (no real hover) keep
   the categories hidden so a tap can't trigger a sticky-hover reveal. This is
   belt-and-suspenders with main.js's :hover-stripping pass. */
@media (hover: none) {
  .nos_campagnes_page .grid_projets_boxes .projet_box .projet_info,
  .nos_campagnes_page .grid_projets_boxes .projet_box:hover .projet_info {
    transform: translateY(100%);
  }
}

.grid_projets_boxes .projet_box .projet_info{
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(100% - 40px);
    /* Solid white (was #ffffffcc, semi-transparent) so the title strip never
       shows the image through it. */
    background-color: #ffffff;
    padding: 20px;
    transform: translateY(100%);
    transition: all 0.3s;
}
.projet_box:hover .projet_info{
    transform: translateY(0);
}
.grid_projets_boxes .projet_info a{
    color: #000;
}

.projet_info h2{
    font-size: 32px;
    font-weight: 500;
}

.div_plus_projets{
    padding: 40px 20px;
    text-align: center;
}
.div_plus_projets a{
    display: inline-block;
    font-size: 32px;
    color: #000;
    background: #fff;
    border-radius: 40px;
    padding: 20px 80px;
}

/* Fiche Projet Page CSS */
.beige_page{
    background-color: var(--moba_beige);
}

.grey_page{
    background-color: var(--moba_light_grey);
}

.div_fiche_content{
    display: flex;
    gap: 50px;
}
.div_fiche_content > div{
    flex: 1;
}
.left_fiche_content{
    background: var(--moba_blue);
    border-radius: var(--radius-md);
    padding: 30px;
}

.div_fiche_bottom_img img{
    width: 100%;
    border-radius: var(--radius-md);
}

/* Campaign and Event Page CSS */
/* =========================== */

.camp_event_tags {
  display: flex;
  column-gap: 40px;     
  row-gap: 0px;      
  flex-wrap: wrap;     
  overflow-x: auto;        
  -webkit-overflow-scrolling: touch;
  margin-bottom: 30px;
}

.sec_accord_camp .accordion-css__item-h3 {
    font-size: 38px;
}

.camp-event-tag {
    display: inline-block;
    white-space: nowrap;
    font-size: 18px;     
}

.prix_grn_box{
    background: var(--moba_green);
    /* Extra space at the top of the box, and a top margin to push it away
       from the accordion above. */
    padding: 60px 30px 30px;
    margin-top: 50px;
    border-radius: var(--radius-md);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: normal;
    letter-spacing: 0;
}
.prix_grn_box p,
.prix_grn_box h3,
.prix_grn_box h4 {
    font-family: inherit;
    font-weight: 400;
    font-size: 22px;
    line-height: normal;
    letter-spacing: 0;
}
.prix_grn_box h3{
    margin: 60px 0 40px;
}
.prix_grn_box a{
    font-size: 16px;
    background: #fff;
    border-radius: 20px;
    padding: 10px 20px;
    display: inline-block;
    color:black;
}

.sec_banner_camp{
    /* unified with .page-banner-img (Nous joindre as reference) */
    padding: 30px 20px;
}
.div_banner_camp{
    width: 100%;
    min-height: 570px;
    border-radius: var(--radius-md);
    overflow: hidden;
}
.div_banner_camp img {
    width: 100%;
    height: 570px;
    border-radius: var(--radius-md);
    object-fit: cover;
}

.div_coll_beau,
.newscontent {
    background: var(--moba_blue);
    padding: 50px;
    border-radius: var(--radius-md);
    max-width: 100%;
    display: flex;
    gap: 80px;
}
.div_coll_beau > div{
    flex: 1;
    width: 50%;
    font-size:22px;
}

.div_coll_beau > div p {
    line-height:1.3;
}

.div_coll_beau h1{
    font-size: 44px;
    padding-top:30px;
}

.sec_accord_camp,
.sec_coll_beau {
    padding: 30px 20px ;
    padding-top:15px;
    padding-bottom:15px;
}

.div_accord_camp{
    display: flex;
    gap: 40px;
    align-items: start;
}

.div_accord_camp a {
    font-weight: 100;
}
.div_accord_camp > div{
    flex: 1;
}
.div_accord_camp p{
    font-size: 22px;
    margin-bottom: 20px;
}
.div_accord_camp .prix_grn_box{
    padding: 50px 40px;
    max-width: 640px;
}
.div_accord_camp .prix_grn_box h3
{
    margin-bottom: 60px;
}


.page_header_wrapper {
    z-index: 1;
    position: relative;
}

.page_header_wrapper.green {
    background-color: var(--moba_green);
}


.page_banner {
    padding-top: 40px;
    padding-bottom: 40px;
}

.page_banner_inner {
    max-width: 1700px; 
    margin: 0 auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: var(--radius-md);
    min-height: 570px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 20px 20px;
}

.page_header_wrapper h1{
    color: #fff;
    font-size: 88px;
    font-weight: 500;
    padding: 50px 20px 20px;
    font-size: 88px;
    font-weight: 500;
    text-align: center;
}

.page_header_wrapper h2 {
    font-size: 50px;
}

.header_content {
    max-width: 1000px;
    margin: 0 auto;
    font-size: 44px;
    text-align: center;
}

.header_content::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 3px;
  background: #000;
  pointer-events: none;
}

.header_content.full_bottom_border::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 3px;
  background: #000;
  pointer-events: none;
}

.sec_autres_publicat::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 3px;
  background: #000;
  pointer-events: none;
  margin-top: -50px;
}

.sec_autres_publicat::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 3px;
  background: #000;
  pointer-events: none;
  margin-top: 50px;
}

.header_content h2{
    padding-top: 80px;
    padding-bottom: 80px;
    font-weight: 400;
}

.accordion-section {
    padding-bottom:50px;
}

.sec_publ_blog{
    padding: 50px 20px;
    padding-bottom:0;
}
.div_publ_blog{
    text-align: center;
}
.div_publ_blog > p{
    font-size: 22px;
    max-width: 800px;
    margin: auto;
}
.publicat_grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 30px;
    margin-top: 0px;
}
.publicat_grid img{
    width: 100%;
    border-radius: var(--radius-md);
}
.div_publ_blog a{
    font-size: 22px;
    display: inline-block;
    color: #000;
    min-width: 230px;
    height: 100%;
}
.sec_autres_publicat{
    padding: 50px 20px;
    margin-top: 50px;
    margin-bottom:50px;
}
.div_autres_publicat > p{
    font-size: 22px;
    text-align: center;
    margin-bottom: 50px;
}
.sec_restez_connect{
    padding: 40px 20px 40px;
    padding-top:0;
}

.sec_autres_publicat .accordion-css__list {
    gap:20px;
}

.div_restez_connect{
    background:  var(--moba_orange);
    border-radius: var(--radius-md);
    padding: 30px 40px;
}
.div_restez_connect p{
    font-size: 22px;

}
.div_restez_connect h2{
    font-size: 44px;
    margin: 40px 0;
}
.div_restez_connect > div{
    text-align: right;
}

/* Two-up CTA layout (used on Leaders en mobilité): orange box on the left,
   blue copy on the right, each 50%. Sized to match the map's horizontal
   extent below it (100px side strips at desktop), so the two CTAs together
   line up edge-to-edge with the map. Stacks vertically on mobile. */
.sec_restez_connect--two-up {
    padding-left: 100px;
    padding-right: 100px;
}
.sec_restez_connect--two-up .div_restez_connect_grid {
    /* Override .fixed_container's max-width/auto-margins so the grid spans
       the full available width inside the section's 100px side padding. */
    max-width: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
.div_restez_connect--blue {
    background: var(--moba_blue);
    color: #000;
}
@media (max-width: 1280px) {
    .sec_restez_connect--two-up {
        padding-left: 40px;
        padding-right: 40px;
    }
}
@media (max-width: 960px) {
    .sec_restez_connect--two-up .div_restez_connect_grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}
@media (max-width: 640px) {
    .sec_restez_connect--two-up {
        padding-left: 10px;
        padding-right: 10px;
    }
}

.sec_accord_camp {
    padding-bottom: 150px; 
}

.dropdown_menu .animated_menu > li {
  cursor: pointer;
    height: calc(
    (var(--vh, 1vh) * 100 - var(--header-offset, 0px) - 30px)
    / var(--menu-rows)
    );
}

.dropdown_menu .animated_menu li:last-child {
    border-bottom:none;
}

.newscontent-column {
    width:50%;
}

.newscontent-column strong{
    font-weight: 500;
}

.newscontent-column ul{
    list-style-type: disc;
    margin-top: 20px;
    margin-left: 20px;
}

.newscontent-column ul li{
    margin-bottom:10px;
}

.newscontent-column iframe,
.newscontent-column figure {
    width:100%;
    border-radius: var(--radius-md);
    margin-bottom:10px;
}

.newscontent {
    padding-top:15px;
}

.newscontent b,
.newscontent strong {
    font-weight: 600;  
    font-size:30px;
    margin-bottom:10px;
}

.newscontent p:has(b),
.newscontent p:has(strong) {
  margin-bottom: 1.5rem; /* or whatever margin you want */
}

.newscontent p,
.div_coll_beau p,
.newscontent li {
    font-weight: 100;
}

.single-news .div_coll_beau {
    background-color: white;
}

.newscontent-column--single {
    max-width:60rem;
    margin:auto;
    width: auto;
}

.newscontent-column--single  img {
    max-height: 300px;
}

.newscontent p,
.newscontent li span{
    font-size: 18px;
    line-height:1.5
}

.newscontent li {
    margin-left:20px;
}

.newscontent-column--single p {
    font-size:24px;
    font-weight: 100;
}

.footer_content .div_moba_logo p,
.footer_content .div_movia_logo p  {
    margin-bottom:15px;
}

@media (max-width: 1440px){

    .div_moba_logo{
        padding-right: 40px;
    }
    .div_moba_logo:after{
        right: 0;
    }

    .testimonial_grid {

        max-width: 90%;
    }
}


/* Laptop */
@media (max-width: 1280px){

    .header_title, .header_lang a{
        font-size: 20px;
    }
    .burger_menu_icon, .close_menu_icon{
        width: 60px;
    }
    .main_header .div_header { min-height: 65px; } /* burger is now 60px */
    .dropdown_menu li a{
        font-size: 60px;
    }
    .div_movia_logo {
        padding-left: 20px;
    }
    .footer_content p, .footer_content ul li a{
        font-size: 22px;
    }
    .footer_content .footer_logo{
        height: 75px;
    }
    .footer_content .footer_logo img{
        /* Height-driven (see base rule); don't re-cap width or the two logos
           would diverge in height again. */
        max-width: 100%;
    }

    .accordion_title h2{
        font-size: 36px;
    }
    .accordion_title img{
        max-width: 64px;
    }
    .events_page_title h1{
        font-size: 72px;
    }

    .grid_events_boxes {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 25px !important;
    }
    .grid_events_boxes .event_box{
        border-radius: 20px;
    }
    .grid_events_boxes .event_info{
        padding: 10px;
        width: calc(100% - 20px);
    }
    .grid_events_boxes .event_info h2{
        font-size: 22px;
    }
    .grid_events_boxes .event_tags a{
        font-size: 14px;
    }
    .div_banner_propos h1,
    .page_header_wrapper h1 {
        font-size: 72px;
    }
    .section_box span {
        font-size: 30px;
    }
    .section_box p {
        font-size: 24px;
        max-width: 830px;
    }
    .section_box {
        padding: 30px 20px 40px;
    }

    .section_box .left_text {
        line-height:0.5;
        margin-top:0;
    }
    .camp_event_tags {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        overflow-x: auto;
        margin-bottom: 10px;
    }

    .div_filtres {
        align-items: flex-start;
    }

    .accordion-css {
        padding-left: 20px;
        padding-right: 20px;
    }

    .div_accord_camp .prix_grn_box {
        width: 100%;
        max-width: -webkit-fill-available;
    }

    .sec_accord_camp {
        padding-bottom: 30px;
    }

    .section_box {
        border-radius: var(--radius-sm);
    }

    .section_box_container {
        margin-top: -80px;
        margin-bottom: 80px;
    }

    .section_box .left_text span {
        font-size: 40px;
        font-weight: 100;
    }
    .section_box p {
        font-size: 18px;
        font-weight: 100;
        max-width: 550px;
    }
    .section_box .ta_right{
        text-align: center;
    }
    .section_box h3 {
        font-size: 24px;
        font-weight: 100;
        max-width: 200px;
    }

    .section_box .left_text {
        margin-top:40px;
        margin-bottom:40px;
        font-size:48px;
    }

    .section_box .content {
        flex-direction: column;
    }

    .section_box .content .content_inner:first-child {
        width:100%;
    }

    .section_box .content .content_inner:nth-child(2) {
        width:100%;
        padding-top:0!important;
    }

    .sec_accord_camp {
        padding-bottom: 30px;
    }

    .grid_events_boxes .event_box img{
        transition: filter 2s ease;
    }

    .grid_events_boxes .event_box img.is-activating{
        filter: none;
    }
}

/*--------Tablet----------*/
@media (max-width: 960px){
    .dropdown_menu li a {
        font-size: 42px;
    }

    .div_coll_beau,
    .div_accord_camp {
        gap: 30px;
        flex-direction: column;
    }

    .footer_content{
        flex-wrap: wrap;
        gap: 20px;
        row-gap: 30px;
    }
    .footer_content > div{
        flex: auto;
        width: calc(50% - 10px);
        padding-left:0;
    }
    .footer_content p, .footer_content ul li a {
        font-size: 20px;
    }
    .div_moba_logo{
        padding-right: 0;
    }
    .footer_content a.cta.btn{
        width: 100%;
        padding: 0;
        border: 0;
    }

    .accordion_title h2{
        font-size: 30px;
    }
    .accordion_title img{
        max-width: 50px;
    }

    .events_page_title h1{
        font-size: 54px;
    }

    .grid_events_boxes {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
    .grid_events_boxes .event_box{
        min-height: 160px;
    }
    .grid_events_boxes .event_info h2{
        font-size: 20px;
    }
    .grid_events_boxes .event_tags a{
        font-size: 13px;
    }

    .grid_projets_boxes{
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .div_content_serv{
        flex-direction: column;
    }

    .div_banner_propos h1,
    .page_header_wrapper h1 {
        font-size: 56px;
    }

    .div_coll_beau > div {
        width: 100%;
    }

    .sec_accord_camp .accordion-css {
        padding-left: 0px;
        padding-right: 0px;
        max-width: 100%;
        width: 100%;
    }

        .page-banner h1{
        font-size: 58px;
        font-weight: 500;
        text-align: center;
    }

    .nos_projets_title h1{
        font-size: 62px;
    }

    .div_fiche_content {
        flex-direction: column;
    }

    .sec_fiche_content .left_fiche_content  { 
        order: 2; 
        padding: 50px;
    }
    .sec_fiche_content .right_fiche_content { 
        order: 1; 
        width: 80%;
        margin: auto;
    }

    .projet_tags {
        text-decoration: none;
    }

    .nos_campagnes_page .grid_projets_boxes {
        margin-top: 40px;
        padding-top: 0px;
        grid-template-columns: 1fr 1fr !important;
        display: grid !important;
    }
}

@media (max-width: 640px) {

    .home .sec_footer {
        margin-top: -50px;
    }

    .no-bg-mobile {
        opacity: 0;
    }

    .burger_menu_icon, .close_menu_icon {
        width: 45px;
    }
    .header_title, .header_lang a {
        font-size: 16px;
    }
    .header_title {
        letter-spacing: 10px;
    }
    /* Re-anchor the absolutely-positioned title block on mobile so it
       sits in the middle of the space BETWEEN the burger's right edge
       and the header's right edge — not the geometric viewport centre
       (which is too far left because the burger occupies the left).
       Math: burger area ≈ 20px left padding + 45px burger = 65px on
       the left, vs. 20px on the right → asymmetry of 45px → shift the
       centre half of that, ~22px, to the right. */
    .main_header .div_header > :nth-child(2) {
        left: calc(50% + 22px);
    }
    /* Universal centering rule handles mobile too — see top of file
       around .main_header .top_header / .div_header. Just shrink the
       header's min-height here so it doesn't waste vertical space when
       the burger is only 45px. */
    .main_header .div_header { min-height: 55px; }
    .dropdown_menu li a {
        font-size: 36px;
        line-height: 2;
    }

    .footer_content > div {
        width: 100%;
    }

    .div_moba_logo{
        padding-right: 0;
        padding-bottom: 30px;
    }
    .div_moba_logo:after{
        height: auto;
        width: 100%;
        right: 0;
        top: 100%;
        border-bottom: 1px solid #fff;

        display: none;
    }
    .div_movia_logo{
        padding-left: 0;
    }
    /* Smaller box height on phones keeps the height-driven logos inside the
       narrow 50%-width columns; width stays uncapped so both stay equal height. */
    .footer_content .footer_logo {
        height: 55px;
    }
    .footer_content .footer_logo img {
        max-width: 100%;
    }

    .accordion_title h2{
        font-size: 24px;
    }
    .events_page_title h1{
        font-size: 36px;
    }

    .grid_events_boxes {
        grid-template-columns: 1fr !important;
    }
    .grid_events_boxes .event_box{
        min-height: 160px;
    }
    .grid_events_boxes .event_info h2{
        font-size: 18px;
    }
    .grid_events_boxes .event_tags a{
        font-size: 12px;
    }

    /* Vertically centre the "Projets" title on mobile by equalising
       top + bottom padding (was 50px / 20px, leaving the title higher
       in its blue band). */
    .nos_projets_title{
        padding: 60px 20px;
    }
    /* Smaller tag chips on mobile so they fit on a single row inside
       the narrower tile width. */
    .grid_projets_boxes .projet_box .projet_tags li,
    .grid_projets_boxes .projet_box .projet_tags a {
        font-size: 12px;
    }
    /* Tile title on mobile — same layout as desktop but smaller text. */
    .grid_projets_boxes .projet_title {
        margin: 0 0 14px;
        padding: 0;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.25;
        color: #000;
        text-align: left;
        min-height: 2.5em;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .event_sponsor__label {
        font-size: 12px;
    }

    /* Actualités & Outils accordion: add breathing room between the
       accordion title row and the bullet list inside it on mobile. The
       desktop padding-top is implicitly 0 on .accordion-css__item-bottom-content,
       which makes the list hug the title on a narrow viewport. */
    .news_page .accordion-css__item-bottom-content {
        padding-top: 1.2em;
    }

    /* Bottom-align the title text inside the news/outils tile's info
       strip on mobile so it sits flush against the bottom edge of the
       reveal band. */
    .news_page .publicat_grid.grid_projets_boxes .projet_box .projet_info a {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        height: 100%;
    }

    /* News/outils info-strip sizing on mobile: pin to 100% width with a
       fit-content cap, drop horizontal padding (the inner <a> already
       carries 14px), keep only a 5px bottom breathing room. */
    .news_page .publicat_grid.grid_projets_boxes .projet_box .projet_info {
        min-width: 100%;
        max-width: fit-content;
        padding: 0;
        padding-bottom: 5px;
    }
    .nos_projets_title h1{
        font-size: 48px;
    }
    .grid_projets_boxes {
        grid-template-columns: 1fr;
        column-gap: 20px;
        row-gap: 50px;       /* more breathing room between stacked tiles on mobile */
        margin-top: 40px;
    }

    /* Projects listing — on mobile, mirror the news/outils behaviour:
       the title strip is hidden by default and only revealed for the
       tile whose vertical centre is closest to the viewport's centre.
       JS (in main.js) toggles .is-centered on scroll. */
    .nos_projets_page .grid_projets_boxes .projet_box > a {
        /* Image fills the tile by default — no reveal. */
        clip-path: inset(0 round 25px);
        transition: clip-path .45s cubic-bezier(.4, 0, .2, 1);
    }
    .nos_projets_page .grid_projets_boxes .projet_box.is-centered > a {
        /* Centermost tile clips the bottom 20% of the image, exposing
           the title strip underneath — same end-state as desktop.
           All four corners rounded; the tile's white background fills
           the gap left by the rounded bottom corners. */
        clip-path: inset(0 0 20% 0 round 25px);
    }
    /* Mobile title — one notch smaller than desktop (15px). Still
       title-tier; the strip is short so two lines just fit. */
    .nos_projets_page .grid_projets_boxes .projet_box .projet_info h2 {
        font-size: 15px;
    }

    .section_box .left_text,
    .section_box .left_text span {
        font-size:24px;
    }
    /* Reset the line-height:0.5 inherited from the <=1280px block — on small
       phones this title wraps to two lines and 0.5 makes the lines overlap
       (the "squeezed" look). */
    .section_box .left_text {
        line-height: 1.15;
    }
    .section_box .left_text span {
        font-size:24px;
    }

    .white-bg-mobile {
        background-color: #fff;
    }

    .margin-mobile{
        margin-top:-50px;
    }

    .section_box > div {
        margin-top:0;
    }

    .div_banner_propos h1,
    .page_header_wrapper h1 {
        font-size: 36px;
    }

    /* Unified mobile banner sizing — sections drop their min-heights and the
       inner blocks switch to aspect-ratio 1.3 so they're square-ish on phones. */
    .sec_banner_camp,
    .sec_banner_propos {
        padding: 20px;
    }
    .div_banner_camp,
    .div_banner_camp img,
    .div_banner_propos {
        min-height: 0;
        height: auto;
        aspect-ratio: 1.3;
        object-fit: cover;
    }
    .sec_coll_beau {
        padding-top:0;
        padding-bottom: 0;
    }

    .sec_accord_camp {
        padding-top:20px;
    }

    .camp-event-tag {
        font-size:12px;
    }

    .div_coll_beau h2 {
        font-size: 24px;
    }
    .div_coll_beau > div p {
        font-size:14px;
    }

    .div_coll_beau {
        padding:20px;
    }

    .div_accord_camp {
        gap: 20px;
    }

    .sec_accord_camp .accordion-css__item-bottom-content {
        padding-bottom: 0.8em;
    }

    .div_accord_camp .prix_grn_box h3 {
        font-size:24px;
    }

    .page-banner-img {
        padding: 20px;
        height: auto;
        min-height: auto;
        aspect-ratio: 1.3;
    }

    .div_fiche_content {
        gap: 10px;
    }

    .right_fiche_content h2 {
        font-size:24px;
    }

    .page-banner h1{
        font-size: 34px;
        font-weight: 500;
        text-align: center;
    }
    .nos_projets_title h1{
        font-size: 48px;
    }
    .right_fiche_content h2{
        font-size: 24px;
    }

    .sec_fiche_content .right_fiche_content {
        width: 90%;
    }

    .sec_fiche_content {
        padding-bottom:20px;
    }

    .right_fiche_content p{
        font-size: 14px;
        font-weight: 100;
    }
    .left_fiche_content h2{
        font-size: 24px;
        line-height: 1.4;
        font-weight: 100;
    }
    .left_fiche_content p{
        font-size: 12px;
    }

    .sec_fiche_content .left_fiche_content {
        padding: 30px 20px 30px 20px;
    }

    .sec_fiche_bottom_img{
        padding-top:20px;
        padding-bottom: 70px;
    }

    .nos_campagnes_page .div_filtres p{
        display: none;
    }

    .nos_campagnes_page .div_toggle_filter {
        padding-bottom: 0;
    }

   .nos_campagnes_page .grid_projets_boxes {
        margin-top:0;
        padding-top: 0;
   }

   .nos_campagnes_page .grid_projets_boxes::before {
        margin-top: -20px;
    }

    .page_header_wrapper .header_content h2 {
        font-size: 24px;
        padding-left:20px;
        padding-right:20px;
        font-weight: 100;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .header_content::before,
    .header_content.full_bottom_border::after,
    .sec_autres_publicat::before,
    .sec_autres_publicat::after {
        height: 2px;
    }

    .sec_publ_blog .news_subtext,
    .div_autres_publicat > p {
        font-size:16px;
        font-weight: 100;
        text-align: left;
    }

    .sec_publ_blog {
        padding:30px 20px;
    }   

    .sec_publ_blog .grid_projets_boxes {
        margin-top:30px;
    }

    .div_restez_connect h2 {
        font-size: 22px;
        max-width: fit-content;
    }

    .div_restez_connect p {
        font-size:16px;
        font-weight: 100;
    }

    .div_restez_connect > div {
        justify-self: flex-end;
    }

    .dropdown_menu ul {
        height: calc(var(--vh, 1vh) * 100 - var(--header-offset, 0px));
        overflow-y: auto;
    }

    .dropdown_menu li:last-child {
        border-bottom: none;
    }

    .newscontent-column--single img {
        max-height: 200px;
    }

    .newscontent b,
    .newscontent strong {
        font-weight: 600;  
        font-size:24px;
        margin-bottom:10px;
    }
}

.filter-buttons {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  flex-flow: wrap;
  justify-content: flex-start;
  display: flex;
}

.filter-btn {
    border:none;
    -webkit-appearance: none;
    appearance: none;
    background-color: white;
    border-radius: 10em;
    padding: .65em 1.25em;
    font-size: 1em;
    transition: color 0.6s cubic-bezier(0.625, 0.05, 0, 1), background-color 0.6s cubic-bezier(0.625, 0.05, 0, 1);
    cursor: pointer;
    height: 50px;
}

.filter-btn[data-filter-status="active"] {
  background-color: var(--moba_orange_warm);
  color: white;
}

/* Reset Button */
.reset-btn {
  outline-offset: -2px;
  color: #c90f0f;
  -webkit-appearance: none;
  appearance: none;
  background-color: #c90f0f0d;
  border-radius: 10em;
  outline: 2px solid #c90f0f;
  padding: .65em 1.25em;
  font-size: 1.5em;
  transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  opacity: 0;
  visibility: hidden;
}

.reset-btn[data-filter-status="active"] {
  opacity: 1;
  visibility: visible;
}

.filter-list {
  flex-flow: wrap;
  width: 100%;
  display: flex;
}

.filter-list__item {
  width: 25%;
  padding: .75em;
}

.filter-list__item[data-filter-status="active"] {
  transition: opacity 0.6s cubic-bezier(0.625, 0.05, 0, 1), transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  transform: scale(1) rotate(0.001deg);
  opacity: 1;
  visibility: visible;
  position: relative;
}
.filter-list__item[data-filter-status="transition-out"] {
  transition: opacity 0.45s cubic-bezier(0.625, 0.05, 0, 1), transform 0.45s cubic-bezier(0.625, 0.05, 0, 1);
  transform: scale(0.9) rotate(0.001deg);
  opacity: 0;
  visibility: visible;
}
.filter-list__item[data-filter-status="not-active"] {
  transform: scale(0.9) rotate(0.001deg);
  opacity: 0;
  visibility: hidden; 
  position: absolute;
}

@media screen and (max-width: 991px) {
  .filter-list__item {
    width: 50%;
  }
}

@media screen and (max-width: 767px) {
  .filter-list__item {
    width: 100%;
  }
}

.visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); }

.btn {
  cursor: pointer;
  border-radius: 1em;
  border-radius: calc(var(--btn-height) * .5);
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  height: 50px;
  padding-left: 1.25em;
  padding-right: 1.25em;
  text-decoration: none;
  display: flex;
  position: relative;
  width: fit-content;
}

.btn__text {
  color: #efede3;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
  transition: color 0.7s cubic-bezier(0.625, 0.05, 0, 1);
}

.btn-text-p {
  color: currentColor;
  white-space: nowrap;
  margin-bottom: 0;
  padding-bottom: .05em;
  font-family: 'Inter';
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
}

.btn__bg {
  background-color: #08181b;
  border-radius: 1.5em;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.btn__image {
  border-radius: 50%;
  width: 2.25em;
  height: 2.25em;
  margin-left: -.75em;
  margin-right: .5em;
  position: relative;
  overflow: hidden;
}


.btn__circle-wrap {
  border-radius: 1.5em;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.btn__circle {
  pointer-events: none;
  background-color: var(--moba_orange);;
  border-radius: 50%;
  width: 200%;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: transform 0.7s cubic-bezier(0.625, 0.05, 0, 1), background-color 0.4s cubic-bezier(0.625, 0.05, 0, 1);
  transform: translate(-50%, -50%) scale(0) rotate(0.001deg);
}

.before__100 {
  padding-top: 100%;
  display: block;
}

.btn .btn__text {
  transition: color 0.7s cubic-bezier(0.625, 0.05, 0, 1);
}

.btn:hover .btn__circle {
  transform: translate(-50%, -50%) scale(1) rotate(0.001deg);
}

/* Light */
.btn[data-theme="light"] .btn__bg {
  background-color: white;
}

.btn[data-theme="light"] .btn__text {
  color: #031819;
}

.btn[data-theme="light"] .btn__circle {
  background-color: var(--moba_orange);
}

/* White - Black */

.btn[data-theme="white-black"] .btn__bg {
  background-color: white;
}

.btn[data-theme="white-black"] .btn__text {
  color: black;
}

.btn[data-theme="white-black"] .btn__circle {
  background-color: black;
}

/* Grey */

.btn[data-theme="grey"] .btn__bg {
  background-color: var(--moba_grey);
}

.btn[data-theme="grey"] .btn__text {
  color: black;
}

.btn[data-theme="grey"] .btn__circle {
  background-color: var(--moba_orange);
}

/* White-Blue */

.btn[data-theme="white-blue"] .btn__bg {
  background-color: white;
}

.btn[data-theme="white-blue"].active .btn__bg {
  background-color: var(--moba_blue);
}

.btn[data-theme="white-blue"] .btn__text {
  color: black;
}

.btn[data-theme="white-blue"] .btn__circle {
  background-color: var(--moba_blue);
}

/* Primary */

.btn[data-theme="dark"],
.btn[data-theme="dark_2"]{
    border: 3px solid var(--moba_orange);
    border-radius: 50px;
}
.btn[data-theme="dark"] .btn__bg,
.btn[data-theme="dark_2"] .btn__bg {
  background-color: var(--moba_orange);
}

.btn[data-theme="dark"] .btn__text {
  color: #031819;
}

.btn[data-theme="dark"] .btn__circle,
.btn[data-theme="dark_2"] .btn__circle {
  background-color: white
}


[data-flip-element="wrapper"] { position: relative; }

[data-flip-element="wrapper"] { overflow: visible; }

[data-flip-element="wrapper"] {
  position: relative;
  min-height: 1px; /* gets overridden to a frozen height in JS */
  overflow: visible; /* avoid clipping the image during fit */
}

[data-flip-element="target"] {
  transform-origin: 0 0;
  will-change: transform;
}

.main_header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  transform: translateY(0);
  opacity: 1;
  transition: transform .3s ease, opacity .3s ease;
}

/* Hidden state (used on the front page before reveal) */
.main_header.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
}

/* Front page: start hidden; becomes visible when JS adds .is-visible */
body.home .main_header,
body.front-page .main_header {
  /* start hidden, JS will toggle classes */
  transform: translateY(-100%);
  opacity: 0;
}

body.home .main_header.is-visible,
body.front-page .main_header.is-visible {
  transform: translateY(0);
  opacity: 1;
}

/* Non-home: always visible without any scroll logic required */
body:not(.home):not(.front-page) .main_header {
  transform: translateY(0);
  opacity: 1;
}

.accordion-css {
  position: relative;
}

.accordion-css__list {
  grid-column-gap: .5em;
  grid-row-gap: 2em;
  flex-flow: column;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
  position: static;
}

.accordion-css__item {
    border-radius: 50px;
    background: #FFF;
    list-style: none;
}

.accordion-css__item-top {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  padding: 1em 1em 1em 1.5em;
  display: flex;
}

.accordion-css__item-bottom {
  transition: grid-template-rows 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  grid-template-rows: 0fr;
  display: grid;
  position: relative;
  overflow: hidden;
}

[data-accordion-status="active"] .accordion-css__item-bottom {
   grid-template-rows: 1fr;
}

.accordion-css__item-bottom-wrap {
  flex-flow: column;
  height: 100000%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.accordion-css__item-bottom-content {
  padding-bottom: 1.5em;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

.accordion-css__item-h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 44px;
  font-weight: 200;
  line-height: 1.3;
}

.accordion-css__item-p,
.accordion-css__item-bottom-content li {
  color: var(--moba_text_secondary);
  margin-bottom: 0;
  font-size: 22px;
  line-height: 1.3;
  margin-left: 20px;
  margin-bottom: 15px;
  font-weight: 100;
}

.accordion-css__item-icon {
  transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  background-color: white;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 4em;
  height: 4em;
  display: flex;
  transform: rotate(45deg);
    background-color: transparent;
}

@media (max-width: 640px) {

    .accordion-css__item-h3 {
        font-size:24px!important;
    }
    .accordion-css__item-bottom-content li {
        font-size:16px;
        font-weight: 100;
        margin-bottom:15px;
    }

    .accordion-css__item-top {
        height: 30px;
    }

    .accordion-css__item-icon {
        width: 3em;
        height: 3em;
    }

    .accordion-css__list {
        grid-row-gap: 1em;
    }
}

[data-accordion-status="active"] .accordion-css__item-icon {
   transform: rotate(0.001deg);
}

.accordion-css__item-icon-svg {
  width: 4em;
  height: 4em;
}

.accordion-css__item-list {
    list-style: disc; 
    list-style-position: outside;
}

.visually-hidden{
  position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Item visibility + small fade */
.filter-list [data-filter-status="active"]{
  display:block;
  opacity:1; transform:none; transition:opacity .25s ease, transform .25s ease;
}
.filter-list [data-filter-status="not-active"]{ display:none; }
.filter-list [data-filter-status="transition-out"]{
  display:block;
  opacity:0; transform:scale(0.98); pointer-events:none; transition:opacity .25s ease, transform .25s ease;
}

.div_filtres{ margin-bottom:1rem; }
.filter-buttons{ 
    display:flex; 
    flex-wrap:wrap; 
    gap:1rem; 
    align-items:center; }
.div_filtres > p{ 
    font-weight:200; 
    margin:.25rem 0 .5rem; 
}

.visually-hidden{
  position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.filter-list [data-filter-status="active"]{
  display:block;
  opacity:1; transform:none; transition:opacity .25s ease, transform .25s ease;
}
.filter-list [data-filter-status="not-active"]{ display:none; }
.filter-list [data-filter-status="transition-out"]{
  display:block;
  opacity:0; transform:scale(0.98); pointer-events:none; transition:opacity .25s ease, transform .25s ease;
}

@media screen and (max-width: 768px) {
  .ta_right {
    justify-content: center !important;
  }
}

.div_accord_camp .prix_grn_box {
  padding: 30px;
  height: auto;
}

@media (max-width: 640px) {

    .div_accord_camp .accordion-css__list {
        gap: 20px;
    }

    .div_accord_camp {
         gap: 20px;
    }
}

.filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 2px solid currentColor;
    border-radius: var(--radius-pill);
    background: transparent;
    cursor: pointer;
    font: inherit;
    /* Shrink-fit width with comfortable horizontal padding so "Filtres"
       and the icon sit close together instead of being stretched apart
       by a fixed-140px frame. */
    width: auto;
    height: 50px;
    padding: 0 16px;
}

.filters-toggle span{
    padding-left: 0;
}

.filters-toggle__icon {
    transition: transform .25s ease;
    position: static;
}

.filters-toggle[aria-expanded="true"] .filters-toggle__icon {
  transform: rotate(180deg);
}

.nos_campagnes_page .filters-toggle[aria-expanded="true"] .filters-toggle__icon {
    transform: rotate(135deg);
}

.nos_campagnes_page .filters-toggle[aria-expanded="false"] .filters-toggle__icon {
    transform: rotate(90deg);
}

/* The sliding panel — mirrors the .div_filtres animation pattern from the
   campaigns page: height transition driven by JS (sets the measured pixel
   height, then 0, then back to auto after the transition completes). */
.filters-panel {
  overflow: hidden;
  height: auto;
  transition: height 0.3s ease;
}
.filters-panel.is_closed {
  height: 0 !important;
}

/* JS fallback for users with JS disabled */
.no-js .filters-panel {
  height: auto !important;
  opacity: 1 !important;
}

/* Optional spacing when open */
.filters-panel.is-open {
  margin-top: 3rem;
}

.fg-acc__content[hidden] { display: none; }

.filter-group {
    display: flex;
}

.fg-acc__header {
    min-width: 200px;
    height: 50px;
    background-color: transparent;
    border: 0;
    display: flex;
    padding-top: 8px;
}

.fg-acc__chev {
    display: none;
}

.filter-group {
    margin-bottom: 20px;
}

@media (max-width: 640px) {
    .filter-group {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 20px;
        border-bottom: 2px solid black;
    }

    .filter-group:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }

    .fg-acc__chev{
        width: 30px;
        height: 30px;
        margin-top: -5px;
    }

    .fg-acc__title {
        width: 150px;
        display: flex;
    }

    .filter-buttons{
        padding-left: 0;
        padding-right: 0;
        margin-left: 25px;
        /* Row + wrap so chips sit next to each other and flow onto more
           lines as needed, instead of stacking 1-per-row. */
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }
    .filter-btn{
        font-size: 16px;
    }

    /* Top border on the first one */
    .filter-group:first-child {
        border-top: 2px solid black;
        padding-top: 20px;
    }

    .fg-acc__header {
        padding-left: 25px;
    }

    .sec_filter_nos .fg-acc__header,
    .sec_filter_nos .fg-acc__header .fg-acc__title,
    .sec_filter_nos .fg-acc__header .fg-acc__title span {
        color: #000;
    }

    .div_filter_nos {
        padding-bottom: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        border-top: 2px solid black;
        padding-top: 15px;
    }

    .fg-acc__chev {
        display: unset;
    }

    .div_filter_nos.open {
        margin-bottom: 0px;
        padding-bottom: 0px;
    }

    .filters-panel.is-open {
        margin-top: 1rem;
    }

    .sec_filter_nos {
        padding-left:0;
        padding-right: 0;
    }

    .fg-acc__content {
        margin-bottom:0px;
    }

    .filters-toggle {
        margin-left:20px;
        margin-right:30px;
    }

    .div_filtres {
        flex-direction: column;
        align-items: start;
        margin-bottom:30px!important;
    }
    .div_filtres p{
        font-size: 18px;
    }

    .grid_projets_boxes {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 50px;
        width: 95%;
        margin-left: auto;
        margin-right: auto;
    }

    .grid_projets_boxes::before {
        margin-top:-50px;
    }

    #filtersPanel { will-change: height; }
}

.left_col_serv .sticky-wrapper {
  position: sticky;
  top: var(--header-offset); 
  align-self: start;               
  z-index: 2;                      
}

.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* taxonomy filter visibility */
.filter-list__item[data-filter-status="active"]{display:block;opacity:1;transform:none;transition:opacity .25s ease,transform .25s ease}
.filter-list__item[data-filter-status="not-active"]{display:none}
.filter-list__item[data-filter-status="transition-out"]{display:block;opacity:0;transform:scale(.98);pointer-events:none;transition:opacity .25s ease,transform .25s ease}

/* default: desktop/tablet */
[data-mobile-only] { display: none; }
[data-desktop-only] { display: block; }

@media (max-width: 640px) {
  [data-mobile-only] { display: block; }
  [data-desktop-only] { display: none; }
}

.newscontent {
    display: flex;
    margin-top:0;
    background-color: transparent;
}

.newscontent-column img {
    width: 100%;
    object-fit: contain;
    height: min-content;
}

.div_coll_beau h1 {
    font-weight:500;
}

.div_coll_beau h2 {
    font-size:44px;
    font-weight: 100;
}

.page_banner_meta {
    font-weight: 100;
    font-size:18px;
}

@media (max-width: 960px) {
    .single-news .div_coll_beau {
        flex-direction: column;
        gap:30px;
    }

    .newscontent {
        flex-direction: column;
        padding-top:0;
        gap: 10px;
    }

    .newscontent-column {
        width: 100%;
        margin-top: 20px;
    }
}

@media (max-width: 640px) {
    .div_coll_beau h1,
    .div_coll_beau h2 {
        font-size: 24px;
    }

    .newscontent p,
    .div_coll_beau p {
        font-size: 18px!important;
    }

    .single-news .div_coll_beau {
        margin-bottom: 20px;
    }

    .page_banner_meta {
        font-size: 12px;
    }

    .camp_event_tags {
        column-gap: 10px;
        row-gap: 0;
        margin-bottom: 20px;
    }

    .fiche_bottom_img__item {
        width:100%;
    }
}

.div_fiche_bottom_img {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
}

.fiche_bottom_img__item {
  margin: 0;
  flex: 0 0 auto; 
}

.fiche_bottom_img__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

.fiche_bottom_img__item.fullwidth-row {
  flex: 1 1 100%;
}
.fiche_bottom_img__item.fullwidth-row .fiche_bottom_img__img {
  width: 100%;
  height: auto;
}

/* add once to your theme */
.reveal-line { 
  display: block;
  overflow: hidden;
}
.reveal-line__inner {
  display: inline-block;
  will-change: transform, opacity;
}
/* avoid FOUC on elements waiting to animate */
[data-reveal], .js-reveal, .slideup_reveal {
  visibility: hidden; /* optional FOUC guard */
}

/* Mask the slide-up */
.page-banner-img .div_fiche_thum { overflow: hidden; }

/* Smooth GPU transforms on the image */
[data-banner-reveal], 
.page-banner-img .div_fiche_thum img {
  will-change: transform, opacity;
  transform-origin: center center;
}

/* Ensure rounded corners from the very first frame */
.page-banner-img .div_fiche_thum {
  overflow: hidden;
  border-radius: var(--radius-md);      /* same radius as your img */
  will-change: transform;
  height: 100%;
}

/* Smooth zoom on the image, with proper clipping */
.page-banner-img .div_fiche_thum img,
[data-banner-reveal] img {
  display: block;
  width: 100%;
  height: 100%
}

/* wrapper stays rounded from first paint */
.reveal-block-clip {
  overflow: hidden;
  border-radius: inherit; /* picks up your existing radius */
}

/* smoother transforms */
[data-reveal-block],
.page-banner-img .div_fiche_thum {
  will-change: transform;
}

[data-reveal-block] img {
  will-change: transform;
  transform-origin: center center;
}

/* =============================== */
/* CARDS: DESKTOP HOVER vs MOBILE  */
/* =============================== */


/* Mobile / touch: no slide-up hover overlay — show the tags as a static
   block beneath the image instead (no transform, full opacity, sitting
   inside normal flow). */
@media (max-width: 640px) {
  .grid_projets_boxes .projet_box .projet_info {
    position: static;
    transform: none !important;
    width: 100%;
    background: transparent;
    padding: 12px 0 0;
  }
  .grid_projets_boxes .projet_box .projet_tags {
    margin-bottom: 0;
  }
  .grid_projets_boxes .projet_box .projet_tags ul {
    padding: 0;
  }
  .grid_projets_boxes .projet_box .projet_tags li {
    font-size: 12px;
  }
}

/* Mobile footer: show the two logos side-by-side */
@media (max-width: 640px) {

  .footer_content {
    flex-wrap: wrap;
  }

  /* Make the two logo blocks half width each */
  .footer_content .div_moba_logo,
  .footer_content .div_movia_logo {
    width: 50%;
    flex:1;
  }

  /* Adjust padding & restore vertical divider between them */
  .div_moba_logo {
    padding-right: 20px;
    padding-bottom: 0;
    position: relative;
  }

  .div_mobia_logo { /* typo guard just in case */
    padding-left: 20px;
  }

  .div_moba_logo:after {
    height: 100%;
    width: auto;
    right: 0;
    top: 0;
    border-right: 1px solid #fff;
    border-bottom: none;
  }

  .footer_content .btn{
    width:100%;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 30px;
  }

  .footer_content ul li a {
    font-size: 16px;
    line-height: 1.5;
  }

  .footer_content .div_moba_logo ul, 
  .footer_content .div_movia_logo ul{
    margin-top:20px;
  }
}

.btn__icon {
  display: inline-flex;
  align-items: center;
    position: relative;
}

.btn__icon img {
  display: block;
  width: 1.5em;
  height: 1.5em;
}

/* --- Campagnes filters: normalize buttons on iOS --- */
.sec_filter_nos .filters-toggle,
.sec_filter_nos .filter-btn {
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent; /* remove grey/blue tap flash */
  outline: none;
  box-shadow: none;
  color: #050505;          /* your text color */
  margin-bottom: 15px;
}

/* remove iOS blue outline when tapped */
.sec_filter_nos .filters-toggle:focus,
.sec_filter_nos .filters-toggle:active,
.sec_filter_nos .filter-btn:focus,
.sec_filter_nos .filter-btn:active {
  outline: none;
  box-shadow: none;
}

/* (optional but nice) keep an accessible focus style for keyboard users */
@media (hover: hover) and (pointer: fine) {
  .sec_filter_nos .filters-toggle:focus-visible,
  .sec_filter_nos .filter-btn:focus-visible {
    outline: 2px solid #050505;
    outline-offset: 3px;
  }
}