/* =========================================================================
   Le Carnet Caron
   Registre de comptoir de marche : creme, brique d'auvent, bois clair et
   olive. Cartes blanches sur fond papier, une seule carte sombre par ecran,
   celle qui porte l'etat du compte. Fraunces pour ce qui se lit de loin,
   Schibsted Grotesk pour ce qui se lit de pres.
   ========================================================================= */
:root{
  --creme:#F6F2E9; --papier:#FFFFFF; --encre:#17140F;
  --gris:#7A7167; --gris-2:#A79E92;
  --trait:#E7E0D2; --trait-fort:#D6CCB8;
  --brique:#B4432B; --brique-2:#C44E34; --brique-teinte:rgba(180,67,43,.08);
  --olive:#4A5A3A; --olive-2:#5A6D46; --olive-teinte:rgba(74,90,58,.10);
  --olive-texte:#425332;
  --miel:#C98A2B; --miel-teinte:rgba(201,138,43,.13);
  --bois:#E3D5BE; --bois-fort:#CDB894; --ciel:#E4EBEC; --rose:#F0DDD6;
  --clair:rgba(255,255,255,.72); --clair-2:rgba(255,255,255,.22); --clair-3:rgba(255,255,255,.14);
  /* profondeur : quatre niveaux, jamais d'ombre au hasard */
  --e1:0 1px 2px rgba(23,20,15,.045), 0 6px 14px -10px rgba(23,20,15,.22);
  --e2:0 1px 2px rgba(23,20,15,.05), 0 14px 26px -14px rgba(23,20,15,.28);
  --e3:0 2px 5px rgba(23,20,15,.06), 0 26px 44px -22px rgba(23,20,15,.36);
  --e4:0 4px 10px rgba(23,20,15,.07), 0 44px 74px -32px rgba(23,20,15,.46);
  /* l'arete : un liseré clair en haut, un anneau sombre autour. C'est ce qui
     donne le bord chanfreiné des cartes chères, sans la moindre bordure. */
  --arete:inset 0 1px 0 rgba(255,255,255,.72), 0 0 0 1px rgba(23,20,15,.055);
  --arete-creuse:inset 0 1px 2px rgba(23,20,15,.05), 0 0 0 1px rgba(23,20,15,.045);
  --ombre:var(--e1); --ombre-forte:var(--e3);
  --r:18px; --r-s:12px; --r-xs:9px;
  /* mouvement : trois courbes, trois durées, rien d'autre */
  --out:cubic-bezier(.23,1,.32,1);
  --inout:cubic-bezier(.77,0,.175,1);
  --tiroir:cubic-bezier(.32,.72,0,1);
  --t-appui:140ms; --t-pop:180ms; --t-feuille:300ms;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --creme:#141210; --papier:#1D1A16; --encre:#F3EFE6; --gris:#9A9084; --gris-2:#6E655B;
    --trait:#2B2721; --trait-fort:#3C372F;
    --brique:#CE5638; --brique-2:#DC6244; --brique-teinte:rgba(206,86,56,.15);
    --olive:#5E7A44; --olive-2:#6E8D52; --olive-teinte:rgba(123,145,89,.18);
    --olive-texte:#9DB47A;
    --miel:#D9A44E; --miel-teinte:rgba(217,164,78,.16);
    --bois:#2A2419; --bois-fort:#3E3524; --ciel:#1B2122; --rose:#2A211D;
  --e1:0 1px 2px rgba(0,0,0,.34), 0 6px 14px -10px rgba(0,0,0,.7);
    --e2:0 1px 3px rgba(0,0,0,.4), 0 14px 26px -14px rgba(0,0,0,.8);
    --e3:0 2px 6px rgba(0,0,0,.45), 0 26px 44px -22px rgba(0,0,0,.9);
    --e4:0 4px 12px rgba(0,0,0,.5), 0 44px 74px -32px rgba(0,0,0,1);
    --arete:inset 0 1px 0 rgba(255,255,255,.055), 0 0 0 1px rgba(255,255,255,.055);
    --arete-creuse:inset 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04);
    --ombre:var(--e1); --ombre-forte:var(--e3);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --creme:#141210; --papier:#1D1A16; --encre:#F3EFE6; --gris:#9A9084; --gris-2:#6E655B;
  --trait:#2B2721; --trait-fort:#3C372F;
  --brique:#CE5638; --brique-2:#DC6244; --brique-teinte:rgba(206,86,56,.15);
  --olive:#5E7A44; --olive-2:#6E8D52; --olive-teinte:rgba(123,145,89,.18);
    --olive-texte:#9DB47A;
  --miel:#D9A44E; --miel-teinte:rgba(217,164,78,.16);
  --bois:#2A2419; --bois-fort:#3E3524; --ciel:#1B2122; --rose:#2A211D;
  --e1:0 1px 2px rgba(0,0,0,.34), 0 6px 14px -10px rgba(0,0,0,.7);
  --e2:0 1px 3px rgba(0,0,0,.4), 0 14px 26px -14px rgba(0,0,0,.8);
  --e3:0 2px 6px rgba(0,0,0,.45), 0 26px 44px -22px rgba(0,0,0,.9);
  --e4:0 4px 12px rgba(0,0,0,.5), 0 44px 74px -32px rgba(0,0,0,1);
  --arete:inset 0 1px 0 rgba(255,255,255,.055), 0 0 0 1px rgba(255,255,255,.055);
  --arete-creuse:inset 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04);
  --ombre:var(--e1); --ombre-forte:var(--e3);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100dvh;background:var(--creme);color:var(--encre);
  font-family:var(--sans);font-size:15px;line-height:1.5;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;
}
/* grain de papier, une seule image, tres discrete */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){ body::before{opacity:.75} }

