/* =====================================================================
   ffxf-theme.css — surcharges FFxF pour EliteHost "Home Five"
   Chargée APRÈS /assets/css/style.css. Aucune Google Font, aucun Font Awesome.
   ===================================================================== */

/* ---------- 0. Tokens ------------------------------------------------ */
:root {
  /* tokens FFxF (site actuel) */
  --ffxf-bg: #f9fafb;
  --ffxf-fg: #111827;
  --ffxf-text: #374151;
  --ffxf-muted: #6b7280;
  --ffxf-border: #e5e7eb;
  --ffxf-soft: #f3f4f6;
  --ffxf-card: #ffffff;
  --ffxf-navy: #0d1c34;
  --ffxf-navy-2: #132743;
  --ffxf-navy-3: #1a3460;
  --ffxf-navy-fg: #f9fbff;
  --ffxf-accent: #0ea5e9;
  --ffxf-accent-strong: #0284c7;
  --ffxf-accent-light: #e0f2fe;
  --ffxf-accent-on-dark: #38bdf8;
  --ffxf-success: #22c55e;
  --ffxf-radius: 6px;
  --ffxf-shadow-sm: 0 1px 2px rgba(0,0,0,.07);
  --ffxf-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.05);
  --ffxf-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ffxf-font-heading: "Space Grotesk", "Space Grotesk repli", Inter, system-ui, sans-serif;

  /* variables du template (style.css:L48-146) redéfinies */
  --font-primary: Inter, "Inter repli", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-secondary: Inter, "Inter repli", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* --fontawesome : volontairement inchangée (les 2 glyphes rendus sont remplacés en §16) */
  --body-bg: #f9fafb;
  --body-bg-2: #f3f4f6;
  --color-white: #ffffff;
  --color-primary: #0ea5e9;
  --color-secondary: #0d1c34;
  --color-third: #0284c7;              /* était une teinte chaude du template (hover jaune) */
  --btc: #374151;
  --color-secondary-dark: #111827;
  --placeholder: #6b7280;
  --header-bg: #f9fafb;
  --card-bg: linear-gradient(180deg, #38bdf8 0%, #0ea5e9 100%);
  --color-11-light: #38bdf8;
  --choose-card: linear-gradient(180deg, #38bdf8 0%, #0ea5e9 100%);
  --testimonial-card: linear-gradient(180deg, #38bdf8 -8.67%, #0ea5e9 108%);
  --faq-bg: linear-gradient(180deg, rgba(255,255,255,0) 0%, #e0f2fe 100%);
  --faq-shadow: drop-shadow(0 4px 30px rgba(13,28,52,.06));
  --primary-gradient: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
  --secondary-gradient: linear-gradient(180deg, #f3f4f6 0%, rgba(243,244,246,0) 100%);
  --header-top-gradient: linear-gradient(90deg, rgba(255,255,255,.10) 8.51%, rgba(255,255,255,.10) 77.02%);
  --icon-bg-1: linear-gradient(147deg, #e0f2fe 14.12%, #f3f4f6 80.26%);
  --icon-bg-2: linear-gradient(147deg, #e0f2fe 14.12%, #e5e7eb 80.26%);
  --border-gradient: linear-gradient(180deg, rgba(229,231,235,0) 0%, #e5e7eb 51.04%, rgba(229,231,235,0) 100%);
  --single-sell: linear-gradient(112deg, rgba(255,255,255,.40) 0%, rgba(255,255,255,0) 101.12%);
  --single-sell-primary: linear-gradient(113deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.10) 110.84%);
  --banner-one-bg: linear-gradient(180deg, #1a3460 0%, #0d1c34 100%);
  --pricing-single-bg: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
  --cta-two-bg: linear-gradient(92deg, #132743 3.85%, #0d1c34 101.14%);
  --banner-four-gradient: linear-gradient(90deg, #0d1c34 26.56%, rgba(13,28,52,0) 83.83%);
  --banner-most-used-bg: linear-gradient(180deg, #1a3460 0%, #0d1c34 100%);
  --data-center-bg: linear-gradient(180deg, #f9fafb 0%, rgba(249,250,251,0) 100%);
  --data-center-shape-1: linear-gradient(180deg, #ffffff 0.14%, #e0f2fe 76.88%);
  --data-center-shape-2: linear-gradient(179deg, #f9fbff 0.57%, #e0f2fe 59.7%);
  --data-center-shape-small: linear-gradient(192deg, #f9fafb 8.69%, #e0f2fe 43%, #e5e7eb 43%);
  --accordion-active: linear-gradient(180deg, rgba(224,242,254,0) 0%, #e0f2fe 100%);
  --accordion-box-shadow: 0 4px 30px 0 rgba(13,28,52,.06);
  --accordion-section: linear-gradient(180deg, #f9fafb 0%, rgba(249,250,251,0) 100%);
  --footer-style-one: linear-gradient(0deg, #f3f4f6 0%, rgba(243,244,246,0) 82.55%);
  --testimonial-two-bg: linear-gradient(180deg, #0d1c34 0%, #1a3460 100%);
  --feedback-card: linear-gradient(180deg, #e0f2fe 0%, #f3f4f6 100%);
  --border-color: #e5e7eb;             /* était une teinte chaude du template */
  --light-border: #e5e7eb;
  --white-border: #ffffff;
  --box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.05);
  --plan-bg: #f3f4f6;
  --color-success: #22c55e;
  --color-danger: #ef4444;
  --color-warning: #eab308;            /* était une teinte chaude du template ; non utilisée sur la home */
  --color-info: #0ea5e9;
  --color-twitter: #0ea5e9;
  --color-discord: #5865f2;
  --size-h1: 56px; --lh-h1: 60px;
  --size-h2: 44px; --lh-h2: 52px;
  --size-h3: 32px; --lh-h3: 40px;
  --size-h4: 22px; --lh-h4: 30px;
}

/* ---------- 1. Typographie ------------------------------------------ */
/* style.css force html{font-size:10px} : toutes les tailles sont en px (pas de rem) */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-primary);
  color: var(--btc);
  background-color: var(--body-bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ffxf-font-heading);
  letter-spacing: -.02em;
  color: var(--color-secondary);
}
.rts-section__title,
.section-title-area .section-title,
.rts-whychoose__content--title {
  font-family: var(--ffxf-font-heading);
  font-weight: 700;
  font-size: clamp(30.4px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -.025em;
  text-transform: none;
  display: block;
  margin: 0;
}
.ffxf-section-head .rts-section__title,
.ffxf-section-head .section-title { margin-bottom: 0; }
.rts-section { margin-bottom: 44px; }
.eyebrow {
  margin: 0 0 12px;
  font-family: var(--ffxf-font-mono);
  font-size: 11.52px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ffxf-muted);
  line-height: 1.4;
}
.eyebrow b { font-weight: 500; color: var(--ffxf-accent-strong); margin-right: 4px; }
.section-sub,
.rts-section__description.section-sub,
.section-title-area .desc.section-sub {
  max-width: 700px;
  margin: 14px auto 0;
  font-family: var(--font-secondary);
  font-size: 16.32px;
  line-height: 1.72;
  color: var(--ffxf-text);
}
.text-start .section-sub, .ffxf-left .section-sub { margin-left: 0; margin-right: 0; }
.ffxf-dark .eyebrow { color: rgba(249,251,255,.62); }
.ffxf-dark .eyebrow b { color: var(--ffxf-accent-on-dark); }
.section-sub-dark, .ffxf-dark .section-sub { color: rgba(249,251,255,.78); }
.mono { font-family: var(--ffxf-font-mono); }
a { transition: color .15s ease; }
#plans, #usages, #infra, #faq, #contact { scroll-margin-top: 96px; }

/* ---------- 2. Couleurs chaudes codées en dur (style.css) ------------ */
.rts-pricing-plan.pricing-plan-2 .card-plan:hover,
.rts-pricing-plan.pricing-plan-2 .card-plan.active { background: var(--ffxf-card); }              /* L17555 (teinte chaude du template) */
.rts-newsletter::before { background: var(--body-bg-2); }                                          /* L21321 (teinte chaude du template) */
.rts-newsletter__box::before { background-image: none; }                                           /* L21345 newsletter__bg.svg orange */
.rts-header__right .rts-dropdown-menu .has-child-menu .sub-menu li:hover a { background: var(--body-bg-2); } /* L11279 */
.service-inner ul .service-wrapper { border-color: var(--ffxf-border); }                           /* L18231 (teinte chaude du template) */
.rts-faq__accordion .accordion .accordion-item,
.rts-faq__accordion .accordion .accordion-item .accordion-header .accordion-button::after { border-color: var(--ffxf-border); } /* L21991, L22022 (teinte chaude du template) */
.rts-dot__button .swiper-pagination-bullet { background: var(--ffxf-border); }                     /* L19011 (teinte chaude du template) */
.hero__banner { background-color: var(--ffxf-navy); }                                              /* L13112 (teinte chaude du template) */
.rts-pricing-plan__tab .tab__button { box-shadow: none; }                                          /* L17137 (teinte chaude du template) */
.secondary__bg:hover, .rts-btn-secondary:hover { background: var(--ffxf-navy-2) !important; }      /* L12950, L13079 (teinte chaude du template) */
.rts-pricing-plan .card-plan:hover .card-plan__offer .offer-given,
.rts-pricing-plan .card-plan.active .card-plan__offer .offer-given { background: var(--ffxf-accent-light); } /* L17267 (teinte chaude du template) */
@media (max-width: 1200px) {
  .service-inner ul .service-wrapper,
  .service-inner ul .service-wrapper:nth-child(n) { border-color: var(--ffxf-border) !important; } /* L18245-L18316 */
}

/* ---------- 3. Boutons ---------------------------------------------- */
.rts-btn, .primary__btn, .btn__two, .login__btn, .card-plan__cartbtn a, .tab__btn { text-transform: none; }
.rts-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 5px; font-weight: 600; font-family: var(--font-secondary); line-height: 1;
}
.rts-btn.btn__long { padding: 14px 24px; border-radius: 5px; }
.rts-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.rts-btn.primary__btn { background: var(--ffxf-accent); color: #fff; border-color: transparent; }
.rts-btn.primary__btn:hover { background: var(--ffxf-accent-strong) !important; color: #fff !important; }
.rts-btn.ffxf-btn-ghost,
.hero__banner__content4 .banner-btn .rts-btn.ffxf-btn-ghost {
  background: transparent; border: 1px solid rgba(255,255,255,.28); color: var(--ffxf-navy-fg);
}
.rts-btn.ffxf-btn-ghost:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; border-color: rgba(255,255,255,.5) !important; }
.rts-btn.ffxf-btn-light { background: #fff; color: var(--ffxf-navy); border-color: #fff; box-shadow: var(--ffxf-shadow-sm); }
.rts-btn.ffxf-btn-light:hover { background: var(--ffxf-soft) !important; color: var(--ffxf-navy) !important; border-color: var(--ffxf-soft) !important; }
.rts-btn.ffxf-btn-navy { background: var(--ffxf-navy); color: var(--ffxf-navy-fg); border-color: var(--ffxf-navy); }
.rts-btn.ffxf-btn-navy:hover { background: var(--ffxf-navy-2) !important; color: #fff !important; border-color: var(--ffxf-navy-2) !important; }
.rts-btn.ffxf-btn-outline { background: var(--ffxf-card); color: var(--ffxf-fg); border-color: var(--ffxf-border); }
.rts-btn.ffxf-btn-outline:hover { background: var(--ffxf-soft) !important; color: var(--ffxf-fg) !important; border-color: var(--ffxf-muted) !important; }
.rts-btn:active { transform: translateY(1px); }

/* ---------- 4. Header ----------------------------------------------- */
.rts-ht.rts-ht__bg { background: var(--ffxf-navy); -webkit-backdrop-filter: none; backdrop-filter: none; }
.rts-ht__wrapper {
  color: rgba(249,251,255,.82);
  font-family: var(--ffxf-font-mono);
  font-size: 13px; letter-spacing: .02em;
}
.rts-ht__wrapper a { color: rgba(249,251,255,.82); display: inline-flex; align-items: center; gap: 7px; padding: 11px 0; }
.rts-ht__wrapper a:hover { color: #fff; }
.rts-ht__email img, .rts-ht__links img { margin-right: 0; width: 16px; height: 16px; opacity: .85; }
.rts-ht__promo p { margin: 0; display: inline-flex; align-items: center; gap: 6px; padding: 9px 0; }
.rts-ht__promo p strong { background: var(--ffxf-accent-on-dark); color: var(--ffxf-navy); padding: 3px 6px; border-radius: 4px; font-weight: 600; }
.rts-ht__links { gap: 28px; }
.rts-ht__links .badge-dot { width: 7px; height: 7px; background: var(--ffxf-success); }

.rts-header { background: var(--color-white); border-bottom: 1px solid var(--ffxf-border); }
.rts-header.header-sticky { background: rgba(249,250,251,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--ffxf-shadow); }
.rts-header__logo img { height: 30px; width: auto; display: block; }
.rts-header__menu ul li.menu-item:not(:last-child) { margin-right: 0; }
.rts-header .elitehost-desktop-menu li.menu-item { padding: 0 13px; }
.rts-header .elitehost-desktop-menu li.menu-item a.main-element {
  font-family: var(--font-secondary); font-size: 15px; font-weight: 500; color: var(--ffxf-text); padding: 27px 0;
}
.rts-header .elitehost-desktop-menu li.menu-item a.main-element:hover { color: var(--ffxf-fg); }
.rts-header .elitehost-desktop-menu li.menu-item a.main-element::after { background: var(--ffxf-accent-strong); height: 1px; bottom: 22px; }
.rts-header.header-sticky .rts-header__menu ul li a.main-element::after { background: var(--ffxf-accent-strong); }
.rts-header__right { gap: 14px; }
.lang-switch {
  display: inline-flex; gap: 2px; padding: 3px;
  border: 1px solid var(--ffxf-border); border-radius: 5px; background: var(--ffxf-card);
  font-family: var(--ffxf-font-mono); font-size: 12.16px; line-height: 1.2;
}
.lang-switch a { padding: 5px 10px; border-radius: 3px; color: var(--ffxf-muted); }
.lang-switch a:hover { color: var(--ffxf-fg); }
.lang-switch a.active { background: var(--ffxf-navy); color: var(--ffxf-navy-fg); }
.rts-header__right .login__btn,
.rts-header.header-sticky .rts-header__right .login__btn {
  background: var(--ffxf-accent); border: 1px solid var(--ffxf-accent); color: #fff;
  padding: 9px 22px; border-radius: 5px; font-weight: 600; font-size: 15px;
}
.rts-header__right .login__btn:hover,
.rts-header.header-sticky .rts-header__right .login__btn:hover { background: var(--ffxf-accent-strong); border-color: var(--ffxf-accent-strong); color: #fff; }
#menu-btn.mobile__active,
.rts-header.header-sticky .rts-header__right #menu-btn.mobile__active {
  border: 1px solid var(--ffxf-border); border-radius: 5px; color: var(--ffxf-navy);
  padding: 0; height: 44px; width: 44px; background: transparent; align-items: center; justify-content: center;
}
#menu-btn svg { width: 22px; height: 22px; }
@media (max-width: 1399px) { .rts-header .elitehost-desktop-menu li.menu-item { padding: 0 10px; } }
@media (max-width: 1199px) {
  .rts-header .elitehost-desktop-menu li.menu-item { padding: 0 8px; }
  .rts-header .elitehost-desktop-menu li.menu-item a.main-element { font-size: 14px; }
  .rts-header__right .login__btn { padding: 9px 16px; }
}
@media (max-width: 991px) { #menu-btn.mobile__active { display: inline-flex !important; } }
@media (max-width: 450px) { .rts-header__right .login__btn { display: none; } }

/* ---------- 5. Hero ------------------------------------------------- */
.hero__banner.banner__background-3 {
  background-color: var(--ffxf-navy);
  background-image:
    url(/assets/images/banner/banner-bg-6.webp),
    radial-gradient(circle at 70% 22%, rgba(56,189,248,.14), transparent 20%),
    linear-gradient(115deg, #0d1c34 0%, #132743 55%, #1a3460 100%);
  background-size: cover, auto, auto;
  background-position: center top, center, center;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.hero__banner__wrapper.banner-five { padding: 180px 0 100px; }
.hero__banner__content4 { max-width: 600px; }
.hero__banner__content4 h1 {
  margin-top: 22px;
  font-family: var(--ffxf-font-heading);
  font-size: clamp(38.4px, 5vw, 57.6px);
  line-height: 1.05; letter-spacing: -.025em; font-weight: 700;
  color: var(--ffxf-navy-fg);
}
.hero__banner__content4 h1 .mark {
  font-style: normal;
  background: linear-gradient(0deg, rgba(56,189,248,.26), rgba(56,189,248,.26)) no-repeat 0 78% / 100% 30%;
  padding: 0 2px;
}
.hero__banner__content4 .hero-lead { margin: 22px 0 0; max-width: 640px; font-size: 16.96px; line-height: 1.75; color: rgba(249,251,255,.8); }
.hero__banner__content4 .banner-btn { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-points {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 14px;
  margin: 28px 0 0; padding: 0; list-style: none;
  font-family: var(--ffxf-font-mono); font-size: 12.16px; letter-spacing: .08em; text-transform: uppercase; /* .08em (brief : .12em) : « > 7 sauvegardes manuelles incluses » doit tenir dans une colonne de ~293px */
  color: rgba(249,251,255,.68);
}
.hero-points li { margin: 0; }
.hero-points li::before { content: "> "; color: var(--ffxf-accent-on-dark); }
.hero__banner__image img { max-width: 100%; height: auto; }
.hero__banner__image figure { margin: 0; }

/* badges (hero, footer, panneau terminal) */
.badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px;
  border: 1px solid rgba(255,255,255,.2); border-radius: 3px; background: transparent;
  font-family: var(--ffxf-font-mono); font-size: 11.52px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ffxf-navy-fg); line-height: 1.4; text-align: left; white-space: normal;
}
.badge-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--ffxf-accent-on-dark); animation: dot-pulse 2.4s ease-in-out infinite; flex-shrink: 0; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--ffxf-success); animation: dot-pulse 2s ease-in-out infinite; flex-shrink: 0; }
@keyframes dot-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(56,189,248,.32); opacity: 1; }
  50% { transform: scale(1.18); box-shadow: 0 0 0 8px rgba(56,189,248,0); opacity: .9; }
}

/* ---------- 6. Bandeau de confiance --------------------------------- */
.ffxf-trust { background: #fff; border-bottom: 1px solid var(--ffxf-border); padding: 22px 0; }
.trust-strip { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; } /* 5 repères depuis l'ajout de la juridiction ; 3 puis 2 puis 1 en descendant */
.trust-strip > * {
  display: flex; flex-direction: column; gap: 6px; padding: 5px 0 5px 16px;
  border-left: 2px solid var(--ffxf-accent); background: transparent; text-decoration: none;
}
.trust-strip span { font-family: var(--ffxf-font-mono); font-size: 10.88px; letter-spacing: .14em; text-transform: uppercase; color: var(--ffxf-muted); }
.trust-strip strong { font-family: var(--ffxf-font-mono); font-size: 14.4px; font-weight: 600; color: var(--ffxf-fg); }
a.trust-cell:hover { border-left-color: var(--ffxf-navy); }

/* ---------- 7. Pricing ---------------------------------------------- */
.rts-pricing-plan.pricing-plan-2 .rts-section { margin-bottom: 40px; }
.rts-pricing-plan__tab.ffxf-plan-tabs { flex-wrap: wrap; gap: 18px 40px; margin-bottom: 40px; }
.rts-pricing-plan__tab .tab__button { background: transparent; padding: 0; }
.rts-pricing-plan.pricing-plan-2 .rts-pricing-plan__tab .tab__button__item {
  border: 1px solid var(--ffxf-border); border-radius: 5px; background: var(--ffxf-card); padding: 3px; gap: 2px;
}
.rts-pricing-plan.pricing-plan-2 .rts-pricing-plan__tab .tab__button__item button,
.rts-pricing-plan .color-primary .tab__button__item button {
  border: 0 !important; border-radius: 3px; padding: 7px 16px; background: transparent;
  font-family: var(--ffxf-font-mono); font-size: 12.16px; font-weight: 500; letter-spacing: .04em; color: var(--ffxf-muted);
}
.rts-pricing-plan.pricing-plan-2 .rts-pricing-plan__tab .tab__button__item button.active,
.rts-pricing-plan .color-primary .tab__button__item button.active { background: var(--ffxf-navy); color: var(--ffxf-navy-fg); }

/* sélecteur de devise (révélé par script.js) */
.currency-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0; }
.currency-switch[hidden] { display: none !important; }
.currency-buttons { display: inline-flex; padding: 3px; border: 1px solid var(--ffxf-border); border-radius: 5px; background: var(--ffxf-card); }
.currency-buttons button {
  padding: 5px 13px; border: 0; border-radius: 3px; background: transparent; cursor: pointer;
  font-family: var(--ffxf-font-mono); font-size: 11.52px; font-weight: 500; letter-spacing: .06em; color: var(--ffxf-muted);
  transition: background .15s ease, color .15s ease;
}
.currency-buttons button:hover { color: var(--ffxf-fg); }
.currency-buttons button[aria-pressed="true"] { background: var(--ffxf-navy); color: var(--ffxf-navy-fg); }
.currency-note { margin: 0; font-family: var(--ffxf-font-mono); font-size: 11.52px; line-height: 1.5; color: var(--ffxf-muted); }

/* cartes */
.rts-pricing-plan .card-plan {
  padding: 26px 22px; text-align: left;
  border: 1px solid var(--ffxf-border); border-radius: var(--ffxf-radius);
  background: var(--ffxf-card); box-shadow: var(--ffxf-shadow-sm);
  display: flex; flex-direction: column;
}
.rts-pricing-plan.pricing-plan-2 .card-plan:hover { border-color: var(--ffxf-accent); }
.rts-pricing-plan.pricing-plan-2 .card-plan.active { border-color: var(--ffxf-accent); box-shadow: 0 0 0 1px var(--ffxf-accent), var(--ffxf-shadow); }
/* B1 : le template force color: var(--color-secondary) sur nom/desc/prix au hover et sur .active ((0,5,0), L17561-17569) -> re-fixer */
.rts-pricing-plan.pricing-plan-2 .card-plan:hover .card-plan__desc,
.rts-pricing-plan.pricing-plan-2 .card-plan.active .card-plan__desc { color: var(--ffxf-text); }
.rts-pricing-plan.pricing-plan-2 .card-plan:hover .package__name,
.rts-pricing-plan.pricing-plan-2 .card-plan.active .package__name,
.rts-pricing-plan.pricing-plan-2 .card-plan:hover .card-plan__price,
.rts-pricing-plan.pricing-plan-2 .card-plan.active .card-plan__price { color: var(--ffxf-fg); }
.rts-pricing-plan .card-plan .popular-tag {
  top: -11px; left: 22px; transform: none; padding: 3px 11px; border-radius: 3px;
  background: var(--ffxf-accent); color: #fff;
  font-family: var(--ffxf-font-mono); font-size: 9.92px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.5;
}
.rts-pricing-plan.pricing-plan-2 .card-plan .card-plan__package { display: flex; align-items: center; gap: 12px; text-align: left; margin-bottom: 10px; }
.rts-pricing-plan.pricing-plan-2 .card-plan .card-plan__package .icon { width: 42px; height: 42px; margin: 0; flex-shrink: 0; }
.rts-pricing-plan .card-plan .card-plan__package .icon img { width: 100%; height: 100%; }
.rts-pricing-plan .card-plan .package__name { font-family: var(--ffxf-font-heading); font-size: 17.6px; font-weight: 700; letter-spacing: -.01em; color: var(--ffxf-fg); margin: 0; }
/* H1 : chaîne d'ancêtres = template (L17586-17594), sinon le template gagne (16px / mb 10px / mb 30px) */
.rts-pricing-plan.pricing-plan-2 .card-plan .card-plan__desc { font-family: var(--font-secondary); font-size: 14.08px; line-height: 1.55; color: var(--ffxf-text); margin: 0 0 16px; min-height: 2.75em; }
.rts-pricing-plan.pricing-plan-2 .card-plan .card-plan__price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding-top: 16px;
  border-top: 1px solid var(--ffxf-border);
  font-family: var(--ffxf-font-heading); font-size: 28px; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--ffxf-fg);
}
.rts-pricing-plan.pricing-plan-2 .card-plan .card-plan__price strong { font-weight: 700; white-space: nowrap; }
.rts-pricing-plan.pricing-plan-2 .card-plan .card-plan__price .price-currency { font-size: 12.48px; font-weight: 500; font-style: normal; letter-spacing: 0; margin-left: 3px; color: var(--ffxf-muted); }
.rts-pricing-plan.pricing-plan-2 .card-plan .card-plan__price sub.plan-per { bottom: 0; line-height: 1; font-family: var(--ffxf-font-mono); font-size: 11.52px; font-weight: 400; color: var(--ffxf-muted); }
.plan-annual {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 18px; padding-top: 10px;
  border-top: 1px dashed var(--ffxf-border);
  font-family: var(--ffxf-font-mono); font-size: 11.2px; color: var(--ffxf-muted);
}
.plan-annual strong { color: var(--ffxf-fg); font-weight: 600; }
.saving-pill {
  padding: 3px 7px; border-radius: 3px; background: var(--ffxf-accent-light); color: #0369a1;
  font-family: var(--ffxf-font-mono); font-size: 9.28px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.rts-pricing-plan.pricing-plan-2 .card-plan .card-plan__cartbtn { margin-bottom: 8px; } /* H1 : (0,4,0) comme le template L17595 (40px) */
.rts-pricing-plan .card-plan__cartbtn a {
  position: static; left: auto; transform: none; max-width: 100%; width: 100%;
  padding: 13px 18px; border-radius: 5px; font-size: 14.88px; font-weight: 600; text-transform: none;
  background: var(--ffxf-navy); color: var(--ffxf-navy-fg); border: 1px solid var(--ffxf-navy);
}
.rts-pricing-plan .card-plan__cartbtn a:hover,
.rts-pricing-plan .card-plan:hover .card-plan__cartbtn a { background: var(--ffxf-navy-2); color: #fff; border-color: var(--ffxf-navy-2); }
.rts-pricing-plan .card-plan.active .card-plan__cartbtn a { background: var(--ffxf-accent); border-color: var(--ffxf-accent); color: #fff; }
.rts-pricing-plan .card-plan.active .card-plan__cartbtn a:hover,
.rts-pricing-plan .card-plan.active:hover .card-plan__cartbtn a { background: var(--ffxf-accent-strong); border-color: var(--ffxf-accent-strong); color: #fff; }
.plan-cta-note { margin: 0 0 18px; text-align: center; font-family: var(--ffxf-font-mono); font-size: 9.92px; letter-spacing: .06em; text-transform: uppercase; color: var(--ffxf-muted); }
/* H1 : chaîne complète = template L17601-17622 ((0,5,0) à (0,7,1)), sinon gaps 25/20px, icônes 45px, titres 400 navy */
.rts-pricing-plan.pricing-plan-2 .card-plan .card-plan__feature { margin-top: auto; }
.rts-pricing-plan.pricing-plan-2 .card-plan .card-plan__feature .card-plan__feature--list { gap: 12px; padding-top: 16px; border-top: 1px solid var(--ffxf-border); }
.rts-pricing-plan.pricing-plan-2 .card-plan .card-plan__feature .card-plan__feature--list li { gap: 12px; align-items: center; }
.rts-pricing-plan.pricing-plan-2 .card-plan .card-plan__feature .card-plan__feature--list li .icon { min-width: 34px; min-height: 34px; width: 34px; height: 34px; }
/* p:not(.title) : les specs sont des <p class="title"> (B8) et « .text p » a la même spécificité que « .text .title » */
.rts-pricing-plan.pricing-plan-2 .card-plan .card-plan__feature .card-plan__feature--list li .text p:not(.title) { margin: 0; font-size: 12.48px; color: var(--ffxf-muted); }
.rts-pricing-plan.pricing-plan-2 .card-plan .card-plan__feature .card-plan__feature--list li .text .title {
  font-family: var(--font-secondary); font-size: 14.88px; line-height: 1.3; font-weight: 600; color: var(--ffxf-fg); margin: 0;
}

/* bandeaux Inclus / Options / Systèmes & applications */
.plans-included {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  margin-top: 28px; padding: 16px 20px;
  border: 1px dashed var(--ffxf-border); border-radius: var(--ffxf-radius); background: var(--ffxf-card);
  font-family: var(--ffxf-font-mono); font-size: 12.48px; line-height: 1.7; color: var(--ffxf-text);
}
.plans-included strong { font-size: 11.2px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ffxf-fg); margin-right: 8px; }
.plans-included > span + span::before { content: "· "; color: var(--ffxf-muted); }
.plans-options { margin-top: 12px; border-style: solid; background: var(--ffxf-soft); color: var(--ffxf-muted); }
.plans-options b { font-weight: 700; color: var(--ffxf-fg); }

.os-availability {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: 18px; padding: 18px 22px;
  border: 1px solid var(--ffxf-border); border-radius: var(--ffxf-radius); background: var(--ffxf-card); box-shadow: var(--ffxf-shadow-sm);
}
.os-availability-title { margin: 0; font-family: var(--ffxf-font-mono); font-size: 11.2px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ffxf-fg); }
.os-availability-sub { flex-basis: 100%; margin: 0; font-size: 13.76px; line-height: 1.55; color: var(--ffxf-muted); }
/* Le panneau de versions s'ouvre sous son badge, tout en bas de la section des
   plans, et débordait sur la section suivante. Sans contexte d'empilement sur
   la section, le navigateur peint la suivante par-dessus : le z-index du
   panneau ne pesait rien face à elle. */
#plans { position: relative; z-index: 3; }
.os-availability { position: relative; z-index: 4; }
.os-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.os-item { position: relative; }
.os-badge {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px;
  border: 1px solid var(--ffxf-border); border-radius: 5px; background: var(--ffxf-bg);
  font-family: inherit; font-size: 15.2px; font-weight: 600; color: var(--ffxf-fg); cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.os-badge:hover, .os-item.is-open .os-badge { border-color: var(--ffxf-accent); background: var(--ffxf-accent-light); }
.os-caret { width: 7px; height: 7px; margin-left: 1px; border-right: 2px solid var(--ffxf-muted); border-bottom: 2px solid var(--ffxf-muted); transform: translateY(-2px) rotate(45deg); }
.os-versions {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 20; min-width: 230px; padding: 14px 16px;
  border: 1px solid var(--ffxf-border); border-radius: var(--ffxf-radius); background: var(--ffxf-card); box-shadow: var(--ffxf-shadow);
  text-align: left;
}
.os-versions::before {
  content: ""; position: absolute; top: -5px; left: 22px; width: 9px; height: 9px;
  border-left: 1px solid var(--ffxf-border); border-top: 1px solid var(--ffxf-border); background: var(--ffxf-card); transform: rotate(45deg);
}
/* Ouverture, fermeture et origine : snippet menu-dropdown (§24). Le survol,
   le clic et le focus posent .is-open / .is-closing depuis ffxf-ui.js. */
.os-versions-title { margin: 0 0 8px; font-family: var(--ffxf-font-mono); font-size: 9.92px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ffxf-muted); }
.os-versions ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; font-size: 14.08px; color: var(--ffxf-text); }
.os-versions li { margin: 0; }
.os-versions-note { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--ffxf-border); font-size: 12.48px; color: var(--ffxf-muted); }
.os-availability-note { margin: 0 0 0 auto; font-family: var(--ffxf-font-mono); font-size: 11.52px; color: var(--ffxf-muted); }
.os-icon { position: relative; width: 18px; height: 18px; flex-shrink: 0; display: inline-block; }
.os-icon-linux::before, .os-icon-linux::after, .os-icon-windows::before, .os-icon-windows::after { content: ""; position: absolute; }
.os-icon-linux::before { inset: 1px 3px 0; border-radius: 8px 8px 6px 6px; background: linear-gradient(180deg, #1f2937 0%, #0f172a 100%); }
.os-icon-linux::after { left: 5px; right: 5px; bottom: 0; height: 5px; border-radius: 4px 4px 6px 6px; background: #f59e0b; }
.os-icon-windows::before {
  inset: 1px;
  background:
    linear-gradient(#1d4ed8, #1d4ed8) 0 0 / 7px 7px no-repeat,
    linear-gradient(#1d4ed8, #1d4ed8) 9px 0 / 7px 7px no-repeat,
    linear-gradient(#1d4ed8, #1d4ed8) 0 9px / 7px 7px no-repeat,
    linear-gradient(#1d4ed8, #1d4ed8) 9px 9px / 7px 7px no-repeat;
}
/* NB : le pied du manchot (#f59e0b) est le seul ambre du site actuel ; icône décorative de 18 px, conservée volontairement. */

/* ---------- 8. Usages (hosting type) -------------------------------- */
.rts-hosting-type { position: relative; }
.rts-hosting-type .section-title-area .desc { margin-top: 14px; }
.rts-hosting-type__single.area-2.usecase-card {
  display: flex; flex-direction: column; height: 100%;
  padding: 28px 26px; border: 1px solid var(--ffxf-border); border-radius: var(--ffxf-radius);
  background: var(--ffxf-card); box-shadow: var(--ffxf-shadow-sm); overflow: visible;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rts-hosting-type__single.area-2.usecase-card:hover { border: 1px solid var(--ffxf-accent); box-shadow: var(--ffxf-shadow); }
.rts-hosting-type__single .hosting-icon { margin-bottom: 20px; }
.rts-hosting-type__single .hosting-icon img { width: 48px; height: 48px; }
.rts-hosting-type__single .eyebrow { margin-bottom: 8px; }
.rts-hosting-type__single.area-2 .title,
.rts-hosting-type__single.area-2:hover .title {
  display: block; margin: 0 0 10px;
  font-family: var(--ffxf-font-heading); font-size: 18.4px; line-height: 1.3; font-weight: 700; letter-spacing: -.02em;
  text-transform: none; color: var(--ffxf-fg);
}
.rts-hosting-type__single p.excerpt, .rts-hosting-type__single.area-2:hover p.excerpt { margin: 0 0 16px; font-size: 14.88px; line-height: 1.65; color: var(--ffxf-text); }
.usecase-plan {
  display: block; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--ffxf-border);
  font-family: var(--ffxf-font-mono); font-size: 11.52px; letter-spacing: .08em; text-transform: uppercase; color: var(--ffxf-muted);
}

/* ---------- 9. En pratique : panneau + terminal --------------------- */
.ffxf-terminal { background: var(--body-bg); }
.tick-frame { position: relative; }
.tick-frame::before, .tick-frame::after { content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none; z-index: 2; }
.tick-frame::before { top: 0; left: 0; border-top: 1px solid var(--ffxf-accent-on-dark); border-left: 1px solid var(--ffxf-accent-on-dark); }
.tick-frame::after { bottom: 0; right: 0; border-bottom: 1px solid var(--ffxf-accent-on-dark); border-right: 1px solid var(--ffxf-accent-on-dark); }

.hero-panel {
  max-width: 440px; padding: 18px;
  border: 1px solid rgba(255,255,255,.13); border-radius: var(--ffxf-radius);
  background: var(--ffxf-navy); color: var(--ffxf-navy-fg); box-shadow: var(--ffxf-shadow);
}
.panel-head { display: flex; align-items: center; gap: 9px; font-family: var(--ffxf-font-mono); font-size: 11.52px; letter-spacing: .14em; text-transform: uppercase; color: rgba(249,251,255,.58); }
.terminal-lines {
  display: grid; gap: 7px; margin-top: 16px; padding: 16px; border-radius: 4px;
  background: rgba(4,10,22,.72); color: rgba(249,251,255,.86);
  font-family: var(--ffxf-font-mono); font-size: 12.48px; line-height: 1.65; white-space: pre-wrap;
}
.terminal-lines div { min-height: 1.29em; }
.terminal-lines span { color: var(--ffxf-accent-on-dark); }
.term-cursor { display: inline-block; width: 7px; height: .95em; margin-left: 2px; vertical-align: -.12em; background: var(--ffxf-accent-on-dark); animation: cursor-blink 1s steps(1) infinite; }
@keyframes cursor-blink { 50% { opacity: 0; } }
.hero-stats-grid { display: flex; flex-wrap: wrap; gap: 1px; margin-top: 16px; border: 1px solid rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; background: rgba(255,255,255,.08); }
.hero-stats-grid > div { flex: 1 1 calc(50% - 1px); min-width: 130px; padding: 14px; background: rgba(4,10,22,.5); }
.hero-stats-grid strong { display: block; font-family: var(--ffxf-font-heading); font-size: 16.96px; font-weight: 700; color: var(--ffxf-navy-fg); }
.hero-stats-grid span { display: block; margin-top: 5px; font-family: var(--ffxf-font-mono); font-size: 11.2px; letter-spacing: .12em; text-transform: uppercase; color: rgba(249,251,255,.56); }

.terminal-card { border-radius: var(--ffxf-radius); overflow: hidden; background: var(--ffxf-navy); color: var(--ffxf-navy-fg); box-shadow: var(--ffxf-shadow); }
.terminal-topbar { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,.08); font-family: var(--ffxf-font-mono); font-size: 11.2px; letter-spacing: .1em; color: rgba(249,251,255,.56); }
.terminal-topbar span { width: 10px; height: 10px; border-radius: 999px; background: rgba(255,255,255,.2); }
.terminal-topbar strong { margin-left: 8px; font-weight: 500; }
.terminal-card pre { margin: 0; overflow-x: auto; white-space: pre; -webkit-overflow-scrolling: touch; padding: 20px 22px; font-family: var(--ffxf-font-mono); font-size: 13.12px; line-height: 1.75; color: rgba(249,251,255,.86); background: transparent; }
.terminal-card pre::-webkit-scrollbar { height: 6px; }

/* ---------- 10. Infra (section sombre) ------------------------------ */
.ffxf-dark, .rts-hosting-feature-area.ffxf-dark { position: relative; overflow: hidden; background: var(--ffxf-navy); color: var(--ffxf-navy-fg); }
.ffxf-dark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ffxf-dark .section-inner { position: relative; z-index: 1; }
.ffxf-dark .rts-whychoose__content.area-3 { margin-left: 0; margin-right: 30px; }
.ffxf-dark .rts-whychoose__content--title, .ffxf-dark h2 { color: var(--ffxf-navy-fg); margin-bottom: 0; }
.topology-card { padding: 22px; border: 1px solid rgba(255,255,255,.13); border-radius: var(--ffxf-radius); background: rgba(255,255,255,.03); box-shadow: var(--ffxf-shadow); overflow: hidden; }
.topology-svg { width: 100%; height: auto; display: block; }
.topology-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; font-family: var(--ffxf-font-mono); font-size: 10.88px; letter-spacing: .13em; text-transform: uppercase; color: rgba(249,251,255,.55); }
.topology-meta i { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--ffxf-success); margin-right: 6px; }
.topology-specs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; margin: 26px 0 0; }
.topology-specs dt { font-family: var(--ffxf-font-mono); font-size: 11.2px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: rgba(249,251,255,.5); }
.topology-specs dd { margin: 6px 0 0; font-size: 15.36px; color: rgba(249,251,255,.9); line-height: 1.5; }
@keyframes topo-flow { from { stroke-dashoffset: 10; } to { stroke-dashoffset: 0; } }
@keyframes topo-qix-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
@keyframes topo-led-on { 0%, 100% { opacity: .9; } 50% { opacity: .12; } }
@keyframes topo-led-off { 0%, 100% { opacity: .2; } 50% { opacity: .88; } }
.topo-flow { animation: topo-flow .75s linear infinite; }
.topo-qix { animation: topo-qix-pulse 3s ease-in-out infinite; }
.topo-vms rect:nth-child(odd) { animation: topo-led-on 2.1s ease-in-out infinite; }
.topo-vms rect:nth-child(even) { animation: topo-led-off 2.1s ease-in-out 1.05s infinite; }
.topo-vms rect:nth-child(3) { animation-delay: .4s; }
.topo-vms rect:nth-child(5) { animation-delay: .8s; }
.topo-vms rect:nth-child(7) { animation-delay: 1.5s; }
.topo-vms rect:nth-child(9) { animation-delay: .6s; }
.topo-vms rect:nth-child(11) { animation-delay: 1.2s; }

/* ---------- 11. Pourquoi FFxF (grille service, 8 items) ------------- */
.rts-service.ffxf-why .rts-section { margin-bottom: 0; }
.rts-service.ffxf-why .rts-section__title { max-width: none; margin-left: 0; margin-right: 0; }
.rts-service.ffxf-why .service-inner { margin-top: 60px; }
.service-inner ul .service-wrapper { padding: 28px 32px; border-color: var(--ffxf-border); }
.service-inner ul .service-wrapper .icon-area img { width: 28px; height: 28px; }
.service-inner ul .service-wrapper .icon-area h6,
.service-inner ul .service-wrapper .icon-area h3 { font-family: var(--ffxf-font-heading); font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--ffxf-fg); margin: 0; } /* B8 : titres en <h3> (sous le h2 de section) ; margin:0 annule le mb 20px des h3 du template */
.service-inner ul .service-wrapper p.desc { font-size: 14.4px; line-height: 1.65; color: var(--ffxf-text); }

/* ---------- 12. FAQ ------------------------------------------------- */
.rts-hosting-faq .rts-section { margin-bottom: 36px; }
.rts-faq__accordion .accordion { max-width: 820px; }
.rts-faq__accordion .accordion .accordion-item {
  padding: 16px 20px; margin: 0 0 10px;
  border: 1px solid var(--ffxf-border); border-radius: 10px; background: var(--ffxf-card);
  transition: border-color .15s ease;
}
.rts-faq__accordion .accordion .accordion-item:not(:last-child) { margin-bottom: 10px; }
.rts-faq__accordion .accordion .accordion-item.active { padding-top: 16px; border: 1px solid rgba(14,165,233,.4); } /* repli : main.js pose .active sans jamais le retirer quand on referme le même item */
.rts-faq__accordion .accordion .accordion-item:has(.accordion-collapse.show) { border-color: rgba(14,165,233,.4); } /* B7 : état ouvert réel (Bootstrap .show) */
.rts-faq__accordion .accordion .accordion-item.active:not(:has(.accordion-collapse.show)) { border-color: var(--ffxf-border); } /* B7 : item refermé mais encore .active -> bordure neutre */
.rts-faq__accordion .accordion .accordion-item .accordion-header { margin: 0; font-size: inherit; }
.rts-faq__accordion .accordion .accordion-item .accordion-header .accordion-button,
.rts-faq__accordion .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
  padding: 0; border: 0; background: transparent; box-shadow: none;
  font-family: var(--font-secondary); font-size: 15.68px; font-weight: 600; line-height: 1.45; color: var(--ffxf-fg); text-align: left;
}
.rts-faq__accordion .accordion .accordion-item .accordion-header .accordion-button:focus { box-shadow: none; outline: none; }
.rts-faq__accordion .accordion .accordion-item .accordion-header .accordion-button:focus-visible { outline: 2px solid var(--ffxf-accent); outline-offset: 6px; border-radius: 4px; }
.rts-faq__accordion .accordion .accordion-item .accordion-header .accordion-button::after,
.rts-faq__accordion .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed)::after {
  content: "+"; font-family: var(--ffxf-font-mono); font-size: 18.4px; line-height: 1;
  width: 26px; height: 26px; flex-shrink: 0; margin-left: auto;
  border: 1px solid var(--ffxf-border); border-radius: 50%; background: none; background-image: none;
  color: var(--ffxf-accent); display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease, border-color .2s ease; transform: none;
}
.rts-faq__accordion .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed)::after { transform: rotate(45deg); border-color: rgba(14,165,233,.4); }
.rts-faq__accordion .accordion .accordion-item .accordion-body { padding: 12px 0 0; max-width: none; font-size: 15.2px; line-height: 1.7; color: var(--ffxf-text); }
.rts-faq__accordion .accordion .accordion-item .accordion-body p { margin: 0; }
.rts-faq__accordion .accordion .accordion-item .accordion-body a { color: var(--ffxf-accent-strong); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 13. Blog (3 derniers articles) -------------------------- */
.rts-blog.ffxf-blog .rts-section { margin-bottom: 40px; }
.rts-blog__single {
  position: relative; /* ancre le lien étendu du titre (toute la carte est cliquable) */
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--ffxf-border); border-radius: 12px; background: var(--ffxf-card); box-shadow: var(--ffxf-shadow-sm);
  transition: transform .2s ease, border-color .2s ease;
}
.rts-blog__single:hover { transform: translateY(-2px); border-color: rgba(14,165,233,.42); }
.rts-blog__single > a { display: block; background: var(--ffxf-navy); border-bottom: 1px solid var(--ffxf-border); overflow: hidden; }
.rts-blog__single .blog__thumb { width: 100%; height: auto; aspect-ratio: 2.35 / 1; object-fit: cover; transition: transform .3s ease; }
.rts-blog__single:hover .blog__thumb { transform: scale(1.04); }
.rts-blog__single--meta { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.rts-blog__single--meta .cat__date { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rts-blog__single--meta .cat__date .cat {
  display: inline-block; padding: 3px 9px; border-radius: 3px; background: var(--ffxf-accent-light); color: var(--ffxf-accent-strong); /* ≈ 3,6:1, hérité de .post-tag du site actuel -> Q6 (piste : #0369a1 ≈ 5,2:1) */
  font-family: var(--ffxf-font-mono); font-size: 10.24px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
}
.rts-blog__single--meta .cat__date .cat:hover { color: var(--ffxf-navy); }
.rts-blog__single--meta .cat__date .date { margin-left: 0; font-family: var(--ffxf-font-mono); font-size: 11.52px; font-weight: 400; color: var(--ffxf-muted); }
.rts-blog__single--meta .cat__date .date::after { display: none; }
.rts-blog__single--meta .title { display: block; margin: 12px 0 0; font-family: var(--ffxf-font-heading); font-size: 16px; line-height: 1.42; font-weight: 700; letter-spacing: -.01em; color: var(--ffxf-fg); } /* B8 : <h3 class="title"> ; margin-bottom 0 annule le mb 20px des h3 */
.rts-blog__single--meta .title a { color: inherit; text-decoration: none; }
/* lien étendu : la carte entière ouvre l'article, comme sur le listing du blog */
.rts-blog__single--meta .title a::after { content: ""; position: absolute; inset: 0; }
/* le lien de catégorie doit rester au-dessus de la nappe, sinon il devient inatteignable */
.rts-blog__single--meta .cat__date .cat { position: relative; z-index: 1; }
.rts-blog__single--meta .title:hover, .rts-blog__single--meta .title a:hover { color: var(--ffxf-accent-strong); }
.rts-blog__single--meta .excerpt { margin: 10px 0 0; font-size: 13.6px; line-height: 1.62; color: var(--ffxf-text); }
.post-card-foot { display: flex; justify-content: space-between; gap: 12px; margin: auto 0 0; padding-top: 14px; font-family: var(--ffxf-font-mono); font-size: 10.88px; color: var(--ffxf-muted); }
.post-link { color: var(--ffxf-accent-strong); font-weight: 500; font-size: 11.52px; }
.ffxf-blog .ffxf-more { text-align: center; }

/* ---------- 14. CTA (#contact) + bande communauté ------------------- */
.ffxf-cta { background: var(--body-bg); }
.ffxf-cta-card {
  position: relative; overflow: hidden; padding: 44px 48px; border-radius: 10px;
  background: var(--ffxf-navy); color: var(--ffxf-navy-fg); box-shadow: var(--ffxf-shadow);
}
.ffxf-cta-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.1) 1px, transparent 1px); background-size: 20px 20px; }
.ffxf-cta-card > .row { position: relative; z-index: 1; }
.ffxf-cta-card .eyebrow { color: rgba(249,251,255,.62); }
.ffxf-cta-card .eyebrow b { color: var(--ffxf-accent-on-dark); }
.ffxf-cta-card h2 { margin: 0 0 12px; font-family: var(--ffxf-font-heading); font-size: clamp(25.6px, 3.5vw, 38.4px); line-height: 1.1; letter-spacing: -.025em; color: var(--ffxf-navy-fg); }
.ffxf-cta-card p { margin: 0; max-width: 640px; font-size: 16px; line-height: 1.7; color: rgba(249,251,255,.8); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }

.community-band {
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  padding: 32px 0; border-top: 1px solid var(--ffxf-border); border-bottom: 1px solid var(--ffxf-border);
}
.community-label { margin: 0 0 6px; font-size: 11.68px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ffxf-muted); }
.community-copy { margin: 0; max-width: 500px; font-size: 14.72px; line-height: 1.6; color: var(--ffxf-text); }
.community-links { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; flex-shrink: 0; max-width: 100%; } /* max-width : sans elle flex-shrink:0 empêche le retour à la ligne des 4 boutons à 390px */
.community-link {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px;
  border: 1px solid var(--ffxf-border); border-radius: 8px; background: var(--ffxf-bg);
  font-size: 14.08px; font-weight: 500; color: var(--ffxf-fg); text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.community-link:hover { border-color: var(--ffxf-accent); color: var(--ffxf-accent); } /* ≈ 2,7:1 sur #f9fafb, hérité du site actuel -> Q6 (piste : var(--ffxf-accent-strong)) */
.community-link svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ---------- 15. Footer ---------------------------------------------- */
.rts-footer.ffxf-footer { position: relative; padding-top: 64px; padding-bottom: 130px; background: var(--ffxf-soft) !important; border-top: 0; }
.rts-footer__widget a.footer__logo { margin-bottom: 20px; }
.rts-footer__widget a.footer__logo img { height: 28px; width: auto; }
.rts-footer__widget .brand-desc { font-size: 14.4px; line-height: 1.65; color: var(--ffxf-text); }
.footer-badge {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 6px 12px;
  border: 1px solid var(--ffxf-border); border-radius: 3px; background: var(--ffxf-card);
  font-family: var(--ffxf-font-mono); font-size: 11.52px; letter-spacing: .16em; text-transform: uppercase; color: var(--ffxf-fg);
}
.footer-badge .badge-dot { background: var(--ffxf-success); }
.footer-serververify { display: block; margin-top: 18px; }
.footer-serververify img { max-width: 168px; height: auto; border-radius: 10px; opacity: .92; }
/* Badge d'annuaire : rond, donc sans arrondi de cadre, et nettement plus
   petit que celui de ServerVerify — c'est une mention, pas une vignette. */
.footer-whtop { display: block; margin-top: 12px; }
.footer-whtop img { max-width: 68px; height: auto; opacity: .92; }
.footer-whtop:hover img { opacity: 1; }
.rts-footer__widget .widget-title { display: block; font-family: var(--font-secondary); font-size: 15.2px; line-height: 1.3; font-weight: 700; color: var(--ffxf-fg); text-transform: none; margin: 0 0 16px; } /* <h3 class="widget-title"> (site actuel, heading-order h2 > h3) : la règle template h5.widget-title ne s'applique plus */
.rts-footer__widget.extra-padding { margin-left: 0; }
.rts-footer__widget.extra-padding:not(:last-child) { margin-bottom: 28px; }
.rts-footer__widget .rts-footer__widget--menu ul li:not(:last-child) { margin-bottom: 10px; }
.rts-footer__widget .rts-footer__widget--menu ul li a { text-transform: none; font-size: 14.4px; color: var(--ffxf-text); }
.rts-footer__widget .rts-footer__widget--menu ul li a:hover { color: var(--ffxf-accent-strong); }
.footer-social-link { display: inline-flex !important; align-items: center; gap: 8px; }
.footer-social-link svg { width: 14px; height: 14px; flex-shrink: 0; }
.footer-mono { display: inline-block; font-family: var(--ffxf-font-mono); font-size: 14.08px; color: var(--ffxf-fg); text-decoration: none; }
.footer-mono:hover { color: var(--ffxf-accent-strong); }
.footer-copy { margin: 10px 0 0; font-size: 14.4px; line-height: 1.6; color: var(--ffxf-text); }
.footer-status-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ffxf-text); }
.footer-status-link:hover { color: var(--ffxf-accent-strong); }
.footer-status-link .badge-dot { width: 7px; height: 7px; background: var(--ffxf-accent); }
.rts__footer__copyright.is__common { background: var(--ffxf-soft); border-top: 1px solid var(--ffxf-border); padding: 16px 0; }
.footer__copy__wrapper { font-family: var(--ffxf-font-mono); font-size: 12.16px; color: var(--ffxf-muted); }
.footer__copy__wrapper p { margin: 0; }
.footer__copy__wrapper .footer-mono { font-size: 12.16px; color: var(--ffxf-muted); }

/* Pied de page empilé (< 992px) : le template garde ses largeurs fixes w-280 /
   w-307, si bien que les quatre blocs ne partageaient ni bord droit ni retour
   à la ligne. On les libère, et on aligne le rythme vertical : l'écart entre
   deux widgets d'une même colonne valait 28px contre 50px entre colonnes. */
@media (max-width: 991px) {
  .ffxf-footer .footer__widget.w-280,
  .ffxf-footer .footer__widget.w-307 { max-width: none !important; }
  .ffxf-footer .rts-footer__widget--column { margin-bottom: 40px; }
  .ffxf-footer .rts-footer__widget--column:last-child { margin-bottom: 0; }
  .ffxf-footer .rts-footer__widget.extra-padding:not(:last-child) { margin-bottom: 40px; }
}
.text-accent { color: var(--ffxf-accent); }

/* ---------- 16. Side-bar mobile, overlay, back-to-top ---------------- */
.side-bar { width: min(360px, calc(100vw - 60px)); padding: 28px 24px; } /* M4 : le bouton de fermeture est absolu HORS du panneau (margin-left:-53px, style.css L12191) ; 360px fixes le poussaient hors écran < 413px et écrasaient le @media 575px (300px) du template */
.side-bar .close-icon-menu i { display: flex; align-items: center; justify-content: center; background: var(--ffxf-navy); }
.side-bar .close-icon-menu svg { width: 22px; height: 22px; color: #fff; }
.ffxf-sidebar-head { padding: 0 20px; }
.ffxf-sidebar-head img { height: 28px; width: auto; }
.mobile-menu-main nav ul li a.main { font-family: var(--font-secondary); font-weight: 600; font-size: 16px; color: var(--ffxf-fg); border-bottom: 1px solid var(--ffxf-border); }
.mobile-menu-main nav ul li a.main:hover { color: var(--ffxf-accent-strong); }
.ffxf-sidebar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.social-area-one { list-style: none; }
.social-area-one li a { display: inline-flex; color: var(--ffxf-navy); }
.social-area-one li a:hover { color: var(--ffxf-accent-strong); }
.social-area-one svg { width: 18px; height: 18px; }
#anywhere-home, #anywhere-home.bgshow { background: #0d1c34; cursor: pointer; }

/* back-to-top : glyphe FA \f062 remplacé par un SVG (flèche haut, trait accent) */
.progress-wrap::after, .progress-wrap:hover::after {
  content: "";
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230ea5e9' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  border: 2px solid var(--ffxf-accent);
}
.progress-wrap::before { content: none; }
.progress-wrap svg { background: var(--ffxf-card); }

/* ---------- 16 bis. Ruban de logos défilant -------------------------- */
/* Pleine largeur, alors que tout le reste du site vit dans une gouttière :
   c'est la rupture qui fait l'effet. La section n'a donc pas de .container. */
.ffxf-marquee {
  padding: 34px 0 38px;
  background: var(--ffxf-soft);
  border-top: 1px solid var(--ffxf-border);
  border-bottom: 1px solid var(--ffxf-border);
  overflow: hidden;                 /* la piste déborde volontairement */
}
.ffxf-marquee__label {
  margin: 0 0 24px;
  text-align: center;
  font-family: var(--ffxf-font-mono);
  font-size: 11.52px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ffxf-muted);
}
/* Les logos s'effacent progressivement sur les deux bords : sans ce masque,
   ils apparaîtraient et disparaîtraient net au ras de l'écran. */
.logo-marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.logo-marquee__track {
  display: flex;
  width: max-content;
  animation: ffxf-defile 70s linear infinite;
}
/* survol : on suspend, pour laisser lire un nom au passage */
.logo-marquee:hover .logo-marquee__track { animation-play-state: paused; }
.logo-marquee__list {
  display: flex;
  align-items: center;
  gap: 46px;
  margin: 0;
  padding: 0 23px;                  /* 23 + 23 = 46 : la jointure des deux
                                       pistes garde l'écart des autres items,
                                       la boucle ne se voit pas */
  list-style: none;
}
.logo-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  /* teinte unique et opacité réduite : le ruban reste un décor, il ne
     concurrence pas le contenu */
  color: var(--ffxf-navy);
  opacity: .34;
  transition: opacity .25s ease;
}
.logo-marquee__item:hover { opacity: .9; }
.logo-marquee__svg { width: 26px; height: 26px; flex: none; }
.logo-marquee__item span {
  font-family: var(--ffxf-font-mono);
  font-size: 12.8px;
  letter-spacing: .04em;
}
/* translateX(-50%) = exactement une piste : les deux sont identiques */
@keyframes ffxf-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 16 ter. Sections pleine largeur -------------------------- */
/* Le site vit dans une gouttière (.container plafonné à 1335px). Poser
   .ffxf-bleed sur une section lui fait toucher les bords : la rupture de
   rythme est ce qui accroche l'œil. À réserver aux sections dont le contenu
   gagne à s'étendre — un visuel, une frise — sinon le texte devient
   illisible sur grand écran, d'où la mesure conservée ci-dessous. */
.ffxf-bleed > .container {
  width: 100%;
  max-width: none;
  padding-left: clamp(20px, 4vw, 72px);
  padding-right: clamp(20px, 4vw, 72px);
}
/* la section s'étend, pas les lignes de texte : au-delà d'environ 75 signes
   l'œil perd le début de la ligne suivante */
.ffxf-bleed .rts-whychoose__content--title,
.ffxf-bleed .rts-section__title { max-width: 20ch; }
.ffxf-bleed .section-sub,
.ffxf-bleed .rts-section__description { max-width: 62ch; }

/* ---------- 17. Reveal, reduced-motion, responsive ------------------ */
[data-reveal].reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s cubic-bezier(.2,.7,.3,1), transform .65s cubic-bezier(.2,.7,.3,1); }
[data-reveal].reveal-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal].reveal { opacity: 1; transform: none; transition: none; }
  .badge-dot, .status-dot, .term-cursor, .topo-flow, .topo-qix, .topo-vms rect { animation: none !important; }
  html { scroll-behavior: auto; }
  .logo-marquee__track { animation: none; }
  .logo-marquee { overflow-x: auto; }   /* défilement à la main plutôt qu'un ruban tronqué */
}
@media (max-width: 1199px) {
  .hero__banner__content4 { max-width: 520px; }
  .hero-points { grid-template-columns: 1fr; gap: 8px; } /* colonne 251px < item mono le plus long (~280px) */
}
@media (max-width: 991px) {
  .hero__banner__wrapper.banner-five { padding: 150px 0 70px; }
  .hero__banner__wrapper .start-5 { order: 0; margin: 36px 0 0; } /* D5 : texte d'abord sur mobile (site actuel) ; le template met order:-1 (style.css L13147) */
  .hero__banner__image img { max-width: 360px; }
  .trust-strip { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .ffxf-dark .rts-whychoose__content.area-3 { margin: 0 0 40px; }
  .cta-actions { justify-content: flex-start; margin-top: 8px; }
  .hero-panel { max-width: 100%; margin-top: 30px; }
  .ffxf-why .hero-panel { margin-top: 0; }
  .rts-footer.ffxf-footer { padding-bottom: 150px; }
}
@media (max-width: 767px) {
  .rts-ht__wrapper { justify-content: center; }
  .service-inner ul .service-wrapper { padding: 22px 0; }
  .terminal-card pre { padding: 18px 16px; font-size: 12.48px; }
  .os-availability-note { margin-left: 0; flex-basis: 100%; }
  .trust-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .rts-footer.ffxf-footer { padding-bottom: 170px; }
  .footer__copy__wrapper { text-align: center; }
}
@media (max-width: 680px) {
  .os-item:last-child .os-versions { left: auto; right: 0; }
  .os-item:last-child .os-versions::before { left: auto; right: 22px; }
  .topology-specs { grid-template-columns: 1fr; }
  .ffxf-cta-card { padding: 30px 22px; }
  .rts-btn.btn__long { width: 100%; max-width: 100%; }
  .plan-annual { white-space: normal; }
}
@media (max-width: 576px) {
  .hero__banner__wrapper.banner-five { padding: 140px 0 56px; }
  .hero__banner__content4 h1 { font-size: 36px; }
  .hero-points { grid-template-columns: 1fr; }
  .trust-strip { grid-template-columns: 1fr; }
  .rts-pricing-plan__tab.ffxf-plan-tabs { gap: 14px 24px; }
  .topology-svg { min-width: 0; }
  .topology-svg text { font-size: 11px; }
  .topology-svg text[font-size="12"] { font-size: 12px; }
  .topology-meta { flex-direction: column; align-items: flex-start; gap: 6px; letter-spacing: .08em; }
  .topology-meta span { white-space: nowrap; }
}

/* ---- Retouches post-QA (round 4) ---- */
.currency-switch { justify-content: center; }
@media (max-width: 576px) {
  .terminal-card pre { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; }
  .currency-switch { width: 100%; }
  .currency-note { flex-basis: 100%; text-align: center; }
}
@media (min-width: 577px) and (max-width: 768px) {
  .service-inner ul .service-wrapper { flex: 0 0 50%; max-width: 50%; }
}

/* ---------- 18. Pages intérieures : en-tête de page (breadcrumb) ------ */
.rts-breadcrumb-area.ffxf-breadcrumb {
  height: auto;
  padding: 170px 0 70px;
  background: var(--ffxf-soft) !important;
  position: relative;
  overflow: hidden;
}
.rts-breadcrumb-area.ffxf-breadcrumb .breadcrumb-content .eyebrow { margin-bottom: 6px; }
.rts-breadcrumb-area .breadcrumb-content .heading-title {
  font-family: var(--ffxf-font-heading);
  font-size: clamp(35.2px, 4.5vw, 54.4px);
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--ffxf-fg);
  margin: 10px 0 16px;
}
.rts-breadcrumb-area .breadcrumb-content .desc {
  color: var(--ffxf-text);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
  max-width: 62ch;
}
.rts-breadcrumb-area .breadcrumb-content .legal-updated { margin-top: 14px; }
.rts-breadcrumb-area .cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
  margin-top: 22px;
}
.rts-breadcrumb-area .breadcrumb-image-area { text-align: right; }
.rts-breadcrumb-area .breadcrumb-image-area img { max-width: 100%; height: auto; }
.rts-breadcrumb-area .breadcrumb-shape-area {
  position: absolute;
  right: 0;
  left: auto;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
}
.rts-breadcrumb-area .breadcrumb-shape-area {
  width: 557px;
  max-width: 45%;
  height: 202px;
  overflow: hidden;
}
.rts-breadcrumb-area .breadcrumb-shape-area img { width: 557px; height: 202px; max-width: none; opacity: .5; }
.rts-breadcrumb-area .container { position: relative; z-index: 1; }
@media (max-width: 991px) {
  .rts-breadcrumb-area.ffxf-breadcrumb { padding: 140px 0 50px; }
  .rts-breadcrumb-area .breadcrumb-image-area { margin-top: 30px; text-align: center; }
  .rts-breadcrumb-area .breadcrumb-shape-area { display: none; }
}
@media (max-width: 576px) {
  .rts-breadcrumb-area.ffxf-breadcrumb { padding: 120px 0 44px; }
  .rts-breadcrumb-area .cta-actions .rts-btn { width: 100%; justify-content: center; }
}

/* ---------- 19. Pages légales (corps repris de styles.css) ----------- */
.legal-main { padding: 64px 0 90px; background: var(--ffxf-bg); }
.legal-main h1 {
  margin-top: 10px;
  font-family: var(--ffxf-font-heading);
  font-size: clamp(32px, 5vw, 41.6px);
  color: var(--ffxf-fg);
}
.legal-intro {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ffxf-text);
}
.legal-section {
  margin-top: 48px;
  padding-top: 34px;
  border-top: 1px solid var(--ffxf-border);
}
.legal-section h2 {
  font-family: var(--ffxf-font-heading);
  font-size: 22.4px;
  line-height: 1.25;
  color: var(--ffxf-fg);
  margin: 0;
}
.legal-section p,
.legal-section li {
  margin-top: 12px;
  font-size: 15.36px;
  line-height: 1.75;
  color: var(--ffxf-text);
  max-width: 78ch;
}
.legal-section ul {
  margin-top: 12px;
  padding-left: 20px;
  list-style: disc;
}
.legal-section ul li { margin-top: 6px; }
.legal-section h3 {
  margin-top: 30px;
  font-family: var(--font-primary);
  font-size: 16.32px;
  font-weight: 650;
  line-height: 1.45;
  color: var(--ffxf-fg);
}
.legal-section h3 .legal-num {
  font-family: var(--ffxf-font-mono);
  font-size: 13.76px;
  font-weight: 500;
  color: var(--ffxf-accent-strong);
  margin-right: 8px;
}
.legal-section a { color: var(--ffxf-accent-strong); }
.legal-updated {
  margin-top: 14px;
  font-family: var(--ffxf-font-mono);
  font-size: 12.8px;
  color: var(--ffxf-muted);
}
.legal-toc {
  margin-top: 28px;
  padding: 18px 20px;
  border: 1px solid var(--ffxf-border);
  border-radius: 12px;
  background: var(--ffxf-soft);
}
.legal-toc p {
  margin: 0 0 10px;
  font-family: var(--ffxf-font-mono);
  font-size: 12.48px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ffxf-muted);
}
.legal-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 6px 20px;
}
.legal-toc a {
  font-size: 14.72px;
  color: var(--ffxf-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.legal-toc a:hover {
  color: var(--ffxf-accent-strong);
  border-bottom-color: var(--ffxf-accent-strong);
}
.legal-note {
  margin-top: 16px;
  padding: 14px 16px;
  border-left: 3px solid var(--ffxf-accent-strong);
  border-radius: 0 8px 8px 0;
  background: var(--ffxf-soft);
}
.legal-note p { margin-top: 0; }
.legal-note p + p { margin-top: 10px; }
.legal-note p { font-size: 15.36px; line-height: 1.75; color: var(--ffxf-text); }
.legal-note a { color: var(--ffxf-accent-strong); }
.legal-table-wrap { margin-top: 16px; overflow-x: auto; }
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.72px;
}
.legal-table th,
.legal-table td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--ffxf-border);
  color: var(--ffxf-text);
  line-height: 1.6;
}
.legal-table th {
  font-family: var(--ffxf-font-mono);
  font-size: 12.48px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ffxf-muted);
  font-weight: 600;
  white-space: nowrap;
}
.legal-table td:first-child { white-space: nowrap; color: var(--ffxf-fg); }

