/* ==========================================================
   SEGABY — Page Tarifs V3 (page-tarifs.php)
   Chargée uniquement sur /tarifs/ (voir functions.php).
   Identité V3 (bleu nuit / bleu électrique / blanc, Manrope),
   composition propre aux prix : ticket récapitulatif, navigation
   par catégorie, parcours de diagnostic en deux étapes, barème
   en lignes comparables.
   ========================================================== */

/* 0. Neutralisation du wrapper GeneratePress (page pleine largeur) */
body.segaby-fullwidth #page { max-width: none; padding-left: 0; padding-right: 0; }
body.segaby-fullwidth .site-content { display: block; max-width: none; width: 100%; margin: 0; padding: 0; }
body.segaby-fullwidth .content-area { width: 100%; max-width: none; float: none; margin: 0; padding: 0; }
body.segaby-fullwidth .site-main,
body.segaby-fullwidth #primary,
body.segaby-fullwidth .segaby-tarifs-page { width: 100%; max-width: none; margin: 0; padding: 0; }
body.segaby-fullwidth .inside-article { padding: 0; background: transparent; }
body.segaby-fullwidth #right-sidebar,
body.segaby-fullwidth #left-sidebar,
body.segaby-fullwidth .is-right-sidebar,
body.segaby-fullwidth .is-left-sidebar { display: none; }

/* 1. Jetons (identiques à l'accueil V3) */
.tf3 {
  --tf3-night: #0a1829;
  --tf3-night-2: #11253c;
  --tf3-night-3: #132d4b;
  --tf3-ink: #102239;
  --tf3-muted: #56677c;
  --tf3-blue: #2864d8;
  --tf3-blue-hover: #1f55c0;
  --tf3-blue-text: #2560d2;
  --tf3-sky: #8bbaff;
  --tf3-sky-soft: #c3d2e3;
  --tf3-ice: #e9f0fb;
  --tf3-paper: #f6f8fb;
  --tf3-line: #dce4ef;
  --tf3-max: 1180px;
  --tf3-gutter: 48px;
  --tf3-display: var(--segaby-font-display, "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
  color: var(--tf3-ink);
  background: #fff;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.tf3 *, .tf3 *::before, .tf3 *::after { box-sizing: border-box; }
.tf3 h1, .tf3 h2, .tf3 h3 {
  margin: 0;
  color: inherit;
  font-family: var(--tf3-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  text-wrap: balance;
}
.tf3 p { margin: 0; text-wrap: pretty; }
.tf3 ul, .tf3 ol, .tf3 dl, .tf3 dd { margin: 0; padding: 0; list-style: none; }
.tf3 svg { display: block; flex: none; }
.tf3 a { text-decoration: none; }
.tf3 a:focus-visible { outline: 3px solid #5c9dff; outline-offset: 3px; border-radius: 4px; }
.tf3-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
html { scroll-padding-top: 76px; }

.tf3-wrap { width: min(var(--tf3-max), calc(100% - 2 * var(--tf3-gutter))); margin-inline: auto; }
.tf3-section { padding: 88px 0; }

.tf3-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--tf3-blue-text);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.tf3-eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; }
.tf3-eyebrow--light { color: var(--tf3-sky); }
.tf3-eyebrow--filet { display: flex; min-height: 2px; }

.tf3-head { margin-bottom: 36px; }
.tf3 .tf3-head h2,
.tf3 .tf3-cat-head h2 { margin-top: 14px; font-size: clamp(30px, 3.4vw, 44px); }

.tf3 .tf3-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--tf3-sky);
  font-family: var(--tf3-display);
  font-size: 15px;
  font-weight: 800;
}
.tf3 .tf3-link svg { width: 18px; height: 18px; transition: transform .2s; }
.tf3 .tf3-link:hover { color: #fff; }
.tf3 .tf3-link:hover svg { transform: translateX(4px); }

/* 2. En-tête */
.tf3-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: radial-gradient(circle at 78% 30%, #1c3656 0%, transparent 48%), var(--tf3-night);
}
.tf3-hero::before {
  content: "";
  position: absolute;
  top: -200px;
  right: -160px;
  width: 460px;
  height: 460px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(255, 255, 255, .015);
  pointer-events: none;
}
.tf3-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 56px;
  align-items: center;
  padding: 64px 0 72px;
}
.tf3 .tf3-hero h1 { margin-top: 18px; font-size: clamp(36px, 4.4vw, 58px); letter-spacing: -0.045em; line-height: 1.05; }
.tf3-hero h1 span { color: var(--tf3-sky); }
.tf3-hero-lead { max-width: 34em; margin-top: 22px !important; color: var(--tf3-sky-soft); font-size: 18px; line-height: 1.7; }

