/** Shopify CDN: Minification failed

Line 2500:0 Unexpected "}"

**/
/* --------------------------------------------------------------------------
   GRILLE MINIMALE — remplace Bootstrap (230 Ko) pour la poignee de classes
   encore utilisees, et les icones (100 Ko de CSS + 131 Ko de polices), qui
   sont desormais des SVG en ligne. Ce bloc vient EN PREMIER : main.css et la
   surcouche doivent pouvoir le surcharger.
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* Largeurs par palier reprises de Bootstrap : sans elles le contenu se colle
   au bord sur les ecrans intermediaires. */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: 12px;
}

@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

.row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: -12px;
}

.row > [class*="col-"] { padding-inline: 12px; }

.col-lg-9 { width: 100%; }

@media (min-width: 992px) {
  .col-lg-9 { width: 75%; }
}

.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.align-items-center { align-items: center; }
.justify-content-center { justify-content: center; }
.position-relative { position: relative; }
.px-1 { padding-inline: 4px; }

@media (min-width: 1200px) { .d-xl-none { display: none; } }

/* Icones en ligne : elles remplacent la police d'icones. */
.ta-ico { width: 20px; height: 20px; flex: none; }
.ta-etoile { width: 15px; height: 15px; }

/* ==========================================================================
   Transform'Action — surcouche de marque
   Chargee APRES main.css. On ne modifie pas le template d'origine :
   chaque section retravaillee ajoute son bloc ici.

   Deux pieges de cascade a connaitre dans ce fichier :
   1. main.css impose `.hero p { font-size: 26px }` et `.hero img { position:
      absolute }`. Tout selecteur qui les contredit doit etre prefixe `.hero`.
   2. Les variantes de couleur d'un composant doivent venir APRES sa definition
      de base, sinon elles sont annulees.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PALETTE — extraite de l'ebook lui-meme (vercel-transformaction/index.html),
   pas du site. Ce sont les couleurs que le client voit dans le livre.
   -------------------------------------------------------------------------- */

:root {
  --ta-ink: #17384d;        /* bleu petrole profond — couleur dominante du livre */
  --ta-ink-deep: #17212b;   /* presque noir, pour les fonds appuyes */
  --ta-accent: #8fd4f2;     /* bleu clair — accent du livre */
  --ta-accent-mid: #2f6f90; /* bleu intermediaire */
  --ta-amber: #f2b44d;      /* ambre — accent secondaire du livre */
  --ta-paper: #dcecf3;      /* bleu glace pale — fond clair du livre */
  --ta-white: #ffffff;

  /* On remplace les tokens du template par ceux du livre : tout ce qui utilise
     --accent-color / --heading-color suit automatiquement. */
  --accent-color: #17384d;
  --heading-color: #17384d;
  --nav-hover-color: #17384d; /* pastille active de la sidebar */

  /* Hauteur reelle du bandeau, republiee par transformaction.js. Sert
     UNIQUEMENT a decaler le hamburger : ne jamais s'en servir pour dimensionner
     le bandeau, cela creerait une boucle ou la barre ne peut que grandir. */
  --ta-announcement-h: 36px;

  /* ------------------------------------------------------------------
     TYPOGRAPHIE — deux familles, pas trois. Space Grotesk porte les titres
     et les elements d'interface, DM Sans tout le texte courant. Les tokens
     du template (--default-font, --heading-font, --nav-font) sont rediriges
     ici : aucune regle existante n'a besoin d'etre reecrite.
     ------------------------------------------------------------------ */
  --default-font: "DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --heading-font: "Space Grotesk", "DM Sans", system-ui, sans-serif;
  --nav-font: "Space Grotesk", "DM Sans", system-ui, sans-serif;

  /* Echelle fluide : une seule source pour les tailles de titres. */
  --ta-t1: clamp(2.5rem, 1.7rem + 3.2vw, 4.25rem);
  --ta-t2: clamp(1.8rem, 1.4rem + 1.7vw, 2.6rem);
  --ta-t3: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
  --ta-texte: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --ta-mesure: 68ch;
}

/* --------------------------------------------------------------------------
   0. BANDEAU D'ANNONCE — repris du site Shopify.
   Un seul message affiche a la fois, rotation pilotee par transformaction.js.
   -------------------------------------------------------------------------- */

.ta-announcement {
  /* En haut de page, le bandeau flotte AU-DESSUS du hero et le laisse
     transparaitre. Des que la page defile, il redevient opaque : sur les
     sections claires, du texte blanc sur un voile leger serait illisible.
     Le basculement est pilote par transformaction.js. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 998; /* au-dessus du header (997), sous le hamburger (9999) */
  min-height: 36px;
  padding: 8px 60px;
  background: var(--ta-ink);
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
  color: var(--ta-white);
  font-family: var(--nav-font);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.035em;
  text-align: center;
}

.ta-announcement__message {
  display: none;
}

.ta-announcement__message.is-active {
  display: block;
  animation: taAnnouncementIn 0.35s ease;
}

@keyframes taAnnouncementIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Le hamburger est en position fixed a 15px du haut : on le descend
   sous le bandeau pour qu'il ne le recouvre pas. */
.header .header-toggle {
  top: calc(15px + var(--ta-announcement-h));
}