/* ---------- 20. Page 404 -------------------------------------------- */
.ffxf-404 { padding: 150px 0 110px; background: var(--ffxf-bg); text-align: center; }
.ffxf-404 .legal-intro { margin-left: auto; margin-right: auto; max-width: 60ch; }
.ffxf-404 .cta-actions { justify-content: center; margin-top: 28px; }
.ffxf-404 .footer-mono { margin-top: 40px; }

/* Lien de navigation de la page courante (pages intérieures) */
.rts-header .elitehost-desktop-menu li.menu-item a.main-element[aria-current="page"] { color: var(--ffxf-fg); font-weight: 600; }
.side-bar .mobile-menu-main nav ul li a.main[aria-current="page"] { color: var(--ffxf-accent-strong); }


/* ---------- 21. Blog (corps des pages générées) ---------------------
   Reprises de styles.css : mêmes classes que les gabarits de
   tools/build_blog.py. Tailles converties en px (le template fixe la racine
   à 10px), variables remappées sur les tokens --ffxf-*, fil d'Ariane
   .breadcrumb renommé .post-breadcrumb (collision avec Bootstrap).
   La coquille (en-tête, pied de page, boutons) vient du template. */
:root {
  --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a10 10 0 100-20 10 10 0 000 20z'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
}
/* largeur de lecture de l'index, plus étroite que le .container de Bootstrap */
.blog-main .container { width: min(1160px, calc(100% - 40px)); max-width: none; }

