/* Page métier « prothésiste ongulaire » : se charge après css/metier.css (le socle).
   1. Le thème .m-app--ongles : des variables --app-* seulement, d'après la démo du métier :
      fond nuit, violet calmé #6249B8, une couleur par prestation (pose, gainage, remplissage, dépose + repose, dépose seule).
   2. Les pièces d'écran propres aux ongles, absentes du socle : ongles dessinés, formes, techniques avec prix,
      estimation, suivi de la demande, carte de fidélité, fil de messages, agenda à points, menu du bas flottant.
   Tailles en --u (1 % de la largeur de l'écran dessiné), comme le socle. Aucun style en ligne : couleurs par classes. */

/* =====================================================================
   1. Thème
   Catégories c1 à c6 : pose, gainage, remplissage, dépose + repose, dépose seule, liste d'attente.
   --app-accent-texte : l'accent posé en texte sur le fond nuit (le violet #6249B8 sert aux aplats).
   ===================================================================== */
.m-app--ongles {
  --app-fond: #0A0912; --app-fond-2: #1A1824; --app-fond-3: #2A2737; --app-carte: #13111C;
  --app-encre: #F5F4FA; --app-doux: #A3A0B4; --app-trait: #2C2939;
  --app-accent: #6249B8; --app-accent-vif: #7B62D4; --app-accent-clair: #241E3B; --app-sur-accent: #FFFFFF; --app-accent-texte: #B4A6EA;
  --app-fort: #2E2A40; --app-sur-fort: #FFFFFF; --app-ok: #6FD49A; --app-att: #F3C06B;
  --app-police: -apple-system, "SF Pro Text", "Inter", system-ui, "Segoe UI", Roboto, sans-serif; --app-police-titre: -apple-system, "SF Pro Display", "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  --app-titre-graisse: 700; --app-titre-espace: -.01em; --app-titre-casse: none; --app-sur-espace: .08em; --app-btn-espace: 0em; --app-gras: 600;
  --app-r: 4.4; --app-r-bouton: calc(var(--u) * 3.2);
  --app-c1: #A48FE8; --app-c2: #E57AAE; --app-c3: #4FC0BB; --app-c4: #E9A65A; --app-c5: #A3ABBE; --app-c6: #7C8597;
}

/* =====================================================================
   2. Pièces d'écran
   ===================================================================== */

/* Un vrai bouton habillé en .a-btn (réglage « Acompte reçu ») : sans la bordure native du navigateur */
.m-app button.a-btn { border: 0; }

/* ---------- En-tête : logo carré + nom, boutons ronds ---------- */
.a-marque { display: inline-flex; align-items: center; gap: calc(var(--u) * 2.2); min-width: 0; font-family: var(--app-police-titre); font-size: calc(var(--u) * 4.6); font-weight: var(--app-gras); letter-spacing: -.01em; white-space: nowrap; }
.a-lg { flex: none; display: grid; place-items: center; width: calc(var(--u) * 7.4); height: calc(var(--u) * 7.4); border-radius: calc(var(--u) * 2.2); background: linear-gradient(150deg, #8C6CFF, var(--app-accent) 60%, #3A1C9A); color: #fff; font-size: calc(var(--u) * 2.9); font-weight: 800; letter-spacing: .02em; }
.a-boutons { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 1.8); }
.a-rbtn { flex: none; display: grid; place-items: center; width: calc(var(--u) * 9.4); height: calc(var(--u) * 9.4); border: 1px solid var(--app-trait); border-radius: 50%; background: var(--app-fond-2); color: var(--app-encre); }
.a-rbtn svg, .a-tabbar svg, .a-tampons svg { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.a-rbtn svg { width: 48%; height: 48%; }

/* ---------- Menu du bas flottant (côté pro) : trois entrées ---------- */
.a-tabbar {
  position: absolute; z-index: 2; left: calc(var(--u) * 4); right: calc(var(--u) * 4); bottom: calc(var(--u) * 4);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * .6); padding: calc(var(--u) * 1.5);
  border: 1px solid var(--app-trait); border-radius: calc(var(--u) * 8); background: color-mix(in srgb, var(--app-fond-2) 94%, transparent);
  box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 9) calc(var(--u) * -3) rgb(0 0 0 / .85);
}
.a-tabbar > * { position: relative; display: grid; justify-items: center; gap: calc(var(--u) * .7); padding: calc(var(--u) * 1.7) 0 calc(var(--u) * 1.3); border-radius: calc(var(--u) * 6.4); color: color-mix(in srgb, var(--app-encre) 72%, transparent); font-size: calc(var(--u) * 2.8); font-weight: 600; line-height: 1.1; }
.a-tabbar > .on { background: rgb(255 255 255 / .1); color: var(--app-accent-texte); }
.a-tabbar svg { width: calc(var(--u) * 5.2); height: calc(var(--u) * 5.2); stroke-width: 1.8; }
.a-tabbar .a-compte { position: absolute; top: calc(var(--u) * .6); left: calc(50% + var(--u) * 1.4); margin: 0; }