@media (max-width: 575px) {
  .ta-announcement {
    padding: 8px 64px 8px 14px; /* de la place a droite pour le hamburger */
    font-size: 11.5px;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ta-announcement__message.is-active {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   1. BOUTON — base commune a toutes les sections.
   Version pleine, bleu petrole sur fond clair.
   -------------------------------------------------------------------------- */

.ta-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 14px 20px 14px 32px;
  border-radius: 50px;
  background: var(--ta-ink);
  color: var(--ta-white);
  font-family: var(--nav-font);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(23, 56, 77, 0.28);
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.ta-cta:hover {
  background: var(--ta-accent-mid);
  color: var(--ta-white);
  box-shadow: 0 16px 34px rgba(23, 56, 77, 0.36);
  transform: translateY(-2px);
}

.ta-cta:active {
  transform: translateY(0);
}

.ta-cta:focus-visible {
  outline: 3px solid var(--ta-ink);
  outline-offset: 4px;
}

/* La fleche vit dans une pastille : elle glisse au survol sans pousser le texte. */
.ta-cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.ta-cta__icon svg {
  width: 17px;
  height: 17px;
}

.ta-cta:hover .ta-cta__icon {
  background: rgba(255, 255, 255, 0.3);
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .ta-cta,
  .ta-cta__icon {
    transition: none;
  }

  .ta-cta:hover,
  .ta-cta:hover .ta-cta__icon {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   2. HERO — format d'origine conserve, seul le contenu change.
   Le titre passe de <h2> a <h1> : une page de vente doit porter un h1.
   Ces regles reprennent a l'identique celles de `.hero h2` dans main.css.
   -------------------------------------------------------------------------- */

.hero h1 {
  margin: 0;
  font-size: 64px;
  font-weight: 700;
  color: var(--ta-white);
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: 32px;
  }
}

/* Le visuel de fond porte deja le logo Transform'Action en haut a gauche et il
   est tres sombre. Deux consequences :
   - le voile blanc d'origine est remplace par un simple degrade vers le bas,
     assez leger pour ne pas noyer l'image, assez dense en bas pour le texte ;
   - le contenu descend en bas de section, sinon il recouvrirait le logo. */
.hero.section::before {
  /* Deux degrades superposes : un lateral qui assombrit la colonne de texte,
     un vertical tres leger. La statue, a droite, reste nette. */
  background:
    linear-gradient(90deg, rgba(7, 15, 22, 0.78) 0%, rgba(7, 15, 22, 0.42) 40%, rgba(7, 15, 22, 0.06) 72%),
    linear-gradient(180deg, rgba(7, 15, 22, 0.34) 0%, rgba(7, 15, 22, 0.16) 45%, rgba(7, 15, 22, 0.44) 100%);
}

.hero.section {
  /* Le visuel ne porte plus de logo incruste : le contenu revient au centre,
     comme dans le gabarit d origine. */
  align-items: center;
}

.hero > .container > .row > div > p {
  color: var(--ta-paper);
}

.hero .typed {
  border-bottom-color: var(--ta-accent);
}

.hero .hero-cta {
  margin-top: 28px;
}

/* Sur fond fonce, le bouton bleu petrole disparaitrait : il prend l'accent
   clair du livre, avec le texte en petrole. Ce bloc doit rester APRES le
   bloc 1, sinon la cascade l'annule. */
.hero .ta-cta {
  background: var(--ta-accent);
  color: var(--ta-ink);
  box-shadow: 0 10px 26px rgba(23, 33, 43, 0.45);
}

.hero .ta-cta:hover {
  background: var(--ta-white);
  color: var(--ta-ink);
  box-shadow: 0 16px 34px rgba(23, 33, 43, 0.55);
}

.hero .ta-cta:focus-visible {
  outline-color: var(--ta-accent);
}

.hero .ta-cta__icon {
  background: rgba(23, 56, 77, 0.16);
}

.hero .ta-cta:hover .ta-cta__icon {
  background: rgba(23, 56, 77, 0.26);
}

/* `.hero p { font-size: 26px }` de main.css s'applique aussi a cette note :
   d'ou le prefixe .hero, indispensable ici. */
.hero .ta-cta__note {
  margin: 14px 0 0;
  color: var(--ta-paper);
  font-size: 15px;
  font-weight: 500;
}

@media (max-width: 575px) {
  .hero .ta-cta {
    width: 100%;
    justify-content: space-between;
  }

  .hero .ta-cta__note {
    font-size: 14px;
  }
}

/* --------------------------------------------------------------------------
   3. LOGO DANS LA SIDEBAR
   La sidebar du template garde son comportement d'origine : panneau blanc
   coulissant sous 1200px, simple rail TRANSPARENT au-dessus. Il ne faut donc
   surtout pas lui donner un fond — elle aurait l'air ouverte en permanence.
   Comme le logo est blanc, c'est lui qui porte sa propre pastille sombre,
   dans le meme style arrondi que les onglets.
   -------------------------------------------------------------------------- */

.ta-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 140px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: 26px;
  background: var(--ta-ink);
  line-height: 0;
}

.ta-brand img {
  width: 100%;
  height: auto;
}

/* Version monogramme quand les onglets se replient en pastilles de 56px. */
.ta-brand__mark {
  display: none;
}

@media (min-width: 992px) {
  .ta-brand {
    width: 56px;
    max-width: 56px;
    height: 56px;
    padding: 12px;
    border-radius: 50%;
  }

  .ta-brand__full {
    display: none;
  }

  .ta-brand__mark {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   4. SECTION PRODUIT — remplace les anciens compteurs inventes et la section
   « Competences » et ses barres de pourcentage. Peu de texte : un visuel,
   ce qui est inclus, puis le parcours d'achat en quatre etapes.
   -------------------------------------------------------------------------- */

.ta-product-top {
  margin-bottom: 60px;
}

.ta-product-shot {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(23, 56, 77, 0.22);
}

.ta-includes {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.ta-includes li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ta-ink), transparent 88%);
  font-size: 16px;
}

.ta-includes li:last-child {
  border-bottom: 0;
}

.ta-includes svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--ta-accent-mid);
}

.ta-price-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0;
}

.ta-price-line strong {
  color: var(--ta-ink);
  font-family: var(--heading-font);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}

.ta-price-line span {
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  font-size: 15px;
}

.ta-steps-title {
  margin: 0 0 26px;
  color: var(--ta-ink);
  font-family: var(--heading-font);
  font-size: 26px;
  font-weight: 700;
}

.ta-step {
  height: 100%;
  padding: 26px 24px;
  border: 1px solid color-mix(in srgb, var(--ta-ink), transparent 88%);
  border-radius: 16px;
  background: var(--surface-color);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.ta-step:hover {
  border-color: var(--ta-accent);
  box-shadow: 0 16px 34px rgba(23, 56, 77, 0.12);
}

.ta-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--ta-paper);
  color: var(--ta-ink);
  font-family: var(--heading-font);
  font-size: 15px;
  font-weight: 700;
}

.ta-step h4 {
  margin: 0 0 8px;
  color: var(--ta-ink);
  font-size: 17px;
  font-weight: 700;
}

.ta-step p {
  margin: 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 15px;
  line-height: 1.6;
}

.ta-product-cta {
  margin-top: 44px;
  text-align: center;
}

.ta-product-cta__note {
  margin: 14px 0 0;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 15px;
}

