/* ---------- forge ---------- */
/* Carte forge sur téléphone : de l'en-tête jusqu'à la barre du bas, la zone du pouce collée en bas. */
.zone-forge{display:flex;flex-direction:column;height:calc(100dvh - var(--haut, 64px) - var(--barre) - 14px);min-height:300px;overflow-y:auto;overscroll-behavior:contain;padding-bottom:14px}
.reglages{border-radius:var(--r-md);background:var(--fond);box-shadow:var(--relief-sm);margin-bottom:8px}
.reglages[open]{box-shadow:var(--creux-sm)}
.reglages summary{display:flex;gap:8px;align-items:center;padding:10px 14px;list-style:none;min-height:46px}
.reglages summary>.ico:first-child{color:var(--text-3)}
.reglages.actif summary>.ico:first-child{color:var(--accent-texte)}
.reg-titre{font-weight:600;font-size:14px}
.reg-resume{font-size:12.5px;color:var(--accent-texte);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.reglages:not(.actif) .reg-resume{color:var(--text-3)}
.reg-corps{padding:4px 14px 16px;border-top:1px solid var(--ligne)}
.reg-corps>.ligne:first-child{margin-top:14px}
.reg-corps .ligne+.ligne,.reg-corps .epingles{margin-top:14px}
.epingles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.epingle{min-width:0}
.epingle label{display:block;font-size:13px;color:var(--text-2);margin-bottom:6px}
.epingle .ligne{flex-wrap:nowrap}
.epingle .champ{min-width:0;width:100%}
.epingle .champ.actif{color:var(--accent-texte);box-shadow:var(--creux-sm),0 0 0 1.5px var(--accent-soft)}

.resultat{flex:1 0 auto;min-height:140px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;min-width:0;padding:8px 0}
.dname{font-size:56px;font-weight:700;letter-spacing:-.035em;line-height:1.05;white-space:nowrap;overflow:hidden;max-width:100%;color:var(--text);
  text-shadow:2px 2px 4px var(--sombre),-1px -1px 3px var(--clair)}
.dname.exclu{text-decoration:line-through;text-decoration-thickness:3px;color:var(--text-3)}
.meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin:14px 0 4px}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;border-radius:var(--r-pill);padding:4px 11px;background:var(--fond);box-shadow:var(--creux-sm);color:var(--text-2);font-variant-numeric:tabular-nums}
.badge.bad{color:var(--danger)}
.badge.acc{color:var(--accent-texte)}
.badge .ico{width:12px;height:12px}
.descriptif{margin:8px 0 0;font-size:13px;color:var(--text-3);display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;justify-content:center}
.descriptif b{font-family:var(--mono);font-weight:600;color:var(--text-2)}
.desc-sep{color:var(--ligne)}
.desc-var{font-style:italic}
.suggestions{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;font-size:12.5px;color:var(--text-3)}
.suggestions .mini.petit{margin-left:0;font-family:var(--mono);color:var(--accent-texte)}

