.tchik-tchak-page {
  overflow-x: clip;
}

#tchik-tchak-widget .tt-newsFusion {
  padding-top: 28px !important;
}

#tchik-tchak-widget .tt-wrap,
#tchik-tchak-widget .tt-heroWrap,
#tchik-tchak-widget .tt-nextSection,
#tchik-tchak-widget .tt-subComboWrap,
#tchik-tchak-widget .tt-section,
#tchik-tchak-widget .tt-bridgeSection,
#tchik-tchak-widget .tt-pathSection,
#tchik-tchak-widget .tt-psSection {
  max-width: var(--page-hero-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Hero d'ouverture harmonisé avec les autres pages internes. */
#tchik-tchak-widget .tt-heroTitle {
  font-size: var(--page-hero-size) !important;
  line-height: var(--page-hero-line) !important;
  letter-spacing: var(--page-hero-letter) !important;
  max-width: 13ch !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/*
 * Preuve de traction — volontairement traitée comme un tampon éditorial,
 * sans surlignage jaune ni puce rouge, pour ne pas concurrencer le hero.
 */
#tchik-tchak-widget .tt-heroLead::after {
  content: "+500 000 lectures cumulées depuis 2023";
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: 24px;
  padding: 10px 15px 9px;
  border: 2px solid rgba(45,45,45,.82);
  border-radius: 4px;
  color: rgba(45,45,45,.94);
  font-size: 17px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -.015em;
  background:
    repeating-linear-gradient(
      1deg,
      rgba(45,45,45,.018) 0 1px,
      transparent 1px 5px
    );
  box-shadow:
    inset 0 0 0 1px rgba(45,45,45,.08),
    1px 1px 0 rgba(45,45,45,.12);
  transform: rotate(-.45deg);
  transform-origin: left center;
}

/* Les titres internes gardent leur hiérarchie propre. */
#tchik-tchak-widget .tt-secTitle,
#tchik-tchak-widget .tt-nextTitle,
#tchik-tchak-widget .tt-nextH,
#tchik-tchak-widget .tt-pathTitle,
#tchik-tchak-widget .tt-pileTitle {
  max-width: none !important;
}

/*
 * « 5 numéros les plus lus » : 3 cartes en haut, puis 2 cartes centrées
 * sur les gouttières. Les cartes du bas reprennent la largeur des cartes du haut.
 */
@media (min-width: 901px) {
  #tchik-tchak-widget #ttStartGrid.tt-gridStart {
    max-width: 1120px !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 22px !important;
    align-items: start !important;
  }

  #tchik-tchak-widget #ttStartGrid .tt-cardStart {
    grid-column: span 2 !important;
    grid-row-end: auto !important;
    align-self: start !important;
  }

  #tchik-tchak-widget #ttStartGrid .tt-cardStart:nth-child(4),
  #tchik-tchak-widget #ttStartGrid .tt-cardStart:nth-child(5) {
    width: 100% !important;
    justify-self: stretch !important;
  }

  #tchik-tchak-widget #ttStartGrid .tt-cardStart:nth-child(4) {
    grid-column: 2 / span 2 !important;
    grid-row: 2 !important;
  }

  #tchik-tchak-widget #ttStartGrid .tt-cardStart:nth-child(5) {
    grid-column: 4 / span 2 !important;
    grid-row: 2 !important;
  }
}

/* Un peu plus d'air entre les lignes des titres des 5 cartes. */
#tchik-tchak-widget #ttStartGrid .tt-cardStart h3 {
  line-height: 1.10 !important;
}

/*
 * Sous-partie « sinon, vous pouvez… » : même langage graphique que
 * « voici 5 des numéros les plus lus », mais un cran en dessous et sans fluo.
 */
#tchik-tchak-widget .tt-pathSection {
  margin-top: 108px !important;
  padding-top: 0 !important;
}

#tchik-tchak-widget .tt-pathIntro {
  max-width: 1060px;
  margin: 0 auto 32px;
  text-align: center;
}

#tchik-tchak-widget .tt-pathIntroTitle {
  margin: 0;
  font-size: clamp(28px, 3.8vw, 38px);
  line-height: 1.02;
  letter-spacing: -.03em;
  font-weight: 950;
  text-align: center;
  text-transform: lowercase;
  color: rgba(45,45,45,.96);
}

/* Repères 1 / 2 : même logique éditoriale que la page, centrés sur les deux colonnes. */
#tchik-tchak-widget .tt-pathArrows {
  max-width: 1060px;
  margin: 0 auto 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  align-items: center;
  justify-items: center;
}

#tchik-tchak-widget .tt-pathNumber {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 2px solid rgba(45,45,45,.72);
  border-radius: 999px;
  font-size: 20px;
  line-height: 1;
  font-weight: 950;
  color: rgba(45,45,45,.88);
  background: #fff;
  box-shadow: 2px 3px 0 rgba(45,45,45,.09);
  position: relative;
}

#tchik-tchak-widget .tt-pathNumber::before {
  content: "";
  position: absolute;
  inset: 4px -5px -4px 5px;
  border-radius: 999px;
  z-index: -1;
  transform: rotate(-4deg);
}

#tchik-tchak-widget .tt-pathNumber--one::before {
  background: rgba(255,222,89,.55);
}

#tchik-tchak-widget .tt-pathNumber--two::before {
  background: rgba(175,172,251,.46);
  transform: rotate(4deg);
}

/* Les deux options restent du contenu posé dans la page : pas de carte blanche sur fond blanc. */
#tchik-tchak-widget .tt-pathGrid {
  max-width: 1060px !important;
  gap: 56px !important;
  align-items: start !important;
}

#tchik-tchak-widget .tt-pathCol {
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#tchik-tchak-widget .tt-pathCol::before {
  display: none !important;
  content: none !important;
}

#tchik-tchak-widget .tt-pathKicker {
  display: block !important;
  margin: 0 0 13px !important;
  padding: 0 !important;
  font-size: 24px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 400 !important;
  color: inherit !important;
  background: none !important;
}

#tchik-tchak-widget .tt-pathText {
  max-width: none !important;
}

/* Le trait gris sous le titre tiré au sort n'apporte rien au post-it. */
#tchik-tchak-widget .tt-randomPostitLink,
#tchik-tchak-widget .tt-randomPostitLink:hover {
  border-bottom: 0 !important;
}

@media (max-width: 900px) {
  #tchik-tchak-widget .tt-heroTitle {
    max-width: none !important;
  }

  #tchik-tchak-widget .tt-heroLead::after {
    margin-top: 20px;
    font-size: 15.5px;
    padding: 9px 12px 8px;
  }

  #tchik-tchak-widget .tt-pathSection {
    margin-top: 70px !important;
  }

  #tchik-tchak-widget .tt-pathIntro {
    margin-bottom: 28px;
  }

  #tchik-tchak-widget .tt-pathArrows {
    display: none;
  }

  #tchik-tchak-widget .tt-pathGrid {
    gap: 42px !important;
  }

  #tchik-tchak-widget .tt-pathCol {
    padding: 0 4px !important;
  }
}

@media (max-width: 480px) {
  #tchik-tchak-widget .tt-heroLead::after {
    font-size: 14px;
    line-height: 1.2;
    border-width: 1.5px;
  }

  #tchik-tchak-widget .tt-pathIntroTitle {
    font-size: 27px;
  }
}