/* Jetons de la page d'accueil repris pour ce module (pages.css n'a pas les mêmes noms) */
.eb { --lime: #0c447c; --lime-ink: #fff; --geo: var(--serif); --ease-out: cubic-bezier(0.19, 1, 0.22, 1); }
/* ═══════════════════════════════════════════════════════════
   FILDARY — page « Fonctionnement » (ex-section « Fildary en bref » de l'accueil)
   Texte de référence repris de fildary.com (lisible par les moteurs) :
   titre qui s'éclaire au défilement, liste d'encarts <details> dont la
   ligne « en cours » suit la lecture, et une scène animée qui reste en
   vue à droite (collage piloté par content.js — le moteur translate la
   page, position:sticky n'y fonctionne pas). Sur mobile, chaque scène
   se joue dans son encart ouvert.
   ═══════════════════════════════════════════════════════════ */
.eb { position: relative; padding: 8px var(--gutter) clamp(56px, 9vh, 96px); overflow: hidden; }
.eb .fildary-cta { margin-top: clamp(48px, 8vh, 80px); }
.eb-in { max-width: 1240px; margin: 0 auto; }
.eb-head { max-width: 860px; margin-bottom: clamp(36px, 6vh, 64px); }
.eb-k, .eb-item .eb-ik { font: 600 11px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.eb-k { margin: 0 0 14px; }
.eb-title { font: italic 600 clamp(30px, 3.8vw, 52px)/1.1 var(--geo); letter-spacing: -.015em; color: var(--ink); margin: 0 0 20px; }
.eb-title .w { transition: opacity .25s linear; }
.eb-lead { font: 400 17px/1.65 var(--sans); color: rgba(var(--ink-rgb), .78); margin: 0; max-width: 760px; }

.eb-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 4vw, 72px); align-items: start; }
.eb-stage-col { position: relative; align-self: stretch; }
.eb-stage { position: absolute; left: 0; right: 0; top: 0; height: 470px; will-change: transform; }

.eb-list { border-top: 1px solid rgba(var(--ink-rgb), .12); }
.eb-item { border-bottom: 1px solid rgba(var(--ink-rgb), .12); transition: background .35s, opacity .45s; }
.eb-item[open] { background: var(--bone); }
.eb-item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 48px minmax(0, 1fr) 40px; align-items: center; gap: 16px; padding: 28px clamp(8px, 1.6vw, 24px); }
.eb-item summary::-webkit-details-marker { display: none; }
.eb-item summary:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }
.eb-n { font: 500 13px/1 var(--sans); color: rgba(var(--ink-rgb), .4); font-variant-numeric: tabular-nums; transition: color .3s; position: relative; }
.eb-sum { display: flex; flex-direction: column; gap: 6px; }
.eb-h { font: italic 600 clamp(20px, 2vw, 27px)/1.25 var(--geo); color: var(--ink); letter-spacing: -.01em; transition: color .3s; }
.eb-plus { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(var(--ink-rgb), .18); position: relative; transition: background .3s, border-color .3s, transform .45s var(--ease-out); }
.eb-plus::before, .eb-plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); transition: background .3s; }
.eb-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.eb-item summary:hover .eb-plus { border-color: var(--lime); }
.eb-item summary:hover .eb-h, .eb-item[open] .eb-n, .eb-item.is-cur .eb-n { color: var(--lime); }
.eb-item[open] .eb-plus { background: var(--lime); border-color: var(--lime); transform: rotate(135deg); }
.eb-item[open] .eb-plus::before, .eb-item[open] .eb-plus::after { background: var(--lime-ink); }
/* ligne en cours : les autres s'estompent (ordinateur, animations actives) */
@media (min-width: 901px) {
  .eb.eb-js.is-in .eb-item:not(.is-cur):not([open]) { opacity: .42; }
  .eb.eb-js.is-in .eb-item:not(.is-cur):not([open]):hover { opacity: .8; }
}
.eb-item.is-cur .eb-plus { border-color: var(--lime); }

