/* Feuille de Buno Nails (porte S6 du socle, lot L3b de Buno Nails 1.2), chargée après les feuilles du socle par l'appli et
   la page publique. Reprise de Nails 1.1 (maj/1-1) : public/css/carnet.css (bloc « métier ongles », préfixe .on-),
   public/css/client.css (photos des réglages lus par la compo perso) et public/css/ongles.css (réglages du pro, préfixe
   .ong-). Rien en ligne (CSP) : les teintes passent par element.style. Images : /images/metier/ seulement. */

/* ===== Buno Nails, métier ongles (lot 3a) : photo fixe des mains et ongles dessinés, choix de la compo perso, bandeau
   d'estimation. Partagé par la page publique (compo perso) et l'appli (fiche « Son set »). Préfixe .on-.
   La photo ne bouge jamais : aucune transition ni animation sur la scène. Zones de toucher de 44 px au moins. */
.on-figure{margin:0;display:flex;flex-direction:column;gap:6px}
.on-scene{position:relative;width:100%;aspect-ratio:1200/805;border-radius:20px;overflow:hidden;border:1.5px solid var(--line);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.on-photo{position:absolute;inset-inline-start:0;width:100%;pointer-events:none}
.on-calque,.on-calque > svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.on-scene.touchable .on-ongle{cursor:pointer}
.on-halo{fill:none;stroke:#FFFFFF;stroke-width:4.5;stroke-linejoin:round}
.on-ongle.choisi .on-bord{stroke:var(--acc);stroke-opacity:1;stroke-width:1.6}
.on-legende{text-align:center;font-size:13.5px;line-height:1.35;color:var(--mut);margin:0;min-height:1.35em}
.on-tete{display:flex;flex-direction:column;gap:2px}
.on-tete .cl-haut{gap:8px}
.on-titre{margin:0;font-size:24px;line-height:1.15;flex:1;min-width:0}
.on-recommencer{flex:none}
.on-etape-ligne{display:flex;align-items:center;justify-content:space-between;gap:8px}
.on-etape{margin:0 4px;font-size:13.5px;font-weight:700;color:var(--mut)}
.on-section-tete{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 10px;margin-top:4px}
.on-section-tete .sub{margin:0}
.on-h2{font-size:21px;line-height:1.2;margin:0}
.on-titre-bloc{gap:0}
.on-titre-bloc .sub{margin:2px 0 0}
/* Tuiles de forme et de longueur : 3 colonnes ; texte agrandi (réglage du téléphone, zoom), une tuile ne descend pas
   sous 6,6 em : elle passe à 2 colonnes, puis à 1, sans couper un mot */
.on-grille3{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,max(6.6em,calc((100% - 16px) / 3))),1fr));gap:8px;font-size:15px}
.on-grille2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.on-carte{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:10px 6px;min-height:92px;color:var(--ink);font-family:inherit;font-size:15px;text-align:center;min-width:0}
.on-carte b{overflow-wrap:break-word;hyphens:manual}
.on-prestation{min-height:84px}
.on-prestation .sub{margin:0;font-size:13px}
.on-carte.choisi,.on-ligne.choisi{border-width:2.5px;border-color:var(--acc);background:var(--accsoft)}
.on-mini{display:block;width:26px;height:40px;margin-bottom:4px}
.on-mini.long{width:22px;height:72px}
.on-mini svg{width:100%;height:100%;display:block}
.on-sup{font-size:12.5px;color:var(--mut);font-weight:500;white-space:nowrap}
.on-carte.choisi .on-sup,.on-ligne.choisi .on-sup,.on-carte.choisi .sub,.on-ligne.choisi .sub{color:var(--ink)}
.on-liste{gap:8px}
.on-ligne{display:flex;align-items:center;gap:12px;padding:10px 14px;min-height:60px;text-align:start;width:100%;color:var(--ink);font-family:inherit;font-size:15.5px}
.on-ligne > b{flex:1}
.on-technique-textes{flex:1;min-width:0;gap:1px}
.on-technique-textes .sub{margin:0;font-size:13px}
.on-coche{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;flex:none}
.on-ligne.choisi .on-coche{background:var(--btn);border-color:var(--btn);color:var(--onbtn)}
/* Teintes de peau : 5 par ligne ; un nom plus large que sa place (texte agrandi, allemand) élargit sa case et passe à la ligne */
.on-peaux{display:flex;flex-wrap:wrap;gap:4px}
.on-peaux .on-peau{flex:1 0 auto;min-width:calc((100% - 16px) / 5);max-width:100%;padding-inline:4px}
.on-peau-nom{overflow-wrap:break-word}
.on-peau,.on-couleur{display:flex;flex-direction:column;align-items:center;gap:5px;min-height:70px;padding:4px 0;background:none;border:0;border-radius:14px;color:var(--ink);font-family:inherit;font-size:12.5px;min-width:0}
.on-peau-rond,.on-teinte{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);flex:none}
.on-peau.choisi .on-peau-rond,.on-couleur.choisi .on-teinte{outline:3px solid var(--acc);outline-offset:3px}
.on-peau.choisi .on-peau-nom,.on-couleur.choisi .on-couleur-nom{font-weight:700}
/* Un nom ne se coupe qu'au-delà de toute la case (nom tapé par l'artiste), jamais « Borde aux » */
.on-peau-nom,.on-couleur-nom{text-align:center;line-height:1.2;overflow-wrap:break-word}
/* Teintes : 5 par ligne ; texte agrandi (réglage du téléphone, zoom), une case ne descend pas sous 5 em : elle passe à
   4, 3, 2 colonnes sans couper un nom (« Bordeaux », « Puderrosa ») */