.blog-hero {
  position: relative;
  overflow: hidden;
  padding: 34px 0 44px;
  background:
    radial-gradient(120% 140% at 50% -30%, var(--ffxf-navy-3) 0%, transparent 62%),
    linear-gradient(160deg, var(--ffxf-navy) 0%, var(--ffxf-navy-2) 100%);
  color: var(--ffxf-navy-fg);
}
.blog-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.blog-hero-glow {
  position: absolute;
  top: -180px;
  left: 50%;
  width: 680px;
  height: 400px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(56,189,248,.26), transparent 70%);
  pointer-events: none;
}
.blog-header { max-width: 620px; margin-top: 22px;
}
.blog-header h1 {
  margin-top: 10px;
  font-size: clamp(24px, 2.8vw, 31.2px);
  line-height: 1.22;
  color: var(--ffxf-navy-fg);
}
.blog-intro {
  margin-top: 12px;
  font-size: 14.88px;
  line-height: 1.72;
  color: rgba(249,251,255,.72);
}
.blog-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  font-family: var(--ffxf-font-mono);
  font-size: 11.52px;
  color: rgba(249,251,255,.48);
}
.blog-hero-meta a { color: var(--ffxf-accent-on-dark);
}
.blog-hero-meta a:hover { color: var(--ffxf-navy-fg);
}
.post-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  font-family: var(--ffxf-font-mono);
  font-size: 11.52px;
  letter-spacing: .05em;
  color: var(--ffxf-muted);
}
.post-breadcrumb a { color: var(--ffxf-muted);
}
.post-breadcrumb a:hover { color: var(--ffxf-accent-strong);
}
.blog-hero .post-breadcrumb { color: rgba(249,251,255,.5);
}
.blog-hero .post-breadcrumb a { color: rgba(249,251,255,.68);
}
.blog-hero .post-breadcrumb a:hover { color: var(--ffxf-accent-on-dark);
}
.blog-listing { padding: 40px 0 76px;
}
.post-link {
  font-family: var(--ffxf-font-mono);
  font-size: 11.52px;
  font-weight: 500;
  color: var(--ffxf-accent-strong);
}
.post-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ffxf-border);
  border-radius: 12px;
  background: var(--ffxf-card);
  box-shadow: var(--ffxf-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.post-card:hover {
  transform: translateY(-2px);
  border-color: rgba(14,165,233,.42);
  box-shadow: var(--ffxf-shadow);
}
.post-card-media {
  overflow: hidden;
  background: var(--ffxf-navy);
  border-bottom: 1px solid var(--ffxf-border);
}
.post-card-media img, .post-cover img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.post-card-media img { aspect-ratio: 2.35 / 1; transition: transform .4s ease;
}
.post-card:hover .post-card-media img { transform: scale(1.04);
}
.post-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 18px 18px;
}
.post-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--ffxf-font-mono);
  font-size: 10.88px;
  color: var(--ffxf-muted);
}
.post-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 3px;
  background: var(--ffxf-accent-light);
  color: var(--ffxf-accent-strong);
  font-family: var(--ffxf-font-mono);
  font-size: 10.24px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.post-card h2, .post-card h3 {
  margin-top: 11px;
  font-size: 15.68px;
  line-height: 1.42;
}
.post-card h2 a, .post-card h3 a { color: var(--ffxf-fg);
}
.post-card h2 a::after, .post-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.post-card:hover h2 a, .post-card:hover h3 a { color: var(--ffxf-accent-strong);
}
.post-card p {
  margin-top: 8px;
  font-size: 13.6px;
  line-height: 1.62;
  color: var(--ffxf-text);
}
.post-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--ffxf-font-mono);
  font-size: 10.88px;
  color: var(--ffxf-muted);
}
.post-card:hover .post-link { color: var(--ffxf-navy);
}
.docs-main { position: relative;
}
.docs-shell {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr) 210px;
  grid-template-areas:
    "nav head    toc"
    "nav content toc";
  gap: 0 44px;
  width: min(1400px, calc(100% - 40px));
  margin: 0 auto;
  padding-bottom: 80px;
}
.docs-side { font-size: 13.12px;
}
.docs-side-nav {
  grid-area: nav;
  border-right: 1px solid var(--ffxf-border);
}
.docs-side-toc { grid-area: toc;
}
.docs-nav, .post-toc {
  position: sticky;
  top: 78px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding: 28px 0;
}
.docs-nav { padding-right: 22px;
}
.docs-nav-home {
  display: block;
  font-family: var(--ffxf-font-mono);
  font-size: 11.52px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ffxf-muted);
}
.docs-nav-home:hover { color: var(--ffxf-accent-strong);
}
.docs-nav-list { margin-top: 20px;
}
.docs-nav-group + .docs-nav-group { margin-top: 22px;
}
.docs-nav-tag {
  font-family: var(--ffxf-font-mono);
  font-size: 10.56px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ffxf-muted);
  opacity: .8;
}
.docs-nav-group ul {
  margin-top: 8px;
  border-left: 1px solid var(--ffxf-border);
}
.docs-nav-group li a {
  display: block;
  margin-left: -1px;
  padding: 6px 0 6px 13px;
  border-left: 1px solid transparent;
  font-size: 13.12px;
  line-height: 1.45;
  color: var(--ffxf-muted);
  transition: color .15s, border-color .15s;
}
.docs-nav-group li a:hover {
  color: var(--ffxf-fg);
  border-left-color: var(--ffxf-border);
}
.docs-nav-group li a.active {
  color: var(--ffxf-accent-strong);
  border-left-color: var(--ffxf-accent);
  font-weight: 500;
}
.post-toc { padding-left: 18px; border-left: 1px solid var(--ffxf-border);
}
.post-toc-title {
  font-family: var(--ffxf-font-mono);
  font-size: 10.56px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ffxf-muted);
}
.post-toc ol {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.post-toc a {
  display: block;
  padding: 5px 0;
  font-size: 12.48px;
  line-height: 1.45;
  color: var(--ffxf-muted);
  transition: color .15s;
}
.post-toc a:hover, .post-toc a.active { color: var(--ffxf-accent-strong);
}
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 100%;
  height: 2px;
  pointer-events: none;
}
.reading-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--ffxf-accent), var(--ffxf-accent-on-dark));
}
.docs-head, .docs-content {
  grid-area: content;
  min-width: 0;
  max-width: 730px;
}
.docs-head { grid-area: head; padding-top: 30px;
}
.docs-header { margin-top: 16px;
}
.docs-header h1 {
  font-size: clamp(23.2px, 2.6vw, 30.4px);
  line-height: 1.25;
  color: var(--ffxf-fg);
}
.post-lead {
  margin-top: 12px;
  font-size: 16.32px;
  line-height: 1.72;
  color: var(--ffxf-text);
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--ffxf-border);
  font-family: var(--ffxf-font-mono);
  font-size: 11.52px;
  color: var(--ffxf-muted);
}
.post-author {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ffxf-text);
}
.post-author img {
  padding: 3px;
  border-radius: 999px;
  background: var(--ffxf-soft);
}
.post-cover {
  margin: 26px 0 0;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--ffxf-border);
  background: var(--ffxf-navy);
}
.post-cover img { aspect-ratio: 10 / 3;
}
.post-body { margin-top: 30px;
}
.post-body > p {
  margin-top: 15px;
  font-size: 14.88px;
  line-height: 1.72;
  color: var(--ffxf-text);
}
.post-body h2 {
  position: relative;
  margin-top: 42px;
  padding-top: 24px;
  border-top: 1px solid var(--ffxf-border);
  font-size: 18.4px;
  line-height: 1.35;
  color: var(--ffxf-fg);
  scroll-margin-top: 84px;
}
.post-body h2::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--ffxf-accent);
}
.post-body h3 {
  margin-top: 26px;
  font-size: 16px;
  color: var(--ffxf-fg);
  scroll-margin-top: 84px;
}
.post-body a {
  color: var(--ffxf-accent-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.post-body a:hover { color: var(--ffxf-navy);
}
.post-body strong { color: var(--ffxf-fg); font-weight: 600;
}
.post-list { margin-top: 14px; padding-left: 2px; list-style: none;
}
.post-list li {
  position: relative;
  margin-top: 8px;
  padding-left: 22px;
  font-size: 14.56px;
  line-height: 1.68;
  color: var(--ffxf-text);
}
.post-list li::before {
  content: "";
  position: absolute;
  top: .6em;
  left: 3px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--ffxf-accent);
  opacity: .55;
}
.post-body code {
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--ffxf-soft);
  border: 1px solid var(--ffxf-border);
  font-family: var(--ffxf-font-mono);
  font-size: 0.85em;
  color: var(--ffxf-navy-3);
  overflow-wrap: anywhere;
  
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.code-card {
  position: relative;
  margin: 18px 0 0;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
  background: var(--ffxf-navy);
}
.code-card-bar {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
}
.code-label {
  font-family: var(--ffxf-font-mono);
  font-size: 10.56px;
  letter-spacing: .1em;
  color: rgba(249,251,255,.34);
}
.code-copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: rgba(249,251,255,.34);
  font-family: var(--ffxf-font-mono);
  font-size: 10.56px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, color .15s, border-color .15s, background .15s;
}
.code-card:hover .code-copy, .code-copy:focus-visible { opacity: 1;
}
.code-copy:hover {
  color: var(--ffxf-navy-fg);
  border-color: rgba(56,189,248,.4);
  background: rgba(56,189,248,.12);
}
.code-copy.is-done {
  opacity: 1;
  color: #86efac;
  border-color: rgba(134,239,172,.4);
}
.code-block {
  overflow-x: auto;
  margin: 0;
  padding: 13px 15px;
  font-family: var(--ffxf-font-mono);
  font-size: 12.8px;
  line-height: 1.72;
  color: rgba(249,251,255,.86);
  tab-size: 2;
}
.code-block code {
  display: block;
  padding-right: 78px;   
  border: 0;
  background: none;
  font-size: inherit;
  color: inherit;
}
.t-c { color: rgba(249,251,255,.34); font-style: italic;
}
.t-s { color: #86efac;
}
.t-k { color: #7dd3fc;
}
.t-t { color: #c4b5fd; font-weight: 500;
}
.t-v { color: #c4b5fd;
}
.t-f { color: #fdba74;
}
.t-n { color: #fcd34d;
}
.t-o { color: rgba(249,251,255,.48);
}
.t-p { color: rgba(249,251,255,.42); font-style: italic;
}
.callout {
  position: relative;
  margin-top: 20px;
  padding: 14px 18px 14px 46px;
  border: 1px solid var(--ffxf-border);
  border-left: 3px solid var(--ffxf-accent);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--ffxf-accent-light) 0%, var(--ffxf-card) 78%);
}
.callout::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 16px;
  width: 18px;
  height: 18px;
  background: var(--ffxf-accent-strong);
  -webkit-mask: var(--icon-info) center / contain no-repeat;
  mask: var(--icon-info) center / contain no-repeat;
}
.callout p {
  font-size: 14.08px;
  line-height: 1.68;
  color: var(--ffxf-text);
}
.post-cta {
  position: relative;
  overflow: hidden;
  margin-top: 46px;
  padding: 26px 28px;
  border-radius: 12px;
  background:
    radial-gradient(110% 130% at 88% -20%, var(--ffxf-navy-3) 0%, transparent 60%),
    linear-gradient(145deg, var(--ffxf-navy) 0%, var(--ffxf-navy-2) 100%);
  color: var(--ffxf-navy-fg);
}
.post-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.post-cta > * { position: relative; z-index: 1;
}
.post-cta h2 {
  margin-top: 9px;
  font-size: 18.4px;
  color: var(--ffxf-navy-fg);
}
.post-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.blog-listing .post-cta { margin-top: 52px;
}
/* Sommaire de la documentation : une grille de cartes par groupe. */
.docs-index-group { margin-top: 38px;
}
.docs-index-group:first-of-type { margin-top: 26px;
}
.docs-index-group > h2 {
  font-family: var(--ffxf-font-mono);
  font-size: 11.52px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ffxf-muted);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ffxf-border);
}
.docs-index-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.docs-index-list > li { margin: 0;
}
.docs-index-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  height: 100%;
  padding: 15px 17px;
  border: 1px solid var(--ffxf-border);
  border-radius: 10px;
  background: var(--ffxf-card);
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.docs-index-card:hover {
  border-color: rgba(14,165,233,.42);
  box-shadow: var(--ffxf-shadow-sm);
}
.docs-index-card h3 {
  margin: 0;
  font-size: 15.04px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ffxf-fg);
}
.docs-index-card:hover h3 { color: var(--ffxf-accent-strong);
}
.docs-index-card p {
  margin: 0;
  font-size: 13.44px;
  line-height: 1.6;
  color: var(--ffxf-muted);
}
@media (max-width: 760px) {
  .docs-index-list { grid-template-columns: minmax(0, 1fr);
  }
}
.docs-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 46px;
  padding-top: 26px;
  border-top: 1px solid var(--ffxf-border);
}
.docs-step {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--ffxf-border);
  border-radius: 10px;
  background: var(--ffxf-card);
  transition: border-color .15s, box-shadow .15s;
}
.docs-step:hover {
  border-color: rgba(14,165,233,.42);
  box-shadow: var(--ffxf-shadow-sm);
}
.docs-step.is-empty {
  border: 0;
  background: none;
  pointer-events: none;
}
.docs-step-next { text-align: right;
}
.docs-step-label {
  font-family: var(--ffxf-font-mono);
  font-size: 10.88px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ffxf-muted);
}
.docs-step-title {
  font-size: 14.08px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--ffxf-fg);
}
.docs-step:hover .docs-step-title { color: var(--ffxf-accent-strong);
}
@media (max-width: 1240px) {
  .docs-shell {
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-areas:
      "nav head"
      "nav toc"
      "nav content";
    gap: 0 36px;
  }
  .docs-side-toc { align-self: start;
  }
  .post-toc {
    position: static;
    max-height: none;
    overflow: visible;
    margin-top: 30px;
    padding: 16px 18px;
    border: 1px solid var(--ffxf-border);
    border-radius: 10px;
    background: var(--ffxf-card);
  }
  .post-toc ol { columns: 2; column-gap: 26px;
  }
  .docs-head { padding-top: 22px;
  }
  .docs-head, .docs-content { max-width: none;
  }
}
@media (max-width: 900px) {
  .docs-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "toc" "content";
    width: min(1400px, calc(100% - 32px));
  }
  .docs-side-nav { display: none;
  }
}
@media (max-width: 760px) {
  .blog-hero { padding: 26px 0 36px;
  }
  .blog-listing { padding: 30px 0 60px;
  }
  .post-grid { grid-template-columns: 1fr;
  }
  .post-cover img { aspect-ratio: 2.35 / 1;
  }
  .post-toc ol { columns: 1;
  }
  .post-cta { padding: 22px 20px;
  }
  .code-block { padding: 12px 13px; font-size: 12.16px;
  }
  .code-copy { opacity: 1;
  }
  .code-copy span { display: none;
  }
  .post-body h2 { margin-top: 34px; font-size: 17.28px;
  }
  .docs-pager { grid-template-columns: 1fr;
  }
  .docs-step-next { text-align: left;
  }
}
@media (prefers-reduced-motion: reduce) {
  .post-card, .post-card-media img { transition: none;
  }
  .post-card:hover { transform: none;
  }
  .post-card:hover .post-card-media img { transform: none;
  }
}

