/* =====================================================================
   Finesty — « Ce qui est inclus » + « Tarification » (inclus-v2.css + inclus-v2.js).
   HTML posé par source-live/appliquer-inclus-v2.py. Remplace inclus.css / inclus.js sur la page Création d'entreprise.

   Parti pris (16.09.2026) — VITRINE SOMBRE. La section entière est en bleu nuit et chaque bloc devient un
   panneau lumineux posé dessus ; l'or est le seul accent. Pour le parcours SA / Sàrl, la photo n'est plus
   un décor derrière la section : elle EST le fond, épinglée plein écran, et change à chaque prestation.
   Sur fond clair, ces mêmes blocs étaient une succession de cartes blanches à coins ronds — le fond sombre
   leur rend une profondeur que l'ombre portée seule ne donnait pas.

   Lecture : une couleur par parcours, tenue d'un bout à l'autre.
     · SA · Sàrl   → bichromie bleue (cartes photo empilées)
     · Indépendant → bichromie or (cadre asymétrique, puis la bande de prix or)

   Rien de décoratif qui ne porte pas de sens : pas de pastilles, pas de compteurs géants, pas de badges
   répétés, pas de filet devant les surtitres. La hiérarchie tient dans la typographie et dans la photo.

   0. Jetons et fond animé          4. Parcours indépendant (cadre asymétrique)
   1. Ossature et surtitres         5. Tarification SA et Sàrl (ticket + modulations)
   2. Cartes empilées (deck)        6. Tarification indépendant
   3. Photo en bichromie            7. Mobile · 8. Mouvement réduit
   ===================================================================== */

#fy-inclus.fy-inc2 {
  --n-ground: #12272E;                   /* bleu nuit de repli, sous le rendu de ct-bg-soie.js */
  --n-ink: #0C1D24; --n-navy: #16313A; --n-blue: #2F5765;
  --n-gold: #DAAE51; --n-gold-hi: #EFCB7E; --n-gold-ink: #8C6A1E;
  --n-text: #FFFFFF; --n-muted: rgba(255, 255, 255, .74); --n-faint: rgba(255, 255, 255, .58);
  --n-line: rgba(255, 255, 255, .14); --n-panel: rgba(255, 255, 255, .045);
  --n-ease: cubic-bezier(.22, 1, .36, 1);
  --n-wipe: cubic-bezier(.66, 0, .2, 1);
  --n-stick: 92px;                       /* hauteur de l'en-tête collant + respiration */
  --n-peek: 18px;                        /* décalage d'empilement d'une carte à l'autre */
  --n-radius: 26px;
  position: relative; z-index: 0;
  background: var(--n-ground);
  color: var(--n-text);
  overflow: clip;
}
@media (max-width: 1024px) { #fy-inclus.fy-inc2 { --n-stick: 76px; } }

.fy-inc2 > .fy-container { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------
   1. Ossature : tout est ferré à gauche, en-tête de section comprise
   --------------------------------------------------------------------- */
/* .fy-section__head est centré et auto-margé par défaut : on le ferre à gauche, comme tout le reste du bloc */
.fy-inc2 .fy-section__head { text-align: left; max-width: 74ch; margin-left: 0; margin-right: 0; }
.fy-inc2 .fy-section__head .fy-title { color: var(--n-text); }
.fy-inc2 .fy-section__head .fy-title .fy-gold { color: var(--n-gold); }
.fy-inc2 .fy-section__head .fy-bar { margin-left: 0; margin-right: auto; }
.fy-inc2 .fy-section__head .fy-lead { margin-left: 0; margin-right: 0; max-width: 64ch; color: var(--n-muted); }

.fy-inc2 .inc2-block { margin-top: clamp(52px, 6.5vw, 96px); }
.fy-inc2 .inc2-block:first-of-type { margin-top: clamp(30px, 3.4vw, 48px); }

.fy-inc2 .inc2-head { margin-bottom: clamp(24px, 2.6vw, 36px); max-width: 72ch; }

/* surtitre : rien qu'un mot, en petites capitales espacées — aucun filet devant */
.fy-inc2 .inc2-over {
  margin: 0; font: 700 13px/1 "Kanit", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--n-gold-hi);
}
.fy-inc2 .inc2-over--ink { color: rgba(31, 42, 46, .74); }
/* surtitre de chapitre : seul marqueur avant la scène (le titre de section porte déjà le propos) */
.fy-inc2 .inc2-over--chap { margin-bottom: clamp(26px, 3.2vw, 44px); }

.fy-inc2 .inc2-head__title { margin: 16px 0 0; font: 700 clamp(26px, 2.6vw, 36px)/1.14 "Kanit", sans-serif; letter-spacing: -.018em; color: var(--n-text); text-wrap: balance; }
.fy-inc2 .inc2-head__title em { font-style: normal; color: var(--n-gold); }
.fy-inc2 .inc2-head__text { margin: 12px 0 0; max-width: 60ch; font-size: 16.5px; line-height: 1.65; color: var(--n-muted); text-wrap: pretty; }

/* ---------------------------------------------------------------------
   2. Le parcours SA / Sàrl : une scène photo épinglée, le texte défile par-dessus.

   Plutôt qu'un décor derrière la section, la photo EST le fond : la scène occupe tout l'écran et
   change d'image à chaque prestation (fondu croisé + lent resserrement de cadre). Le lecteur ne
   feuillette plus des cartes posées sur un fond, il traverse un lieu qui change.
   --------------------------------------------------------------------- */
.fy-inc2 .inc2-deck { position: relative; }
/* La scène est un calque absolu borné par le parcours, et c'est son contenu qui est collant.
   Version précédente : le calque lui-même était collant avec une marge basse négative — sa surface
   peinte débordait alors sous le parcours et mordait sur le bloc suivant. Ici rien ne peut sortir du
   deck, et le calque reste bord à bord (100vw) sans transformation, ce qui laisse sticky fonctionner. */
.fy-inc2 .inc2-deck__stage { position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; z-index: 0; }
.fy-inc2 .inc2-deck__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--n-ink); }
.fy-inc2 .inc2-shot { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--n-ease); }
.fy-inc2 .inc2-shot[data-on] { opacity: 1; }
.fy-inc2 .inc2-shot img {
  position: absolute; inset: -4% 0; width: 100%; height: 108%; object-fit: cover; object-position: 60% 45%;
  max-width: none; filter: grayscale(1) brightness(1.12) contrast(.94); transform: scale(1.06); will-change: transform;
}
/* Voile : deux rôles superposés.
   1. Raccord — en haut et en bas, le plan se fond exactement dans le bleu nuit de la section (rgb(18,39,46)
      = --n-ground). Sans lui, la photo démarrait sur une ligne franche juste sous le surtitre : le plan
      semblait collé à la section au lieu d'en faire partie. Le bandeau sombre qui en résulte porte aussi
      le texte quand il passe sous l'en-tête fixe.
   2. Lisibilité — la colonne de gauche est portée, le reste du plan respire. */
