/* ============================================================
   Coopérative Oasis — Souscription publique /souscrire/
   Tunnel-only : coquille pré-connexion, héro, overrides PS,
   formulaire, récap public, confirmation, sections marketing.

   Task 3 — réduit aux règles NOT couvertes par components.css :
   - Coquille pré-connexion (.sub, .pre-topbar__help/.login)
   - Héro pédagogique (.sub-hero, .sub-cover, .sub-trust)
   - Bandeau sociétaire (.login-banner)
   - Grilles formulaire public (.fgrid, .fld)
   - Encadrés d'info (.note)
   - Consentement (.consent)
   - Écran de confirmation (.done)
   - Sections marketing (.why, .stats-band, .labels)
   - Composants tunnel-only (.flow-demo, .lv-actionbar,
     .duration/.dur-chip, .ack, .sign-box, .sign-recap,
     .flow__alert, .field-err, .done__pay)
     [signature : #oasis-sign-modal, unifié dans style.css avec /souscription/]

   Tout ce qui est dans components.css a été retiré :
   reset/body, coquille connectée, .gate__*, .flow/.steps/.step*,
   .flow__panel/.flow__nav/.flow__step-*, .field/.field__label,
   .info-grid/.info-cell/.info-edit, .sub-foot et ses enfants.
   ============================================================ */

/* ---------- Coquille pré-connexion (sans sidebar) ---------- */
.sub{min-height:100vh;display:flex;flex-direction:column;background:var(--bg);}

/* override logo height (60 px vs 42 px connecté dans DS) */
.pre-topbar__logo img{height:60px;width:auto;display:block;}

/* éléments topbar spécifiques au tunnel public (pas dans DS) */
.pre-topbar__help{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--muted);font-weight:500;}
.pre-topbar__help .ic{width:16px;height:16px;color:var(--faint);}
.pre-topbar__login{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--ps-strong);background:var(--ps-tint);padding:8px 15px;border-radius:var(--r-pill);transition:filter .14s var(--ease);}
.pre-topbar__login:hover{filter:brightness(.97);}
.pre-topbar__login .ic{width:15px;height:15px;}
@media(max-width:620px){
  .pre-topbar__help{display:none;}
  .pre-topbar__logo img{height:54px;}
}

.sub__main{flex:1;}
.sub__wrap{max-width:880px;width:100%;margin:0 auto;padding:30px 28px 70px;}
@media(max-width:620px){.sub__wrap{padding:22px 15px 56px;}}

/* ---------- Héro pédagogique ---------- */
.sub-hero{margin-bottom:22px;}
/* bannière photo communauté */
.sub-cover{position:relative;border-radius:var(--r-lg);overflow:hidden;margin-bottom:22px;box-shadow:var(--sh-1);}
.sub-cover img{display:block;width:100%;height:270px;object-fit:cover;object-position:center 44%;}
.sub-cover__scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(7,28,31,.66) 100%);}
.sub-cover__cap{position:absolute;left:0;bottom:0;padding:16px 22px;display:flex;align-items:center;gap:9px;color:#fff;font-size:14px;font-weight:600;text-shadow:0 1px 10px rgba(0,0,0,.45);}
.sub-cover__cap .ic{width:18px;height:18px;flex:none;}
@media(max-width:620px){.sub-cover img{height:185px;}.sub-cover__cap{font-size:12.5px;padding:13px 16px;}}
.sub-hero__eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--ps-strong);background:var(--ps-tint);padding:5px 13px;border-radius:var(--r-pill);}
.sub-hero__title{font-size:34px;line-height:1.12;letter-spacing:-.02em;font-weight:800;margin-top:16px;max-width:18ch;}
.sub-hero__title .em{color:var(--ps-strong);}
.sub-hero__lead{font-size:17px;line-height:1.6;color:var(--ink-2);margin-top:12px;max-width:62ch;}
.sub-hero__lead b{color:var(--ink);font-weight:700;}
@media(max-width:620px){.sub-hero__title{font-size:27px;}.sub-hero__lead{font-size:15.5px;}}