/* ---------- Touches Y2K : titre chrome et étoile à quatre branches ---------- */
.a-y2k { background: linear-gradient(180deg, #FFFFFF 0%, #D9D4EA 42%, #8E87A8 54%, #F3F1FA 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.a-y2k::after { content: "\2726"; margin-left: .3em; font-size: .72em; -webkit-text-fill-color: var(--app-accent-texte); vertical-align: .16em; }
.a-art { position: relative; border-radius: calc(var(--u) * 4.6); background: radial-gradient(90% 80% at 50% 0%, rgb(140 122 214 / .18), transparent 70%); }
.a-art--etoiles::before, .a-art--etoiles::after { content: "\2726"; position: absolute; color: var(--app-accent-texte); opacity: .8; line-height: 1; }
.a-art--etoiles::before { top: 6%; left: 16%; font-size: calc(var(--u) * 4); }
.a-art--etoiles::after { top: 22%; right: 18%; font-size: calc(var(--u) * 2.6); }
.a-pill { display: inline-block; padding: calc(var(--u) * .7) calc(var(--u) * 2.3); border-radius: 999px; background: var(--app-accent-clair); color: var(--app-accent-texte); font-size: calc(var(--u) * 2.8); font-weight: 600; line-height: 1.3; white-space: nowrap; }
.a-pill--ok { background: color-mix(in srgb, var(--app-ok) 15%, transparent); color: var(--app-ok); }
.a-pill--att { background: color-mix(in srgb, var(--app-att) 15%, transparent); color: var(--app-att); }
.a-suite { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.4); color: var(--app-accent-texte); font-size: calc(var(--u) * 3.4); font-weight: 600; }

/* ---------- Les ongles dessinés (tracés de la maquette, couleurs par classes) ---------- */
.m-app .k-nude { --k: #E6C2AD; } .m-app .k-rose { --k: #F2A9BF; } .m-app .k-bonbon { --k: #E8689A; } .m-app .k-lait { --k: #F6F1EE; }
.m-app .k-noir { --k: #1F1B24; } .m-app .k-rouge { --k: #B8243A; } .m-app .k-violet { --k: #7A5AC4; } .m-app .k-lilas { --k: #C6B5EC; }
.m-app .k-bleu { --k: #3E6CCB; } .m-app .k-ciel { --k: #9CC6EC; } .m-app .k-vert { --k: #4C9673; } .m-app .k-dore { --k: #C99E48; }
.a-set { display: block; width: 100%; height: auto; overflow: visible; }
.a-set .d { fill: rgb(255 255 255 / .05); }
.a-set .o, .a-forme-dessin .o { fill: var(--k, #E6C2AD); }
.a-set .e, .a-forme-dessin .e { fill: none; stroke: rgb(255 255 255 / .26); stroke-width: .7; }
.a-set .e.s { stroke: var(--app-accent-texte); stroke-width: 2.2; stroke-linejoin: round; }
.a-set .r { fill: #fff; opacity: .42; }
.a-set .r2, .a-set .lu { fill: #fff; opacity: .35; }
.a-set .fr { fill: #FBF9F6; }
.a-set .pt, .a-set .pe { fill: #fff; }
.a-set .pe { stroke: rgb(0 0 0 / .12); stroke-width: .3; }
.a-set .po { fill: #000; opacity: .16; }
.a-set .pc { fill: #F3CF6E; }
.a-set .sz { stroke: #fff; stroke-opacity: .7; stroke-width: .6; }
.a-set .cu { fill: none; stroke: #000; stroke-opacity: .22; stroke-width: .9; }

/* ---------- Configurateur : volets, formes, couleurs, techniques, estimation ---------- */
.a-volets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * .5); padding: calc(var(--u) * .7); border-radius: calc(var(--u) * 3); background: var(--app-fond-2); font-size: calc(var(--u) * 2.5); text-align: center; }
.a-volets > * { overflow: hidden; padding: calc(var(--u) * 1.5) 0; border-radius: calc(var(--u) * 2.2); color: var(--app-doux); text-overflow: ellipsis; white-space: nowrap; }
.a-volets > .on { background: var(--app-fort); color: var(--app-sur-fort); }
.a-formes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 1.8); }
.a-formes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 1.4); }
.a-formes > * { display: grid; justify-items: center; align-content: start; gap: calc(var(--u) * .5); padding: calc(var(--u) * 1.8) calc(var(--u) * .8) calc(var(--u) * 1.6); border: 1px solid var(--app-trait); border-radius: calc(var(--u) * 3.4); background: var(--app-carte); font-size: calc(var(--u) * 3.1); font-weight: var(--app-gras); line-height: 1.15; text-align: center; }
.a-formes > .on { border-color: var(--app-accent-texte); background: var(--app-accent-clair); }
.a-formes small { font-size: calc(var(--u) * 2.6); font-weight: 400; }
.a-forme-dessin { display: block; width: calc(var(--u) * 6.4); height: auto; margin-bottom: calc(var(--u) * .6); overflow: visible; }
.a-pastilles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(var(--u) * 1.6); }
.a-pastilles > * { aspect-ratio: 1; border: 1.5px solid var(--app-trait); border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .55), transparent 42%), var(--k); }
.a-pastilles > .on { box-shadow: 0 0 0 calc(var(--u) * .7) var(--app-fond), 0 0 0 calc(var(--u) * 1.3) var(--app-accent-texte); }
.a-tech { display: grid; }
.a-tech > * { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: calc(var(--u) * 2.2); padding: calc(var(--u) * 1.7) 0; border-top: 1px solid var(--app-trait); font-size: calc(var(--u) * 3.3); line-height: 1.2; }
.a-tech > :first-child { border-top: 0; }
.a-tech > *::before { content: ""; display: grid; place-items: center; width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); border: 1.5px solid var(--app-doux); border-radius: calc(var(--u) * 1.3); color: var(--app-sur-accent); font-size: calc(var(--u) * 3); font-weight: 700; line-height: 1; }
.a-tech > .on::before { content: "\2713"; border-color: transparent; background: var(--app-accent); }
.a-tech b { display: block; font-weight: var(--app-gras); }
.a-tech small { display: block; font-size: calc(var(--u) * 2.6); }
.a-tech em { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.a-tech .inclus em { color: var(--app-doux); font-weight: 600; }
.a-estim {
  position: absolute; z-index: 2; left: calc(var(--u) * 3); right: calc(var(--u) * 3); bottom: calc(var(--u) * 3);
  display: flex; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 1.8) calc(var(--u) * 1.8) calc(var(--u) * 1.8) calc(var(--u) * 3.6);
  border: 1px solid var(--app-trait); border-radius: calc(var(--u) * 5.6); background: var(--app-fond-2);
  box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 8) calc(var(--u) * -3) rgb(0 0 0 / .85);
}
.a-estim > span { flex: 1; min-width: 0; display: grid; line-height: 1.15; }
.a-estim small { font-size: calc(var(--u) * 2.5); }
.a-estim b { font-size: calc(var(--u) * 5); font-weight: 700; font-variant-numeric: tabular-nums; }
.a-estim i { overflow: hidden; color: var(--app-accent-texte); font-size: calc(var(--u) * 2.5); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.a-estim .a-btn { flex: none; padding: calc(var(--u) * 2.6) calc(var(--u) * 3); font-size: calc(var(--u) * 3.1); }

/* ---------- Modèles prêts à choisir : liseré chrome ---------- */
.a-modeles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 1.8); }
.a-modeles > * {
  display: grid; gap: calc(var(--u) * .3); padding: calc(var(--u) * 1.6) calc(var(--u) * 2) calc(var(--u) * 2); border: 1px solid transparent; border-radius: calc(var(--u) * 4);
  background: var(--app-carte) padding-box, linear-gradient(135deg, rgb(255 255 255 / .42), rgb(255 255 255 / .06) 38%, rgb(255 255 255 / .34) 62%, rgb(255 255 255 / .05)) border-box;
  font-size: calc(var(--u) * 3); line-height: 1.2;
}
.a-modeles .a-set { margin-bottom: calc(var(--u) * 1); overflow: hidden; border-radius: calc(var(--u) * 3); background: radial-gradient(90% 80% at 50% 0%, rgb(140 122 214 / .18), transparent 70%); }
.a-modeles b { font-weight: var(--app-gras); }

/* ---------- Détail du prix, lignes à valeur ---------- */
.a-detail { display: grid; padding: 0 calc(var(--u) * 3.4); border: 1px solid var(--app-trait); border-radius: calc(var(--u) * var(--app-r) * 1.4); background: var(--app-carte); }
.a-detail > * { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--u) * 2); padding: calc(var(--u) * 1.3) 0; border-top: 1px solid var(--app-trait); font-size: calc(var(--u) * 3.2); line-height: 1.25; }
.a-detail > :first-child { border-top: 0; }
.a-detail > .tete { align-items: center; color: var(--app-doux); }
.a-detail small { display: block; }
.a-detail em { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.a-detail > .tot { font-size: calc(var(--u) * 3.8); font-weight: 700; }
.a-detail > .tot em { font-weight: 700; }

/* ---------- Suivi de la demande (côté client) ---------- */
.a-suivi { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(var(--u) * .8); }
.a-suivi > * { position: relative; display: grid; justify-items: center; align-content: start; gap: calc(var(--u) * 1.1); color: var(--app-doux); font-size: calc(var(--u) * 2.4); line-height: 1.15; text-align: center; }
.a-suivi > *::before { content: ""; position: relative; z-index: 1; display: grid; place-items: center; width: calc(var(--u) * 5.4); height: calc(var(--u) * 5.4); border: 1.5px dashed var(--app-doux); border-radius: 50%; background: var(--app-carte); color: var(--app-sur-accent); font-size: calc(var(--u) * 3); font-weight: 700; line-height: 1; }
.a-suivi > :not(:last-child)::after { content: ""; position: absolute; top: calc(var(--u) * 2.7); left: 50%; width: calc(100% + var(--u) * .8); height: 1px; background: var(--app-trait); }
.a-suivi > .on { color: var(--app-encre); }
.a-suivi > .on::before { content: "\2713"; border: 0; background: var(--app-accent); }
.a-suivi > .on:not(:last-child)::after { background: var(--app-accent); }

/* ---------- Carte de fidélité : dix tampons, le dernier offert ---------- */
.a-fid { display: grid; gap: calc(var(--u) * 2.4); padding: calc(var(--u) * 3.4); border: 1px solid var(--app-trait); border-radius: calc(var(--u) * var(--app-r) * 1.4); background: linear-gradient(150deg, color-mix(in srgb, var(--app-accent) 32%, var(--app-carte)), var(--app-carte) 72%); }
.a-fid-tete { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); font-size: calc(var(--u) * 3.4); }
.a-fid-tete span { color: var(--app-accent-texte); font-weight: 600; }
.a-tampons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(var(--u) * 1.2); justify-items: center; }
.a-tampons > * { display: grid; place-items: center; width: calc(var(--u) * 6.6); height: calc(var(--u) * 6.6); border: 1.5px dashed var(--app-doux); border-radius: 50%; color: var(--app-sur-accent); font-size: calc(var(--u) * 3.4); font-weight: 700; line-height: 1; }
.a-tampons > .on { border: 0; background: var(--app-accent); }
.a-tampons > .on::before { content: "\2713"; }
.a-tampons > .cadeau { border-style: solid; border-color: var(--app-accent-texte); color: var(--app-accent-texte); }
.a-tampons svg { width: 52%; height: 52%; stroke-width: 1.9; }
.a-fid p { margin: 0; color: var(--app-doux); font-size: calc(var(--u) * 2.9); text-align: center; }

