/* Tertium - écran d'accueil (bloc 7)
   Jetons : voir assets/css/tokens.css. Aucune valeur en dur.

   Ce fichier porte : le bandeau dégradé, la bande or des rencontres, le défilé
   des parutions, les meilleures ventes, les tuiles de domaines, le sélecteur
   de rayon, l'encart auteurs, la bande sombre du défilé de couvertures et les
   tuiles de marques.

   Le dégradé est le SEUL de tout le site : c'est la signature de l'accueil.
   Les rares mesures sans jeton sont en rem et signalées, comme dans base.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Ossature commune des sections
   -------------------------------------------------------------------------- */

.tt-accueil__section { padding-top: var(--tt-section); }

.tt-accueil__tete {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--tt-gap-s) var(--tt-gap);
  padding-bottom: var(--tt-gap);
  border-bottom: var(--tt-filet-or);
}

.tt-accueil__titre {
  margin: 0;
  font-size: var(--tt-fs-h2);
}

.tt-accueil__titre--petit { font-size: var(--tt-fs-h2-petit); }

.tt-accueil__note {
  font-size: var(--tt-fs-meta);
  color: var(--tt-texte-2);
}

.tt-accueil__lien {
  margin-left: auto;
  font-size: var(--tt-fs-meta);
  letter-spacing: var(--tt-ls-micro);
  text-transform: uppercase;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   2. Le bandeau dégradé — variante B de la maquette
      Texte de la maison à gauche, actualité en carte blanche à droite.
   -------------------------------------------------------------------------- */

.tt-hero {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  min-height: 30rem;   /* 480px : hauteur de la maquette */
  background: var(--tt-degrade);
  color: var(--tt-papier);
}

/* Sans actualité au Carnet, le texte prend toute la largeur. */
.tt-hero--seul { grid-template-columns: 1fr; }
.tt-hero--seul .tt-hero__texte { max-width: 50rem; }   /* 800px : mesure de ligne */

.tt-hero__texte {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--tt-section) var(--tt-gouttiere);
}

.tt-hero__titre {
  margin: 0 0 var(--tt-gap-s);
  font-size: var(--tt-fs-h1);
  line-height: 1.06;
  letter-spacing: var(--tt-ls-titre);
  color: var(--tt-papier);
}

/* L'italique du titre reprend le ton chaud du dégradé. */
.tt-hero__titre em { font-style: italic; color: var(--tt-sur-sombre-3); }

.tt-hero__chapeau {
  max-width: 30rem;   /* 480px : mesure de ligne de la maquette */
  margin: 0 0 var(--tt-bloc);
  color: var(--tt-sur-sombre-3);
}

.tt-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--tt-gap-s) / 1.2);
  margin: 0;
}

.tt-hero__bouton {
  display: inline-flex;
  align-items: center;
  min-height: var(--tt-touch);
  padding: 0 var(--tt-gap);
  background: var(--tt-papier);
  color: var(--tt-encre);
  font-size: var(--tt-fs-meta);
  font-weight: 600;
  letter-spacing: .03em;   /* interlettrage de bouton */
  transition: background var(--tt-t-rapide), color var(--tt-t-rapide), border-color var(--tt-t-rapide);
}

.tt-hero__bouton:hover { background: var(--tt-or); color: var(--tt-encre); }

.tt-hero__bouton--fantome {
  background: transparent;
  border: var(--tt-filet);
  border-color: var(--tt-or-voile);
  color: var(--tt-papier);
  font-weight: 400;
}

.tt-hero__bouton--fantome:hover { background: var(--tt-or); color: var(--tt-encre); border-color: var(--tt-or); }

/* -- La carte d'actualité, posée sur le dégradé ------------------------- */

.tt-hero__cote {
  display: flex;
  align-items: center;
  padding: var(--tt-gap) var(--tt-gouttiere) var(--tt-gap) 0;
}

.tt-hero__carte {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--tt-papier);
  color: var(--tt-encre);
  box-shadow: var(--tt-anneau), var(--tt-ombre-flottante);
  transition: transform var(--tt-t-lift), box-shadow var(--tt-t-lift);
}

.tt-hero__carte:hover {
  transform: translateY(var(--tt-lift));
  box-shadow: var(--tt-anneau-or), var(--tt-ombre-flottante);
}

.tt-hero__carte-visuel { margin: 0; overflow: hidden; }

