/*
 * Habillage de la KinkList et des Kink Feelings, dans la charte des fiches NouveauxPlaisirs
 * (scripts/visuels/charte.py, public/js/kink-export.js).
 *
 * Seulement de l'habillage : le script de l'outil s'appuie sur h1, .legend, #Export, #SaveBtn, #Edit,
 * .kinkCategory, .kinkRow, .choices et .choice.selected, qu'on garde tels quels. Les couleurs des niveaux
 * ne sont pas ici : le script les insère dans la première feuille de style (<style> vide en tête de page),
 * à partir des @Legend de kinklist.txt. Ne jamais donner de background-color à .choice dans ce fichier.
 */
@font-face { font-family: 'NX Sans'; src: url('/fonts/PlusJakartaSans-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'NX Sans'; src: url('/fonts/PlusJakartaSans-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'NX Sans'; src: url('/fonts/PlusJakartaSans-ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'NX Serif'; src: url('/fonts/InstrumentSerif-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'NX Serif'; src: url('/fonts/InstrumentSerif-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
    --dark: #17103e;
    --blue: #1771c7;
    --ink: #1f2937;
    --muted: #5b6475;
    --line: #e4e2ee;
    --paper: #fbfaf7;
    --sans: 'NX Sans', 'Plus Jakarta Sans', system-ui, sans-serif;
    --serif: 'NX Serif', 'Instrument Serif', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

.widthWrapper {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
}

/* --- En-tête -------------------------------------------------------------------------- */
.nx-tete {
    background: var(--dark) radial-gradient(120% 160% at 88% 0, rgba(23, 113, 199, .6), rgba(23, 113, 199, 0) 60%);
    color: #fff;
    padding: 30px 0 30px;
    border-bottom: 6px solid;
    border-image: linear-gradient(90deg, #6d4fe0 0 20%, #1f8a5b 20% 40%, #8f8a12 40% 60%, #d98a12 60% 80%, #c0364b 80%) 1;
}
.nx-tete .widthWrapper { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px; }
.nx-kick {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.nx-kick a { color: #8fc2f0; text-decoration: none; }
.nx-kick a:hover { color: #fff; }
h1 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(38px, 6vw, 64px);
    line-height: 1;
    margin: 0;
    color: #fff;
}
.nx-sous { margin: 10px 0 0; color: #cfd3ea; font-size: 16px; max-width: 640px; }
.nx-liens { display: flex; flex-wrap: wrap; gap: 8px; }
.nx-liens a {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    padding: 7px 14px;
    transition: background .2s;
}
.nx-liens a:hover { background: rgba(255, 255, 255, .12); }

/* --- Barre d'outils : légende et actions, collée en haut au défilement ------------------ */
.nx-barre {
    position: sticky;
    top: 0;
    z-index: 5;
    background: rgba(251, 250, 247, .94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}
.nx-barre .widthWrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; font-weight: 700; }
.legend div { display: inline-flex; align-items: center; gap: 7px; }
.legend .choice { opacity: 1; cursor: default; }
.legend-text { vertical-align: middle; }

.nx-actions { display: flex; align-items: center; gap: 10px; }
#ExportWrapper { position: relative; display: flex; align-items: center; gap: 10px; }
#URL { display: none; }
#Export {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .02em;
    color: #fff;
    background: var(--dark);
    border: 0;
    border-radius: 999px;
    padding: 11px 20px;
    cursor: pointer;
    transition: background .2s, transform .2s;
}
#Export:hover { background: var(--blue); }
/* Export PDF : même forme, en contour, pour laisser l'image en action principale */
#ExportPdf {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 800;
    color: var(--dark);
    background: #fff;
    border: 1.5px solid var(--dark);
    border-radius: 999px;
    padding: 9.5px 18px;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
#ExportPdf:hover { border-color: var(--blue); color: var(--blue); }
#Export:active { transform: translateY(1px); }
#Loading {
    display: none;
    position: relative;
    padding-left: 28px;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
}
#Loading::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    border-radius: 50%;
    border: 2px solid var(--line);
    border-top-color: var(--blue);
    animation: nx-tourne .7s infinite linear;
}
@keyframes nx-tourne { to { transform: rotate(360deg); } }

/* Boutons icônes : l'icône vient du style en ligne d'origine (data URL), on n'en garde que la forme */
#SaveBtn, #Edit {
    width: 40px;
    height: 40px;
    flex: none;
    border: 1px solid var(--line);
    border-radius: 50%;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: border-color .2s, opacity .2s;
}
#SaveBtn { background-size: 22px; }
#Edit { background-size: 16px; opacity: .6; }
#SaveBtn:hover, #Edit:hover { border-color: var(--blue); opacity: 1; }

/* --- Les catégories --------------------------------------------------------------------- */
#InputList {
    column-width: 400px;
    column-gap: 22px;
    padding: 26px 0 8px;
}
.kinkCategory {
    display: inline-block;
    width: 100%;
    margin: 0 0 22px;
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}
.kinkCategory h2 {
    margin: 0;
    padding: 14px 18px 4px;
    background: var(--dark);
    color: #fff;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 25px;
    line-height: 1.15;
}

/* Le tableau garde son DOM (cases de choix puis nom) ; flex remet le nom en premier à l'affichage. */
table { width: 100%; border-collapse: collapse; }
thead, tr { display: flex; align-items: center; }
thead { background: var(--dark); padding: 2px 18px 10px; gap: 8px; }
th {
    padding: 0;
    border: 0;
    background: none;
    color: #b9bfdc;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.25;
}
th.choicesCol { width: 112px; flex: none; }
th:last-child { order: -1; flex: 1; }
tbody { display: block; }
tr { padding: 0 18px; gap: 8px; min-height: 36px; border-top: 1px solid var(--line); }
tbody tr:first-child { border-top: 0; }
tbody tr:nth-child(even) { background: var(--paper); }
td { padding: 6px 0; border: 0; }
td:last-child { order: -1; flex: 1; font-size: 14.5px; min-width: 0; overflow-wrap: anywhere; }
td:not(:last-child) { width: 112px; flex: none; text-align: center; }
.kinkRow:hover { background: #f4f1fe; }

/* --- Les pastilles de choix ---------------------------------------------------------------- */
.choice {
    width: 15px;
    height: 15px;
    padding: 0;
    border: 1.5px solid rgba(23, 16, 62, .35);
    border-radius: 50%;
    opacity: .3;
    overflow: hidden;
    text-indent: 100px;
    font-size: 0;
    vertical-align: middle;
    display: inline-block;
    cursor: pointer;
    outline: none;
}
.choices { display: inline-flex; gap: 3px; }
.choices .choice { transition: opacity .2s, transform .2s, box-shadow .2s; }
.choice + .choice { margin-left: 0; }
.choices .choice:hover { opacity: .8; }
.choices .choice:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Anneau fin et serré : 1 px d'écart, 1,25 px d'épaisseur, sans agrandir la pastille,
   pour qu'il reste dans l'espace de 3 px entre deux pastilles sans toucher la voisine. */
.choice.selected,
.selected > .choice {
    opacity: 1;
    border-color: transparent;
    box-shadow: 0 0 0 1px #fff, 0 0 0 2.25px var(--dark);
}
/* Au chargement d'un profil, le script coche « Pas renseigné » sur chaque ligne sans réponse :
   on ne l'entoure que si la personne l'a choisi elle-même (.repondu, posé au clic). */
.choices:not(.repondu) .choice.notEntered.selected {
    opacity: .3;
    border-color: rgba(23, 16, 62, .35);
    box-shadow: none;
}

/* --- Bas de page ---------------------------------------------------------------------------- */
.nx-regle {
    margin: 8px 0 22px;
    background: var(--dark) radial-gradient(120% 160% at 90% 0, rgba(23, 113, 199, .5), rgba(23, 113, 199, 0) 60%);
    color: #e3e5f4;
    border-radius: 18px;
    padding: 24px 28px;
    font-size: 15.5px;
}
.nx-regle strong { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 28px; color: #fff; margin-bottom: 6px; }
.nx-regle a { color: #8fc2f0; }
#Footer { color: var(--muted) !important; font-size: 12px !important; }

/* --- Éditeur de liste (crayon) ------------------------------------------------------------------ */
.overlay { position: fixed; inset: 0; background: rgba(23, 16, 62, .88); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: none; z-index: 10; }
#EditOverlay #Kinks {
    position: absolute;
    top: 16px;
    bottom: 76px;
    left: 50%;
    width: min(560px, calc(100% - 32px));
    transform: translateX(-50%);
    resize: none;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: var(--ink);
    font: 400 14px/1.6 var(--sans);
    outline: none;
}
#EditOverlay #Kinks:focus { border-color: var(--blue); }
/* Annuler et Accepter côte à côte, dans la forme du bouton « Exporter l'image » */
.nx-edit-boutons {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: min(560px, calc(100% - 32px));
    display: flex;
    gap: 12px;
}
.nx-edit-boutons button {
    flex: 1;
    border-radius: 999px;
    padding: 13px 20px;
    font: 800 15px var(--sans);
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
#EditOverlay #KinksOK { border: 0; background: #fff; color: var(--dark); }
#EditOverlay #KinksOK:hover { background: var(--blue); color: #fff; }
#EditOverlay #KinksCancel { border: 1.5px solid rgba(255, 255, 255, .45); background: transparent; color: #fff; }
#EditOverlay #KinksCancel:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }

/* --- Petits écrans -------------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .widthWrapper { padding: 0 16px; }
    .nx-tete { padding: 22px 0; }
    .nx-sous { font-size: 14.5px; }
    .nx-barre { position: static; }
    .legend { font-size: 13px; gap: 6px 12px; }
    #InputList { column-width: auto; padding-top: 18px; }
    .kinkCategory h2 { font-size: 22px; padding: 12px 14px 4px; }
    thead, tr { padding-left: 14px; padding-right: 14px; gap: 6px; }
    /* Le nom sur sa ligne, les pastilles dessous : la carte est trop étroite pour les deux côte à côte. */
    tr { flex-wrap: wrap; row-gap: 0; padding-top: 4px; padding-bottom: 6px; }
    td:last-child { flex-basis: 100%; font-size: 14px; padding-bottom: 2px; }
    thead th:last-child { display: none; }
    th.choicesCol, td:not(:last-child) { width: 130px; text-align: left; padding: 2px 0; }
    .choice { width: 18px; height: 18px; }
    .choices { gap: 4px; }
}