/* ==========================================================================
   Trombone PDF -- feuille de style du site vitrine.

   Le langage visuel vient de la maquette Claude Design
   (vendor/design/Trombone.dc.html) : papier creme, accent sarcelle, secondaire
   terracotta, titres Caprasimo, texte Figtree.

   Toutes les couleurs passent par les variables ci-dessous. Ne pas coder un
   hex en dur dans le HTML : ajouter ou ajuster un token ici.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Caprasimo&family=Figtree:wght@400;600;700&display=swap');

:root {
  /* -- fond, texte, filets -- */
  --color-bg: #f5ead8;
  --color-surface: #ebddc5;
  --color-text: #201e1d;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  /* -- neutres : une seule echelle de clarte partagee -- */
  --color-neutral-100: #f9f4ed;
  --color-neutral-200: #eee7db;
  --color-neutral-300: #dcd3c4;
  --color-neutral-400: #c0b6a5;
  --color-neutral-500: #a19786;
  --color-neutral-600: #82796a;
  --color-neutral-700: #645c50;
  --color-neutral-800: #474238;
  --color-neutral-900: #2e2b25;

  /* -- accent : sarcelle, la couleur du trombone -- */
  --color-accent: #146874;
  --color-accent-100: #e9f4f5;
  --color-accent-200: #cfe8eb;
  --color-accent-300: #a6d3d8;
  --color-accent-400: #6fb4bd;
  --color-accent-500: #3a94a0;
  --color-accent-600: #1c7a87;
  --color-accent-700: #146874;
  --color-accent-800: #0e4e58;
  --color-accent-900: #0a343b;

  /* -- secondaire : terracotta, pour les bouts de papier et le bouton final -- */
  --color-accent-2: #c67139;
  --color-accent-2-100: #fff2eb;
  --color-accent-2-200: #ffe1d0;
  --color-accent-2-300: #ffc6a5;
  --color-accent-2-400: #f6a06b;
  --color-accent-2-500: #d67f48;
  --color-accent-2-600: #b2622d;
  --color-accent-2-700: #8c491a;
  --color-accent-2-800: #643312;
  --color-accent-2-900: #402310;

  --font-heading: "Caprasimo", Georgia, serif;
  --font-body: "Figtree", system-ui, -apple-system, sans-serif;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);

  --wide: 1120px;
  --pad-x: clamp(18px, 4vw, 40px);
  /* Retrait du carrousel : cale sur le bord gauche de la colonne du site.
     Le `50%` se resout sur le conteneur, donc la barre de defilement ne
     decale rien -- contrairement a un calcul sur `100vw`. */
  --pad-rail: max(var(--pad-x), calc(50% - var(--wide) / 2));
}

/* -- base ---------------------------------------------------------------- */

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

/* Pas d'`overflow` sur `html` : le moindre reglage autre que `visible` casse le
   `position: sticky` du carrousel. Le debordement des elements decoratifs est
   coupe par `body` et par les conteneurs concernes. */
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
}

p { margin: 0; }
img, svg { display: block; max-width: 100%; }

a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-800); }

button { font: inherit; color: inherit; cursor: pointer; }

*:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 25%, transparent); }

summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

.tb-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -- boutons ------------------------------------------------------------- */

.tb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  padding: 14px 30px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.tb-btn-primary { background: var(--color-accent); color: var(--color-neutral-100); }
.tb-btn-primary:hover { background: var(--color-accent-800); color: var(--color-neutral-100); }

.tb-btn-secondary { border-color: var(--color-divider); color: var(--color-text); }
.tb-btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }

.tb-btn-warm { background: var(--color-accent-2); color: var(--color-neutral-100); }
.tb-btn-warm:hover { background: var(--color-accent-2-600); color: var(--color-neutral-100); }

.tb-btn-sm { padding: 9px 20px; font-size: 15.5px; }

/* -- en-tete ------------------------------------------------------------- */

.tb-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-divider);
}