.on-nuancier{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,max(5em,calc((100% - 16px) / 5))),1fr));gap:10px 4px;font-size:12.5px}
.on-nuancier .on-couleur{padding-inline:2px}
.on-teinte.chrome,.on-pastille.chrome{background:linear-gradient(135deg,#F7F8FA,#A8ADB7 35%,#FFFFFF 55%,#8A909B 80%,#E3E5EA)}
.on-ongles{gap:10px}
.on-modes .chip{flex:1 1 0;justify-content:center}
.on-doigts{display:flex;flex-direction:column;gap:8px}
.on-main .lab{margin:0 4px 4px}
.on-rangee{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.on-doigt{flex-direction:column;justify-content:center;padding:4px 2px;min-height:52px;font-size:12.5px;line-height:1.1;min-width:0;gap:3px;border-radius:16px}
.on-doigt span:last-child{overflow:hidden;text-overflow:ellipsis;max-width:100%}
.on-pastille{width:10px;height:10px;border-radius:50%;border:1px solid var(--line);flex:none}
.on-copier{align-self:center;width:auto}
.on-doux{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin:0;font-size:14px;line-height:1.4;border-color:var(--acc)}
.on-doux svg{flex:none;color:var(--acc);margin-top:1px}
.on-doux[hidden]{display:none}
.on-ligne-estim{padding:12px 16px;margin:0;font-weight:700;font-size:15px;line-height:1.4}
.on-choix{padding:12px 14px;margin:0;font-weight:700;font-size:15px}
.on-choix[hidden]{display:none}
.on-note{margin:4px 4px 0}
.on-centre{align-self:center}
.on-depart-ongle{width:14px;height:22px;border-radius:7px 7px 5px 5px;border:1.5px solid var(--line);flex:none}
.on-departs .cl-type[aria-current=true]{border-width:2.5px;border-color:var(--acc)}
.on-moments .chip{flex:1 1 0;flex-direction:column;justify-content:center;gap:0;min-height:58px;padding:6px 14px;white-space:normal;text-align:center}
.on-moments .chip.on .on-sup{color:inherit}
.on-pastilles .chip{flex:0 1 auto}
.on-recap .on-prix-final b{font-family:var(--police-titre,inherit);font-size:24px;font-weight:600}
.on-garde .on-rebours{font-variant-numeric:tabular-nums;font-size:18px}
.on-vide img{width:120px}
.on-couleur-ligne{display:inline-flex;align-items:center;gap:8px}
/* Bandeau d'estimation : toujours visible en bas de l'écran, au-dessus du contenu */
.on-barre{position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:4px -22px calc(-28px - env(safe-area-inset-bottom,0px));padding:10px 22px calc(12px + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:1.5px solid var(--line)}
/* Texte agrandi : le prix ne passe jamais sous les boutons, ce sont les boutons qui passent dessous (à droite) */
.on-estimation{display:flex;flex-direction:column;min-width:min-content;flex:1 1 0}
.on-prix-lab{font-size:11.5px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}
.on-prix{font-size:22px;line-height:1.15;white-space:nowrap}
.on-prix-sous{font-size:13px;line-height:1.3;color:var(--mut)}
.on-barre-boutons{display:flex;gap:8px;flex:none;margin-inline-start:auto}
.on-barre .btn{width:auto;min-width:0;min-height:46px;height:auto;font-size:15px;padding:0 16px}
/* Écran court : le bandeau reste en bas de l'écran, pas au milieu (10.07, 10.39) */
.on-barre{margin-top:auto}
.cl-contenu:has(> .cl-page > .on-barre){min-height:100vh;min-height:100dvh}
.cl-contenu > .cl-page:has(> .on-barre){flex:1}
@media (max-width:389px){.on-barre .btn{padding:0 13px}}
.ar-son-set{padding:2px 0}
.ar-son-set .r em{white-space:normal;text-align:end}
.ar-son-set-bloc{gap:10px}
/* Lot 4 : « déjà ajouté à ton estimation » (10.45), mains, pieds ou les deux (10.44), ajouter à mon calendrier (10.28) */
.on-deja{margin:2px 4px 0;font-size:14px}
.on-deja[hidden]{display:none}
.on-membres{gap:8px}
.on-membre{min-height:64px}
.on-membre-textes{flex:1;min-width:0;gap:1px}
.on-membre-textes .sub{margin:0;font-size:13px}
@media (min-width:820px){
  .on-barre{margin-inline:0;padding-inline:16px;border:1.5px solid var(--line);border-radius:20px 20px 0 0;border-bottom:0}
  .on-titre{font-size:28px}
  /* Tablette et ordinateur : la photo des mains ne prend plus toute la hauteur, les choix restent visibles dessous */
  .on-scene{max-width:460px;margin-inline:auto}
}
.on-etape-ligne{flex-wrap:wrap}
.on-barre-boutons{flex-wrap:wrap;max-width:100%}
.on-barre .btn{max-width:100%;white-space:normal}


/* Buno Nails, lot 3b : réglages de l'artiste lus par la compo perso */
/* Photo de la technique, à côté de son nom (9.29) */
.on-tech-photo{width:44px;height:44px;flex:none;border-radius:12px;object-fit:cover;background:var(--soft)}
/* Photo d'une forme ajoutée par l'artiste, à la place du petit dessin dans sa tuile (28/10/2026) */
.on-forme-photo{width:44px;height:44px;flex:none;margin-bottom:2px;border-radius:12px;object-fit:cover;background:var(--soft)}
/* Photo de l'artiste pour une prestation (28/10/2026), en haut de sa carte dans « Ta prestation » */
.on-prestation-photo{width:100%;aspect-ratio:4/3;flex:none;margin-bottom:4px;border-radius:12px;object-fit:cover;background:var(--soft)}
/* Longueur réelle de l'artiste sous le code (XS … XXL) */
.on-mm{font-size:12px;line-height:1.2}
/* Photo du vrai nuancier de l'artiste, sous les couleurs */
.on-nuancier-photo{margin:0;padding:10px;display:flex;flex-direction:column;gap:6px}
.on-nuancier-photo img{width:100%;border-radius:12px;display:block;aspect-ratio:4/3;object-fit:cover;background:var(--soft)}


/* Réglages ongles de Mon lien (lot 3b, public/app/js/ecrans/ongles.js) : lignes avec petit ongle dessiné, nuancier,
   longueurs en millimètres, photos de techniques. Mêmes cartes, lignes et pastilles que le reste de l'appli (carnet.css,
   lien.css) ; rien en ligne (CSP) : les teintes passent par element.style. */

.ong-onglets{margin-block:2px 4px}
/* Tous les onglets visibles à 375 px, sur deux lignes s'il le faut : plus de « Freest… » coupé au bord (tour du 03/11/2026) */
.chips.dm-statuts.ong-onglets{flex-wrap:wrap;overflow:visible}
.ong-ligne{gap:10px}
.ong-ligne .ong-texte{display:flex;flex-direction:column;justify-content:center;min-width:0}
.ong-ligne .ong-texte b{font-size:15px}
/* Texte agrandi (vérification du 29/10/2026) : un mot trop large rapetisse (mots-entiers.js) au lieu d'être coupé */
.ong-ligne .ong-texte>b{overflow-wrap:normal}
.ong-ligne .ong-texte .sub{font-size:13px;line-height:1.3}
/* Texte agrandi (×1,5, ×2, taille de texte du téléphone) : le nom garde au moins 6 em à côté de son petit ongle (sans
   dépasser la ligne), la valeur et l'interrupteur passent dessous, à droite ; un mot ne se coupe que s'il est plus large
   que toute la ligne (nom tapé par l'artiste) */
.ong-ligne{flex-wrap:wrap}
.ong-ligne .ong-texte{flex:1 1 min(6em,100% - 36px)}
.ong-ligne .ong-texte b,.ong-ligne .ong-texte .sub{overflow-wrap:break-word}
.ong-ligne .ong-valeur{margin-inline-start:auto}
.ong-valeur{font-style:normal;font-size:14px;color:var(--mut);white-space:nowrap;flex:none}
.ong-coupee .ong-texte b,.ong-coupee .ong-valeur,.ong-coupee .ong-mini,.ong-coupee .ong-vignette{opacity:.55}
.ong-mini{margin:0;flex:none}
.ong-code{width:34px;height:34px;flex:none;border-radius:10px;background:var(--soft);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}

/* Choix du dessin de base d'une forme */
/* 4 dessins par ligne (8 sur grand écran) ; texte agrandi : une case ne descend pas sous 6,2 em, elle passe à moins de
   colonnes sans couper un mot */
.ong-dessins{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,max(6.2em,calc((100% - 24px) / 4))),1fr));gap:8px;font-size:12px}
.ong-dessin{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;min-height:76px;border-radius:14px;cursor:pointer}
.ong-dessin .sub{font-size:1em;text-align:center;overflow-wrap:break-word}
.ong-dessin.choisi{border-color:var(--acc);box-shadow:0 0 0 1.5px var(--acc) inset}

/* Aperçu des longueurs, dessinées aux millimètres de l'artiste */
.ong-apercu{display:flex;flex-direction:column;gap:8px;padding:12px 14px}
.ong-apercu-longueurs{display:flex;gap:6px;justify-content:space-between;align-items:flex-end}
.ong-longueur{align-items:center;gap:2px;flex:1;min-width:0}
.ong-longueur b{font-size:13px}
.ong-longueur .sub{font-size:12px;white-space:nowrap}

/* Nuancier : une pastille par couleur, son nom dessous */
/* Texte agrandi : une case grandit avec son texte (5,8 em) au lieu de couper un nom */
.ong-nuancier{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,max(76px,5.8em)),1fr));gap:10px;font-size:13px}
.ong-couleur{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;min-height:96px;border:1.5px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);font-family:inherit;cursor:pointer}
.ong-couleur .sub{font-size:11.5px}
.ong-couleur-nom{font-size:1em;text-align:center;overflow-wrap:break-word;line-height:1.2;max-width:100%}
.ong-teinte{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);flex:none}
.ong-teinte.chrome{background:linear-gradient(135deg,#F7F8FA,#A8ADB7 40%,#FFFFFF 60%,#8A909B)}
.ong-couleur-choix{width:100%;height:52px;border:1.5px solid var(--line);border-radius:14px;background:var(--card);padding:4px}
.ong-pro{display:flex;flex-direction:column;gap:4px;padding:12px 14px}
.ong-photo-nuancier{max-width:440px}
/* Photo d'une forme ajoutée (28/10/2026) : petite, carrée, comme la tuile de la clientèle en plus grand */
.ong-photo-forme{max-width:200px}
.ong-photo-nuancier img{aspect-ratio:4/3}

/* Techniques : vignette de la 1re photo, ou un emplacement vide qui invite à en ajouter une */
.ong-vignette{width:44px;height:44px;min-height:44px;max-height:44px;box-sizing:border-box;align-self:center;flex:none;border-radius:12px;object-fit:cover;background:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--mut)}
.ong-vignette-vide{border:1.5px dashed var(--line)}
.ong-sans-photo{padding:12px 14px}
.ong-photos{grid-template-columns:repeat(2,minmax(0,1fr))}
.ong-exemple{padding:12px 14px}

@media (min-width:700px){
  .ong-dessins{grid-template-columns:repeat(auto-fill,minmax(min(100%,max(6.2em,calc((100% - 56px) / 8))),1fr))}
  .ong-photos{grid-template-columns:repeat(4,minmax(0,1fr))}
}


/* Lot L3b : la compo perso vit dans l'étape « Tes ongles » du socle ; ses morceaux respirent comme les autres champs
   (le mot pour le pro et « Ton set » collaient aux cartes du dessus, vu à 375 et 1280 px) */
.on-compo{gap:12px}
.on-compo .champ,.on-compo .on-recap{margin-top:4px}