/* bandeau de réassurance (3 atouts) */
.sub-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px;}
@media(max-width:680px){.sub-trust{grid-template-columns:1fr;}}
.sub-trust__item{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:15px 17px;display:flex;gap:13px;align-items:flex-start;}
.sub-trust__ic{width:40px;height:40px;border-radius:11px;background:var(--ps-tint);color:var(--ps-strong);display:flex;align-items:center;justify-content:center;flex:none;}
.sub-trust__ic .ic{width:21px;height:21px;}
.sub-trust__t{font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--ink);}
.sub-trust__d{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.45;}

/* ---------- Bandeau "déjà sociétaire" (rappel connexion, bien visible) ---------- */
.login-banner{
  display:flex;align-items:center;gap:16px;
  background:linear-gradient(135deg,var(--ps-strong),color-mix(in srgb,var(--ps-strong) 72%,#0a3940));
  color:#fff;border-radius:var(--r-md);padding:16px 20px;margin-bottom:22px;
  box-shadow:0 8px 24px color-mix(in srgb,var(--ps-strong) 26%,transparent);
}
.login-banner__ic{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;flex:none;}
.login-banner__ic .ic{width:23px;height:23px;color:#fff;}
.login-banner__txt{flex:1;min-width:0;}
.login-banner__t{font-size:15.5px;font-weight:800;letter-spacing:-.01em;}
.login-banner__d{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.85);margin-top:2px;}
.login-banner__btn{
  flex:none;display:inline-flex;align-items:center;gap:8px;
  background:#fff;color:var(--ps-strong);font-weight:700;font-size:14px;
  padding:11px 20px;border-radius:var(--r-pill);transition:filter .14s var(--ease);white-space:nowrap;
}
.login-banner__btn:hover{filter:brightness(.95);}
.login-banner__btn .ic{width:16px;height:16px;}
@media(max-width:620px){
  .login-banner{flex-wrap:wrap;gap:13px;padding:15px 17px;}
  .login-banner__txt{flex:1 1 100%;order:2;}
  .login-banner__ic{order:1;}
  .login-banner__btn{order:3;width:100%;justify-content:center;}
}

/* ---------- Formulaire : grilles de champs ---------- */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;}
.fgrid--3{grid-template-columns:160px 1fr 1fr;}
.fgrid .col-2{grid-column:span 2;}
@media(max-width:560px){.fgrid,.fgrid--3{grid-template-columns:1fr;}.fgrid .col-2{grid-column:auto;}}
.fld{display:flex;flex-direction:column;gap:7px;}
.fld>label{font-size:12.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-2);}
.fld__hint{font-size:12px;color:var(--muted);line-height:1.45;}
.fld .input{font-size:15px;}
.fld select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23868c95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:40px;cursor:pointer;}

/* civilité — réutilise .seg (parts.css) ; ici neutre puis actif PS via la classe seg */
.civ-seg{align-self:flex-start;width:max-content;max-width:100%;}
.civ-seg button{padding:9px 28px;}