/* ---------- 22. Blog : raccords avec la coquille du template ---------
   L'en-tête du template est en position absolue et se fige au scroll : le
   contenu doit réserver sa hauteur (119px, barre supérieure comprise) et les
   éléments collants se caler sous l'en-tête figé (81px). */
.blog-hero { padding: 153px 0 44px; }
.docs-shell { padding-top: 119px; }
.docs-nav,
.post-toc { top: 96px; }
.post-body h2,
.post-body h3 { scroll-margin-top: 96px; }
.reading-progress { z-index: 100; }
.post-cta .eyebrow { color: rgba(249,251,255,.56); }
.post-cta p:not(.eyebrow) {
  max-width: 600px;
  margin-top: 10px;
  font-size: 14.08px;
  line-height: 1.68;
  color: rgba(249,251,255,.76);
}
@media (max-width: 991px) {
  .blog-hero { padding-top: 157px; }
  .docs-shell { padding-top: 123px; }
}
@media (max-width: 760px) {
  .blog-hero { padding: 149px 0 36px; }
}

/* ---------- 23. Bandeau de consentement aux témoins ------------------
   Position fixe et injection après le chargement : le bandeau ne réserve
   aucune hauteur dans le flux, il n'y a donc rien à décaler ni à son
   apparition ni à sa disparition (CLS nul). Au-dessus du tiroir de
   navigation mobile (z-index 1900), qui reste la couche la plus haute
   du gabarit. */