.tb-header-inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 14px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.tb-brand { display: flex; align-items: center; gap: 11px; color: var(--color-text); }
.tb-brand:hover { color: var(--color-text); }
.tb-brand-name { font-family: var(--font-heading); font-size: 25px; letter-spacing: -0.01em; }

.tb-nav {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 26px);
  flex-wrap: wrap;
  font-weight: 600;
  font-size: 15.5px;
}
.tb-nav a { color: var(--color-neutral-700); }
.tb-nav a:hover { color: var(--color-accent-700); }
.tb-nav .tb-btn { color: var(--color-neutral-100); }

/* -- hero ---------------------------------------------------------------- */

.tb-hero {
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(40px, 7vw, 86px) var(--pad-x) clamp(30px, 5vw, 56px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}

.tb-kicker {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  margin-bottom: 16px;
}

.tb-hero h1 {
  /* Plafonne a 58 px : au-dela, « tenu ensemble. » deborde de la colonne du
     hero et le titre casse sur trois lignes. */
  font-size: clamp(40px, 5vw, 58px);
  line-height: 1.02;
  margin-bottom: 20px;
  text-wrap: balance;
}

.tb-lead {
  font-size: clamp(18px, 2.2vw, 21px);
  color: var(--color-neutral-800);
  max-width: 36ch;
  text-wrap: pretty;
  margin-bottom: 28px;
}

.tb-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.tb-stamp { margin-top: 20px; font-size: 15px; color: var(--color-neutral-700); }

/* -- mockup du hero ------------------------------------------------------ */

.tb-mockup { position: relative; justify-self: center; width: 100%; max-width: 520px; }

.tb-mockup-sheet {
  position: absolute;
  right: -6%;
  top: -16%;
  width: min(230px, 44%);
  aspect-ratio: 3 / 4;
  background: var(--color-accent-2-200);
  border-radius: 6px 26px 6px 6px;
  box-shadow: var(--shadow-md);
  animation: tbSheet .9s cubic-bezier(.3, 0, .2, 1) .25s both;
}

.tb-mockup-clip {
  position: absolute;
  left: -7%;
  bottom: -11%;
  z-index: 2;
  animation: tbSettle 1.1s cubic-bezier(.34, 1.4, .5, 1) .35s both;
}

.tb-window {
  position: relative;
  z-index: 1;
  background: var(--color-neutral-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* La fausse barre de fenetre a ete retiree avec le remplacement de la capture :
   l'image porte deja la barre de menu de l'application. */

/* Une capture posee dans son cadre. Les attributs `width`/`height` du HTML
   reservent la place avant le chargement : la page ne sursaute pas. */
.tb-shot-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Les deux emplacements de capture sont remplis; leurs regles de remplacement
   ont ete retirees avec eux. Pour en reposer un, il suffit d'un <img> dans un
   `.tb-window` (hero) ou un `.tb-figure` (pleine largeur). */

/* -- carrousel horizontal ------------------------------------------------
   Le bloc se fige le temps que les petites cartes defilent de cote, puis la
   page repart vers le bas. Sans JavaScript (ou sous 900 px, ou si le visiteur
   demande moins de mouvement), `.is-pinned` n'est jamais pose et le rail
   redevient une simple rangee qu'on fait glisser au doigt.
   ------------------------------------------------------------------------ */

/* La section porte la couleur de CE QUI SUIT, pas la sienne : le surplus de
   hauteur qui donne sa course au rail se confond alors avec la suite. En mode
   fige le bloc occupe tout l'ecran, donc ce surplus ne se voit plus; la regle
   reste pour les quelques pixels d'arrondi et pour le mode libre. */
.tb-rail { background: var(--color-bg); }

/* Meme respiration verticale que les sections ordinaires. */
.tb-rail-sticky {
  background: var(--color-surface);
  padding: clamp(48px, 7vw, 88px) 0;
  overflow: hidden;
}

.tb-rail-head {
  margin: 0 0 clamp(26px, 4vw, 40px);
  padding: 0 var(--pad-rail);
}
.tb-rail-head h2 { font-size: clamp(30px, 4vw, 44px); letter-spacing: -0.01em; }
.tb-rail-head p { margin-top: 12px; max-width: 54ch; color: var(--color-neutral-800); }
.tb-rail-hint {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
}

.tb-rail-track {
  display: flex;
  gap: clamp(14px, 2vw, 20px);
  padding: 4px var(--pad-x) 4px var(--pad-rail);
}

/* Pas de hauteur imposee : `align-items: stretch` du rail les met deja toutes
   a la hauteur de la plus remplie. */
.tb-mini {
  flex: none;
  width: clamp(210px, 24vw, 260px);
  background: var(--color-neutral-100);
  border-radius: var(--radius-md);
  padding: 26px 24px 28px;
  box-shadow: var(--shadow-sm);
}
.tb-mini-icon {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--color-accent-200);
  color: var(--color-accent-800);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.tb-mini h3 { font-size: 18px; margin-bottom: 7px; }
.tb-mini p { font-size: 14.5px; color: var(--color-neutral-800); text-wrap: pretty; }

/* La barre de progression et la mention, en bas du bloc.
   Ce n'est pas un ornement : en mode fige le bloc occupe tout l'ecran, et sans
   elle le bas de l'ecran serait une bande vide qui se lit comme un padding
   enorme. Elle dit aussi combien de cartes il reste, ce qu'une rangee sans
   barre de defilement ne dit plus. */
.tb-rail-foot {
  margin: clamp(26px, 4vw, 40px) 0 0;
  padding: 0 var(--pad-rail);
  display: flex;
  align-items: center;
  gap: 22px;
}
.tb-rail-bar {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: var(--color-neutral-300);
}
.tb-rail-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--color-accent-700);
  transform: scaleX(var(--rail-progress, 0));
  transform-origin: left center;
}
/* En mode libre, aucune progression a montrer : seule la mention reste. */
.tb-rail:not(.is-pinned) .tb-rail-bar { display: none; }

/* Mode fige : le bloc se colle sous l'en-tete et occupe la hauteur d'ecran qui
   reste. Le script pose `top`, `--rail-fill` et etire la section d'autant que
   le rail doit parcourir.

   Pourquoi remplir l'ecran : le bloc colle est plus court qu'un ecran, et
   l'espace entre son bas et le bas de l'ecran laissait voir la section
   par-dessous pendant tout le defilement -- un vide constant sous les cartes.
   On le reprend donc dans le bloc, et le titre, les cartes et la barre s'y
   repartissent. */
.tb-rail.is-pinned .tb-rail-sticky {
  position: sticky;
  min-height: var(--rail-fill, 0px);
  display: flex;
  flex-direction: column;
}
/* Les cartes gardent leur hauteur naturelle et se centrent dans ce qui reste :
   c'est la fenetre qui s'etire, pas elles. */
.tb-rail.is-pinned .tb-rail-view {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: 0;
}
.tb-rail.is-pinned .tb-rail-track { flex: none; will-change: transform; }

/* Mode libre : une rangee qu'on fait glisser soi-meme, avec accrochage.
   Aucune barre de defilement visible, ni ici ni en mode fige : c'est le geste
   de defilement qui deroule les cartes, pas une barre a attraper. */
.tb-rail:not(.is-pinned) .tb-rail-track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.tb-rail:not(.is-pinned) .tb-mini { scroll-snap-align: center; }

.tb-rail-track { scrollbar-width: none; -ms-overflow-style: none; }
.tb-rail-track::-webkit-scrollbar { width: 0; height: 0; display: none; }

.tb-figure {
  margin-top: clamp(28px, 4vw, 48px);
  background: var(--color-neutral-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
/* La capture qui suit le carrousel porte deja l'espacement de sa section. */
.tb-figure-flush { margin-top: 0; }

/* La legende sous une capture pleine largeur. */
.tb-figure-note {
  margin-top: 16px;
  text-align: center;
  font-size: 15px;
  color: var(--color-neutral-700);
}

/* -- sections ------------------------------------------------------------ */

.tb-section { padding: clamp(48px, 7vw, 88px) var(--pad-x); }
.tb-section-tint { background: var(--color-surface); }
.tb-inner { max-width: var(--wide); margin: 0 auto; }
.tb-inner-narrow { max-width: 1000px; margin: 0 auto; }
.tb-inner-tight { max-width: 820px; margin: 0 auto; }

.tb-section h2 {
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

.tb-section-lead {
  font-size: 19px;
  color: var(--color-neutral-800);
  max-width: 62ch;
  text-wrap: pretty;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.tb-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; font-size: 16.5px; }

/* -- avant / avec --------------------------------------------------------
   Deux objets plutot que deux boites : a gauche une pile de feuilles de
   travers, a droite une seule pile nette tenue par un trombone.
   ------------------------------------------------------------------------ */

.tb-vs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(30px, 5vw, 56px);
  align-items: start;
}

.tb-vs-label {
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

/* --- la pile d'avant : des slips de papier eparpilles --- */

.tb-mess { position: relative; padding-bottom: 8px; }
.tb-mess .tb-vs-label { color: var(--color-neutral-600); }

.tb-slips { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }

.tb-slip {
  position: relative;
  background: var(--color-neutral-100);
  color: var(--color-neutral-700);
  font-size: 16px;
  padding: 15px 18px 15px 46px;
  border-radius: 3px;
  box-shadow: var(--shadow-sm);
  filter: saturate(.55);
}
/* Chaque feuille prend un angle different : la pile a l'air jetee en vrac. */
.tb-slip:nth-child(1) { transform: rotate(-1.4deg); }
.tb-slip:nth-child(2) { transform: rotate(.9deg)  translateX(10px); }
.tb-slip:nth-child(3) { transform: rotate(-.6deg) translateX(-6px); }
.tb-slip:nth-child(4) { transform: rotate(1.6deg) translateX(4px); }

/* Le petit x rouille en marge de chaque feuille. */
.tb-slip::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -6.5px;
  background:
    linear-gradient(to bottom right, transparent 44%, var(--color-accent-2-600) 44%, var(--color-accent-2-600) 56%, transparent 56%),
    linear-gradient(to bottom left,  transparent 44%, var(--color-accent-2-600) 44%, var(--color-accent-2-600) 56%, transparent 56%);
}

/* --- la pile d'apres : une seule fiche, tenue par le trombone --- */

.tb-neat { position: relative; }
.tb-neat .tb-vs-label { color: var(--color-accent-800); }

.tb-neat-stack {
  position: relative;
  background: var(--color-neutral-100);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: clamp(24px, 3vw, 32px);
}
/* Les deux feuilles dessous, a peine visibles, qui donnent l'epaisseur. */
.tb-neat-stack::before,
.tb-neat-stack::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radius-md);
  background: var(--color-neutral-200);
  box-shadow: var(--shadow-sm);
}
.tb-neat-stack::before { transform: translate(7px, 7px); }
.tb-neat-stack::after  { transform: translate(14px, 14px); opacity: .6; }

/* Le trombone qui tient la pile, a cheval sur le bord superieur. Il se place a
   droite pour laisser le libelle « Avec Trombone » respirer a gauche. */
.tb-neat-clip {
  position: absolute;
  top: -34px;
  right: clamp(22px, 4vw, 38px);
  z-index: 2;
}

.tb-neat-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }

