/* ============================================================================
   LES PLUS DE DOLIPLUS — un index de tiroirs, chaque tiroir s'ouvre sur un
   SCHEMA anime. GP, 22/09 : « lister tous les plus avec un deroule », puis
   « les top de l'offre qu'il faut mettre en avant pour creer l'acte d'achat ».
   Hierarchie tiree de fond_concurrence.md (synthese transverse) et offre.md :
   groupe 1 = ce qui decide (territoire, demo libre, conformite,
   reversibilite), groupe 2 = ce qui change la journee (gestes),
   puis les 12 portes metier. Le PRIX n'a pas de tiroir ici (GP 22/09 :
   « ici c'est expliquer les fonctionnalites phares a un prospect ») —
   ce role appartient a la page tarifs.
   Interdits respectes : pas de prix par utilisateur (meme en argument),
   pas de « tout-en-un » / « centralise » / « IA incluse », demonstration
   jamais citation. Aucune copie d'ecran (GP, 21/09).
============================================================================ */
.dp-lesplus {
  --bg:#F9F9F9; --band-bg:#0b4384; --band-deep:#072e5c; --band-ink:#FFFFFF; --band-soft:#b9cbe4;
  --serif:"Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans:"Open Sans", ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;
  --surface:#FFFFFF; --surface-2:#F1F3F8; --ink:#302d2c; --ink-soft:#474E59; --ink-faint:#5C6572;
  --navy:#0b4384; --navy-hover:#083465; --accent:#ff6900; --rule:#DCE2EC;
  --vert:#1f7a4d; --rouge:#C63B3B;
}
.dp-lesplus * { box-sizing:border-box; }
.dp-lesplus { margin:0; background:var(--surface); color:var(--ink);
  font-family:"Open Sans",ui-sans-serif,Arial,sans-serif; line-height:1.6; }
