/* « Votre client est-il sur Peppol ? » (F-085) — la page /peppol/ et /nl/peppol/, par-dessus la feuille des guides.
   D'après la maquette validée par Marc le 03/11/2026 (../captures/page-peppol-2026-11-03/). */
.pp-hero{position:relative;text-align:center;padding:44px 0 8px}
.pp-hero>*{position:relative;z-index:1}
.pp-hero:before{content:"";position:absolute;inset:-60px 0 auto;height:460px;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side at 20% 40%,rgba(111,196,179,.30),transparent),radial-gradient(closest-side at 80% 30%,rgba(224,120,106,.14),transparent),radial-gradient(closest-side at 60% 80%,rgba(230,188,85,.18),transparent);filter:blur(10px)}
.pp-pastille{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:500;background:rgb(var(--p-50));color:rgb(var(--p-700));border:1px solid rgb(var(--p-100))}
.pp-hero h1{font-size:clamp(36px,5.6vw,58px);line-height:1.05;margin:18px auto 14px;text-wrap:balance}
.pp-lead{font-size:clamp(16.5px,2vw,19px);color:var(--ink-700);max-width:620px;margin:0 auto 26px;text-wrap:pretty}

.pp-recherche{max-width:720px;margin:0 auto;background:#fff;border:1px solid var(--ink-200);border-radius:20px;padding:10px;display:flex;gap:10px;box-shadow:0 20px 50px -24px rgba(30,42,58,.35)}
.pp-recherche label{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:0 12px;color:var(--ink-500)}
.pp-recherche input{flex:1;min-width:0;height:50px;border:0;outline:0;background:transparent;font:inherit;font-size:17px;color:var(--ink-900)}
.pp-recherche:focus-within{border-color:rgb(var(--p-300));box-shadow:0 0 0 3px rgb(var(--p-100)),0 20px 50px -24px rgba(30,42,58,.35)}
.pp-recherche .btn{height:52px;padding:0 22px;font-size:16px}
.pp-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* La recherche par nom : la liste s'ouvre sous le champ, chaque entreprise arrive à son tour. */
.pp-recherche{position:relative;z-index:5} /* devant la ligne de confiance et la réponse, que la liste recouvre */
.pp-suggestions{position:absolute;z-index:20;top:calc(100% + 8px);left:0;right:0;margin:0;padding:6px;list-style:none;text-align:left;background:#fff;border:1px solid var(--ink-200);border-radius:16px;box-shadow:0 24px 50px -20px rgba(30,42,58,.35);max-height:min(420px,60vh);overflow-y:auto}
.pp-suggestions[hidden]{display:none}
.pp-suggestions li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:11px;cursor:pointer;animation:pp-glisse .3s cubic-bezier(.2,.7,.2,1) both}
.pp-suggestions li[aria-selected="true"],.pp-suggestions li:hover{background:rgb(var(--p-50))}
.pp-sug-nom{min-width:0}
.pp-sug-nom b{display:block;font-weight:600;font-size:15px;color:var(--ink-900);overflow-wrap:anywhere}
.pp-sug-nom small{display:block;font-size:13px;color:var(--ink-500)}
.pp-statut{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink-400);white-space:nowrap}
.pp-statut:before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.pp-statut-oui{color:rgb(var(--p-700))}
.pp-statut-non{color:#B7791F}
@media (prefers-reduced-motion:reduce){.pp-suggestions li{animation:none}}

.pp-confiance{display:flex;gap:10px 22px;justify-content:center;flex-wrap:wrap;margin:20px 0 0;padding:0;list-style:none;font-size:13.5px;color:var(--ink-700)}
.pp-confiance li{display:inline-flex;align-items:center;gap:6px}
.pp-confiance svg{color:rgb(var(--p-600));flex:none}

/* La réponse : une carte qui glisse sous la recherche. */
.pp-resultat{max-width:760px;margin:30px auto 0}
.pp-resultat[hidden]{display:none}
.pp-message{padding:14px 16px;border-radius:14px;background:var(--ink-50);border:1px solid var(--ink-200);color:var(--ink-700);font-size:15.5px;text-align:center}
.pp-carte{background:#fff;border:1px solid var(--ink-200);border-radius:22px;overflow:hidden;box-shadow:0 14px 40px -26px rgba(30,42,58,.35);text-align:left}
.pp-etat{display:flex;align-items:center;gap:14px;padding:18px 22px}
.pp-oui .pp-etat{background:linear-gradient(120deg,rgb(var(--p-50)),#fff)}
.pp-non .pp-etat{background:linear-gradient(120deg,#FFF7E6,#fff)}
.pp-coche{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff}
.pp-oui .pp-coche{background:rgb(var(--p-600));box-shadow:0 0 0 8px rgb(var(--p-100))}
.pp-non .pp-coche{background:#E6BC55;box-shadow:0 0 0 8px #FCEFCB}
.pp-etat h2{font-size:19px;line-height:1.25;margin:0}
.pp-etat small{display:block;color:var(--ink-500);font-size:13px;margin-top:2px}
.pp-corps{padding:4px 22px 18px}
.pp-ligne{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--ink-100);font-size:14.5px}
.pp-ligne:last-child{border-bottom:0}
.pp-ligne>div:last-child{min-width:0;flex:1}
.pp-ic{width:30px;height:30px;border-radius:9px;background:rgb(var(--p-50));color:rgb(var(--p-700));display:grid;place-items:center;flex:none}
.pp-t{display:block;color:var(--ink-500);font-size:12.5px}
.pp-nom{font-weight:600;overflow-wrap:anywhere}
.pp-ids{display:grid;gap:6px;margin-top:4px}
.pp-id{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 10px;background:#F8F6F1;border:1px solid var(--ink-100);border-radius:10px;padding:6px 10px;font-size:13px}
.pp-id code{font-family:ui-monospace,Menlo,monospace;font-size:13px;overflow-wrap:anywhere}
.pp-id .pp-oui-t{color:rgb(var(--p-700));font-weight:600;white-space:nowrap}
.pp-id .pp-non-t{color:var(--ink-500);white-space:nowrap}
.pp-note{margin:4px 0 0;font-size:13.5px;color:var(--ink-500)}
.pp-id-fin{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.pp-bouton-ic{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--ink-500);cursor:pointer;padding:0;text-decoration:none}
.pp-bouton-ic:hover,.pp-bouton-ic:focus-visible{background:#fff;border-color:var(--ink-200);color:rgb(var(--p-700))}
.pp-bouton-ic.pp-copie{color:rgb(var(--p-700));background:rgb(var(--p-50));border-color:rgb(var(--p-200))}

/* La TVA selon VIES. */
.pp-badge{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;border-radius:999px;padding:2px 9px;margin-left:4px;white-space:nowrap;background:var(--ink-50);color:var(--ink-500);border:1px solid var(--ink-200)}
.pp-badge-oui{color:rgb(var(--p-700));background:rgb(var(--p-50));border-color:rgb(var(--p-100))}
.pp-badge-non{color:#92400E;background:#FFF7E6;border-color:#FCEFCB}
.pp-badge-attente{font-weight:500;animation:pp-attente 1.2s ease-in-out infinite alternate}
@keyframes pp-attente{from{opacity:.55}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.pp-badge-attente{animation:none}}

/* Ce qu'elle peut recevoir, en clair. */
.pp-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}
.pp-tag{font-size:12.5px;border-radius:999px;padding:2px 10px;background:rgb(var(--p-50));color:rgb(var(--p-700));border:1px solid rgb(var(--p-100))}

/* Pas encore sur Peppol : que faire, d'après la FAQ du SPF Finances. */
.pp-etapes{margin:6px 0 0;padding-left:20px;display:grid;gap:6px;font-size:14.5px;color:var(--ink-700)}
.pp-etapes li::marker{color:#B7791F;font-weight:700}
.pp-source{margin:8px 0 0;font-size:12.5px}
.pp-source a{color:var(--ink-500);text-decoration:underline;text-decoration-style:dotted}

/* Partager le résultat. */
.pp-partager{display:flex;gap:8px;flex-wrap:wrap;margin:-4px 22px 18px}
.pp-partager button{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13px;color:var(--ink-700);background:#fff;border:1px solid var(--ink-200);border-radius:999px;padding:6px 12px;cursor:pointer}
.pp-partager button:hover,.pp-partager button:focus-visible{border-color:rgb(var(--p-300));color:rgb(var(--p-700))}
.pp-partager button.pp-copie{color:rgb(var(--p-700));background:rgb(var(--p-50));border-color:rgb(var(--p-200))}

/* L'Offre starter, « comme un gain » : une carte en évidence, les jours offerts qui défilent. */
.pp-cadeau{position:relative;margin:4px 22px 16px;padding:22px 22px 20px;border-radius:18px;background:linear-gradient(150deg,#FFF7E6 0%,#fff 55%,rgb(var(--p-50)) 100%);border:1px solid #F6D99A;overflow:hidden;animation:pp-glisse .5s .35s cubic-bezier(.2,.7,.2,1) both}
.pp-cadeau:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);transform:translateX(-100%);animation:pp-reflet 1.4s .9s ease both}
@keyframes pp-reflet{to{transform:translateX(100%)}}
.pp-cadeau-etiquette{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#92400E;background:#FDE68A;border-radius:999px;padding:3px 10px}
.pp-cadeau-titre{font-family:'Lexend','Onest',system-ui;font-weight:500;letter-spacing:-.01em;font-size:clamp(19px,2.4vw,23px);line-height:1.3;margin:12px 0 4px;text-wrap:balance}
.pp-cadeau-titre b{font-weight:600;color:rgb(var(--p-700))}
.pp-cadeau-jours{margin:0;font-size:16px;color:var(--ink-700)}
.pp-cadeau-jours b{font-family:'Lexend','Onest',system-ui;font-size:30px;font-weight:600;color:var(--ink-900);font-variant-numeric:tabular-nums}
.pp-pro{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px;font-size:14.5px;color:var(--ink-700)}
.pp-pro li{display:flex;gap:9px;align-items:baseline}
.pp-pro li:before{content:"✓";color:rgb(var(--p-600));font-weight:700}
.pp-pro .pp-plus:before{content:"+"}
.pp-pro .pp-plus a{color:rgb(var(--p-700));font-weight:600}
.pp-cadeau-limite{margin:14px 0 0;font-size:14px;color:var(--ink-700)}
.pp-cadeau .btn{margin-top:14px}
.pp-cadeau-petit{display:block;margin-top:8px;font-size:13px;color:var(--ink-500)}

/* Dans tous les cas : l'inscription, et ce que l'envoi devient avec Factuo. */
.pp-action{margin:4px 22px 18px;border-radius:16px;padding:16px;display:flex;align-items:center;gap:14px}
.pp-action-oui{background:rgb(var(--p-50))}
.pp-action-non{background:#FFF7E6}
.pp-action p{margin:0;font-size:14.5px;color:var(--ink-700);flex:1}
.pp-action .btn{white-space:nowrap;flex:none}
@media (prefers-reduced-motion:reduce){.pp-cadeau{animation:none}.pp-cadeau:after{display:none}}

/* Les détails techniques, repliés par défaut. */
.pp-details{border-top:1px solid var(--ink-100);background:#FBFAF7}
.pp-details summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:14px 22px;font-size:14.5px}
.pp-details summary::-webkit-details-marker{display:none}
.pp-details summary:before{content:"›";display:inline-block;color:rgb(var(--p-600));font-weight:700;transition:transform .2s}
.pp-details[open] summary:before{transform:rotate(90deg)}
.pp-details summary small{color:var(--ink-500);font-size:12.5px}
.pp-details dl{margin:0;padding:0 22px 18px}
.pp-details dt{color:var(--ink-500);font-size:12px;margin-top:10px}
.pp-details dd{margin:3px 0 0;font-size:13.5px;overflow-wrap:anywhere}
.pp-details code{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;background:#fff;border:1px solid var(--ink-100);border-radius:7px;padding:1px 6px}
.pp-docs{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.pp-docs code{display:block;margin-top:2px;color:var(--ink-500);font-size:11.5px;border:0;background:none;padding:0}
.pp-alerte{color:#B45309;font-weight:600}

/* Les animations de la maquette : la carte glisse, la coche se dessine. Rien si le visiteur a demandé moins de mouvement. */
.pp-anime{animation:pp-glisse .45s cubic-bezier(.2,.7,.2,1) both}
.pp-anime .pp-coche path{stroke-dasharray:24;stroke-dashoffset:24;animation:pp-trace .5s .25s ease forwards}
@keyframes pp-glisse{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pp-trace{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.pp-anime{animation:none}.pp-anime .pp-coche path{animation:none;stroke-dashoffset:0}}

/* Autour du résultat : la poste, les chiffres, la FAQ, le bandeau final (maquette du 03/11/2026). */
.pp-bloc{padding:64px 0 8px;text-align:center}
.pp-sur{margin:0;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--p-700));font-weight:600}
.pp-bloc h2{font-size:clamp(26px,3.4vw,36px);line-height:1.15;margin:8px auto 30px;max-width:34ch;text-wrap:balance}

/* « Peppol, c'est la poste des factures » : l'enveloppe voyage de vous à votre client. */
.pp-reseau{position:relative;max-width:980px;margin:0 auto}
.pp-reseau ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;position:relative}
.pp-reseau ol:before{content:"";position:absolute;top:44px;left:12%;right:12%;height:3px;background:repeating-linear-gradient(90deg,rgb(var(--p-300)) 0 10px,transparent 10px 18px)}
.pp-coin{position:relative;text-align:center}
.pp-rond{width:88px;height:88px;margin:0 auto 12px;border-radius:26px;background:#fff;border:1px solid var(--ink-200);display:grid;place-items:center;box-shadow:0 12px 28px -18px rgba(30,42,58,.4);position:relative;z-index:1}
.pp-rond-f{background:linear-gradient(140deg,#6FC4B3,#E6BC55 45%,#E0786A 75%,#8C7FCB);border:0}
.pp-coin b{display:block;font-family:'Lexend','Onest',system-ui;font-size:15.5px;font-weight:600}
.pp-coin span{display:block;font-size:13.5px;color:var(--ink-700);margin-top:2px;text-wrap:balance}
.pp-enveloppe{position:absolute;z-index:2;top:30px;left:12%;transform:translateX(-50%);background:#fff;border:1px solid var(--ink-200);border-radius:10px;padding:5px 9px;font-size:12px;font-weight:600;color:rgb(var(--p-700));white-space:nowrap;box-shadow:0 8px 20px -10px rgba(30,42,58,.5);opacity:0}
.pp-visible .pp-enveloppe{animation:pp-voyage 5.5s .4s ease-in-out infinite}
@keyframes pp-voyage{0%{left:12%;opacity:0}8%{opacity:1}30%{left:38%}36%{left:38%}60%{left:63%}66%{left:63%}88%{left:88%;opacity:1}100%{left:88%;opacity:0}}

/* Les chiffres : ils arrivent quand on les voit. */
.pp-chiffres{list-style:none;margin:0 auto;padding:0;max-width:1080px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pp-chiffre{background:#fff;border:1px solid var(--ink-200);border-radius:18px;padding:20px}
.pp-chiffre b{display:block;font-family:'Lexend','Onest',system-ui;font-size:36px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.pp-chiffre>span{display:block;font-size:13.5px;color:var(--ink-700);margin-top:6px;text-wrap:balance}
.pp-sources{max-width:760px;margin:14px auto 0;font-size:12.5px;color:var(--ink-500)}
.pp-sources a{color:var(--ink-500)}
.pp-js .pp-bloc:not(.pp-visible) .pp-chiffre{opacity:0;transform:translateY(10px)}
.pp-visible .pp-chiffre{transition:opacity .5s ease,transform .5s ease}
.pp-visible .pp-chiffre:nth-child(2){transition-delay:.1s}.pp-visible .pp-chiffre:nth-child(3){transition-delay:.2s}.pp-visible .pp-chiffre:nth-child(4){transition-delay:.3s}

/* La FAQ : une question ouverte, les autres repliées. */
.pp-faq{max-width:780px;margin:0 auto;display:grid;gap:10px;text-align:left}
.pp-q{background:#fff;border:1px solid var(--ink-200);border-radius:16px;padding:0 18px}
.pp-q summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;padding:16px 0;font-weight:600;font-size:15.5px}
.pp-q summary::-webkit-details-marker{display:none}
.pp-q summary:after{content:"+";color:rgb(var(--p-600));font-size:22px;line-height:1;font-weight:500;transition:transform .2s}
.pp-q[open] summary:after{transform:rotate(45deg)}
.pp-q p{margin:0 0 10px;font-size:14.5px;color:var(--ink-700)}
.pp-q .pp-q-source{margin:0 0 16px;font-size:12.5px;color:var(--ink-500)}
.pp-q .pp-q-source a{color:var(--ink-500)}

/* Le bandeau final. */
.pp-appel{margin:64px 0 48px;border-radius:28px;padding:40px;background:linear-gradient(130deg,#1F4A41,#2F7767 55%,#3E9685);color:#fff;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:30px;align-items:center;overflow:hidden}
.pp-appel h2{font-size:clamp(26px,3.2vw,34px);line-height:1.15;margin:0 0 12px;color:#fff}
.pp-appel p{color:#D7EFE9;margin:0 0 20px;font-size:16px}
.pp-appel-bouton{background:#fff;color:#1F4A41}
.pp-appel-bouton:hover{background:#F0F9F7;color:#1F4A41}
.pp-appel small{display:block;margin-top:10px;color:#BFE3DA;font-size:13px}
.pp-telephone{justify-self:center;width:210px;border-radius:30px;background:#fff;border:7px solid #0F2A25;box-shadow:0 30px 60px -20px rgba(0,0,0,.5);padding:16px 14px;color:var(--ink-900);font-size:12.5px;text-align:left}
.pp-bulle{background:rgb(var(--p-50));border-radius:14px;padding:10px;margin-bottom:10px;color:var(--ink-700)}
.pp-fact{border:1px solid var(--ink-200);border-radius:12px;padding:10px;line-height:1.5}
.pp-fact b{font-family:'Lexend','Onest',system-ui}
.pp-fact-ok{display:inline-block;margin-top:6px;color:rgb(var(--p-700));font-weight:600}

@media (prefers-reduced-motion:reduce){
  .pp-visible .pp-enveloppe{animation:none;opacity:1;left:50%}
  .pp-js .pp-bloc:not(.pp-visible) .pp-chiffre{opacity:1;transform:none}
}

@media (max-width:760px){
  .pp-hero{padding-top:28px}
  .pp-recherche{flex-direction:column;padding:8px}
  .pp-recherche .btn{width:100%;justify-content:center}
  .pp-etat{padding:16px}.pp-corps{padding:2px 16px 14px}
  .pp-details summary{padding:14px 16px}.pp-details dl{padding:0 16px 16px}
  .pp-cadeau{margin:4px 16px 14px;padding:18px 16px}
  .pp-partager{margin:-4px 16px 16px}
  .pp-bloc{padding-top:48px}
  .pp-reseau ol,.pp-chiffres{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-reseau ol:before,.pp-enveloppe{display:none}
  .pp-chiffre{padding:16px 12px}.pp-chiffre b{font-size:30px}
  .pp-appel{grid-template-columns:1fr;padding:28px 22px;margin-top:48px}
  .pp-action{margin:4px 16px 16px;flex-direction:column;align-items:stretch}.pp-action .btn{justify-content:center;white-space:normal}
}