/* Tertium - fiche livre (bloc 4)
   Jetons : voir assets/css/tokens.css. Aucune valeur en dur.

   Ce fichier porte : la galerie et ses vignettes, la colonne de droite, le
   bloc d'achat, le bloc « Version numérique », les onglets, les deux bandes de
   ventes croisees et la barre d'achat collante du mobile.

   Les rares mesures sans jeton sont ecrites en rem et signalees en commentaire,
   comme dans base.css et les feuilles du bloc 3. Les ecarts avec la maquette
   sont detailles dans JOURNAL.md, bloc 4.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Ossature
   -------------------------------------------------------------------------- */

.tt-fiche__corps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tt-gouttiere);
  padding-bottom: var(--tt-section);
}

/* La liste de classes de wc_product_class ramene les marges de WooCommerce. */
.tt-fiche__corps.product { margin: 0; }

.tt-fiche__resume { padding-top: calc(var(--tt-gap-s) / 2); }

/* --------------------------------------------------------------------------
   2. Couverture et vignettes
   -------------------------------------------------------------------------- */

.tt-couv {
  display: grid;
  place-items: center;
  margin: 0;
  padding: calc(var(--tt-section) - var(--tt-gap-s));  /* 50px : cadre large de la maquette */
  border: var(--tt-filet);
  background: var(--tt-papier);
}

.tt-couv__image {
  display: block;
  max-width: 100%;
  height: auto;
  box-shadow: var(--tt-ombre-couv);
}

/* Sans JavaScript, toutes les images restent visibles : le repli est complet.
   Le script pose data-tt-pret et n'en montre qu'une a la fois. */
.tt-couv[data-tt-pret] .tt-couv__image[hidden] { display: none; }

.tt-couv--vide {
  aspect-ratio: var(--tt-ratio-couv);
  border-color: var(--tt-bord-beige);
  background: var(--tt-papier-alt);
  color: var(--tt-texte-3);
  font-size: var(--tt-fs-micro);
  letter-spacing: var(--tt-ls-micro);
  text-transform: uppercase;
  text-align: center;
}

.tt-vignettes {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--tt-gap-s) / 1.4);
  margin: calc(var(--tt-gap-s) / 1.4) 0 0;
  padding: 0;
  list-style: none;
}

.tt-vignettes__item { flex: none; }

.tt-vignettes__bouton,
.tt-vignettes__lien {
  display: grid;
  place-items: center;
  width: var(--tt-touch);
  min-width: var(--tt-touch);
  height: var(--tt-touch);
  padding: calc(var(--tt-gap-s) / 2.3);
  border: var(--tt-filet);
  border-color: var(--tt-bord-champ);
  background: var(--tt-papier);
  cursor: pointer;
  transition: border-color var(--tt-t-rapide), background var(--tt-t-rapide);
}

/* La maquette dessine des vignettes de 74px ; la cible tactile minimale est de
   44px, on prend la plus grande des deux. */
.tt-vignettes__bouton,
.tt-vignettes__lien {
  width: 4.625rem;   /* 74px, pas de jeton de mesure */
  height: 4.625rem;
}

.tt-vignettes__bouton img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.tt-vignettes__bouton:hover { border-color: var(--tt-or); }

/* La vignette montree porte un filet encre epais, comme la maquette.
   Composition de deux jetons : l'epaisseur du filet fort, la couleur de l'encre. */
.tt-vignettes__bouton.est-actif {
  border: var(--tt-filet-fort);
  border-color: var(--tt-encre);
}

.tt-vignettes__lien {
  border-color: var(--tt-bord-beige);
  background: var(--tt-papier-alt);
  color: var(--tt-texte-3);
  font-size: var(--tt-fs-micro);
  line-height: 1.15;
  letter-spacing: var(--tt-ls-micro);
  text-transform: uppercase;
  text-align: center;
}

.tt-vignettes__lien:hover {
  border-color: var(--tt-or);
  color: var(--tt-or-texte);
}