.fy-inc2 .inc2-deck__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgb(18, 39, 46) 0%, rgba(18, 39, 46, .72) 5%, rgba(18, 39, 46, 0) 17%,
                            rgba(18, 39, 46, 0) 83%, rgba(18, 39, 46, .72) 95%, rgb(18, 39, 46) 100%),
    linear-gradient(96deg, rgba(4, 13, 18, .94) 0%, rgba(5, 16, 21, .88) 30%, rgba(7, 20, 26, .5) 62%, rgba(8, 22, 28, .28) 100%),
    url("/wp-content/finesty/hero/grain.png") repeat;
  background-size: auto, auto, 140px 140px;
}
/* index du parcours : on sait toujours où l'on en est */
.fy-inc2 .inc2-deck__rail {
  position: absolute; z-index: 2; right: clamp(20px, 4vw, 64px); top: 50%; translate: 0 -50%;
  list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; text-align: right;
}
.fy-inc2 .inc2-deck__rail li { font: 700 12px/1 "Kanit", sans-serif; letter-spacing: .14em; color: rgba(255, 255, 255, .34); font-variant-numeric: tabular-nums; transition: color .5s ease; }
.fy-inc2 .inc2-deck__rail li span { position: relative; display: inline-block; padding-right: 26px; }
.fy-inc2 .inc2-deck__rail li span::after { content: ""; position: absolute; right: 0; top: 50%; width: 14px; height: 1px; background: currentColor; translate: 0 -50%; transition: width .5s var(--n-ease); }
.fy-inc2 .inc2-deck__rail li[data-on] { color: var(--n-gold); }
.fy-inc2 .inc2-deck__rail li[data-on] span::after { width: 22px; }