.variantes{min-width:0}
.voir-var{margin:8px auto 0}
.hist-bloc{margin-top:6px}
/* Téléphone : pas de titre dans la forge (le logo le dit déjà) et derniers noms sur une ligne qui défile de côté. */
@media (max-width:900px){.zone-forge>h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;padding:0}}
.historique{flex-wrap:nowrap;overflow-x:auto;padding:6px 8px 12px;margin:0 -8px;scrollbar-width:none;scroll-padding-inline:8px;
  mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
.historique .vchip{flex:none;min-height:38px;box-shadow:0 1px 2px var(--sombre),0 3px 8px color-mix(in oklch,var(--sombre) 55%,transparent)}
/* Le fondu (mask-image) masque tout ce qui sort du cadre : 12 px en bas laissent passer l'ombre (3 px + 8 px de flou).
   Une seule ombre douce, portée vers le bas : en rangée serrée, la double ombre neumorphique (claire en haut à gauche,
   sombre en bas à droite) de deux puces voisines se chevauchait et paraissait coupée. */
.historique .vchip:active{box-shadow:var(--creux-sm)}
.hist-bloc h3{margin-top:16px}

.vchip{font-family:var(--mono);font-size:13px;border-radius:var(--r-sm);padding:6px 11px;display:inline-flex;align-items:center;gap:6px;color:var(--text)}
.vchip i{font-style:normal;font-size:10.5px;color:var(--text-3)}
.vchip .ico{width:12px;height:12px;color:var(--accent-texte)}
.vchip.over{opacity:.5}

/* Zone du pouce : syllabes du nom, puis favori · copier · forger · rechercher · exclure. */
.pouce{display:flex;flex-direction:column;gap:12px;position:sticky;bottom:-14px;z-index:30;margin-top:auto;padding-top:16px;
  background:linear-gradient(to top,var(--fond) 74%,transparent)}
.pouce-parts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.pouce-parts:empty{display:none}
.part{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:13px;border-radius:var(--r-pill);padding:6px 15px 6px 11px;min-height:38px;
  color:color-mix(in oklch,var(--tc) 72%,var(--text))}
.part .ico{width:14px;height:14px;opacity:.7}
.part.actif{box-shadow:var(--creux-sm);color:var(--accent-texte)}
.part.actif .ico{opacity:1;fill:currentColor}
.pouce-btns{display:grid;grid-template-columns:48px 48px minmax(0,1fr) 48px 48px;gap:10px;align-items:center}
.btn-rond{height:52px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;color:var(--text-2);text-decoration:none;padding:0}
.btn-rond .ico{width:22px;height:22px}
.btn-rond:hover{color:var(--text)}
.btn-rond:disabled,.btn-rond[aria-disabled="true"]{opacity:.4;pointer-events:none;box-shadow:none}
.btn-rond.on-fav{box-shadow:var(--creux-sm);color:var(--accent-texte)}
.btn-rond.on-fav .ico{fill:currentColor}
/* Bouton principal : la seule surface colorée, toujours en relief. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);border:0;border-radius:var(--r-md);padding:10px 16px;font-weight:600;color:var(--on-accent);
  box-shadow:var(--relief-sm);transition:background .15s,box-shadow .15s,transform .1s}
.btn:hover{background:color-mix(in oklch,var(--accent) 88%,white)}
.btn:active{box-shadow:inset 3px 3px 7px color-mix(in oklch,var(--accent) 55%,black),inset -3px -3px 7px color-mix(in oklch,var(--accent) 75%,white);transform:scale(.99)}
.btn .ico{fill:currentColor;stroke:none}
.forger{width:100%;height:52px;font-size:17px;padding:0 8px;white-space:nowrap;touch-action:manipulation;user-select:none}
/* Écran peu haut : la zone du nom se resserre pour éviter le défilement. */
@media (max-height:700px) and (max-width:900px){
  .resultat{min-height:0;padding:0}
  .meta{margin-top:6px}
  .descriptif{margin-top:4px}
  .voir-var{margin-top:4px}
  .hist-bloc h3{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;padding:0}
  .hist-bloc{margin-top:8px}
  .reglages summary{min-height:40px;padding:6px 12px}
  .pouce{gap:8px;padding-top:8px}
  .pouce-btns .btn-rond{height:40px}
  .forger{height:48px}
  .part{padding:4px 13px 4px 10px}
  [data-style="legende"] .top{padding-top:8px;padding-bottom:16px}
  [data-style="legende"] .top::after{bottom:2px}
}
/* Téléphone étroit : les 4 boutons ronds sur une rangée, « Forger » en pleine largeur dessous, sous le pouce. */
@media (max-width:420px){
  .pouce-btns{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pouce-btns .btn-rond{height:44px}
  .pouce-btns .forger{grid-column:1 / -1;order:5}
}

/* ---------- favoris ---------- */
.alerte{background:var(--accent-soft);box-shadow:var(--creux-sm);border-radius:var(--r-sm);padding:10px 12px;font-size:13px;margin:0 0 14px;color:var(--text)}
.alerte[hidden],.g-vide[hidden],#favs[hidden],.tiers[hidden]{display:none}
.fchip{font-family:var(--mono);font-size:13px;border-radius:var(--r-sm);display:inline-flex;align-items:center;color:var(--text)}
.fchip .nom{background:transparent;border:0;padding:6px 2px 6px 13px}
.fchip.ex{color:var(--text-3);box-shadow:var(--creux-sm)}
.fchip.ex .nom{text-decoration:line-through}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.exclus{margin-top:20px;border-top:1px solid var(--ligne);padding-top:12px}
.exclus summary .ico:first-of-type{width:14px;height:14px}
.exclus .note{margin-top:8px}

/* ---------- classement des favoris (rangs S à D) ---------- */
.fav-mode{margin:0 0 14px}
.tiers{display:flex;flex-direction:column;gap:10px}
.tier{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:stretch;border-radius:var(--r-md);padding:6px;box-shadow:var(--creux-sm);min-height:52px;transition:box-shadow .15s}
.tier.cible,.tiers.en-choix .tier:hover{box-shadow:var(--creux-sm),0 0 0 2px var(--accent-texte)}
.tier-tete{border:0;border-radius:var(--r-sm);background:color-mix(in oklch,var(--tc) 22%,var(--fond));color:color-mix(in oklch,var(--tc) 60%,var(--text));
  font-family:var(--inscription,var(--sans));font-weight:700;font-size:20px;box-shadow:var(--relief-sm);min-height:40px}
.tier.pool .tier-tete{background:var(--fond);color:var(--text-3);font-size:11px;font-family:var(--sans);font-weight:600;text-transform:uppercase;letter-spacing:.06em;line-height:1.2;padding:4px}
.tier-noms{display:flex;flex-wrap:wrap;gap:8px;align-content:center;min-width:0}
.vchip.classe{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.vchip.classe[aria-pressed="true"]{box-shadow:var(--creux-sm);color:var(--accent-texte);text-decoration:underline 2px var(--accent-texte);text-underline-offset:4px}
.vchip.classe.glisse{opacity:.35}
.vchip.fantome{position:fixed;left:0;top:0;z-index:90;pointer-events:none;box-shadow:var(--relief),0 10px 24px color-mix(in oklch,var(--sombre) 60%,transparent)}
.tiers .note{margin:4px 0 0}

/* ---------- type de nom (au-dessus des réglages) ---------- */
.types{position:relative;display:flex;gap:4px;margin:0 0 8px;padding:4px;border-radius:var(--r-md);box-shadow:var(--creux-sm)}
.types button{position:relative;z-index:1;flex:1 1 auto;border:1px solid transparent;background:transparent;border-radius:var(--r-sm);padding:6px 6px;min-height:38px;font-size:13px;font-weight:500;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.types button[aria-pressed="true"]{color:var(--accent-texte);font-weight:600;text-decoration:underline 2px var(--accent-texte);text-underline-offset:4px}
.seg-mots button{font-family:var(--sans)}
.case{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);min-height:38px;cursor:pointer}
.case input{width:18px;height:18px;accent-color:var(--accent)}
.seul-personnage[hidden],.seul-famille[hidden]{display:none}
@media (max-width:380px){.types{gap:2px}.types button{padding:6px 3px;font-size:12px}}

/* Zone du pouce collée au bas de la carte (la carte défile) : Forger s'élargit d'un bord à l'autre,
   prend les coins du bas de la carte et la ferme. Téléphone étroit, où Forger a déjà sa propre rangée.
   Le bouton occupe toujours toute la largeur et descend jusqu'au bord ; seule sa découpe (clip-path) change :
   rien ne bouge dans la mise en page, donc ni saut ni va-et-vient, et l'animation reste fluide.
   Largeur explicite : Safari n'élargit pas une case de grille par des marges négatives (il la décale). */
/* Icône et mot centrés l'un sur l'autre, sur toutes les tailles d'écran. */
.forger-contenu{display:inline-flex;align-items:center;gap:inherit}
@media (max-width:420px){
  .zone-forge{padding-bottom:0}
  .pouce{bottom:0;padding-bottom:14px}
  .pouce .forger{margin:0 -18px -14px;width:calc(100% + 36px);padding-bottom:14px;height:62px;border-radius:0 0 var(--r-lg) var(--r-lg);
    clip-path:inset(0 18px 14px 18px round var(--r-md));transition:clip-path .25s ease}
  .pouce.colle .forger{clip-path:inset(0 0 0 0 round 0 0 var(--r-lg) var(--r-lg))}
  /* La découpe coupe le contour extérieur : anneau de focus à l'intérieur de la partie visible. */
  .pouce .forger:focus-visible{outline:none;box-shadow:inset 18px 0 0 -16px var(--on-accent),inset -18px 0 0 -16px var(--on-accent),inset 0 2px 0 var(--on-accent)}
  /* Le contenu suit : centré dans la forme normale, puis dans toute la hauteur une fois collé (7 px = moitié des 14 px ajoutés). */
  .forger-contenu{transition:transform .25s ease}
  .pouce.colle .forger-contenu{transform:translateY(7px)}
}
@media (prefers-reduced-motion:reduce){.pouce .forger,.forger-contenu{transition:none}}
/* Bulle en relief sous le type choisi ; elle glisse d'un type à l'autre (transform : fluide). */
.types-bulle{position:absolute;left:0;top:4px;bottom:4px;border-radius:var(--r-sm);background:var(--fond);box-shadow:var(--relief-sm)}
.types.anime .types-bulle{transition:transform .3s cubic-bezier(.3,1.25,.5,1),width .3s cubic-bezier(.3,1.25,.5,1)}
@media (prefers-reduced-motion:reduce){.types.anime .types-bulle{transition:none}}
@media (forced-colors:active){.types-bulle{border:2px solid CanvasText}}
/* Nombre de noms possibles, sous les réglages. */
.possibles{display:block;width:calc(100% - 8px);background:none;border:0;padding:0;cursor:help;margin:0 4px 4px;font-size:12px;color:var(--text-3);text-align:right;font-variant-numeric:tabular-nums;min-height:1.4em}
.possibles.vide{color:var(--danger)}
/* Personnage : syllabes du prénom, puis celles du nom de famille, séparées par un trait. */
.parts-sep{width:1px;align-self:stretch;margin:4px 2px;background:var(--ligne)}
.pouce-parts:has(.famille){gap:6px}
.pouce-parts:has(.famille) .part{padding:4px 10px 4px 8px;font-size:12.5px;gap:4px}
.desc-famille{color:var(--text-3);font-style:italic}
/* Liens légaux, discrets, en bas des favoris. */
.liens-legaux{margin:10px 0 0;font-size:13px;color:var(--text-3);text-align:center}
.liens-legaux>span{white-space:nowrap} /* un lien et son « · » ne se séparent pas */
.liens-legaux a{display:inline-block;padding:11px 6px;color:var(--text-2);text-underline-offset:3px} /* cible tactile ≥ 38 px */
.liens-legaux a:hover{color:var(--text-2)}