.ffxf-consent {
  position: fixed;
  z-index: 2000;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  padding: 16px;
  pointer-events: none;          /* seule la boîte intercepte le clic */
}
.ffxf-consent:focus { outline: none; }
.ffxf-consent__box {
  pointer-events: auto;
  width: 100%;
  max-width: 940px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  background: var(--ffxf-card);
  border: 1px solid var(--ffxf-border);
  border-radius: var(--ffxf-radius);
  box-shadow: 0 -1px 3px rgba(13,28,52,.05), 0 12px 32px rgba(13,28,52,.14);
}
.ffxf-consent__text {
  margin: 0;
  font-size: 13.6px;
  line-height: 1.62;
  color: var(--ffxf-text);
}
.ffxf-consent__text a { color: var(--ffxf-accent-strong); text-decoration: underline; }
.ffxf-consent__actions { display: flex; gap: 10px; flex-shrink: 0; }
/* Refuser doit être aussi simple qu'accepter : même taille, même lisibilité,
   même niveau de lecture. Seule la teinte distingue les deux réponses. */
.ffxf-consent__actions .rts-btn { padding: 12px 22px; font-size: 14px; white-space: nowrap; }

@media (max-width: 760px) {
  .ffxf-consent { padding: 10px; }
  .ffxf-consent__box { flex-direction: column; align-items: stretch; gap: 14px; }
  .ffxf-consent__actions .rts-btn { flex: 1; }
}