.fy-inc2 .inc2-deck__flow { position: relative; z-index: 1; }
.fy-inc2 .inc2-card { display: flex; align-items: center; min-height: 68svh; }
.fy-inc2 .inc2-card__panel { width: min(52%, 600px); padding: clamp(24px, 3vw, 40px) 0; }
.fy-inc2 .inc2-card__kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.fy-inc2 .inc2-card__kicker span { font: 700 14px/1 "Kanit", sans-serif; letter-spacing: .12em; color: var(--n-gold); font-variant-numeric: tabular-nums; }
.fy-inc2 .inc2-card__ico { --fy-ico-size: 30px; --fy-ico-glyph: 26px; --fy-ico-bg: transparent; --fy-ico-color: var(--n-gold); }
.fy-inc2 .inc2-card__title { margin: 0 0 14px; font: 700 clamp(28px, 3.4vw, 50px)/1.1 "Kanit", sans-serif; letter-spacing: -.022em; color: #FFFFFF; text-wrap: balance; }
.fy-inc2 .inc2-card__text { margin: 0; font-size: clamp(16.5px, 1.3vw, 18.5px); line-height: 1.7; color: rgba(255, 255, 255, .84); text-wrap: pretty; }

/* Le texte entre ET sort avec son plan : il est posé sur la classe .is-live, que le même déclencheur
   que la photo bascule (inclus-v2.js). Une apparition unique au premier passage aurait laissé les sept
   textes affichés d'un bout à l'autre du parcours — ici chaque prestation a son entrée. */
.fy-inc2.is-js .inc2-card__panel > * {
  opacity: 0; transform: translateY(30px); filter: blur(8px);
  transition: opacity .7s var(--n-ease), transform .8s var(--n-ease), filter .7s var(--n-ease);
}
.fy-inc2.is-js .inc2-card.is-live .inc2-card__panel > * { opacity: 1; transform: none; filter: blur(0); }
.fy-inc2.is-js .inc2-card.is-live .inc2-card__title { transition-delay: .08s; }
.fy-inc2.is-js .inc2-card.is-live .inc2-card__text { transition-delay: .16s; }

/* ---------------------------------------------------------------------
   3. Photo en bichromie : mise en gris puis re-teintée (mix-blend-mode: color) — la luminosité reste
      celle de la photo, contrairement à un voile translucide (laiteux) ou à un fondu « produit » (qui
      écrase les clairs). Par-dessus, un dégradé en fusion normale porte le texte.
   --------------------------------------------------------------------- */
.fy-inc2 .inc2-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--n-navy); }
.fy-inc2 .inc2-media img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; object-position: 60% 45%; max-width: none; filter: grayscale(1) brightness(1.12) contrast(.94); will-change: transform; }
.fy-inc2 .inc2-media__veil { position: absolute; inset: 0; mix-blend-mode: color; background: linear-gradient(200deg, #3E7185 0%, #24505E 100%); }

/* ---------------------------------------------------------------------
   4. Parcours indépendant : cadre asymétrique — la photo tient toute la hauteur à gauche, le texte
      occupe la droite. Composition volontairement différente des cartes (qui sont pleine largeur) :
      on change de parcours, la mise en page le dit avant le texte.
   --------------------------------------------------------------------- */
.fy-inc2 .inc2-indep {
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
  min-height: clamp(540px, 58vw, 660px); border-radius: var(--n-radius); overflow: hidden;
  background: linear-gradient(200deg, #16323B 0%, #10262E 60%, #0B1D24 100%);
  box-shadow: 0 36px 74px -42px rgba(2, 10, 14, .9), inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.fy-inc2 .inc2-indep__figure { position: relative; overflow: hidden; }
/* Portrait : le cadrage par défaut (60 % 45 %, réglé pour des plans larges) coupait mal ce format vertical,
   et la bichromie claire en faisait un aplat pâle à côté du panneau sombre. Plan resserré, bleu plus dense. */
.fy-inc2 .inc2-indep__figure .inc2-media img { object-position: 52% 38%; filter: grayscale(1) brightness(.92) contrast(1.06); }
.fy-inc2 .inc2-indep__figure .inc2-media__veil { background: linear-gradient(190deg, #2E5A6B 0%, #1B4150 55%, #12303C 100%); }
/* bord franc entre la photo et le panneau : aucun dégradé, seulement le grain photo */
.fy-inc2 .inc2-indep__figure::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .34;
  background: url("/wp-content/finesty/hero/grain.png") repeat; background-size: 140px 140px;
}
/* apparition : la photo se dévoile du bas vers le haut, un peu après le panneau */
.fy-inc2.is-js .inc2-indep__figure { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--n-wipe) .15s; }
.fy-inc2.is-js .inc2-indep.is-on .inc2-indep__figure { clip-path: inset(0 0 0 0); }
.fy-inc2 .inc2-indep__in { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 3.6vw, 56px) clamp(32px, 3.6vw, 56px) clamp(32px, 3.6vw, 56px) clamp(8px, 1vw, 18px); }
.fy-inc2 .inc2-indep__title { margin: 16px 0 0; font: 700 clamp(25px, 2.5vw, 34px)/1.14 "Kanit", sans-serif; letter-spacing: -.018em; color: var(--n-text); text-wrap: balance; }
.fy-inc2 .inc2-indep__lead { margin: 12px 0 0; max-width: 54ch; font-size: 16.5px; line-height: 1.65; color: var(--n-muted); text-wrap: pretty; }

/* les trois prestations : une liste verticale numérotée, séparée de filets — le texte long de l'AVS
   respire, ce que trois colonnes serrées ne permettaient pas */
.fy-inc2 .inc2-indep__grid { list-style: none; margin: clamp(26px, 3vw, 38px) 0 0; padding: 0; }
.fy-inc2 .inc2-indep__item { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 0 16px; padding: 22px 0; }
.fy-inc2 .inc2-indep__item::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(255, 255, 255, .16); transform-origin: left center; }
.fy-inc2.is-js .inc2-indep__item::before { transform: scaleX(0); transition: transform .9s var(--n-ease); }
.fy-inc2.is-js .inc2-indep.is-on .inc2-indep__item::before { transform: scaleX(1); }
.fy-inc2.is-js .inc2-indep.is-on .inc2-indep__item:nth-child(2)::before { transition-delay: .12s; }
.fy-inc2.is-js .inc2-indep.is-on .inc2-indep__item:nth-child(3)::before { transition-delay: .24s; }
.fy-inc2 .inc2-indep__item:last-child { padding-bottom: 0; }
.fy-inc2 .inc2-indep__no { font: 700 13px/1 "Kanit", sans-serif; letter-spacing: .12em; color: rgba(218, 174, 81, .75); font-variant-numeric: tabular-nums; }
.fy-inc2 .inc2-indep__ico { --fy-ico-size: 26px; --fy-ico-glyph: 24px; --fy-ico-bg: transparent; --fy-ico-color: var(--n-gold); }
.fy-inc2 .inc2-indep__name { margin: 0 0 6px; font: 700 18.5px/1.3 "Kanit", sans-serif; color: var(--n-text); }
.fy-inc2 .inc2-indep__text { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--n-faint); }
.fy-inc2 .inc2-indep__note {
  display: flex; align-items: flex-start; gap: 11px; margin: clamp(22px, 2.4vw, 30px) 0 0; padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .13); font-size: 14.5px; line-height: 1.6; color: var(--n-faint);
}
.fy-inc2 .inc2-indep__note .fy-ico { --fy-ico-size: 20px; --fy-ico-glyph: 18px; --fy-ico-bg: transparent; --fy-ico-color: var(--n-gold); flex: 0 0 auto; margin-top: 1px; }