/* --------------------------------------------------------------------------
   3. Colonne de droite : etiquettes, titre, auteur, accroche
   -------------------------------------------------------------------------- */

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

.tt-badge {
  padding: calc(var(--tt-gap-s) / 2.8) calc(var(--tt-gap-s) / 1.4);
  background: var(--tt-encre);
  color: var(--tt-papier);
  font-size: var(--tt-fs-micro);
  line-height: 1.3;
  letter-spacing: var(--tt-ls-micro);
  text-transform: uppercase;
}

.tt-surtitre {
  font-size: var(--tt-fs-micro);
  line-height: 1.3;
  letter-spacing: var(--tt-ls-micro);
  text-transform: uppercase;
  color: var(--tt-brique);
}

.tt-fiche__titre {
  margin: 0 0 calc(var(--tt-gap-s) / 1.4);
  font-size: var(--tt-fs-h1-page);
  line-height: 1.06;
  letter-spacing: var(--tt-ls-titre);
}

.tt-fiche__auteur {
  margin: 0 0 var(--tt-bloc);
  font-size: var(--tt-fs-corps);
  color: var(--tt-texte-2);
}

/* Le soulignement de la maquette est un beige rosé sans jeton : on prend le
   filet beige, qui est le plus proche. */
.tt-fiche__auteur a {
  color: var(--tt-texte-2);
  border-bottom: var(--tt-filet);
  border-color: var(--tt-bord-beige);
  transition: color var(--tt-t-rapide), border-color var(--tt-t-rapide);
}

.tt-fiche__auteur a:hover {
  color: var(--tt-brique);
  border-color: var(--tt-or);
}

.tt-fiche__accroche {
  max-width: 32.5rem;    /* 520px : mesure de ligne de la maquette */
  margin-bottom: calc(var(--tt-bloc) + var(--tt-gap-s) / 7);
  color: var(--tt-encre);
}

.tt-fiche__accroche p { margin: 0 0 var(--tt-gap-s); }
.tt-fiche__accroche p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   4. Bloc d'achat
   -------------------------------------------------------------------------- */

.tt-achat {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--tt-gap-s) var(--tt-bloc);
  padding: var(--tt-gap) 0;
  border-top: var(--tt-filet);
  border-bottom: var(--tt-filet);
}

.tt-achat__prix { flex: none; margin: 0; }

.tt-prix {
  margin: 0;
  font-family: var(--tt-serif);
  font-weight: 400;
  font-size: 2.375rem;    /* 38px : entre --tt-fs-h2 et --tt-fs-h1-page, pas de jeton */
  line-height: 1;
  white-space: nowrap;
}

.tt-prix del { opacity: .55; font-size: var(--tt-fs-h3); }
.tt-prix ins { text-decoration: none; }

.tt-achat__mention {
  margin: calc(var(--tt-gap-s) / 3.5) 0 0;
  font-size: var(--tt-fs-micro);
  color: var(--tt-texte-2);
}

/* Le formulaire natif de WooCommerce : on ne change que sa disposition. */
.tt-achat__form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--tt-gap-s);
  margin: 0 0 0 auto;
}

.tt-quantite {
  display: flex;
  align-items: center;
  border: var(--tt-filet);
  border-color: var(--tt-bord-champ);
  background: var(--tt-papier);
}

.tt-quantite__bouton {
  width: calc(var(--tt-touch) - var(--tt-gap-s) / 2.3);
  height: var(--tt-touch);
  border: 0;
  background: transparent;
  color: var(--tt-encre);
  font-size: var(--tt-fs-corps);
  line-height: 1;
  cursor: pointer;
  transition: background var(--tt-t-rapide), color var(--tt-t-rapide);
}

.tt-quantite__bouton:hover {
  background: var(--tt-papier-alt);
  color: var(--tt-or-texte);
}

.tt-quantite__bouton:active { background: var(--tt-or); color: var(--tt-encre); }

