/* ==========================================================================
   Mobile styles — applies at viewport widths up to 580px.
   Loaded after tablet.css, so rules here override both desktop and tablet.
   ========================================================================== */

@media (max-width: 580px) {
  .ui-banner-video-wrapper {
    min-height: 458.36px; /* fixed minimum on mobile */
  }
  /* end event info bars  */
  .ui-banner-video-wrapper .ui-banner-main-video {
    top: unset;
    height: calc(100% - 200px); /* same 200px gap above the video as before */
  }
  /* menu mobile  */
  .ui-mobile-menu .ui-mobile-menu-head .ui-logo img {
    width: 117px;
  }

  .ui-mmh-body ul li {
    padding: 12px 10px;
  }

  .ui-mmh-body ul li a {
    font-size: 22px;
    margin-bottom: 0px;
  }

  .ui-submenu-wrapper .ui-submenu-header a span {
    font-size: 10px;
  }

  .ui-submenu-wrapper .ui-submenu-header h3 {
    font-size: 22px;
  }

  .ui-submenu-wrapper .ui-submenu-header {
    margin-bottom: 5px;
  }

  .ui-submenu-body .ui-sm-group-links label {
    font-size: 12px;
  }

  .ui-submenu-body .ui-sm-group-links ul li a {
    font-size: 14px;
  }

  .ui-submenu-body .ui-sm-group-links {
    margin-bottom: 15px;
  }
  /* end menu mobile  */

  /* engagement */
  .ui-engagement-wrapper .ui-engagement-row {
    flex-direction: column;
    gap: 20px;
  }

  .ui-engagement-wrapper .ui-engagement-row .ui-engagement-title label {
    font-size: 16px;
  }

  .ui-engagement-wrapper .ui-engagement-row .ui-engagement-title h3 {
    font-size: 25px;
  }

  .ui-engagement-wrapper
    .ui-engagement-row
    .ui-engagement-content
    .ui-engagement-text {
    padding-top: 0;
    font-size: 16px;
    margin-bottom: 20px;
  }

  .ui-engagement-wrapper
    .ui-engagement-row
    .ui-engagement-content
    .ui-engagement-states
    .ui-engagement-state
    p {
    font-size: 16px;
  }

  .ui-engagement-wrapper
    .ui-engagement-row
    .ui-engagement-content
    .ui-engagement-states
    .ui-engagement-state
    h4 {
    font-size: 25px;
  }
  .footer-left {
    padding: 30px 10px 34px 10px;
    gap: 20px;
  }
  .footer-header {
    gap: 5px;
  }
  .footer-left .futur-section {
    display: block;
    margin-top: 20px;
  }
  .footer-left .futur-section h3 {
    font-size: 25px;
    line-height: 18px;
  }
  .footer-left .futur-section .be-part {
    margin-top: 14px;
    gap: 5px;
  }
  .footer-left .futur-section .be-part img {
    width: 20px;
    height: 20px;
  }
  .footer-left .futur-section .be-part p {
    font-size: 16px;
    line-height: 19px;
  }
  .footer-left .futur-section p {
    font-size: 16px;
    margin-top: 20px;
  }
  .footer-left .footer-links .list-desktop {
    display: none;
  }
  .footer-left .footer-links .list-mobile {
    display: flex;
  }
  .footer-left .footer-links ul li {
    font-size: 14px;
    line-height: 17px;
  }
  .footer-copyright {
    display: none;
  }
  .footer-copyright-mobile {
    display: block;
    background-color: #111;
    padding: 19px 10px 6px; /* tight above the copyright row */
  }
  .footer-copyright-mobile .footer-copyright-mobile-logos {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
  }
  .footer-copyright-mobile .footer-copyright-mobile-logos .mtl-logo {
    width: 40px;
    height: 32px;
  }
  .footer-copyright-mobile .footer-copyright-mobile-logos .socials {
    display: flex;
    gap: 23px;
    align-items: center;
  }
  .footer-copyright-mobile .footer-copyright-mobile-text {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* privacy link on the page centre | credit */
    align-items: center;
    gap: 5px;
    font-size: 11px;
    line-height: 13px;
    text-transform: uppercase;
  }
  .footer-copyright-mobile .footer-copyright-mobile-text p:not(:last-child) {
    grid-column: 2;
    justify-self: center;
    text-align: center;
  }
  .footer-copyright-mobile .footer-copyright-mobile-text p:last-child {
    grid-column: 3;
    justify-self: end;
  }
  .footer-legal {
    padding: 0 10px 19px;
    font-size: 10px;
    line-height: 12px;
  }
  /* end engagement  */

  /* recap  */
  .ui-recap {
    min-height: 275px; /* fixed minimum on mobile */
  }

  /* end recap  */

  /* programmes  */
  .ui-programmes .ui-programmes-col {
    flex: 0 0 85vw;
    min-height: 434px; /* fixed minimum on mobile */
    padding: 30px 20px;
  }
  .ui-programmes .ui-programmes-col .ui-programmes-col-badge {
    font-size: 14px;
  }
  .ui-link-bar {
    font-size: 16px;
    padding: 21px 10px;
    height: auto;
  }
  /* end programmes  */

  /* ui-theme */
  .ui-theme {
    padding: 25px 10px;
    padding-bottom: 0;
    display: block;
    overflow: hidden;
  }

  .ui-theme .ui-link-bar {
    display: flex;
    width: calc(100% + 20px);
    margin-left: -10px;
  }

  .ui-theme .ui-theme-black-arrow {
    display: none;
  }

  .ui-theme .ui-theme-label span {
    font-size: 16px;
  }

  .ui-theme .ui-theme-label {
    margin-bottom: 10px;
  }

  .ui-theme .ui-theme-title h2 {
    font-size: 25px;
  }

  .ui-theme .ui-theme-title {
    margin-bottom: 20px;
  }

  .ui-theme .ui-theme-desc {
    padding-right: 0;
    margin-bottom: 20px;
  }

  .ui-theme .ui-theme-list li {
    font-size: 18px;
    padding-left: 10px;
  }

  .ui-theme .ui-theme-list ul {
    margin-bottom: 0;
  }
  /* end ui-theme */

  /* speakers — pinned section, cards scroll horizontally, CTA at bottom */
  .ui-speakers {
    padding: 40px 10px;
    padding-bottom: 0;
    position: relative;
    padding-bottom: 46px;
  }

  .ui-speakers .ui-speakers-inner {
    overflow: hidden;
    display: flex;
    flex-direction: column;

  }

  .ui-speakers .ui-speakers-label span {
    font-size: 14px;
  }

  .ui-speakers .ui-speakers-title h2 {
    font-size: 25px;
  }

  .ui-speakers .ui-speakers-title {
    margin-bottom: 30px;
  }

  /* grid becomes a column: horizontal card track on top, CTA below */
  .ui-speakers .ui-speakers-grid {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 10px;
  }

  .ui-speakers .ui-speakers-track {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: max-content;
    will-change: transform;
  }

  .ui-speakers .ui-speakers-card {
    flex: 0 0 220px;
    width: 220px;
    height: 275px;
    aspect-ratio: 4 / 5;
  }

  .ui-speakers .ui-speakers-card .ui-speakers-card-info {
    padding: 10px;
  }

  .ui-speakers .ui-speakers-card .ui-speakers-card-info h3 {
    font-size: 20px;
    margin-bottom: 6px;
  }

  .ui-speakers .ui-speakers-card .ui-speakers-card-info p {
    font-size: 12px;
  }

  .ui-speakers .ui-speakers-cta {
    margin-top: 0;
    width: 100%;
    aspect-ratio: auto;
    min-height: 153px;
    gap: 10px;
    padding-bottom: 50px;
  }

  .ui-speakers .ui-speakers-cta p {
    font-size: 16px;
  }

  .ui-speakers .ui-speakers-cta .ui-speakers-cta-count {
    font-size: 12px;
    height: 19px;
  }
  /* end speakers */

  /* companies — 2 cards per row, no hover, icon-only badge */
  .ui-companies {
    padding-inline: 10px;
  }

  .ui-companies .ui-companies-label span {
    font-size: 14px;
  }

  .ui-companies .ui-companies-title h2 {
    font-size: 25px;
  }

  .ui-companies .ui-companies-left .ui-companies-head {
    margin-bottom: 30px;
  }

  .ui-companies .ui-companies-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 15px;
    row-gap: 20px;
  }

  /* the "visiter siteweb" pill becomes a persistent white arrow icon */
  .ui-companies .ui-companies-card .ui-companies-visit {
    opacity: 1;
    background: transparent;
    padding: 0;
    gap: 0;
    font-size: 0;
  }

  .ui-companies .ui-companies-card .ui-companies-visit svg {
    width: 10px;
    height: 10px;
    aspect-ratio: 1 / 1;
  }

  .ui-companies .ui-companies-card .ui-companies-visit svg path {
    fill: #fff;
  }

  .ui-companies .ui-companies-cta {
    background: #0082fe;
    padding-inline: 3px;
  }

  .ui-companies .ui-companies-cta p,
  .ui-companies .ui-companies-cta .ui-companies-cta-btn {
    color: #fff;
  }

  .ui-companies .ui-companies-cta .ui-companies-cta-btn {
    border-color: #fff;
    font-size: 14px;
    margin-bottom: 40px;
  }

  .ui-companies .ui-companies-cta p {
    font-size: 16px;
    padding-inline: 15px;
  }

  .ui-companies .ui-companies-cta .ui-companies-cta-count {
    font-size: 14px;
  }
  /* end companies */

  /* activities — pinned section, cards scroll horizontally (tablet card UI) */
  .ui-activities {
    padding: 0;
    position: relative;
  }

  .ui-activities .ui-activities-inner {
    position: sticky;
    top: var(--header-h, 64px);
    height: calc(100vh - var(--header-h, 64px));
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .ui-activities .ui-activities-head {
    padding-inline: 20px;
    margin-bottom: 25px;
  }

  .ui-activities .ui-activities-label span {
    font-size: 14px;
  }

  .ui-activities .ui-activities-title h2 {
    font-size: 25px;
  }

  .ui-activities .ui-activities-title {
    margin-bottom: 0;
  }

  /* grid becomes the horizontal track, filling the space below the head */
  .ui-activities .ui-activities-grid {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: stretch;
    width: max-content;
    gap: 10px;
    will-change: transform;
  }

  .ui-activities .ui-activities-card {
    flex: 0 0 calc(100vw - 20px);
    width: calc(100vw - 20px);
  }

  .ui-activities .ui-activities-card-media img {
    width: 100%;
    height: 406px;
    object-fit: cover;
    flex-shrink: 0;
  }

  .ui-activities .ui-activities-explore-name {
    font-size: 20px;
  }
  /* end activities */

  /* partners — full-bleed cards scroll; CTA drops below (out of scroll) */
  .ui-partners {
    padding: 40px 0 20px;
  }

  .ui-partners .ui-partners-inner {
    justify-content: flex-start;
  }

  .ui-partners .ui-partners-head {
    padding-inline: 10px;
    margin-bottom: 30px;
  }

  .ui-partners .ui-partners-label {
    margin-bottom: 10px;
  }

  .ui-partners .ui-partners-label span {
    font-size: 14px;
  }

  .ui-partners .ui-partners-title h2 {
    font-size: 25px;
  }

  /* track fills the pinned area: cards row grows, CTA is a fixed height */
  .ui-partners .ui-partners-track {
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 0;
    width: 100%;
  }

  .ui-partners .ui-partners-cards {
    display: flex;
    flex: 1;
    min-height: 265px;
    flex-direction: row;
    gap: 10px;
    padding-inline: 10px;
    width: max-content;
    will-change: transform;
  }

  /* cards stretch to fill the row height → the block is always full-height */
  .ui-partners .ui-partners-card {
    flex: 0 0 calc(100vw - 20px);
    width: calc(100vw - 20px);
    max-height: none;
    aspect-ratio: auto;
  }

  .ui-partners .ui-partners-br {
    display: inline;
  }

  .ui-partners .ui-partners-card .ui-partners-visit {
    font-size: 14px;
    height: 25px;
    padding: 0 7px;
    gap: 5px;
  }

  /* CTA — full width, below the cards, not part of the scroll */
  .ui-partners .ui-partners-cta {
    height: 165px;
    margin-inline: 10px;
  }

  .ui-partners .ui-partners-cta-content {
    flex: 1;
    width: auto;
    min-height: 153px;
    padding-bottom: 50px;
    background: #0082fe;
  }

  /* blue panel → white text/border (the count pill keeps its own colors) */
  .ui-partners .ui-partners-cta-content p,
  .ui-partners .ui-partners-cta-btn {
    color: #fff;
  }

  .ui-partners .ui-partners-cta-btn {
    border-color: #fff;
    font-size: 14px;
    padding: 3px 10px;
  }

  .ui-partners .ui-partners-cta-content p {
    font-size: 16px;
  }

  .ui-partners .ui-partners-cta-count {
    font-size: 14px;
  }
  /* Desktop uses object-fit: none (720x340 art drawn 1:1). At 142px the box
     would crop the diamond's top and bottom, so scale it instead — cover
     still crops toward the outer edges only, keeping the gate seam intact. */
  .ui-reservation .reservation-gate .gate-side {
    height: 142px;
    object-fit: cover;
  }
  .ui-reservation {
    padding-top: 33px;
    padding-bottom: 80px;
  }

  .ui-reservation .reservation-title {
    font-size: 32px;
    max-width: 310px;
  }
  /* The stub (.reservation-card-right) comes first in the markup, so stacking
     puts it on top and the perforation moves from the body's right edge to its
     top edge — horizontal gradient instead of vertical. */
  .reservation-card {
    display: block;
  }

  .reservation-card-left::after {
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    width: 100%;
    /* Desktop's vertical line is 5px thick with 10px dashes; scaled by the same
       0.4576 as the rest of the stub that's 2.28px thick with 4.57px dashes.
       The line is horizontal here, so thickness is `height` and the dash length
       runs along the gradient axis — the two swap roles versus desktop. */
    height: 2.28px;
    background-image: repeating-linear-gradient(
      to right,
      black 0 4.57px,
      transparent 4.57px 9.14px
    );
  }
  .reservation-card-right {
    flex-direction: row;
    padding: 5px 5px;
    align-items: center;
    background-image: url('../assets/bg-reservation-card-right-mobile.png');
    background-size: cover;
  }
  .reservation-card-right div {
    display: flex;
    gap: 5px;
  }
  .reservation-card-right svg {
    width: 18.302px;
    height: 16.733px;
    margin: 0;
  }
  .reservation-card-right img {
    margin: 0;
    width: 36.605px;
    height: 36.605px;
    flex-shrink: 0;
  }
  .reservation-card-right p {
    font-size: 5px;
    line-height: 8px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    max-width: none;
    height: 40px;
    margin: 0;
  }
  /* No fanned-out rotation on mobile — the ticket reveals flat. */
  .ui-reservation.is-revealed .reservation-card-left,
  .ui-reservation.is-revealed .reservation-card-right {
    transform: none;
  }
  .reservation-card-left {
    width: 300px;
    background-image: url('../assets/bg-reservation-card-left-mobile.png');
    background-size: cover;
  }
  .reservation-card-left-content {
    min-height: 116px;
    padding: 12px 12px 10px;
  }
  .reservation-card-left-content-head-item {
    gap: 2px;
  }
  .reservation-card-left-content-head-label {
    font-size: 12px;
    line-height: 14px;
  }
  .reservation-card-left-content-head-value {
    font-size: 8px;
    line-height: 10px;
  }
  .reservation-card-left-content h4 {
    font-size: 18px;
    line-height: 130%;
  }
  .reservation-card-left-cta-btn {
    padding: 11.5px;
    font-size: 16px;
    line-height: 19px;
  }
  /* end partners */

  /* infolettre — title on top, input + button split 50/50 below */
  .ui-infolettre {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 20px 10px;
  }

  .ui-infolettre .ui-infolettre-title {
    margin-bottom: 15px;
  }

  .ui-infolettre .ui-infolettre-title h2 {
    font-size: 20px;
  }

  .ui-infolettre .ui-infolettre-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
  }

  .ui-infolettre .ui-infolettre-input {
    flex: 1;
    width: auto;
    height: 45px;
    font-size: 14px;
  }

  .ui-infolettre .ui-infolettre-submit {
    flex: 1;
    width: auto;
    height: 45px;
    font-size: 16px;
  }

  .ui-infolettre .ui-infolettre-submit svg {
    width: 15px;
    height: 15px;
  }

  .ui-infolettre .ui-infolettre-msg {
    margin-top: 10px;
    font-size: 13px;
  }
  /* end infolettre */
}