/* ---------------------------------------------------------------------
   5. Tarification SA et Sàrl — un relevé, pas des cartes.

   Ce qui faisait « gabarit » ici : des panneaux à coins ronds emboîtés les uns dans les autres, des
   numéros en pastille, des jauges qui n'encodaient rien (la barre à côté d'un prix ne dit rien que le
   prix ne dise déjà) et des « + » en carré. Tout est remplacé par une seule primitive : la ligne de
   registre — un intitulé à gauche, un montant à droite en chiffres tabulaires, un filet entre les deux.
   Elle se replie toute seule à n'importe quelle largeur : pas de colonnes fixes, pas de grille à casser.
   --------------------------------------------------------------------- */
.fy-inc2 .inc2-price__grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }

/* le montant de base : seul élément qui brille, sans cadre autour */
.fy-inc2 .inc2-ticket { position: sticky; top: var(--n-stick); }
.fy-inc2 .inc2-ticket__kicker { margin: 0; font: 500 13.5px/1.5 "Roboto", sans-serif; letter-spacing: .04em; color: var(--n-faint); }
.fy-inc2 .inc2-ticket__price { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 0; }
.fy-inc2 .inc2-ticket__cur { font: 600 18px/1 "Kanit", sans-serif; color: var(--n-faint); }
.fy-inc2 .inc2-ticket__big { font: 700 clamp(52px, 6vw, 78px)/.92 "Kanit", sans-serif; letter-spacing: -.04em; color: var(--n-gold); font-variant-numeric: tabular-nums; }
.fy-inc2 .inc2-ticket__ht { font: 600 16px/1 "Kanit", sans-serif; color: var(--n-faint); }
.fy-inc2 .inc2-ticket__fixed { margin: clamp(22px, 2.4vw, 30px) 0 0; font-size: 14.5px; line-height: 1.65; color: var(--n-faint); }
.fy-inc2 .inc2-ticket__fixed b { color: var(--n-text); font-weight: 700; }
/* buttons.css remet la marge des boutons à zéro avec une spécificité gonflée par un identifiant factice
   (.fy-b:is(#fyb, .fy-b)) : on reprend le même procédé pour que l'écart avec la note tienne. */