/* Ticket : partie principale + talon. Les encoches sont de vraies découpes
   (masque CSS, -webkit-mask pour Safari / anciens Chromium) : le fond réel du
   bandeau, dégradé compris, apparaît dans la découpe. L'ombre est portée par
   un filtre sur le conteneur, elle suit donc la forme découpée. La perforation
   est posée sur la jonction des deux parties, au centre des encoches. */
.tf3-ticket {
  --tf3-notch: 12px;
  position: relative;
  color: var(--tf3-ink);
  filter: drop-shadow(0 18px 34px rgba(2, 9, 23, .42));
}
.tf3-ticket-main,
.tf3-ticket-stub { position: relative; background: #fff; }
.tf3-ticket-main {
  padding: 26px 28px 14px;
  border-radius: 14px 14px 0 0;
  -webkit-mask:
    radial-gradient(circle var(--tf3-notch) at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--tf3-notch) at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat;
          mask:
    radial-gradient(circle var(--tf3-notch) at 0 100%, #0000 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--tf3-notch) at 100% 100%, #0000 98%, #000) right / 51% 100% no-repeat;
}
.tf3-ticket-stub {
  /* Chevauche la partie principale de 1 px : supprime la jointure visible
     (bords en fractions de pixel) ; découpes recalées de 1 px en conséquence. */
  margin-top: -1px;
  padding: 17px 28px 18px;
  border-radius: 0 0 14px 14px;
  -webkit-mask:
    radial-gradient(circle var(--tf3-notch) at 0 1px, #0000 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--tf3-notch) at 100% 1px, #0000 98%, #000) right / 51% 100% no-repeat;
          mask:
    radial-gradient(circle var(--tf3-notch) at 0 1px, #0000 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--tf3-notch) at 100% 1px, #0000 98%, #000) right / 51% 100% no-repeat;
}
.tf3-ticket-stub::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--tf3-notch) + 8px);
  right: calc(var(--tf3-notch) + 8px);
  height: 2px;
  background: repeating-linear-gradient(90deg, #c4d2e4 0 7px, transparent 7px 13px);
}
.tf3-ticket-title {
  color: var(--tf3-blue-text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.tf3-ticket dl { margin-top: 10px; }
.tf3-ticket dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--tf3-line);
}
.tf3-ticket dl > div:last-child { border-bottom: 0; }
.tf3-ticket dt { font-family: var(--tf3-display); font-size: 16px; font-weight: 700; }
.tf3-ticket dd { font-family: var(--tf3-display); font-size: 22px; font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; }
.tf3-ticket dd small { color: var(--tf3-muted); font-size: 13px; font-weight: 700; letter-spacing: 0; }
.tf3-ticket-foot { color: var(--tf3-muted); font-size: 14px; }

/* 3. Navigation par catégorie (collante) */
.tf3-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--tf3-line);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
body.admin-bar .tf3-nav { top: 32px; }
.tf3-nav ul { position: relative; display: flex; justify-content: center; gap: 6px; overflow-x: auto; padding: 10px 0; scrollbar-width: none; }
.tf3-nav ul::-webkit-scrollbar { display: none; }
.tf3 .tf3-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--tf3-ink);
  font-family: var(--tf3-display);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.tf3 .tf3-nav a:hover { background: var(--tf3-ice); color: var(--tf3-blue-text); }