button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}
input,select,textarea{font:inherit;color:inherit}
a{color:var(--brique)}
:focus-visible{outline:2.5px solid var(--brique);outline-offset:2px;border-radius:7px}
.sombre :focus-visible{outline-color:#fff}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:600;letter-spacing:-.012em;text-wrap:balance;
  font-variation-settings:"SOFT" 28,"WONK" 1}
.ic{width:18px;height:18px;flex:none}
.n{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.sur{font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--gris)}
.doux{color:var(--gris);font-size:13.5px}
.mini{font-size:12px;color:var(--gris)}
.sombre .doux,.sombre .sur,.sombre .mini{color:var(--clair)}
.gras{font-weight:600}
.centre{text-align:center}
.rien{display:none !important}

/* ---------------------------------------------------------- ossature ---- */
.app{display:grid;grid-template-columns:1fr;min-height:100dvh;position:relative;z-index:1}
@media (min-width:1040px){ .app{grid-template-columns:258px minmax(0,1fr)} }

.rail{display:none}
.app.nu{grid-template-columns:1fr}
.app.nu .rail,.app.nu .barre{display:none}
.app.nu .tete{justify-content:center}
.app.nu .tete h1{max-width:660px;flex:1}
@media (min-width:1040px){
  .rail{display:flex;flex-direction:column;gap:5px;padding:22px 15px 18px;
    border-right:1px solid var(--trait);position:sticky;top:0;height:100dvh;
    background:linear-gradient(180deg,rgba(255,255,255,.5),transparent 40%)}
}
.enseigne{display:flex;align-items:center;gap:11px;padding:2px 8px 22px}
.enseigne .marque{width:38px;height:38px;flex:none}
.enseigne b{display:block;font-family:var(--serif);font-weight:600;font-size:15.5px;line-height:1.2;
  font-variation-settings:"SOFT" 40,"WONK" 1}
.enseigne span{font-size:11.5px;color:var(--gris);display:block;line-height:1.3;margin-top:2px}
.rail nav{display:flex;flex-direction:column;gap:2px}
.rail nav button{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;
  font-size:14.5px;font-weight:500;color:var(--gris);text-align:left;width:100%;
  transition:background 140ms ease,color 140ms ease}
.rail nav button:hover{background:var(--papier);color:var(--encre)}
.rail nav button[aria-current="page"]{background:var(--papier);color:var(--encre);font-weight:600;
  box-shadow:var(--arete),var(--e1)}