.tb-neat-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16.5px;
  color: var(--color-neutral-900);
}
/* Le crochet sarcelle, dessine en CSS pour ne pas repeter dix SVG. */
.tb-neat-list li::before {
  content: "";
  flex: none;
  width: 9px;
  height: 16px;
  margin: 3px 3px 0 3px;
  border: solid var(--color-accent);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(42deg);
}

/* -- cartes de fonctions ------------------------------------------------- */

.tb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(16px, 2.6vw, 26px);
}

.tb-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 28px);
  box-shadow: var(--shadow-sm);
}

.tb-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--color-accent-200);
  color: var(--color-accent-800);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}

.tb-card h3 { font-size: 23px; margin-bottom: 8px; }
.tb-card p { color: var(--color-neutral-800); font-size: 16px; text-wrap: pretty; }

/* -- tarifs -------------------------------------------------------------- */

.tb-price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(16px, 3vw, 26px);
  align-items: start;
}

.tb-price {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3.4vw, 34px);
  box-shadow: var(--shadow-sm);
}
.tb-price-feature {
  background: var(--color-neutral-100);
  border: 2px solid var(--color-accent);
  box-shadow: var(--shadow-lg);
  position: relative;
}

/* Les deux selecteurs portent le type `p` : sans lui, la regle generique
   `.tb-price p` ci-dessous les ecraserait a 16 px. */