/* Retour sur sa décision : une entrée du menu légal, présentée comme les
   liens voisins bien qu'elle soit un bouton. */
.ffxf-consent-reopen {
  /* display + text-align : un bouton est centré et de largeur propre par
     défaut, là où les liens voisins sont des blocs alignés à gauche. */
  display: block;
  width: 100%;
  text-align: left;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14.4px;
  color: var(--ffxf-text);
  cursor: pointer;
  transition: var(--transition);
}
.ffxf-consent-reopen:hover { color: var(--ffxf-accent-strong); }

/* =====================================================================
   ESSAI TYPOGRAPHIQUE (branche essai-typo) — d'après searchable.com/pricing
   Une seule famille, Geist : grands titres en graisse 500 (48 px en
   section, 66 px au héros), interlettrage serré ; texte 14 à 16 px ;
   petits titres (cartes, services, FAQ) en 600.
   Tout est regroupé ici pour se retirer d'un bloc.
   ===================================================================== */
:root {
  --font-primary: Geist, "Geist repli", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-secondary: Geist, "Geist repli", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ffxf-font-heading: Geist, "Geist repli", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ffxf-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
body { font-size: 16px; }

/* grands titres : Geist graisse 500, interlettrage serré */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 500; letter-spacing: -.03em; }
.rts-section__title,
.section-title-area .section-title,
.rts-whychoose__content--title {
  font-weight: 500;
  font-size: clamp(36px, 4.2vw, 48px);
  line-height: 1;
  letter-spacing: -.035em;
}
.hero__banner__content4 h1 {
  font-weight: 500;
  font-size: clamp(44px, 5.4vw, 66px);
  line-height: 1;
  letter-spacing: -.035em;
}
.rts-breadcrumb-area .breadcrumb-content .heading-title {
  font-weight: 500;
  font-size: clamp(40px, 4.8vw, 58px);
  line-height: 1;
  letter-spacing: -.035em;
}
.docs-header h1 { font-weight: 500; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.05; letter-spacing: -.03em; }

/* noms de plans : serif 28 px, comme « Pro / Scale » de la référence ;
   le prix reste en sans-serif demi-gras, comme « $125 /mois » */
.rts-pricing-plan .card-plan .package__name { font-weight: 500; font-size: 28px; letter-spacing: -.01em; line-height: 1.15; }
.rts-pricing-plan.pricing-plan-2 .card-plan .card-plan__price { font-family: var(--font-secondary); font-weight: 600; font-size: 26px; letter-spacing: -.02em; }
.rts-pricing-plan.pricing-plan-2 .card-plan .card-plan__price strong { font-weight: 600; }
.rts-pricing-plan.pricing-plan-2 .card-plan .card-plan__desc { font-size: 14px; line-height: 1.45; color: var(--ffxf-muted); }

/* petits titres : sans-serif 600, le serif est réservé aux grands corps */
.service-inner ul .service-wrapper .icon-area h3,
.usecase-card .title,
.rts-hosting-type__single .title,
.rts-hosting-type__single.area-2 .title,
.rts-hosting-type__single.area-2:hover .title,
.rts-blog__single--meta .title,
.post-card h2, .post-card h3,
.post-body h2, .post-body h3,
.post-cta h2,
.docs-nav-tag,
.ffxf-consent h2 {
  font-family: var(--font-secondary); font-weight: 600; letter-spacing: -.01em;
}
.post-body h2 { font-size: 22px; }
.post-body h3 { font-size: 17px; }
.post-cta h2 { font-size: 24px; }

