/*------------------------ Responsive and phone menu ----------------------*/
/*-------------------------------------------------------------------------*/
@media (max-width: 1350px) {
  #btn-scroll-top {
    padding-bottom: 0 !important;
    align-items: center !important;
  }
}

@media (max-width: calc(840 / 16 * 1rem)) {
  /* LOGO */
  .logo-icon {
    margin-left: calc(15 / 16 * 1rem) !important;
  }
  .logo-link {
    gap: 0;
  }
  .nav-logo-group .logo-icon {
    height: 1.8rem;
    width: 1.8rem;
  }
  .nav-logo-group .logo-text {
    height: 1.4rem;
    width: auto;
    transform: translateY(calc(8 / 16 * 1rem));
  }
  /* NAV SEPARATOR */
  .nav-separator {
    width: calc(2 / 16 * 1rem);
    height: 1.6rem;
    background-color: var(--color-nav-separator);
    border-radius: calc(1 / 16 * 1rem);
    margin: 0 calc(15 / 16 * 1rem);
    flex-shrink: 0;
  }
  /* LANG */
  .lang-switcher .lang-text-full {
    display: none !important;
  }
  .lang-switcher .lang-abbr {
    display: inline !important;
  }
  /* DROPDOWN MENU */
  .dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: calc(12 / 16 * 1rem);
    padding: calc(4 / 16 * 1rem) calc(2 / 16 * 1rem);
    text-decoration: none;
    white-space: nowrap;
    font-weight: var(--fw-bold);
    font-size: 1.2rem;
    color: var(--color-dropdown-item);
    border: calc(2 / 16 * 1rem) solid transparent;
  }
  .menu-icon-image {
    height: 1.5rem;
    width: 1.5rem;
    vertical-align: middle;
    flex-shrink: 0;
  }
  .warning-icon {
    width: 2.8rem !important;
  }
  .warning-text {
    font-size: .9rem !important;
  }
  /* Boutons précédent / suivant */
  .prev, .next {
    font-size: 1rem !important;
  }
  /* LA LÉGENDE */
  .carousel_caption_text {
    font-size: .85rem !important;
  }
  .page-title-wrapper {
    gap: calc(0.1rem * 0.95);
  }
  .page-title-icon-container {
    width: calc(2rem * 0.95);
    height: calc(2rem * 0.95);
    margin-right: var(--space-xs);
  }
  .page-title-icon {
    width: calc(1.4rem * 0.95);
    height: calc(1.4rem * 0.95);
  }
  h1, .h1-style {
    font-size: calc(1.3rem * 0.95);
  }
}