p.tb-price-label {
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
  /* laisse la place a la pastille « Bientot » posee en absolu */
  padding-right: 100px;
}
.tb-price-feature p.tb-price-label { color: var(--color-accent-700); }

p.tb-price-amount {
  font-family: var(--font-heading);
  font-size: 46px;
  line-height: 1.1;
  margin: 10px 0 4px;
}
p.tb-price-amount small {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  color: var(--color-neutral-700);
}

/* Vise la description seule : `.tb-price p` attraperait aussi le libelle et le
   montant, a specificite egale mais plus loin dans le fichier. */
.tb-price-desc { margin-bottom: 22px; color: var(--color-neutral-800); font-size: 16px; }
.tb-price .tb-list { margin-bottom: 26px; font-size: 16px; color: var(--color-neutral-800); }

.tb-badge {
  position: absolute;
  top: clamp(24px, 3.4vw, 34px);
  right: clamp(24px, 3.4vw, 34px);
  background: var(--color-accent);
  color: var(--color-neutral-100);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}

/* -- bande sombre : la promesse de confidentialite ------------------------ */

/* Teintee : elle tombe entre la capture large et les prix, tous deux creme. */
.tb-band-section {
  background: var(--color-surface);
  padding: clamp(48px, 7vw, 88px) var(--pad-x);
}