.fy-inc2 .inc2-ticket .fy-btn:is(#fyb, .fy-btn) { margin-top: clamp(30px, 3.4vw, 44px); }

/* ligne de registre : la brique de toute la tarification */
.fy-inc2 .inc2-ledger { list-style: none; margin: clamp(20px, 2.2vw, 28px) 0 0; padding: 0; }
.fy-inc2 .inc2-ledger li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap;
  padding: 14px 0; border-top: 1px solid var(--n-line);
}
.fy-inc2 .inc2-ledger li > span { flex: 1 1 14ch; min-width: 0; font-size: 15.5px; line-height: 1.5; color: var(--n-muted); }
.fy-inc2 .inc2-ledger li > b { flex: 0 0 auto; font: 700 15.5px/1.4 "Kanit", sans-serif; color: var(--n-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fy-inc2 .inc2-ledger li.is-total { border-top: 2px solid rgba(218, 174, 81, .75); margin-top: 2px; }
.fy-inc2 .inc2-ledger li.is-total > span { color: var(--n-text); font-weight: 500; }
.fy-inc2 .inc2-ledger li.is-total > b { color: var(--n-gold); font-size: 17px; }

/* barème, options, frais : mêmes lignes, en plus grand et avec l'intitulé en Kanit */
.fy-inc2 .inc2-ledger--wide li { padding: 17px 0; }
.fy-inc2 .inc2-ledger--wide li > span { font: 600 16.5px/1.45 "Kanit", sans-serif; color: var(--n-text); }
.fy-inc2 .inc2-ledger--wide li > b { font-size: 16.5px; }
.fy-inc2 .inc2-ledger--wide li.is-base > b { color: var(--n-gold); }
.fy-inc2 .inc2-ledger--wide li.is-note > span, .fy-inc2 .inc2-ledger--wide li.is-note > b { font: 400 15px/1.55 "Roboto", sans-serif; color: var(--n-faint); white-space: normal; }
/* frais non inclus : la précision suit l'intitulé, en clair, sans changer de ligne de registre */
.fy-inc2 .inc2-ledger--out li > span i { display: block; margin-top: 4px; font: 400 14.5px/1.6 "Roboto", sans-serif; font-style: normal; color: var(--n-faint); }
.fy-inc2 .inc2-ledger--out li > b { color: var(--n-gold-hi); }

/* Apparition des relevés : chaque ligne monte à son tour et son filet se trace de gauche à droite.
   L'ancienne version ne faisait monter que le bloc entier — d'où l'impression de « trop léger ». */
.fy-inc2 .inc2-ledger li { position: relative; border-top-color: transparent; }
.fy-inc2 .inc2-ledger li::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--n-line); transform-origin: left center; }
.fy-inc2 .inc2-ledger li.is-total::before { height: 2px; background: rgba(218, 174, 81, .75); }
.fy-inc2.is-js :is(.inc2-ticket, .inc2-mod) .inc2-ledger li { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--n-ease), transform .7s var(--n-ease); }
.fy-inc2.is-js :is(.inc2-ticket, .inc2-mod) .inc2-ledger li::before { transform: scaleX(0); transition: transform .8s var(--n-ease); }
.fy-inc2.is-js :is(.inc2-ticket.is-in, .inc2-mod.is-in) .inc2-ledger li { opacity: 1; transform: none; }
.fy-inc2.is-js :is(.inc2-ticket.is-in, .inc2-mod.is-in) .inc2-ledger li::before { transform: scaleX(1); }
.fy-inc2.is-js :is(.inc2-ticket.is-in, .inc2-mod.is-in) .inc2-ledger li:nth-child(2) { transition-delay: .09s; }
.fy-inc2.is-js :is(.inc2-ticket.is-in, .inc2-mod.is-in) .inc2-ledger li:nth-child(2)::before { transition-delay: .09s; }
.fy-inc2.is-js :is(.inc2-ticket.is-in, .inc2-mod.is-in) .inc2-ledger li:nth-child(3) { transition-delay: .18s; }
.fy-inc2.is-js :is(.inc2-ticket.is-in, .inc2-mod.is-in) .inc2-ledger li:nth-child(3)::before { transition-delay: .18s; }
.fy-inc2.is-js :is(.inc2-ticket.is-in, .inc2-mod.is-in) .inc2-ledger li:nth-child(4) { transition-delay: .27s; }
.fy-inc2.is-js :is(.inc2-ticket.is-in, .inc2-mod.is-in) .inc2-ledger li:nth-child(4)::before { transition-delay: .27s; }
.fy-inc2.is-js :is(.inc2-ticket.is-in, .inc2-mod.is-in) .inc2-ledger li:nth-child(5) { transition-delay: .36s; }
.fy-inc2.is-js :is(.inc2-ticket.is-in, .inc2-mod.is-in) .inc2-ledger li:nth-child(5)::before { transition-delay: .36s; }
/* le titre, le montant et la note suivent le même mouvement, décalés */
.fy-inc2.is-js :is(.inc2-ticket, .inc2-mod) :is(.inc2-ticket__kicker, .inc2-ticket__price, .inc2-ticket__fixed, .fy-btn, .inc2-mod__title, .inc2-mod__foot) {
  opacity: 0; transform: translateY(20px); transition: opacity .7s var(--n-ease), transform .8s var(--n-ease);
}
.fy-inc2.is-js :is(.inc2-ticket.is-in, .inc2-mod.is-in) :is(.inc2-ticket__kicker, .inc2-ticket__price, .inc2-ticket__fixed, .fy-btn, .inc2-mod__title, .inc2-mod__foot) { opacity: 1; transform: none; }
.fy-inc2.is-js .inc2-ticket.is-in .inc2-ticket__price { transition-delay: .08s; }
.fy-inc2.is-js .inc2-ticket.is-in .inc2-ticket__fixed { transition-delay: .42s; }
.fy-inc2.is-js .inc2-ticket.is-in .fy-btn { transition-delay: .5s; }
.fy-inc2.is-js .inc2-mod.is-in .inc2-mod__foot { transition-delay: .45s; }