.dp-lesplus .serif { font-family:"Fraunces",Georgia,serif; font-variant-ligatures:no-common-ligatures; letter-spacing:-.015em; }
.dp-lesplus .wrap { max-width:1040px; margin:0 auto; padding-inline:20px; }
.dp-lesplus .tete { padding-block:56px 8px; }
.dp-lesplus .eyebrow { font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 14px; }
.dp-lesplus .tete h1 { font-size:clamp(30px,4.8vw,50px); line-height:1.08; margin:0 0 16px; text-wrap:balance; }
.dp-lesplus .tete h1 em { font-style:italic; color:var(--navy); }
.dp-lesplus .tete p { color:var(--ink-soft); font-size:clamp(16px,1.7vw,19px); max-width:56ch; margin:0; }
/* ---------- les deux familles de tiroirs ---------- */
.dp-lesplus .groupe { margin:0; padding:46px 0 12px; font-size:12px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
/* ---------- l'index : un tiroir par plus ---------- */
.dp-lesplus .tiroir { border-top:1px solid var(--rule); }
.dp-lesplus .tiroir.dernier { border-bottom:1px solid var(--rule); }
.dp-lesplus .tiroir summary { list-style:none; cursor:pointer; padding-block:24px;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; gap:20px; align-items:center; }
.dp-lesplus .tiroir summary::-webkit-details-marker { display:none; }
.dp-lesplus .t-num { font-family:"Fraunces",Georgia,serif; font-size:14px; letter-spacing:.18em; color:var(--accent); padding-top:3px; }
.dp-lesplus .t-titre { display:block; font-size:clamp(19px,2.5vw,26px); line-height:1.22; text-wrap:balance; }
.dp-lesplus .t-sous { display:block; color:var(--ink-faint); font-size:14px; margin-top:3px; max-width:60ch; }
.dp-lesplus .t-badge { font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint); border:1px solid var(--rule); border-radius:999px; padding:5px 12px; white-space:nowrap; }
.dp-lesplus .chev { width:22px; height:22px; flex:none; color:var(--ink-faint); transition:transform .3s ease; }
.dp-lesplus .tiroir summary:hover .t-titre, .dp-lesplus .tiroir summary:focus-visible .t-titre { color:var(--navy); }
.dp-lesplus .tiroir summary:hover .chev { color:var(--navy); }
.dp-lesplus .tiroir[open] .chev { transform:rotate(180deg); color:var(--accent); }
.dp-lesplus .tiroir[open] summary { padding-bottom:8px; }
.dp-lesplus .t-corps { padding-bottom:40px; }
.dp-lesplus .tiroir[open] .t-corps { animation:deroule .45s ease both; }
@keyframes deroule { from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
@media (max-width:640px) {
  .dp-lesplus .tiroir summary { grid-template-columns:auto minmax(0,1fr) auto; }
  .dp-lesplus .t-badge { display:none; }
}
/* ---------- une scene ---------- */
.dp-lesplus .scene { padding-block:22px; display:grid;
         grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:38px; align-items:center; }
.dp-lesplus .scene + .scene { border-top:1px dashed var(--rule); }
@media (max-width:820px) {
  .dp-lesplus .scene { grid-template-columns:1fr; gap:24px; }
}
.dp-lesplus .scene .num { font-family:"Fraunces",Georgia,serif; font-size:13px; letter-spacing:.2em; color:var(--accent); margin:0 0 10px; }
.dp-lesplus .scene h3 { font-size:clamp(20px,2.6vw,27px); margin:0 0 12px; line-height:1.2; text-wrap:balance; }
.dp-lesplus .scene p { color:var(--ink-soft); margin:0 0 14px; max-width:46ch; }
.dp-lesplus .scene .gain { display:inline-block; font-size:13.5px; font-weight:700; color:var(--vert);
               border:1px solid var(--vert); border-radius:999px; padding:5px 14px; }
.dp-lesplus .aparte { color:var(--ink-soft); max-width:60ch; margin:26px 0 0; padding-top:22px; border-top:1px dashed var(--rule); }
.dp-lesplus .aparte b { color:var(--ink); }
.dp-lesplus .cta-mini { display:inline-block; text-decoration:none; font-weight:700; font-size:14.5px;
  color:var(--navy); border:2px solid var(--navy); border-radius:3px; padding:9px 18px; margin-top:6px; }
.dp-lesplus .cta-mini:hover { color:#fff; background:var(--navy); }
/* ---------- la boite a schema ---------- */
.dp-lesplus .vue { position:relative; background:var(--surface-2); border:1px solid var(--rule);
       border-radius:6px; aspect-ratio:16/9; overflow:hidden; }
.dp-lesplus .vue svg { display:block; width:100%; height:100%; }
.dp-lesplus .rejouer { position:absolute; right:10px; bottom:10px; font:inherit; font-size:11.5px; font-weight:700;
           letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);
           background:var(--surface); border:1px solid var(--rule); border-radius:999px;
           padding:6px 13px; cursor:pointer; opacity:.85; }
.dp-lesplus .rejouer:hover, .dp-lesplus .rejouer:focus-visible { color:var(--navy); border-color:var(--navy); opacity:1; }
/* etiquettes dans le schema */
.dp-lesplus .lab { font-family:"Open Sans",Arial,sans-serif; font-size:11px; font-weight:700;
       letter-spacing:.1em; text-transform:uppercase; }
/* ---------- l'animation : une classe posee quand la scene entre a l'ecran ---------- */
.dp-lesplus .anim { opacity:0; }
/* Les traits de trajet se cachent par leur dashoffset, pas par l'opacite :
   sinon `trace` (qui n'anime que le dash) dessine un trait... invisible.
   Leur attenuation passe par stroke-opacity, que cette regle ne touche pas. */
.dp-lesplus .vue .anim[stroke-dasharray] { opacity:1; }
.dp-lesplus .vue.on .anim { animation-fill-mode:forwards; animation-timing-function:cubic-bezier(.3,.7,.3,1); }
@keyframes entre { from{opacity:0; transform:translateX(-46px);} to{opacity:1; transform:none;} }
@keyframes apparait { from{opacity:0;} to{opacity:1;} }
@keyframes disparait { to{opacity:0;} }
@keyframes pop { 0%{opacity:0; transform:scale(.4);} 60%{opacity:1; transform:scale(1.18);} 100%{opacity:1; transform:scale(1);} }
@keyframes trace { from{stroke-dashoffset:260;} to{stroke-dashoffset:0;} }
@keyframes trace100 { from{stroke-dashoffset:100;} to{stroke-dashoffset:0;} }
@keyframes monte { from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:none;} }
@keyframes pulse2 { 0%,100%{transform:scale(1);} 50%{transform:scale(1.12);} }
/* A — l'affaire a son dossier */
.dp-lesplus .vue.on .af-dos { animation:apparait .7s .2s both; }
.dp-lesplus .vue.on .af-i1 { animation:pop .5s 1s both; }
.dp-lesplus .vue.on .af-i2 { animation:pop .5s 1.3s both; }
.dp-lesplus .vue.on .af-i3 { animation:pop .5s 1.6s both; }
.dp-lesplus .vue.on .af-i4 { animation:pop .5s 1.9s both; }
.dp-lesplus .vue.on .af-i5 { animation:pop .5s 2.2s both; }
.dp-lesplus .vue.on .af-eq { animation:monte .7s 2.6s both; }
.dp-lesplus .vue.on .af-check { animation:pop .5s 3.4s both; }
/* B — la demo est ouverte */
.dp-lesplus .vue.on .de-r1 { animation:apparait .5s .2s both; }
.dp-lesplus .vue.on .de-r2 { animation:apparait .5s .5s both; }
.dp-lesplus .vue.on .de-open { animation:apparait .5s 1.1s both; }
.dp-lesplus .vue.on .de-perso { animation:apparait .4s 1.5s both, entreDemo 1.6s 2s both; }
.dp-lesplus .vue.on .de-check { animation:pop .5s 3.7s both; }
@keyframes entreDemo { 0%{opacity:1; transform:none;} 70%{opacity:1;} 100%{opacity:0; transform:translate(246px,0);} }
/* E — la facture electronique */
.dp-lesplus .vue.on .fe-fac { animation:entre .7s .2s both; }
.dp-lesplus .vue.on .fe-f1 { animation:trace .8s 1s both; }
.dp-lesplus .vue.on .fe-pa { animation:apparait .5s 1.2s both; }
.dp-lesplus .vue.on .fe-f2 { animation:trace .8s 1.7s both; }
.dp-lesplus .vue.on .fe-adm { animation:apparait .5s 1.9s both; }
.dp-lesplus .vue.on .fe-ret { animation:trace 1.2s 2.5s both; }
.dp-lesplus .vue.on .fe-badge { animation:pop .5s 3.6s both; }
/* D — la reversibilite */
.dp-lesplus .vue.on .rv-box { animation:apparait .6s .2s both; }
.dp-lesplus .vue.on .rv-porte { animation:apparait .6s .9s both; }
.dp-lesplus .vue.on .rv-fleche { animation:trace 1s 1.6s both; }
.dp-lesplus .vue.on .rv-carton { animation:pop .6s 2.5s both; }
.dp-lesplus .vue.on .rv-check { animation:pop .5s 3.2s both; }
/* 1a — le courrier arrive et se range */
.dp-lesplus .vue.on .a1-mail { animation:entre .9s .2s both, versDossier 1.5s 1.5s both; }
.dp-lesplus .vue.on .a1-pj { animation:apparait .5s 1.1s both, versDossier 1.5s 1.5s both; }
.dp-lesplus .vue.on .a1-dos { animation:apparait .6s 1.1s both; }
.dp-lesplus .vue.on .a1-check { animation:pop .5s 3s both; }
.dp-lesplus .vue.on .a1-trait { animation:trace 1.2s 1.5s both; }
@keyframes versDossier { 0%{opacity:1; transform:none;} 100%{opacity:0; transform:translate(190px,26px) scale(.55);} }
/* 1b — l'inconnu entre au carnet */
.dp-lesplus .vue.on .a2-mail { animation:entre .8s .2s both; }
.dp-lesplus .vue.on .a2-point { animation:pulse 1.5s 1s infinite; opacity:1; }
.dp-lesplus .vue.on .a2-fiche { animation:monte .8s 2.1s both; }
.dp-lesplus .vue.on .a2-fleche { animation:trace 1s 1.8s both; }
@keyframes pulse { 0%,100%{ r:6; opacity:1; } 50%{ r:9; opacity:.55; } }
/* 1c — la recherche remonte le temps */
.dp-lesplus .vue.on .a3-loupe { animation:apparait .5s .2s both, balaye 2.4s .7s both; }
.dp-lesplus .vue.on .a3-an1 { animation:apparait .4s .8s both; }
.dp-lesplus .vue.on .a3-an2 { animation:apparait .4s 1.3s both; }
.dp-lesplus .vue.on .a3-trouve { animation:pop .6s 2.6s both; }
.dp-lesplus .vue.on .a3-fiche { animation:apparait .5s 3s both; }
@keyframes balaye { 0%{transform:translateX(0);} 100%{transform:translateX(-210px);} }
/* 1d — le rendez-vous suit dans la poche */
.dp-lesplus .vue.on .a4-bureau { animation:apparait .6s .2s both; }
.dp-lesplus .vue.on .a4-rdv { animation:pop .6s .9s both; }
.dp-lesplus .vue.on .a4-arc { animation:trace 1.3s 1.7s both; }
.dp-lesplus .vue.on .a4-tel { animation:apparait .6s 1.6s both; }
.dp-lesplus .vue.on .a4-notif { animation:pop .5s 3s both, sonne .6s 3.5s 2; }
@keyframes sonne { 0%,100%{transform:rotate(0);} 25%{transform:rotate(-9deg);} 75%{transform:rotate(9deg);} }
/* 2 — la GED : chaque piece file a sa place */
.dp-lesplus .vue.on .g-arm { animation:apparait .6s .2s both; }
.dp-lesplus .vue.on .g-d1 { animation:apparait .5s .5s both, gedV1 1.1s 1.5s both; }
.dp-lesplus .vue.on .g-d2 { animation:apparait .5s .8s both, gedV2 1.1s 1.9s both; }
.dp-lesplus .vue.on .g-d3 { animation:apparait .5s 1.1s both, gedV3 1.1s 2.3s both; }
.dp-lesplus .vue.on .g-check { animation:pop .5s 3.4s both; }
@keyframes gedV1 { 0%{opacity:1; transform:none;} 100%{opacity:0; transform:translate(267px,62px) scale(.45);} }
@keyframes gedV2 { 0%{opacity:1; transform:none;} 100%{opacity:0; transform:translate(267px,67px) scale(.45);} }
@keyframes gedV3 { 0%{opacity:1; transform:none;} 100%{opacity:0; transform:translate(267px,72px) scale(.45);} }
/* 3 — le mobile : hors ligne, puis la synchro */
.dp-lesplus .vue.on .m-tel { animation:apparait .6s .2s both; }
.dp-lesplus .vue.on .m-l1 { animation:apparait .4s .9s both; }
.dp-lesplus .vue.on .m-l2 { animation:apparait .4s 1.3s both; }
.dp-lesplus .vue.on .m-l3 { animation:apparait .4s 1.7s both; }
.dp-lesplus .vue.on .m-off { animation:apparait .4s .5s both, disparait .4s 2.3s both; }
.dp-lesplus .vue.on .m-on2 { animation:pop .5s 2.5s both; }
.dp-lesplus .vue.on .m-arc { animation:trace 1.1s 2.7s both; }
.dp-lesplus .vue.on .m-srv { animation:apparait .6s 2.7s both; }
.dp-lesplus .vue.on .m-check { animation:pop .5s 3.8s both; }
/* 4 — l'IA redige et corrige */
.dp-lesplus .vue.on .i-mots { animation:entre .7s .2s both; }
.dp-lesplus .vue.on .i-etoile { animation:pop .5s 1.1s both, scintille 1.2s 1.7s 2; }
.dp-lesplus .vue.on .i-doc { animation:apparait .5s 1.4s both; }
.dp-lesplus .vue.on .i-t1 { animation:trace100 .5s 1.8s both; }
.dp-lesplus .vue.on .i-t2 { animation:trace100 .5s 2.05s both; }
.dp-lesplus .vue.on .i-t3 { animation:trace100 .5s 2.3s both; }
.dp-lesplus .vue.on .i-t4 { animation:trace100 .5s 2.55s both; }
.dp-lesplus .vue.on .i-t5 { animation:trace100 .5s 2.8s both; }
.dp-lesplus .vue.on .i-faute { animation:apparait .3s 3s both, disparait .5s 3.7s both; }
.dp-lesplus .vue.on .i-check { animation:pop .5s 4.2s both; }
@keyframes scintille { 0%,100%{transform:scale(1);} 50%{transform:scale(1.3);} }
/* 5 — le portail : le client commande, c'est saisi */
.dp-lesplus .vue.on .p-nav { animation:entre .7s .2s both; }
.dp-lesplus .vue.on .p-btn { animation:pop .4s 1.2s both, pulse2 .9s 1.7s 2; }
.dp-lesplus .vue.on .p-fleche { animation:trace 1s 2.5s both; }
.dp-lesplus .vue.on .p-erp { animation:apparait .6s 2.7s both; }
.dp-lesplus .vue.on .p-doc { animation:pop .5s 3.4s both; }
.dp-lesplus .vue.on .p-check { animation:pop .5s 3.9s both; }
/* 6 — le serveur : a vous seul, suivi par l'editeur */
.dp-lesplus .vue.on .s-ent { animation:entre .7s .2s both; }
.dp-lesplus .vue.on .s-srv { animation:apparait .6s .8s both; }
.dp-lesplus .vue.on .s-lien { animation:trace .9s 1.4s both; }
.dp-lesplus .vue.on .s-edit { animation:apparait .5s 2.2s both; }
.dp-lesplus .vue.on .s-maj { animation:trace .9s 2.6s both; }
.dp-lesplus .vue.on .s-bouclier { animation:pop .6s 3.6s both; }
/* 7 — le trieur : la facture fournisseur se remplit seule */
.dp-lesplus .vue.on .tr-pdf { animation:tombe .7s .2s both; }
.dp-lesplus .vue.on .tr-bac { animation:apparait .5s .2s both; }
.dp-lesplus .vue.on .tr-fleche { animation:trace .8s 1.1s both; }
.dp-lesplus .vue.on .tr-form { animation:apparait .5s 1.3s both; }
.dp-lesplus .vue.on .tr-f1 { animation:trace100 .45s 1.8s both; }
.dp-lesplus .vue.on .tr-f2 { animation:trace100 .45s 2.05s both; }
.dp-lesplus .vue.on .tr-f3 { animation:trace100 .45s 2.3s both; }
.dp-lesplus .vue.on .tr-f4 { animation:trace100 .45s 2.55s both; }
.dp-lesplus .vue.on .tr-btn { animation:pop .5s 3s both, pulse2 .9s 3.6s 1; }
.dp-lesplus .vue.on .tr-check { animation:pop .5s 4s both; }
@keyframes tombe { from{opacity:0; transform:translateY(-44px);} to{opacity:1; transform:none;} }
/* 8 — le chat attache au dossier, la tache qui rappelle */
.dp-lesplus .vue.on .ch-dos { animation:apparait .5s .2s both; }
.dp-lesplus .vue.on .ch-lien { animation:trace .7s .8s both; }
.dp-lesplus .vue.on .ch-pan { animation:apparait .5s 1s both; }
.dp-lesplus .vue.on .ch-b1 { animation:monte .5s 1.5s both; }
.dp-lesplus .vue.on .ch-b2 { animation:monte .5s 1.9s both; }
.dp-lesplus .vue.on .ch-b3 { animation:monte .5s 2.3s both; }
.dp-lesplus .vue.on .ch-check { animation:pop .5s 3s both; }
.dp-lesplus .vue.on .td-fiche { animation:apparait .5s .2s both; }
.dp-lesplus .vue.on .td-tache { animation:pop .5s .9s both; }
.dp-lesplus .vue.on .td-cloche { animation:apparait .4s 1.5s both, sonne .6s 1.9s 3; }
.dp-lesplus .vue.on .td-fait { animation:pop .5s 3.4s both; }
.dp-lesplus .vue.on .td-arch { animation:apparait .5s 3.8s both; }
/* 9 — la force de vente : le cycle entier, du prospect a l'abonnement */
.dp-lesplus .vue.on .fv-rail { animation:apparait .5s .2s both; }
.dp-lesplus .vue.on .fv-dot { animation:avance 3s .8s both; opacity:1; }
.dp-lesplus .vue.on .fv-cloche { animation:pop .4s 1.3s both; }
.dp-lesplus .vue.on .fv-devis { animation:pop .5s 1.8s both; }
.dp-lesplus .vue.on .fv-sign { animation:trace .8s 2.4s both; }
.dp-lesplus .vue.on .fv-cmd { animation:pop .5s 3s both; }
.dp-lesplus .vue.on .fv-sepa { animation:pop .5s 3.5s both; }
.dp-lesplus .vue.on .fv-fil { animation:trace 1s 3.9s both; }
.dp-lesplus .vue.on .fv-aff { animation:apparait .5s 4.3s both; }
@keyframes avance { from{transform:translateX(0);} to{transform:translateX(300px);} }
/* 9b — la signature electronique du devis */
.dp-lesplus .vue.on .sg-devis { animation:entre .7s .2s both; }
.dp-lesplus .vue.on .sg-fleche { animation:trace .8s 1s both; }
.dp-lesplus .vue.on .sg-pad { animation:apparait .5s 1.2s both; }
.dp-lesplus .vue.on .sg-trait { animation:trace 1.3s 1.7s both; }
.dp-lesplus .vue.on .sg-check { animation:pop .5s 3.1s both; }
.dp-lesplus .vue.on .sg-euro { animation:pop .5s 3.5s both; }
.dp-lesplus .vue.on .sg-retour { animation:trace .9s 3.7s both; }
.dp-lesplus .vue.on .sg-dossier { animation:apparait .5s 4.1s both; }
/* 10 — relances d'impayes, puis tresorerie previsionnelle */
.dp-lesplus .vue.on .re-fac { animation:entre .7s .2s both; }
.dp-lesplus .vue.on .re-t { animation:apparait .5s .8s both; }
.dp-lesplus .vue.on .re-m1 { animation:pop .4s 1.3s both; }
.dp-lesplus .vue.on .re-m2 { animation:pop .4s 1.8s both; }
.dp-lesplus .vue.on .re-m3 { animation:pop .4s 2.3s both; }
.dp-lesplus .vue.on .re-euro { animation:pop .5s 3s both; }
.dp-lesplus .vue.on .re-check { animation:pop .5s 3.5s both; }
.dp-lesplus .vue.on .ts-cadre { animation:apparait .5s .2s both; }
.dp-lesplus .vue.on .ts-b1 { animation:pousse .5s .9s both; }
.dp-lesplus .vue.on .ts-b2 { animation:pousse .5s 1.1s both; }
.dp-lesplus .vue.on .ts-b3 { animation:pousse .5s 1.3s both; }
.dp-lesplus .vue.on .ts-b4 { animation:pousse .5s 1.7s both; }
.dp-lesplus .vue.on .ts-b5 { animation:pousse .5s 1.9s both; }
.dp-lesplus .vue.on .ts-b6 { animation:pousse .5s 2.1s both; }
.dp-lesplus .vue.on .ts-auj { animation:apparait .4s 1.5s both; }
.dp-lesplus .vue.on .ts-src { animation:apparait .5s 2.5s both; }
@keyframes pousse { from{opacity:1; transform:scaleY(0);} to{opacity:1; transform:scaleY(1);} }
/* 10b — l'expert-comptable est deja servi */
.dp-lesplus .vue.on .ec-box { animation:entre .7s .2s both; }
.dp-lesplus .vue.on .ec-doc { animation:pop .5s 1s both; }
.dp-lesplus .vue.on .ec-fleche { animation:trace .9s 1.6s both; }
.dp-lesplus .vue.on .ec-cab { animation:apparait .5s 1.9s both; }
.dp-lesplus .vue.on .ec-check { animation:pop .5s 3s both; }
.dp-lesplus .vue.on .ec-lab { animation:apparait .5s 3.4s both; }
/* 11 — la rentabilite se lit sur l'affaire */
.dp-lesplus .vue.on .rb-aff { animation:apparait .5s .2s both; }
.dp-lesplus .vue.on .rb-e1 { animation:apparait .45s .9s both; }
.dp-lesplus .vue.on .rb-e2 { animation:apparait .45s 1.2s both; }
.dp-lesplus .vue.on .rb-e3 { animation:apparait .45s 1.5s both; }
.dp-lesplus .vue.on .rb-barre1 { animation:apparait .5s 2.1s both; }
.dp-lesplus .vue.on .rb-barre2 { animation:pousseX .8s 2.5s both; }
.dp-lesplus .vue.on .rb-marge { animation:pop .5s 3.3s both; }
@keyframes pousseX { from{opacity:1; transform:scaleX(0);} to{opacity:1; transform:scaleX(1);} }
/* 11b — RH : la note de frais se photographie, le conge se valide par email */
.dp-lesplus .vue.on .nf-tick { animation:apparait .5s .2s both; }
.dp-lesplus .vue.on .nf-tel { animation:apparait .5s .5s both; }
.dp-lesplus .vue.on .nf-flash { animation:pop .35s 1s both; }
.dp-lesplus .vue.on .nf-etoile { animation:pop .5s 1.4s both, scintille 1.2s 1.9s 1; }
.dp-lesplus .vue.on .nf-ligne { animation:apparait .5s 1.6s both; }
.dp-lesplus .vue.on .nf-f1 { animation:trace100 .45s 1.9s both; }
.dp-lesplus .vue.on .nf-f2 { animation:trace100 .45s 2.15s both; }
.dp-lesplus .vue.on .nf-f3 { animation:trace100 .45s 2.4s both; }
.dp-lesplus .vue.on .nf-mail { animation:monte .6s 2.8s both; }
.dp-lesplus .vue.on .nf-check { animation:pop .5s 3.6s both; }
.dp-lesplus .vue.on .cg-cal { animation:apparait .5s .2s both; }
.dp-lesplus .vue.on .cg-chip { animation:pop .5s .9s both; }
.dp-lesplus .vue.on .cg-fleche { animation:trace .7s 1.4s both; }
.dp-lesplus .vue.on .cg-mail { animation:apparait .5s 1.7s both; }
.dp-lesplus .vue.on .cg-ok { animation:pop .5s 2.2s both; }
.dp-lesplus .vue.on .cg-plan { animation:apparait .5s 2.6s both; }
.dp-lesplus .vue.on .cg-bar { animation:pop .5s 3s both; }
.dp-lesplus .vue.on .cg-solde { animation:pop .5s 3.5s both; }
/* 12 — la banque se rapproche toute seule */
.dp-lesplus .vue.on .bq-bank { animation:entre .7s .2s both; }
.dp-lesplus .vue.on .bq-flux { animation:trace 1s 1s both; }
.dp-lesplus .vue.on .bq-jour { animation:apparait .4s 1.4s both; }
.dp-lesplus .vue.on .bq-erp { animation:apparait .5s 1.4s both; }
.dp-lesplus .vue.on .bq-solde { animation:pousseX .7s 2s both; }
.dp-lesplus .vue.on .bq-r1 { animation:apparait .4s 2.5s both; }
.dp-lesplus .vue.on .bq-r2 { animation:apparait .4s 2.7s both; }
.dp-lesplus .vue.on .bq-check { animation:pop .5s 3.4s both; }
/* 13 — le document s'ouvre la ou il est range */
.dp-lesplus .vue.on .of-ged { animation:apparait .5s .2s both; }
.dp-lesplus .vue.on .of-doc { animation:pop .5s .9s both; }
.dp-lesplus .vue.on .of-fen { animation:grandit .7s 1.5s both; }
.dp-lesplus .vue.on .of-l1 { animation:trace100 .5s 2.3s both; }
.dp-lesplus .vue.on .of-l2 { animation:trace100 .5s 2.55s both; }
.dp-lesplus .vue.on .of-l3 { animation:trace100 .5s 2.8s both; }
.dp-lesplus .vue.on .of-curseur { animation:clignote 1s 3.2s 3 both; }
.dp-lesplus .vue.on .of-home { animation:pop .5s 3.6s both; }
@keyframes grandit { from{opacity:0; transform:scale(.6);} to{opacity:1; transform:scale(1);} }
@keyframes clignote { 0%,100%{opacity:1;} 50%{opacity:0;} }
/* ---------- la finale : tout ca, pour ca ---------- */
.dp-lesplus .finale { border-top:1px solid var(--rule); padding-block:46px 10px; }
.dp-lesplus .finale h2 { font-size:clamp(24px,3.2vw,34px); line-height:1.2; margin:8px 0 6px; }
.dp-lesplus .finale .avant { color:var(--ink-soft); max-width:56ch; margin:0; }
.dp-lesplus .puces { display:flex; flex-wrap:wrap; gap:10px; margin:24px 0 26px; padding:0; list-style:none; }
.dp-lesplus .puce { font-size:13px; font-weight:600; color:var(--ink-soft); background:var(--surface);
        border:1px solid var(--rule); border-radius:999px; padding:6px 14px;
        opacity:0; transform:translateY(12px); transition:opacity .45s ease, transform .45s ease; }