.tb-band {
  max-width: var(--wide);
  margin: 0 auto;
  background: var(--color-accent-900);
  color: var(--color-neutral-100);
  border-radius: var(--radius-lg);
  padding: clamp(36px, 6vw, 68px) clamp(24px, 5vw, 56px);
  position: relative;
  overflow: hidden;
}
/* Le trombone geant, en filigrane, qui deborde du coin. */
.tb-band-clip {
  position: absolute;
  right: clamp(-70px, -5vw, -24px);
  top: -30px;
  opacity: .12;
  pointer-events: none;
}

/* 44ch et non 30 : le `ch` se mesure sur la police du texte, plus etroite que
   le Caprasimo des titres, et « Rien ne part. Jamais. » cassait sur trois
   lignes. */
.tb-band-head { position: relative; max-width: 44ch; margin-bottom: clamp(30px, 4vw, 46px); }
.tb-band h2 {
  font-size: clamp(32px, 4.6vw, 52px);
  color: var(--color-neutral-100);
  margin-bottom: 14px;
  text-wrap: balance;
}
.tb-band-head p { font-size: 19px; color: var(--color-accent-200); text-wrap: pretty; }

.tb-band-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: clamp(18px, 2.6vw, 28px);
}

.tb-band-tile {
  border-top: 2px solid var(--color-accent-2-400);
  padding-top: 16px;
}
.tb-band-tile h3 {
  font-size: 21px;
  color: var(--color-neutral-100);
  margin-bottom: 8px;
}
.tb-band-tile p { font-size: 15.5px; color: var(--color-accent-200); text-wrap: pretty; }

/* -- FAQ ----------------------------------------------------------------- */

.tb-faq { display: grid; gap: 12px; }

