/* ------------------------------------------------------------------
   fig-entonnoir.css — L'ADOPTION DU CANAL, EN VRAIES PROPORTIONS.

   Un disque de 1 500, coupe aux valeurs relevees : 599 sans acces, 667
   qui l'ont sans l'ouvrir, 234 qui s'y connectent. Cette derniere part
   decroche et se pose sur sa propre ombre : c'est elle qui commande
   toute la conception.

   La palette est celle du folio, pas celle de la banque : une rampe de
   cuivre, du plus sourd au plus vif. Le vert de BNP n'a rien a faire
   dans une figure d'analyse.
-------------------------------------------------------------------*/

:root{
  --fe-pate:#E7E0CE;
  --fe-trait:rgba(10,18,32,.10);
  --fe-sur-cle:#FFFFFF;
}
html:not(.theme-light){
  --fe-pate:#1B2740;
  --fe-trait:rgba(242,235,219,.10);
}
:root{
  --fe-mi:color-mix(in srgb, var(--hl) 30%, var(--fe-pate));
  --fe-cle:var(--hl);
}

.fe-roue{ display:block; width:100%; height:auto; overflow:visible; }
.fe-roue path{ stroke:var(--fe-trait); stroke-width:1; }
.fe-roue .fe-pate{ fill:var(--fe-pate); }
.fe-roue .fe-mi{ fill:var(--fe-mi); }
.fe-roue .fe-cle{ fill:var(--fe-cle); stroke:none; }

/* Le disque porte une ombre calme, la part qui decroche une ombre qui
   la souleve vraiment : quatre couches, l'encre de la page poussee bas. */
.fe-disque{ filter:
  drop-shadow(0 2px 4px rgba(10,18,32,.07))
  drop-shadow(0 10px 20px rgba(10,18,32,.07))
  drop-shadow(0 24px 44px rgba(10,18,32,.06)); }
.fe-decroche{ filter:
  drop-shadow(0 1px 2px rgba(10,18,32,.20))
  drop-shadow(0 6px 12px rgba(10,18,32,.20))
  drop-shadow(0 16px 30px rgba(10,18,32,.18))
  drop-shadow(0 34px 60px rgba(10,18,32,.14)); }
html:not(.theme-light) .fe-disque{ filter:
  drop-shadow(0 2px 4px rgba(2,6,13,.40))
  drop-shadow(0 10px 20px rgba(2,6,13,.34))
  drop-shadow(0 24px 44px rgba(2,6,13,.28)); }
html:not(.theme-light) .fe-decroche{ filter:
  drop-shadow(0 1px 2px rgba(2,6,13,.55))
  drop-shadow(0 6px 12px rgba(2,6,13,.50))
  drop-shadow(0 16px 30px rgba(2,6,13,.44))
  drop-shadow(0 34px 60px rgba(2,6,13,.36)); }

/* La legende : le total en tete, puis trois lignes chiffrees. */
.fe-tot{ display:flex; flex-direction:column; gap:.5cqw; margin-bottom:2.2cqw;
  padding-bottom:1.8cqw; border-bottom:1px solid var(--fg-ligne); }
.fe-tot b{ font-family:var(--display); font-weight:700; font-size:4.4cqw; line-height:1;
  color:var(--fg-encre); font-variant-numeric:tabular-nums; }
.fe-tot span{ font-size:1.5cqw; line-height:1.4; color:var(--fg-mate); }

.fe-leg{ display:flex; flex-direction:column; gap:1.7cqw; }
.fe-l{ display:grid; grid-template-columns:1.4cqw 7.5cqw minmax(0,1fr) 5cqw;
  align-items:baseline; gap:1.4cqw; }
.fe-l i{ width:1.4cqw; height:1.4cqw; border-radius:50%; align-self:center;
  background:var(--fe-pate); border:1px solid var(--fe-trait); }
.fe-l.est-mi i{ background:var(--fe-mi); }
.fe-l.est-cle i{ background:var(--fe-cle); border-color:var(--fe-cle); }
.fe-l em{ font-style:normal; font-family:var(--display); font-weight:700;
  font-size:2.4cqw; line-height:1; text-align:right; color:var(--fg-mate);
  font-variant-numeric:tabular-nums; }