@media (max-width: 575px) {
  .ta-product-cta .ta-cta {
    width: 100%;
    justify-content: space-between;
    padding-left: 24px;
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ta-step {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   5. TRANSFORMATIONS AVANT / APRES
   Reprise du carrousel du site Shopify : meme structure, memes photos, meme
   defilement par pas d'une carte. Section sombre, comme sur l'original :
   les photos ressortent et ca cree une respiration entre deux sections claires.
   -------------------------------------------------------------------------- */

.ba-section {
  padding: 90px 0;
  background: var(--ta-ink-deep);
}

.ba-heading {
  max-width: 640px;
  margin: 0 0 40px;
}

.ba-heading h2 {
  margin: 0 0 12px;
  color: var(--ta-white);
  font-family: var(--heading-font);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.ba-heading p {
  margin: 0;
  color: #9db1bb;
  font-size: 16px;
}

.ba-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
}

.ba-viewport {
  display: flex;
  flex: 1;
  gap: 22px;
  padding: 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.ba-viewport::-webkit-scrollbar {
  display: none;
}

.ba-viewport:focus-visible {
  outline: 3px solid var(--ta-accent);
  outline-offset: 4px;
}

.ba-card {
  flex: 0 0 min(480px, 86%);
  padding: 16px;
  border: 1px solid rgba(220, 236, 243, 0.16);
  border-radius: 22px;
  background: var(--ta-ink);
  scroll-snap-align: start;
}

.ba-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ba-pair figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  background: #0e222d;
}

.ba-pair img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ba-pair figcaption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(7, 19, 28, 0.82);
  color: #9db1bb;
  font-family: var(--nav-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.ba-pair figcaption.is-after {
  background: var(--ta-accent);
  color: var(--ta-ink);
}

.ba-caption {
  margin: 14px 4px 2px;
  color: var(--ta-white);
  font-size: 14px;
}

.ba-note {
  margin: 26px 0 0;
  color: #b3c4cd;
  font-size: 12px;
}

.single-arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: #0e222d;
  color: var(--ta-white);
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.single-arrow svg {
  width: 20px;
  height: 20px;
}

.single-arrow:hover {
  border-color: var(--ta-accent);
  color: var(--ta-accent);
}

.single-arrow:focus-visible {
  outline: 3px solid var(--ta-accent);
  outline-offset: 3px;
}

/* Sous 992px les fleches passent en surimpression sur les bords du carrousel. */
@media (max-width: 991px) {
  .ba-section {
    padding: 70px 0;
  }

  .single-arrow {
    position: absolute;
    top: calc(50% - 21px);
    z-index: 3;
    width: 42px;
    height: 42px;
    background: rgba(5, 19, 27, 0.93);
  }

  .single-arrow--prev {
    left: -7px;
  }

  .single-arrow--next {
    right: -7px;
  }

  .ba-card {
    flex-basis: 88%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .single-arrow {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   6. ICONES DE LA SIDEBAR
   Le rail est transparent au-dessus de 1200px et passe donc aussi bien sur le
   hero sombre que sur des sections claires. Les pastilles prennent le bleu
   petrole du livre avec des icones blanches : lisibles sur les deux fonds.
   -------------------------------------------------------------------------- */

.navmenu a,
.navmenu a:focus {
  background: var(--ta-ink);
  color: var(--ta-white);
}

.navmenu a:hover,
.navmenu .active,
.navmenu .active:focus,
.navmenu li:hover > a {
  background: var(--ta-accent);
  color: var(--ta-ink);
}

.header .header-toggle {
  background-color: var(--ta-ink);
  color: var(--ta-white);
}

/* --------------------------------------------------------------------------
   7. CARROUSEL D'APERCU DE L'OUTIL
   -------------------------------------------------------------------------- */

.ta-preview {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
}

.ta-preview__viewport {
  display: flex;
  flex: 1;
  gap: 22px;
  padding: 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.ta-preview__viewport::-webkit-scrollbar {
  display: none;
}

.ta-preview__viewport:focus-visible {
  outline: 3px solid var(--ta-ink);
  outline-offset: 4px;
}

.ta-preview__card {
  flex: 0 0 min(520px, 88%);
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ta-ink), transparent 86%);
  border-radius: 18px;
  background: var(--surface-color);
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.ta-preview__card:hover {
  border-color: var(--ta-accent);
  box-shadow: 0 18px 40px rgba(23, 56, 77, 0.16);
}

.ta-preview__card:focus-visible {
  outline: 3px solid var(--ta-ink);
  outline-offset: 3px;
}

.ta-preview__card img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--ta-paper);
}

.ta-preview__meta {
  display: block;
  padding: 18px 20px 20px;
}

.ta-preview__meta small {
  display: block;
  margin-bottom: 7px;
  color: var(--ta-accent-mid);
  font-family: var(--nav-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ta-preview__meta strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ta-ink);
  font-size: 17px;
  font-weight: 700;
}

.ta-preview__meta em {
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  font-size: 14px;
  font-style: normal;
}

/* Ce carrousel est sur fond clair : les fleches sombres du carrousel
   avant/apres ne conviennent pas telles quelles. */
.ta-preview .single-arrow {
  border-color: transparent;
  background: var(--ta-ink);
}

.ta-preview .single-arrow:hover {
  border-color: transparent;
  background: var(--ta-accent-mid);
  color: var(--ta-white);
}

.ta-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 22px;
}

.ta-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ta-ink), transparent 76%);
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.ta-dots button.is-active {
  background: var(--ta-ink);
  transform: scale(1.25);
}

.ta-dots button:focus-visible {
  outline: 2px solid var(--ta-ink);
  outline-offset: 3px;
}

@media (max-width: 991px) {
  .ta-preview .single-arrow {
    position: absolute;
    top: calc(50% - 21px);
    z-index: 3;
    width: 42px;
    height: 42px;
  }

  .ta-preview .single-arrow--prev {
    left: -7px;
  }

  .ta-preview .single-arrow--next {
    right: -7px;
  }
}

/* --------------------------------------------------------------------------
   8. VUE AGRANDIE
   -------------------------------------------------------------------------- */

.ta-lightbox {
  width: min(1100px, 92vw);
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: var(--ta-ink);
  color: var(--ta-white);
}

.ta-lightbox::backdrop {
  background: rgba(7, 15, 22, 0.82);
}

.ta-lightbox figure {
  margin: 0;
}

.ta-lightbox img {
  display: block;
  width: 100%;
  height: auto;
}

.ta-lightbox figcaption {
  padding: 16px 20px;
  font-size: 15px;
}

.ta-lightbox__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(7, 15, 22, 0.7);
  color: var(--ta-white);
  cursor: pointer;
}

.ta-lightbox__close svg {
  width: 20px;
  height: 20px;
}

.ta-lightbox__close:hover {
  background: var(--ta-accent);
  color: var(--ta-ink);
}

/* --------------------------------------------------------------------------
   12. FAQ
   -------------------------------------------------------------------------- */

/* Le signe + bascule en - a l'ouverture, sans image ni police d'icones. */
@media (prefers-reduced-motion: reduce) {
  .ta-preview__card,
  .ta-dots button {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   15. TEMOIGNAGES — sans photo ni profession : la citation, le prenom, les
   etoiles. Trois par rangee sur grand ecran.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   16. PIED DE PAGE
   Fond bleu petrole : c'est le seul moyen de porter le logo blanc, et ca
   ferme la page sur la couleur du livre.
   -------------------------------------------------------------------------- */

.footer {
  padding: 54px 0 34px;
  /* Un ton plus sombre que le bandeau offre juste au-dessus : les deux zones
     restent distinctes sans avoir besoin d'un trait de separation. */
  background: var(--ta-ink-deep);
  color: var(--ta-paper);
  text-align: center;
}

.footer-brand {
  display: inline-block;
  margin-bottom: 14px;
  line-height: 0;
}

.footer-brand img {
  width: 100%;
  max-width: 190px;
  height: auto;
}

.footer-baseline {
  margin: 0 0 24px;
  color: #9db1bb;
  font-size: 15px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.footer-links a {
  color: var(--ta-paper);
  font-size: 14px;
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--ta-accent);
  text-decoration: underline;
}

.footer-links a:focus-visible {
  outline: 2px solid var(--ta-accent);
  outline-offset: 3px;
}

.footer .copyright {
  padding-top: 20px;
  border-top: 1px solid rgba(220, 236, 243, 0.14);
  color: #b3c4cd;
  font-size: 13px;
}

.footer .copyright .sitename {
  color: var(--ta-white);
}

/* --------------------------------------------------------------------------
   17. BANDEAU OFFRE — derniere section de la page.
   Volontairement bas et pleine largeur plutot qu'un gros pave : l'argumentaire
   a gauche, le prix et le bouton a droite, la mention legale en dessous.
   -------------------------------------------------------------------------- */

.offre.section {
  padding: 0;
  background: var(--ta-ink);
  color: var(--ta-paper);
}

.offre .container {
  padding-top: 40px;
  padding-bottom: 36px;
}

.ta-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px 40px;
}

.ta-offer__left {
  flex: 1 1 380px;
  min-width: 0;
}

.ta-offer__kicker {
  margin: 0 0 6px;
  color: var(--ta-accent);
  font-family: var(--nav-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ta-offer h2 {
  margin: 0 0 12px;
  color: var(--ta-white);
  font-family: var(--heading-font);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.15;
}

/* Les trois garanties tiennent sur une ligne : c'est ce qui garde le
   bandeau bas. Elles se replient d'elles-memes si la place manque. */
.ta-offer__points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ta-offer__points li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ta-paper);
  font-size: 14px;
}

.ta-offer__points svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--ta-accent);
}