.dp-lesplus .puce.opt { color:var(--ink-faint); border-style:dashed; }
.dp-lesplus .finale.on .puce { opacity:1; transform:none; }
.dp-lesplus .morales { list-style:none; padding:0; margin:0; display:grid; gap:14px; max-width:60ch;
           opacity:0; transition:opacity .8s ease 1.6s; }
.dp-lesplus .finale.on .morales { opacity:1; }
.dp-lesplus .morales li { display:flex; align-items:center; gap:14px; font-family:"Fraunces",Georgia,serif;
              font-size:clamp(17px,2vw,22px); line-height:1.35; color:var(--ink); }
.dp-lesplus .morales li b { font-weight:600; }
.dp-lesplus .morales .ico { flex:none; width:38px; height:38px; border-radius:999px; background:var(--surface-2);
                display:grid; place-items:center; }
/* ---------- votre metier : les elements phares, porte par porte ---------- */
.dp-lesplus .metiers { border-top:1px solid var(--rule); padding-block:46px 34px; }
.dp-lesplus .metiers h2 { font-size:clamp(24px,3.2vw,34px); line-height:1.2; margin:8px 0 6px; }
.dp-lesplus .metiers .avant { color:var(--ink-soft); max-width:58ch; margin:0 0 26px; }
.dp-lesplus .mgrille { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:14px; }
.dp-lesplus .mcard { border:1px solid var(--rule); border-radius:6px; padding:18px 18px 16px; background:var(--surface);
         opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease; }