/* corps et navigation : Geist, tailles de la référence */
.section-sub, .rts-section__description.section-sub, .section-title-area .desc.section-sub { font-size: 16px; line-height: 1.6; }
.hero__banner__content4 .hero-lead { font-size: 16px; line-height: 1.65; }
.rts-header .elitehost-desktop-menu li.menu-item a.main-element { font-size: 15px; font-weight: 500; }
.rts-faq__accordion .accordion .accordion-item .accordion-header .accordion-button { font-family: var(--font-secondary); font-size: 16px; font-weight: 500; }
.rts-faq__accordion .accordion .accordion-item .accordion-body p { font-size: 15px; line-height: 1.6; }
.service-inner ul .service-wrapper p.desc, .usecase-card .excerpt, .rts-blog__single--meta .excerpt { font-size: 14px; line-height: 1.55; }
.post-body > p, .post-body li { font-size: 15.5px; line-height: 1.7; }
.rts-btn, .primary__btn, .btn__two, .login__btn, .card-plan__cartbtn a, .tab__btn { font-weight: 500; letter-spacing: 0; }

/* ---------- 24. transitions.dev -------------------------------------
   Transitions du skill transitions-dev. Les blocs marqués « snippet »
   sont recopiés mot pour mot depuis les fiches du skill : ne pas les
   reformuler, ne pas les réduire en raccourci, ne pas retirer le
   will-change ni le garde prefers-reduced-motion. Les adaptations au
   site (tailles, couleurs, raccords avec le balisage existant) vivent
   plus bas, dans « Raccords », pour rester séparables des snippets.
   -------------------------------------------------------------------- */

/* Bloc :root universel (_root.css du skill), recopié tel quel. */
:root {
  /* ── Motion tokens — shared scale ──────────────────────────────
     Reference these with var(--…) anywhere in your project. The
     transitions below ship literal values so each snippet works on
     its own; `transitions refine` maps hardcoded values back to
     these tokens. */
  /* Durations */
  --duration-stagger: 40ms;  /* per-item stagger offset */
  --duration-micro: 80ms;  /* tooltip/path delay, shake segment, large stagger */
  --duration-quick: 150ms;  /* modal/dropdown close, text swap, tooltip appear */
  --duration-fast: 250ms;  /* icon swap, dropdown/modal open, tabs sliding, page slide */
  --duration-medium: 350ms;  /* panel close, toast close */
  --duration-slow: 400ms;  /* panel open, skeleton content reveal, input clear */
  --duration-very-slow: 500ms;  /* emphasis moments, badge appear, text reveal, success check */
  /* Easings */
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);  /* modal/dropdown/panel open + close, page slide, resize, position change */
  --ease-in-out: ease-in-out;  /* icon swap, text swap, text reveal, skeleton reveal */
  --ease-out: ease-out;  /* tooltip open / close */
  --ease-linear: linear;  /* shimmer, skeleton pulse, spinner */
  --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);  /* badge pop open */
  --ease-bounce-strong: cubic-bezier(0.34, 3.85, 0.64, 1);  /* bouncy hover-out (avatar return) */
  /* Distances */
  --distance-micro: 4px;  /* text swap */
  --distance-small: 6px;  /* error shake (small segment) */
  --distance-base: 8px;  /* badge diagonal reveal, page slide, error shake (large segment) */
  --distance-medium: 12px;  /* text reveal */
  --distance-large: 30px;  /* check badge appear */
  /* Scales */
  --scale-large: 0.96;  /* modal open / close */
  --scale-medium: 0.97;  /* dropdown open */
  --scale-small: 0.98;  /* tooltip open */
  --scale-tiny: 0.99;  /* dropdown close */
  /* Blur */
  --blur-small: 2px;  /* panel reveal, icon swap, text swap, skeleton reveal, number pop-in */
  --blur-medium: 3px;  /* page slide, text reveal */
  --blur-large: 8px;  /* success check open */

  /* Card resize */
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Number pop-in */
  --digit-dur: 500ms;
  --digit-distance: 8px;
  --digit-stagger: 70ms;
  --digit-blur: 2px;
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
  /* Notification badge */
  --badge-slide-dur: 260ms;
  --badge-pop-dur: 500ms;
  --badge-pop-close-dur: 180ms;
  --badge-fade-dur: 400ms;
  --badge-fade-close-dur: 180ms;
  --badge-blur: 2px;
  --badge-offset-x: -8.2px;
  --badge-offset-y: 12.4px;
  --badge-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --badge-pop-ease: cubic-bezier(0.34, 1.36, 0.64, 1);
  --badge-close-ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* Text states swap */
  --text-swap-dur: 150ms;
  --text-swap-translate-y: 4px;
  --text-swap-blur: 2px;
  --text-swap-ease: ease-in-out;
  /* Menu dropdown */
  --dropdown-open-dur: 250ms;
  --dropdown-close-dur: 150ms;
  --dropdown-pre-scale: 0.97;
  --dropdown-closing-scale: 0.99;
  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Modal open / close */
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Panel reveal */
  --panel-open-dur: 400ms;
  --panel-close-dur: 350ms;
  --panel-translate-y: 100px;
  --panel-blur: 2px;
  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Page side-by-side */
  --page-slide-dur: 250ms;
  --page-fade-dur: 250ms;
  --page-slide-distance: 8px;
  --page-blur: 3px;
  --page-stagger: 0ms;
  --page-exit-enabled: 1;
  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Icon swap */
  --icon-swap-dur: 250ms;
  --icon-swap-blur: 2px;
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: ease-in-out;
  /* Success check */
  --check-opacity-dur: 500ms;
  --check-rotate-dur: 500ms;
  --check-rotate-from: 80deg;
  --check-bob-dur: 500ms;
  --check-y-amount: 40px;
  --check-blur-dur: 500ms;
  --check-blur-from: 10px;
  --check-path-dur: 500ms;
  --check-path-delay: 80ms;
  --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
  --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
  /* Avatar group hover */
  --avatar-lift: -4px;
  --avatar-dur: 320ms;
  --avatar-scale: 1.05;
  --avatar-falloff: 0.45;
  --avatar-ease-in: cubic-bezier(0.22, 1, 0.36, 1);
  --avatar-ease-out: cubic-bezier(0.34, 3.85, 0.64, 1);
  /* Error state shake */
  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --revert-hold: 3000ms;
  --revert-dur: 280ms;
  /* Input clear with dissolve */
  --clear-dur: 1000ms;
  --clear-out-dur: 400ms;
  --clear-in-dur: 400ms;
  --clear-out-fly: 12px;
  --clear-in-fly: 12px;
  --clear-out-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --clear-in-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --clear-blur: 2px;
  --glow-delay: 50ms;
  --glow-peak-at: 0.15;
  --glow-opacity: 0.42;
  --glow-spread: 1.5;
  /* Skeleton loader and reveal */
  --pulse-dur: 1000ms;
  --pulse-count: 1;
  --pulse-min: 0.5;
  --reveal-dur: 400ms;
  --reveal-blur: 2px;
  --reveal-ease: ease-in-out;
  /* Shimmer text */
  --shimmer-dur: 2000ms;
  --shimmer-base: #7c7c7c;
  --shimmer-highlight: #0d0d0d;
  --shimmer-band: 400%;
  --shimmer-ease: linear;
  /* Tabs sliding */
  --tabs-dur: 250ms;
  --tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tabs-text-muted: rgba(15, 15, 15, 0.8);
  --tabs-text-active: #0f0f0f;
  --tabs-bar-bg: #f1f1f1;
  --tabs-pill-bg: #ffffff;
  /* Tooltip open/close */
  --tt-in-dur: 150ms;
  --tt-out-dur: 50ms;
  --tt-scale: 0.98;
  --tt-delay: 80ms;
  --tt-in-ease: ease-out;
  --tt-out-ease: ease-out;
  --tt-move-dur: 160ms;
  --tt-move-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tt-bg: #ffffff;
  --tt-fg: #2f2f2f;
  /* Texts reveal */
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Card hover tilt */
  --tilt-perspective: 1000px;
  --tilt-return: 1000ms;
  --tilt-return-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tilt-follow: 400ms;
  --tilt-follow-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tilt-glare-opacity: 0.32;
  --tilt-glare-fade: 300ms;
  --tilt-glare-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Plus to menu morph */
  --morph-open-dur: 350ms;
  --morph-close-dur: 250ms;
  --morph-ease: cubic-bezier(0.34, 1.25, 0.64, 1);
  --morph-close-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --morph-r-closed: 40px;
  --morph-r-open: 20px;
  --morph-fade-dur: 200ms;
  --morph-slide: 40px;
  --morph-rotate: 45deg;
  --morph-scale: 0.97;
  --morph-blur: 2px;
  /* Accordion expand */
  --acc-expand: 250ms;
  --acc-collapse: 250ms;
  --acc-chevron: 250ms;
  --acc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Toast open / close */
  --toast-open: 350ms;
  --toast-close: 250ms;
  --toast-distance: 16px;
  --toast-blur: 2px;
  --toast-scale: 0.97;
  --toast-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Like button */
  --like-color: #f40051;
  --like-fill: 150ms;
  --like-pop: 350ms;
  --like-pop-ease: cubic-bezier(0.34, 1.96, 0.64, 1);
  --like-particle-dur: 600ms;
  --like-particle-dist: 20px;
  --like-particle-size: 2.5px;
  --like-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Learn more hover */
  --learn-shift: 2px;
  --learn-spread: 8deg;
  --learn-in: 350ms;
  --learn-out: 350ms;
  --learn-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Checkbox check */
  --check-box: 150ms;
  --check-draw: 350ms;
  --check-delay: 0ms;
  --check-uncheck: 150ms;
  --check-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Spinning counter */
  --reel-dur: 1400ms;
  --reel-cell: 30px;
  --reel-spin-blur: 3px;
  --reel-stagger: 90ms;
  --reel-ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Toggle */
  --toggle-dur: 350ms;
  --toggle-travel: 14.66px;
  --toggle-ov1: 1px;
  --toggle-ov2: 0px;
  --toggle-track: 0ms;
  --toggle-ease: cubic-bezier(0.34, 1.35, 0.64, 1);
  /* Thinking states */
  --think-hold: 2000ms;
  --think-swap: 150ms;
  --think-gap: 50ms;
  --think-distance: 8px;
  --think-blur: 2px;
  --think-shimmer: 2000ms;
  --think-base: #7c7c7c;
  --think-highlight: #0d0d0d;
  --think-ease: ease-in-out;
  /* Reasoning stream */
  --reason-hold: 840ms;
  --reason-step: 500ms;
  --reason-lines: 2;
  --reason-fade: 28px;
  --reason-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Streaming text */
  --stream-gap: 60ms;
  --stream-fade: 350ms;
  --stream-blur: 1px;
  --stream-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Matrix dot loader */
  --matrix-cycle: 1200ms;
  --matrix-base: #d9d9d9;
  --matrix-active: #85858f;
  --matrix-ease: ease-in-out;
  /* Banner stacking */
  --stack-open: 350ms;
  --stack-close: 250ms;
  --stack-rise: 60px;
  --stack-blur: 2px;
  --stack-scale: 0.97;
  --stack-peek: 12px;
  --stack-spread-gap: 8px;
  --stack-depth-scale: 0.06;
  --stack-depth-fade: 0.4;
  --stack-depth1-blur: 1px;
  --stack-depth2-blur: 2px;
  --stack-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* snippet — 02-number-pop-in */
@keyframes t-digit-pop-in {
  0%   {
    transform: translate(
      calc(var(--digit-distance) * var(--digit-dir-x)),
      calc(var(--digit-distance) * var(--digit-dir-y))
    );
    opacity: 0;
    filter: blur(var(--digit-blur));
  }
  100% { transform: translate(0, 0); opacity: 1; filter: blur(0); }
}

.t-digit-group {
  display: inline-flex;
  align-items: baseline;
}
.t-digit {
  display: inline-block;
  will-change: transform, opacity, filter;
}
.t-digit-group.is-animating .t-digit {
  animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both;
}
.t-digit-group.is-animating .t-digit[data-stagger="1"] {
  animation-delay: var(--digit-stagger);
}
.t-digit-group.is-animating .t-digit[data-stagger="2"] {
  animation-delay: calc(var(--digit-stagger) * 2);
}

@media (prefers-reduced-motion: reduce) {
  .t-digit-group .t-digit { animation: none !important; }
}

/* snippet — 04-text-states-swap */
.t-text-swap {
  display: inline-block;
  transform: translateY(0);
  filter: blur(0);
  opacity: 1;
  transition:
    transform var(--text-swap-dur) var(--text-swap-ease),
    filter    var(--text-swap-dur) var(--text-swap-ease),
    opacity   var(--text-swap-dur) var(--text-swap-ease);
  will-change: transform, filter, opacity;
}
.t-text-swap.is-exit {
  transform: translateY(calc(var(--text-swap-translate-y) * -1));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
}
.t-text-swap.is-enter-start {
  transform: translateY(var(--text-swap-translate-y));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .t-text-swap { transition: none !important; }
}