.ta-offer__buy {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 0 1 auto;
}

.ta-offer__price {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  white-space: nowrap;
}

.ta-offer__price strong {
  color: var(--ta-white);
  font-family: var(--heading-font);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}

.ta-offer__price span {
  color: var(--ta-accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.ta-cta--light {
  background: var(--ta-accent);
  color: var(--ta-ink);
  white-space: nowrap;
}

.ta-cta--light:hover {
  background: var(--ta-white);
  color: var(--ta-ink);
}

.ta-cta--light .ta-cta__icon {
  background: rgba(23, 56, 77, 0.16);
}

.ta-offer__legal {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(220, 236, 243, 0.14);
  color: #b3c4cd;
  font-size: 12px;
  line-height: 1.55;
}

@media (max-width: 767px) {
  .ta-offer__buy {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: 100%;
  }

  .ta-offer__price {
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
  }

  .ta-offer__buy .ta-cta {
    width: 100%;
    justify-content: space-between;
  }
}

/* --------------------------------------------------------------------------
   18. FAQ SUR DEUX COLONNES
   Huit questions empilees prenaient presque un ecran entier. On les repartit
   sur deux colonnes a partir de 768px : la hauteur est divisee par deux et
   aucune question n'est cachee — une FAQ sert justement a etre parcourue du
   regard pour trouver la sienne.
   `align-items: start` evite qu'une question ouverte etire sa voisine.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   19. LA OU CA COINCE — selecteur
   Les six blocages sont tous visibles d'un coup d'oeil, mais une seule reponse
   est affichee : le visiteur n'a pas besoin des six, il a besoin de la sienne.
   Sans JavaScript, les six panneaux restent visibles : rien n'est perdu.
   -------------------------------------------------------------------------- */

.ta-coince {
  max-width: 940px;
  margin: 0 auto;
}

.ta-coince__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 26px;
}

.ta-coince__tab {
  padding: 11px 18px;
  border: 1px solid color-mix(in srgb, var(--ta-ink), transparent 84%);
  border-radius: 50px;
  background: var(--surface-color);
  color: color-mix(in srgb, var(--default-color), transparent 28%);
  font-family: var(--default-font);
  font-size: 14.5px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color 0.22s ease, background-color 0.22s ease, color 0.22s ease;
}

.ta-coince__tab:hover {
  border-color: var(--ta-accent);
  color: var(--ta-ink);
}

.ta-coince__tab[aria-selected="true"] {
  border-color: transparent;
  background: var(--ta-ink);
  color: var(--ta-white);
  font-style: normal;
  font-weight: 600;
}

.ta-coince__tab:focus-visible {
  outline: 3px solid var(--ta-ink);
  outline-offset: 3px;
}

.ta-coince__panel {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 26px 28px;
  border: 1px solid color-mix(in srgb, var(--ta-ink), transparent 88%);
  border-left: 3px solid var(--ta-accent);
  border-radius: 6px 16px 16px 6px;
  background: var(--ta-paper);
}

.ta-coince__panel + .ta-coince__panel {
  margin-top: 12px; /* utile uniquement sans JavaScript */
}

.ta-coince__panel[hidden] {
  display: none;
}

.ta-coince__panel:focus-visible {
  outline: 3px solid var(--ta-ink);
  outline-offset: 3px;
}

.ta-coince__icon {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--ta-accent-mid);
}