.dp-lesplus .metiers.on .mcard { opacity:1; transform:none; }
.dp-lesplus .mcard h3 { font-size:18px; line-height:1.25; margin:0 0 6px; }
.dp-lesplus .mcard > p { font-size:13.5px; color:var(--ink-faint); margin:0 0 12px; line-height:1.5; }
.dp-lesplus .mphares { display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }
.dp-lesplus .mphares li { font-size:12px; font-weight:600; color:var(--navy); background:var(--surface-2);
              border-radius:999px; padding:4px 10px; }
.dp-lesplus .metiers .apres { margin:26px 0 0; }
/* ---------- pied ---------- */
.dp-lesplus .fin { padding-block:40px 60px; }
.dp-lesplus .fin p { color:var(--ink-soft); max-width:58ch; margin:0 0 18px; }
.dp-lesplus .fin b { color:var(--ink); }
.dp-lesplus .cta { display:inline-block; text-decoration:none; font-weight:700; border-radius:3px;
       padding:14px 26px; background:var(--navy); color:#fff; }
.dp-lesplus .cta:hover { background:var(--accent); }
@media (prefers-reduced-motion:reduce) {
  .dp-lesplus .anim { opacity:1 !important; }
  .dp-lesplus .vue.on .anim { animation:none !important; }
  .dp-lesplus .tiroir[open] .t-corps { animation:none; }
  .dp-lesplus .puce, .dp-lesplus .morale, .dp-lesplus .mcard { transition:none; opacity:1; transform:none; }
}