.tt-hero__carte-visuel img {
  display: block;
  width: 100%;
  height: 15.625rem;   /* 250px : hauteur de la maquette */
  object-fit: cover;
}

.tt-hero__carte-texte { padding: var(--tt-gap) var(--tt-bloc) var(--tt-bloc); }

.tt-hero__carte-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--tt-gap-s) / 1.2);
  margin: 0 0 calc(var(--tt-gap-s) / 1.2);
  font-size: var(--tt-fs-micro);
  letter-spacing: var(--tt-ls-micro);
  text-transform: uppercase;
  color: var(--tt-texte-3);
}

.tt-hero__carte-etiquette {
  padding: calc(var(--tt-gap-s) / 2.8) calc(var(--tt-gap-s) / 1.4);
  background: var(--tt-encre);
  color: var(--tt-papier);
}

.tt-hero__carte-titre {
  margin: 0 0 calc(var(--tt-gap-s) / 1.4);
  font-size: var(--tt-fs-h3);
  line-height: 1.2;
  letter-spacing: 0;
}

.tt-hero__carte-titre a { color: var(--tt-encre); transition: color var(--tt-t-rapide); }
.tt-hero__carte:hover .tt-hero__carte-titre a { color: var(--tt-brique); }

.tt-hero__carte-chapeau {
  margin: 0 0 var(--tt-gap);
  font-size: var(--tt-fs-corps-s);
  line-height: 1.65;
  color: var(--tt-texte-2);
}

.tt-hero__carte-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--tt-gap-s) / 1.2);
  margin: 0;
}

.tt-hero__carte-bouton {
  display: inline-flex;
  align-items: center;
  min-height: var(--tt-touch);
  padding: 0 var(--tt-gap-s);
  background: var(--tt-encre);
  color: var(--tt-papier);
  font-size: var(--tt-fs-meta);
  letter-spacing: .03em;
  transition: background var(--tt-t-rapide), color var(--tt-t-rapide), box-shadow var(--tt-t-rapide);
}

.tt-hero__carte-bouton:hover {
  background: var(--tt-or);
  color: var(--tt-encre);
  box-shadow: var(--tt-ombre-carte);
}

/* --------------------------------------------------------------------------
   3. La bande or des prochaines rencontres
   -------------------------------------------------------------------------- */

.tt-rencontres {
  padding: var(--tt-bloc) 0;
  background: var(--tt-or);
  color: var(--tt-encre);
}

.tt-accueil__tete--or {
  border-bottom: 0;
  padding-bottom: var(--tt-gap-s);
}

.tt-accueil__tete--or .tt-accueil__lien { color: var(--tt-encre); }

.tt-rencontres__liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tt-gap-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tt-rencontre a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--tt-gap-s);
  align-items: start;
  padding: var(--tt-gap-s);
  background: var(--tt-papier);
  border-left: var(--tt-filet-accent);
  color: var(--tt-encre);
}

.tt-rencontre__date { text-align: center; }

.tt-rencontre__jour {
  display: block;
  font-family: var(--tt-serif);
  font-size: var(--tt-fs-h3);
  line-height: 1;
}

.tt-rencontre__mois {
  display: block;
  font-size: var(--tt-fs-micro);
  letter-spacing: var(--tt-ls-micro);
  text-transform: uppercase;
  color: var(--tt-or-texte);
}

.tt-rencontre__qui { display: block; font-size: var(--tt-fs-corps-s); font-weight: 600; line-height: 1.3; }

.tt-rencontre__quoi {
  display: block;
  margin-top: calc(var(--tt-gap-s) / 4.5);
  font-size: var(--tt-fs-meta);
  line-height: 1.45;
  color: var(--tt-texte-2);
}

/* --------------------------------------------------------------------------
   4. Les cartes d'ouvrage
   -------------------------------------------------------------------------- */

.tt-livres {
  display: grid;
  gap: var(--tt-bloc);
  margin: 0;
  padding: var(--tt-gap) 0 0;
  list-style: none;
}

.tt-livres--quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Défilé horizontal : les cartes gardent leur largeur, la piste défile. */
.tt-livres--defile {
  display: flex;
  gap: var(--tt-bloc);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.tt-livres--defile > .tt-livre {
  width: 18.8125rem;   /* 301px : largeur de carte de la maquette */
  flex: none;
  scroll-snap-align: start;
}

.tt-livre { display: flex; gap: var(--tt-gap-s); }

.tt-livre__rang {
  align-self: flex-start;
  font-family: var(--tt-serif);
  font-size: var(--tt-fs-h1-page);
  line-height: .9;
  color: var(--tt-or-texte);
}

.tt-livre__bloc { display: flex; flex-direction: column; flex: 1; min-width: 0; }

.tt-livre__couv {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--tt-ratio-couv);
  border: var(--tt-filet);
  background: var(--tt-papier);
  transition: border-color var(--tt-t-rapide), box-shadow var(--tt-t-moyen);
}