.tb-faq details {
  background: var(--color-neutral-100);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
}

.tb-faq summary {
  font-family: var(--font-heading);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
.tb-faq summary::after {
  content: "+";
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-accent-700);
}
.tb-faq details[open] summary::after { content: "\2212"; }

.tb-faq p {
  margin-top: 14px;
  color: var(--color-neutral-800);
  font-size: 16.5px;
  text-wrap: pretty;
}

/* -- appel a l'action final ---------------------------------------------- */

.tb-cta-section { padding: 0 var(--pad-x) clamp(48px, 7vw, 88px); }

.tb-cta {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--color-accent-800);
  color: var(--color-neutral-100);
  border-radius: var(--radius-lg);
  padding: clamp(34px, 6vw, 64px) clamp(24px, 5vw, 56px);
  position: relative;
  overflow: hidden;
}

.tb-cta-blob {
  position: absolute;
  right: -40px;
  top: -30px;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: var(--color-accent-700);
}

.tb-cta-clip { position: absolute; right: 56px; bottom: -46px; opacity: .5; }

.tb-cta-body { position: relative; max-width: 40ch; }
.tb-cta h2 { font-size: clamp(30px, 4.4vw, 48px); color: var(--color-neutral-100); text-wrap: balance; }
.tb-cta p { margin-bottom: 28px; font-size: 19px; color: var(--color-accent-200); }
.tb-cta-note { margin-top: 16px; font-size: 15px; color: var(--color-accent-300); }
.tb-cta .tb-btn-secondary { border-color: var(--color-accent-400); color: var(--color-neutral-100); }
.tb-cta .tb-btn-secondary:hover { background: var(--color-accent-700); color: var(--color-neutral-100); }

/* -- pied de page -------------------------------------------------------- */

.tb-footer { border-top: 1px solid var(--color-divider); padding: 30px var(--pad-x); }

.tb-footer-inner {
  max-width: var(--wide);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 15px;
  color: var(--color-neutral-700);
}

.tb-footer-brand { display: flex; align-items: center; gap: 10px; }
.tb-footer-brand span {
  font-family: var(--font-heading);
  font-size: 18px;
  color: var(--color-text);
}
.tb-footer-links { display: flex; gap: 22px; flex-wrap: wrap; }

/* La maison qui fait l'outil, puis d'ou il vient. */
.tb-footer-maker { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.tb-footer-maker a { color: var(--color-accent-700); font-weight: 600; }

/* -- animations ---------------------------------------------------------- */

@keyframes tbDraw { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } }

@keyframes tbSettle {
  0%   { transform: translateY(-9px) rotate(-7deg); }
  55%  { transform: translateY(3px) rotate(3deg); }
  80%  { transform: translateY(-1px) rotate(-1deg); }
  100% { transform: translateY(0) rotate(0); }
}

@keyframes tbSheet {
  from { opacity: 0; transform: translateY(10px) rotate(-10deg); }
  to   { opacity: 1; transform: translateY(0) rotate(-6deg); }
}

.tb-anim-settle { display: block; animation: tbSettle 1s cubic-bezier(.34, 1.4, .5, 1) .1s both; }
.tb-anim-draw { stroke-dasharray: 300; animation: tbDraw 1.1s cubic-bezier(.5, 0, .2, 1) both; }

/* -- telephone ----------------------------------------------------------- */

@media (max-width: 560px) {
  /* Sur un ecran etroit, les cinq liens de la barre prennent trois lignes.
     On garde le bouton de telechargement; les sections restent joignables par
     les liens du pied de page et par le defilement. */
  .tb-nav a:not(.tb-btn) { display: none; }

  /* Le trombone et la feuille sont ramenes dans le cadre pour ne pas etre
     tranches par le bord de l'ecran. */
  .tb-mockup-clip { left: 0; bottom: -6%; }
  .tb-mockup-sheet { right: 0; top: -12%; }
  .tb-cta-clip { right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }

}