.layout-content .fullpage.projets {
  padding-top: 5vh;
  > .intro_map {
    // Le bloc carte (block--sitesmap-block) est partagé avec l'accueil.
    // Ici on n'affiche pas le CTA "Voir les projets" : on est déjà sur l'index.
    footer.fluo_links { display: none; }
    @media (min-width: $breakpoint_desktop) {
      display: flex;
      flex-direction: row;
    }
    > header {
      //margin-right: 5vw;
      padding: 0 3vw;
      margin-bottom: 6vh;
      @include main_text_content();
      @media (min-width: $breakpoint_desktop) {
        margin-bottom: 0;
        max-width: 55vw;
      }
      h1, h2, h3,
      h4, h5, h6 {
        padding: 0 !important;
        margin: 0 !important;
        @include sous_titre_alt();
      }
      > h2 {
        margin-bottom: 5vh !important;
        padding-bottom: 3.5vh !important;
        border-bottom: 1px solid $teal;
        @include main_title();
        @media (min-width: $breakpoint_desktop) {
          width: 100%;
        }
      }
      p {
        margin-bottom: 1rem;
      }
    }
    .projets_intro {
      display: none;
    }
    #sites-map-container {
      width: 70%;
      padding: 0 !important;
      padding-bottom: 5vh !important;
      @media screen and (min-width: $breakpoint_tablet) {
        width: 50%;
      }
      @media (min-width: $breakpoint_desktop) {
        //margin-right: 8vw !important;
        margin: 0 2vw;
        margin-right: 3vw;
        margin-top: 5vh;
        padding-bottom: 0;
        //width: 85%;
      }
      #popup {
        // Cohérence visuelle avec la home : tooltip sur fond gris pâle.
        background-color: $page_bg;
        h3 {
          @include sous_titre();
        }
        p {
          @include main_text_content();
        }
      }
      // Carte plus petite ici → cercles plus petits.
      // Le SVG point.svg fait 18x18 et est partagé avec la home ; on réduit
      // visuellement sans toucher au SVG.
      #projects_icons > svg {
        width: 12px;
        height: 12px;
      }
    }
  }
  > .projets_list {
    display: grid;
    margin: 3vh $x_margin;
    margin-top: 8vh;
    grid-template-columns: 1fr;
    gap: 2rem;
    @media (min-width: $breakpoint_tablet) {
        grid-template-columns: repeat(2, 1fr);
    }
    @media (min-width: $breakpoint_desktop) {
        grid-template-columns: repeat(3, 1fr);
    }
    > h3 {
      display: none;
    }
    > .views-row{
      display: grid;
      // Colonne image (gauche) | colonne textes (droite).
      grid-template-columns: 0.4fr 1fr;
      grid-template-rows: auto auto auto auto auto;
      grid-column-gap: 1rem;
      grid-row-gap: 0.5rem;
      > .views-field-field-diaporama {
        grid-column: 1;
        grid-row: 1 / -1;
        align-self: start;
        overflow: hidden;
        > .field-content {
          display: block;
          width: 100%;
          > a {
            aspect-ratio: 1/1;
            width: 100%;
            display: flex;
            align-items: start;
            justify-content: center;
            mask-image: url('/themes/erabletheme/assets/shapes/shape_1.svg');
            mask-repeat: no-repeat;
            mask-size: 100% auto;
            mask-position: center;
            img {
              width: auto;
              height: 100%;
            }
          }
        }
      }
      // Lieu (1re ligne droite) : Vogun gris-text, petit.
      > .views-field-field-localisation-textuel {
        grid-column: 2;
        grid-row: 1;
        font-family: $vogun;
        font-weight: $fw_medium;
        font-size: $fs_sm;
        color: $text_grey;
        line-height: $lh_tight;
        a { color: inherit; text-decoration: none; }
      }
      // Titre (2e ligne droite) : Vogun plus grand mais pas trop.
      > .views-field-title {
        grid-column: 2;
        grid-row: 2;
        font-family: $vogun;
        font-weight: $fw_medium;
        font-size: $fs_lg;
        color: black;
        line-height: $lh_tight;
        // Filet brand color en bas, sur toute la largeur disponible.
        padding-bottom: 0.6rem;
        border-bottom: 1px solid $fluo_green;
        a { color: inherit; text-decoration: none; }
      }
      // Sous-titre (3e ligne droite) : Marianne gris-text.
      > .views-field-field-sous-titre {
        grid-column: 2;
        grid-row: 3;
        font-family: $marianne;
        font-weight: $fw_regular;
        font-size: $fs_sm;
        color: $text_grey;
        line-height: $lh_normal;
        a { color: inherit; text-decoration: none; }
      }
      // Étiquettes thématiques (4e ligne droite) : fond blanc, contour brand.
      > .views-field-field-th {
        grid-column: 2;
        grid-row: 4;
        ul {
          padding: 0;
          margin: 0;
          list-style: none;
          display: flex;
          flex-wrap: wrap;
          gap: 0.5rem;
          li {
            display: inline-block;
            font-family: $marianne;
            font-weight: $fw_regular;
            font-size: $fs_xs;
            background-color: white;
            border: 1px solid $fluo_green;
            transition: background-color 0.3s ease;
            &:hover {
              background-color: $fluo_green;
            }
            a {
              display: block;
              color: black;
              padding: 0.2rem 0.4rem;
              text-decoration: none;
            }
          }
        }
      }
    }
  }
}

