/* ============================= */
/*        GRILLE PRINCIPALE      */
/* ============================= */

.grille-encart {
  display: grid;

  grid-template-columns: repeat(8, 1fr);

  gap: 20px;

  box-sizing: border-box;

  width: 100%;
  max-width: 1200px;

  margin: 0 auto;

  padding: 0 10px;
}


/* ============================= */
/*            ENCARTS            */
/* ============================= */

.encart1 {
  grid-column: 1 / span 8;
  grid-row: 1;
}

.encart2 {
  grid-column: 1 / span 8;
  grid-row: 2;
}


/* ============================= */
/*       STYLE GENERAL ENCARTS   */
/* ============================= */

.encart {
  background-color: #fff;

  border-radius: 16px;

  padding: 20px;

  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.07);

  box-sizing: border-box;
}


.encart h2 {
  margin-top: 0;
  margin-bottom: 8px;
}


h2 {
  margin-bottom: 10px;

  font-size: clamp(1rem, 2.5vw, 1.3rem);

  color: #7dc8e5;

  text-align: left;
}


h3 {
  font-size: clamp(0.8rem, 1.2vw, 0.9rem);
}


.encart img {
  display: block;

  width: 100%;
  height: auto;
}


/* ================================================= */
/*               FILTRES JCC                         */
/* ================================================= */

.jcc-filtres {
  display: flex;

  justify-content: center;

  align-items: stretch;

  flex-wrap: wrap;

  gap: 10px;

  margin: 0 auto 30px;
}


/* ================================================= */
/*              BOUTONS DES FILTRES                  */
/* ================================================= */

.jcc-filtre {
  appearance: none;

  border: 1px solid #002e58;

  background-color: #fff;

  color: #002e58;

  /*
   * Aucune largeur imposée.
   * Chaque bouton prend la largeur nécessaire
   * à son propre contenu.
   */
  width: auto;

  /*
   * Aucune hauteur fixe.
   * La hauteur dépend naturellement du texte.
   */
  min-height: 0;

  box-sizing: border-box;

  padding: 9px 18px;

  border-radius: 8px;

  font-family: inherit;

  font-size: 0.9rem;

  font-weight: 600;

  line-height: 1.2;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  cursor: pointer;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.2s ease;
}


/* ================================================= */
/*                    SURVOL                         */
/* ================================================= */

.jcc-filtre:hover {
  background-color: #7dc8e5;

  border-color: #7dc8e5;

  color: #002e58;
}


/* ================================================= */
/*                  FILTRE ACTIF                     */
/* ================================================= */

.jcc-filtre.actif {
  background-color: #002e58;

  border-color: #002e58;

  color: #fff;
}


/* ================================================= */
/*                    CLIC                           */
/* ================================================= */

.jcc-filtre:active {
  transform: scale(0.97);
}


/* ================================================= */
/*              PORTFOLIO HUMORISTES                 */
/* ================================================= */

.portfolio-jcc {
  width: 100%;

  box-sizing: border-box;
}


/* ================================================= */
/*             GRILLE DES POLAROIDS                  */
/* ================================================= */

.portfolio-jcc-grille {
  display: grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap: 24px;

  width: 100%;

  box-sizing: border-box;
}


/* ================================================= */
/*                 CARTE HUMORISTE                   */
/* ================================================= */

.carte-humoriste-jcc {
  width: 100%;

  min-width: 0;

  box-sizing: border-box;
}


/* ================================================= */
/*                  LIEN CARTE                       */
/* ================================================= */

.carte-humoriste-lien {
  display: block;

  width: 100%;

  box-sizing: border-box;

  background-color: #fff;

  color: #002e58;

  text-decoration: none;

  border-radius: 7px;

  overflow: hidden;

  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.10);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}


/* ================================================= */
/*                SURVOL CARTE                       */
/* ================================================= */

.carte-humoriste-lien:hover {
  transform: translateY(-4px);

  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.14);
}


/* ================================================= */
/*                  CADRE PHOTO                      */
/* ================================================= */

.carte-humoriste-photo {
  position: relative;

  width: 100%;

  aspect-ratio: 3 / 4;

  overflow: hidden;

  background-color: #eee;
}


/* ================================================= */
/*                     PHOTO                         */
/* ================================================= */

.carte-humoriste-photo img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 0.4s ease;
}


/* ================================================= */
/*              ZOOM PHOTO AU SURVOL                */
/* ================================================= */