.tt-livre__couv img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--tt-t-zoom);
}

.tt-livre:hover .tt-livre__couv { border-color: var(--tt-encre); box-shadow: var(--tt-ombre-carte); }
.tt-livre:hover .tt-livre__couv img { transform: scale(var(--tt-zoom-hover)); }

.tt-livre .tt-surtitre { margin: var(--tt-gap-s) 0 calc(var(--tt-gap-s) / 2.3); }

.tt-livre__titre {
  margin: 0;
  font-size: var(--tt-fs-carte);
  line-height: 1.18;
  letter-spacing: 0;
}

.tt-livre__titre a { color: var(--tt-encre); transition: color var(--tt-t-rapide); }
.tt-livre__titre a:hover { color: var(--tt-brique); }

.tt-livre__auteur {
  margin: calc(var(--tt-gap-s) / 3.5) 0 0;
  font-size: var(--tt-fs-meta);
  color: var(--tt-texte-3);
}

.tt-livre__auteur a { color: inherit; }
.tt-livre__auteur a:hover { color: var(--tt-brique); }

.tt-livre__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tt-gap-s);
  margin: auto 0 0;
  padding-top: var(--tt-gap-s);
}

.tt-livre__prix { font-size: var(--tt-fs-corps-s); font-weight: 600; white-space: nowrap; }