.tf3 .tf3-nav a[aria-current="true"] { background: var(--tf3-night); color: #fff; }
/* Libellé court affiché, libellé complet réservé aux lecteurs d'écran */
.tf3-nav-long { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.tf3-nav-short { display: inline; }

/* 4. Diagnostic : deux étapes */
.tf3-diag { background: var(--tf3-paper); }
.tf3-steps { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 0; counter-reset: none; }
.tf3-step { position: relative; padding: 34px 36px 32px; background: #fff; border: 1px solid var(--tf3-line); }
.tf3-step:first-child { border-radius: 14px 0 0 14px; border-right: 0; }
.tf3-step--key {
  border-radius: 0 14px 14px 0;
  border-color: var(--tf3-night-3);
  background: linear-gradient(135deg, #1a3c63 0%, var(--tf3-night-3) 70%);
  color: #fff;
}
.tf3-step--key::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 50%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tf3-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12h12m-5-5 5 5-5 5' stroke='%23fff' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  transform: translateY(-50%);
  box-shadow: 0 0 0 5px var(--tf3-paper);
}
.tf3-step-n {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 16px !important;
  border-radius: 50%;
  background: var(--tf3-ice);
  color: var(--tf3-blue-text);
  font-family: var(--tf3-display);
  font-size: 14px;
  font-weight: 800;
}
.tf3-step--key .tf3-step-n { background: rgba(139, 186, 255, .18); color: var(--tf3-sky); }
.tf3 .tf3-step h3 { font-size: 20px; letter-spacing: -0.02em; }
.tf3-step--key h3 { color: var(--tf3-sky); }
.tf3-step-price {
  margin: 8px 0 10px !important;
  font-family: var(--tf3-display);
  font-size: clamp(36px, 3.4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1.05;
}
.tf3-step-price small { color: var(--tf3-sky-soft); font-size: 15px; font-weight: 700; letter-spacing: 0; }
.tf3-step-desc { color: var(--tf3-muted); font-size: 16px; }
.tf3-step--key .tf3-step-desc { color: #cfdae7; }
.tf3-step-rules { margin-top: 16px !important; padding-top: 14px !important; border-top: 1px solid rgba(255, 255, 255, .16); }
.tf3-step-rules li { position: relative; padding-left: 20px; color: #e6eef8; font-size: 16px; line-height: 1.55; }
.tf3-step-rules li + li { margin-top: 6px; }
.tf3-step-rules li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--tf3-sky); }
.tf3-step--key .tf3-link { margin-top: 10px; }

/* 5. Barème par catégorie */
.tf3-cat { background: #fff; }
.tf3-cat--alt { background: var(--tf3-paper); }
.tf3-cat-inner { display: grid; grid-template-columns: minmax(0, .32fr) minmax(0, .68fr); gap: 48px; align-items: start; }
.tf3-cat-head { position: sticky; top: 96px; }
body.admin-bar .tf3-cat-head { top: 128px; }
.tf3-cat .tf3-eyebrow { font-size: 12px; }

.tf3-rows { border: 1px solid var(--tf3-line); border-radius: 14px; background: #fff; overflow: hidden; }
.tf3-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 28px;
  align-items: center;
  padding: 22px 28px;
  transition: background-color .2s;
}
.tf3-row + .tf3-row { border-top: 1px solid var(--tf3-line); }
.tf3-row:hover { background: #f9fbfe; }
.tf3 .tf3-row h3 { font-size: 18px; letter-spacing: -0.015em; line-height: 1.3; }
.tf3 .tf3-row h3 a { color: var(--tf3-ink); background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .25s, color .2s; }
.tf3 .tf3-row h3 a:hover { color: var(--tf3-blue-text); background-size: 100% 1px; }
.tf3 .tf3-row h3 a::after { content: " →"; color: var(--tf3-blue-text); font-weight: 700; }
.tf3-row-text p { margin-top: 4px !important; color: var(--tf3-muted); font-size: 15px; line-height: 1.55; }
.tf3-row-price { text-align: right; white-space: nowrap; color: var(--tf3-ink); }
.tf3-row-price strong { font-family: var(--tf3-display); font-size: 28px; font-weight: 800; letter-spacing: -0.04em; }
.tf3-row-price small { color: var(--tf3-muted); font-size: 13px; font-weight: 700; }
.tf3-devis {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #b9cdef;
  border-radius: 999px;
  background: var(--tf3-ice);
  color: var(--tf3-blue-text);
  font-family: var(--tf3-display);
  font-size: 14px;
  font-weight: 800;
}
.tf3-cat-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 14px !important;
  padding: 14px 18px;
  border-radius: 10px;
  background: var(--tf3-ice);
  color: #2b405a;
  font-size: 15px;
}
.tf3-cat-note svg { width: 20px; height: 20px; margin-top: 2px; color: var(--tf3-blue-text); }

/* 6. Pièces et conditions (fond nuit) */
.tf3-cond { background: var(--tf3-night); color: #fff; }
.tf3-cond-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(255, 255, 255, .18); }
.tf3-cond-item { padding: 26px 28px 8px 0; }
.tf3-cond-item + .tf3-cond-item { padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, .14); }
.tf3 .tf3-cond-item h3 { color: var(--tf3-sky); font-size: 18px; letter-spacing: -0.015em; }
.tf3-cond-item p { margin-top: 8px !important; color: #cfdae7; font-size: 16px; }
.tf3-cond-tva { margin-top: 28px !important; color: #a9bbd1; font-size: 14px; }

/* 7. CTA final */
.tf3-cta { background: var(--tf3-night-3); color: #fff; }
.tf3-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 64px 0 68px; }
.tf3 .tf3-cta h2 { font-size: clamp(30px, 3.4vw, 44px); }
.tf3-cta p { max-width: 36em; margin-top: 12px !important; color: #c9d7e8; font-size: 17px; }
.tf3-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; flex: none; }
.tf3 .tf3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: var(--tf3-display);
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  transition: background-color .2s, border-color .2s, transform .2s;
}
.tf3 .tf3-btn svg { width: 18px; height: 18px; }
.tf3 .tf3-btn:hover { transform: translateY(-2px); }
.tf3 .tf3-btn--white { background: #fff; color: var(--tf3-ink); }
.tf3 .tf3-btn--white:hover { background: #dceaff; color: var(--tf3-ink); }
.tf3 .tf3-btn--ghost { color: #fff; border-color: #6d82a0; }
.tf3 .tf3-btn--ghost:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .08); }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1024px) {
  .tf3-hero-inner { grid-template-columns: 1fr; gap: 36px; padding: 52px 0 60px; }
  .tf3-ticket { max-width: 460px; }
  .tf3-cat-inner { grid-template-columns: 1fr; gap: 22px; }
  .tf3-cat-head { position: static; }
  .tf3-cond-grid { grid-template-columns: 1fr; }
  .tf3-cond-item, .tf3-cond-item + .tf3-cond-item { padding: 20px 0; border-left: 0; }
  .tf3-cond-item + .tf3-cond-item { border-top: 1px solid rgba(255, 255, 255, .14); }
  .tf3-cta-inner { display: block; }
  .tf3-cta-actions { margin-top: 26px; }
}

@media (max-width: 760px) {
  .tf3 { --tf3-gutter: 18px; }
  html { scroll-padding-top: 70px; }
  .tf3-section { padding: 56px 0; }
  .tf3-hero-inner { padding: 36px 0 44px; gap: 30px; }
  .tf3 .tf3-hero h1 { font-size: clamp(31px, 8.6vw, 40px); }
  .tf3-hero-lead { font-size: 16px; margin-top: 16px !important; }
  .tf3-ticket { --tf3-notch: 10px; }
  .tf3-ticket-main { padding: 20px 20px 10px; }
  .tf3-ticket-stub { padding: 15px 20px 16px; }
  .tf3-ticket dt { font-size: 15px; }
  .tf3-ticket dd { font-size: 20px; }

  .tf3-nav ul { justify-content: flex-start; padding: 8px 0; margin: 0 calc(-1 * var(--tf3-gutter)); padding-inline: var(--tf3-gutter); }
  .tf3 .tf3-nav a { padding: 0 14px; font-size: 14px; }

  .tf3-head { margin-bottom: 24px; }
  .tf3 .tf3-head h2, .tf3 .tf3-cat-head h2 { font-size: clamp(27px, 7.6vw, 34px); }

  /* Mobile : deux blocs distincts, l'un sous l'autre */
  .tf3-steps { grid-template-columns: 1fr; gap: 34px; }
  .tf3-step { padding: 24px 22px; }
  .tf3-step:first-child { border-radius: 14px; border-right: 1px solid var(--tf3-line); }
  .tf3-step--key { border-radius: 14px; }
  .tf3-step--key::before { left: 50%; top: -31px; transform: translateX(-50%) rotate(90deg); box-shadow: none; }
  .tf3-step-price { font-size: 38px; }

  .tf3-row { grid-template-columns: 1fr; gap: 4px; padding: 18px 18px; }
  .tf3-row-price { order: -1; display: flex; align-items: baseline; gap: 4px; justify-content: flex-start; text-align: left; }
  .tf3-row-price strong { font-size: 24px; }
  .tf3 .tf3-row h3 { font-size: 17px; }
  .tf3-row-text p { font-size: 15px; }

  .tf3-cta-inner { padding: 48px 0 56px; }
  .tf3-cta-actions .tf3-btn { flex: 1 1 100%; }
}

/* En-tête compact sur mobile : même réglage que l'accueil V3 (fichier chargé sur /tarifs/ uniquement) */
@media (max-width: 600px) {
  body.admin-bar .tf3-nav { top: 0; }
  /* En-tête compact sur mobile (même réglage que l'accueil V3, page Tarifs uniquement) */
  .site-header .inside-header { padding-left: 16px; padding-right: 16px; }
  .site-header .site-logo img.header-image { width: 132px; height: auto; }
  .mobile-menu-control-wrapper .menu-bar-items a.segaby-espace-client { min-height: 44px; padding: 0 .8em; font-size: .82rem; }
  .mobile-menu-control-wrapper .menu-toggle { min-width: 44px; padding: 0 12px; line-height: 48px; }
}

@media (max-width: 359px) {
  .site-header .site-logo img.header-image { width: 120px; }
  .mobile-menu-control-wrapper .menu-bar-items a.segaby-espace-client { width: 44px; padding: 0; justify-content: center; }
  .mobile-menu-control-wrapper .menu-bar-items a.segaby-espace-client span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  .tf3 .tf3-nav a { padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tf3 *, .tf3 *::before, .tf3 *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .tf3 .tf3-btn:hover { transform: none; }
}