.tt-quantite .quantity { display: block; }

.tt-quantite input.qty {
  width: 3rem;           /* 48px : place pour trois chiffres */
  height: var(--tt-touch);
  border: 0;
  background: transparent;
  color: var(--tt-encre);
  font-family: var(--tt-sans);
  font-size: var(--tt-fs-corps-s);
  font-weight: 600;
  text-align: center;
  -moz-appearance: textfield;
}

.tt-quantite input.qty::-webkit-outer-spin-button,
.tt-quantite input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.tt-achat__ajouter {
  height: calc(var(--tt-touch) + var(--tt-gap-s) / 7);
  padding-inline: var(--tt-bloc);
  font-family: var(--tt-sans);
  font-size: var(--tt-fs-corps-s);
  font-weight: 600;
  letter-spacing: .04em;   /* interlettrage de bouton, plus serre que --tt-ls-micro */
  white-space: nowrap;
  cursor: pointer;
}

.tt-achat__indisponible {
  margin: 0 0 0 auto;
  padding: var(--tt-gap-s) var(--tt-gap);
  border: var(--tt-filet);
  border-color: var(--tt-bord-beige);
  background: var(--tt-papier-alt);
  color: var(--tt-texte-2);
  font-size: var(--tt-fs-corps-s);
}

/* --------------------------------------------------------------------------
   5. Ligne de disponibilite
      Pas de rouge : un titre epuise n'est pas une alerte.
   -------------------------------------------------------------------------- */

.tt-stock {
  display: flex;
  align-items: center;
  gap: calc(var(--tt-gap-s) / 1.55);
  margin: 0;
  padding: var(--tt-gap-s) 0 var(--tt-bloc);
  font-size: var(--tt-fs-meta);
  color: var(--tt-texte-2);
}

.tt-stock__pastille {
  width: calc(var(--tt-gap-s) / 2);
  height: calc(var(--tt-gap-s) / 2);
  flex: none;
  border-radius: 50%;
  background: currentColor;
}

.tt-stock--stock { color: var(--tt-stock); }
.tt-stock--commande { color: var(--tt-or-texte); }
.tt-stock--rupture { color: var(--tt-texte-3); }

/* --------------------------------------------------------------------------
   6. Bloc « Version numérique »
      Beige a filet or, la seule surface beige de la colonne.
   -------------------------------------------------------------------------- */

.tt-numerique {
  margin: 0 0 var(--tt-bloc);
  padding: var(--tt-gap);
  border: var(--tt-filet-or);
  background: var(--tt-papier-alt);
}

.tt-numerique__titre {
  display: flex;
  align-items: center;
  gap: calc(var(--tt-gap-s) / 1.75);
  margin: 0 0 calc(var(--tt-gap-s) / 1.75);
  font-size: var(--tt-fs-micro);
  letter-spacing: var(--tt-ls-micro);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--tt-or-texte);
}

.tt-numerique__detail {
  margin: 0 0 calc(var(--tt-gap-s) / 2.8);
  font-size: var(--tt-fs-corps-s);
  color: var(--tt-encre);
}

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

.tt-numerique__bouton {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--tt-gap-s) / 2.8);
  min-height: var(--tt-touch);
  padding: 0 var(--tt-gap);
  border-color: var(--tt-bord-beige);
  font-size: var(--tt-fs-corps-s);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   7. Onglets
      Motif tablist au-dessus de 900px, accordeon en dessous. Le script bascule
      les roles ARIA ; le CSS ne fait que suivre.
   -------------------------------------------------------------------------- */

.tt-onglets { margin-top: var(--tt-gap-s); }

.tt-onglets__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tt-bloc);
  border-bottom: var(--tt-filet-or);
}

.tt-onglets__bouton {
  padding: 0 0 calc(var(--tt-gap-s) / 1.4);
  border: 0;
  background: transparent;
  color: var(--tt-texte-2);
  font-family: var(--tt-sans);
  font-size: var(--tt-fs-corps-s);
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: color var(--tt-t-rapide), box-shadow var(--tt-t-rapide);
}