/* ---------- Messages d'une demande et réponses types ---------- */
.a-fil { display: grid; gap: calc(var(--u) * 1.5); }
.a-fil > * { justify-self: start; max-width: 86%; padding: calc(var(--u) * 1.7) calc(var(--u) * 2.7); border-radius: calc(var(--u) * 3.4); background: var(--app-fond-2); font-size: calc(var(--u) * 3); line-height: 1.3; }
.a-fil > .moi { justify-self: end; background: var(--app-accent); color: var(--app-sur-accent); }
.a-reponses { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.2); }
.a-reponses > * { padding: calc(var(--u) * 1.2) calc(var(--u) * 2.3); border: 1px solid color-mix(in srgb, var(--app-accent-texte) 55%, transparent); border-radius: 999px; color: var(--app-accent-texte); font-size: calc(var(--u) * 2.7); line-height: 1.25; }
.a-dm { margin: 0; padding: calc(var(--u) * 2) calc(var(--u) * 2.6); border-radius: calc(var(--u) * 2.6); background: var(--app-fond-2); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: calc(var(--u) * 2.6); line-height: 1.4; }

/* ---------- Côté pro : liste avec vignette, avatar, point de couleur, tête de fiche ---------- */
.a-liste--vign > * { grid-template-columns: auto minmax(0, 1fr) auto; }
.a-liste--vign > * > .a-vign, .a-liste--vign > * > .a-av { grid-row: span 2; }
.a-liste--vign .meta { grid-column: 2 / -1; }
.a-vign, .a-av { flex: none; display: grid; place-items: center; width: calc(var(--u) * 10.5); height: calc(var(--u) * 10.5); border-radius: calc(var(--u) * 3); }
.a-vign { background: radial-gradient(90% 80% at 50% 0%, rgb(140 122 214 / .2), transparent 70%), var(--app-fond-2); }
.a-vign .a-set { width: 100%; height: 100%; overflow: hidden; border-radius: inherit; }
.a-av { background: var(--app-accent-clair); color: var(--app-accent-texte); font-size: calc(var(--u) * 3.3); font-weight: 700; }
.a-dot { display: inline-block; flex: none; width: calc(var(--u) * 2.1); height: calc(var(--u) * 2.1); margin-right: calc(var(--u) * 1); border-radius: 50%; background: var(--c, var(--app-accent)); vertical-align: calc(var(--u) * .1); }
.a-qui { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: calc(var(--u) * 2.4); }
.a-qui small { display: block; }
.a-repere--att { background: color-mix(in srgb, var(--app-att) 15%, transparent); color: var(--app-att); }
.a-badge--att { background: color-mix(in srgb, var(--app-att) 18%, transparent); color: var(--app-att); }
.a-barres--c i::before { background: var(--c, var(--app-doux)); }
.a-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 1.6); }
.a-photos > * { aspect-ratio: 4 / 3; border-radius: calc(var(--u) * 2.6); background: linear-gradient(160deg, #3B2F5E, #1B1830); }
.a-photos > :nth-child(2) { background: linear-gradient(200deg, #5B3A55, #1D1828); }
.a-photos > :nth-child(3) { background: linear-gradient(160deg, #2F3E5E, #18182A); }

/* ---------- Agenda du pro : le mois à points, la journée touchée ---------- */
.a-mois-pts { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: calc(var(--u) * .9); }
.a-mois-pts > * { display: grid; justify-items: center; align-content: start; gap: calc(var(--u) * 1); min-width: 0; min-height: calc(var(--u) * 8.4); padding: calc(var(--u) * 1.2) 0 calc(var(--u) * .9); border: 1px solid var(--app-trait); border-radius: calc(var(--u) * 2.4); background: rgb(255 255 255 / .03); font-size: calc(var(--u) * 2.9); font-weight: 650; line-height: 1; }
.a-mois-pts > .h { min-height: 0; padding: 0; border: 0; background: none; color: var(--app-doux); font-size: calc(var(--u) * 2.4); font-weight: 400; }
.a-mois-pts > .hors { opacity: .35; }
.a-mois-pts > .sel { border-color: transparent; background: var(--app-accent); color: var(--app-sur-accent); }
.a-mois-pts > .ferme { background: repeating-linear-gradient(135deg, transparent 0 calc(var(--u) * 1), rgb(255 255 255 / .06) calc(var(--u) * 1) calc(var(--u) * 1.5)); color: var(--app-doux); }
.a-mois-pts small { font-size: calc(var(--u) * 1.6); letter-spacing: .04em; text-transform: uppercase; }
.a-mois-pts .pts { display: flex; gap: calc(var(--u) * .6); min-height: calc(var(--u) * 1.4); }
.a-mois-pts .pts > * { width: calc(var(--u) * 1.4); height: calc(var(--u) * 1.4); border-radius: 50%; background: var(--c, var(--app-doux)); }
.a-journee { display: grid; }
.a-journee > * { display: grid; grid-template-columns: calc(var(--u) * 9.6) auto minmax(0, 1fr) auto; align-items: center; column-gap: calc(var(--u) * 1.6); padding: calc(var(--u) * 1.3) 0; border-top: 1px solid var(--app-trait); font-size: calc(var(--u) * 3.1); line-height: 1.25; }
.a-journee > :first-child { border-top: 0; }
.a-journee > * > em { font-weight: 700; font-variant-numeric: tabular-nums; }
.a-journee .a-dot { margin: 0; }
.a-journee b { display: block; font-weight: var(--app-gras); }
.a-journee small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-journee .libre { color: var(--app-doux); }