/* ================================================================
   Smart Achats : feuille de style
   Charte MEF stricte (brand-identity/brand.md) + reprise du storyboard
   ================================================================ */

/* ---------- 1. Jetons de couleur et bases ---------- */
:root{
  --primary:#4B6EFA; --p-deep:#6B8EFF; --p-dark:#7C5CFC;
  --accent:#03FDA9; --pop:#E879F9; --warm:#F0DCC8;
  --soft:#ABC4FF; --dark:#111111; --grey:#6B6B72; --line:#E8E8ED;
  --app-max:480px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html,body{height:100%;width:100%;overflow-x:hidden}
body{
  font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;
  background:#EDEFF6;color:var(--dark);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
button{font-family:inherit;cursor:pointer}
input,textarea{font-family:inherit}
a{color:inherit}

/* ---------- 2. Coquille de l'app ---------- */
#app{
  position:relative;
  width:100%;max-width:var(--app-max);margin:0 auto;
  height:100vh;height:100dvh;
  background:#fff;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 0 44px rgba(30,40,90,.14);
}
.views{flex:1;position:relative;overflow:hidden}
.view{
  position:absolute;inset:0;display:none;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  /* on ne fait défiler qu'en hauteur : pas de balayage lateral qui decale l'ecran */
  touch-action:pan-y;
}
.view.on{display:flex}
.body{
  /* flex:1 0 auto et pas flex:1 : sinon la boite reste haute comme l'ecran, le
     contenu deborde par-dessous et la marge basse ne s'applique jamais. */
  flex:1 0 auto;padding:18px 20px;display:flex;flex-direction:column;min-height:100%;
  /* de l'air sous le dernier bouton : collé au bas de l'écran, il se rate au doigt */
  padding-bottom:calc(30px + env(safe-area-inset-bottom));
}
.view-enter{animation:viewIn .22s ease-out}
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* barre d'onglets */
/* La barre garde 58 px utiles AU-DESSUS de la zone sûre : sur iPhone, une hauteur
   fixe de 62 px incluait les 34 px de l'indicateur d'accueil et écrasait les
   icônes, qui disparaissaient en ne laissant que les mots. */
.tabs{
  flex:0 0 auto;border-top:1px solid var(--line);display:flex;background:#fff;
  min-height:58px;padding-bottom:calc(4px + env(safe-area-inset-bottom));
}
.tabs[hidden]{display:none}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-size:11px;font-weight:600;color:#B4B4BE;position:relative;background:none;border:none;
}
.tab svg{flex:0 0 21px;width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.tab.on{color:var(--primary)}
.dot{
  position:absolute;top:6px;right:calc(50% - 26px);min-width:16px;height:16px;padding:0 4px;
  border-radius:99px;background:var(--pop);color:#fff;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.dot[hidden]{display:none}

/* bandeau mode démo */
#demo-banner{
  flex:0 0 auto;background:var(--pop);color:#fff;font-size:10px;font-weight:700;
  letter-spacing:.12em;text-align:center;padding:5px 8px;
}
#demo-banner[hidden]{display:none}

/* ---------- 3. Typographie ---------- */
.h-app{font-size:25px;font-weight:700;letter-spacing:-.02em;line-height:1.22}
.h-sec{font-size:11.5px;font-weight:700;color:#9A9AA3;letter-spacing:.05em;margin-bottom:7px}
.p-app{font-size:14px;line-height:1.55;color:#55555E}
.tiny{font-size:12px;line-height:1.5;color:#7A7A85}
.mention{font-size:11px;line-height:1.45;color:#7A7A85;margin-top:9px}
.mention.on-warm{color:#6E6558}
.hero-num{font-size:52px;font-weight:700;letter-spacing:-.035em;line-height:1;color:var(--primary)}
.hero-sub{font-size:13.5px;color:var(--grey);margin-top:6px}

/* ---------- 4. Boutons et liens ---------- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:7px;width:100%;text-align:center;
  border-radius:30px;font-size:16px;font-weight:600;padding:17px 16px;border:none;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:active{transform:scale(.978)}
.btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-accent{background:var(--accent);color:var(--dark);box-shadow:0 7px 18px rgba(3,200,140,.34)}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 7px 18px rgba(75,110,250,.34)}
.btn-outline{background:#fff;color:var(--primary);border:1.6px solid #D3DCFE;box-shadow:none;font-size:14.5px;padding:14px}
.btn-ghost{background:#F2F3F8;color:#55555E;box-shadow:none;font-size:15px;padding:15px}
.btn-danger{background:#FDF1F0;color:#C0392B;box-shadow:none;font-size:15px;padding:15px}
/* le geste qu’on encourage : dégradé mint vers bleu, texte foncé (SECTION 3.1) */
.btn-go{
  background:linear-gradient(115deg,#03FDA9 0%,#22CFC0 45%,#4B6EFA 100%);
  color:#0B2B22;font-weight:700;
  box-shadow:0 10px 26px rgba(34,180,200,.38);
}
/* volontairement terne : enregistrer un achat déjà fait ne doit rien encourager */
.btn-terne{background:#E9E9EF;color:#8A8A93;box-shadow:none}

/* les trois sorties de l’écran Ajouter ont exactement le même gabarit */
#view-ajouter .btn{padding:16px;font-size:15.5px;font-weight:700}
#view-ajouter .btn + .btn{margin-top:9px}
.link{
  font-size:13.5px;color:var(--primary);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;display:inline-block;background:none;border:none;
  padding:11px 0;
}
.link-mini{
  font-size:12.5px;color:#8A8A93;text-decoration:underline;text-underline-offset:3px;
  display:block;text-align:center;background:none;border:none;width:100%;padding:13px 0;
}

/* ---------- 5. Champs et pilules ---------- */
.field{margin-bottom:15px}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--grey);margin-bottom:6px}
/* lab-opt et pas opt : .opt sert déjà aux options d'objectif, et sa mise en
   forme de carte transformait la parenthèse en faux champ de saisie */
.field label .lab-opt{font-weight:500;color:#A8A9B6}
/* l’écran d’un achat déjà fait était tout gris : ses étiquettes passent en bleu,
   comme sur l’écran Ajouter */
#view-dejafait .field label{color:var(--primary)}
/* Deux champs côte à côte (date et heure de l’achat). min-width:0 est obligatoire : sans lui, la largeur
   naturelle du sélecteur de date (jj/mm/aaaa + son icône) force sa colonne à
   déborder, et le champ heure se fait grignoter sur la droite. */
.field-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.field-2 .field{margin-bottom:15px;min-width:0}
.field-2 .input{width:100%;min-width:0;font-size:15px;padding-left:12px;padding-right:12px}
/* iOS ne respecte pas width:100% sur ces deux champs : leur valeur vit dans un
   pseudo-élément qui impose sa largeur naturelle et centre le texte. Sans les
   trois règles ci-dessous, le champ heure déborde à droite de l'écran. */
.field-2 input[type="date"],
.field-2 input[type="time"]{
  -webkit-appearance:none;appearance:none;display:block;max-width:100%;
}
.field-2 input[type="date"]::-webkit-date-and-time-value,
.field-2 input[type="time"]::-webkit-date-and-time-value{
  text-align:left;min-width:0;width:100%;margin:0;
}
.field-2 input[type="date"]::-webkit-calendar-picker-indicator,
.field-2 input[type="time"]::-webkit-calendar-picker-indicator{margin:0;padding:0}
/* le signe € posé dans le champ montant */
.input-euro{position:relative}
.input-euro .input{padding-right:34px;width:100%}
.input-euro .euro{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-size:16px;font-weight:600;color:#9A9AA3;pointer-events:none;
}
.input{
  width:100%;border:1.5px solid var(--line);border-radius:14px;padding:13px 14px;
  font-size:16px;font-weight:500;color:var(--dark);background:#FBFBFD;outline:none;
}
.input:focus{border-color:var(--primary);background:#fff}
.input::placeholder{color:#B4B4BE;font-weight:500}
textarea.input{resize:none;line-height:1.45;font-size:15px}

.pills{display:flex;gap:7px}
.pill{
  flex:1;text-align:center;border:1.5px solid var(--line);border-radius:999px;padding:12px 4px;min-height:44px;
  font-size:13.5px;font-weight:600;color:#8A8A93;background:#fff;transition:all .15s ease;
}
.pill.on{background:var(--primary);border-color:var(--primary);color:#fff}
.pills-2{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.pill-sq{
  text-align:center;border:1.5px solid var(--line);border-radius:12px;padding:11px 4px;
  font-size:13.5px;font-weight:600;color:#8A8A93;background:#fff;transition:all .15s ease;
}
.pill-sq.on{background:#EEF2FF;border-color:var(--primary);color:var(--primary)}

/* ---------- 5 bis. Puces de conscience et options d'objectif (v5) ---------- */
/* Les questions posées : puce ronde et texte plus foncé, pour les distinguer
   nettement des réponses à toucher juste en dessous. */
.q{
  position:relative;padding-left:15px;font-size:13.5px;font-weight:700;color:#33333C;
  /* de l'air entre deux questions : enchaînées de près, la série se lisait
     comme un formulaire administratif */
  margin:26px 0 9px;
}
.q:first-child{margin-top:14px}
.q::before{
  content:"";position:absolute;left:0;top:.48em;width:7px;height:7px;border-radius:50%;
  background:var(--primary);
}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  border:1.5px solid var(--line);border-radius:999px;padding:11px 14px;min-height:42px;
  font-size:13px;font-weight:600;color:#8A8A93;background:#fff;white-space:nowrap;
  transition:all .15s ease;
}
.chip.on{background:#EEF2FF;border-color:var(--primary);color:var(--primary)}
.chip:active{transform:scale(.96)}

.opt{
  width:100%;text-align:left;border:1.5px solid var(--line);border-radius:16px;padding:13px 14px;
  display:flex;align-items:center;gap:12px;margin-bottom:9px;background:#fff;transition:all .15s ease;
}
.opt.on{border-color:var(--primary);background:#EEF2FF}
.opt .oi{
  width:34px;height:34px;border-radius:11px;background:#F2F3F8;flex:0 0 34px;
  display:flex;align-items:center;justify-content:center;
}
.opt.on .oi{background:#fff}
.opt .oi svg{width:17px;height:17px;stroke:var(--primary);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.opt-t{font-size:15px;font-weight:600}
.opt-s{font-size:12px;color:#8A8A93;margin-top:2px}
.mini-proj{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.mini-proj b{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--primary)}

/* ligne de cagnotte sous le compteur (texte seul, jamais d'anneau ni de barre) */
.cagnotte{
  display:block;width:100%;background:none;border:none;text-align:center;
  font-size:13.5px;line-height:1.5;color:#7A7A85;margin-top:5px;padding:2px 0;
}
.cagnotte b{color:var(--primary);font-weight:700}

/* ---------- 6. Cartes ---------- */
.card{border-radius:18px;padding:15px 16px}
.card-warm{background:var(--warm)}
.card-line{border:1.5px solid var(--line)}
.card-accent{border:1.6px solid var(--accent);background:#F1FFFA}
.card-blue{background:linear-gradient(135deg,#6B8EFF 0%,#4B6EFA 52%,#7C5CFC 100%);color:#fff}
.card-dashed{border:1.5px dashed #D3DCFE;background:#FBFCFF}
.card-soft{background:#EEF2FF}
.card-grey{background:#F2F3F8}
.card-label{font-size:12px;color:#8A8A93;font-weight:600;margin-bottom:3px}
.card-big{font-size:25px;font-weight:700;letter-spacing:-.03em}
.card-warm .card-label{color:#6E6558}

/* ---------- 7. Lignes de liste ---------- */
.row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:13px 2px;border-bottom:1px solid var(--line);width:100%;
  background:none;border-left:none;border-right:none;border-top:none;text-align:left;
}
.row:last-child{border-bottom:none}
.row-name{font-size:15.5px;font-weight:600}
.row-sub{font-size:12.5px;color:#8A8A93;margin-top:2px}
.row-time{font-size:12.5px;font-weight:600;color:var(--grey);white-space:nowrap}
.row-val{font-size:16px;font-weight:600;color:var(--primary);white-space:nowrap}

/* topbar réglages */
.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.gear{
  width:36px;height:36px;border-radius:99px;background:#F2F3F8;border:none;flex:0 0 36px;
  display:flex;align-items:center;justify-content:center;
}
.gear svg{width:19px;height:19px;stroke:#6B6B72;fill:none;stroke-width:1.9;stroke-linecap:round}
/* la flèche de retour reprend la pastille du bouton réglages, en miroir */
.rond-back i{font-style:normal;font-size:24px;line-height:1;color:var(--grey);margin:-3px 2px 0 0}
/* glyphes de marque dans une puce (Instagram, TikTok) */
.chip .ic-marque{width:15px;height:15px;vertical-align:-3px;margin-right:6px;display:inline-block}

/* en-tête des écrans secondaires : flèche à gauche dans sa pastille, titre au
   centre. Collés l'un à l'autre, les deux se confondaient en thème nuit. */
.entete{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.entete .back{
  flex:0 0 36px;width:36px;height:36px;border-radius:99px;background:#F2F3F8;border:none;padding:0;
  display:flex;align-items:center;justify-content:center;
}
.entete .back i{font-style:normal;font-size:26px;line-height:1;color:var(--grey);margin:-3px 2px 0 0}
.entete-titre{flex:1;text-align:center;font-size:20px;font-weight:700;letter-spacing:-.02em}
.entete-vide{flex:0 0 36px}

/* ---------- 8. Miroir : courbe et axes ---------- */
.axis3{display:flex;margin-top:6px}
.axis3 > div{flex:1}
.axis3 .ax-when{display:block;font-size:11px;font-weight:600;color:#8A7C6A;margin-bottom:1px}
.axis3 .ax-val{display:block;font-size:16px;font-weight:700;letter-spacing:-.02em;color:var(--primary)}
.axis3 .ax-val.grey{color:#8A7C6A;font-size:14px}
.axis3 .c{text-align:center}
.axis3 .r{text-align:right}
.taux-btn{
  background:none;border:none;padding:0;font:inherit;color:inherit;
  text-decoration:underline;text-underline-offset:2px;white-space:nowrap;font-weight:700;
}
#courbe-line{transition:none}

/* ---------- 9. Compteur : le match, gains en haut, dépenses en bas ---------- */
/* SECTION 3.4, écran N4 du storyboard. Le cadre garde une hauteur fixe.
   --neg = hauteur de la zone négative (colonne grise + son montant), posée par
   le JS. La ligne de base remonte d'autant, donc la zone négative se prend sur
   la zone positive et la carte du moment ne descend jamais hors écran. */
.chart{position:relative;height:300px;margin-top:10px;flex:0 0 auto;--neg:0px}
.gl{position:absolute;left:46px;right:2px;height:0;border-top:1px dashed #E4E6F0}
.gl span{
  position:absolute;left:-46px;top:-7px;width:40px;text-align:right;
  font-size:11px;font-weight:600;color:#A8A9B6;
}
/* les repères sous la ligne de base : même pas, trait plus discret */
.gl-neg{border-top-color:#EDEEF4}
.gl-neg span{color:#B9BAC5}
/* la ligne de base suit la zone négative, l'axe vertical descend jusqu'en bas
   du cadre : il se prolonge donc sous la ligne dès qu'il y a des achats */
.axis-x{position:absolute;left:46px;right:2px;bottom:var(--neg);height:0;border-top:1.8px solid #D6D8E4}
.axis-y{position:absolute;left:46px;top:0;bottom:0;width:0;border-left:1.8px solid #D6D8E4}

/* Le décompte sous le graphe : deux pastilles chiffrées, pas une phrase.
   Marge haute large : collées aux montants du graphe, elles se mélangeaient. */
.stats{display:flex;gap:10px;margin-top:30px}
.stat{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border-radius:16px;padding:14px 12px;text-align:center;
}
/* couleurs franches : en pâle sur fond blanc, les deux pastilles se voyaient à peine */
.stat.pos{background:#DFFAF0;border:1px solid #92E7CB}
.stat.neg{background:#EAECF5;border:1px solid #D3D7E6}
.stat-num{font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:1}
.stat.pos .stat-num{color:#05875F}
.stat.neg .stat-num{color:#6E7285}
.stat-lab{font-size:13px;line-height:1.2;font-weight:600;white-space:nowrap}
.stat.pos .stat-lab{color:#0A6B4E}
.stat.neg .stat-lab{color:#6E7285}
.stat-depuis{font-size:12.5px;color:#9A9AA3;text-align:center;margin-top:12px}

/* colonne des envies maîtrisées : elle monte au-dessus de la ligne */
.bar{
  position:absolute;left:calc(46px + 6%);width:30%;
  bottom:var(--neg);height:0;
  border-radius:16px 16px 0 0;
  background:linear-gradient(180deg,#7C5CFC 0%,#4B6EFA 36%,#2BB9CE 72%,#03FDA9 100%);
  box-shadow:0 16px 32px rgba(75,110,250,.26);
  transition:height .7s cubic-bezier(.22,.9,.28,1);
}
.bar::after{
  content:"";position:absolute;inset:0;border-radius:16px 16px 0 0;
  background:linear-gradient(100deg,rgba(255,255,255,.18),rgba(255,255,255,0) 58%);
}
/* colonne de ce qui a été dépensé : décalée à droite, elle plonge SOUS la ligne,
   puisque c'est de l'argent parti. Coins arrondis en bas, le haut reste collé à
   la ligne de base pendant toute l'animation (le JS descend `bottom` en même
   temps qu'il augmente `height`). */
.bar-bas{
  position:absolute;left:calc(46px + 46%);width:30%;
  bottom:var(--neg);height:0;
  border-radius:0 0 14px 14px;background:#D8D8E0;
  transition:height .7s cubic-bezier(.22,.9,.28,1), bottom .7s cubic-bezier(.22,.9,.28,1);
}

/* sans aucun achat, pas de zone négative et la colonne unique reprend le centre */
.chart.solo .bar, .chart.solo .bar-val{left:calc(46px + 26%)}

/* montant des envies maîtrisées : au-dessus de sa colonne */
.bar-val{
  position:absolute;text-align:center;bottom:0;left:calc(46px + 6%);width:30%;
  transition:bottom .7s cubic-bezier(.22,.9,.28,1);
}
/* montant dépensé : sous sa colonne, donc ancré par le haut */
.bar-bas-val{
  position:absolute;text-align:center;top:100%;left:calc(46px + 46%);width:30%;
  transition:top .7s cubic-bezier(.22,.9,.28,1);
}
.bar-val b, .bar-bas-val b{
  display:block;font-weight:700;letter-spacing:-.03em;line-height:1;font-size:23px;color:var(--primary);
}
.bar-bas-val b{font-size:19px;letter-spacing:-.02em;color:#9A9AA3}
.bar-val i, .bar-bas-val i{
  display:block;font-style:normal;font-size:11px;font-weight:600;color:var(--primary);margin-top:3px;line-height:1.2;
}
.bar-bas-val i{color:#9A9AA3}


/* ---------- 10. Lignes « Décidées » de la vue Mes envies ---------- */
.hrow{
  display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);
  width:100%;background:none;border-left:none;border-right:none;border-top:none;text-align:left;
}
.hbar{width:5px;height:34px;border-radius:99px;flex:0 0 5px;background:#D8D8E0}
.hbar.ok{background:var(--accent)}
.hamt{margin-left:auto;font-size:16px;font-weight:700;letter-spacing:-.02em;color:#B4B4BE}
.hamt.ok{color:var(--primary)}

/* ---------- 11. Victoire ---------- */
#view-victoire .body{background:#F7FFFC}
.check{
  width:82px;height:82px;border-radius:99px;background:var(--accent);margin:0 auto;
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(3,200,140,.4);
  animation:pop .42s cubic-bezier(.2,1.4,.4,1) both;
}
.check svg{width:38px;height:38px;stroke:var(--dark);fill:none;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.check[hidden]{display:none}
/* Sarah pouces levés, quand un achat vient d’être annulé */
.vic-sarah{
  display:block;margin:0 auto;max-height:34vh;width:auto;max-width:56%;
  filter:drop-shadow(0 10px 24px rgba(30,40,90,.22));
}
.vic-sarah[hidden]{display:none}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.conf{position:absolute;border-radius:2px;top:-14px;animation:fall .95s ease-in forwards;pointer-events:none}
@keyframes fall{
  0%{opacity:0;transform:translateY(0) rotate(0)}
  12%{opacity:1}
  100%{opacity:0;transform:translateY(420px) rotate(320deg)}
}
.conf-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3}

/* ---------- 12. Ratio (cartes funnel) ---------- */
.ratio-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.ratio-title{font-size:13px;font-weight:600;color:var(--grey)}
.ratio-pct{font-size:19px;font-weight:700;color:var(--primary);letter-spacing:-.02em}
.ratio-bar{display:flex;height:9px;border-radius:99px;overflow:hidden;background:#EDEDF2;gap:2px}
.ratio-bar i{display:block;height:100%;transition:width .7s cubic-bezier(.22,.9,.28,1)}
.ratio-win{background:var(--accent)}
.ratio-lose{background:#D8D8E0}
.ratio-legend{display:flex;justify-content:space-between;margin-top:7px;font-size:12px;color:#7A7A85;font-weight:500}
.ratio-legend b{color:var(--dark);font-weight:700}
.leg{display:flex;align-items:center;gap:5px}
.leg .sq{width:8px;height:8px;border-radius:3px;display:inline-block}

/* carte masterclass */
.sarah{
  width:44px;height:44px;border-radius:99px;object-fit:cover;object-position:center 25%;
  border:2px solid rgba(255,255,255,.75);flex:0 0 44px;background:#fff;
}
.sarah-row{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.sarah-name{font-size:14px;font-weight:700;line-height:1.25}
.sarah-role{font-size:11.5px;opacity:.8;line-height:1.3}
.mc{
  display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.16);
  border-radius:13px;padding:10px 12px;margin:11px 0 12px;
}
.mc .play{
  width:28px;height:28px;border-radius:99px;background:rgba(255,255,255,.26);
  display:flex;align-items:center;justify-content:center;flex:0 0 28px;
}
.mc .play svg{width:13px;height:13px;fill:#fff;stroke:none;margin-left:2px}
.mc-eyebrow{display:block;font-size:10px;font-weight:700;letter-spacing:.11em;opacity:.72;margin-bottom:3px}
.mc-t{display:block;font-size:14px;font-weight:700;line-height:1.32}
/* Deux masterclass, deux cartes identiques : vignette, titre et action dans un
   seul bloc cliquable (2026-08-14). */
/* En-tête de la section des masterclass : un vrai titre, détaché du reste */
.res-entete{margin-top:28px;padding-top:20px;border-top:1.5px solid var(--line)}
.res-badge{
  display:inline-block;background:var(--accent);color:#0B2B22;
  font-size:10.5px;font-weight:700;letter-spacing:.12em;
  padding:5px 10px;border-radius:999px;
}
.res-titre{font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.3;margin-top:10px}
.mc-intro{font-size:13.5px;margin:16px 0 9px}
.mc-carte{
  display:block;text-decoration:none;color:inherit;
  border:1.5px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;
  box-shadow:0 8px 22px rgba(30,40,90,.07);
}
.mc-carte:active{transform:scale(.99)}
.mc-vignette{position:relative;display:block;line-height:0}
.mc-vignette img{width:100%;height:auto;display:block}
.mc-vignette .play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:99px;background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
}
.mc-vignette .play svg{width:20px;height:20px;fill:var(--primary);stroke:none;margin-left:3px}
.mc-corps{display:block;padding:13px 15px 14px}
.mc-corps .mc-eyebrow{color:var(--primary);opacity:1;margin-bottom:4px}
.mc-corps .mc-t{color:var(--dark);font-size:15px}
.mc-go{
  display:flex;align-items:center;gap:6px;margin-top:9px;
  font-size:13.5px;font-weight:700;color:var(--primary);
}
.mc-go svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* le même bandeau masterclass, mais posé sur une carte claire */
.mc.mc-clair{background:#EEF2FF;margin:11px 0 12px}
.mc.mc-clair .play{background:var(--primary)}
.mc.mc-clair .play svg{fill:#fff}
.mc.mc-clair .mc-eyebrow{color:var(--primary);opacity:1}
.mc.mc-clair .mc-t{color:var(--dark)}

/* la carte du funnel n'a plus de croix : une fois fermee, le lien vers la
   masterclass devenait introuvable (decision 2026-08-13). */
#carte-zone{margin-top:12px}
#carte-zone .card{animation:viewIn .3s ease-out}

/* ---------- 13. Carte à poster (aperçu 9:16) ---------- */
.story9{
  /* flex:0 0 auto : sans ca, la carte est comprimee par la colonne flex et son
     rapport 9/16 s'ecrase jusqu'au carre. */
  flex:0 0 auto;
  width:100%;max-width:250px;aspect-ratio:9/16;margin:0 auto;border-radius:22px;
  position:relative;overflow:hidden;color:#fff;
  display:flex;flex-direction:column;justify-content:space-between;padding:26px 23px 21px;
  background:linear-gradient(163deg,#8B5CF6 0%,#5B6EFA 38%,#3A8FE8 66%,#0FD1BC 100%);
  box-shadow:0 20px 44px rgba(60,60,140,.28);
}
.story9::before{
  content:"";position:absolute;width:290px;height:290px;border-radius:99px;left:-84px;bottom:-138px;
  background:radial-gradient(circle,rgba(3,253,169,.5) 0%,rgba(3,253,169,0) 62%);
}
.story9::after{
  content:"";position:absolute;width:210px;height:210px;border-radius:99px;right:-76px;top:-64px;
  background:radial-gradient(circle,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 66%);
}
.s9-top{position:relative;font-size:9px;font-weight:700;letter-spacing:.24em;opacity:.62}
.s9-mid{position:relative}
.s9-say{font-size:13.5px;font-weight:600;line-height:1.42;max-width:196px;margin-bottom:24px}
.s9-deja{font-size:11.5px;font-weight:600;opacity:.75;margin-bottom:2px}
.s9-num{font-size:58px;font-weight:700;letter-spacing:-.055em;line-height:.9}
.s9-num.long{font-size:42px}
.s9-num.long i{font-size:22px}
.s9-num i{font-style:normal;font-size:28px;vertical-align:top;line-height:1.15;margin-left:3px;opacity:.85}
.s9-lab{font-size:14px;font-weight:600;margin-top:9px;line-height:1.35;max-width:140px}
.s9-rule{width:40px;height:3px;border-radius:99px;background:var(--accent);margin:16px 0 0}
.s9-line{font-size:12.5px;line-height:1.55;opacity:.88;max-width:190px}
.s9-foot{position:relative;display:flex;flex-direction:column;gap:3px}
.s9-foot span{font-size:8.5px;font-weight:600;letter-spacing:.05em;opacity:.6}
.s9-foot b{font-size:10.5px;font-weight:700;opacity:.92}

/* Sarah, présente sur les trois styles, désactivable */
/* pas d'ombre portée ici : le filtre dessinait un rectangle clair autour de
   Sarah sur le dégradé (Adrien, 2026-08-15), et l'image exportée en canvas
   n'a pas d'ombre non plus, donc l'aperçu colle enfin au vrai fichier. */
.s9-fig{position:absolute;right:-10px;bottom:26px;width:92px}

/* choix du style de carte et réglages */
.pills-style{justify-content:center;margin-bottom:12px}
.carte-reglages{display:flex;gap:7px;justify-content:center;margin-top:12px}

/* Style B : Sarah sur fond crème, texte en bleu de marque */
.story9.st-b{
  background:var(--warm);color:var(--primary);
  box-shadow:0 20px 44px rgba(120,100,70,.24);
}
.story9.st-b::before,.story9.st-b::after{display:none}
.story9.st-b .s9-rule{background:var(--primary)}

/* Style C : fond encre, chiffre en serif, très peu d’éléments */
.story9.st-c{
  background:#101024;color:#fff;
  box-shadow:0 20px 44px rgba(16,16,36,.36);
}
.story9.st-c::before{
  content:"";position:absolute;width:300px;height:300px;border-radius:99px;left:-110px;bottom:-160px;
  background:radial-gradient(circle,rgba(75,110,250,.55) 0%,rgba(75,110,250,0) 66%);
}
.story9.st-c::after{display:none}
.story9.st-c .s9-num{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:58px;letter-spacing:-.02em}
.story9.st-c .s9-num.long{font-size:42px}
.story9.st-c .s9-num i{font-style:italic;font-size:28px}
.story9.st-c .s9-lab,.story9.st-c .s9-say,.story9.st-c .s9-line,.story9.st-c .s9-deja{font-family:Georgia,"Times New Roman",serif;font-weight:400}
.story9.st-c .s9-lab{font-style:italic;opacity:.78}

/* ---------- 14. Feuilles modales ---------- */
.overlay{
  position:absolute;inset:0;background:rgba(17,17,17,.42);display:flex;align-items:flex-end;
  z-index:20;animation:fadeIn .18s ease-out;
}
.overlay[hidden]{display:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.sheet{
  background:#fff;width:100%;border-radius:26px 26px 0 0;padding:22px 20px 24px;
  max-height:88%;overflow-y:auto;animation:sheetUp .26s cubic-bezier(.22,.9,.28,1);
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
.grab{width:38px;height:4px;background:#E0E0E8;border-radius:99px;margin:0 auto 16px}
.sheet-title{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.25}

/* ---------- 15. Onboarding ---------- */
/* écran d’accueil, direction avatar BD (SECTION 3.0, écran A3 du storyboard) */
#view-onb1 .body{background:#EEF2FF;position:relative;overflow:hidden;padding:20px 20px 18px}
.wm{font-size:10px;font-weight:700;letter-spacing:.22em;color:var(--primary)}
.acc-title{font-size:33px;font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--dark);margin-top:10px}

/* Zone souple : Sarah, sujet de l’écran, centrée et ancrée au-dessus du bouton.
   Elle est dimensionnée par la HAUTEUR disponible, donc sur un petit écran elle
   rétrécit au lieu de monter dans les bulles. */
.acc-scene{
  flex:1 1 auto;min-height:170px;margin-top:4px;
  display:flex;align-items:center;justify-content:center;
}
/* .acc-fig épouse exactement l’image affichée (ni letterboxing ni marge) : les
   bulles se repèrent donc sur la SILHOUETTE et restent bien placées quelle que
   soit la taille de l’écran. Changer d’image ne demande que de réajuster les
   quatre offsets de .b1 / .b2 ci-dessous. */
.acc-fig{position:relative;display:flex;align-items:flex-end;max-width:92%;max-height:100%}
.acc-avatar{
  display:block;max-width:100%;max-height:100%;width:auto;height:auto;
  filter:drop-shadow(0 10px 24px rgba(30,40,90,.25));
}

/* Les deux bulles encadrent sa tête, une de chaque côté, queues convergeant vers
   elle : celle de gauche a sa queue en bas à droite, celle de droite en bas à
   gauche. Les offsets sont en % de la silhouette. */
.bubble{
  position:absolute;z-index:3;
  background:#fff;border:2px solid var(--dark);border-radius:18px;padding:11px 14px;
  font-size:14px;font-weight:700;line-height:1.3;color:var(--dark);
  box-shadow:3px 3px 0 rgba(17,17,17,.9);
}
.bubble::after{
  content:"";position:absolute;bottom:-10px;width:16px;height:16px;background:#fff;
  border-right:2px solid var(--dark);border-bottom:2px solid var(--dark);
}
/* à gauche de sa tête, un peu plus basse : son bord droit s’arrête avant les cheveux */
.bubble.b1{right:74%;bottom:74%;max-width:32%;width:max-content}
.bubble.b1::after{right:16px;transform:rotate(45deg) skew(10deg,10deg)}
/* en haut à droite de sa tête, son bord gauche dégagé des cheveux */
.bubble.b2{left:63%;bottom:90%;max-width:40%;width:max-content}
.bubble.b2::after{left:16px;transform:rotate(45deg) skew(-10deg,-10deg)}

/* elles arrivent l’une après l’autre.
   La règle globale « mouvement réduit » (§ 17) ramène l’état final tout de suite. */
.bubble{animation:bulleIn .25s ease-out both}
.bubble.b2{animation-delay:.4s}
@keyframes bulleIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#view-onb1 .mt-auto{position:relative;z-index:2}

.hero-grad{
  background:linear-gradient(150deg,#6B8EFF 0%,#4B6EFA 50%,#7C5CFC 100%);color:#fff;
}
.hero-grad .tiny{color:rgba(255,255,255,.75)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.16em;opacity:.75;margin-bottom:14px}
.steps{display:flex;gap:6px;justify-content:center;margin-top:16px}
.steps i{width:7px;height:7px;border-radius:99px;background:#E0E0E8;display:block}
.steps i.on{background:var(--primary);width:18px}
.hero-grad .steps i{background:rgba(255,255,255,.3)}
.hero-grad .steps i.on{background:#fff}
.ios-step{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--line)}
.ios-step:last-child{border-bottom:none}
.ios-step > b{
  flex:0 0 30px;width:30px;height:30px;border-radius:99px;background:#EEF2FF;color:var(--primary);
  font-size:13.5px;display:flex;align-items:center;justify-content:center;
}
.ios-step span{font-size:14.5px;line-height:1.45;color:#3C3C46}
.ios-step span b{font-weight:700;color:var(--primary)}

/* Case a cocher de l'etape 2 : le bouton reste eteint tant que l'app n'est pas
   posee sur l'ecran d'accueil, sinon on passe l'ecran sans lire la consigne. */
.tick{
  width:100%;display:flex;align-items:center;gap:12px;text-align:left;background:#fff;
  border:1.6px solid var(--line);border-radius:16px;padding:14px;margin-bottom:12px;
  font-size:14px;font-weight:600;color:#55555E;transition:all .15s ease;
}
.tick .box{
  flex:0 0 24px;width:24px;height:24px;border-radius:8px;border:1.8px solid #CFD3E4;background:#fff;
  display:flex;align-items:center;justify-content:center;
}
.tick .box svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.tick.on{border-color:var(--primary);background:#EEF2FF;color:var(--primary)}
.tick.on .box{background:var(--primary);border-color:var(--primary)}
.tick.on .box svg{opacity:1}
.btn[disabled]{background:#E9E9EF;color:#B4B4BE;box-shadow:none;cursor:default}
.btn[disabled]:active{transform:none}

/* bandeau d'invite à l'installation */
#install-bar{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:9px 14px;
  background:#EEF2FF;border-top:1px solid #DCE3FF;font-size:12.5px;color:var(--primary);font-weight:600;
}
#install-bar[hidden]{display:none}
#install-bar button{background:none;border:none;font:inherit;color:inherit;text-decoration:underline;padding:0}
#install-bar .x{margin-left:auto;text-decoration:none;font-size:17px;opacity:.6}

/* ---------- 16. Divers ---------- */
.mt-auto{margin-top:auto}
.mb6{margin-bottom:6px}.mb10{margin-bottom:10px}.mb14{margin-bottom:14px}.mb18{margin-bottom:18px}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}
.center{text-align:center}
#att-contenu{flex:1 0 auto;display:flex;flex-direction:column}
.empty{
  text-align:center;color:#8A8A93;font-size:14px;line-height:1.6;
  padding:36px 12px;margin:auto 0;
}
.empty svg{width:46px;height:46px;stroke:#D3DCFE;fill:none;stroke-width:1.6;margin-bottom:14px}
.toast{
  position:absolute;left:16px;right:16px;bottom:78px;background:#14141B;color:#fff;
  border-radius:16px;padding:13px 16px;font-size:13.5px;line-height:1.45;z-index:30;
  box-shadow:0 14px 34px rgba(20,25,60,.28);animation:viewIn .2s ease-out;
}
.toast[hidden]{display:none}

/* ---------- 17. Accessibilité : mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .conf{display:none}
}

/* ---------- 18. Écran large : colonne centrée ---------- */
@media (min-width:520px){
  body{padding:0}
  #app{border-radius:0}
}

/* ---------- 15 bis. Écran Ajouter : deux champs, mais de la présence ---------- */
.h-ajout{font-size:30px;font-weight:700;letter-spacing:-.025em;line-height:1.15}
.sous-ajout{font-size:14px;line-height:1.5;color:#7A7A85;margin-top:8px}
.field-xl{margin-bottom:18px}
.field-xl label{font-size:13.5px;color:var(--primary)}
.input-xl{font-size:21px;font-weight:600;padding:17px 16px;border-radius:16px}
.input-euro .input-xl{padding-right:44px}
.input-euro:has(.input-xl) .euro{font-size:19px;right:16px}

/* Bandeau discret, en tête de l'écran Ajouter. Il a d'abord été une grosse carte
   en dégradé : elle pesait plus lourd que le bouton vert juste en dessous, et
   afficher un magot au moment d'une envie donne un permis de dépenser. */

/* action destructrice : la couleur suit le thème */
.row-name.danger{color:#C0392B}
.vic-detail{font-size:13px;line-height:1.55;color:#5B5346}
.p-app.sur-bleu{color:#3A4A8C}