/* wiatool — Générateur de mot de passe · charte WIA v1 (09/08/2026) */
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }

:root {
  --brun: #865830; --or: #C4922A; --creme: #F3E8DB; --sombre: #241A12;
  --blanc: #FFFFFF; --trait: #E0D3C2; --pied: #5B4C3E;
  --corail: #C0563A; --vert: #3E9B7A;
  --fond: var(--creme); --carte: var(--blanc); --texte: var(--sombre); --doux: var(--pied);
  --champ: #FBF6F0;
  --titre: "Poppins", system-ui, sans-serif;
  --corps: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;
}
[data-theme="sombre"] { --fond: #1A130D; --carte: #241A12; --texte: #F3E8DB; --doux: #C9B8A4; --trait: #3E3024; --champ: #2E2218; color-scheme: dark; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 16px/1.55 var(--corps); }
a { color: var(--brun); }
[data-theme="sombre"] a { color: var(--or); }
button { font: inherit; color: inherit; cursor: pointer; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.haut { max-width: 760px; margin: 0 auto; padding: 20px 16px 0; display: flex; align-items: center; gap: 12px; }
.logo img { display: block; height: 30px; width: auto; }
[data-theme="sombre"] .logo img { filter: brightness(0) invert(.92) sepia(.2); }
.theme { margin-left: auto; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--trait); background: var(--carte); color: var(--texte); display: inline-flex; align-items: center; justify-content: center; }
.theme:hover { border-color: var(--brun); }
.theme .lune { display: none; }
[data-theme="sombre"] .theme .lune { display: block; }
[data-theme="sombre"] .theme .soleil { display: none; }
.etiquette { font: 500 12px/1 var(--mono); color: var(--doux); border-left: 1px solid var(--trait); padding-left: 12px; letter-spacing: .04em; }

.page { max-width: 760px; margin: 0 auto; padding: 28px 16px 40px; }
h1 { font: 600 clamp(26px, 5vw, 36px)/1.2 var(--titre); color: var(--brun); margin: 0 0 8px; }
[data-theme="sombre"] h1 { color: var(--or); }
.chapo { margin: 0 0 28px; color: var(--doux); max-width: 56ch; }
h2 { font: 600 17px/1.3 var(--titre); margin: 0 0 6px; }

/* Onglets */
.onglets { display: inline-flex; background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; padding: 4px; margin-bottom: 14px; }
.onglets button { border: 0; background: none; padding: 9px 16px; border-radius: 9px; font-weight: 700; color: var(--doux); }
.onglets button[aria-selected="true"] { background: var(--brun); color: var(--blanc); }

/* Carte principale */
.carte { background: var(--carte); border: 1px solid var(--trait); border-radius: 16px; padding: 20px; }
.sortie { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.resultat { flex: 1 1 260px; min-width: 0; min-height: 64px; display: block; align-content: center; padding: 14px 16px; background: var(--champ); border: 1px solid var(--trait); border-radius: 12px; font: 500 clamp(17px, 3.2vw, 22px)/1.4 var(--mono); word-break: break-all; letter-spacing: .02em; }
.resultat .c { color: var(--or); }
.resultat .s { color: var(--brun); }
[data-theme="sombre"] .resultat .s { color: #E0A86A; }
.resultat .sep { color: var(--doux); }
.actions { display: flex; gap: 8px; }
@media (max-width: 560px) { .actions { flex: 1 1 100%; } .principal { flex: 1; } }
.actions button { border-radius: 12px; border: 1px solid var(--trait); display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.icone { width: 56px; background: var(--carte); }
.icone:hover { border-color: var(--brun); }
.principal { background: var(--brun); color: var(--blanc); border-color: var(--brun) !important; padding: 0 20px; font-weight: 700; min-height: 56px; }
.principal:hover { background: #734B28; }
.principal.ok { background: var(--vert); border-color: var(--vert) !important; }

/* Force */
.force { margin: 16px 0 6px; }
.jauge { height: 6px; background: var(--trait); border-radius: 3px; overflow: hidden; }
.jauge span { display: block; height: 100%; width: 0; border-radius: 3px; transition: width .25s, background .25s; }
.force-texte { margin-top: 8px; font-size: 14px; color: var(--doux); }
.force-texte strong { color: var(--texte); }

/* Réglages */
.reglages { border-top: 1px solid var(--trait); margin-top: 16px; padding-top: 18px; }
.ligne-longueur { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ligne-longueur label { font-weight: 700; }
.ligne-longueur input { width: 72px; padding: 6px 8px; border: 1px solid var(--trait); border-radius: 8px; background: var(--champ); color: var(--texte); font: 500 16px var(--mono); text-align: center; }
input[type=range] { width: 100%; accent-color: var(--brun); height: 28px; }
.options { display: grid; gap: 12px; margin-top: 14px; }
.bascule { display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.bascule em { font: normal 13px var(--mono); color: var(--doux); }
.bascule input { position: absolute; opacity: 0; pointer-events: none; }
.bascule span { flex: none; width: 40px; height: 24px; border-radius: 12px; background: var(--trait); position: relative; transition: background .2s; }
.bascule span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--blanc); transition: transform .2s; box-shadow: 0 1px 2px rgba(36,26,18,.25); }
.bascule input:checked + span { background: var(--brun); }
.bascule input:checked + span::after { transform: translateX(16px); }
.bascule input:focus-visible + span { outline: 2px solid var(--or); outline-offset: 2px; }
.bascule input:disabled + span { opacity: .5; }
.separateurs { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.choix { display: inline-flex; gap: 6px; }
.choix button { min-width: 44px; padding: 6px 10px; border: 1px solid var(--trait); border-radius: 8px; background: var(--champ); font: 500 15px var(--mono); }
.choix button[aria-pressed="true"] { border-color: var(--brun); background: var(--brun); color: var(--blanc); }

/* Historique */
.historique { margin-top: 24px; }
.histo-tete { display: flex; justify-content: space-between; align-items: baseline; }
.lien { background: none; border: 0; color: var(--brun); text-decoration: underline; padding: 0; font-size: 14px; }
#histo { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--trait); border-radius: 12px; background: var(--carte); }
#histo li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--trait); }
#histo li:first-child { border-top: 0; }
#histo code { flex: 1; font: 14px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--doux); }
#histo li.vu code { color: var(--texte); }
#histo button { border: 0; background: none; color: var(--doux); padding: 4px; }
#histo button:hover { color: var(--brun); }
#histo svg { width: 18px; height: 18px; }
.note { font-size: 13px; color: var(--doux); margin: 8px 0 0; }

/* Explications */
.explications { display: grid; gap: 20px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--trait); }
.explications p { margin: 0; color: var(--doux); }
.explications code { font: 13px var(--mono); }

.pied { max-width: 760px; margin: 0 auto; padding: 0 16px 32px; font-size: 13px; color: var(--doux); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; background: var(--sombre); color: var(--creme); padding: 10px 18px; border-radius: 10px; font-size: 14px; transition: .2s; pointer-events: none; max-width: calc(100% - 32px); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

button:focus-visible, input:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.resultat.phrase { word-break: normal; overflow-wrap: anywhere; }