.fe-l.est-cle em{ color:var(--fe-cle); font-size:3cqw; }
.fe-l b{ font-size:1.6cqw; font-weight:400; line-height:1.35; color:var(--fg-mate); }
.fe-l.est-cle b{ font-weight:600; color:var(--fg-encre); }
.fe-l s{ text-decoration:none; font-size:1.4cqw; font-weight:700; text-align:right;
  color:var(--fg-mate); font-variant-numeric:tabular-nums; }
.fe-l.est-cle s{ color:var(--fe-cle); }

@container (max-width:560px){
  .fe-tot b{ font-size:9cqw; }
  .fe-tot span{ font-size:3.2cqw; }
  .fe-l{ grid-template-columns:2.8cqw 15cqw minmax(0,1fr) 10cqw; gap:2.6cqw; }
  .fe-l i{ width:2.8cqw; height:2.8cqw; }
  .fe-l em{ font-size:5cqw; }
  .fe-l.est-cle em{ font-size:6cqw; }
  .fe-l b{ font-size:3.2cqw; }
  .fe-l s{ font-size:2.9cqw; }
  .fe-leg{ gap:3cqw; }
}

/* ── LE GESTE DU DISQUE ──────────────────────────────────────────────
   Trois temps, et chacun dit quelque chose. Les parts pivotent en place
   depuis le centre, comme un disque qu'on referme : le fond d'abord, la
   masse ensuite, la part qui compte en dernier. Puis, une fois le disque
   entier, cette derniere part se detache. Le decrochage arrive apres la
   construction, sinon il ne se lit pas comme une decision. */
.fe-roue .fe-part,
.fe-roue .fe-sort{ transform-box:view-box; transform-origin:100px 100px; }
/* Sans script, la part est deja sortie : l'illustration doit etre juste
   avant d'etre animee. C'est le script qui la remet en place pour la
   faire sortir sous les yeux du lecteur. */
.fe-roue .fe-sort{ transform:translate(6.12px, -11.47px); }

.sc[data-anim] .fe-roue .fe-part{
  opacity:0; transform:rotate(var(--de,-24deg)) scale(.94);
  transition:
    opacity   .55s var(--mv-doux),
    transform 1.15s var(--mv-entree);
  transition-delay:var(--r,0ms);
}
.sc[data-anim][data-vu="true"] .fe-roue .fe-part{ opacity:1; transform:none; }

/* Le decrochage : la part sort le long de sa bissectrice, une fois le
   disque pose. La distance est celle du dessin, pas une approximation. */
.sc[data-anim] .fe-roue .fe-sort{ transform:none; }
.sc[data-anim][data-vu="true"] .fe-roue .fe-sort{
  transform:translate(6.12px, -11.47px);
  transition:transform 1.05s var(--mv-entree) 1.15s;
}

/* La legende se compose ligne a ligne, derriere le disque. */
.sc[data-anim] .fe-tot,
.sc[data-anim] .fe-l{
  opacity:0; transform:translate3d(0,14px,0);
  transition:
    opacity   .6s var(--mv-doux),
    transform .95s var(--mv-entree);
}
.sc[data-anim] .fe-tot{ transition-delay:340ms; }
.sc[data-anim] .fe-l:nth-of-type(1){ transition-delay:1.30s; }
.sc[data-anim] .fe-l:nth-of-type(2){ transition-delay:640ms; }
.sc[data-anim] .fe-l:nth-of-type(3){ transition-delay:490ms; }
.sc[data-anim][data-vu="true"] .fe-tot,
.sc[data-anim][data-vu="true"] .fe-l{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .sc[data-anim] .fe-roue .fe-part,
  .sc[data-anim] .fe-roue .fe-sort,
  .sc[data-anim] .fe-tot,
  .sc[data-anim] .fe-l{ opacity:1!important; transform:none!important; transition:none!important; }
}