.fullpage.projet_full {
  // overflow-x: hidden; // enlever quand on ajoute le menu des projets à gauche
  // Wrapper interne des fields : flex column pour pouvoir inverser
  // l'ordre thematiques / localisation via order.
  > .fullpage_content > div {
    display: flex;
    flex-direction: column;
  }
  .retour_projets {
    padding-top: 3vh;
    padding-left: $x_margin;
    @include main_text_content();
    a {
      font-size: $fs_xs;
      font-weight: 800;
      color: $teal;
    }
  }
  .sous_titre > div > div {
    @include sous_titre_alt();
  }
  // Thématiques AVANT localisation.
  .thematiques { order: 1; }
  .localisation { order: 2; }
  // Tous les autres fields gardent leur ordre source (order: 3 par défaut).
  .intro        { order: 3; }
  .diapo        { order: 4; }
  .text-content { order: 5; }
  .chiffre-clefs { order: 6; }
  .carte        { order: 7; }
  .legende-carte { order: 8; }
  .equipe       { order: 9; }
  .liens        { order: 10; }
  .localisation {
    margin-left: $x_margin;
    margin-top: 1rem;
    @include main_text_content();
  }
  // Force la marge top du premier <p> de l'intro à 2rem.
  // (Le sélecteur générique .layout-content .fullpage .fullpage_content
  // p:first-of-type met 7vh — trop pour ce contexte.)
  .intro p:first-of-type {
    margin-top: 2rem !important;
  }
  // Thématiques : "tags" sur fond blanc avec contour 1px brand color.
  .thematiques {
    margin-top: 1rem;
    margin-left: $x_margin;
    > div > div {
      > div {
        display: inline-block;
        font-size: 0.8rem !important;
        background-color: white;
        border: 1px solid $fluo_green;
        margin: 0.2rem;
        transition: background-color 0.3s ease;
        @include main_text_content();
        &:hover {
          background-color: $fluo_green;
        }
        a {
          display: block;
          color: black;
          padding: 0.2rem 0.4rem;
        }
      }
    }
  }
  .intro {
    > div > div:first-of-type {
      display: none;
    }
  }
  .diapo {
    margin-top: 3rem;
    margin-left: calc($x_margin * 3);
    margin-right: calc($x_margin * 3);
    @media screen and (min-width: $breakpoint_tablet) {
      margin-left: $x_margin;
      margin-right: $x_margin;
    }
    img {
      width: 100%;
      height: auto;
    }
    .image-field-caption {
      p {
        margin: 0;
        padding: 0;
        margin-top: 0.5rem;
        font-size: 0.8rem;
        opacity: 0.7;
      }
    }

    .slick-arrow {
      width: 1.2rem;
      height: 1.2rem;
      border-radius: 1.5rem;
      background-color: transparent !important;
      &:hover {
        background-color: transparent !important;
        &::before {
          color: black;
        }
      }
      &::before {
        opacity: 1 !important;
        color: $text_grey;
        font-weight: bold;
        font-family: 'Marianne', sans-serif;
        display: block;
        font-size: $fs_xs !important;
      }
    }
    .slick-prev {
      left: -2rem;
    }
    .slick-next {
      right: -2rem;
    }
  }
  .text-content {
    .intertitre {
      margin-left: $x_margin;
      padding-right: $x_margin;
      // Intertitres en Vogun un peu plus grands.
      font-family: $vogun;
      font-weight: $fw_medium;
      font-size: $fs_lg;
      color: black;
      line-height: $lh_tight;
    }
    .paragraph {
      margin-bottom: 3rem;
      > div > div > p {
        margin: 1.2rem 0 !important;
      }
    }
  }
  .chiffre-clefs {
    > div > div {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-column-gap: 2rem;
      grid-row-gap: 2rem;
      width: auto;
      margin: 0 $x_margin;
      .paragraph {
        > div:first-of-type {
          font-size: 2rem !important;
          @include sous_titre();
        }
        p {
          margin: 0;
          padding: 0;
          margin-top: 0.5rem;
          color: $text_grey;
        }
      }
    }
  }
  .carte {
    width: auto;
    margin: 0 $x_margin;
    margin-top: 4rem;
    > div > div:first-of-type {
      display: none;
    }
    .leaflet-pane {
      path {
        stroke: $fluo_green;
        stroke-width: 2;
        fill: $fluo_green;
        fill-opacity: 0.2;
      }
    }
    .popup {
      .leaflet-popup-tip {
        background: rgba(0, 0, 0, 0) !important;
        box-shadow: none !important;
      }
      .leaflet-popup-content-wrapper {
        padding: 0.3rem 0.8rem;
        background-color: white;
        font-size: $fs_xs !important;
        box-shadow: none;
        border-radius: unset;
        @include main_text_content();
        .leaflet-popup-content {
          margin: 0;
        }
      }
    }
  }
  .legende-carte {
    > div > div:first-of-type {
      display: none;
    }
    p {
      margin-top: 1rem !important;
      font-size: 0.8rem !important;
      opacity: 0.7;
    }
  }
  .chronologie {
    display: none;
  }
  .equipe {
    margin-top: 4rem;
    > div {
      // Label "Collectif du projet" : intertitre Vogun, brand color, avec un
      // filet 1px à droite centré verticalement jusqu'à la marge de colonne.
      > div:first-of-type {
        margin-left: $x_margin;
        margin-right: $x_margin;
        margin-bottom: 2rem;
        font-family: $vogun;
        font-weight: $fw_medium;
        font-size: $fs_lg;
        line-height: $lh_tight;
        color: $fluo_green;
        display: flex;
        align-items: center;
        gap: 1rem;
        &::after {
          content: '';
          flex: 1;
          height: 1px;
          background-color: $fluo_green;
        }
      }
      > div:nth-of-type(2) {
        > div:first-of-type > div {
          > div:first-of-type > div:last-of-type::before {
            mask-image: url('/themes/erabletheme/assets/equipes-projets-icons/grenouille.svg');
          }
        }
        > div:nth-of-type(2) > div {
          > div:first-of-type > div:last-of-type::before {
            mask-image: url('/themes/erabletheme/assets/equipes-projets-icons/marmotte.svg');
          }
        }
        > div:nth-of-type(3) > div {
          > div:first-of-type > div:last-of-type::before {
            mask-image: url('/themes/erabletheme/assets/equipes-projets-icons/collibri.svg');
          }
        }
        > div:nth-of-type(4) > div {
          > div:first-of-type > div:last-of-type::before {
            mask-image: url('/themes/erabletheme/assets/equipes-projets-icons/papillon.svg');
          }
        }
        > div:nth-of-type(5) > div {
          > div:first-of-type > div:last-of-type::before {
            mask-image: url('/themes/erabletheme/assets/equipes-projets-icons/nenuphar.svg');
          }
        }
        > div {
          > div {
            padding-left: $x_margin;
            padding-right: $x_margin;
            margin: 1rem 0;
            margin-bottom: 3rem !important;
            > div:first-of-type {
              margin-bottom: 2rem;
              display: inline-block;
              // Titre de rôle d'équipe : même typo que les intertitres.
              font-family: $vogun;
              font-weight: $fw_medium;
              font-size: $fs_lg;
              color: black;
              line-height: $lh_tight;
              > div:last-of-type {
                display: flex;
                align-items: center;
                // Icônes en ::before (grenouille/marmotte/etc.) retirées —
                // les règles mask-image plus haut deviennent inopérantes.
              }
            }
            > div:nth-of-type(2) {
              > div {
                display: grid;
                grid-template-columns: 1fr;
                grid-row-gap: 2rem;
                grid-column-gap: 1.5rem;
                width: 75%;
                @media screen and (min-width: $breakpoint_tablet) {
                  grid-template-columns: repeat(3, 1fr);
                  width: unset;
                }
                > div {
                  margin-bottom: 1.5rem;
                  @media screen and (min-width: $breakpoint_tablet) {
                    margin-bottom: 0;
                  }
                  > .paragraph {
                    margin: 0 !important;
                    padding: 0 !important;
                    display: flex;
                    flex-direction: column;
                    > .portrait {
                      display: none;
                    }
                    // Prénom + nom regroupés via le template
                    // paragraph--membre-equipe.html.twig.
                    > .nom-prenom {
                      display: flex;
                      flex-wrap: wrap;
                      column-gap: 0.3rem;
                      color: black;
                      font-family: $marianne;
                      font-weight: $fw_regular;
                      font-size: $fs_md;
                      line-height: $lh_normal;
                      > .prenom,
                      > .nom {
                        margin: 0;
                        padding: 0;
                      }
                    }
                    > .texte {
                      margin-top: 0.5rem;
                      p {
                        font-size: $fs_sm;
                        margin: 0 !important;
                        padding: 0 !important;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .liens {
    > div > div > div:not(:last-of-type) {
      margin-bottom: 30px;
    }
  }
}
// Page d'archive taxonomy : on n'affiche le .page-header-outside (titre du
// tag + retour) que sur la 1re .views-row. Les autres sont masquées.
.views-row .page-header-outside.taxonomy_header {
  display: none;
}
.views-row:first-of-type > .page-header-outside.taxonomy_header {
  display: block;
}

// Border-bottom brand color uniquement sur le dernier .taxonomy_page (les
// .fullpage intermédiaires l'ont par défaut, cf. _fullpage.scss).
.views-row:not(:last-of-type) > .taxonomy_page {
  border-bottom: none !important;
}

.taxonomy_page {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  // Titres de projets listés : réduits drastiquement (cards compactes).
  > .fullpage_content > .projet_label {
    font-family: $vogun;
    font-weight: $fw_medium;
    font-size: $fs_md;
    color: black;
    line-height: $lh_tight;
    margin: 0 !important;
    padding: 0 $x_margin 0 $x_margin !important;
    a { color: inherit; text-decoration: none; }
  }
  > .fullpage_content {
    > div:last-of-type {
      display: grid !important;
      grid-template-columns: 0.5fr 1fr;
      grid-template-rows: repeat(3, auto);
      padding-right: $x_margin;
      > .diapo {
        grid-column: 1;
        grid-row: 2/4;
        margin: 0 !important;
        margin-left: $x_margin !important;
      }
      > .sous_titre {
        grid-column: 1/3;
        grid-row: 1;
        margin-bottom: 0.5rem;
        // Sous-titres : également réduits.
        // (chaîne d'éléments traversée par un <a> ajouté en JS, on cible
        // descendants tous niveaux confondus avec !important.)
        font-size: $fs_sm !important;
        font-family: $marianne !important;
        font-weight: $fw_regular !important;
        color: $text_grey !important;
        line-height: $lh_normal !important;
        * {
          font-size: $fs_sm !important;
          font-family: $marianne !important;
          font-weight: $fw_regular !important;
          color: $text_grey !important;
          line-height: $lh_normal !important;
        }
        a { text-decoration: none; }
      }
      > .localisation {
        grid-column: 2;
        grid-row: 2;
        margin-top: 0 !important;
        font-size: $fs_xs !important;
      }
      > .thematiques {
        grid-column: 2;
        grid-row: 3;
      }
    }
  }
}

// in taxonomy pages
.feed-icon {
  display: none;
}