.tt-livre__ajouter {
  flex: 0 1 auto;
  min-width: 0;
  padding: calc(var(--tt-gap-s) / 2) var(--tt-gap-s);
  font-family: var(--tt-sans);
  font-size: var(--tt-fs-micro);
  letter-spacing: var(--tt-ls-micro);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.tt-defile__commandes { display: flex; gap: calc(var(--tt-gap-s) / 1.75); }

.tt-defile__bouton {
  width: var(--tt-touch);
  height: var(--tt-touch);
  display: grid;
  place-items: center;
  font-size: var(--tt-fs-corps);
  line-height: 1;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   5. Les tuiles de domaines
   -------------------------------------------------------------------------- */

.tt-domaines {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;                      /* le filet EST la gouttière : 1px assumé */
  margin: 1px 0 0;
  padding: 0;
  background: var(--tt-bord);
  list-style: none;
}

.tt-domaine a {
  display: flex;
  flex-direction: column;
  gap: var(--tt-gap-s);
  min-height: 15.75rem;   /* 252px : hauteur de tuile de la maquette */
  padding: var(--tt-bloc);
  background: var(--tt-papier);
  color: var(--tt-encre);
  transition: background var(--tt-t-moyen), color var(--tt-t-moyen);
}

.tt-domaine a:hover { background: var(--tt-encre); color: var(--tt-papier); }

.tt-domaine__nombre {
  display: block;
  font-size: var(--tt-fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tt-brique);
}

.tt-domaine a:hover .tt-domaine__nombre { color: var(--tt-brique-claire); }

.tt-domaine__nom {
  display: block;
  font-family: var(--tt-serif);
  font-size: var(--tt-fs-h2-petit);
  line-height: 1.12;
}

.tt-domaine__sous {
  display: block;
  font-size: var(--tt-fs-meta);
  line-height: 1.6;
  opacity: .66;
}

.tt-domaine__couvs {
  display: flex;
  gap: calc(var(--tt-gap-s) / 1.75);
  margin-top: auto;
}

.tt-domaine__couvs img {
  display: block;
  width: 3.625rem;   /* 58px : vignette de la maquette */
  aspect-ratio: var(--tt-ratio-couv);
  object-fit: cover;
  box-shadow: var(--tt-ombre-couv);
  transition: transform var(--tt-t-zoom);
}

.tt-domaine a:hover .tt-domaine__couvs img { transform: translateY(var(--tt-lift-petit)) scale(1.05); }

/* --------------------------------------------------------------------------
   6. Le sélecteur « Trouver son prochain livre »
   -------------------------------------------------------------------------- */

.tt-trouver {
  display: grid;
  grid-template-columns: 16.875rem 1fr;   /* 270px : colonne de rayons */
  gap: var(--tt-section);
  padding-top: var(--tt-bloc);
}

.tt-trouver__rayons { display: flex; flex-direction: column; gap: 2px; }

.tt-trouver__rayon {
  display: flex;
  align-items: center;
  gap: var(--tt-gap-s);
  min-height: var(--tt-touch);
  padding: calc(var(--tt-gap-s) / 1.4) var(--tt-gap-s);
  border: 0;
  background: var(--tt-papier-alt);
  color: var(--tt-encre);
  font-family: var(--tt-sans);
  font-size: var(--tt-fs-corps-s);
  text-align: left;
  cursor: pointer;
  transition: background var(--tt-t-rapide), color var(--tt-t-rapide), box-shadow var(--tt-t-rapide);
}

.tt-trouver__rayon:hover {
  background: var(--tt-or);
  color: var(--tt-encre);
  box-shadow: inset 3px 0 0 var(--tt-encre);
}

.tt-trouver__rayon[aria-selected="true"] {
  background: var(--tt-encre);
  color: var(--tt-papier);
  font-weight: 600;
}

.tt-trouver__nom { flex: 1; }

.tt-trouver__nb {
  font-size: var(--tt-fs-micro);
  opacity: .7;
}

.tt-trouver__coiffe {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--tt-gap-s);
  margin: 0 0 var(--tt-gap-s);
}

.tt-trouver__coiffe-nom { font-family: var(--tt-serif); font-size: var(--tt-fs-h3); }
.tt-trouver__coiffe .tt-lien-micro {
  margin-left: auto;
  font-size: var(--tt-fs-micro);
  letter-spacing: var(--tt-ls-micro);
  text-transform: uppercase;
}

/* Sans JavaScript, les sept panneaux se lisent à la suite. Le script pose
   data-tt-pret et n'en montre qu'un. */
.tt-trouver__panneau + .tt-trouver__panneau { margin-top: var(--tt-bloc); }
.tt-trouver[data-tt-pret] .tt-trouver__panneau[data-tt-replie] { display: none; }
.tt-trouver[data-tt-pret] .tt-trouver__panneau + .tt-trouver__panneau { margin-top: 0; }
.tt-trouver__panneau:focus-visible { outline: var(--tt-focus); outline-offset: var(--tt-focus-offset); }
.tt-trouver__panneau .tt-livres { padding-top: 0; }

/* --------------------------------------------------------------------------
   7. L'encart auteurs
   -------------------------------------------------------------------------- */

.tt-accueil-auteurs {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: var(--tt-gouttiere);
  align-items: center;
  margin-top: var(--tt-section);
  padding-top: var(--tt-section);
  padding-bottom: var(--tt-section);
  background: var(--tt-papier-alt);
}

.tt-accueil-auteurs__titre {
  margin: 0 0 var(--tt-gap-s);
  font-size: var(--tt-fs-h2);
  line-height: 1.1;
}

.tt-accueil-auteurs__chapeau {
  margin: 0 0 var(--tt-gap);
  font-size: var(--tt-fs-corps-s);
  line-height: 1.65;
  color: var(--tt-texte-2);
}

.tt-accueil-auteurs__liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--tt-gap-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   8. Le défilé de couvertures
   -------------------------------------------------------------------------- */

.tt-defile {
  margin-top: var(--tt-section);
  padding: var(--tt-bloc) 0;
  background: var(--tt-encre);
  color: var(--tt-papier);
  overflow: hidden;
}

.tt-accueil__tete--sombre { border-bottom: 0; }
.tt-accueil__tete--sombre .tt-accueil__note { color: var(--tt-sur-sombre-1); }
.tt-accueil__tete--sombre .tt-accueil__lien { color: var(--tt-brique-claire); }

.tt-defile__pause {
  flex: none;
  min-height: var(--tt-touch);
  padding: 0 var(--tt-gap-s);
  border: var(--tt-filet);
  border-color: var(--tt-or-voile);
  background: transparent;
  color: var(--tt-papier);
  font-family: var(--tt-sans);
  font-size: var(--tt-fs-micro);
  letter-spacing: var(--tt-ls-micro);
  cursor: pointer;
  transition: background var(--tt-t-rapide), color var(--tt-t-rapide), border-color var(--tt-t-rapide);
}

.tt-defile__pause:hover { background: var(--tt-or); color: var(--tt-encre); border-color: var(--tt-or); }

.tt-defile__piste {
  display: flex;
  width: max-content;
  animation: tt-glisse 46s linear infinite;
}

.tt-defile__piste.est-fige { animation-play-state: paused; }
.tt-defile__piste:hover { animation-play-state: paused; }

.tt-defile__serie { display: flex; gap: var(--tt-gap-s); padding-left: var(--tt-gap-s); }

.tt-defile__serie img {
  display: block;
  width: 8.4375rem;   /* 135px : couverture du défilé de la maquette */
  height: 11.25rem;   /* 180px */
  object-fit: cover;
  box-shadow: var(--tt-ombre-couv);
  transition: transform var(--tt-t-zoom);
}

.tt-defile__serie img:hover { transform: scale(1.06); }

/* La piste porte deux séries identiques : décaler de la moitié boucle sans saut. */
@keyframes tt-glisse {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   9. Les tuiles de marques
   -------------------------------------------------------------------------- */

.tt-accueil-marques {
  margin-top: var(--tt-section);
  padding: var(--tt-section) 0;
  border-top: var(--tt-filet);
  border-top-color: var(--tt-bord-beige);
  background: var(--tt-papier-alt);
}

.tt-accueil-marques__intro { max-width: 28.75rem; padding-bottom: var(--tt-bloc); }   /* 460px */

.tt-accueil-marques__titre {
  margin: 0 0 var(--tt-gap-s);
  font-size: var(--tt-fs-h2);
  line-height: 1.1;
}

.tt-accueil-marques__chapeau { margin: 0; color: var(--tt-texte-2); }

.tt-accueil-marques__liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;                      /* le beige EST la gouttière : 1px assumé */
  margin: 0;
  padding: 0;
  background: var(--tt-papier-alt);
  list-style: none;
}

.tt-marque a {
  display: flex;
  flex-direction: column;
  gap: var(--tt-gap-s);
  min-height: 10.75rem;   /* 172px : hauteur de tuile de la maquette */
  padding: var(--tt-gap);
  background: var(--tt-papier);
  color: var(--tt-encre);
  transition: background var(--tt-t-rapide);
}

.tt-marque__nom {
  margin: 0;
  font-family: var(--tt-serif);
  font-size: var(--tt-fs-h3);
  line-height: 1.05;
  letter-spacing: 0;
}

.tt-marque__texte {
  margin: auto 0 0;
  font-size: var(--tt-fs-meta);
  line-height: 1.55;
  color: var(--tt-texte-2);
}

.tt-marque__nb {
  margin: calc(var(--tt-gap-s) / 1.75) 0 0;
  font-size: var(--tt-fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tt-brique);
}

.tt-marque--manuscrits a { background: var(--tt-papier-alt); }
.tt-marque--manuscrits a:hover { background: var(--tt-or); }

/* --------------------------------------------------------------------------
   10. Points de rupture
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .tt-livres--quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tt-domaines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tt-accueil-marques__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tt-accueil-auteurs__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {

  .tt-hero { grid-template-columns: 1fr; min-height: 0; }
  .tt-hero__texte { padding-top: var(--tt-bloc); padding-bottom: var(--tt-bloc); }
  .tt-hero__cote { padding: 0 var(--tt-gouttiere) var(--tt-bloc); }
  .tt-hero__carte-visuel img { height: 12.5rem; }   /* 200px en mobile */

  .tt-rencontres__liste { grid-template-columns: 1fr; }

  .tt-trouver { grid-template-columns: 1fr; gap: var(--tt-gap); }

  /* La colonne de rayons devient une rangée qui défile. */
  .tt-trouver__rayons {
    flex-direction: row;
    gap: calc(var(--tt-gap-s) / 2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tt-trouver__rayon { flex: none; }
  .tt-trouver__rayon:hover { box-shadow: inset 0 -3px 0 var(--tt-encre); }

  .tt-accueil-auteurs { grid-template-columns: 1fr; gap: var(--tt-gap); }
  .tt-accueil-marques__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .tt-livres--quatre { grid-template-columns: 1fr; }
  .tt-livres--defile > .tt-livre { width: 13.75rem; }   /* 220px */
  .tt-domaines { grid-template-columns: 1fr; }
  .tt-accueil-auteurs__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tt-accueil-marques__liste { grid-template-columns: 1fr; }
  .tt-livre__rang { font-size: var(--tt-fs-h2); }
}