/* ---------- Encadré d'info (accès espace / KYC) ---------- */
.note{display:flex;gap:12px;align-items:flex-start;background:var(--ps-tint);border:1px solid var(--ps-tint-2);border-radius:var(--r-md);padding:14px 16px;margin-top:18px;}
.note__ic{width:34px;height:34px;border-radius:10px;background:#fff;color:var(--ps-strong);display:flex;align-items:center;justify-content:center;flex:none;box-shadow:var(--sh-1);}
.note__ic .ic{width:19px;height:19px;}
.note__t{font-size:14px;font-weight:800;color:var(--ps-strong);}
.note__d{font-size:13px;color:var(--ink-2);margin-top:3px;line-height:1.55;}
.note--neutral{background:var(--card-2);border-color:var(--line);}
.note--neutral .note__t{color:var(--ink);}
.note--neutral .note__ic{color:var(--ink-2);}

/* ---------- Montant + durée (étape 2) ---------- */
.preset-parts{text-align:center;}
.duration{display:flex;gap:10px;flex-wrap:wrap;}
.dur-chip{font-family:inherit;border:1.5px solid var(--line-2);background:var(--card);border-radius:var(--r-pill);padding:9px 18px;font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:all .14s;}
.dur-chip:hover{border-color:var(--lv);}
.dur-chip.is-active{border-color:var(--lv);background:var(--lv-tint);color:var(--lv-strong);box-shadow:inset 0 0 0 1px var(--lv);}

/* ---------- Confirmation fiscalité (étape 3) ---------- */
.ack{display:flex;flex-direction:column;gap:12px;}
.ack__item{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;cursor:pointer;transition:border-color .14s,background .14s;}
.ack__item:hover{background:var(--card-2);}
.ack__item.is-checked{border-color:var(--lv);background:var(--lv-tint);}
.ack__check{width:22px;height:22px;border-radius:6px;border:2px solid var(--line-2);flex:none;display:flex;align-items:center;justify-content:center;margin-top:1px;transition:all .14s;}
.ack__item.is-checked .ack__check{background:var(--lv);border-color:var(--lv);}
.ack__check svg{width:13px;height:13px;color:#fff;opacity:0;transition:opacity .14s;}
.ack__item.is-checked .ack__check svg{opacity:1;}
.ack__t{font-size:14px;font-weight:700;color:var(--ink);}
.ack__d{font-size:12.5px;color:var(--ink-2);margin-top:2px;line-height:1.5;}
.ack input{position:absolute;opacity:0;}

/* ---------- Signature (étape 4) ---------- */
.sign-box{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;}
.sign-box__doc{background:var(--card-2);padding:18px 20px;display:flex;gap:13px;align-items:center;border-bottom:1px solid var(--line);}
.sign-box__doc .ic{width:34px;height:34px;border-radius:9px;background:var(--lv-tint);color:var(--lv-strong);display:flex;align-items:center;justify-content:center;flex:none;}
.sign-box__doc .t{font-size:14.5px;font-weight:700;}
.sign-box__doc .s{font-size:12.5px;color:var(--muted);}
.sign-box__doc a{margin-left:auto;font-size:13px;color:var(--lv-strong);font-weight:600;}
.sign-recap{padding:18px 20px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media(max-width:560px){.sign-recap{grid-template-columns:1fr;}}
.sign-recap .k{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;}
.sign-recap .v{font-size:15px;font-weight:700;color:var(--ink);margin-top:2px;}

/* ---------- Récap (étape finale) — consentement + récap public ---------- */
.consent{display:flex;gap:12px;align-items:flex-start;padding:15px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);margin:0 0 18px;cursor:pointer;}
.consent input{width:21px;height:21px;margin-top:1px;accent-color:var(--ps);flex:none;}
.consent span{font-size:13.5px;color:var(--ink-2);line-height:1.55;}
.consent a{color:var(--ps-strong);font-weight:600;text-decoration:underline;text-underline-offset:2px;}

/* ---------- Écran de confirmation ---------- */
.done{max-width:620px;margin:24px auto 0;text-align:center;}
.done__check{width:88px;height:88px;border-radius:50%;background:var(--ps);color:#fff;margin:0 auto 22px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 26px color-mix(in srgb,var(--ps) 40%,transparent);animation:donepop .4s var(--ease) both;}
.done__check svg{width:46px;height:46px;}
@keyframes donepop{0%{transform:scale(.6);opacity:0;}60%{transform:scale(1.06);}100%{transform:scale(1);opacity:1;}}
.done__title{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.15;}
.done__lead{font-size:17px;color:var(--ink-2);line-height:1.6;margin-top:12px;}
.done__lead b{color:var(--ps-strong);}
.done__card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:22px 24px;text-align:left;margin-top:24px;}
.done__card-t{font-size:14px;font-weight:800;color:var(--ink);margin-bottom:14px;}
.done__steps{display:flex;flex-direction:column;gap:14px;}
.done__step{display:flex;gap:14px;align-items:flex-start;}
.done__step-n{width:30px;height:30px;border-radius:50%;background:var(--ps-tint);color:var(--ps-strong);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;flex:none;}
.done__step-t{font-size:14.5px;font-weight:700;color:var(--ink);}
.done__step-d{font-size:13px;color:var(--ink-2);margin-top:2px;line-height:1.5;}
.done__foot{margin-top:24px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* ---------- Section "Pourquoi soutenir les oasis ?" (sous le formulaire) ---------- */
.why{margin-top:34px;}
.why__head{text-align:center;max-width:64ch;margin:0 auto 20px;}
.why__head h2{font-size:25px;font-weight:800;letter-spacing:-.02em;}
.why__lead{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin-top:10px;}
.why__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:620px){.why__grid{grid-template-columns:1fr;}}
.why-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:19px 20px;}
.why-card__ic{width:42px;height:42px;border-radius:12px;background:var(--ps-tint);color:var(--ps-strong);display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.why-card__ic .ic{width:22px;height:22px;}
.why-card__t{font-size:15.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink);}
.why-card__d{font-size:13px;color:var(--ink-2);line-height:1.55;margin-top:5px;}
.why-card__lnk{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--ps-strong);margin-top:10px;}
.why-card__lnk:hover{text-decoration:underline;text-underline-offset:2px;}
.why-card__lnk .ic{width:13px;height:13px;}