.tt-onglets__bouton:hover {
  color: var(--tt-brique);
  box-shadow: inset 0 -.125rem 0 var(--tt-or);   /* 2px : epaisseur du filet fort */
}

.tt-onglets__bouton[aria-selected="true"] {
  color: var(--tt-encre);
  box-shadow: inset 0 -.125rem 0 var(--tt-encre);  /* 2px : epaisseur du filet fort */
}

/* Le signe +/- n'existe qu'en accordeon : il est masque en mode onglets. */
.tt-onglets__signe { display: none; }

.tt-onglets__panneau {
  max-width: 33.75rem;    /* 540px : mesure de ligne de la maquette */
  padding-top: var(--tt-gap);
  color: var(--tt-encre);
}

.tt-onglets__panneau:focus-visible { outline: var(--tt-focus); outline-offset: var(--tt-focus-offset); }

/* Sans JavaScript, tous les panneaux restent ouverts : la fiche est complete,
   seulement plus longue. Le script pose data-tt-pret. */
.tt-onglets[data-tt-pret] .tt-onglets__panneau[data-tt-replie] { display: none; }

.tt-prose p { margin: 0 0 var(--tt-gap-s); }
.tt-prose p:last-child { margin-bottom: 0; }

/* Les titres importes de PrestaShop sont ramenes a un seul niveau : ils
   servaient de mise en valeur, pas de structure. Voir JOURNAL.md, bloc 4. */
.tt-prose h3 {
  margin: var(--tt-gap) 0 calc(var(--tt-gap-s) / 1.75);
  font-size: var(--tt-fs-h3);
}

.tt-prose h3:first-child { margin-top: 0; }

/* Dans l'accroche, ils deviennent de simples intertitres : un titre y suivrait
   directement le h1 de la fiche, ce qui ferait un saut de hierarchie. */
.tt-prose__intertitre,
.tt-fiche__accroche .tt-prose__intertitre {
  margin: var(--tt-gap-s) 0 calc(var(--tt-gap-s) / 2.8);
  font-family: var(--tt-serif);
  font-size: var(--tt-fs-h3);
  line-height: var(--tt-lh-titre);
}

/* Caracteristiques : deux colonnes de lignes, filet beige. */
.tt-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 calc(var(--tt-gouttiere) - var(--tt-gap-s) / 7);
  margin: 0;
}

.tt-specs__ligne {
  display: flex;
  justify-content: space-between;
  gap: var(--tt-gap-s);
  padding: calc(var(--tt-gap-s) / 1.4) 0;
  border-bottom: var(--tt-filet);
  border-color: var(--tt-papier-alt);
  font-size: var(--tt-fs-corps-s);
}

.tt-specs dt { color: var(--tt-texte-2); }
.tt-specs dd { margin: 0; font-weight: 500; text-align: right; }

/* Encart auteur de l'onglet « L'auteur ». */
.tt-auteur-encart {
  display: flex;
  align-items: flex-start;
  gap: 1.375rem;      /* 22px : maquette */
}

/* Le portrait ne suit pas la hauteur du texte : sans align-self et
   height:auto, le flex l'etirait sur toute la notice (constat du 17/09). */
.tt-auteur-encart__portrait {
  width: 6.875rem;    /* 110px : largeur de portrait de la maquette */
  height: auto;
  flex: none;
  align-self: flex-start;
  aspect-ratio: 3 / 4; /* maquette */
  object-fit: cover;
  object-position: center top;
}