.eb-body { overflow: hidden; }
.eb-body-in { padding: 0 clamp(8px, 1.6vw, 24px) 30px calc(48px + 16px + clamp(8px, 1.6vw, 24px)); }
.eb-body p, .eb-body li { font: 400 15.5px/1.7 var(--sans); color: rgba(var(--ink-rgb), .78); }
.eb-body p { margin: 0 0 12px; }
.eb-body ul { list-style: none; margin: 16px 0 12px; padding: 0; display: grid; gap: 12px; }
.eb-body li { padding-left: 18px; position: relative; }
.eb-body li::before { content: ''; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.eb-body li b { display: block; font: 600 14.5px/1.4 var(--sans); color: var(--ink); margin-bottom: 2px; }
.eb-body-in > * { transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
.eb-item.is-opening .eb-body-in > * { opacity: 0; transform: translateY(10px); }
.eb-body-in > *:nth-child(2) { transition-delay: .06s; } .eb-body-in > *:nth-child(3) { transition-delay: .12s; } .eb-body-in > *:nth-child(4) { transition-delay: .18s; } .eb-body-in > *:nth-child(5) { transition-delay: .24s; }

.eb-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 18px 0 0 !important; }
.eb-links a { font: 600 14px/1.4 var(--sans); color: var(--lime); text-decoration: none; border-bottom: 1px solid rgba(12, 68, 124, .25); padding-bottom: 1px; transition: border-color .2s; }
.eb-links a::after { content: ' →'; }
.eb-links a:hover { border-bottom-color: var(--lime); }
.eb-foot { margin-top: 36px !important; }
.eb + .footer { padding-top: 12vh; }

/* apparition en cascade (classe posée par content.js) */
.eb.eb-js .eb-lead, .eb.eb-js .eb-k, .eb.eb-js .eb-item, .eb.eb-js .eb-foot, .eb.eb-js .eb-stage-col { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform 1s var(--ease-out), background .35s; }
.eb.eb-js.is-in .eb-lead, .eb.eb-js.is-in .eb-k, .eb.eb-js.is-in .eb-item, .eb.eb-js.is-in .eb-foot, .eb.eb-js.is-in .eb-stage-col { opacity: 1; transform: none; }
.eb.eb-js.is-in .eb-lead { transition-delay: .1s; }
.eb.eb-js.is-in .eb-item:nth-child(1) { transition-delay: .2s, .2s, 0s; } .eb.eb-js.is-in .eb-item:nth-child(2) { transition-delay: .3s, .3s, 0s; }
.eb.eb-js.is-in .eb-item:nth-child(3) { transition-delay: .4s, .4s, 0s; } .eb.eb-js.is-in .eb-item:nth-child(4) { transition-delay: .5s, .5s, 0s; }
.eb.eb-js.is-in .eb-stage-col { transition-delay: .35s; }
.eb.eb-js.is-in.is-settled .eb-item { transition-delay: 0s !important; }

/* ── Scènes (maquettes stylisées, décoratives) ─────────────── */
.ebs { --a: #0c447c; --a2: #185fa5; --as: #e6f1fb; --g: #15803d; --gs: #dcfce7; --am: #92400e; --ams: #fef3c7; --bd: #e2e8f0; --i: #0f172a; --i3: #475569; --i4: #64748b;
  font-family: var(--sans); color: var(--i); }
.eb-stage .ebs { position: absolute; inset: 0; border-radius: 22px; padding: 34px; display: flex; flex-direction: column; justify-content: center; gap: 14px;
  background: radial-gradient(120% 90% at 85% 0%, #e6f1fb 0%, rgba(230,241,251,0) 60%), var(--bone); border: 1px solid rgba(var(--ink-rgb), .07);
  opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .5s var(--ease-out), transform .7s var(--ease-out); pointer-events: none; }
.eb-stage .ebs.on { opacity: 1; transform: none; }
.eb-stage .ebs { padding-top: 58px; }
.eb-stage .ebs::before { content: attr(data-n) '  ·  ' attr(data-l); position: absolute; left: 34px; top: 24px; font: 600 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(12, 68, 124, .55); white-space: pre; }
.eb-body .ebs { display: flex; flex-direction: column; gap: 12px; padding: 22px 16px; margin: 4px 0 20px; border-radius: 16px; background: radial-gradient(120% 90% at 85% 0%, #e6f1fb 0%, rgba(230,241,251,0) 60%), var(--white); border: 1px solid rgba(var(--ink-rgb), .07); }
.ebs b { font-weight: 600; }
.ebs small { display: block; font-size: 12px; color: var(--i4); line-height: 1.35; }
.ebs .card { background: #fff; border: 1px solid var(--bd); border-radius: 16px; padding: 18px; box-shadow: 0 8px 30px rgba(15, 23, 42, .08); position: relative; }
.ebs .pdf { flex: none; width: 34px; height: 40px; border-radius: 6px; background: #b91c1c; color: #fff; font: 700 10px/40px var(--sans); text-align: center; letter-spacing: .04em; }
.ebs .chip { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--bd); border-radius: 14px; padding: 12px 14px; box-shadow: 0 6px 20px rgba(15, 23, 42, .07); font-size: 13.5px; }
.ebs .bd { display: inline-flex; align-items: center; gap: 5px; font: 600 12px/16px var(--sans); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.ebs .bd::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ebs .bd.g { background: var(--gs); color: var(--g); } .ebs .bd.a { background: var(--ams); color: var(--am); } .ebs .bd.b { background: var(--as); color: var(--a); }
.ebs .tt { font: italic 700 18px/1.25 var(--geo); color: #042c53; }

/* animations : l'état de base est l'état final ; « .play » rejoue depuis le début */
@keyframes ebs-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes ebs-pop { from { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.08); } }
@keyframes ebs-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ebs-hold-out { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ebs-flash { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ebs-relance { 0% { opacity: 0; transform: scale(.6); } 12% { opacity: 1; transform: scale(1.08); } 20% { transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ebs-btn { 0% { opacity: 0; } 20%, 76% { opacity: 1; transform: none; } 86% { transform: scale(.94); } 92% { opacity: 1; } 100% { opacity: 0; transform: none; } }
@keyframes ebs-grow { from { transform: scaleX(0); } }
@keyframes ebs-draw { from { stroke-dashoffset: 420; } }
@keyframes ebs-tap { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: .5; } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes ebs-press { 50% { transform: scale(.94); } }
@keyframes ebs-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(146, 64, 14, 0); } 50% { box-shadow: 0 0 0 6px rgba(146, 64, 14, .15); } }
@keyframes ebs-slide { from { opacity: 0; transform: translateX(26px); } }
.ebs.play .an { animation: var(--k, ebs-up) var(--du, .6s) var(--ease-out) var(--d, 0s) both; }

/* 01 · signature */
.ebs-sign .lines i { display: block; height: 7px; border-radius: 99px; background: var(--bd); margin: 9px 0; transform-origin: left; }
.ebs-sign .lines i:nth-child(4) { width: 58%; }
.ebs-sign .read { font-size: 12px; font-weight: 600; color: var(--g); margin: 10px 0 12px; }
.ebs-sign .pad { border: 1.5px dashed #cbd5e1; border-radius: 14px; height: 92px; position: relative; }
.ebs-sign .pad small { position: absolute; left: 12px; top: 8px; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.ebs-sign .pad svg { position: absolute; left: 14px; right: 14px; bottom: 8px; width: calc(100% - 28px); height: 58px; }
.ebs-sign .pad path { fill: none; stroke: var(--a); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 420; }
.ebs-sign .card > .bd { position: absolute; right: 16px; top: 16px; }
.ebs.play.ebs-sign .pad path { animation: ebs-draw 1.1s cubic-bezier(.45,.05,.3,1) 1.1s both; }

/* 02 · parents */
.ebs-par .row { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid #f1f5f9; font-size: 14px; }
.ebs-par .av { width: 36px; height: 36px; border-radius: 50%; background: var(--as); color: var(--a); font: 700 12px/36px var(--sans); text-align: center; }
.ebs-par .st { position: relative; display: grid; justify-items: end; }
.ebs-par .st > * { grid-area: 1 / 1; }
.ebs.play.ebs-par .r1 .s0 { animation: ebs-hold-out 1.2s .2s both; }
.ebs.play.ebs-par .r1 .s1 { animation: ebs-pop .45s 1.3s both; }
.ebs.play.ebs-par .r2 .s0 { animation: ebs-hold-out 1.7s .2s both; }
.ebs.play.ebs-par .r2 .s1 { animation: ebs-relance 1.3s 1.8s both, ebs-pulse .9s 2s 1; }
.ebs.play.ebs-par .r2 .s2 { animation: ebs-pop .45s 3.05s both; }
.ebs-par .r1 .s0, .ebs-par .r2 .s0, .ebs-par .r2 .s1 { opacity: 0; }
.ebs-par .merge .bd { margin-left: auto; }

/* 03 · action à confirmer */
.ebs-act .k { font: 700 11px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--a); margin-bottom: 10px; }
.ebs-act .task b { display: block; font-size: 16px; line-height: 1.35; margin: 10px 0 2px; }
.ebs-act .btn { position: relative; display: grid; margin-top: 16px; }
.ebs-act .btn > em { grid-area: 1 / 1; font: 600 14px/1 var(--sans); font-style: normal; text-align: center; padding: 14px; border-radius: 14px; }
.ebs-act .b0 { background: linear-gradient(135deg, #1e5ba8, #0c447c 60%, #042c53); color: #fff; box-shadow: 0 2px 8px rgba(12,68,124,.3); opacity: 0; }
.ebs-act .b1 { background: var(--gs); color: var(--g); }
.ebs-act .tap { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #fff; opacity: 0; pointer-events: none; }
.ebs.play.ebs-act .b0 { animation: ebs-btn 1.9s .3s both; }
.ebs.play.ebs-act .b1 { animation: ebs-pop .45s 2.15s both; }
.ebs.play.ebs-act .tap { animation: ebs-tap .6s 1.85s both; }

/* 04 · sécurité */
.ebs-sec .hd { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--i3); margin-bottom: 10px; }
.ebs-sec .hd svg { width: 16px; height: 16px; stroke: var(--a); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ebs-sec .rw { display: grid; font: 500 13px/1 var(--sans); padding: 9px 12px; background: #f8fafc; border-radius: 9px; margin-top: 6px; }
.ebs-sec .rw > span { grid-area: 1 / 1; }
.ebs-sec .clear { opacity: 0; }
.ebs-sec .enc { font-family: ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .06em; color: var(--a); }
.ebs.play.ebs-sec .clear { animation: ebs-flash var(--d, 1.2s) .2s both; }
.ebs.play.ebs-sec .enc { animation: ebs-in .35s calc(var(--d, 1.2s) + .2s) both; }
.ebs-sec .log div { display: flex; gap: 10px; font-size: 12.5px; color: var(--i3); padding: 5px 0; }
.ebs-sec .log time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--i); }

/* réduit : tout est affiché dans son état final, sans animation */
@media (prefers-reduced-motion: reduce) {
  .eb.eb-js .eb-lead, .eb.eb-js .eb-k, .eb.eb-js .eb-item, .eb.eb-js .eb-foot, .eb.eb-js .eb-stage-col, .eb-body-in > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ebs *, .ebs { animation: none !important; }
}

@media (max-width: 900px) {
  .eb-cols { grid-template-columns: minmax(0, 1fr); }
  .eb-stage-col { display: none; }
}
@media (max-width: 760px) {
  .eb-lead { font-size: 16px; }
  .eb-item summary { grid-template-columns: 30px minmax(0, 1fr) 34px; gap: 10px; padding: 22px 12px; }
  .eb-plus { width: 34px; height: 34px; }
  .eb-body-in { padding: 0 14px 26px; }
  .eb-links { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* en-tête de page aligné sur la largeur du module */
body .hero-in.eb-hero { max-width: 1240px; }
.eb-hero > * { max-width: 860px; }
.eb-hero h1 { font-weight: 600; }
/* fond de page « bone » : encart ouvert et scène passent en blanc pour se détacher */
.eb-item[open] { background: var(--white); }
.eb-stage .ebs { background: radial-gradient(120% 90% at 85% 0%, #e6f1fb 0%, rgba(230,241,251,0) 60%), var(--white); box-shadow: 0 24px 60px -30px rgba(4, 44, 83, .25); }
.eb-body .ebs { background: radial-gradient(120% 90% at 85% 0%, #e6f1fb 0%, rgba(230,241,251,0) 60%), var(--bone); }