/* bande d'indicateurs */
.stats-band{display:grid;grid-template-columns:repeat(3,1fr);background:linear-gradient(135deg,var(--ps-strong),color-mix(in srgb,var(--ps-strong) 72%,#0a3940));border-radius:var(--r-md);overflow:hidden;margin-top:14px;box-shadow:var(--sh-1);}
@media(max-width:560px){.stats-band{grid-template-columns:1fr;}}
.stats-band__item{padding:20px 18px;text-align:center;color:#fff;border-right:1px solid rgba(255,255,255,.16);}
.stats-band__item:last-child{border-right:0;}
@media(max-width:560px){.stats-band__item{border-right:0;border-bottom:1px solid rgba(255,255,255,.16);}.stats-band__item:last-child{border-bottom:0;}}
.stats-band__n{font-size:29px;font-weight:800;letter-spacing:-.02em;}
.stats-band__l{font-size:12.5px;color:rgba(255,255,255,.85);margin-top:3px;}

/* bandeau labels Finansol + ESUS */
.labels{display:flex;align-items:center;gap:20px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:16px 22px;margin-top:14px;}
.labels__logos{display:flex;align-items:center;gap:16px;flex:none;}
.labels__logos img{height:56px;width:auto;display:block;}
.labels__txt{font-size:13px;line-height:1.6;color:var(--ink-2);}
.labels__txt b{color:var(--ink);font-weight:700;}
@media(max-width:560px){.labels{flex-direction:column;text-align:center;}}

/* ---------- Démo livret tunnel — toggle debug ---------- */
.flow-demo{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:16px;font-size:12.5px;color:var(--muted);cursor:pointer;}
.flow-demo input{width:16px;height:16px;accent-color:var(--lv);}

/* ---------- Barre d'action Livret tunnel (déposer / retirer) ---------- */
.lv-actionbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:18px 22px;}
.lv-actionbar__t{font-size:16px;font-weight:700;}
.lv-actionbar__s{font-size:13px;color:var(--muted);margin-top:2px;}
.lv-actionbar__btns{display:flex;gap:10px;flex-wrap:wrap;}

/* ---------- Validation + erreurs ---------- */
.flow__alert{margin:0 26px;padding:11px 15px;background:color-mix(in srgb,var(--danger) 9%,transparent);border:1px solid color-mix(in srgb,var(--danger) 35%,transparent);border-radius:var(--r-md);color:var(--danger);font-size:13px;font-weight:600;}
.flow__alert[hidden]{display:none;}
.field-err{font-size:12.5px;color:var(--danger);font-weight:600;margin-top:6px;display:none;}
.fld.is-invalid .input{border-color:var(--danger);}
.fld.is-invalid .field-err{display:block;}

/* ---------- Encadré "prochaine étape" (signature) ---------- */
.done__pay{max-width:560px;margin:22px auto 0;text-align:left;background:var(--ps-tint);border:1px solid var(--ps-tint-2);border-radius:var(--r-md);padding:16px 18px;display:flex;gap:13px;align-items:flex-start;}
.done__pay-ic{width:38px;height:38px;border-radius:11px;background:#fff;color:var(--ps-strong);display:flex;align-items:center;justify-content:center;flex:none;box-shadow:var(--sh-1);}
.done__pay-ic .ic{width:20px;height:20px;}
.done__pay-t{font-size:14px;font-weight:800;color:var(--ps-strong);}
.done__pay-d{font-size:13px;color:var(--ink-2);margin-top:3px;line-height:1.55;}
.done__pay-d b{color:var(--ink);font-weight:700;}
.done__pay.is-action{background:var(--ps-tint);border-color:var(--ps);box-shadow:0 0 0 1px var(--ps);}
.done__pay.is-action .done__pay-ic{background:var(--ps);color:#fff;}

/* astérisque champ obligatoire */
.fld .req{color:var(--danger);font-weight:700;margin-left:2px;}