/* Lien « Page complète » : capitales 12px, espacement .08em (maquette). */
.tt-auteur-encart__lien {
  font-size: 0.75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tt-auteur-encart__portrait--vide {
  display: grid;
  place-items: center;
  padding: calc(var(--tt-gap-s) / 2.3);
  border: var(--tt-filet);
  border-color: var(--tt-bord-beige);
  background: var(--tt-papier-alt);
  color: var(--tt-texte-3);
  font-size: var(--tt-fs-micro);
  letter-spacing: var(--tt-ls-micro);
  text-transform: uppercase;
  text-align: center;
}

.tt-auteur-encart__texte > .tt-prose { margin-bottom: var(--tt-gap-s); }

/* Presse : citation a filet brique. */
.tt-presse {
  display: flex;
  flex-direction: column;
  gap: var(--tt-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tt-presse__item {
  padding-left: var(--tt-gap-s);
  border-left: var(--tt-filet-accent);
}

.tt-presse__citation { margin: 0; }

.tt-presse__citation p {
  margin: 0;
  font-family: var(--tt-serif);
  font-weight: 400;
  font-size: var(--tt-fs-carte);
  line-height: 1.35;
}

.tt-presse__source {
  margin: calc(var(--tt-gap-s) / 2.3) 0 0;
  font-size: var(--tt-fs-micro);
  letter-spacing: var(--tt-ls-micro);
  text-transform: uppercase;
  color: var(--tt-texte-2);
}

/* --------------------------------------------------------------------------
   8. Ventes croisees
   -------------------------------------------------------------------------- */

.tt-croisees { padding-bottom: var(--tt-gap); }

.tt-croisees__tete {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--tt-gap-s) var(--tt-gap-s);
  padding-bottom: calc(var(--tt-gap-s) + var(--tt-gap-s) / 3.5);
  border-bottom: var(--tt-filet-or);
}

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

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

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

/* « Du même auteur » : deux cartes larges, sur beige. */
.tt-croisees__liste--large { grid-template-columns: repeat(2, 1fr); }

.tt-croisees__liste--large .tt-croisee {
  display: flex;
  gap: var(--tt-gap);
  padding: var(--tt-gap);
  background: var(--tt-papier-alt);
}

.tt-croisees__liste--large .tt-croisee__couv {
  width: 7.5rem;   /* 120px : couverture de la carte large */
  flex: none;
}

.tt-croisee { display: flex; flex-direction: column; }

.tt-croisee__couv {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--tt-papier);
  transition: transform var(--tt-t-lift), box-shadow var(--tt-t-lift);
}

.tt-croisee__couv img {
  display: block;
  width: 100%;
  aspect-ratio: var(--tt-ratio-couv);
  object-fit: cover;
  transition: transform var(--tt-t-zoom);
}

.tt-croisee:hover .tt-croisee__couv { transform: translateY(var(--tt-lift-petit)); box-shadow: var(--tt-ombre-carte); }
.tt-croisee:hover .tt-croisee__couv img { transform: scale(var(--tt-zoom-hover)); }

.tt-croisee__texte { display: flex; flex-direction: column; }

.tt-croisee__rayon {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: calc(var(--tt-gap-s) / 2.3) calc(var(--tt-gap-s) / 1.4);
  background: var(--tt-encre);
  color: var(--tt-papier);
  font-size: var(--tt-fs-micro);
  line-height: 1;
  letter-spacing: var(--tt-ls-micro);
  text-transform: uppercase;
}

.tt-croisee--vertical .tt-croisee__couv { position: relative; }

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

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

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

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

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

/* Bande sombre « Dans la collection … » */
.tt-croisees--sombre {
  margin-top: var(--tt-bloc);
  padding: var(--tt-section) 0;
  background: var(--tt-encre);
  color: var(--tt-papier);
}

.tt-croisees--sombre .tt-croisees__tete { border-bottom-color: var(--tt-or-voile); }
.tt-croisees--sombre .tt-croisee__titre a { color: var(--tt-papier); }
.tt-croisees--sombre .tt-croisee__titre a:hover { color: var(--tt-brique-claire); }
.tt-croisees--sombre .tt-croisee__auteur { color: var(--tt-sur-sombre-1); }
.tt-croisees--sombre .tt-croisees__lien { color: var(--tt-brique-claire); }
.tt-croisees--sombre .tt-croisee__rayon { background: var(--tt-papier); color: var(--tt-encre); }

/* --------------------------------------------------------------------------
   9. Barre d'achat collante, mobile seulement
   -------------------------------------------------------------------------- */

.tt-fiche__barre-mobile {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  align-items: center;
  gap: var(--tt-gap-s);
  padding: var(--tt-gap-s) var(--tt-gouttiere-mob);
  border-top: var(--tt-filet-or);
  background: var(--tt-papier);
  box-shadow: var(--tt-ombre-flottante);
}

.tt-fiche__barre-prix {
  margin: 0;
  font-family: var(--tt-serif);
  font-weight: 400;
  font-size: var(--tt-fs-h2-petit);
  line-height: 1;
  white-space: nowrap;
}

.tt-fiche__barre-bouton {
  flex: 1;
  min-height: calc(var(--tt-touch) + var(--tt-gap-s) / 3.5);
  padding-inline: var(--tt-gap-s);
  font-family: var(--tt-sans);
  font-size: var(--tt-fs-corps-s);
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
}

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

@media (max-width: 1200px) {
  .tt-croisees__liste { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {

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

  /* Couverture pleine largeur, sans cadre : c'est la maquette mobile. */
  .tt-couv {
    padding: var(--tt-gap) 0;
    border: 0;
    border-bottom: var(--tt-filet);
  }

  .tt-couv__image { max-width: 12.5rem; }   /* 200px : couverture mobile */

  .tt-achat { flex-wrap: wrap; }
  .tt-achat__form { margin-left: 0; width: 100%; }
  .tt-achat__ajouter { flex: 1; }
  .tt-achat__indisponible { margin-left: 0; width: 100%; }

  /* Onglets en accordeon : une entree par ligne, signe +/- a droite. */
  .tt-onglets__liste {
    display: block;
    border-bottom: 0;
  }

  .tt-onglets__bouton {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: calc(var(--tt-touch) + var(--tt-gap-s) / 3.5);
    padding: var(--tt-gap-s) 0;
    border-bottom: var(--tt-filet);
    color: var(--tt-encre);
    text-align: left;
    box-shadow: none;
  }

  .tt-onglets__bouton:hover { box-shadow: none; color: var(--tt-brique); }

  .tt-onglets__signe {
    display: block;
    margin-left: auto;
    color: var(--tt-brique);
    font-size: var(--tt-fs-corps);
    line-height: 1;
  }

  .tt-onglets__signe::before { content: "+"; }
  .tt-onglets__bouton[aria-expanded="true"] .tt-onglets__signe::before { content: "\2212"; }

  .tt-onglets__panneau { max-width: none; padding-bottom: var(--tt-gap-s); }

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

  /* Ventes croisees en defile horizontal. */
  .tt-croisees__liste,
  .tt-croisees__liste--large {
    display: flex;
    gap: var(--tt-gap-s);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .tt-croisees__liste > .tt-croisee {
    width: 9.375rem;   /* 150px : carte du defile mobile */
    flex: none;
    scroll-snap-align: start;
  }

  .tt-croisees__liste--large > .tt-croisee {
    display: flex;
    flex-direction: column;
    width: 11.25rem;   /* 180px : la carte large se verticalise */
    padding: var(--tt-gap-s);
  }

  .tt-croisees__liste--large .tt-croisee__couv { width: 100%; }

  .tt-croisees--sombre { padding: var(--tt-bloc) 0; }

  .tt-fiche__barre-mobile { display: flex; }

  /* La barre collante recouvre le pied de page : on lui rend sa place. */
  .tt-fiche { padding-bottom: calc(var(--tt-touch) + var(--tt-gap) + var(--tt-gap-s)); }
}

@media (max-width: 600px) {
  .tt-fiche__corps { padding-bottom: var(--tt-section); }
  .tt-achat { gap: var(--tt-gap-s); }
  .tt-achat__prix { width: 100%; }
  .tt-croisees__liste > .tt-croisee { width: 8.75rem; }   /* 140px */
}

/* --------------------------------------------------------------------------
   Onglet « Presse » — les mentions reprises de la revue

   Elles n'ont pas de citation : ce sont des liens. On les presente en liste
   dense, media en tete, plutot qu'en blocs de citation vides.
   -------------------------------------------------------------------------- */

.tt-presse__intertitre {
  margin: var(--tt-bloc) 0 var(--tt-gap-s);
  font-size: var(--tt-fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tt-texte-2);
}

.tt-presse-liens {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--tt-filet);
}

.tt-presse-liens__item { border-bottom: var(--tt-filet); }

.tt-presse-liens a {
  display: grid;
  grid-template-columns: minmax(0, 10rem) 1fr auto;
  gap: var(--tt-gap-s);
  align-items: baseline;
  padding: calc(var(--tt-gap-s) / 1.5) 0;
  color: var(--tt-encre);
  text-decoration: none;
  transition: color var(--tt-t-rapide);
}

.tt-presse-liens a:hover { color: var(--tt-brique); }

.tt-presse-liens__media {
  font-size: var(--tt-fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tt-texte-2);
  overflow-wrap: anywhere;
}

.tt-presse-liens a:hover .tt-presse-liens__media { color: var(--tt-brique); }

.tt-presse-liens__intitule {
  font-size: var(--tt-fs-meta);
  line-height: 1.4;
  min-width: 0;
}

.tt-presse-liens__signe { color: var(--tt-texte-2); }

.tt-presse-liens__note {
  margin: var(--tt-gap-s) 0 0;
  font-size: var(--tt-fs-meta);
  color: var(--tt-texte-2);
}

.tt-presse-liens__note a { color: var(--tt-encre); }
.tt-presse-liens__note a:hover { color: var(--tt-brique); }

@media (max-width: 600px) {
  .tt-presse-liens a {
    grid-template-columns: 1fr auto;
    gap: calc(var(--tt-gap-s) / 3) var(--tt-gap-s);
  }
  .tt-presse-liens__media { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Rencontres à venir autour de l'ouvrage

   Bande claire entre les onglets et les ventes croisées. Elle n'existe que
   s'il y a une date : pas de bloc vide, pas de « prochainement ».
   -------------------------------------------------------------------------- */

.tt-fiche-dates {
  padding-top: var(--tt-bloc);
  padding-bottom: var(--tt-bloc);
  border-top: var(--tt-filet);
}

.tt-fiche-dates__liste {
  margin: var(--tt-gap-s) 0;
  padding: 0;
  list-style: none;
}

.tt-fiche-dates__item {
  display: grid;
  grid-template-columns: minmax(0, 13rem) 1fr;
  gap: var(--tt-gap-s) var(--tt-bloc);
  align-items: baseline;
  padding: calc(var(--tt-gap-s) / 1.5) 0;
  border-bottom: var(--tt-filet);
}

.tt-fiche-dates__quand {
  margin: 0;
  font-size: var(--tt-fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tt-texte-2);
}

.tt-fiche-dates__quoi { margin: 0; min-width: 0; }

.tt-fiche-dates__quoi a {
  color: var(--tt-encre);
  text-decoration: none;
  font-size: var(--tt-fs-corps-s);
  font-weight: 600;
  transition: color var(--tt-t-rapide);
}

.tt-fiche-dates__quoi a:hover { color: var(--tt-brique); }

.tt-fiche-dates__ou {
  display: block;
  margin-top: calc(var(--tt-gap-s) / 4);
  font-size: var(--tt-fs-meta);
  color: var(--tt-texte-2);
}

@media (max-width: 600px) {
  .tt-fiche-dates__item { grid-template-columns: 1fr; gap: calc(var(--tt-gap-s) / 3); }
}