@media (max-width: calc(635 / 16 * 1rem)) {
  :root {
    --share-text-size: 1rem;
    --share-icon-size: 1.6rem;
  }
  body {
    padding-top: var(--nav-height-desktop);
  }
  .nav-link::after,
  .dropdown-toggle::after,
  .triangle,
  [class*="triangle"] {
    display: none !important;
    content: none !important;
  }
  .lang-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(29 / 16 * 1rem) !important;
    height: calc(29 / 16 * 1rem) !important;
    padding: 0 !important;
    color: var(--source-color-white) !important;
    background-color: var(--source-color-black) !important;
    border-radius: var(--radius-sm, calc(4 / 16 * 1rem)) !important;
    border: none !important;
    margin-right: calc(15 / 16 * 1rem);
    margin-left: calc(15 / 16 * 1rem);
  }
  .description {
    font-size: var(--font-size-600-description-lead);
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
  }
  .br-desktop-only {
    display: none !important;
  }
  .site-width-container,
  main,
  .page-content-container {
    padding-bottom: 0;
    margin-bottom: 0;
  }
  main.page-content-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  .main-nav,
  .nav-container,
  .nav-right-group,
  .lang-switcher {
    max-width: 100%;
    overflow-x: hidden;
  }
  .site-width-container {
    width: 100%;
    max-width: 97% !important;
    padding-left: var(--space-md) !important;
    padding-right: var(--space-md) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }
  .nav-container,
  .nav-right-group,
  .nav-logo-group,
  .nav-links.is-open li {
    border-right: none !important;
    border-left: none !important;
  }
  .nav-separator {
    display: none !important;
  }
  .nav-toggler {
    display: flex !important;
    height: calc(25 / 16 * 1rem) !important;
    width: calc(25 / 16 * 1rem) !important;
    border: none !important;
    background-color: transparent !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 0 !important;
  }
  .nav-toggler-icon {
    width: 100%;
    height: calc(2 / 16 * 1rem) !important;
    margin: calc(3 / 16 * 1rem) 0;
    background-color: var(--source-color-accent-one) !important;
    color: var(--source-color-accent-one) !important;
  }
  .balanced-text {
    font-size: 1rem;
    max-width: 90%;
  }
  .balanced-text br {
    display: none;
  }
  .balanced-text br + br {
    display: block;
    line-height: 1.4em;
  }
  .main-nav .nav-container {
    padding-left: 0 !important;
    margin: 0 auto !important;
    max-width: 97%;
  }
  [data-nav-tooltip]:hover::after,
  #theme-toggle[data-nav-tooltip]:hover::after {
    display: none !important;
    content: none !important;
  }
  #theme-toggle::after,
  #theme-toggle:hover::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }
  .lang-link {
    border: none;
    font-size: var(--font-size-media-lang-link);
    font-weight: var(--fw-normal);
    padding: var(--space-sm);
  }
  .cta-vegetal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    background-color: var(--color-green-cta-main);
    color: var(--source-color-white);
    border-radius: calc(50 / 16 * 1rem);
    border: none;
    text-decoration: none;
    font-size: var(--font-size-md);
    cursor: pointer;
    box-shadow: 0 calc(4 / 16 * 1rem) calc(6 / 16 * 1rem) rgba(0, 0, 0, 0.2);
    height: var(--space-xl-plus);
  }
  .index-step-icon {
    width: calc(40 / 16 * 1rem) !important;
    height: calc(40 / 16 * 1rem) !important;
    padding: calc(8 / 16 * 1rem) !important;
  }
  .cta-vegetal {
    font-size: var(--font-size-base);
  }
  .site-width-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: var(--space-md) !important;
    padding-right: var(--space-md) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }
  .nav-subtitle-parentheses {
    font-size: 0.85em;
    font-style: italic;
    color: #b4ffc7;
  }
  .ws-card-right-block {
    width: calc(100 / 16 * 1rem) !important;
    margin-left: calc(10 / 16 * 1rem) !important;
    margin-bottom: calc(5 / 16 * 1rem) !important;
    position: static !important;
  }
  .ws-card-image-icon {
    width: calc(100 / 16 * 1rem) !important;
    height: auto !important;
  }
  .ws-card {
    padding-bottom: calc(60 / 16 * 1rem) !important;
  }
  .ws-card-action-btn {
    position: absolute !important;
    left: 50% !important;
    bottom: calc(15 / 16 * 1rem) !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: max-content !important;
  }
  .ws-cards-grid {
    grid-template-columns: 1fr !important;
  }
  .warning-icon {
    width: 2.8rem !important;
  }
  .warning-text {
    padding-top: .8rem !important;
    font-size: .9rem !important;
  }
  .prev, .next {
    top: 35% !important;
    font-size: 1rem !important;
  }
  .carousel_caption_text {
    font-size: .85rem !important;
  }
  .dropdown-toggle::after {
    display: none !important;
    content: none !important;
  }
  .page-title-wrapper {
    gap: calc(0.1rem * 0.90);
  }
  .page-title-icon-container {
    width: calc(2rem * 0.90);
    height: calc(2rem * 0.90);
    margin-right: var(--space-xs);
  }
  .page-title-icon {
    width: calc(1.4rem * 0.90);
    height: calc(1.4rem * 0.90);
  }
  h1, .h1-style {
    font-size: calc(1.3rem * 0.93);
  }
  .page-title-wrapper {
    flex-wrap: wrap;
    justify-content: center;
  }
  .page-title-wrapper > :not(button.share-btn-text) {
    display: flex;
    align-items: center;
  }
  button.share-btn-text {
    flex-basis: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 10px;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: fit-content !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: calc(550 / 16 * 1rem)) {
  .cta-vegetal {
    margin: var(--space-md) 0;
    font-weight: var(--fw-normal) !important;
    font-size: 1rem !important;
    height: var(--space-xl);
  }
  .cta-vegetal::before {
    width: calc(15 / 16 * 1rem);
    height: calc(15 / 16 * 1rem);
    margin-right: calc(2 / 16 * 1rem);
  }
}

@media (max-width: calc(390 / 16 * 1rem)) {
  .activist-grid {
    grid-template-columns: 1fr !important;
    gap: calc(20 / 16 * 1rem) !important;
  }
  .activist-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    width: 100% !important;
    max-width: calc(350 / 16 * 1rem) !important;
    margin: 0 auto !important;
    padding: calc(15 / 16 * 1rem) calc(10 / 16 * 1rem) !important;
  }
  .img-container,
  .activist-info {
    display: contents !important;
  }
  .activist-img {
    grid-row: 1 !important;
    width: 100% !important;
    max-width: calc(200 / 16 * 1rem) !important;
    height: auto !important;
    display: block !important;
    margin-bottom: calc(15 / 16 * 1rem) !important;
  }
  .activist-info h3 {
    grid-row: 2 !important;
    margin-top: 0 !important;
    margin-bottom: calc(10 / 16 * 1rem) !important;
    font-size: calc(20 / 16 * 1rem) !important;
    text-align: center !important;
  }
  .activist-description {
    grid-row: 3 !important;
    font-size: var(--font-size-sm) !important;
    line-height: 1.5 !important;
    margin-bottom: calc(15 / 16 * 1rem) !important;
    text-align: center !important;
  }
  .platform-link {
    grid-row: auto !important;
    display: flex !important;
    width: calc(180 / 16 * 1rem) !important;
    margin: 0 auto calc(10 / 16 * 1rem) auto !important;
    padding: calc(10 / 16 * 1rem) !important;
    justify-content: center !important;
  }
  .platform-link:last-child {
    margin-bottom: 0 !important;
  }
  .description {
    font-size: calc(var(--font-size-600-description-lead) * 0.85) !important;
  }
}
@media (max-width: calc(580 / 16 * 1rem)) {
  h1, .h1-style {
    font-size: 1.3rem !important;
  }
}
@media (max-width: calc(385 / 16 * 1rem)) {
  .cta-vegetal::before {
    width: calc(20 / 16 * 1rem);
    height: calc(20 / 16 * 1rem);
  }
}