/* snippet — 05-menu-dropdown */
.t-dropdown {
  transform-origin: top left;
  transform: scale(var(--dropdown-pre-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-open-dur) var(--dropdown-ease),
    opacity   var(--dropdown-open-dur) var(--dropdown-ease);
  will-change: transform, opacity;
}
.t-dropdown[data-origin="top-right"]     { transform-origin: top right; }
.t-dropdown[data-origin="top-center"]    { transform-origin: top center; }
.t-dropdown[data-origin="bottom-left"]   { transform-origin: bottom left; }
.t-dropdown[data-origin="bottom-center"] { transform-origin: bottom center; }
.t-dropdown[data-origin="bottom-right"]  { transform-origin: bottom right; }

.t-dropdown.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-dropdown.is-closing {
  transform: scale(var(--dropdown-closing-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-close-dur) var(--dropdown-ease),
    opacity   var(--dropdown-close-dur) var(--dropdown-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-dropdown { transition: none !important; }
}

/* snippet — 07-panel-reveal */
.t-panel-slide {
  transform: translateY(var(--panel-translate-y));
  opacity: 0;
  filter: blur(var(--panel-blur));
  pointer-events: none;
  transition:
    transform var(--panel-close-dur) var(--panel-ease),
    opacity   var(--panel-close-dur) var(--panel-ease),
    filter    var(--panel-close-dur) var(--panel-ease);
  will-change: transform, opacity, filter;
}
.t-panel-slide[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transition:
    transform var(--panel-open-dur) var(--panel-ease),
    opacity   var(--panel-open-dur) var(--panel-ease),
    filter    var(--panel-open-dur) var(--panel-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-panel-slide { transition: none !important; }
}

/* snippet — 09-icon-swap */
.t-icon-swap {
  position: relative;
  display: inline-grid;
}
.t-icon-swap .t-icon {
  grid-area: 1 / 1;
  transition:
    opacity   var(--icon-swap-dur) var(--icon-swap-ease),
    filter    var(--icon-swap-dur) var(--icon-swap-ease),
    transform var(--icon-swap-dur) var(--icon-swap-ease);
  will-change: opacity, filter, transform;
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="a"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="b"] {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="b"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="a"] {
  opacity: 0;
  filter: blur(var(--icon-swap-blur));
  transform: scale(var(--icon-swap-start-scale));
}

@media (prefers-reduced-motion: reduce) {
  .t-icon-swap .t-icon { transition: none !important; }
}

/* snippet — 10-success-check */
/* Wrapper drives the appear animation; it doesn't own any
   sizing or color so you can drop in any icon. */
.t-success-check {
  display: inline-block;
  transform-origin: center;
  opacity: 0;
  will-change: transform, opacity, filter;
}
/* overflow: visible keeps the stroke from clipping while it
   draws; display: block kills the inline whitespace under SVGs. */
.t-success-check svg { display: block; overflow: visible; }
/* Stroke-draw setup. Replace 20 with the result of
   path.getTotalLength() for your path; round caps mean any
   sub-pixel overshoot is invisible. */
.t-success-check svg path {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
}

.t-success-check[data-state="in"] {
  animation:
    t-check-fade   var(--check-opacity-dur) var(--check-ease-opacity) forwards,
    t-check-rotate var(--check-rotate-dur)  var(--check-ease-rotate)  forwards,
    t-check-blur   var(--check-blur-dur)    var(--check-ease-out)     forwards,
    t-check-bob    var(--check-bob-dur)     var(--check-ease-bob)     forwards;
}
.t-success-check[data-state="in"] svg path {
  animation: t-check-draw var(--check-path-dur) var(--check-ease-path) var(--check-path-delay, 0ms) forwards;
}

@keyframes t-check-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-check-rotate {
  from { transform: rotate(var(--check-rotate-from)); }
  to   { transform: rotate(0deg); }
}
@keyframes t-check-blur {
  from { filter: blur(var(--check-blur-from)); }
  to   { filter: blur(0); }
}
@keyframes t-check-bob {
  from { translate: 0 var(--check-y-amount); }
  to   { translate: 0 0; }
}
@keyframes t-check-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .t-success-check { animation: none !important; opacity: 1; }
  .t-success-check svg path { animation: none !important; stroke-dashoffset: 0 !important; }
}

/* snippet — 11-avatar-group-hover */
/* Hover-spring transition only — bring your own avatar/chip
   styling (size, shape, border, stacking, background). */
.t-avatar {
  transform-origin: center;
  /* translateY before scale so scale doesn't amplify the lift offset. */
  transform:
    translateY(var(--shift, 0px))
    scale(var(--scale-active, 1));
  transition: transform var(--avatar-dur) var(--avatar-ease-in);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .t-avatar { transition: none !important; transform: none !important; }
}

/* snippet — 16-tabs-sliding */
/* The bar is just a flex container with padding for the pill
   to sit inside. Tabs sit on z-index: 1, the pill on z-index: 0,
   so labels read above the pill background. */
.t-tabs {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: 48px;
  background: var(--tabs-bar-bg);
}
.t-tab {
  position: relative;
  appearance: none;
  border: 0;
  background: transparent;
  height: 30px;
  padding: 4px 12px;
  color: var(--tabs-text-muted);
  cursor: pointer;
  border-radius: 48px;
  z-index: 1;
  transition: color var(--tabs-dur) var(--tabs-ease);
}
.t-tab:not([aria-selected="true"]):hover,
.t-tab[aria-selected="true"] {
  color: var(--tabs-text-active);
}

/* The pill: width + transform are written inline by JS so
   the transition tweens between the previous and next
   measured positions. */
.t-tabs-pill {
  position: absolute;
  top: 3px;
  left: 0;
  height: 30px;
  width: 0;
  background: var(--tabs-pill-bg);
  border-radius: 48px;
  transform: translateX(0);
  transition:
    transform var(--tabs-dur) var(--tabs-ease),
    width     var(--tabs-dur) var(--tabs-ease);
  will-change: transform, width;
  z-index: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .t-tabs-pill, .t-tab { transition: none !important; }
}

/* snippet — 18-texts-reveal */
/* Lines start translated down + blurred + invisible; .is-shown
   on the parent flips them to their resting state. The second
   line's transition-delay holds it back by --stagger-stagger
   so the eye lands on the headline first. */
.t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition:
    opacity   var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter    var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
.t-stagger-line--2 { transition-delay: var(--stagger-stagger); }

.t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
/* Exit decouples from the stagger: same fade for every line,
   no Y return, no blur — so the disappearance reads as a
   single quiet fade instead of a reverse reveal. */
.t-stagger.is-hiding .t-stagger-line {
  opacity: 0;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 200ms ease,
    transform 0s linear,
    filter 0s linear;
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .t-stagger-line { transition: none !important; }
}

/* snippet — 19-card-tilt */
/* The outer wrapper is the flat hit area; touch-action:none
   lets a finger drag tilt the card instead of scrolling the
   page, so tap-hold-drag works on mobile. */
.t-tilt { touch-action: none; }
/* The card tilts toward the pointer via rotateX/rotateY fed
   from JS; on leave it eases back to flat. A separate
   .is-tilting class swaps in a short linear follow while the
   pointer moves so the tilt tracks the cursor 1:1. */
.t-tilt-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  transform:
    perspective(var(--tilt-perspective))
    rotateX(var(--tilt-rx, 0deg))
    rotateY(var(--tilt-ry, 0deg));
  transform-style: preserve-3d;
  transition: transform var(--tilt-return) var(--tilt-return-ease);
  will-change: transform;
}
.t-tilt-card.is-tilting {
  transition: transform var(--tilt-follow) var(--tilt-follow-ease);
}
/* Cursor-tracked glare: layered soft circles that add like
   light (screen blend) at the pointer position. */
.t-tilt-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle 95px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
      rgba(255,255,255,0.48), rgba(255,255,255,0.06) 52%, rgba(255,255,255,0) 84%),
    radial-gradient(circle 200px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
      rgba(255,255,255,0.22), rgba(255,255,255,0.04) 58%, rgba(255,255,255,0) 78%),
    radial-gradient(circle 360px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
      rgba(255,255,255,0.10), rgba(255,255,255,0) 88%);
  transition: opacity var(--tilt-glare-fade) var(--tilt-glare-ease);
}
.t-tilt.is-hover .t-tilt-glare { opacity: var(--tilt-glare-opacity); }

@media (prefers-reduced-motion: reduce) {
  .t-tilt-card { transform: none !important; transition: none !important; }
}

/* snippet — 21-accordion */
/* grid-template-rows 0fr → 1fr gives a clean height animation
   with no JS measurement; the inner element clips overflow. */
.t-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--acc-collapse) var(--acc-ease);
}
.t-acc[data-open="true"] .t-acc-panel {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--acc-expand) var(--acc-ease);
}
.t-acc-panel-inner {
  overflow: hidden;
  opacity: 0;
  filter: blur(2px);
  transition:
    opacity var(--acc-collapse) var(--acc-ease),
    filter var(--acc-collapse) var(--acc-ease);
}
.t-acc[data-open="true"] .t-acc-panel-inner {
  opacity: 1;
  filter: blur(0);
  transition:
    opacity var(--acc-expand) var(--acc-ease),
    filter var(--acc-expand) var(--acc-ease);
}
/* Flip the chevron vertically to turn the "v" into a "^".
   scaleY(-1) about the centre passes through a flat line at
   the midpoint (same look as a `d:` path morph) but animates
   in every browser, unlike CSS `d:` morphing (Chromium only).
   The chevron path is symmetric about the 16x16 viewBox
   centre, so the flip lands exactly on the "^"; non-scaling
   -stroke keeps the stroke width constant through the flip. */
.t-acc-chevron {
  display: inline-flex;
  transform: scaleY(1);
  transform-origin: center;
  transition: transform var(--acc-chevron) var(--acc-ease);
}
.t-acc-chevron path { vector-effect: non-scaling-stroke; }
.t-acc[data-open="true"] .t-acc-chevron {
  transform: scaleY(-1);
}

@media (prefers-reduced-motion: reduce) {
  .t-acc-panel, .t-acc-panel-inner, .t-acc-chevron {
    transition: none !important;
  }
}

/* snippet — 22-toast */
.t-toast {
  opacity: 0;
  transform: translateY(var(--toast-distance)) scale(var(--toast-scale));
  filter: blur(var(--toast-blur));
  will-change: transform, opacity, filter;
  transition:
    opacity var(--toast-close) var(--toast-ease),
    transform var(--toast-close) var(--toast-ease),
    filter var(--toast-close) var(--toast-ease);
}
.t-toast.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition:
    opacity var(--toast-open) var(--toast-ease),
    transform var(--toast-open) var(--toast-ease),
    filter var(--toast-open) var(--toast-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-toast { transition: none !important; }
}

/* ---------- Raccords : les transitions sur le balisage du site -------
   Tout ce qui suit adapte les snippets ci-dessus au site (tailles,
   couleurs, cohabitation avec le CSS du template). Les snippets
   eux-mêmes restent intacts. ------------------------------------------ */

/* Les seules variables du skill qui portent une couleur : la barre
   d'onglets. On les branche sur la palette FFxF — les deux barres du
   site sont déjà des segmentés à bouton actif marine. */
:root {
  --tabs-text-muted: var(--ffxf-muted);
  --tabs-text-active: var(--ffxf-navy-fg);
  --tabs-bar-bg: var(--ffxf-card);
  --tabs-pill-bg: var(--ffxf-navy);
}

/* 21 — FAQ. Bootstrap laisse .collapse:not(.show) en display:none, et
   une piste de grille retirée du flux n'anime rien. La piste devient
   donc permanente : c'est data-open qui ouvre et ferme. */
.rts-faq__accordion .accordion .accordion-collapse.t-acc-panel.collapse { display: grid; }
/* Le remplissage du corps doit vivre SOUS l'élément qui écrête : en
   border-box, un padding-top de 12 px empêche la piste 0fr de descendre
   sous 12 px et le panneau ne se referme jamais tout à fait. On le
   reporte donc sur le contenu, l'écart à l'ouverture est le même. */
.rts-faq__accordion .accordion .accordion-item .accordion-body.t-acc-panel-inner { padding-top: 0; }
.rts-faq__accordion .accordion .accordion-item .accordion-body.t-acc-panel-inner > :first-child { margin-top: 12px; }

/* Le chevron du site est un « + » qui pivote en « × » — on garde ce
   dessin (le scaleY du snippet vise un chevron « v ») et on le remet à
   l'horloge de l'accordéon. */
.rts-faq__accordion .accordion .accordion-item .accordion-header .accordion-button::after,
.rts-faq__accordion .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed)::after {
  transition: transform var(--acc-chevron) var(--acc-ease),
              border-color var(--acc-chevron) var(--acc-ease);
}

/* 16 — Onglets de périodicité et sélecteur de devise. Les deux barres
   ont déjà leur gabarit et leur typographie : du snippet on ne garde
   que la mécanique (empilement, z-index, pilule). Sa hauteur fixe de
   30 px, elle, doit céder. La géométrie de la pilule est mesurée sur le
   bouton actif par ffxf-ui.js, ce qui évite de redire ici les tailles
   du thème. */
.tab__button__item .t-tab,
.currency-buttons .t-tab { height: auto; }
.currency-buttons.t-tabs { gap: 0; border-radius: 5px; }
.t-tabs-pill { border-radius: 3px; }
/* Le bouton actif cesse de peindre son fond — la pilule le porte, sinon
   rien ne glisse. Sélecteurs scopés sur .t-tab : tant que le JS n'a pas
   branché la barre, l'état actif reste peint comme avant. */
.rts-pricing-plan.pricing-plan-2 .rts-pricing-plan__tab .tab__button__item button.t-tab.active,
.rts-pricing-plan .color-primary .tab__button__item button.t-tab.active { background: transparent; }
.currency-buttons button.t-tab[aria-pressed="true"] { background: transparent; }

/* 05 — Liste des versions d'OS. Le snippet ne coupe que le pointeur ;
   fermée, la liste doit aussi sortir de la lecture et du parcours au
   clavier. visibility n'est pas transitionnée : elle bascule une fois
   la fermeture jouée. */
.os-versions:not(.is-open):not(.is-closing) { visibility: hidden; }

/* 07 — Le tiroir mobile entre par la droite : on reprend l'horloge, le
   flou et l'asymétrie ouverture/fermeture du panel reveal sans changer
   son axe. Au passage, le « transition: all 600ms » du template s'en va. */
.side-bar {
  opacity: 0;
  filter: blur(var(--panel-blur));
  transition:
    right   var(--panel-close-dur) var(--panel-ease),
    opacity var(--panel-close-dur) var(--panel-ease),
    filter  var(--panel-close-dur) var(--panel-ease);
}
.side-bar.show {
  opacity: 1;
  filter: blur(0);
  transition:
    right   var(--panel-open-dur) var(--panel-ease),
    opacity var(--panel-open-dur) var(--panel-ease),
    filter  var(--panel-open-dur) var(--panel-ease);
}
@media (prefers-reduced-motion: reduce) { .side-bar { transition: none !important; } }

/* 18 — Les blocs d'ouverture comptent plus de deux lignes : la fiche
   prévoit d'étendre la série avec le même pas. */
.t-stagger-line--3 { transition-delay: calc(var(--stagger-stagger) * 2); }
.t-stagger-line--4 { transition-delay: calc(var(--stagger-stagger) * 3); }
.t-stagger-line--5 { transition-delay: calc(var(--stagger-stagger) * 4); }
/* La première ligne du hero est une pastille : elle garde sa mise en
   ligne, seul le mouvement vient du snippet. */
.hero__banner__content4 .badge.t-stagger-line { display: inline-flex; }

/* 11 — La pastille d'OS porte un menu : l'agrandir au survol flouterait
   la liste ouverte. On garde le lift, on neutralise l'échelle. */
.os-badges { --avatar-scale: 1; }

/* 09 + 10 — Bouton « copier » des blocs de code. Longueur réelle du
   tracé du ✓ (M4 12.5l5 5L20 6.5 = 22,63), arrondie au pixel supérieur
   comme la fiche le demande. */
.code-copy .t-success-check svg path { stroke-dasharray: 23; stroke-dashoffset: 23; }
.code-copy .t-icon-swap { line-height: 0; }
.code-copy .t-success-check { color: #86efac; }

/* 19 — Cartes d'article. Le basculement 3D remplace le lift au survol :
   deux transform sur le même élément ne cohabitent pas. L'ombre passe
   sur la carte qui tourne, sinon overflow: hidden la rogne. */
.t-tilt { display: block; height: 100%; }
.t-tilt-card { height: 100%; border-radius: 12px; box-shadow: var(--ffxf-shadow-sm); }
.t-tilt .post-card { height: 100%; box-shadow: none; }
.t-tilt .post-card:hover { transform: none; }