.ta-coince__panel p {
  margin: 0;
  color: var(--ta-ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}

@media (max-width: 575px) {
  .ta-coince__tabs {
    justify-content: flex-start;
  }

  .ta-coince__tab {
    padding: 10px 15px;
    font-size: 13.5px;
  }

  .ta-coince__panel {
    padding: 22px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ta-coince__tab {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   20. CE QUE CONTIENT L'ACCES
   Deux cartes a listes prenaient pres de 500px pour huit informations dont
   trois sont deja dans les compteurs du haut de page. Deux lignes
   d'etiquettes suffisent : meme contenu, un quart de la hauteur.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   21. MINI-DIAGNOSTIC — remplace les compteurs, qui repetaient les etiquettes
   « Un seul acces ». Ici le visiteur manipule quelque chose : c'est un
   avant-gout du diagnostic en cinq questions qui est le coeur du produit.
   La selection repose sur des boutons radio natifs (clavier, lecteurs d'ecran),
   le script n'ecrit que la phrase de resultat.
   -------------------------------------------------------------------------- */

.essai.section {
  padding: 64px 0;
  background: var(--ta-paper);
}

.ta-essai {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.ta-essai__kicker {
  margin: 0 0 8px;
  color: var(--ta-accent-mid);
  font-family: var(--nav-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ta-essai__titre {
  margin: 0 0 28px;
  color: var(--ta-ink);
  font-family: var(--heading-font);
  font-size: clamp(23px, 2.6vw, 32px);
  font-weight: 700;
}

.ta-essai__form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px 34px;
  margin-bottom: 26px;
}

.ta-essai__groupe {
  margin: 0;
  padding: 0;
  border: 0;
}

.ta-essai__groupe legend {
  width: 100%;
  margin-bottom: 9px;
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 32%);
  font-family: var(--nav-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.ta-essai__choix {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.ta-essai__option {
  position: relative;
  cursor: pointer;
}

/* Le bouton radio reste focusable : on le rend invisible sans le retirer. */
.ta-essai__option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.ta-essai__option span {
  display: block;
  padding: 10px 17px;
  border: 1px solid color-mix(in srgb, var(--ta-ink), transparent 82%);
  border-radius: 50px;
  background: var(--ta-white);
  color: var(--ta-ink);
  font-size: 14.5px;
  font-weight: 500;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.ta-essai__option:hover span {
  border-color: var(--ta-accent);
}

.ta-essai__option input:checked + span {
  border-color: transparent;
  background: var(--ta-ink);
  color: var(--ta-white);
  font-weight: 600;
}

.ta-essai__option input:focus-visible + span {
  outline: 3px solid var(--ta-ink);
  outline-offset: 3px;
}

.ta-essai__resultat {
  display: block;
  padding: 26px 28px;
  border-radius: 16px;
  background: var(--ta-ink);
  color: var(--ta-paper);
  text-align: left;
}

.ta-essai__label {
  display: block;
  margin-bottom: 6px;
  color: var(--ta-accent);
  font-family: var(--nav-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.ta-essai__note {
  margin: 16px 0 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 12.5px;
}

@media (max-width: 767px) {
  .essai.section {
    padding: 48px 0;
  }

  .ta-essai__form {
    gap: 18px;
  }

  .ta-essai__groupe {
    width: 100%;
  }

  .ta-essai__resultat {
    padding: 22px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ta-essai__option span {
    transition: none;
  }
}

/* Resultat detaille du mini-diagnostic : donnees en lignes + exercices. */

.ta-essai__split {
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(220, 236, 243, 0.16);
  color: var(--ta-white);
  font-family: var(--heading-font);
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 700;
  line-height: 1.25;
}

.ta-essai__lignes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2px 28px;
  margin: 0 0 18px;
}

.ta-essai__ligne {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(220, 236, 243, 0.08);
}

.ta-essai__ligne dt {
  flex: 0 0 96px;
  color: var(--ta-accent);
  font-family: var(--nav-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ta-essai__ligne dd {
  margin: 0;
  color: var(--ta-paper);
  font-size: 14.5px;
  line-height: 1.45;
}

@media (max-width: 575px) {
  .ta-essai__ligne {
    flex-direction: column;
    gap: 2px;
  }

  .ta-essai__ligne dt {
    flex: none;
  }
}

/* --------------------------------------------------------------------------
   22. SECTION ACHAT — la boutique mono-produit, juste apres le hero.
   Le visiteur n'est plus renvoye vers une fiche produit externe : tout ce
   qu'il faut pour acheter est ici, consentement compris.
   -------------------------------------------------------------------------- */

.achat.section {
  padding: 70px 0;
  background: var(--ta-ink-deep);
  color: var(--ta-paper);
}

.ta-achat {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 68px);
  align-items: center;
  max-width: 1140px;
  margin: 0 auto;
}

/* --- Visuel produit --- */

.ta-achat__visuel {
  position: relative;
  isolation: isolate;
}

.ta-achat__visuel img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}

/* Un cadre decale derriere la couverture : un repere d'imprimeur, qui donne
   de la profondeur sans effet de style tape-a-l-oeil. */
.ta-achat__cadre {
  position: absolute;
  z-index: 1;
  inset: -14px -14px 20px 20px;
  border: 1px solid rgba(143, 212, 242, 0.45);
  border-radius: 14px;
}

.ta-achat__badge {
  position: absolute;
  z-index: 3;
  top: 16px;
  left: -12px;
  padding: 7px 14px;
  border-radius: 50px;
  background: var(--ta-accent);
  color: var(--ta-ink);
  font-family: var(--nav-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* --- Colonne texte --- */

.ta-achat__kicker {
  margin: 0 0 8px;
  color: var(--ta-accent);
  font-family: var(--nav-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ta-achat__titre {
  margin: 0 0 14px;
  color: var(--ta-white);
  font-family: var(--heading-font);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.ta-achat__desc {
  max-width: 52ch;
  margin: 0 0 22px;
  color: #9db1bb;
  font-size: 15.5px;
  line-height: 1.6;
}

.ta-achat__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.ta-achat__specs li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 9px 15px;
  border: 1px solid rgba(220, 236, 243, 0.16);
  border-radius: 12px;
}

.ta-achat__specs strong {
  color: var(--ta-white);
  font-family: var(--heading-font);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
}

.ta-achat__specs span {
  color: #9db1bb;
  font-size: 13px;
}

/* --- Prix --- */

.ta-achat__prix {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0 0 20px;
}

.ta-achat__prix del {
  color: #6f8794;
  font-size: 18px;
  text-decoration-thickness: 1.5px;
}

.ta-achat__prix strong {
  color: var(--ta-white);
  font-family: var(--heading-font);
  font-size: clamp(34px, 4vw, 44px);
  font-weight: 700;
  line-height: 1;
}

.ta-achat__prix span {
  flex: 1 0 100%;
  color: var(--ta-accent);
  font-size: 13px;
  font-weight: 600;
}

/* --- Consentement --- */

.ta-achat__consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
  padding: 15px 17px;
  border: 1px solid rgba(220, 236, 243, 0.18);
  border-radius: 12px;
  cursor: pointer;
}

.ta-achat__consent:hover {
  border-color: rgba(143, 212, 242, 0.5);
}

.ta-achat__consent input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--ta-accent);
  cursor: pointer;
}

.ta-achat__consent span {
  color: var(--ta-paper);
  font-size: 13.5px;
  line-height: 1.5;
}

/* --- Bouton --- */

.ta-achat__cta {
  width: 100%;
  justify-content: space-between;
}

.ta-achat__cta.is-disabled {
  background: rgba(220, 236, 243, 0.16);
  color: #7d93a0;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

.ta-achat__cta.is-disabled .ta-cta__icon {
  background: rgba(220, 236, 243, 0.1);
}

.ta-achat__aide {
  margin: 10px 0 0;
  color: #b3c4cd;
  font-size: 12.5px;
}

.ta-achat__aide[hidden] {
  display: none;
}

.ta-achat__reassurance {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 20px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(220, 236, 243, 0.14);
  list-style: none;
}

.ta-achat__reassurance li {
  position: relative;
  padding-left: 18px;
  color: #9db1bb;
  font-size: 13px;
}

.ta-achat__reassurance li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--ta-accent);
  border-bottom: 2px solid var(--ta-accent);
  transform: translateY(-70%) rotate(-45deg);
}

@media (max-width: 991px) {
  .ta-achat {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .ta-achat__visuel {
    max-width: 560px;
    margin-inline: auto;
  }

  .ta-achat__badge {
    left: 10px;
  }
}

/* --------------------------------------------------------------------------
   C-12 — Cibles tactiles des pastilles de carrousel.
   Le point reste petit visuellement, mais la zone atteignable au doigt fait
   44px : on agrandit avec du remplissage transparent, pas le point lui-meme.
   -------------------------------------------------------------------------- */

.ta-dots {
  gap: 0;
}

.ta-dots button {
  box-sizing: content-box;
  width: 9px;
  height: 9px;
  padding: 17px;
  background-clip: content-box;
  border: 0;
}

/* C-09 — Le h1 porte desormais la promesse produit. La marque reste dominante,
   le complement descriptif passe en dessous, plus petit. */
.hero-h1-sous {
  display: block;
  margin-top: 6px;
  font-size: 0.36em;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
}

/* Une note sur cinq peut etre inferieure a cinq : les etoiles manquantes
   restent visibles, en contour, plutot que de disparaitre. */
.ta-etoile--vide { opacity: 0.45; }

/* --------------------------------------------------------------------------
   PAGES DE CONTENU — /pages/*, /collections/*, /search et la page mot de
   passe. Sans gabarit, ces routes tombaient en erreur ou affichaient la FAQ.
   -------------------------------------------------------------------------- */

.contenu.section { padding: 90px 0 70px; }

.ta-contenu { max-width: 760px; margin: 0 auto; }

.ta-contenu__titre {
  margin: 0 0 24px;
  color: var(--ta-ink);
  font-family: var(--heading-font);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
}

.ta-contenu__corps { color: var(--default-color); font-size: 16px; line-height: 1.7; }
.ta-contenu__corps h2 { margin: 32px 0 12px; color: var(--ta-ink); font-size: 22px; }
.ta-contenu__corps ul { padding-left: 20px; }
.ta-contenu__corps a { color: var(--ta-accent-mid); }

.ta-contenu__retour { margin-top: 40px; }
.ta-contenu__retour a { color: var(--ta-accent-mid); text-decoration: none; font-weight: 600; }
.ta-contenu__retour a:hover { text-decoration: underline; }

.ta-catalogue { display: grid; gap: 20px; margin: 24px 0 0; padding: 0; list-style: none; }
.ta-catalogue a { display: block; color: var(--ta-ink); text-decoration: none; }
.ta-catalogue img { width: 100%; height: auto; border-radius: 12px; margin-bottom: 10px; }
.ta-catalogue strong { display: block; font-size: 18px; }
.ta-catalogue span { color: var(--ta-accent-mid); font-weight: 600; }

.ta-recherche { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 24px; }
.ta-recherche label { flex: 1 0 100%; font-weight: 600; }
.ta-recherche input {
  flex: 1 1 260px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--ta-ink), transparent 80%);
  border-radius: 10px;
  font-size: 16px;
}

/* --------------------------------------------------------------------------
   C-19 — CARROUSEL D'APERCU : hauteur des cartes et lisibilite.
   Deux defauts constates en production :
   1. La vue « mode coach » est au format telephone (390x844). Dans une rangee
      flex, elle etirait TOUTES les cartes a sa hauteur, d'ou d'immenses zones
      vides. align-items:flex-start empeche l'etirement, et un rapport
      d'image fixe donne la meme hauteur a toutes les vues.
   2. Cartes blanches sur section blanche : rien ne les detachait. La section
      prend le bleu glace du livre, les cartes ressortent.
   -------------------------------------------------------------------------- */

.produit.section {
  background: var(--ta-paper);
}

.ta-preview__viewport {
  align-items: flex-start;
}

.ta-preview__card img {
  aspect-ratio: 1220 / 900;
  object-fit: contain;
  object-position: center;
  background: #eef5f9;
}

/* Etat transparent : uniquement en haut de page, sur le hero. */
.ta-announcement.est-transparent {
  background: rgba(7, 15, 22, 0.26);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .ta-announcement { transition: none; }
}

/* ==========================================================================
   v3 — 22/08/2026
   Typographie sur deux familles, FAQ en colonne unique, grille d'avis sans
   carrousel, page de paiement. Ce bloc est charge en dernier : il fait
   autorite sur tout ce qui precede.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Rythme typographique
   -------------------------------------------------------------------------- */

body {
  font-family: var(--default-font);
  font-size: var(--ta-texte);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--heading-font);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.section-title h2 {
  font-size: var(--ta-t2);
  line-height: 1.12;
}

.section-title p {
  max-width: 56ch;
  margin-inline: auto;
  color: color-mix(in srgb, var(--default-color), transparent 22%);
}

/* Au-dela d'environ 70 caracteres, l'oeil retrouve mal le debut de la ligne
   suivante. On borne les paragraphes, pas les conteneurs. */
.ta-achat__resume,
.ta-faq__reponse p,
.ta-paiement__entete p,
.ta-essai__note,
.ba-note {
  max-width: var(--ta-mesure);
}

/* Lien d'evitement : invisible jusqu'a ce que le clavier l'atteigne. */
.ta-skip-link {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 10000;
  padding: 12px 18px;
  border-radius: 0 0 12px 0;
  background: var(--ta-ink);
  color: var(--ta-white);
  font-family: var(--nav-font);
  font-weight: 600;
  text-decoration: none;
}

.ta-skip-link:focus {
  left: 0;
}

/* --------------------------------------------------------------------------
   FAQ — une seule colonne.
   L'ancienne grille a deux colonnes donnait l'impression qu'une question se
   refermait quand on en ouvrait une autre : la ligne de grille s'agrandissait
   et tout le reste se decalait. En colonne unique, une ouverture pousse le
   contenu vers le bas sans jamais deplacer ce qui est au-dessus.
   -------------------------------------------------------------------------- */

.ta-faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 820px;
  margin-inline: auto;
}

.ta-faq__item {
  border: 1px solid color-mix(in srgb, var(--ta-ink), transparent 88%);
  border-radius: 16px;
  background: var(--surface-color);
  scroll-margin-top: 110px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ta-faq__item:hover {
  border-color: color-mix(in srgb, var(--ta-ink), transparent 68%);
}

.ta-faq__item[open] {
  border-color: var(--ta-accent);
  box-shadow: 0 12px 32px rgba(23, 56, 77, 0.08);
}

.ta-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  color: var(--ta-ink);
  font-family: var(--heading-font);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.ta-faq__item summary::-webkit-details-marker {
  display: none;
}

/* Le signe + bascule en - a l'ouverture, sans image ni police d'icones. */
.ta-faq__item summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ta-paper);
  color: var(--ta-ink);
  font-family: var(--default-font);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  transition: background-color 0.2s ease;
}

.ta-faq__item[open] summary::after {
  content: "\2212";
  background: var(--ta-accent);
}

.ta-faq__item summary:focus-visible {
  outline: 3px solid var(--ta-ink);
  outline-offset: -3px;
  border-radius: 16px;
}

.ta-faq__reponse {
  padding: 0 22px 22px;
  animation: taFaqOuverture 0.26s ease;
}

.ta-faq__reponse p {
  margin: 0;
  color: color-mix(in srgb, var(--default-color), transparent 16%);
  line-height: 1.7;
}

@keyframes taFaqOuverture {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.ta-faq__suite {
  max-width: 820px;
  margin: 26px auto 0;
  color: color-mix(in srgb, var(--default-color), transparent 28%);
  text-align: center;
}

.ta-faq__suite a {
  color: var(--ta-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Avis — grille statique.
   Le carrousel Swiper cachait cinq avis sur six et coutait 173 Ko de JS+CSS
   pour un contenu qui tient dans une grille.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Fil d'Ariane
   -------------------------------------------------------------------------- */

.ta-fil ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}

.ta-fil li + li::before {
  content: "\203a";
  margin-right: 8px;
  color: color-mix(in srgb, var(--default-color), transparent 55%);
}

.ta-fil a {
  color: var(--ta-accent-mid);
  text-decoration: none;
}

.ta-fil a:hover { text-decoration: underline; }

.ta-fil [aria-current="page"] {
  color: color-mix(in srgb, var(--default-color), transparent 35%);
}

/* --------------------------------------------------------------------------
   Page de paiement
   -------------------------------------------------------------------------- */

.paiement.section {
  padding-top: 90px;
}

.ta-paiement__entete {
  margin-bottom: 34px;
}

.ta-paiement__entete h1 {
  margin: 0 0 12px;
  color: var(--ta-ink);
  font-size: var(--ta-t2);
  font-weight: 700;
  line-height: 1.1;
}

.ta-paiement__entete p {
  margin: 0;
  color: color-mix(in srgb, var(--default-color), transparent 22%);
}

.ta-paiement {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}

.ta-paiement h2 {
  margin: 0 0 20px;
  color: var(--ta-ink);
  font-size: 1.25rem;
  font-weight: 600;
}

.ta-paiement__recap,
.ta-paiement__action {
  padding: 28px 26px;
  border: 1px solid color-mix(in srgb, var(--ta-ink), transparent 88%);
  border-radius: 20px;
  background: var(--surface-color);
}

.ta-paiement__action {
  background: var(--ta-paper);
  border-color: color-mix(in srgb, var(--ta-ink), transparent 78%);
}

.ta-paiement__article {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  align-items: center;
  gap: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid color-mix(in srgb, var(--ta-ink), transparent 90%);
}

.ta-paiement__article img {
  width: 84px;
  height: 84px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--ta-paper);
}

.ta-paiement__article-titre {
  margin: 0 0 4px;
  color: var(--ta-ink);
  font-family: var(--heading-font);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.ta-paiement__article-meta {
  margin: 0;
  color: color-mix(in srgb, var(--default-color), transparent 35%);
  font-size: 0.9rem;
}

.ta-paiement__article-prix {
  margin: 0;
  color: var(--ta-ink);
  font-family: var(--heading-font);
  font-size: 1.1rem;
  font-weight: 700;
  white-space: nowrap;
}

.ta-paiement__inclus-titre {
  margin: 22px 0 12px;
  color: var(--ta-ink);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ta-paiement__inclus {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ta-paiement__inclus li {
  position: relative;
  padding: 7px 0 7px 30px;
  color: color-mix(in srgb, var(--default-color), transparent 12%);
  line-height: 1.55;
}

.ta-paiement__inclus li::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 4px;
  width: 13px;
  height: 7px;
  border-left: 2.4px solid var(--ta-accent-mid);
  border-bottom: 2.4px solid var(--ta-accent-mid);
  transform: rotate(-45deg);
}

.ta-paiement__total {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--ta-ink), transparent 90%);
}

.ta-paiement__total span {
  margin-right: auto;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  font-weight: 500;
}

.ta-paiement__total del {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.ta-paiement__total strong {
  color: var(--ta-ink);
  font-family: var(--heading-font);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
}

.ta-paiement__cta {
  width: 100%;
  justify-content: space-between;
  margin-top: 6px;
}

.ta-paiement__confiance {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.ta-paiement__confiance li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  color: color-mix(in srgb, var(--default-color), transparent 18%);
  font-size: 0.92rem;
  line-height: 1.45;
}

.ta-paiement__confiance svg {
  flex: none;
  width: 19px;
  height: 19px;
  color: var(--ta-accent-mid);
}

.ta-paiement__apres {
  margin-top: 46px;
}

.ta-paiement__apres h2 {
  margin: 0 0 22px;
  color: var(--ta-ink);
  font-size: var(--ta-t3);
  font-weight: 600;
}

.ta-paiement__etapes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.ta-paiement__etapes li {
  display: grid;
  gap: 6px;
  padding: 22px 22px 24px;
  border-radius: 18px;
  background: var(--ta-paper);
}

.ta-paiement__num {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--ta-ink);
  color: var(--ta-white);
  font-family: var(--heading-font);
  font-size: 0.95rem;
  font-weight: 700;
}

.ta-paiement__etapes strong {
  color: var(--ta-ink);
  font-family: var(--heading-font);
  font-size: 1.05rem;
}

.ta-paiement__etapes span:not(.ta-paiement__num) {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 0.95rem;
  line-height: 1.6;
}

.ta-paiement__legal {
  max-width: 74ch;
  margin: 34px 0 0;
  color: color-mix(in srgb, var(--default-color), transparent 32%);
  font-size: 0.9rem;
  line-height: 1.6;
}

.ta-paiement__legal a {
  color: var(--ta-accent-mid);
}

@media (min-width: 900px) {
  .ta-paiement {
    grid-template-columns: 1.35fr 1fr;
    gap: 26px;
  }

  .ta-paiement__action {
    position: sticky;
    top: 96px;
  }

  .ta-paiement__etapes {
    grid-template-columns: repeat(3, 1fr);
  }
}



/* --------------------------------------------------------------------------
   Section achat : le resume introduit le produit avant les chiffres.
   -------------------------------------------------------------------------- */

.ta-achat__resume {
  margin: 0 0 22px;
  color: color-mix(in srgb, var(--default-color), transparent 18%);
  line-height: 1.65;
}

.ta-achat__resume--produit p {
  margin: 0 0 12px;
}

.ta-achat__resume--produit p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Pied de page : trois colonnes de liens internes.
   Un pied qui ne contient que des mentions legales ne relie rien ; ces liens
   disent aussi aux moteurs quelles pages comptent.
   -------------------------------------------------------------------------- */

.footer-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  width: 100%;
  max-width: 940px;
  margin: 30px auto 34px;
  text-align: left;
}

.footer-nav__titre {
  margin: 0 0 12px;
  color: var(--ta-white);
  font-family: var(--heading-font);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav li {
  margin-bottom: 9px;
}

.footer-nav a {
  color: color-mix(in srgb, var(--ta-white), transparent 22%);
  font-size: 0.95rem;
  line-height: 1.5;
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--ta-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 768px) {
  .footer-nav {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}


/* --------------------------------------------------------------------------
   Rythme vertical : un peu plus d'air entre les sections qu'au gabarit.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
  section,
  .section {
    padding: 78px 0;
  }

  .section-title {
    padding-bottom: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ta-faq__reponse {
    animation: none;
  }

  .ta-faq__item,
}

/* --------------------------------------------------------------------------
   Bloc de paiement pose sur fond clair.
   Les styles d'origine de .ta-achat__consent visent la section achat, qui est
   sur fond bleu profond : repris tels quels, le texte du consentement et le
   message d'aide devenaient invisibles ici.
   -------------------------------------------------------------------------- */

.ta-paiement__action .ta-achat__consent {
  margin-bottom: 20px;
  border-color: color-mix(in srgb, var(--ta-ink), transparent 75%);
  background: var(--surface-color);
}

.ta-paiement__action .ta-achat__consent:hover {
  border-color: var(--ta-accent-mid);
}

.ta-paiement__action .ta-achat__consent span {
  color: color-mix(in srgb, var(--default-color), transparent 8%);
  font-size: 0.85rem;
}

.ta-paiement__action .ta-achat__consent input {
  accent-color: var(--ta-ink);
}

.ta-paiement__action .ta-achat__aide {
  color: color-mix(in srgb, var(--default-color), transparent 35%);
  font-size: 0.82rem;
}

.ta-paiement__cta.is-disabled {
  background: color-mix(in srgb, var(--ta-ink), transparent 84%);
  color: color-mix(in srgb, var(--ta-ink), transparent 40%);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

.ta-paiement__cta.is-disabled .ta-cta__icon {
  background: color-mix(in srgb, var(--ta-ink), transparent 88%);
}

/* --------------------------------------------------------------------------
   Barre laterale : Shopify enveloppe chaque section dans un
   <div class="shopify-section">, si bien que le selecteur `.header~main` du
   gabarit ne matche jamais. Resultat : la barre (200 px de large, dont 130
   entierement transparents) recouvrait le bord gauche du contenu et captait
   ses clics — sur la page de paiement, l'image et le debut du recapitulatif
   n'etaient pas cliquables. On rend la zone vide traversante et on decale le
   contenu des pages interieures, dont le texte est aligne a gauche.
   -------------------------------------------------------------------------- */

@media (min-width: 1200px) {
  .header {
    pointer-events: none;
  }

  .header .ta-brand,
  .header .navmenu,
  .header .header-toggle {
    pointer-events: auto;
  }
}

@media (min-width: 1200px) and (max-width: 1600px) {
  body:not(.template-index) .main .container {
    padding-left: 110px;
  }
}

/* Le resume de la section achat est pose sur le bleu profond : il lui faut la
   couleur claire du reste du bloc, pas la couleur de texte par defaut. */
.ta-achat__infos .ta-achat__resume,
.ta-achat__infos .ta-achat__resume p {
  color: color-mix(in srgb, var(--ta-paper), transparent 12%);
}

/* Sur la fiche produit, le titre du H1 est celui du produit : bien plus long
   que « L'ebook interactif ». On reduit l'echelle pour qu'il ne prenne pas
   quatre lignes. */
.template-product .ta-achat__titre {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.1;
}

/* Les titres de section n'ont plus de trait decoratif : la ligne fine et le
   segment d'accent que main.css dessinait sous chaque H2 revenaient a
   l'identique sur toute la page. La hierarchie tient a la taille du titre. */
.section-title h2 {
  padding-bottom: 0;
}

.section-title h2::before,
.section-title h2::after {
  display: none;
}

/* --------------------------------------------------------------------------
   Section auteurs — qui signe le programme.
   Posee sur le bleu petrole : elle tranche avec la section produit (bleu pale)
   au-dessus et « La ou ca coince » (blanc) en dessous, et sert de respiration
   au milieu de la page.
   -------------------------------------------------------------------------- */

.auteurs.section {
  background: var(--ta-ink);
  color: var(--ta-paper);
}

.ta-auteurs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: start;
}

.ta-auteurs__kicker {
  margin: 0 0 10px;
  color: var(--ta-accent);
  font-family: var(--nav-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ta-auteurs h2 {
  margin: 0 0 16px;
  color: var(--ta-white);
  font-size: var(--ta-t2);
  font-weight: 700;
  line-height: 1.1;
}

.ta-auteurs__resume {
  max-width: 46ch;
  margin: 0;
  color: color-mix(in srgb, var(--ta-paper), transparent 12%);
  font-size: 1.05rem;
  line-height: 1.7;
}

.ta-auteurs__preuves {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ta-auteurs__preuves li {
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-template-areas: "icone titre" ". texte";
  gap: 4px 14px;
  padding: 20px 22px;
  border: 1px solid rgba(220, 236, 243, 0.16);
  border-radius: 16px;
  background: rgba(220, 236, 243, 0.05);
}

.ta-auteurs__preuves svg {
  grid-area: icone;
  width: 22px;
  height: 22px;
  color: var(--ta-accent);
}

.ta-auteurs__preuves strong {
  grid-area: titre;
  align-self: center;
  color: var(--ta-white);
  font-family: var(--heading-font);
  font-size: 1.05rem;
  font-weight: 600;
}

.ta-auteurs__preuves span {
  grid-area: texte;
  color: color-mix(in srgb, var(--ta-paper), transparent 25%);
  font-size: 0.93rem;
  line-height: 1.6;
}

@media (min-width: 992px) {
  .ta-auteurs {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   Bloc d'offre — version « carte ».
   Ces regles etaient dessinees pour un bandeau de bas de page : padding nul,
   bande pleine largeur, tout aligne sur une ligne. Remonte avant la FAQ, ce
   bandeau paraissait plaque entre deux sections. Il devient une carte posee
   sur le fond de page, avec de l'air autour et une lecture verticale.
   -------------------------------------------------------------------------- */

.offre.section {
  padding: 70px 0;
  background: var(--background-color);
  color: var(--default-color);
}

.offre .container {
  padding-top: 0;
  padding-bottom: 0;
}

.ta-offer {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 30px;
  max-width: 940px;
  margin-inline: auto;
  padding: clamp(34px, 4vw, 56px) clamp(24px, 4vw, 56px);
  border-radius: 28px;
  background: var(--ta-ink);
  color: var(--ta-paper);
  box-shadow: 0 30px 60px rgba(23, 56, 77, 0.18);
  text-align: center;
}

.ta-offer__left {
  flex: none;
  width: 100%;
}

.ta-offer h2 {
  margin: 0 0 22px;
  font-size: var(--ta-t2);
  line-height: 1.1;
}

.ta-offer__points {
  justify-content: center;
  gap: 10px 12px;
}

.ta-offer__points li {
  gap: 9px;
  padding: 9px 16px;
  border: 1px solid rgba(220, 236, 243, 0.18);
  border-radius: 50px;
  background: rgba(220, 236, 243, 0.06);
  font-size: 0.92rem;
}

.ta-offer__buy {
  flex-direction: column;
  gap: 20px;
  width: 100%;
  padding-top: 28px;
  border-top: 1px solid rgba(220, 236, 243, 0.16);
}

.ta-offer__price {
  align-items: center;
  gap: 4px;
}

.ta-offer__price strong {
  font-size: clamp(38px, 4.5vw, 52px);
}

.ta-offer__price span {
  font-size: 13px;
}

.ta-offer__legal {
  max-width: 620px;
  margin: 22px auto 0;
  padding-top: 0;
  border-top: 0;
  color: color-mix(in srgb, var(--default-color), transparent 42%);
  font-size: 12.5px;
  text-align: center;
}

@media (min-width: 768px) {
  .ta-offer__buy {
    flex-direction: row;
    justify-content: center;
    gap: 30px;
  }

  .ta-offer__price {
    align-items: flex-end;
  }
}

/* Sur mobile, l'ancien bandeau mettait le prix et sa mention sur une meme
   ligne pour economiser de la hauteur. Dans la carte centree, ils s'empilent. */
@media (max-width: 767px) {
  .ta-offer__price {
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
}

/* --------------------------------------------------------------------------
   Menu mobile : panneau translucide.
   ATTENTION — le voile ne doit PAS etre pose sur .header lui-meme. Un
   backdrop-filter (comme un transform ou un filter) fait de l'element le
   conteneur de reference de ses descendants en position: fixed. Le bouton
   hamburger, enfant du header, se positionnait alors par rapport a la barre
   — parquee a left: -100% quand le menu est ferme — et se retrouvait hors de
   l'ecran, donc impossible a ouvrir. Le voile vit donc sur un pseudo-element,
   qui n'a aucun descendant.
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
  #header.header {
    background-color: rgba(23, 33, 43, 0.72);
    border-right: 1px solid rgba(220, 236, 243, 0.18);
    box-shadow: 24px 0 60px rgba(9, 18, 26, 0.35);
  }

  #header.header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
  }

  /* Le bouton reste ancre au coin de l'ecran, jamais a la barre. */
  #header .header-toggle {
    position: fixed;
    top: calc(15px + var(--ta-announcement-h));
    right: 15px;
    left: auto;
  }
}

/* --------------------------------------------------------------------------
   TrustBox — le widget est rendu par Trustpilot dans une iframe : on ne peut
   styler que ce qui l'entoure.
   -------------------------------------------------------------------------- */

.trustpilot.section {
  padding: 56px 0 78px;
  background: var(--background-color);
}

.ta-trustpilot {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}

.ta-trustpilot h2 {
  margin: 0 0 10px;
  color: var(--ta-ink);
  font-size: var(--ta-t3);
  font-weight: 600;
}

.ta-trustpilot__intro {
  max-width: 52ch;
  margin: 0 auto 24px;
  color: color-mix(in srgb, var(--default-color), transparent 28%);
  font-size: 0.95rem;
}

.ta-trustpilot__lien {
  margin: 18px 0 0;
  font-size: 0.92rem;
}

.ta-trustpilot__lien a {
  color: var(--ta-accent-mid);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ta-trustpilot__lien a:hover {
  color: var(--ta-ink);
}

/* Prix barre du bloc offre : meme traitement que celui de la section achat,
   sur un fond identique (bleu petrole). Le conteneur est en colonne
   (voir .ta-offer__price plus haut) :  place le prix barre
   au-dessus du prix actuel, sans egard au sens de la mise en page. */
.ta-offer__price del {
  order: -1;
  color: color-mix(in srgb, var(--ta-paper), transparent 45%);
  font-size: 15px;
  text-decoration-thickness: 1.5px;
}