.carte-humoriste-lien:hover
.carte-humoriste-photo img {
  transform: scale(1.045);
}


/* ================================================= */
/*             ZONE NOM + BADGES                    */
/* ================================================= */

.carte-humoriste-nom {
  display: flex;

  flex-direction: column;

  justify-content: center;
  align-items: center;

  box-sizing: border-box;

  min-height: 62px;

  padding: 8px 8px 7px;

  background-color: #002e58;

  color: #fff;

  text-align: center;

  font-size: clamp(0.78rem, 1.1vw, 0.95rem);

  font-weight: 600;

  line-height: 1.2;

  transition:
    background-color 0.25s ease;
}


/* ================================================= */
/*             NOM DE L'HUMORISTE                   */
/* ================================================= */

.carte-humoriste-nom > span {
  display: block;

  width: 100%;

  text-align: center;
}


/* ================================================= */
/*                    BADGES                         */
/* ================================================= */

.carte-humoriste-badges {
  display: flex;

  justify-content: center;
  align-items: center;

  gap: 7px;

  min-height: 20px;

  margin-top: 4px;
}


/* ================================================= */
/*                  BADGE INDIVIDUEL                 */
/* ================================================= */

.badge-jcc {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 20px;
  height: 20px;

  font-size: 17px;

  line-height: 1;

  cursor: default;
}


/* ================================================= */
/*             COEUR / COUP DE COEUR                */
/* ================================================= */

.badge-coeur {
  display: inline-flex;
}


/* ================================================= */
/*              MASQUE SI AUCUN BADGE               */
/* ================================================= */

.carte-humoriste-badges:empty {
  display: none;
}


/* ================================================= */
/*        ECLAIRCISSEMENT DU BANDEAU                */
/* ================================================= */

.carte-humoriste-lien:hover
.carte-humoriste-nom {
  background-color: #013f61;
}


/* ================================================= */
/*       ACCESSIBILITE : FOCUS CLAVIER              */
/* ================================================= */

.carte-humoriste-lien:focus-visible {
  outline: 3px solid #7dc8e5;

  outline-offset: 4px;
}


/* ================================================= */
/*          TABLETTE : 3 COLONNES                   */
/* ================================================= */

@media (max-width: 992px) {

  .grille-encart {
    display: flex;

    flex-direction: column;

    gap: 20px;

    padding: 0 10px;
  }


  /* ============================= */
  /*             ORDRE             */
  /* ============================= */

  .encart1 {
    order: 1;
  }

  .encart2 {
    order: 2;
  }

  .encart3 {
    order: 3;
  }


  /* ============================= */
  /*           PORTFOLIO           */
  /* ============================= */

  .portfolio-jcc-grille {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap: 22px;
  }

}


/* ================================================= */
/*              MOBILE : 2 COLONNES                 */
/* ================================================= */

@media (max-width: 600px) {

  .grille-encart {
    display: flex;

    flex-direction: column;

    gap: 20px;

    padding: 0 10px;
  }


  /* ============================= */
  /*             ORDRE             */
  /* ============================= */

  .encart1 {
    order: 1;
  }

  .encart2 {
    order: 2;
  }

  .encart3 {
    order: 3;
  }


  /* ============================= */
  /*             FILTRES           */
  /* ============================= */

  .jcc-filtres {
    gap: 8px;

    margin-bottom: 24px;
  }


  .jcc-filtre {
    padding: 8px 12px;

    font-size: 0.82rem;
  }


  /* ============================= */
  /*           PORTFOLIO           */
  /* ============================= */

  .portfolio-jcc-grille {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 16px;
  }


  /* ============================= */
  /*             NOM               */
  /* ============================= */

  .carte-humoriste-nom {
    min-height: 58px;

    padding: 7px 5px 6px;

    font-size: 0.78rem;
  }


  /* ============================= */
  /*             BADGES            */
  /* ============================= */

  .carte-humoriste-badges {
    gap: 5px;

    margin-top: 3px;
  }


  .badge-jcc {
    width: 18px;
    height: 18px;

    font-size: 15px;
  }

}


/* ================================================= */
/*          TRES PETITS TELEPHONES                  */
/* ================================================= */

@media (max-width: 380px) {

  .portfolio-jcc-grille {
    gap: 12px;
  }


  .carte-humoriste-nom {
    min-height: 56px;

    font-size: 0.74rem;
  }


  .carte-humoriste-badges {
    gap: 4px;
  }


  .badge-jcc {
    font-size: 14px;
  }

}