*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,sans-serif;background:radial-gradient(70% 40% at 50% 40%,#fff6e6 0,transparent 70%),linear-gradient(180deg,#faf4e7,#f6efdf);color:#173B2C;display:flex;justify-content:center}
.app{width:100%;max-width:430px;padding:14px 20px 0;display:flex;flex-direction:column;min-height:100vh}
header{display:flex;align-items:flex-start;gap:14px;padding-top:4px}
.med{width:84px;height:84px;border-radius:50%;padding:4px;background:#bfe48f;box-shadow:0 4px 12px rgba(23,59,44,.18);flex:none}.med img{width:100%;height:100%;border-radius:50%;display:block}
.logo{font:900 27px/1.05 Nunito;color:#1e4a37;margin-top:14px;position:relative}.logo small{display:block;font:700 14px Inter;color:#5d675f;margin-top:4px}
.logo svg{position:absolute;left:0;top:30px}
.rond{margin-left:auto;margin-top:14px;width:44px;height:44px;border-radius:50%;background:#ece6d8;display:grid;place-items:center;flex:none}
.bulle{position:relative;align-self:flex-start;margin:10px 0 0 30px;background:#d8efbf;font-weight:700;font-size:15.5px;padding:10px 16px;border-radius:16px}
.bulle:after{content:"";position:absolute;left:22px;top:-10px;border:11px solid transparent;border-bottom-color:#d8efbf;border-top:0;border-right-width:3px;border-left-width:12px}
.titre{position:relative;margin-top:12px}h1{font:900 34px/1.02 Nunito;text-align:center;letter-spacing:-.5px}.eclat{position:absolute}
.sous{text-align:center;font:800 16.5px Nunito;margin-top:6px;position:relative}.sous svg{position:absolute;left:50%;transform:translateX(-50%);bottom:-11px}
.tableau{margin:24px 4px 0;position:relative;border-radius:6px;background:linear-gradient(160deg,#1f4a3a,#163a2d 60%,#123227);border:10px solid #c98a44;box-shadow:inset 0 0 0 2px #9c6127,0 14px 24px rgba(60,40,10,.25);color:#f4f1e6;padding:8px 14px 12px;font-family:Kalam}
.tableau:after{content:"";position:absolute;left:-10px;right:-10px;bottom:-16px;height:8px;background:#a96a2c;border-radius:2px}
.craie{position:absolute;right:30px;bottom:-14px;width:26px;height:6px;background:#f7f3ea;border-radius:3px;z-index:2}
.tableau h4{font-weight:400;font-size:21px;text-align:center}.trait{width:130px;height:1.5px;background:#f4f1e6;opacity:.8;margin:0 auto 8px}
.st{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}.st div{text-align:center;line-height:1.1}.st b{display:block;font:700 30px Kalam;color:#FFD24A}.st b.v{color:#a6e36f}.st span{font-size:15px;opacity:.92}
.sem{display:flex;align-items:flex-end;gap:8px;height:52px;margin-top:8px;border-top:1.5px dashed rgba(244,241,230,.35);padding-top:6px}.sem div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}.sem i{width:100%;border:2px solid #a6e36f;border-bottom:0;border-radius:4px 4px 0 0;background:rgba(166,227,111,.25)}.sem span{font-size:12px}
.duo{display:flex;gap:12px;margin-top:30px}.duo a{flex:1;display:flex;align-items:center;gap:10px;background:#fbf7ee;border:2px solid #e0d4b9;border-radius:20px;padding:12px}.duo .ic{width:38px;height:38px;border-radius:12px;background:#e6f3d2;display:grid;place-items:center;flex:none}.duo small{display:block;font:600 12.5px Inter;color:#7a776d}.duo b{font:900 18px Nunito}.duo svg.chv{margin-left:auto}
.abo{margin-top:26px;border-radius:22px;padding:16px;background:linear-gradient(160deg,#8b7df0,#6a5ad8);color:#fff;box-shadow:0 10px 20px rgba(106,90,216,.28);position:relative;overflow:hidden}
.abo:before{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.1)}
.abo .l1{display:flex;align-items:center;gap:8px;font:900 19px Nunito}.abo .pr{margin-left:auto;font:800 12px Nunito;background:#FFD24A;color:#3b2f00;padding:4px 10px;border-radius:999px}
.abo p{font-size:14px;opacity:.92;margin-top:4px}.jauge{height:10px;border-radius:6px;background:rgba(255,255,255,.25);margin-top:10px}.jauge i{display:block;height:100%;width:0%;border-radius:6px;background:#FFD24A}
.abo .reste{display:flex;justify-content:space-between;font:700 13.5px Inter;margin-top:6px}
.bts{display:flex;gap:10px;margin-top:14px}.bts a{flex:1;text-align:center;border-radius:16px;padding:12px 6px;font:900 15.5px Nunito}.b1{background:#c3ec96;color:#173B2C;border:2px solid #8cc957}.b2{background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.45);color:#fff}
.dec{display:flex;align-items:center;justify-content:center;gap:8px;margin:20px 0 22px;font:800 16px Nunito;color:#c4553a}
nav{margin:auto -20px 0;background:#fbf8f0;border-radius:26px 26px 0 0;display:flex;align-items:center;padding:12px 8px 14px;box-shadow:0 -4px 16px rgba(80,60,20,.08)}
nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;color:#2b2f33;font-size:14px;font-weight:600;position:relative}nav a.on{color:#4b8f2f;font-weight:700}
nav a.on:after{content:"";position:absolute;bottom:-8px;width:60%;height:4px;border-radius:4px;background:#7cbf4c}nav .sep{width:1.5px;height:44px;background:#cfc7b6}
.c{display:flex;gap:12px;align-items:center;background:#fff;border:2px solid #e6dcc6;border-radius:18px;padding:10px;margin-top:10px}
.mini{width:84px;height:64px;border-radius:10px;border:4px solid #c98a44;background:linear-gradient(160deg,#1f4a3a,#123227);color:#f4f1e6;font:12px Kalam;display:grid;place-items:center;text-align:center;flex:none;padding:2px}
.c b{font:900 15.5px Nunito;display:block}.c small{font-size:12.5px;color:#6a675e;font-weight:600}
.bar{height:6px;border-radius:6px;background:#e3dccb;margin-top:6px;overflow:hidden}.bar i{display:block;height:100%;background:#7cbf4c}
.prep{border:2px dashed #a6d77a;background:#f3fae9}
.quota{display:flex;align-items:center;gap:10px;background:#efe8d8;border-radius:16px;padding:10px 12px;margin-top:12px;font-weight:700;font-size:14px}
.nv{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px;border-radius:20px;padding:13px;font:900 18px Nunito;background:linear-gradient(180deg,#c3ec96,#a6e36f);border:2px solid #8cc957}
.sec{font:900 13px Nunito;color:#7a776d;text-transform:uppercase;letter-spacing:.06em;margin:16px 0 6px}
.lg{background:#fff;border:2px solid #e6dcc6;border-radius:18px;overflow:hidden}
.l{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid #f0ead9;font-weight:600;font-size:15px}.l:last-child{border:0}
.l small{margin-left:auto;color:#6a675e;font-size:13px;font-weight:600;text-align:right}.l .ch{color:#b9b2a3}
.tog{margin-left:auto;width:42px;height:24px;border-radius:12px;background:#7cbf4c;position:relative}.tog:after{content:"";position:absolute;right:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff}.tog.off{background:#d8d0bf}.tog.off:after{right:auto;left:3px}
.prem{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#8a7cf0,#7768E8);color:#fff;border-radius:18px;padding:14px;margin-top:12px}
.prem b{font:900 17px Nunito;display:block}.prem small{opacity:.9;font-size:12.5px}
.disc{text-align:center;font-size:13px;color:#8a857a;margin:14px 0 12px;text-decoration:underline;text-underline-offset:3px}
.h2{font:900 24px Nunito;margin-top:34px;position:relative;align-self:flex-start}.h2 svg{position:absolute;left:0;bottom:-10px}.h2s{font:600 14px Inter;color:#5d675f;margin:14px 0 10px}
.pt{display:flex;align-items:center;gap:12px;background:#fffdf7;border:2px solid #ecdfc3;border-left:6px solid var(--m);border-radius:18px;padding:10px 12px;margin-top:10px;box-shadow:0 4px 10px rgba(80,60,20,.06)}
.pt .tx{flex:1;min-width:0}.mat{display:inline-block;font:800 11.5px Nunito;padding:2px 9px;border-radius:999px}.pt b{display:block;font:900 16px/1.15 Nunito;margin-top:3px}.pt small{font:600 12.5px Inter;color:#7a776d}
.rev{display:flex;align-items:center;gap:5px;background:#c3ec96;border:2px solid #8cc957;border-radius:999px;padding:7px 11px;font:900 14px Nunito;color:#173B2C;flex:none}
.car{display:flex;gap:14px;overflow-x:auto;margin:0 -20px;padding:14px 20px 18px;scroll-snap-type:x mandatory;scrollbar-width:none}
.mt{flex:none;width:268px;scroll-snap-align:start;position:relative;border-radius:6px;background:linear-gradient(160deg,#1f4a3a,#163a2d 60%,#123227);border:8px solid #c98a44;box-shadow:inset 0 0 0 2px #9c6127,0 10px 18px rgba(60,40,10,.22);color:#f4f1e6;padding:22px 14px 14px;font-family:Kalam}
.scotch{position:absolute;left:12px;top:-14px;transform:rotate(-4deg);font:900 13px Nunito;color:#173B2C;padding:4px 12px;border-radius:3px;box-shadow:0 2px 4px rgba(0,0,0,.25)}
.mt h5{font-weight:700;font-size:22px;line-height:1.1}.fo{font-size:17px;color:#a6e36f;margin-top:4px}
.pg{display:flex;align-items:center;gap:6px;font-size:16px;color:#FFD24A;margin-top:6px}
.mq{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:14px;opacity:.95}.dots{display:flex;gap:6px}.dots i{width:16px;height:16px;border-radius:50%;border:2px solid rgba(244,241,230,.6)}.dots i.on{background:#f4f1e6;border-color:#f4f1e6}
.rep{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;background:linear-gradient(180deg,#c3ec96,#a6e36f);border:2px solid #8cc957;border-radius:14px;padding:10px;font:900 16px Nunito;color:#173B2C}
.bulle{margin-top:14px!important;line-height:1.35}
.st b small{font-size:18px;opacity:.8}.st em{display:block;font:700 13px Kalam;color:#a6e36f;font-style:normal}
.leg{font-size:13.5px;text-align:center;margin-top:10px;opacity:.85}.sem{height:70px!important;border-top:0!important;margin-top:2px!important}.sem u{text-decoration:none;font-size:11.5px;opacity:.85}
.h2row{display:flex;align-items:center;margin-top:30px}.h2row .h2{margin-top:0}.cnt{margin-left:auto;font:900 13px Nunito;background:#fde3c2;color:#a3560f;padding:5px 11px;border-radius:999px}
.prio{position:absolute;right:12px;top:-12px;font:900 12px Nunito;background:#FFD24A;color:#3b2f00;padding:3px 10px;border-radius:999px;box-shadow:0 2px 4px rgba(0,0,0,.25)}
.mt{width:272px!important}.car{padding-right:60px}
.abo{padding:14px 16px!important;margin-top:20px!important}.abo .l1{font-size:18px!important}.px{font:700 14px Inter;opacity:.9;margin-left:6px}.abo .b1{display:block;text-align:center;margin-top:12px;border-radius:14px;padding:11px;font:900 16px Nunito;background:#c3ec96;color:#173B2C;border:2px solid #8cc957}
.dec{display:block;text-align:center;margin:18px 0 20px;font:600 14px Inter!important;color:#8a8270!important}.dec a{color:#8a8270}

.st b.z{color:rgba(244,241,230,.45)!important}.z2{color:rgba(244,241,230,.55)!important}
.sk{position:relative;overflow:hidden;background:rgba(244,241,230,.16)!important;border-color:rgba(244,241,230,.18)!important}
.sk:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);animation:sh 1.6s infinite}
@keyframes sh{to{transform:translateX(100%)}}@media (prefers-reduced-motion:reduce){.sk:after{animation:none}}
.skc .ln{height:14px;border-radius:7px;margin-top:10px}.skc .scotch{background:#d9d2c2!important;height:22px}.skc{min-height:230px}

.uav{position:relative;padding:4px}.uav svg{display:block;border-radius:50%}.pb{position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;border-radius:50%;background:#fff;border:2px solid #bfe48f;display:grid;place-items:center}
nav a.zt{position:relative}.zm{position:relative;display:block;width:30px;height:30px;margin:0 auto 1px}.zm img{width:30px;height:30px;border-radius:50%;border:2px solid #bfe48f;display:block}.zm i{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:#4cc35a;border:2px solid #fbf8f0}
nav{position:relative;overflow:visible!important}nav a.zc{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}.zr{position:absolute;top:-50px;left:50%;margin-left:-33px;width:66px;height:66px;border-radius:50%;padding:4px;background:linear-gradient(180deg,#c3ec96,#8cc957);box-shadow:0 8px 18px rgba(23,59,44,.28),0 0 0 6px #fbf8f0}.zr img{width:100%;height:100%;border-radius:50%;display:block}.zr i{position:absolute;right:3px;bottom:3px;width:14px;height:14px;border-radius:50%;background:#4cc35a;border:3px solid #fbf8f0}nav a.zc b{font:800 15px Nunito;color:#173B2C;margin-top:26px}
/* ---- branchement (passage 13) : seulement ce que les données réelles demandent ---- */
a{text-decoration:none;color:inherit}
.uav{display:block}
#pf-av{display:block;width:100%;height:100%}#pf-av svg{width:100%;height:100%;display:block;border-radius:50%}
.mt .fo{font-size:16px;line-height:1.2}
.abo{display:block;color:#fff}
.abo .b1{cursor:pointer}
.mt .scotch{white-space:nowrap;max-width:62%;overflow:hidden;text-overflow:ellipsis}
.bulle b{font-weight:700} /* les maquettes chargent Inter 500-700 seulement : « bolder » s arrête à 700 */
/* passage 15 (V5, fondateur) : bulle « Bienvenue ! / Bravo ! » — marges ÉQUILIBRÉES : même retrait à gauche et à droite que les autres blocs,
   toute la largeur utile ; petite flèche vers l'avatar conservée */
.bulle{align-self:stretch;margin-left:0!important;margin-right:0!important}
.bulle:after{left:30px}
.pf-statut{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font:900 13px Nunito;color:#173B2C;background:linear-gradient(180deg,#c3ec96,#a6e36f);border:2px solid #8cc957;border-radius:999px;padding:5px 12px;text-decoration:none;width:max-content}