/* ==========================================================================
   Small phones (iPhone SE — 320×568): short viewport, let the activities
   image fill the card height so the bottom bar isn't clipped.
   ========================================================================== */
@media (max-width: 320px) {
  .ui-activities .ui-activities-card-media,
  .ui-activities .ui-activities-card-media img {
    height: 100%;
  }
}

/* ==========================================================================
   Small phones (< 400px): shrink the companies CTA content to fit.
   ========================================================================== */
@media (max-width: 400px) {
  .ui-companies .ui-companies-cta .ui-companies-cta-btn {
    border-color: #fff;
    font-size: 12px;
    margin-bottom: 25px;
    padding: 5px 12px;
  }

  .ui-companies .ui-companies-cta .ui-companies-cta-count {
    font-size: 12px;
    height: 25px;
  }

  .ui-companies .ui-companies-cta p {
    font-size: 12px;
    padding-inline: 10px;
  }
}

/* ==========================================================================
   Page CTA buttons on phones — single source of truth.

   Every page template ships its own button class (.bl-send, .art-send,
   .prt-send …) with the same base of 18px / 16px 28px. Their labels are long
   uppercase French strings ("Voir les offres disponibles"), which are wider
   than a 320px screen, so below 520px they wrap and step down to 14px with
   tighter padding. Keeping that here rather than in each page stylesheet is
   what stops the pages drifting to different sizes.

   The `body` prefix is deliberate: page stylesheets are enqueued AFTER this
   file (see mtl_enqueue_assets) and a media query adds no specificity, so a
   bare `.bl-send` here would lose the cascade to the page's own base rule.
   The two compound selectors mirror their page's own selector for the same
   reason.
   ========================================================================== */
@media (max-width: 520px) {
  body .ui-404-btn,
  body .ui-apropos-cta .ui-apropos-cta-btn,
  body .bl-send,
  body .bl-btn,
  body .ct-send,
  body .ct-cta-btn,
  body .ed-cta .ed-send,
  body .int-send,
  body .mm-send,
  body .nw-cta .nw-send,
  body .prt-send,
  body .art-send,
  body .dt-send {
    width: 100%;
    justify-content: center;
    padding: 13px 16px;
    font-size: 14px;
    letter-spacing: 0.6px;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* News details hero — smaller type on phones (the 580/300 ratio is set on the
   base rule for every screen). `body` prefix so these win over
   single-actualite.css (loaded after this file). */
@media (max-width: 580px) {
  body .art-hero-title {
    font-size: 17px;
  }

  body .art-hero-meta {
    font-size: 12px;
  }

  body .art-hero-rule {
    height: 3px;
  }

  body .art-hero-badge {
    padding: 4px 8px;
  }
}