.rail nav button[aria-current="page"] .ic{color:var(--brique)}
.rail nav .pastille{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;
  background:var(--brique);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.rail .pied{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.poste-bloc{padding:13px 14px;border-radius:var(--r-s);background:var(--papier);box-shadow:var(--arete),var(--e1);
  text-align:left;width:100%;transition:transform 140ms var(--out)}
.poste-bloc:active{transform:scale(.985)}
.poste-bloc b{display:block;font-size:14.5px;font-weight:600;margin:4px 0 2px}

/* barre de titre */
.tete{display:flex;align-items:center;gap:12px;padding:calc(14px + env(safe-area-inset-top)) 18px 12px;
  position:sticky;top:0;z-index:20;background:linear-gradient(180deg,var(--creme) 72%,transparent)}
@media (min-width:1040px){ .tete{padding:24px 30px 14px} }
.tete h1{font-size:23px;flex:1;min-width:0;font-variation-settings:"SOFT" 36,"WONK" 1}
@media (min-width:1040px){ .tete h1{font-size:27px} }
.tete .marque{width:32px;height:32px;flex:none}
@media (min-width:1040px){ .tete .marque{display:none} }
.puce{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:38px;padding:7px 13px;
  border-radius:999px;background:var(--papier);box-shadow:var(--arete),0 0 0 1px var(--trait);
  font-size:13px;font-weight:600;transition:transform 140ms var(--out)}
.puce:active{transform:scale(.95)}
.puce .ic{width:16px;height:16px;color:var(--brique)}
.puce.hors{background:var(--miel-teinte);box-shadow:inset 0 0 0 1px var(--miel);color:var(--encre)}
.puce.hors .ic{color:var(--miel)}
.puce.calme{background:transparent;box-shadow:none;color:var(--gris);font-weight:500}
@media (max-width:1039px){ .puce.mobile-non{display:none} }

/* contenu */
.vue{display:none;padding:0 18px 100px;flex-direction:column;gap:13px}
.vue.on{display:flex}
/* les cartes d'un ecran entrent en cascade courte, jamais toutes ensemble */
.vue.on>*{animation:entre 300ms var(--out) both}
.vue.on>*:nth-child(1){animation-delay:0ms}
.vue.on>*:nth-child(2){animation-delay:45ms}
.vue.on>*:nth-child(3){animation-delay:90ms}
.vue.on>*:nth-child(4){animation-delay:130ms}
.vue.on>*:nth-child(n+5){animation-delay:160ms}
@media (min-width:1040px){ .vue{padding:0 30px 44px} }
@keyframes entre{from{opacity:0;transform:translateY(10px) scale(.995)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .vue.on>*,.entree,.note,.tampon-pt.neuf{animation:none}
  .feuille{transition-duration:1ms}
}

.bento{display:flex;flex-direction:column;gap:12px}
@media (min-width:1040px){
  .bento{display:grid;gap:13px;align-items:start}
  .b-3,.b-4{align-items:stretch}
  .b-comptoir{grid-template-columns:minmax(0,1.42fr) minmax(0,1fr)}
  .b-2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
  .b-1-2{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
  .b-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .b-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .b-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1039px){
  .b-3,.b-4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch}
}
.col{display:flex;flex-direction:column;gap:13px;min-width:0}

/* ------------------------------------------------------------- cartes ---- */
.carte{--px:20px;--py:20px;--py-haut:var(--py);
  background:var(--papier);border-radius:var(--r);box-shadow:var(--arete),var(--e1);
  padding:var(--py-haut) var(--px) var(--py);min-width:0;
  transition:box-shadow var(--t-pop) ease,transform var(--t-pop) var(--out)}
@media (min-width:1040px){ .carte{--px:22px;--py:22px} }
.carte.serree{--px:17px;--py:15px}
.carte.plate{box-shadow:none;background:transparent;--px:0;--py:0}
/* une carte qu'on peut ouvrir se souleve d'un cheveu sous le curseur */
@media (hover:hover) and (pointer:fine){
  .carte.vivante:hover{box-shadow:var(--arete),var(--e2);transform:translateY(-1px)}
}
.carte.vivante:active{transform:translateY(0) scale(.995)}
.entree{animation:entre 220ms var(--out) both}

.sombre{color:#fff;position:relative;overflow:hidden;--fond:var(--brique);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px rgba(23,20,15,.10), var(--e3)}
.sombre.gagne{--fond:var(--olive)}
.sombre.miel{--fond:#8A6118}
/* Le lambrequin de l'etal, peint dans le fond de la carte : une bande rayee
   et ses festons, plus le grain d'une enseigne peinte par-dessus. Tout est
   en fond, donc rien ne depasse et rien ne se fait rogner. */
.carte.sombre{--py-haut:50px;
  background-color:var(--fond);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.34'/%3E%3C/svg%3E"),
    radial-gradient(circle 11px at 11px 0, rgba(255,255,255,.23) 10.4px, transparent 10.6px),
    radial-gradient(circle 11px at 33px 0, rgba(255,255,255,.09) 10.4px, transparent 10.6px),
    linear-gradient(90deg, rgba(255,255,255,.23) 0 22px, rgba(255,255,255,.09) 22px 44px);
  background-size:140px 140px, 44px 11px, 44px 11px, 44px 23px;
  background-position:0 0, 0 23px, 0 23px, 0 0;
  background-repeat:repeat, repeat-x, repeat-x, repeat-x;
  background-blend-mode:overlay, normal, normal, normal;
  background-origin:border-box}
/* le lambrequin reste hors du flux, tout le reste passe au-dessus du grain */
.sombre>*{position:relative;z-index:2}

.t-xl{font-family:var(--serif);font-size:40px;line-height:1.02;font-weight:600;letter-spacing:-.03em;
  font-variation-settings:"SOFT" 20,"WONK" 0}
.t-l{font-family:var(--serif);font-size:25px;line-height:1.14;font-variation-settings:"SOFT" 32,"WONK" 1}
.t-m{font-family:var(--serif);font-size:18.5px;line-height:1.22;font-variation-settings:"SOFT" 32,"WONK" 1}
.t-s{font-size:15.5px;font-weight:600;letter-spacing:-.012em;font-family:var(--sans)}
@media (min-width:1040px){ .t-l{font-size:28px} .t-xl{font-size:46px} }

/* tuiles chiffrees */
.tuile{border-radius:var(--r);padding:16px 17px;background:var(--papier);min-width:0;
  box-shadow:var(--arete),var(--e1);transition:box-shadow var(--t-pop) ease,transform var(--t-pop) var(--out)}
button.tuile{text-align:left;width:100%}
button.tuile:active{transform:scale(.985)}
.tuile.bx{box-shadow:var(--arete-creuse);background:var(--brique-teinte)}
.tuile.vt{box-shadow:var(--arete-creuse);background:var(--olive-teinte)}
.tuile.sb{box-shadow:var(--arete-creuse);background:var(--bois)}
.tuile.cl{box-shadow:var(--arete-creuse);background:var(--ciel)}
.tuile.or{box-shadow:var(--arete-creuse);background:var(--miel-teinte)}
.tuile.gr{box-shadow:var(--arete-creuse);background:var(--rose)}
.tuile b{display:block;font-family:var(--serif);font-size:30px;font-weight:600;letter-spacing:-.028em;
  line-height:1.08;font-variant-numeric:tabular-nums;margin-top:8px;
  font-variation-settings:"SOFT" 22,"WONK" 0}
.tuile.vt b{color:var(--olive-texte)} .tuile.bx b{color:var(--brique)} .tuile.or b{color:#8A6118}
@media (prefers-color-scheme:dark){ .tuile.or b{color:var(--miel)} }
.tuile em{display:block;font-style:normal;font-size:12.5px;color:var(--gris);margin-top:3px;line-height:1.35}
.tuile .fleche{font-size:12px;font-weight:600}
@media (max-width:1039px){ .tuile{padding:13px 14px} .tuile b{font-size:25px;margin-top:5px} }

/* ------------------------------------------------------------ boutons ---- */
.b{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:54px;padding:13px 20px;border-radius:14px;font-size:16px;font-weight:600;
  letter-spacing:-.012em;color:#fff;
  background:linear-gradient(180deg,var(--brique-2),var(--brique));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 1px 2px rgba(23,20,15,.20), var(--e1);
  transition:transform var(--t-appui) var(--out),filter 140ms ease,box-shadow 140ms ease}
.b:active{transform:scale(.97)}
.b.brique{background:linear-gradient(180deg,var(--brique-2),var(--brique))}
.b.vert{background:linear-gradient(180deg,var(--olive-2),var(--olive))}
.b.danger{background:linear-gradient(180deg,#AC3626,#9B2C1E)}
.b.blanc{background:var(--papier);color:var(--encre);
  box-shadow:var(--arete),0 0 0 1px var(--trait-fort),var(--e1)}
.b.clair{background:#fff;color:var(--brique)}
.sombre.gagne .b.clair{color:var(--olive)}
.b.fantome{background:var(--clair-2);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.b.mince{min-height:44px;font-size:14.5px;padding:10px 16px;border-radius:12px}
.b.auto{width:auto}
a.b{text-decoration:none;color:#fff}
a.b.blanc{color:var(--encre)}
.b[disabled]{opacity:.5;pointer-events:none}
.b .ic{width:19px;height:19px}
@media (hover:hover) and (pointer:fine){
  .b:hover{filter:brightness(1.06)}
  .b.blanc:hover{filter:none;background:var(--creme)}
  .b.clair:hover{filter:none;background:#F4F0E8}
  .b.fantome:hover{filter:none;background:rgba(255,255,255,.32)}
}
.ronde{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--creme);color:var(--gris);
  transition:background 140ms ease,color 140ms ease,transform var(--t-appui) var(--out)}
.ronde:active{transform:scale(.92)}
.ronde:hover{background:var(--trait);color:var(--encre)}
.sombre .ronde{background:var(--clair-2);color:#fff}
.lien{min-height:40px;color:var(--brique);font-size:14px;font-weight:600;text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:1.5px;padding:0 2px}
.retour{display:inline-flex;align-items:center;gap:5px;min-height:40px;color:var(--gris);
  font-size:13.5px;font-weight:500}
.retour:hover{color:var(--encre)}
.rangee{display:flex;gap:9px;flex-wrap:wrap}
.rangee>.b{width:auto;flex:1;min-width:140px}
@media (max-width:520px){ .rangee>.b{min-width:0;font-size:14.5px;padding:12px 12px} .b .ic{width:17px;height:17px} }

/* --------------------------------------------------------- formulaires --- */
.champ{display:block;margin-bottom:11px}
.champ>span{display:block;font-size:12.5px;font-weight:600;color:var(--gris);margin-bottom:5px}
.champ input,.champ select,.champ textarea{
  width:100%;min-height:50px;padding:12px 14px;border-radius:12px;background:var(--creme);
  border:1.5px solid transparent;font-size:16px;transition:border-color 140ms ease,background 140ms ease}
.champ textarea{min-height:84px;resize:vertical;line-height:1.45}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--brique);background:var(--papier)}
.champ.moitie{display:inline-block;width:calc(50% - 5px)}
.champ.moitie+.champ.moitie{margin-left:10px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.aide{font-size:12px;color:var(--gris);margin-top:5px;line-height:1.4}

.cherche{position:relative}
.cherche .ic{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--gris);
  width:20px;height:20px;pointer-events:none}
.cherche input{width:100%;min-height:58px;padding:14px 46px 14px 46px;border-radius:15px;
  background:var(--creme);border:1.5px solid transparent;font-size:17px;font-weight:500}
.cherche input:focus{outline:none;border-color:var(--brique);background:var(--papier)}
.cherche .vider{position:absolute;right:9px;top:50%;transform:translateY(-50%)}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;display:none}

.bascule{display:flex;gap:4px;padding:4px;background:var(--creme);border-radius:13px}
@media (max-width:1039px){ .bascule button{font-size:12.5px;padding:0 6px} }
.bascule button{flex:1;min-height:40px;border-radius:10px;font-size:13.5px;font-weight:600;white-space:nowrap;
  color:var(--gris);transition:background 140ms ease,color 140ms ease}
.bascule button[aria-pressed="true"]{background:var(--papier);color:var(--encre);
  box-shadow:var(--arete),var(--e1)}
.interrupteur{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;text-align:left}
.interrupteur .piste{width:46px;height:28px;border-radius:14px;background:var(--trait-fort);flex:none;
  position:relative;transition:background 180ms var(--out)}
.interrupteur .piste::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform 180ms var(--out)}
.interrupteur[aria-pressed="true"] .piste{background:var(--olive)}
.interrupteur[aria-pressed="true"] .piste::after{transform:translateX(18px)}

/* ------------------------------------------------------------ compteur --- */
.tampons{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.tampon-pt{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--serif);font-size:14px;font-weight:700;
  border:1.7px dashed var(--clair-2);color:transparent;
  transition:background 260ms var(--out),border-color 260ms var(--out),color 260ms var(--out),transform 260ms var(--out)}
.tampon-pt.on{border-style:solid;border-color:transparent;background:#fff;color:var(--brique);
  transform:rotate(-7deg)}
.sombre.gagne .tampon-pt.on{color:var(--olive)}
.tampon-pt.on:nth-child(2n){transform:rotate(6deg)}
.tampon-pt.on:nth-child(3n){transform:rotate(-3deg)}
.tampon-pt.neuf{animation:tamponne 460ms var(--out) both}
@keyframes tamponne{0%{transform:scale(2.1) rotate(-16deg);opacity:0}
  55%{transform:scale(.9) rotate(4deg);opacity:1}100%{transform:scale(1) rotate(-7deg)}}
.tampon-pt.clair{border-color:var(--trait-fort);color:transparent}
.tampon-pt.clair.on{background:var(--brique);color:#fff;border-color:transparent}

.jauge{height:10px;border-radius:5px;background:var(--clair-3);overflow:hidden}
.jauge i{display:block;height:100%;border-radius:5px;background:#fff;transition:width 620ms var(--out)}
.jauge.clair{background:var(--trait)}
.jauge.clair i{background:var(--brique)}
.jauge.clair.vt i{background:var(--olive)}

.anneau{width:104px;height:104px;flex:none;position:relative}
.anneau svg{transform:rotate(-90deg)}
.anneau .val{position:absolute;inset:0;display:grid;place-items:center;text-align:center;line-height:1.05}
.anneau .val b{font-family:var(--serif);font-size:24px;font-weight:600;display:block;
  font-variant-numeric:tabular-nums}
.anneau .val em{font-style:normal;font-size:11px;opacity:.75}

/* les pastilles de specialite : un doigt, pas un formulaire */
.pastilles{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 13px;justify-content:center}
.pastille-spe{display:inline-flex;align-items:center;gap:5px;min-height:38px;padding:8px 13px;
  border-radius:999px;font-size:13.5px;font-weight:600;color:var(--gris);background:var(--creme);
  box-shadow:var(--arete-creuse);
  transition:transform var(--t-appui) var(--out),background 140ms ease,color 140ms ease,box-shadow 140ms ease}
.pastille-spe .ic{width:15px;height:15px}
.pastille-spe:active{transform:scale(.95)}
.pastille-spe.on{background:var(--brique);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),var(--e1)}
@media (hover:hover) and (pointer:fine){
  .pastille-spe:hover{color:var(--encre)}
  .pastille-spe.on:hover{color:#fff;filter:brightness(1.06)}
}

/* --------------------------------------------------- rail de statut ------ */
.rail-statut{margin-top:18px}
.rail-statut .bornes{display:flex;justify-content:space-between;gap:14px;
  font-size:13px;font-weight:600;letter-spacing:-.01em}
.rail-statut .bornes span:last-child{text-align:right;opacity:.72}
.rail-statut .bornes.chiffres{margin-top:9px;font-size:11.5px;font-weight:500;opacity:.72}
.rail-statut .bornes.chiffres span:last-child{opacity:1;font-weight:600}
.rail-statut .piste{position:relative;height:6px;border-radius:3px;margin-top:10px;
  background:var(--clair-3);box-shadow:inset 0 1px 2px rgba(0,0,0,.14)}
.rail-statut .piste i{display:block;height:100%;border-radius:3px;background:#fff;
  transition:width 700ms var(--out)}
.rail-statut .piste::after{content:"";position:absolute;top:50%;left:var(--pos);width:14px;height:14px;
  border-radius:50%;background:#fff;transform:translate(-50%,-50%);
  box-shadow:0 1px 4px rgba(0,0,0,.35), 0 0 0 3px rgba(255,255,255,.22)}
.rail-statut.clair .piste{background:var(--trait)}
.rail-statut.clair .piste i,.rail-statut.clair .piste::after{background:var(--brique)}
.rail-statut.clair .piste::after{box-shadow:0 1px 4px rgba(23,20,15,.3), 0 0 0 3px var(--brique-teinte)}

/* la variation d'une periode a l'autre, en pastille et non en triangle */
.tuile .delta{color:var(--olive-texte);display:inline-flex;align-items:center;gap:3px;margin-top:8px;padding:3px 9px 3px 6px;
  border-radius:999px;font-style:normal;font-size:11.5px;font-weight:600;line-height:1.3;
  background:var(--olive-teinte)}
.tuile .delta.bas{background:rgba(155,44,30,.11);color:#9B2C1E}
.tuile .delta .ic{width:13px;height:13px}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tuile .delta.bas{background:rgba(214,90,68,.16);color:#E08069}
}
:root[data-theme="dark"] .tuile .delta.bas{background:rgba(214,90,68,.16);color:#E08069}

/* l'unite ne pese pas autant que le chiffre */
.unite{font-size:.46em;font-weight:500;opacity:.6;margin-left:.14em;letter-spacing:0;
  font-family:var(--sans)}

/* les barres de comparaison : une rainure creusee, une barre pleine dedans */
.barre-piste{flex:1;height:26px;border-radius:8px;overflow:hidden;background:var(--creme);
  box-shadow:var(--arete-creuse)}
.barre-piste i{display:block;height:100%;border-radius:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  transition:width 700ms var(--out)}

/* -------------------------------------------------------------- listes --- */
.liste{list-style:none;margin:0;padding:0}
.liste li+li{border-top:1px solid var(--trait)}
.rang{display:flex;align-items:center;gap:12px;min-height:60px;padding:9px 0;width:100%;text-align:left}
button.rang{transition:opacity 120ms ease,transform var(--t-appui) var(--out)}
button.rang:active{opacity:.6;transform:scale(.995)}
@media (hover:hover){ button.rang:hover .q b{color:var(--brique)} }
.q{flex:1;min-width:0}
.q b{display:block;font-weight:600;font-size:15.5px;letter-spacing:-.012em;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;transition:color 120ms ease}
.q span{display:block;font-size:12.5px;color:var(--gris);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.pastille-lettre{width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center;
  font-family:var(--serif);font-size:16px;font-weight:600;background:var(--bois);color:var(--encre)}
.pastille-lettre.bx{background:var(--brique-teinte);color:var(--brique)}
.pastille-lettre.vt{background:var(--olive-teinte);color:var(--olive-texte)}
.pastille-lettre.or{background:var(--miel-teinte);color:#8A6118}
.pastille-lettre.cl{background:var(--ciel)}
.pastille-lettre.gr{background:var(--rose)}
.etiq{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  font-size:11.5px;font-weight:600;background:var(--creme);color:var(--gris);white-space:nowrap}
.etiq.bx{background:var(--brique-teinte);color:var(--brique)}
.etiq.vt{background:var(--olive-teinte);color:var(--olive-texte)}
.etiq.or{background:var(--miel-teinte);color:#8A6118}
.etiq.cl{background:var(--ciel);color:var(--encre)}
.etiq.sb{background:var(--bois);color:var(--encre)}
.etiq.gr{background:var(--rose);color:var(--encre)}
.etiq.fort{background:var(--olive);color:#fff}
.etiq.fort .ic{color:#fff}
.tuile.pleine{background:var(--olive);box-shadow:none}
.tuile.pleine b,.tuile.pleine em,.tuile.pleine .sur{color:#fff}
.tuile.pleine em,.tuile.pleine .sur{opacity:.8}
@media (prefers-color-scheme:dark){ .etiq.or{color:var(--miel)} }
.vide{padding:34px 18px;text-align:center;color:var(--gris)}
.vide .ic{width:30px;height:30px;color:var(--trait-fort);margin-bottom:8px}

/* --------------------------------------------------------------- pave ---- */
.pave{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.touche{min-height:62px;border-radius:14px;background:var(--creme);font-family:var(--serif);
  box-shadow:var(--arete-creuse);
  font-size:24px;font-weight:600;display:grid;place-items:center;
  transition:transform 90ms var(--out),background 120ms ease}
.touche:active{transform:scale(.94);background:var(--trait)}
.touche.eff{background:transparent;box-shadow:inset 0 0 0 1.5px var(--trait)}
.touche .ic{width:24px;height:24px;color:var(--gris)}
.montant-affiche{font-family:var(--serif);font-size:52px;font-weight:600;letter-spacing:-.035em;
  line-height:1;font-variant-numeric:tabular-nums;text-align:center;padding:6px 0 2px;min-height:56px}
.montant-affiche.creux{color:var(--gris-2)}
@media (max-width:1039px){ .montant-affiche{font-size:44px} .touche{min-height:56px;font-size:22px} }

/* ------------------------------------------------------------ feuilles --- */
.voile{position:fixed;inset:0;z-index:60;background:rgba(23,20,15,.42);backdrop-filter:blur(3px);
  display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity 200ms ease}
.voile.on{opacity:1}
@media (min-width:760px){ .voile{align-items:center;padding:24px} }
.feuille{width:100%;max-width:560px;max-height:92dvh;background:var(--papier);
  border-radius:22px 22px 0 0;box-shadow:var(--arete),var(--e4);display:flex;flex-direction:column;
  transform:translateY(100%);transition:transform var(--t-feuille) var(--tiroir);overflow:hidden}
.feuille.large{max-width:860px}
.voile.on .feuille{transform:none}
@media (min-width:760px){
  /* sur bureau la feuille n'est pas un tiroir : elle apparait a sa place, presque en place */
  .feuille{border-radius:20px;transform:scale(.97);opacity:0;
    transition:transform var(--t-pop) var(--out),opacity var(--t-pop) var(--out)}
  .voile.on .feuille{transform:none;opacity:1}
}
.poignee{width:38px;height:4px;border-radius:2px;background:var(--trait-fort);margin:9px auto 0;flex:none}
@media (min-width:760px){ .poignee{display:none} }
.feuille-tete{display:flex;align-items:flex-start;gap:12px;padding:16px 20px 12px}
.feuille-tete>div{flex:1;min-width:0}
.feuille-corps{padding:0 20px 8px;overflow:auto;flex:1}
.feuille-pied{display:flex;gap:9px;padding:14px 20px calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid var(--trait);background:var(--papier)}
.feuille-pied .b{flex:1}

/* ------------------------------------------------- notes de bas d'ecran -- */
.notes{position:fixed;left:0;right:0;bottom:calc(78px + env(safe-area-inset-bottom));z-index:80;
  display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 14px}
@media (min-width:1040px){ .notes{bottom:24px} }
.note{display:flex;align-items:center;gap:9px;max-width:440px;padding:12px 17px;border-radius:14px;
  background:var(--encre);color:var(--creme);font-size:14px;font-weight:500;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),var(--e4);animation:monteNote 260ms var(--out) both}
.note .ic{width:18px;height:18px;color:var(--olive-2)}
.note.erreur{background:#7E2418} .note.erreur .ic{color:#F2C4B8}
.note.part{opacity:0;transform:translateY(8px) scale(.97);
  transition:opacity 200ms ease,transform 200ms var(--out)}
@keyframes monteNote{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

/* --------------------------------------------------------------- pluie --- */
.pluie{position:fixed;inset:0;z-index:90;pointer-events:none}
.pluie i{position:absolute;width:9px;height:9px;border-radius:2px;
  animation:vole var(--t) var(--out) forwards}
@keyframes vole{
  0%{opacity:1;transform:translate(0,0) rotate(0)}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r))}}

/* ------------------------------------------------------ barre du bas ----- */
.barre{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:rgba(246,242,233,.92);
  backdrop-filter:saturate(1.6) blur(14px);border-top:1px solid var(--trait)}
@media (prefers-color-scheme:dark){ .barre{background:rgba(20,18,16,.92)} }
@media (min-width:1040px){ .barre{display:none} }
.barre button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px 5px;
  border-radius:12px;font-size:10.5px;font-weight:600;color:var(--gris);position:relative}
.barre button .ic{width:22px;height:22px}
.barre button[aria-current="page"]{color:var(--brique)}
.barre .pastille{position:absolute;top:3px;right:calc(50% - 20px);min-width:17px;height:17px;padding:0 5px;
  border-radius:9px;background:var(--brique);color:#fff;font-size:10px;font-weight:700;
  display:grid;place-items:center}

/* ------------------------------------------------------------ tableau ---- */
.tableau{width:100%;border-collapse:collapse;font-size:13.5px}
.tableau th{text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gris);padding:0 10px 9px 0;white-space:nowrap}
.tableau td{padding:10px 10px 10px 0;border-top:1px solid var(--trait);vertical-align:middle}
.tableau td:last-child,.tableau th:last-child{padding-right:0;text-align:right}
.defile{overflow-x:auto;margin:0 -20px;padding:0 20px}

/* -------------------------------------------------------------- divers --- */
.qr{display:block;border-radius:10px}
.separe{height:1px;background:var(--trait);margin:4px 0}
.filet{display:flex;align-items:center;gap:11px;margin:2px 0 10px}
.filet::after{content:"";flex:1;height:1px;background:var(--trait)}
.grille-cohorte{display:grid;gap:3px;font-size:10.5px}
.case-cohorte{height:44px;border-radius:6px;display:grid;place-items:center;font-weight:600;
  color:var(--encre);font-variant-numeric:tabular-nums}
.charge{display:grid;place-items:center;min-height:60dvh;gap:14px;color:var(--gris)}
.tourne{width:26px;height:26px;border-radius:50%;border:2.5px solid var(--trait);
  border-top-color:var(--brique);animation:tourner .8s linear infinite}
@keyframes tourner{to{transform:rotate(360deg)}}
.pas-a-pas{display:flex;gap:5px;margin-bottom:18px}
.pas-a-pas i{flex:1;height:4px;border-radius:2px;background:var(--trait)}
.pas-a-pas i.on{background:var(--brique)}
.marque{display:block}

/* ------------------------------------------------------- la carte client - */
.carte-client{max-width:520px;margin:0 auto;padding:0 18px calc(40px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:13px}
.carte-client .entete{display:flex;align-items:center;gap:12px;
  padding:calc(20px + env(safe-area-inset-top)) 2px 6px}
.carte-client .entete b{font-family:var(--serif);font-size:16px;font-weight:600;display:block;line-height:1.2}
.carte-client .entete span{font-size:12px;color:var(--gris)}
.porte-carte{position:relative;overflow:hidden}
.porte-carte .code{font-family:var(--serif);font-size:26px;letter-spacing:.2em;font-weight:600}
.ardoise{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.ardoise div{padding:11px 12px;border-radius:var(--r-s);background:var(--creme)}
.ardoise b{display:block;font-family:var(--serif);font-size:19px;font-variant-numeric:tabular-nums;margin-top:2px}
.pied-carte{text-align:center;color:var(--gris);font-size:12px;line-height:1.5;padding:8px 0 0}

/* ------------------------------------------------------------ impression - */
@media print{
  @page{margin:14mm}
  body{background:#fff;color:#000}
  body::before,.notes,.barre,.pluie{display:none !important}
  .app{display:none !important}
  .voile{position:static;inset:auto;display:block;padding:0;opacity:1;
    background:none;backdrop-filter:none}
  .voile .feuille{max-width:none;max-height:none;box-shadow:none;border-radius:0;transform:none}
  .voile .poignee,.voile .feuille-pied,.voile .feuille-tete .ronde,.voile .rangee{display:none}
  .carte,.tuile{box-shadow:none;border:1px solid #ddd}
  .carte.sombre{background:#fff !important;color:#000 !important;border:2px solid #B4432B}
    .carte.sombre .doux,.carte.sombre .sur{color:#555 !important}
  .tampon-pt{border-color:#B4432B !important;color:#B4432B}
  .tampon-pt.on{background:#B4432B !important;color:#fff}
}

/* ------------------------------------------------ la planche a decouper -- */
.planche{padding:18px;max-width:1100px;margin:0 auto}
.planche-tete{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 18px;
  justify-content:space-between;
  background:var(--papier);border-radius:var(--r);box-shadow:var(--arete),var(--e1);margin-bottom:20px}
.planche-grille{display:grid;grid-template-columns:repeat(2,85mm);gap:0;justify-content:center}
.planche-tete>div:first-child{min-width:240px}
.planche-pied{text-align:center;color:var(--gris);font-size:12px;margin-top:18px}

.carte-papier{position:relative;width:85mm;height:54mm;overflow:hidden;color:#fff;
  background-color:#B4432B;box-shadow:inset 0 0 0 .3mm rgba(255,255,255,.10);
  outline:.2mm dashed rgba(23,20,15,.25);outline-offset:-.1mm;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.3'/%3E%3C/svg%3E");
  background-blend-mode:overlay}
.cp-lambrequin{position:absolute;top:0;left:0;right:0;height:8mm;
  background-image:
    radial-gradient(circle 2.6mm at 2.6mm 0, rgba(255,255,255,.24) 2.45mm, transparent 2.5mm),
    radial-gradient(circle 2.6mm at 7.8mm 0, rgba(255,255,255,.10) 2.45mm, transparent 2.5mm),
    linear-gradient(90deg, rgba(255,255,255,.24) 0 5.2mm, rgba(255,255,255,.10) 5.2mm 10.4mm);
  background-size:10.4mm 2.6mm, 10.4mm 2.6mm, 10.4mm 5.4mm;
  background-position:0 5.4mm, 0 5.4mm, 0 0;
  background-repeat:repeat-x}
.cp-corps{position:absolute;inset:11mm 5mm 5mm;display:flex;align-items:flex-end;
  justify-content:space-between;gap:4mm}
.cp-maison{font-size:2.6mm;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  opacity:.75}
.cp-nom{font-family:var(--serif);font-size:5.4mm;font-weight:600;margin-top:1.2mm;line-height:1.1}
.cp-code{font-family:var(--serif);font-size:7.4mm;font-weight:700;letter-spacing:.16em;
  margin-top:3mm;line-height:1}
.cp-lien{font-size:2.4mm;opacity:.7;margin-top:1.6mm}
.cp-qr{flex:none;background:#fff;padding:1.4mm;border-radius:1.6mm}
.cp-qr svg{display:block;width:24mm;height:24mm}

@media print{
  @page{size:A4;margin:8mm}
  .planche{padding:0;max-width:none}
  .planche-tete,.planche-pied{display:none !important}
  .planche-grille{gap:0}
  .carte-papier{break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact;
    outline:.2mm dashed #999}
}

/* ------------------------------------------------ la frise de douze mois - */
.frise{display:inline-flex;align-items:flex-end;gap:2px;height:26px;width:150px}
.frise i{flex:1;min-width:3px;background:var(--brique);border-radius:2px;opacity:.85;
  transition:height 500ms var(--out)}
.frise i:hover{opacity:1}

/* ------------------------------------------ le parcours du client ------- */
.parcours{max-width:480px;margin:0 auto;padding:0 18px calc(34px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:13px}
.parcours-tete{display:flex;align-items:center;gap:12px;padding:calc(22px + env(safe-area-inset-top)) 2px 6px}
.parcours-tete b{font-family:var(--serif);font-size:16px;font-weight:600;display:block;line-height:1.2}
.parcours-tete span{font-size:12px;color:var(--gris)}
.parcours-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.parcours-points li{display:flex;align-items:center;gap:10px;font-size:15px}
.parcours-points .ic{width:17px;height:17px;opacity:.85;flex:none}
.parcours-code{font-family:var(--serif);font-size:34px;font-weight:700;letter-spacing:.2em;
  margin-top:18px;padding:14px 0 0;border-top:1px solid var(--clair-3)}
.parcours-erreur{display:flex;align-items:center;gap:8px;margin:14px 0 0;padding:11px 14px;
  border-radius:var(--r-s);background:rgba(155,44,30,.09);color:#9B2C1E;font-size:14px;font-weight:500}
.parcours-erreur .ic{width:17px;height:17px;flex:none}
.parcours-pied{text-align:center;color:var(--gris);font-size:12px;line-height:1.5;padding:6px 0 0}
.parcours .b .tourne{border-top-color:#fff;border-color:rgba(255,255,255,.35);border-top-color:#fff}

/* ------------------------------------------ l'affichette de l'etal ------ */
.affiche{position:relative;width:148mm;height:210mm;margin:0 auto;overflow:hidden;color:#fff;
  background-color:#B4432B;border-radius:3mm;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.3'/%3E%3C/svg%3E");
  background-blend-mode:overlay}
.af-lambrequin{position:absolute;top:0;left:0;right:0;height:16mm;
  background-image:
    radial-gradient(circle 5mm at 5mm 0, rgba(255,255,255,.24) 4.85mm, transparent 4.9mm),
    radial-gradient(circle 5mm at 15mm 0, rgba(255,255,255,.10) 4.85mm, transparent 4.9mm),
    linear-gradient(90deg, rgba(255,255,255,.24) 0 10mm, rgba(255,255,255,.10) 10mm 20mm);
  background-size:20mm 5mm, 20mm 5mm, 20mm 11mm;
  background-position:0 11mm, 0 11mm, 0 0;background-repeat:repeat-x}
.af-corps{position:absolute;inset:26mm 14mm 12mm;display:flex;flex-direction:column;
  align-items:center;text-align:center}
.af-maison{font-size:4mm;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.af-titre{font-family:var(--serif);font-size:13mm;line-height:1.08;font-weight:600;margin:4mm 0 0;
  color:#fff;font-variation-settings:"SOFT" 30,"WONK" 1}
.af-quoi{font-size:4.6mm;line-height:1.4;margin:5mm 0 0;opacity:.88;max-width:105mm}
.af-qr{background:#fff;padding:5mm;border-radius:4mm;margin:8mm 0 0}
.af-qr svg{display:block;width:56mm;height:56mm}
.af-mode{font-size:4.4mm;font-weight:600;line-height:1.35;margin:6mm 0 0}
.af-sinon{font-size:3.6mm;line-height:1.4;margin:auto 0 0;opacity:.75}

@media print{
  @page{size:A5;margin:0}
  .affiche{border-radius:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;
    width:148mm;height:210mm}
}