.fy-inc2 .inc2-mods { display: grid; gap: clamp(34px, 4.4vw, 60px); }
.fy-inc2 .inc2-mod__title { margin: 0; font: 700 clamp(19px, 1.7vw, 23px)/1.3 "Kanit", sans-serif; letter-spacing: -.01em; color: var(--n-text); }
.fy-inc2 .inc2-mod__foot { margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: var(--n-faint); }

/* ---------------------------------------------------------------------
   6. Tarification indépendant : la seule surface chaude de la vitrine — elle tranche sur le bleu nuit
   --------------------------------------------------------------------- */
.fy-inc2 .inc2-indep-price {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: clamp(22px, 3vw, 48px); padding: clamp(26px, 3vw, 40px) clamp(26px, 3.2vw, 46px);
  border-radius: clamp(24px, 2.6vw, 32px);
  background: #D9AC4E;                   /* aplat or : ni dégradé ni reflet */
  box-shadow: 0 34px 66px -44px rgba(2, 10, 14, .9);
}
.fy-inc2 .inc2-indep-price__title { margin: 14px 0 0; font: 700 clamp(23px, 2.2vw, 30px)/1.18 "Kanit", sans-serif; letter-spacing: -.015em; color: #1F2A2E; }
.fy-inc2 .inc2-indep-price__text { margin: 10px 0 0; max-width: 58ch; font-size: 15.5px; line-height: 1.6; color: rgba(31, 42, 46, .82); }
.fy-inc2 .inc2-indep-price__side { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; text-align: right; }
.fy-inc2 .inc2-indep-price__label { font: 500 12.5px/1 "Roboto", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: rgba(31, 42, 46, .72); }
.fy-inc2 .inc2-indep-price__amount { font: 700 clamp(34px, 3.6vw, 46px)/1 "Kanit", sans-serif; letter-spacing: -.03em; color: #16313A; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* apparition des blocs de tarif (inclus-v2.js) : montée courte, une seule fois */
.fy-inc2 .inc2-fx { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--n-ease), transform .8s var(--n-ease); }
.fy-inc2 .inc2-fx.is-in { opacity: 1; transform: none; }
/* sans JS : rien ne viendra poser .is-in — barres et jauges sont montrées remplies */
.fy-inc2:not(.is-js) .inc2-fx { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------
   7. Tablette et mobile : l'empilement est abandonné, les cadres reprennent le fil de lecture
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .fy-inc2 .inc2-price__grid { grid-template-columns: minmax(0, 1fr); }
  .fy-inc2 .inc2-ticket { position: relative; top: auto; }
  .fy-inc2 .inc2-indep { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .fy-inc2 .inc2-indep__figure { height: clamp(200px, 30vw, 280px); }
  .fy-inc2 .inc2-indep__figure::after { background: linear-gradient(180deg, rgba(15, 14, 9, .2) 0%, rgba(15, 14, 9, .1) 45%, rgba(15, 14, 9, .9) 100%), url("/wp-content/finesty/hero/grain.png") repeat; background-size: auto, 140px 140px; }
  .fy-inc2 .inc2-indep__in { padding: clamp(26px, 3.4vw, 44px); }
}
@media (max-width: 860px) {
  /* plus d'empilement : chaque carte reprend sa place dans le fil, le texte occupe toute la largeur
     et le dégradé bascule du flanc gauche au pied pour rester lisible sur un format vertical */
  .fy-inc2 .inc2-card { position: relative; top: auto; }
  /* le voile bascule en vertical : sur un écran étroit le texte occupe toute la largeur */
  .fy-inc2 .inc2-card__panel { width: 100%; }
  .fy-inc2 .inc2-deck__veil { background: linear-gradient(180deg, rgba(4, 13, 18, .62) 0%, rgba(5, 16, 21, .5) 38%, rgba(4, 13, 18, .92) 100%), url("/wp-content/finesty/hero/grain.png") repeat; background-size: auto, 140px 140px; }
  .fy-inc2 .inc2-deck__rail { display: none; }
  .fy-inc2 .inc2-shot img { object-position: 50% 38%; }
}
@media (max-width: 767px) {
  /* sept écrans pleins, c'est beaucoup au pouce : on resserre chaque plan sans renoncer à l'épinglage */
  .fy-inc2 .inc2-card { min-height: 58svh; }
  .fy-inc2 .inc2-card__title { font-size: clamp(26px, 7vw, 34px); }
  .fy-inc2 .inc2-indep__item { grid-template-columns: auto minmax(0, 1fr); }
  .fy-inc2 .inc2-indep__no { grid-column: 1 / -1; margin-bottom: 4px; }
  .fy-inc2 .inc2-indep-price { grid-template-columns: minmax(0, 1fr); }
  .fy-inc2 .inc2-indep-price__side { align-items: flex-start; text-align: left; }
  .fy-inc2 .inc2-out li { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------
   8. Mouvement réduit : tout est posé dans son état final, aucune animation
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fy-inc2 .inc2-deck__stage { position: relative; left: auto; width: 100%; }
  .fy-inc2 .inc2-deck__pin { position: relative; height: auto; min-height: 60svh; }
  .fy-inc2 .inc2-card { min-height: 0; padding: 26px 0; }
  .fy-inc2 .inc2-fx { opacity: 1 !important; transform: none !important; transition: none !important; }

  .fy-inc2 .inc2-media img { transform: none !important; }
  .fy-inc2 .inc2-ledger li, .fy-inc2 .inc2-ledger li::before { opacity: 1 !important; transform: none !important; transition: none !important; }
}