@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&display=swap');

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: 'Exo 2', 'Segoe UI', sans-serif;
}

* {font-size:14px;font-family: 'Exo 2', 'Segoe UI', sans-serif;}

h1 {margin:10px;font-size:24px;}

.hbox {display:flex;flex-direction: row;justify-content:space-between;}
.vbox {display:flex;flex-direction: column;justify-content:space-between;}
.large {width:100%;}

/* Nouveau layout avec zone carrée */
div.main {display:flex;flex-direction:column;justify-content: space-around;width:100%;height:100%;margin: 0;}

div.main-content {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    gap: 16px;
    padding: 16px;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
}

/* Zone principale carrée */
div.zone-principale {
    position: relative;
    width: calc(100vh - 32px);
    height: calc(100vh - 32px);
    min-width: 600px;
    min-height: 600px;
    border: 2px solid #333;
    border-radius: 8px;
    overflow: hidden;
    background: #f8f9fa;
}

/* En-tête de l'interface avec bouton d'aide */
.interface-header {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 8px;
}

.saison-monde {
    padding: 5px 9px;
    border: 1px solid rgba(66, 91, 49, 0.35);
    border-radius: 14px;
    background: rgba(248, 249, 240, 0.94);
    color: #425b31;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.aide-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #007bff;
    background: #007bff;
    color: white;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-family: 'Exo 2', sans-serif;
}

.aide-btn:hover {
    background: #0056b3;
    border-color: #0056b3;
    transform: scale(1.1);
}

/* Popup d'aide des raccourcis clavier */
.aide-raccourcis {
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.aide-raccourcis h3 {
    margin: 0 0 20px 0;
    color: #333;
    text-align: center;
    font-size: 20px;
    border-bottom: 2px solid #007bff;
    padding-bottom: 10px;
}

.raccourcis-sections {
    display: grid;
    gap: 20px;
}

.aide-raccourcis .section {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #007bff;
}

.aide-raccourcis .section h4 {
    margin: 0 0 12px 0;
    color: #495057;
    font-size: 16px;
    font-weight: 600;
}

.raccourci-item {
    display: flex;
    align-items: center;
    margin: 8px 0;
    gap: 12px;
    color: #333;
}

.raccourci-item kbd {
    background: #495057;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: bold;
    min-width: 50px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.raccourci-item-note {
    font-size: 12px;
    color: #6c757d;
    font-style: italic;
    margin-left: 20px;
    margin-top: -4px;
}

.aide-note {
    margin-top: 20px;
    padding: 12px 16px;
    background: #e7f3ff;
    border-radius: 6px;
    border-left: 4px solid #17a2b8;
    color: #0c5460;
    font-size: 13px;
}

/* Animations de combat */
.animation-combat-texte {
    font-family: 'Exo 2', 'Segoe UI', sans-serif;
    user-select: none;
    animation: fadeInUp 0.3s ease-out;
}

/* Animation de sang qui gicle */
.animation-sang {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    width: 1px;
    height: 1px;
}

.particule-sang {
    position: absolute;
    width: 24px;
    height: 24px;
    background: #cc0000;
    border-radius: 50%;
    animation: gicleSang 0.8s ease-out forwards;
    box-shadow: 0 0 9px rgba(204, 0, 0, 0.6);
}

.particule-sang.grosse {
    width: 36px;
    height: 36px;
    background: #990000;
    box-shadow: 0 0 15px rgba(153, 0, 0, 0.8);
}

.particule-sang.petite {
    width: 15px;
    height: 15px;
    background: #ff3333;
    box-shadow: 0 0 6px rgba(255, 51, 51, 0.5);
}

@keyframes gicleSang {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        transform: translate(var(--dx), var(--dy)) scale(0.2);
        opacity: 0;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ÉCRAN DE MORT */
.ecran-mort {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: fadeIn 1s ease-in;
}

.ecran-mort-contenu {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d0000 50%, #1a1a1a 100%);
    border: 3px solid #660000;
    border-radius: 15px;
    padding: 40px;
    max-width: 600px;
    width: 90%;
    text-align: center;
    box-shadow: 0 0 50px rgba(255, 0, 0, 0.3);
    animation: scaleIn 0.8s ease-out 0.5s both;
}

.ecran-mort-titre {
    font-size: 42px;
    font-weight: 700;
    color: #ff4444;
    margin-bottom: 20px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
    animation: pulse 2s infinite;
}

.ecran-mort-cause {
    font-size: 18px;
    color: #cccccc;
    margin-bottom: 30px;
    font-style: italic;
    line-height: 1.4;
}

.ecran-mort-portrait {
    width: 120px;
    height: 120px;
    margin: 0 auto 30px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #660000;
    filter: grayscale(100%) sepia(20%) hue-rotate(315deg) saturate(150%);
    animation: fadeInScale 1s ease-out 1s both;
}

.ecran-mort-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ecran-mort-stats {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #444;
    border-radius: 8px;
    padding: 20px;
    margin: 25px 0;
    text-align: left;
}

.ecran-mort-stats h4 {
    color: #ff6666;
    margin: 0 0 15px 0;
    font-size: 16px;
    text-align: center;
    border-bottom: 1px solid #444;
    padding-bottom: 8px;
}

.ecran-mort-stat {
    display: flex;
    justify-content: space-between;
    margin: 8px 0;
    color: #cccccc;
    font-size: 14px;
}

.ecran-mort-stat-label {
    color: #aaaaaa;
}

.ecran-mort-stat-value {
    color: #ffffff;
    font-weight: 500;
}

.ecran-mort-citation {
    font-size: 16px;
    color: #999999;
    font-style: italic;
    margin: 25px 0;
    padding: 15px;
    border-left: 3px solid #660000;
    background: rgba(0, 0, 0, 0.3);
    text-align: left;
}

.ecran-mort-boutons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 30px;
    flex-wrap: wrap;
}

.ecran-mort-bouton {
    background: linear-gradient(145deg, #333333, #1a1a1a);
    border: 2px solid #555555;
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    font-family: 'Exo 2', sans-serif;
}

.ecran-mort-bouton:hover {
    background: linear-gradient(145deg, #444444, #222222);
    border-color: #777777;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.ecran-mort-bouton.primaire {
    background: linear-gradient(145deg, #660000, #440000);
    border-color: #880000;
}

.ecran-mort-bouton.primaire:hover {
    background: linear-gradient(145deg, #770000, #550000);
    border-color: #aa0000;
}

/* Formulaire dédié au troc */
.echange.popup {
    width: min(680px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: clamp(22px, 5vw, 38px);
    border: 1px solid rgba(219, 185, 125, 0.72);
    border-radius: 18px;
    color: #f6ecd9;
    background: radial-gradient(ellipse at top, #493926 0%, #211a13 72%);
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.65), inset 0 0 35px rgba(219, 185, 125, 0.08);
}
.echange.popup h2 { margin: 5px 0 8px; color: #f2d29c; font-size: clamp(23px, 5vw, 32px); }
.echange-sur-titre { color: #c8a86f; font-size: 11px; letter-spacing: 0.2em; }
.echange-introduction { margin: 0 0 22px; color: #d0c4b2; line-height: 1.5; }
.echange-materiaux { margin: 0 0 18px; padding: 14px 16px; border: 1px solid rgba(200, 168, 111, 0.35); border-radius: 10px; background: rgba(0, 0, 0, 0.2); }
.echange-materiaux h3 { margin: 0 0 4px; color: #f2d29c; font-size: 16px; }
.echange-materiaux > p { margin: 0 0 10px; color: #c9c1b5; font-size: 13px; }
.echange-materiaux-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.echange-materiaux-liste li { display: grid; gap: 3px; min-width: 0; color: #e9d6b5; }
.echange-materiaux-liste li span, .echange-materiaux-liste li small { color: #d0c4b2; font-size: 12px; overflow-wrap: anywhere; }
.echange-materiaux-liste li small { color: #c8a86f; }
.echange-lots { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; }
.echange-lots label { display: grid; gap: 9px; color: #e9d6b5; font-weight: 600; }
.echange-lots select, .echange-lots input { width: 100%; min-width: 0; box-sizing: border-box; padding: 11px 12px; border: 1px solid #806d51; border-radius: 8px; color: #fff7e8; background: #211b14; font: inherit; }
.echange-separateur { color: #d7b879; font-size: 28px; }
.echange-apercu { margin: 20px 0 8px; padding: 12px; border-radius: 8px; color: #f0d49e; background: rgba(0, 0, 0, 0.28); font-variant-numeric: tabular-nums; }
.echange-message { min-height: 1.4em; margin: 8px 0 18px; color: #c9c1b5; }
.echange-message-erreur { color: #ffaaa0; }
.echange-message-ok { color: #a9d5a5; }
.echange-valider { width: 100%; min-height: 46px; }
.echange-valider:disabled { cursor: not-allowed; opacity: 0.5; }
@media (max-width: 520px) {
    .echange.popup { padding: 24px 18px; }
    .echange-materiaux-liste { grid-template-columns: minmax(0, 1fr); }
    .echange-lots { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .echange-separateur { justify-self: center; transform: rotate(90deg); line-height: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleIn {
    from { 
        opacity: 0;
        transform: scale(0.8);
    }
    to { 
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeInScale {
    from { 
        opacity: 0;
        transform: scale(0.5);
    }
    to { 
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    0%, 100% { 
        text-shadow: 2px 2px 8px rgba(255, 68, 68, 0.8);
        transform: scale(1);
    }
    50% { 
        text-shadow: 2px 2px 16px rgba(255, 68, 68, 1);
        transform: scale(1.02);
    }
}

/* Sidebar droite */
div.sidebar {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 300px;
    max-width: 400px;
    height: calc(100vh - 32px);
}

div.moi {
    background: #fff;
    border: 2px solid #007bff;
    border-radius: 8px;
    padding: 16px;
    overflow-y: auto;
    height: auto;
    flex-shrink: 0;
}

div.moi-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 8px;
}

div.moi h3 {
    margin: 0;
    color: #007bff;
    font-size: 18px;
    flex-grow: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

div.moi h3 .prenom {
    font-weight: bold;
}

div.moi h3 .pictos-status {
    display: flex;
    align-items: center;
    gap: 4px;
}

div.moi h3 .pictos-status img,
div.moi h3 .pictos-status svg {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

div.moi h3 .pictos-status img:hover,
div.moi h3 .pictos-status svg:hover {
    opacity: 1;
}

div.moi h3 .pictos-status .bouche {
    cursor: pointer;
}

div.moi h3 .pictos-status .position-statut,
div.rencontre h3 .pictos-status .position-statut,
div.moi h3 .pictos-status .bouche,
div.rencontre h3 .pictos-status .bouche {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    flex: 0 0 32px;
    cursor: pointer;
}

div.moi h3 .pictos-status .bouche,
div.rencontre h3 .pictos-status .bouche {
    background: none;
}

div.moi h3 .pictos-status .picto-position,
div.rencontre h3 .pictos-status .picto-position {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
    overflow: visible;
}

div.moi h3 .pictos-status .picto-habits,
div.rencontre h3 .pictos-status .picto-habits {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
}

div.moi h3 .pictos-status .bouche:hover img,
div.moi h3 .pictos-status .bouche:hover svg,
div.moi h3 .pictos-status .position-statut:hover svg {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

div.moi-details a {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

div.moi-details a:hover {
    opacity: 1;
}

div.moi-outils {
    margin: 10px 0;
}

div.moi-outils .ouvrir-journal-botanique {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 38px;
    padding: 7px 12px;
    border: 1px solid #78935b;
    border-radius: 8px;
    color: #304322;
    background: #edf4e5;
    cursor: pointer;
    font-weight: 600;
}

div.moi-outils .ouvrir-journal-botanique:hover,
div.moi-outils .ouvrir-journal-botanique:focus-visible {
    background: #dceacb;
    outline: 2px solid #78935b;
    outline-offset: 2px;
}

div.moi-outils .ouvrir-responsabilites {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 38px;
    margin-top: 7px;
    padding: 7px 12px;
    border: 1px solid #9a8051;
    border-radius: 8px;
    color: #48391f;
    background: #f4ecd9;
    cursor: pointer;
    font-weight: 600;
}

div.moi-outils .ouvrir-responsabilites:hover,
div.moi-outils .ouvrir-responsabilites:focus-visible {
    background: #eadbb9;
    outline: 2px solid #9a8051;
    outline-offset: 2px;
}

.gestion-boutique.ouvrir-gestion-boutique {
    display: block;
    margin: 12px auto;
    padding: 8px 14px;
    border: 1px solid #80663d;
    border-radius: 7px;
    color: #49391e;
    background: #f4ecd9;
    cursor: pointer;
    font-weight: 600;
}

.gestion-boutique.ouvrir-gestion-boutique:hover,
.gestion-boutique.ouvrir-gestion-boutique:focus-visible {
    background: #eadbb9;
    outline: 2px solid #80663d;
    outline-offset: 2px;
}

.gestion-boutique-popup {
    width: min(1120px, 94vw);
    max-height: 88vh;
    overflow: auto;
    padding: 24px;
    color: #302819;
}

.gestion-boutique-popup h2 { margin-top: 0; }
.gestion-boutique-tresorerie { font-size: 1.1em; }
.gestion-boutique-table-wrap,
.gestion-boutique-commandes-wrap { overflow-x: auto; }
.gestion-boutique-popup table { width: 100%; border-collapse: collapse; }
.gestion-boutique-popup th,
.gestion-boutique-popup td { padding: 8px; border-bottom: 1px solid #c9b994; text-align: left; vertical-align: top; }
.gestion-boutique-popup th { white-space: nowrap; }
.gestion-boutique-popup td small { display: block; margin-top: 4px; }
.gestion-boutique-popup input { box-sizing: border-box; width: 100%; min-width: 82px; padding: 6px; }
.gestion-boutique-statut { font-weight: 600; }
.gestion-boutique-form > button { margin-top: 14px; padding: 9px 15px; cursor: pointer; }
.gestion-boutique-erreur { color: #9b1c1c; font-weight: 600; }
.gestion-boutique-commandes { margin-top: 24px; }

@media (max-width: 760px) {
    .gestion-boutique-popup { box-sizing: border-box; width: 96vw; padding: 16px; }
    .gestion-boutique-popup th,
    .gestion-boutique-popup td { padding: 6px; }
}

.responsabilites-compteur {
    display: inline-flex;
    min-width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #fff;
    background: #77613b;
    font-size: 13px;
}

.popup.responsabilites {
    width: min(820px, calc(100vw - 32px));
    box-sizing: border-box;
    color: #342b1e;
    background: linear-gradient(145deg, rgba(255, 253, 239, 0.98), rgba(232, 223, 191, 0.97));
}

.responsabilites > header > span {
    color: #77613b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
}

.responsabilites > header h2 { margin: 5px 0; }
.responsabilites > header p,
.responsabilites-note { color: #665b48; }
.responsabilites-section { margin-top: 24px; }
.responsabilites-section > h2 { display: flex; justify-content: space-between; gap: 12px; font-size: 20px; }
.responsabilites-section > h2 span { color: #77613b; font-size: 15px; }

.responsabilite-carte {
    margin: 10px 0;
    padding: 14px;
    border: 1px solid rgba(119, 97, 59, .25);
    border-left: 4px solid #9a8051;
    border-radius: 10px;
    background: rgba(255, 255, 255, .62);
}

.responsabilite-etat-acceptee { border-left-color: #3979a6; }
.responsabilite-etat-accomplie { border-left-color: #53834b; }
.responsabilite-etat-refusee,
.responsabilite-etat-bloquee { border-left-color: #a05248; }
.responsabilite-etat-echue { border-left-color: #bd702c; }
.responsabilite-carte-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.responsabilite-carte-entete h3 { margin: 3px 0 8px; font-size: 17px; }
.responsabilite-sens { color: #71664f; font-size: 13px; }
.responsabilite-etat { flex: 0 0 auto; padding: 4px 9px; border-radius: 999px; background: #eee5d0; font-size: 13px; font-weight: 700; }
.responsabilite-etat-acceptee .responsabilite-etat { color: #245b7d; background: #e1eef5; }
.responsabilite-etat-accomplie .responsabilite-etat { color: #3d6837; background: #e5f0df; }
.responsabilite-etat-refusee .responsabilite-etat,
.responsabilite-etat-bloquee .responsabilite-etat { color: #843c35; background: #f5e4e1; }
.responsabilite-etat-echue .responsabilite-etat { color: #8b4d19; background: #f8ead9; }
.responsabilite-carte dl { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 8px 0; }
.responsabilite-carte dl div { display: flex; gap: 6px; font-size: 13px; }
.responsabilite-carte dt { color: #71664f; }
.responsabilite-carte dd { margin: 0; font-weight: 600; }
.responsabilite-progression { margin: 10px 0 6px; color: #4c432f; font-size: 14px; }
.responsabilite-progression strong { color: #342b1e; }
.responsabilite-articles { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 5px 0 0; padding-left: 20px; }
.responsabilite-details { margin: 8px 0; color: #665b48; font-size: 13px; }
.responsabilite-details summary { width: fit-content; cursor: pointer; color: #51452f; text-decoration: underline; text-underline-offset: 2px; }
.responsabilite-details[open] summary { margin-bottom: 5px; }
.responsabilite-motif { margin: 8px 0; color: #665b48; font-size: 14px; overflow-wrap: anywhere; }
.responsabilite-motif-joueur { font-style: italic; }
.responsabilite-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.responsabilite-actions button { padding: 7px 12px; border: 1px solid #9a8051; border-radius: 7px; color: #48391f; background: #f4ecd9; cursor: pointer; }
.responsabilite-actions button:disabled { border-color: #ccc3b2; color: #776f62; background: #eeeae2; cursor: not-allowed; }
.responsabilites-vide { padding: 14px; color: #71664f; font-style: italic; }
.responsabilites-note { margin: 20px 0 0; font-size: 13px; }

@media (max-width: 520px) {
    .popup.responsabilites { width: calc(100vw - 24px); min-width: 0; max-width: none; padding: 20px 14px; }
    .responsabilite-carte { padding: 11px; }
    .responsabilite-carte-entete { flex-direction: column; }
}

.popup.journal-botanique {
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    box-sizing: border-box;
    overflow-y: auto;
    color: #342b1e;
    background: linear-gradient(145deg, rgba(255, 253, 239, 0.97), rgba(232, 223, 191, 0.96));
}

.journal-botanique .close {
    float: right;
}

.journal-botanique-entete {
    padding: 8px 36px 16px 0;
    border-bottom: 1px solid rgba(82, 72, 47, 0.25);
}

.journal-botanique-entete > span,
.fiche-botanique-provenance {
    color: #617849;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.journal-botanique-entete h2 {
    margin: 4px 0 8px;
    color: #344328;
    font-size: 26px;
}

.journal-botanique-entete p {
    margin: 0;
    line-height: 1.5;
}

.journal-botanique-section {
    margin-top: 18px;
}

.journal-botanique-section h3 {
    margin: 0 0 10px;
    color: #4c5b38;
    font-size: 17px;
}

.notes-botaniques,
.fiche-botanique,
.journal-botanique-vide {
    padding: 14px 16px;
    border: 1px solid rgba(82, 72, 47, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.48);
}

.notes-botaniques h4,
.fiche-botanique h4 {
    margin: 5px 0 8px;
    color: #493c28;
    font-size: 17px;
}

.notes-botaniques p,
.fiche-botanique p,
.journal-botanique-vide {
    line-height: 1.5;
}

.notes-botaniques p:last-child,
.fiche-botanique p:last-child {
    margin-bottom: 0;
}

.journal-botanique-fiches {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 10px;
}

.fiche-recette button,
.notes-botaniques .etudier-echantillon-botanique {
    margin-top: 12px;
    padding: 7px 12px;
    border: 1px solid #68764b;
    border-radius: 6px;
    background: #68764b;
    color: #fff;
    cursor: pointer;
}

.fiche-recette button:disabled,
.notes-botaniques .etudier-echantillon-botanique:disabled {
    border-color: #aaa596;
    background: #aaa596;
    cursor: not-allowed;
}

.fiche-recette .recette-indisponible {
    color: #765c39;
    font-size: 0.92em;
}

.fiche-botanique-inconnue {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #665f50;
    border-style: dashed;
}

.fiche-botanique-inconnue > span {
    display: grid;
    flex: 0 0 32px;
    height: 32px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #8c896f;
    font-weight: 700;
}

.fiche-botanique-inconnue p,
.journal-botanique-vide {
    margin: 0;
}

div.rencontre {
    background: #fff;
    border: 2px solid #dc3545;
    border-radius: 8px;
    padding: 16px;
    overflow-y: auto;
    height: auto;
    flex-shrink: 0;
}

div.rencontre-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 8px;
}

div.rencontre h3 {
    margin: 0;
    color: #dc3545;
    font-size: 18px;
    flex-grow: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

div.rencontre h3 .prenom {
    font-weight: bold;
}

div.rencontre h3 .pictos-status {
    display: flex;
    align-items: center;
    gap: 4px;
}

div.rencontre h3 .pictos-status img,
div.rencontre h3 .pictos-status svg {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

div.rencontre h3 .pictos-status img:hover,
div.rencontre h3 .pictos-status svg:hover {
    opacity: 1;
}

div.rencontre h3 .pictos-status .bouche {
    cursor: pointer;
}

div.rencontre h3 .pictos-status .bouche:hover img,
div.rencontre h3 .pictos-status .bouche:hover svg,
div.rencontre h3 .pictos-status .position-statut:hover svg {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

div.rencontre-actions {
    display: flex;
    gap: 8px;
}

div.rencontre-details a,
div.rencontre-ordres a {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

div.rencontre-details a:hover,
div.rencontre-ordres a:hover {
    opacity: 1;
}

div.rencontre .nom {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 8px;
    text-align: center;
    color: #dc3545;
}

div.lieu-panel {
    background: #fff;
    border: 2px solid #6f42c1;
    border-radius: 8px;
    padding: 16px;
    overflow-y: auto;
    height: auto;
    flex-shrink: 0;
}

div.lieu-panel h3 {
    margin: 0 0 12px 0;
    color: #6f42c1;
    font-size: 18px;
    text-align: center;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 8px;
}

.objet-lieu-meuble {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 7px 0;
}

.objet-lieu-meuble-image,
.objet-lieu-meuble-icone {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    object-fit: contain;
}

.objet-lieu-meuble-icone {
    display: grid;
    place-items: center;
    font-size: 24px;
}

/* Style commun des commandes d'action contextuelles du jeu. */
.bouton-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid #5b43a8;
    border-radius: 8px;
    background: linear-gradient(180deg, #765fc0, #5d46a5);
    color: #fff;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 2px 5px rgb(40 28 78 / 22%);
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.bouton-action:hover {
    background: linear-gradient(180deg, #6650b0, #4d388f);
    box-shadow: 0 3px 8px rgb(40 28 78 / 30%);
    transform: translateY(-1px);
}

.bouton-action:focus-visible {
    outline: 3px solid #d1c4ff;
    outline-offset: 2px;
}

.bouton-action:active {
    transform: translateY(0);
}

.bouton-action.avec-raccourci {
    padding-right: 42px;
}

.bouton-action.avec-raccourci::after {
    content: attr(data-raccourci);
    position: absolute;
    right: 6px;
    top: 50%;
    min-width: 22px;
    padding: 2px 4px;
    border: 1px solid rgb(255 255 255 / 55%);
    border-radius: 5px;
    background: rgb(255 255 255 / 16%);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    transform: translateY(-50%);
}

.objet-lieu-meuble button,
.transfert-meuble-stockage {
    cursor: pointer;
}

.edition-decoration-murale {
    margin-top: 8px;
    padding: 8px;
    border: 1px solid #9a7a52;
    border-radius: 6px;
    background: #fff9ec;
}

.edition-decoration-murale:focus {
    outline: 3px solid #356b9a;
    outline-offset: 2px;
}

.edition-decoration-apercu {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-weight: 600;
}

.edition-decoration-apercu img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.edition-decoration-commandes-cote {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.edition-decoration-commandes-cote .bouton-action {
    margin-top: 0;
}

.edition-decoration-message {
    display: block;
}

.edition-decoration-murale .bouton-action {
    margin-top: 6px;
}

.gestion-construction {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #7e6848;
    border-radius: 8px;
    background: #f5efdf;
}

.gestion-portes {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #79533d;
    border-radius: 8px;
    background: #f5eee9;
}

.gestion-portes h3 { margin: 0 0 8px; color: #68432e; font-size: 16px; }
.porte-lieu { margin: 6px 0; }
.porte-lieu-etat { display: inline-block; margin-right: 6px; }
.porte-lieu-etat:focus {
    border-radius: 2px;
    background: #fffaf0;
    outline: 3px solid #315d9b;
    outline-offset: 3px;
}
.porte-actions-message { min-height: 1.3em; margin: 6px 0 0; color: #68432e; }
.gestion-portes button { margin: 3px 4px 3px 0; }

@media (forced-colors: active) {
    .porte-lieu-etat:focus { outline-color: Highlight; }
}

.gestion-construction p {
    margin: 4px 0 8px;
}

.outils-construction {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.outils-construction .bouton-action {
    margin: 0;
}

.outil-construction-selectionne {
    outline: 3px solid #315f3a;
    outline-offset: 1px;
}

.outil-construction-materiaux-manquants {
    border-color: #8a8276;
    background: linear-gradient(180deg, #8c887f, #716d65);
    color: #f7f5f1;
    cursor: help;
    box-shadow: none;
}

.outil-construction-materiaux-manquants:hover {
    background: linear-gradient(180deg, #8c887f, #716d65);
    box-shadow: none;
    transform: none;
}

.mode-construction:focus-visible {
    outline: 3px solid #315f3a;
    outline-offset: 3px;
}

.construction-commandes {
    font-size: 0.88em;
    line-height: 1.4;
}

.construction-apercu-texte {
    min-height: 1.4em;
    overflow-wrap: anywhere;
    font-weight: 600;
}

.construction-apercu-carte {
    position: absolute;
    z-index: 12;
    box-sizing: border-box;
    pointer-events: none;
    border: 3px solid #277b39;
    background: rgba(90, 200, 105, 0.22);
}

.construction-apercu-carte[hidden] { display: none; }
.construction-apercu-carte[data-valide="false"] {
    border-color: #b3261e;
    background: rgba(220, 55, 45, 0.2);
}

.construction-apercu-carte::after {
    content: attr(data-label);
    position: absolute;
    left: -3px;
    bottom: calc(100% + 3px);
    max-width: min(220px, calc(100vw - 32px));
    padding: 3px 6px;
    border-radius: 4px;
    background: #283128;
    color: white;
    font-size: 11px;
    line-height: 1.25;
    white-space: normal;
}

.construction-apercu-carte[data-valide="false"]::after { background: #76251f; }

.construction-message {
    min-height: 1.4em;
    font-weight: 600;
}

.contenu-armoire,
.contenu-commode,
.contenu-meuble-stockage {
    max-width: min(520px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

.contenu-armoire ul,
.contenu-commode ul,
.contenu-meuble-stockage ul {
    padding-left: 20px;
}

.contenu-armoire li,
.contenu-commode li,
.contenu-meuble-stockage li {
    margin: 6px 0;
}

.meuble-stockage-vide {
    color: #666;
    font-style: italic;
}

div.lieu-panel .diagnostic-generation {
    margin-top: 12px;
    border-top: 1px solid #e9ecef;
    padding-top: 8px;
    font-size: 13px;
}

div.lieu-panel .diagnostic-generation summary {
    cursor: pointer;
    color: #666;
}

div.lieu-panel .diagnostic-generation-infos {
    white-space: pre-line;
}

div.lieu-panel .diagnostic-generation-trajets {
    max-height: 360px;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    padding: 8px;
    background: #f7f7f8;
    border: 1px solid #e0e0e3;
    border-radius: 4px;
    font-size: 11px;
}

div.lieu-panel .diagnostic-generation-connexions {
    max-height: 280px;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    padding: 8px;
    background: #f7f7f8;
    border: 1px solid #e0e0e3;
    border-radius: 4px;
    font-size: 11px;
}

div.lieu-panel .diagnostic-generation-statut {
    margin-left: 8px;
    color: #555;
}

div.lieu-panel .diagnostic-generation-comparaisons {
    margin-top: 12px;
}

div.lieu-panel .diagnostic-generation-comparaisons-intro {
    margin: 8px 0;
}

div.lieu-panel .diagnostic-generation-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin: 8px 0;
    font-size: 11px;
}

.diagnostic-generation-legende span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.diagnostic-generation-legende i {
    display: inline-flex;
    width: 13px;
    height: 13px;
    align-items: center;
    justify-content: center;
    border: 1px solid #778;
    border-radius: 2px;
    font-size: 9px;
    font-style: normal;
}

.diagnostic-legende-porte {
    background: #9c6644;
}

.diagnostic-legende-meuble {
    background: #65439a;
    color: white;
}

.diagnostic-legende-circulation {
    background: #e7f3e8;
}

.diagnostic-generation-cartes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.diagnostic-generation-carte {
    min-width: 0;
    padding: 8px;
    border: 1px solid #d6dce2;
    border-radius: 5px;
    background: #fff;
}

.diagnostic-generation-carte h4 {
    margin: 0 0 6px;
    font-size: 12px;
}

.diagnostic-generation-scores {
    margin: 6px 0;
    font-size: 10px;
}

.diagnostic-generation-scores summary {
    cursor: pointer;
    font-weight: 600;
}

.diagnostic-generation-scores ul {
    margin: 4px 0 4px 14px;
    padding-left: 10px;
}

.diagnostic-generation-pieces {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 8px;
    margin: 0 0 6px;
    padding: 0;
    list-style: none;
    font-size: 10px;
}

.diagnostic-generation-pieces li {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.diagnostic-generation-couleur-piece {
    width: 9px;
    height: 9px;
    border: 1px solid #9aa;
    border-radius: 2px;
    background: hsl(var(--teinte-piece) 45% 84%);
}

.diagnostic-generation-plan {
    display: grid;
    grid-template-columns: repeat(var(--largeur-plan), minmax(0, 1fr));
    width: 100%;
    border: 1px solid #667;
    background: #68727b;
}

.diagnostic-generation-case {
    display: flex;
    min-width: 0;
    aspect-ratio: 1;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: transparent;
    font-size: clamp(5px, 0.75vw, 9px);
    line-height: 1;
}

.diagnostic-case-mur {
    background: #68727b;
}

.diagnostic-case-sol {
    background: #e7f3e8;
}

.diagnostic-case-piece {
    background: hsl(var(--teinte-piece) 45% 84%);
}

.diagnostic-case-sol.diagnostic-case-piece {
    background: linear-gradient(to bottom, hsl(var(--teinte-piece) 45% 84%) 0 72%, #a9d3ab 72% 100%);
}

.diagnostic-case-porte {
    background: #9c6644;
    color: #fff;
    font-weight: 700;
}

.diagnostic-case-meuble {
    border: 1px solid #513379;
    border-radius: 2px;
    background: #7653a5;
    color: #fff;
    font-weight: 700;
}

.diagnostic-generation-carte .copier-graine-generation {
    width: 100%;
    margin-top: 7px;
    padding: 5px;
    font-size: 11px;
}

@media (max-width: 480px) {
    .diagnostic-generation-cartes {
        grid-template-columns: 1fr;
    }
}

div.log {
    background: #fff;
    border: 2px solid #28a745;
    border-radius: 8px;
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    img {margin-right:4px;}
}

div.log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 8px;
}

div.log h3.journal-titre {
    margin: 0;
    color: #28a745;
    font-size: 16px;
    text-align: center;
    font-weight: 600;
    text-transform: capitalize;
    flex-grow: 1;
}

.heure-log {
    color: #6c757d;
    font-size: 10px;
    font-weight: 500;
    font-family: monospace;
    margin-right: 3px;
}

.statut-action {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    max-width: 100%;
    box-sizing: border-box;
    gap: 4px;
    margin-left: 6px;
    padding: 1px 6px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.85em;
    font-weight: 700;
    line-height: 1.4;
    vertical-align: baseline;
}

.statut-action-libelle {
    min-width: 0;
    overflow-wrap: anywhere;
}

.statut-action-icone {
    display: inline-block;
    min-width: 1em;
    text-align: center;
    font-weight: 800;
}

.statut-action-suspendue {
    color: #654500;
    background: #fff4cc;
}

.statut-action-abandonnee {
    color: #7a1f28;
    background: #fde8e9;
}

.statut-action-interrompue {
    color: #454b52;
    background: #eceff1;
}

@media (max-width: 480px) {
    .statut-action {
        gap: 3px;
        margin-left: 3px;
        padding: 1px 4px;
    }
}

@media (forced-colors: active) {
    .statut-action {
        color: CanvasText;
        background: Canvas;
        border-color: CanvasText;
    }

    .statut-action-suspendue { border-style: dashed; }
    .statut-action-abandonnee { border-style: double; border-width: 3px; }
    .statut-action-interrompue { border-style: dotted; }
}

div.log .entree-log {
    margin-bottom: 4px;
}

div.log .entree-log-parole {
    padding: 4px 6px;
    border-left: 3px solid #28a745;
    background: #f5fbf6;
}

div.log .action-prisonnier-egouts {
    margin: 2px 4px;
    padding: 3px 8px;
    border: 1px solid #6d5835;
    border-radius: 4px;
    background: #fff8e8;
    color: #382d1d;
    cursor: pointer;
}

div.log .action-prisonnier-egouts:hover,
div.log .action-prisonnier-egouts:focus-visible {
    background: #f1dfbd;
}

div.log .action-prisonnier-indisponible {
    color: #6c757d;
    font-style: italic;
}

div.log .parole-interlocuteurs {
    color: #34513b;
    font-size: 11px;
}

div.log .diagnostic-parole {
    margin-top: 2px;
    color: #6c757d;
    font-size: 10px;
}

div.log .diagnostic-parole summary {
    width: fit-content;
    cursor: pointer;
    font-size: 10px;
}

div.log .diagnostic-parole-origine {
    display: block;
    padding-left: 12px;
    font-size: 10px;
}

button.stop {
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    opacity: 0.8;
}

button.stop:hover {
    background: #c82333;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    opacity: 1;
}

div.lieuglobal {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Canvas lieu doit utiliser l'espace disponible */
div.lieuglobal canvas.lieu {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Minimap en mode rencontre */
div.minimap {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 160px;
    height: 160px;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #333;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 100;
    padding: 8px;
    display: none;
    flex-direction: column;
    align-items: center;
}

div.minimap.visible {
    display: flex;
}

div.minimap h4 {
    margin: 0;
    font-size: 12px;
    text-align: center;
    color: #333;
    font-weight: bold;
    flex-shrink: 0;
}

div.minimap canvas.minimap-canvas {
    display: block;
    margin: auto 0;
}

div.lieuglobal h3 {
    flex-grow: 0;
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    margin: 0;
    padding: 8px;
    border-bottom: 1px solid #dee2e6;
}

div.lieuglobal .ligne2 {
    flex-grow: 1;
    position: relative;
}

/* div.lieu supprimé - maintenant dans le panel sidebar */

div.autre {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

/* div.autre .description n'est plus utilisée - supprimée */

/* Actions flottantes */
div.actions-overlay {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    z-index: 200;
}

div.actions-overlay div.boutons {
    display: flex;
    flex-direction: row;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: 8px 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    width: 100%;
    justify-content: center;
}

div.actions-overlay div.groupeactions {
    margin-right: 12px;
}

div.actions-overlay div.groupeactions:last-child {
    margin-right: 0;
}

div.actions-overlay button.action {
    position: relative;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 20px;
    padding: 8px;
    margin: 0 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

div.actions-overlay button.action:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

div.actions-overlay button.action:active {
    transform: translateY(0);
}

div.actions-overlay button.action img {
    width: 24px;
    height: 24px;
    display: block;
}

div.actions-overlay button.action.avec-raccourci::after {
    content: attr(data-raccourci);
    position: absolute;
    right: -12px;
    bottom: -7px;
    min-width: 18px;
    padding: 2px 4px;
    border: 1px solid #fff;
    border-radius: 10px;
    background: #5d46a5;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
    pointer-events: none;
}

div.actions-overlay button.bouton-depliable {
    background: rgba(200, 200, 200, 0.9);
    border: none;
    border-radius: 20px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

div.actions-overlay button.bouton-depliable:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

div.actions-overlay button.bouton-depliable:active {
    transform: translateY(0);
}

div.actions-overlay div.arguments {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 16px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    min-width: 300px;
}

div.dialogue {
    position: absolute;
    bottom: 80px;
    left: 16px;
    right: 16px;
    box-sizing: border-box;
    height: auto;
    min-height: 60px;
    max-height: 120px;
    display: none;
    z-index: 90;
}

.dialogue-rencontre-stack { display: contents; }

.zone-principale.dialogue-rencontre-visible .dialogue-rencontre-stack {
    position: absolute;
    top: 12px;
    right: 16px;
    bottom: var(--dialogue-reserve-actions, 0px);
    left: 16px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    gap: 12px;
    min-height: 0;
    pointer-events: none;
}

.zone-principale.dialogue-rencontre-visible .dialogue-rencontre-stack > .dialogue,
.zone-principale.dialogue-rencontre-visible .dialogue-rencontre-stack > .choix-dialogue {
    position: relative;
    inset: auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    max-height: min(34vh, 250px);
    margin: 0;
    transform: none;
    pointer-events: auto;
}

.zone-principale.dialogue-rencontre-visible .dialogue-rencontre-stack > .dialogue {
    height: min(32vh, 250px);
    flex: 1 1 auto;
}

.zone-principale.dialogue-rencontre-visible .dialogue-rencontre-stack > .choix-dialogue {
    flex: 2 1 auto;
}

div.dialogue.dialogue-rencontre {
    height: min(32vh, 250px);
    min-height: 90px;
    max-height: 250px;
    overflow-y: auto;
    padding: 10px 14px;
    color: #382719;
    background: linear-gradient(145deg, rgba(255, 250, 235, .96), rgba(222, 204, 169, .96));
    border: 1px solid rgba(91, 58, 32, .65);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .8);
}

.ligne-dialogue { padding: 5px 0; line-height: 1.4; }
.ligne-dialogue + .ligne-dialogue { border-top: 1px solid rgba(91, 58, 32, .18); }
.ligne-dialogue strong { margin-right: .45em; }

/* Choix de parole affichés au bas de la scène pendant une rencontre */
.choix-dialogue {
    display: none;
    position: absolute;
    z-index: 100;
    left: 50%;
    bottom: 204px;
    transform: translateX(-50%);
    width: min(760px, calc(100% - 32px));
    max-height: min(34vh, 250px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 12px 14px 14px;
    color: #382719;
    background: linear-gradient(145deg, rgba(255, 250, 235, .97), rgba(222, 204, 169, .97));
    border: 1px solid rgba(91, 58, 32, .65);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .8);
    backdrop-filter: blur(8px);
}

.choix-dialogue.visible { display: block; }
.choix-dialogue-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 2px 9px;
    font: 600 16px 'Lato', sans-serif;
}
.choix-dialogue-entete > span { flex: 1 1 auto; }
.dialogue-retour, .dialogue-autre-sujet, .dialogue-contextuel {
    flex: 0 0 auto;
    border: 1px solid rgba(91, 58, 32, .3);
    border-radius: 8px;
    padding: 5px 9px;
    color: #55391f;
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
}
.dialogue-indisponible {
    grid-column: 1 / -1;
    padding: 8px;
    color: #725c43;
    font: 15px 'Itim', cursive;
    text-align: center;
}
.choix-dialogue-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 7px;
}
.dialogue-pris-en-charge {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(91, 58, 32, .24);
}
.dialogue-pris-en-charge > p {
    margin: 0 2px 7px;
    color: #60452b;
    font: 14px 'Lato', sans-serif;
}
.dialogue-pris-en-charge > .dialogue-reaction-capture {
    padding-left: 10px;
    border-left: 2px solid rgba(91, 58, 32, .35);
    color: #392b20;
    font-style: italic;
}
.option-dialogue {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 7px 10px;
    text-align: left;
    color: #382719;
    font: 16px 'Itim', cursive;
    background: rgba(255, 255, 255, .56);
    border: 1px solid rgba(91, 58, 32, .2);
    border-radius: 9px;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.option-dialogue:hover, .option-dialogue:focus-visible {
    background: rgba(255, 255, 255, .92);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(69, 43, 23, .16);
    outline: 2px solid rgba(137, 91, 46, .38);
    outline-offset: 1px;
}
.option-dialogue:disabled {
    color: #786f63;
    background: rgba(120, 107, 88, .12);
    border-style: dashed;
    box-shadow: none;
    cursor: not-allowed;
    opacity: .68;
}
.option-dialogue:disabled:hover { transform: none; }
.option-dialogue:disabled:hover, .option-dialogue:disabled:focus-visible { outline: none; }
.option-dialogue kbd {
    display: inline-grid;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    place-items: center;
    color: #fff9ed;
    font: 600 13px 'Lato', sans-serif;
    background: #76502d;
    border-radius: 6px;
    box-shadow: inset 0 -2px rgba(0, 0, 0, .18);
}
.option-dialogue span:nth-child(2) { flex: 1; }
.option-dialogue .dialogue-statut {
    flex: 0 0 auto;
    padding: 2px 6px;
    color: #42634b;
    font: 11px 'Lato', sans-serif;
    white-space: nowrap;
    background: rgba(95, 143, 102, .12);
    border: 1px solid rgba(70, 112, 78, .2);
    border-radius: 10px;
}
.option-dialogue .dialogue-statut-possible {
    color: #765a2d;
    background: rgba(193, 148, 70, .12);
    border-color: rgba(154, 113, 45, .2);
}
.option-dialogue .dialogue-suite { color: #805a34; font: 22px 'Lato', sans-serif; }

@media (max-width: 700px) {
    .choix-dialogue { width: calc(100% - 16px); max-height: 30vh; padding: 9px; }
    .zone-principale.dialogue-rencontre-visible .dialogue-rencontre-stack > .dialogue {
        height: max(90px, min(14vh, 110px));
        max-height: 110px;
    }
    .zone-principale.dialogue-rencontre-visible .dialogue-rencontre-stack > .choix-dialogue {
        max-height: min(28vh, 220px);
    }
    .choix-dialogue-options { grid-template-columns: 1fr; gap: 5px; }
    .option-dialogue { min-height: 36px; padding: 5px 8px; }
    .option-dialogue .dialogue-statut { font-size: 10px; }
}

/* Réglages flottants */
div.reglages {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    padding: 8px;
    z-index: 50;
}

.compositeur-visage-lien {
    display: inline-block;
    margin: 2px 6px 8px 0;
    padding: 6px 9px;
    border: 1px solid #755c39;
    border-radius: 6px;
    background: #fff8e9;
    color: #49351e;
    font-weight: 600;
    text-decoration: none;
}

.compositeur-visage-lien:hover,
.compositeur-visage-lien:focus-visible {
    background: #f0dfbf;
    outline: 2px solid #755c39;
    outline-offset: 2px;
}

.compositeur-corps-lien {
    display: inline-block; margin: 2px 6px 8px 0; padding: 6px 9px;
    border: 1px solid #567681; border-radius: 6px; background: #edf7fa;
    color: #294954; font-weight: 600; text-decoration: none;
}
.compositeur-corps-lien:hover, .compositeur-corps-lien:focus-visible { background: #d9edf2; outline: 2px solid #567681; outline-offset: 2px; }
.compositeur-corps.popup {
    position: relative; width: min(1240px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
    overflow-y: auto; box-sizing: border-box; padding: 28px; color: #253840; background: #f5fafb;
}
.compositeur-corps h2 { margin: 0 44px 6px 0; color: #294954; font-size: 26px; }
.compositeur-corps-intro { margin: 0 0 18px; color: #526970; }
.compositeur-corps-fermer { position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #dce9eb; color: #294954; font-size: 26px; cursor: pointer; }
.compositeur-corps-contenu { display: grid; grid-template-columns: minmax(390px, 1.15fr) minmax(320px, .85fr); gap: 18px 24px; align-items: start; }
.compositeur-corps-apercu { display: grid; gap: 8px; }
.compositeur-corps-apercus-principaux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.compositeur-corps-apercus-principaux figure { min-width: 0; margin: 0; text-align: center; }
.compositeur-corps-cadre { position: relative; width: min(100%, 250px); justify-self: center; overflow: hidden; border: 1px solid #abc1c7; border-radius: 7px; background: #d8e8ee; }
.compositeur-corps-reference img { display: block; width: 100%; aspect-ratio: 1 / 2; object-fit: contain; image-rendering: pixelated; }
.compositeur-corps-reperes { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #ed4260; stroke-width: 1.5; stroke-dasharray: 4 3; pointer-events: none; }
.compositeur-corps-reperes[hidden] { display: none !important; }
.compositeur-corps-reperes circle { fill: #ed4260; stroke: none; }
.compositeur-corps-courant .compositeur-corps-cadre { background-color: #d8e8ee; background-image: linear-gradient(45deg, #c8dce1 25%, transparent 25%), linear-gradient(-45deg, #c8dce1 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #c8dce1 75%), linear-gradient(-45deg, transparent 75%, #c8dce1 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.compositeur-corps-raster { display: block; width: 100%; aspect-ratio: 1 / 2; image-rendering: pixelated; }
.compositeur-corps-visage-apercu { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; shape-rendering: crispEdges; }
.compositeur-corps-accessoires-premier-plan, .compositeur-corps-accessoires-carte-premier-plan { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; image-rendering: pixelated; }
.compositeur-corps-reperes-raster { z-index: 1; }
.compositeur-corps-apercus-principaux figcaption { display: grid; gap: 3px; margin-top: 6px; color: #314a52; font-size: 13px; font-weight: 700; }
.compositeur-corps-apercus-principaux figcaption small { color: #64777c; font-size: 11px; font-weight: 400; line-height: 1.35; }
.compositeur-corps-canevas { display: block; width: min(100%, 250px); height: auto; justify-self: center; border: 1px solid #abc1c7; border-radius: 7px; background: #d8e8ee; image-rendering: pixelated; }
.compositeur-corps-diagnostic { padding: 9px 12px; border: 1px solid #c4d5d9; border-radius: 7px; background: #f6fafb; }
.compositeur-corps-diagnostic summary { color: #294954; font-weight: 700; cursor: pointer; }
.compositeur-corps-diagnostic p { margin: 8px 0; color: #64777c; font-size: 12px; }
.compositeur-corps-etat { margin: 0; color: #526970; font-size: 13px; text-align: center; }
.compositeur-corps-assemblage { grid-column: 1 / -1; padding: 14px; border: 1px solid #c4d5d9; border-radius: 8px; background: #f6fafb; }
.compositeur-corps-assemblage h3 { margin: 0 0 10px; color: #294954; font-size: 18px; }
.compositeur-corps-assemblage-apercus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; margin-bottom: 12px; }
.compositeur-corps-assemblage-apercus figure { display: grid; justify-items: center; gap: 5px; min-width: 0; margin: 0; color: #314a52; font-size: 12px; font-weight: 700; text-align: center; }
.compositeur-corps-visage-isole { display: block; width: min(100%, 180px); aspect-ratio: 1; border: 1px solid #abc1c7; border-radius: 5px; background: #d8e8ee; image-rendering: pixelated; }
.compositeur-corps-portrait-assemble { display: block; width: min(100%, 180px); height: auto; aspect-ratio: 1 / 2; overflow: hidden; border: 1px solid #abc1c7; border-radius: 5px; background-color: #d8e8ee; background-image: linear-gradient(45deg, #c8dce1 25%, transparent 25%), linear-gradient(-45deg, #c8dce1 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #c8dce1 75%), linear-gradient(-45deg, transparent 75%, #c8dce1 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; image-rendering: pixelated; }
.compositeur-corps-ouvrir-visage, .compositeur-corps-effacer-visage, .compositeur-corps-assemblage button, .compositeur-visage-assembler-corps { padding: 8px 11px; border: 1px solid #567681; border-radius: 5px; background: #e8f2f4; color: #294954; font: inherit; cursor: pointer; }
.compositeur-corps-assemblage button:disabled { opacity: .55; cursor: not-allowed; }
.compositeur-corps-decalages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.compositeur-corps-decalages label { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; color: #526970; font-size: 12px; }
.compositeur-corps-decalages output { text-align: right; font-variant-numeric: tabular-nums; }
.compositeur-corps-decalages input { grid-column: 1 / -1; width: 100%; margin: 0; accent-color: #527e8b; }
.compositeur-corps-assemblage-etat { margin: 10px 0 0; color: #526970; font-size: 12px; line-height: 1.4; }
.compositeur-corps-commandes fieldset { display: grid; gap: 12px; margin: 0; padding: 14px; border: 1px solid #c4d5d9; border-radius: 8px; }
.compositeur-corps-commandes legend { padding: 0 6px; color: #294954; font-weight: 700; }
.compositeur-corps-controle { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; margin: 0; }
.compositeur-corps-controle span { display: grid; gap: 2px; }
.compositeur-corps-controle small { color: #64777c; font-size: 12px; font-weight: 400; }
.compositeur-corps-controle output { min-width: 38px; color: #294954; font-variant-numeric: tabular-nums; text-align: right; }
.compositeur-corps-controle input { grid-column: 1 / -1; width: 100%; margin: 0; accent-color: #527e8b; }
.compositeur-corps-posture, .compositeur-corps-tenue { display: grid; gap: 5px; margin: 3px 0 0; }
.compositeur-corps-posture select, .compositeur-corps-tenue select { padding: 7px; border: 1px solid #a9bec3; border-radius: 5px; background: white; font: inherit; }
.compositeur-corps-accessoires { display: grid; gap: 8px; margin: 3px 0 0; padding: 9px; border: 1px solid #d0dfe2; border-radius: 6px; }
.compositeur-corps-accessoires-liste { display: grid; gap: 6px; }
.compositeur-corps-accessoires-zone { display: grid; gap: 6px; margin: 0; padding: 6px; border: 1px solid #dce7e9; border-radius: 5px; }
.compositeur-corps-accessoires-zone legend { padding: 0 4px; color: #526970; font-size: 12px; font-weight: 700; }
.compositeur-corps-accessoire { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border: 1px solid #d0dfe2; border-radius: 5px; background: white; }
.compositeur-corps-accessoire span { display: grid; gap: 2px; }
.compositeur-corps-accessoire small { color: #64777c; font-size: 11px; }
.compositeur-corps-accessoire.incompatible { border-color: #c26767; background: #fff0ef; color: #7e2929; }
.compositeur-corps-accessoire.incompatible small { color: #8c4141; }
.compositeur-corps-accessoires-etat { margin: 0; color: #526970; font-size: 12px; line-height: 1.4; }
.compositeur-corps-accessoires-etat.invalide { color: #8c3030; font-weight: 700; }
.compositeur-corps-personne { display: grid; gap: 5px; margin: 0; }
.compositeur-corps-personne select,
.compositeur-corps-filtre { width: 100%; min-width: 0; box-sizing: border-box; padding: 8px; border: 1px solid #a9bec3; border-radius: 5px; background: white; font: inherit; }
.compositeur-corps-filtre:focus-visible,
.compositeur-corps-personne select:focus-visible { outline: 2px solid #527e8b; outline-offset: 2px; }
.compositeur-corps-personnes-etat { min-height: 1.4em; margin: 5px 0; color: #526970; font-size: 12px; line-height: 1.4; }
.compositeur-corps-personne-info { min-height: 2.6em; margin: 6px 0 10px; color: #526970; font-size: 12px; line-height: 1.4; }
.compositeur-corps-guides { display: flex; gap: 7px; align-items: center; margin: 0; color: #526970; font-size: 12px; }
.compositeur-corps-guides input { margin: 0; accent-color: #527e8b; }
.compositeur-corps-comparaison { grid-column: 1 / -1; padding-top: 4px; }
.compositeur-corps-comparaison h3 { margin: 0; color: #294954; font-size: 18px; }
.compositeur-corps-comparaison > p { margin: 4px 0 10px; color: #64777c; font-size: 12px; }
.compositeur-corps-comparaison-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.compositeur-corps-carte-morphologie { display: grid; justify-items: center; gap: 7px; margin: 0; padding: 10px; border: 1px solid #c4d5d9; border-radius: 7px; background: #fbfdfd; }
.compositeur-corps-carte-canevas { position: relative; width: min(100%, 110px); aspect-ratio: 1 / 2; }
.compositeur-corps-carte-morphologie canvas { display: block; box-sizing: border-box; width: 100%; height: 100%; border: 1px solid #d2e0e3; border-radius: 4px; image-rendering: pixelated; background-color: #e5eff2; background-image: linear-gradient(45deg, #d5e4e7 25%, transparent 25%), linear-gradient(-45deg, #d5e4e7 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d5e4e7 75%), linear-gradient(-45deg, transparent 75%, #d5e4e7 75%); background-size: 12px 12px; background-position: 0 0, 0 6px, 6px -6px, -6px 0; }
.compositeur-corps-carte-morphologie .compositeur-corps-accessoires-carte-premier-plan { border: 0; border-radius: 0; background: transparent; }
.compositeur-corps-visage-comparaison { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; shape-rendering: crispEdges; }
.compositeur-corps-carte-morphologie figcaption { min-height: 2.5em; color: #314a52; font-size: 13px; font-weight: 700; text-align: center; }
.compositeur-corps-carte-morphologie button { padding: 6px 10px; border: 1px solid #567681; border-radius: 5px; background: #e8f2f4; color: #294954; cursor: pointer; }
.compositeur-corps-reset { padding: 9px 12px; border: 1px solid #567681; border-radius: 5px; background: #e8f2f4; color: #294954; font: inherit; cursor: pointer; }
.compositeur-corps-note { margin: 12px 0 0; color: #64777c; font-size: 12px; line-height: 1.45; }
.compositeur-corps-identite-etat { min-height: 1.4em; margin: 3px 0 0; color: #526970; font-size: 12px; line-height: 1.4; }
.compositeur-corps-enregistrer-identite { padding: 9px 12px; border: 1px solid #365f6b; border-radius: 5px; background: #365f6b; color: white; font: inherit; font-weight: 700; cursor: pointer; }
.compositeur-corps-enregistrer-identite:disabled { border-color: #a9bec3; background: #e7eff1; color: #64777c; cursor: not-allowed; }
@media (max-width: 700px) {
    .compositeur-corps.popup { padding: 20px 16px; }
    .compositeur-corps-contenu { grid-template-columns: 1fr; gap: 14px; }
    .compositeur-corps-apercus-principaux { gap: 7px; }
    .compositeur-corps-cadre, .compositeur-corps-canevas { width: 100%; }
    .compositeur-corps-apercus-principaux figcaption { font-size: 11px; }
    .compositeur-corps-apercus-principaux figcaption small { font-size: 10px; }
    .compositeur-corps-comparaison-grille { gap: 6px; }
    .compositeur-corps-assemblage { padding: 10px; }
    .compositeur-corps-assemblage-apercus, .compositeur-corps-decalages { gap: 7px; }
    .compositeur-corps-carte-morphologie { padding: 6px 4px; }
    .compositeur-corps-carte-morphologie figcaption { font-size: 11px; }
}

.compositeur-visage.popup {
    position: relative;
    width: min(1540px, calc(100vw - 32px));
    min-width: 0;
    max-height: calc(100vh - 32px);
    box-sizing: border-box;
    overflow-y: auto;
    padding: 28px;
    color: #30271e;
    background: #fffaf0;
}

.compositeur-visage h2 {
    margin: 0 44px 6px 0;
    color: #593e23;
    font-size: 26px;
}

.compositeur-visage-intro {
    margin: 0 0 20px;
    color: #655947;
}

.compositeur-visage-fermer {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #eadfc9;
    color: #392b1c;
    font-size: 26px;
    cursor: pointer;
}

.compositeur-visage-contenu {
    display: grid;
    grid-template-columns: minmax(340px, 1.15fr) minmax(260px, 0.85fr) minmax(300px, 0.85fr);
    gap: 18px;
    align-items: start;
}

.compositeur-visage-apercu { grid-column: 1; grid-row: 1 / span 2; }
.compositeur-visage-choix-traits { grid-column: 2; grid-row: 1; display: grid; gap: 9px; align-content: start; }
.compositeur-visage-expression {
    display: grid;
    gap: 7px;
    min-width: 0;
    margin: 0;
    padding: 8px 10px 10px;
    border: 1px solid #c9b895;
    border-radius: 8px;
    background: #fff8e9;
}
.compositeur-visage-expression legend {
    padding: 0 5px;
    color: #49351e;
    font-weight: 700;
}
.compositeur-visage-expression label { margin-top: 0; }
.compositeur-visage-expression input[type="range"] { width: 100%; }
.compositeur-visage-reglages-colonne {
    grid-column: 3;
    grid-row: 1;
    display: grid;
    align-content: start;
    gap: 9px;
    min-width: 0;
}

.compositeur-visage-apercu {
    min-width: 0;
    padding: 12px;
    border: 1px solid #d8c8aa;
    border-radius: 12px;
    background: #e9dfca;
}

.compositeur-visage-apercus {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.compositeur-visage-apercus.compositeur-visage-comparaison-active {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compositeur-visage-comparaison-active .compositeur-visage-canevas {
    width: 100%;
}

.compositeur-visage-canevas-neutre::before {
    content: "Référence neutre";
    position: absolute;
    z-index: 1;
    top: 7px;
    left: 8px;
    padding: 3px 6px;
    border-radius: 4px;
    background: rgba(255, 253, 248, 0.88);
    color: #30271e;
    font-size: 11px;
}

.compositeur-visage-canevas {
    position: relative;
    width: min(100%, 540px);
    margin: 0 auto;
    overflow: hidden;
    border-radius: 8px;
    background: #ddd1b8;
}

.compositeur-visage-canevas::after {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0 4px, rgba(35, 28, 22, 0.8) 4px 8px);
    content: "";
    pointer-events: none;
}

.compositeur-visage.sans-repere-central .compositeur-visage-canevas::after {
    display: none;
}

.compositeur-visage-base,
.compositeur-visage-traits {
    display: block;
    width: 100%;
    height: auto;
}

.compositeur-visage-base {
    background: #ddd1b8;
}

.compositeur-visage-traits {
    position: absolute;
    inset: 0;
    overflow: visible;
    pointer-events: none;
}

.compositeur-visage-guides {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    pointer-events: none;
}

.compositeur-visage-guides.guides-masques { display: none; }
.compositeur-visage-guides .guide-yeux { stroke: #18c6e0; }
.compositeur-visage-guides .guide-nez { stroke: #f1ad25; }
.compositeur-visage-guides .guide-bouche { stroke: #ee5c9a; }
.compositeur-visage-guides line { stroke-width: 0.8; stroke-dasharray: 2 2; opacity: 0.9; }

.compositeur-visage-etat {
    min-height: 1.4em;
    margin: 10px 4px 0;
    color: #51432e;
    text-align: center;
}

.compositeur-visage-comparer-bases {
    display: block;
    width: 100%;
    margin: 12px 0 6px;
    padding: 10px;
    border: 1px solid #8d704a;
    border-radius: 7px;
    background: #fff8e9;
    color: #49351e;
    font-weight: 700;
    cursor: pointer;
}

.compositeur-visage-comparer-bases:hover,
.compositeur-visage-comparer-bases:focus-visible {
    background: #f0dfbf;
    outline: 2px solid #755c39;
    outline-offset: 2px;
}

.compositeur-visage-comparaison-aide {
    margin: 0 2px 10px;
    color: #655947;
    font-size: 13px;
}

.compositeur-visage-matrice-traits {
    margin: 10px 0;
    border: 1px solid #b9a581;
    border-radius: 8px;
    background: #fffaf0;
}

.compositeur-visage-matrice-traits > summary {
    padding: 10px 12px;
    color: #49351e;
    font-weight: 700;
    cursor: pointer;
}

.compositeur-visage-matrice-traits > summary:focus-visible {
    outline: 2px solid #755c39;
    outline-offset: 2px;
}

.compositeur-visage-matrice-traits > p {
    margin: 0 12px 10px;
    color: #655947;
    font-size: 13px;
}

.compositeur-visage-grille-matrice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
    max-height: 62vh;
    overflow: auto;
    padding: 0 10px 10px;
}

.compositeur-visage-matrice-base {
    min-width: 0;
    padding: 8px;
    border: 1px solid #d3c5aa;
    border-radius: 7px;
    background: #fff;
}

.compositeur-visage-matrice-base > h3 {
    min-height: 2.5em;
    margin: 0 0 6px;
    color: #49351e;
    font-size: 13px;
}

.compositeur-visage-matrice-cellules {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.compositeur-visage-matrice-cellule {
    min-width: 0;
    padding: 5px;
    border: 1px solid #e3dac9;
    border-radius: 6px;
    background: #fffaf0;
}

.compositeur-visage-matrice-cellule h4 {
    margin: 0 0 4px;
    color: #655947;
    font-size: 11px;
}

.compositeur-visage-matrice-miniature {
    position: relative;
    width: 100%;
    max-width: 112px;
    margin: 0 auto 5px;
    background: #ddd1b8;
}

.compositeur-visage-matrice-cellule > button {
    width: 100%;
    min-height: 30px;
    padding: 4px;
    border: 1px solid #aa9673;
    border-radius: 5px;
    background: #684b2b;
    color: #fff;
    font-size: 11px;
    cursor: pointer;
}

.compositeur-visage-matrice-cellule > button:hover,
.compositeur-visage-matrice-cellule > button:focus-visible {
    background: #4f371f;
    outline: 2px solid #755c39;
    outline-offset: 1px;
}

.compositeur-visage-grille-bases:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    max-height: 58vh;
    overflow: auto;
    padding: 2px 4px 8px 0;
}

.compositeur-visage-carte {
    min-width: 0;
    padding: 9px;
    border: 1px solid #c9b895;
    border-radius: 9px;
    background: #fffaf0;
}

.compositeur-visage-carte h3 {
    min-height: 2.4em;
    margin: 0 0 7px;
    color: #49351e;
    font-size: 14px;
}

.compositeur-visage-miniature {
    position: relative;
    width: min(100%, 220px);
    margin: 0 auto 8px;
    background: #ddd1b8;
}

.compositeur-visage-miniature-base,
.compositeur-visage-miniature-traits {
    display: block;
    width: 100%;
    height: auto;
    shape-rendering: crispEdges;
}

.compositeur-visage-miniature-traits {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.compositeur-visage-carte > button {
    width: 100%;
    min-height: 36px;
    border: 1px solid #aa9673;
    border-radius: 6px;
    background: #684b2b;
    color: #fff;
    cursor: pointer;
}

.compositeur-visage-carte > button:hover,
.compositeur-visage-carte > button:focus-visible,
.compositeur-visage-carte > button.actif {
    background: #4f371f;
    outline: 2px solid #755c39;
    outline-offset: 1px;
}

.compositeur-visage-carte details {
    margin-top: 8px;
    color: #51432e;
    font-size: 12px;
}

.compositeur-visage-calage {
    display: grid;
    gap: 8px;
    margin: 6px 0;
    padding: 8px 10px 10px;
    border: 1px solid #c9b895;
    border-radius: 8px;
}

.compositeur-visage-reglage-bloc {
    min-width: 0;
    margin: 2px 0 5px;
    border: 1px solid #c9b895;
    border-radius: 8px;
    background: #f7f0e2;
}

.compositeur-visage-reglage-bloc > summary {
    padding: 10px;
    color: #49351e;
    font-weight: 700;
    cursor: pointer;
}

.compositeur-visage-reglage-etat {
    display: block;
    margin-top: 3px;
    color: #655947;
    font-size: 11px;
    font-weight: 400;
}

.compositeur-visage-reglage-bloc > summary:focus-visible {
    outline: 2px solid #755c39;
    outline-offset: 2px;
}

.compositeur-visage-reglage-bloc > fieldset { margin: 0 8px 8px; }

.compositeur-visage-ancrage {
    display: grid;
    gap: 8px;
    margin: 6px 0;
    padding: 8px 10px 10px;
    border: 1px solid #a9bdd0;
    border-radius: 8px;
}

.compositeur-visage-ancrage legend {
    padding: 0 5px;
    color: #29465e;
    font-weight: 700;
}

.compositeur-visage-ancrage > p {
    margin: 0;
    color: #536879;
    font-size: 12px;
    font-weight: 400;
}

.compositeur-visage-ancrage > label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
}

.compositeur-visage-ancrage-controles {
    display: grid;
    grid-template-columns: 34px 66px 34px;
    gap: 4px;
    align-items: center;
}

.compositeur-visage-ancrage-controles button {
    min-height: 34px;
    padding: 3px;
    border: 1px solid #9aafbf;
    border-radius: 6px;
    background: #f2f7fa;
    color: #29465e;
    font-size: 18px;
    line-height: 1;
}

.compositeur-visage-ancrage-controles button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.compositeur-visage-ancrage select,
.compositeur-visage-ancrage input[type="number"] {
    min-height: 34px;
    box-sizing: border-box;
    padding: 5px 7px;
    border: 1px solid #9aafbf;
    border-radius: 6px;
    background: #fffdf8;
    color: #30271e;
}

.compositeur-visage-ancrage select { width: 100%; }
.compositeur-visage-ancrage input[type="number"] { width: 66px; text-align: center; }
.compositeur-visage-ancrage > button { margin-top: 2px !important; }
.compositeur-visage-ancrage > .compositeur-visage-reinitialiser-ancrage { background: #f2f7fa !important; color: #29465e !important; }
.compositeur-visage-ancrage-etat { min-height: 1.3em; margin: 0; color: #536879; font-size: 12px; font-weight: 400; }
.compositeur-visage-ancrage-repere { padding: 7px 8px; border-radius: 5px; background: #edf4f8; color: #29465e !important; line-height: 1.45; }

.compositeur-visage-calage legend {
    padding: 0 5px;
    color: #49351e;
    font-weight: 700;
}

.compositeur-visage-calage > p:first-of-type {
    margin: 0;
    color: #655947;
    font-size: 12px;
    font-weight: 400;
}

.compositeur-visage-calage > label:not(.compositeur-visage-guides-toggle) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 66px;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
}

.compositeur-visage-calage > .calage-yeux { border-left: 3px solid #18a9c0; padding-left: 7px; }
.compositeur-visage-calage > .calage-nez { border-left: 3px solid #d9920c; padding-left: 7px; }
.compositeur-visage-calage > .calage-bouche { border-left: 3px solid #d64783; padding-left: 7px; }

.compositeur-visage-calage input[type="number"] {
    width: 66px;
    min-height: 34px;
    box-sizing: border-box;
    padding: 5px 7px;
    border: 1px solid #aa9673;
    border-radius: 6px;
    background: #fffdf8;
    color: #30271e;
}

.compositeur-visage-guides-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 3px 0 0 !important;
    font-size: 13px;
}

.compositeur-visage-apercu > .compositeur-visage-guides-toggle + .compositeur-visage-guides-toggle {
    margin-top: 4px !important;
}

.compositeur-visage-guides-toggle input {
    width: 18px;
    height: 18px;
    accent-color: #684b2b;
}

.compositeur-visage-calage > button {
    margin-top: 2px !important;
}

.compositeur-visage-calage > .compositeur-visage-reinitialiser-calage {
    background: #fff8e9 !important;
    color: #49351e !important;
}

.compositeur-visage-calage-etat {
    min-height: 1.3em;
    margin: 0;
    color: #51432e;
    font-size: 12px;
    font-weight: 400;
}

.compositeur-visage-export-calages {
    margin: 4px 0 8px;
    padding: 9px 10px;
    border: 1px solid #c9b895;
    border-radius: 8px;
    background: #fffaf0;
}

.compositeur-visage-export-calages > summary {
    color: #49351e;
    font-weight: 700;
    cursor: pointer;
}

.compositeur-visage-export-calages > p {
    margin: 8px 0;
    color: #655947;
    font-size: 12px;
    font-weight: 400;
}

.compositeur-visage-revue-base {
    margin: 9px 0;
    padding: 7px;
    border: 1px solid #d8c8aa;
    border-radius: 6px;
}

.compositeur-visage-revue-base legend { padding: 0 4px; }
.compositeur-visage-revue-base > p { margin: 2px 0 8px; font-size: 12px; font-weight: 400; }
.compositeur-visage-revue-validation { display: flex; gap: 7px; align-items: flex-start; font-size: 12px; }
.compositeur-visage-revue-validation input { flex: 0 0 auto; margin-top: 2px; }
.compositeur-visage-revue-justification-label { display: grid; gap: 4px; margin: 6px 0 0 !important; font-size: 12px; }
.compositeur-visage-revue-justification-label textarea { width: 100%; box-sizing: border-box; resize: vertical; padding: 6px; border: 1px solid #aa9673; border-radius: 5px; font: inherit; font-weight: 400; }
.compositeur-visage-revue-justification-label textarea[aria-invalid="true"] { border-color: #b52c32; outline: 1px solid #b52c32; }
.compositeur-visage-export-etat { min-height: 1.3em; }
.compositeur-visage-exporter-calages:disabled { opacity: 0.55; cursor: not-allowed; }

.compositeur-visage-carte summary {
    cursor: pointer;
    font-weight: 700;
}

.compositeur-visage-commandes {
    display: contents;
}

.compositeur-visage-commandes label {
    margin-top: 7px;
    color: #47371f;
    font-weight: 700;
}

.compositeur-visage-choix {
    min-width: 0;
    margin: 0 0 5px;
    padding: 8px;
    border: 1px solid #d8c8aa;
    border-radius: 8px;
    background: #fff8e9;
}

.compositeur-visage-choix > summary {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-height: 24px;
    color: #49351e;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.compositeur-visage-choix > summary:focus-visible {
    outline: 2px solid #755c39;
    outline-offset: 2px;
}

.compositeur-visage-choix-titre { flex: 0 0 auto; }

.compositeur-visage-choix-actuel {
    color: #655947;
    font-size: 11px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compositeur-visage-choix .compositeur-visage-filtre-label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 12px;
}

.compositeur-visage-choix .compositeur-visage-filtre {
    min-height: 34px;
    padding: 5px 7px;
}

.compositeur-visage-choix-grille {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    max-height: 32vh;
    overflow: auto;
    padding: 2px;
}

.compositeur-visage-choix-carte {
    display: grid;
    grid-template-rows: auto minmax(2.5em, auto) auto;
    align-content: start;
    gap: 3px;
    min-width: 0;
    min-height: 0 !important;
    padding: 5px !important;
    margin: 0 !important;
    border: 1px solid #c9b895 !important;
    border-radius: 6px !important;
    background: #fffdf8 !important;
    color: #30271e !important;
    text-align: left;
    cursor: pointer;
}

.compositeur-visage-choix-carte[hidden] { display: none !important; }
.compositeur-visage-choix-carte:hover,
.compositeur-visage-choix-carte:focus-visible,
.compositeur-visage-choix-carte.selectionnee {
    border-color: #684b2b !important;
    outline: 2px solid #8a6840;
    outline-offset: 1px;
}

.compositeur-visage-choix-miniature {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: #ddd1b8;
}

.compositeur-visage-choix-miniature svg {
    display: block;
    width: 100%;
    height: 100%;
    shape-rendering: crispEdges;
}

.compositeur-visage-choix-miniature .compositeur-visage-miniature-traits {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.compositeur-visage-choix-nom {
    overflow-wrap: anywhere;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

.compositeur-visage-choix-source {
    color: #655947;
    font-size: 10px;
    font-weight: 400;
}

.compositeur-visage-choix-carte:focus-visible { z-index: 1; }

.compositeur-visage-reglages-avances {
    min-width: 0;
    margin: 2px 0 5px;
    border: 1px solid #c9b895;
    border-radius: 8px;
    background: #f7f0e2;
}

.compositeur-visage-reglages-avances > summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 10px;
    color: #49351e;
    font-weight: 700;
    cursor: pointer;
}

.compositeur-visage-reglages-avances > summary:focus-visible {
    outline: 2px solid #755c39;
    outline-offset: 2px;
}

.compositeur-visage-reglages-etat {
    color: #655947;
    font-size: 11px;
    font-weight: 400;
    text-align: right;
}

.compositeur-visage-reglages-avances-contenu {
    display: grid;
    gap: 7px;
    padding: 0 8px 8px;
}

.compositeur-visage-commandes select,
.compositeur-visage-commandes button {
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid #aa9673;
    border-radius: 7px;
    background: #fffdf8;
    color: #30271e;
}

.compositeur-visage-commandes input[type="range"] {
    width: 100%;
    accent-color: #684b2b;
}

.compositeur-visage-intensite-valeur {
    float: right;
    font-weight: 400;
}

.compositeur-visage-comparer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400 !important;
}

.compositeur-visage-comparer input {
    width: 18px;
    height: 18px;
    accent-color: #684b2b;
}

.compositeur-visage-commandes button {
    margin-top: 12px;
    background: #684b2b;
    color: white;
    font-weight: 600;
    cursor: pointer;
}

.compositeur-visage-commandes button:hover,
.compositeur-visage-commandes button:focus-visible {
    background: #4f371f;
}

.compositeur-visage-note {
    margin: 2px 0 0;
    color: #6d604e;
    font-size: 12px;
}

@media (max-width: 700px) {
    .compositeur-visage.popup { padding: 20px 16px; }
    .compositeur-visage-contenu { grid-template-columns: 1fr; gap: 12px; }
    .compositeur-visage-apercu { grid-column: 1; grid-row: auto; }
    .compositeur-visage-canevas { width: min(70vw, 360px); }
    .compositeur-visage-apercus.compositeur-visage-comparaison-active { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .compositeur-visage-comparaison-active .compositeur-visage-canevas { width: 100%; }
    .compositeur-visage-commandes { grid-template-columns: 1fr; }
    .compositeur-visage-choix-traits,
    .compositeur-visage-reglages-colonne { grid-column: 1; grid-row: auto; }
    .compositeur-visage-grille-bases:not([hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .compositeur-visage-carte { padding: 7px; }
    .compositeur-visage-choix-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); max-height: 36vh; }
}

@media (min-width: 701px) and (max-width: 1100px) {
    .compositeur-visage-contenu { grid-template-columns: minmax(0, 1.1fr) minmax(240px, 0.9fr); }
    .compositeur-visage-reglages-colonne { grid-column: 2; grid-row: auto; }
}

.parchemin strong {font-size:20px;font-family: 'Lato', sans-serif;}
.parchemin {background:url('img/parchemin.png') no-repeat center center, #b9b99d;background-size: cover;padding:16px 24px;font-size:18px;font-family: 'Itim', cursive;border-radius: 8px;}
.popup.parchemin {background:url('img/parchemin.png') no-repeat center center, #b9b99d;background-size: cover;}
.parchemin li {font-size:18px;}
ul.dialogue li {list-style: none;cursor:pointer;}

/* Popups */
div.espacepopup {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0);
    backdrop-filter: blur(0px);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
}

div.popup {
    border: none;
    border-radius: 16px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(20px);
    pointer-events: auto;
    box-shadow: 
        0 25px 80px rgba(0,0,0,0.25), 
        0 10px 40px rgba(0,0,0,0.15),
        0 0 0 1px rgba(255,255,255,0.2);
    padding: 24px;
    min-width: 300px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.9) translateY(-20px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: popupEnter 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Explorateur de créatures et fenêtres de détail */
.explorateur-creatures .stats-creatures {
    margin-bottom: 15px;
    padding: 10px;
    background: #f0f0f0;
    border-radius: 5px;
}

.explorateur-creatures .liste-creatures,
.logactions .liste-logactions {
    max-height: min(400px, 60vh);
    overflow-y: auto;
}

.explorateur-creatures .creature-item {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #fff;
}

.creature-item-entete {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.creature-item-identite { min-width: 0; overflow-wrap: anywhere; }
.creature-item-nom { font-size: 16px; }
.creature-item-meta { color: #666; }
.creature-role { font-weight: bold; }
.creature-role-moi { color: #4caf50; }
.creature-role-rencontre { color: #2196f3; }

.explorateur-creatures .actions-creature {
    display: flex;
    flex: 0 0 auto;
    gap: 5px;
}

.explorateur-creatures .action-fiche,
.explorateur-creatures .action-teleport {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    min-height: 28px;
    padding: 4px 8px;
    border: 0;
    border-radius: 3px;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
}

.explorateur-creatures .action-fiche { background: #2196f3; }
.explorateur-creatures .action-teleport { background: #ff9800; }
.explorateur-creatures .action-fiche:hover { background: #1976d2; }
.explorateur-creatures .action-teleport:hover { background: #f57c00; }

.explorateur-creatures .etat-vide,
.logactions .etat-vide {
    color: #666;
    font-style: italic;
    text-align: center;
    padding: 20px;
}

.relations .etat-vide {
    color: #666;
    font-style: italic;
}

.relations .relation-item {
    margin-bottom: 10px;
    padding: 8px;
    border: 1px solid #ccc;
    background: #f9f9f9;
}

.logactions .action-item {
    margin-bottom: 8px;
    padding: 6px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #f5f5f5;
}

.logactions .date-action { color: #666; }

@media (max-width: 520px) {
    .popup.explorateur-creatures,
    .popup.relations,
    .popup.logactions {
        width: calc(100vw - 24px);
        min-width: 0;
        max-width: none;
        padding: 18px 14px;
        box-sizing: border-box;
    }

    .explorateur-creatures .creature-item-entete { gap: 8px; }
    .explorateur-creatures .creature-item { padding: 8px; }
}

.actionrepos .options-repos {
    padding: 20px;
    text-align: center;
}

.actionrepos .duree-repos {
    display: block;
    width: 100%;
    margin: 10px 0;
    padding: 15px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    background: #4caf50;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.actionrepos .duree-repos:hover,
.actionrepos .duree-repos:focus-visible {
    background: #43a047;
    box-shadow: 0 3px 9px rgba(35, 90, 38, .25);
    transform: translateY(-1px);
    outline: 2px solid rgba(42, 105, 46, .35);
    outline-offset: 2px;
}

.actionrepos .duree-repos:active { transform: translateY(0); }
.actionrepos .duree-repos small { color: inherit; }

@media (max-width: 520px) {
    div.popup.actionrepos {
        width: calc(100vw - 32px);
        min-width: 0;
        padding: 22px 16px;
        box-sizing: border-box;
    }

    .actionrepos .options-repos { padding: 12px 0; }
    .actionrepos .duree-repos { margin: 7px 0; padding: 12px 8px; }
}

@keyframes popupEnter {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

div.video {text-align:right;}

/* Styles pour les liens de changement de vidéo dans le popup */
a.changevideo {
    color: #007bff !important;
    text-decoration: none !important;
    font-weight: 500;
    padding: 4px 8px;
    margin: 2px;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: inline-block;
    border: 1px solid transparent;
}

a.changevideo:hover {
    color: #0056b3 !important;
    background: rgba(0, 123, 255, 0.1);
    border-color: #007bff;
    text-decoration: none !important;
    transform: translateY(-1px);
}

a.changevideo:visited {
    color: #007bff !important;
}

a.changevideo:active {
    color: white !important;
    background: #007bff;
    transform: translateY(0);
}

/* Style pour la vidéo actuellement active dans la liste */
a.changevideo.active {
    color: #28a745 !important;
    background: rgba(40, 167, 69, 0.1);
    border-color: #28a745;
    font-weight: bold;
}

a.changevideo.active:hover {
    color: #1e7e34 !important;
    background: rgba(40, 167, 69, 0.15);
}
div.menusysteme {display:none;}
div.close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.1);
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Arial', sans-serif;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
}

div.close:hover {
    background: rgba(239,68,68,0.2);
    color: #dc2626;
    transform: scale(1.1);
}

div.close[role="button"]:focus-visible {
    outline: 3px solid #315f9b;
    outline-offset: 3px;
}

div.close:active {
    transform: scale(0.95);
}

div.popup.editeurvideo {width:min(1600px, calc(100vw - 32px));height:calc(100vh - 40px);max-height:none;min-width:0;box-sizing:border-box;}
div.editeurvideo {display:flex;flex-direction:row;overflow:hidden;}
div.editeurvideo .liste {overflow:auto;height:100%;background:#f8f9fa;border-radius:6px;padding:8px;}
div.editeurvideo.demo-mode .demo-notice {margin:8px 0;padding:10px 12px;border:1px solid #d9bd76;border-radius:6px;background:#fff8e4;color:#5b461b;font-size:13px;line-height:1.4;}
div.editeurvideo > div {margin:4px;}
div.editeurvideo > div:first-child {flex:0 1 28%;min-width:220px;}
div.editeurvideo > div.vbox {flex:1 1 36%;min-width:300px;}
div.editeurvideo > div.attributs {flex:1 1 36%;min-width:300px;overflow:auto;}
div.editeurvideo .close {margin:4px;align-self: flex-start;}
div.editeurvideo .ajout .formulaire {display:none;}
div.editeurvideo .ajout input[name=url] {width:400px;max-width:100%;font-size:10px;box-sizing:border-box;}
div.editeurvideo .versions-list {margin-left:20px;font-size:.9em;}
div.gestion-versions .nouvelle-url {width:400px;max-width:100%;box-sizing:border-box;}
div.editeurvideo .video iframe {display:block;width:100%;max-width:510px;height:auto;aspect-ratio:510 / 400;}
div.editeurvideo textarea.export,
div.editeurvideo textarea.conditions {width:100%;max-width:500px;box-sizing:border-box;}
div.editeurvideo .video-header {display:flex;flex-wrap:wrap;align-items:center;gap:6px;overflow-wrap:anywhere;}
div.editeurvideo .video-header a:first-of-type {min-width:0;overflow-wrap:anywhere;}

div.popup.gestion-versions,
div.popup.selection-version-cible {
    position:absolute;
    top:50%;
    left:50%;
    width:min(720px, calc(100vw - 32px));
    max-height:calc(100vh - 32px);
    min-width:0;
    margin:0;
    box-sizing:border-box;
    transform:translate(-50%, -50%);
    animation:popupCenteredEnter .22s ease-out forwards;
}

@keyframes popupCenteredEnter {
    from {opacity:0;transform:translate(-50%, -50%) scale(.96);}
    to {opacity:1;transform:translate(-50%, -50%) scale(1);}
}

/* Styles pour les liens vidéos dans l'éditeur */
div.editeurvideo .videosegments {
    margin-bottom: 16px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
}

div.editeurvideo .videosegments > a:first-child {
    display: block;
    padding: 12px 16px;
    background: linear-gradient(135deg, #6f42c1 0%, #5a2d91 100%);
    color: white !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 2px solid #dee2e6;
    transition: all 0.2s ease;
}

div.editeurvideo .videosegments > a:first-child:hover {
    background: linear-gradient(135deg, #5a2d91 0%, #4a1f7a 100%);
    transform: translateY(-1px);
    color: white !important;
    text-decoration: none !important;
}

div.editeurvideo .videosegments table.segments {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

div.editeurvideo .videosegments table.segments tr {
    border-bottom: 1px solid #f1f3f4;
    transition: background-color 0.2s ease;
}

div.editeurvideo .videosegments table.segments tr:hover {
    background: #f8f9fa;
}

div.editeurvideo .videosegments table.segments td {
    padding: 8px 12px;
    font-size: 13px;
    border: none;
}

div.editeurvideo .videosegments table.segments td:first-child {
    padding-left: 16px;
}

div.editeurvideo .videosegments table.segments td:last-child {
    padding-right: 16px;
}

div.editeurvideo .videosegments table.segments a {
    color: #007bff !important;
    text-decoration: none !important;
    font-weight: 500;
    transition: all 0.2s ease;
}

div.editeurvideo .videosegments table.segments a:hover {
    color: #0056b3 !important;
    text-decoration: underline !important;
}

div.editeurvideo .videosegments table.segments a:visited {
    color: #007bff !important;
}

/* Liens d'ajout de segment et autres boutons */
div.editeurvideo .ajoutersegment {
    color: #28a745 !important;
    text-decoration: none !important;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    margin-left: 8px;
}

div.editeurvideo .ajoutersegment:hover {
    background: rgba(40, 167, 69, 0.1);
    color: #1e7e34 !important;
    text-decoration: none !important;
}

div.editeurvideo .dupliquersegment {
    color: #17a2b8 !important;
    text-decoration: none !important;
    font-weight: 500;
    transition: color 0.2s ease;
}

div.editeurvideo .dupliquersegment:hover {
    color: #138496 !important;
    text-decoration: underline !important;
}

/* Liens généraux dans l'éditeur vidéo */
div.editeurvideo a {
    color: #007bff !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

div.editeurvideo a:visited {
    color: #007bff !important;
}

div.editeurvideo a:hover {
    color: #0056b3 !important;
}

/* Style pour la vidéo active - EN GRAS */
div.editeurvideo .playing {
    font-weight: bold !important;
    color: #28a745 !important;
    background: rgba(40, 167, 69, 0.1) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
}

div.editeurvideo textarea.export {width:500px;height:300px;}
div.editeurvideo textarea.conditions {width:500px;height:300px;}
div.editeurvideo div.ajoutertag input.nom {width:140px;}
div.editeurvideo div.ajoutertag input.commentaire {width:340px;}
div.editeurvideo div.attributs input[type=text],
div.editeurvideo div.attributs select {width:200px;padding:4px 6px;border:1px solid gray;border-radius:4px;}
div.editeurvideo div.attributs select {width:214px;}

@media (max-width: 760px) {
    div.popup.editeurvideo {
        display:flex;
        flex-direction:column;
        width:calc(100vw - 24px);
        max-width:none;
        height:calc(100vh - 24px);
        max-height:none;
        min-width:0;
        box-sizing:border-box;
        overflow-y:auto;
        padding:38px 12px 14px;
    }

    div.editeurvideo > div {flex:0 0 auto;min-width:0;}
    div.editeurvideo > div:first-child {flex:0 0 auto;height:auto;min-height:0;}
    div.editeurvideo > div.vbox,
    div.editeurvideo > div.attributs {flex:0 0 auto;min-width:0;}
    div.editeurvideo .liste {height:auto;max-height:28vh;}
    div.editeurvideo .vbox {display:block;}
    div.editeurvideo textarea.export,
    div.editeurvideo textarea.conditions {width:100%;max-width:100%;box-sizing:border-box;}
    div.editeurvideo div.attributs {overflow-x:auto;}
    div.editeurvideo div.attributs input[type=text] {width:min(200px, 100%);box-sizing:border-box;}
    div.editeurvideo div.attributs select {width:min(214px, 100%);box-sizing:border-box;}
    div.editeurvideo div.ajoutertag input.commentaire {width:min(340px, 100%);box-sizing:border-box;}

    div.popup.gestion-versions,
    div.popup.selection-version-cible {
        width:calc(100vw - 24px);
        min-width:0;
        max-width:none;
        box-sizing:border-box;
    }

    .gestion-versions .versions-container {max-height:50vh;overflow-y:auto;}
}

/* Blocs divers */
div.scenarios {padding:20px;}
div.saveload {text-align:center;padding:10px;}

/* Menu des réglages et commandes de partie */
div.menu-systeme.popup {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    box-sizing: border-box;
    padding: 34px clamp(18px, 4vw, 36px);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 18px;
    background: linear-gradient(145deg, #fffdf8, #f3eee3);
    box-shadow: 0 24px 80px rgba(20,25,35,.32);
}
.menu-systeme-entete {margin: 0 0 22px;}
.menu-systeme-entete > span {color: #8a6944;font-size: 11px;font-weight: 800;letter-spacing: .16em;}
.menu-systeme-entete h2 {margin: 7px 0;color: #292820;font: 700 28px/1.15 Georgia, serif;}
.menu-systeme-entete p {margin: 0;color: #737064;}
.menu-systeme-sections {display: grid;gap: 12px;}
.menu-systeme-section {padding: 17px 18px;border: 1px solid #e5dfd2;border-radius: 13px;background: rgba(255,255,255,.72);}
.menu-systeme-section h3 {margin: 0 0 8px;color: #39362e;font: 700 17px Georgia, serif;}
.menu-systeme-section p {margin: 0 0 13px;color: #777366;font-size: 13px;}
.menu-systeme-section button.joli {border-color: #b99b70;background: #896b42;color: white;font-size: 14px;}
.menu-systeme-section button.joli:hover {background: #705433;}
.menu-systeme-actions {display: flex;flex-wrap: wrap;gap: 9px;}
.menu-systeme-section a.editeurvideo {color: #705433;font-weight: 600;text-decoration: none;}
.menu-systeme-section a.editeurvideo:hover {text-decoration: underline;}
.menu-systeme-outils {display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;}
.menu-systeme-outils button {padding:7px 10px;border:1px solid #c7b89e;border-radius:7px;background:#fffaf0;color:#493720;cursor:pointer;}
.reglage-interrupteur {display: flex;align-items: center;gap: 10px;color: #514d43;font-size: 14px;cursor: pointer;}
.reglage-interrupteur input {width: 18px;height: 18px;accent-color: #896b42;}

/* Sélection des scénarios */
div.selection-scenario.popup {
    position: relative;
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 36px clamp(20px, 5vw, 48px);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 20px;
    background: linear-gradient(145deg, #fffdf8, #f3eee3);
    box-shadow: 0 24px 80px rgba(20, 25, 35, .32);
}
div.selection-scenario .selection-scenario-entete {margin: 0 0 24px;}
div.selection-scenario .selection-scenario-sur-titre {color: #8a6944;font-size: 11px;font-weight: 800;letter-spacing: .16em;}
div.selection-scenario .selection-scenario-entete h2 {margin: 7px 0;color: #292820;font: 700 clamp(25px, 4vw, 34px)/1.15 Georgia, serif;}
div.selection-scenario .selection-scenario-entete p {margin: 0;color: #737064;font-size: 14px;}
div.selection-scenario .selection-scenario-cartes {display: grid;gap: 10px;}
button.scenario-carte {display: flex;align-items: center;gap: 16px;width: 100%;padding: 17px 18px;border: 1px solid #e5dfd2;border-radius: 13px;background: rgba(255,255,255,.8);color: #292820;text-align: left;cursor: pointer;transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;}
button.scenario-carte:hover, button.scenario-carte:focus-visible {transform: translateY(-2px);border-color: #b28b59;box-shadow: 0 8px 22px rgba(70,55,30,.12);outline: none;}
.scenario-carte-numero {display: grid;place-items: center;flex: 0 0 38px;height: 38px;border-radius: 11px;background: #f1e8d8;color: #896b42;font-size: 13px;font-weight: 800;}
.scenario-carte-contenu {display: grid;gap: 4px;min-width: 0;}
.scenario-carte-contenu strong {font: 700 17px Georgia, serif;}
.scenario-carte-contenu > span {overflow: hidden;color: #777366;font-size: 13px;text-overflow: ellipsis;white-space: nowrap;}
.scenario-carte-fleche {margin-left: auto;color: #9b805a;font-size: 27px;line-height: 1;}
label.scenario-prefere {display: flex;align-items: flex-start;gap: 10px;margin: 20px 0 4px;color: #514d42;font-size: 13px;line-height: 1.5;cursor: pointer;}
label.scenario-prefere input {margin-top: 3px;accent-color: #896b42;}
@media (max-width: 520px) {
    div.selection-scenario.popup {padding: 30px 18px 22px;border-radius: 16px;}
    button.scenario-carte {gap: 11px;padding: 14px 12px;}
    .scenario-carte-contenu > span {white-space: normal;}
}

/* Vignette personne */
div.vignettepersonne {width:200px;}
div.vignettepersonne div.portrait {height:300px;}
div.vignettepersonne div.portrait img {max-width:200px;max-height:300px;}

div.preload {display:none;}

img.refaire {height:12px;}
img.attendrefinaction {height:12px;}

table.ordres {border-collapse: collapse;margin:8px;}
table.ordres th, table.ordres td {border:1px solid gray;text-align: center;padding:2px 4px;}
table.ordres .suivi-ordre {display:block;margin-top:3px;color:#555;font-size:.85em;line-height:1.25;text-align:left;}
.ordres-info, .ordre-non-pris-en-charge {color:#744;}
.ordres-info {margin:6px 8px;font-size:.9em;}

li.dialoguecustom {cursor:pointer;}

.visionneuse.esclaves .prix button {
    appearance: none;
    border: 0;
    padding: 0;
    background: transparent;
    color: #5b3c1e;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.visionneuse.esclaves .prix button:hover {
    color: #2f1d0c;
}

.visionneuse.esclaves .prix button:focus-visible {
    outline: 2px solid #5b3c1e;
    outline-offset: 2px;
}

div.popup.dossier-inspection-esclave {
    width: min(680px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    box-sizing: border-box;
    overflow-y: auto;
    padding: 28px;
    background: #f5f0e4;
    color: #29251e;
}
div.popup.registre-membres-guilde,
div.popup.confirmation-gestion-membre {
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    box-sizing: border-box;
    overflow-y: auto;
    padding: 28px;
    background: #f5f0e4;
    color: #29251e;
}
div.popup.confirmation-gestion-membre {width: min(520px, calc(100vw - 32px));}
div.popup.registre-membres-guilde h2,
div.popup.registre-membres-guilde h3,
div.popup.confirmation-gestion-membre h2 {margin-top: 0;}
article.registre-membre {margin: 12px 0;padding: 14px;border: 1px solid #c8bdab;border-radius: 5px;background: rgba(255,255,255,.45);}
article.registre-membre h3 {margin: 0 0 8px;}
article.registre-membre p {margin: 5px 0;}
article.registre-membre details {margin-top: 8px;}
div.actions-registre-membre {display: flex;flex-wrap: wrap;gap: 8px;margin-top: 12px;}
div.actions-registre-membre button,
button.confirmer-decision-guilde {padding: 7px 12px;border: 1px solid #715631;border-radius: 4px;background: #715631;color: white;font: inherit;cursor: pointer;}
div.actions-registre-membre button:focus-visible,
button.confirmer-decision-guilde:focus-visible {outline: 2px solid #382814;outline-offset: 2px;}
div.popup.confirmation-gestion-membre label {display: block;margin: 16px 0 5px;font-weight: 700;}
div.popup.confirmation-gestion-membre input[name="motif"] {box-sizing: border-box;width: 100%;padding: 8px;border: 1px solid #8e8068;border-radius: 3px;font: inherit;}
div.popup.confirmation-gestion-membre .motif-erreur {color: #8a2f1d;}
div.popup.confirmation-gestion-membre button.confirmer-decision-guilde {margin-top: 10px;}
article.registre-membre.archive {background: rgba(100,85,63,.08);}
div.dossier-inspection-esclave h2,
div.dossier-inspection-esclave h3 {margin: 0 0 10px;}
div.dossier-identite {display: flex;align-items: center;gap: 16px;margin: 12px 0 20px;}
img.dossier-portrait {width: 96px;max-height: 150px;object-fit: contain;}
div.dossier-identite p,
div.dossier-inspection-esclave section p {margin: 4px 0;}
ul.inspection-caracteristiques {margin: 0;padding-left: 22px;columns: 2;}
div.dossier-inspection-esclave section {margin: 18px 0;}
div.dossier-reserve-membres {padding: 14px;border-left: 4px solid #9a713b;background: rgba(154,113,59,.1);}
div.dossier-reserve-membres .rapport-obsolete {display: inline-block;margin: 3px 0;color: #8a3b24;}
div.dossier-reserve-membres .rapport-etat:not(.rapport-obsolete) {color: #655d50;font-style: italic;}
div.dossier-prix {display: flex;align-items: center;justify-content: space-between;gap: 12px;margin-top: 20px;padding-top: 14px;border-top: 1px solid #c8bdab;}
div.rencontre-details button.ouvrir-dossier-esclave {padding: 5px 9px;border: 1px solid #8c7147;border-radius: 4px;background: #f4ead7;color: #392e1e;cursor: pointer;}
div.rencontre-details button.ouvrir-dossier-esclave:focus-visible {outline: 2px solid #5b3c1e;outline-offset: 2px;}
div.rencontre-details button.ouvrir-carnet-relationnel {margin-left: 5px;padding: 5px 9px;border: 1px solid #71618e;border-radius: 4px;background: #eee9f5;color: #35264b;cursor: pointer;}
div.rencontre-details button.ouvrir-carnet-relationnel:hover {background: #e1d8ef;}
div.rencontre-details button.ouvrir-carnet-relationnel:focus-visible {outline: 2px solid #5b3c1e;outline-offset: 2px;}
div.carnet-relationnel.popup {max-width: 560px;max-height: min(80vh, 720px);overflow-y: auto;padding: 24px;}
div.carnet-relationnel h2 {margin: 0 36px 8px 0;}
div.carnet-relationnel .carnet-introduction {color: #625b6d;margin: 0 0 20px;}
div.carnet-relationnel section {margin: 18px 0;}
div.carnet-relationnel h3 {font-size: 1.05rem;margin: 0 0 8px;}
ul.carnet-relationnel-liste {list-style: none;margin: 0;padding: 0;}
li.carnet-relationnel-entree {display: flex;flex-direction: column;gap: 3px;padding: 9px 11px;margin: 6px 0;border-left: 3px solid #756392;background: #f6f3f9;}
li.carnet-relationnel-entree.carnet-incertain {border-left-color: #bf8732;background: #fbf6eb;}
span.carnet-relationnel-fait {color: #292431;}
span.carnet-relationnel-provenance {font-size: .88em;color: #625b6d;}
span.carnet-dernier-indice {font-size: .9em;color: #484052;}
li.carnet-evolutions details {margin: -2px 0 12px;padding: 0 0 0 14px;border-left: 2px solid #c5b8d8;color: #484052;}
li.carnet-evolutions summary {padding: 4px 0;cursor: pointer;font-size: .9em;font-weight: 600;}
li.carnet-evolutions summary:focus-visible {outline: 2px solid #5b3c1e;outline-offset: 2px;}
li.carnet-evolutions .carnet-chronologie-aide {margin: 2px 0 6px;font-size: .82em;color: #625b6d;}
li.carnet-evolutions ol {list-style: none;margin: 4px 0 0;padding: 0;}
li.carnet-evolutions ol li {display: flex;flex-direction: column;gap: 3px;padding: 7px 9px;margin: 5px 0;background: #f8f6fa;}
li.carnet-evolutions ol small {color: #625b6d;}
span.carnet-etiquette-incertaine {font-weight: 600;color: #825612;}
li.carnet-evolutions {list-style: none;margin: -2px 0 12px;padding: 0 0 0 14px;border-left: 2px solid #c5b8d8;color: #484052;}
@media (max-width: 520px) {
    div.popup.dossier-inspection-esclave {padding: 24px 18px;}
    ul.inspection-caracteristiques {columns: 1;}
    div.dossier-prix {align-items: flex-start;flex-direction: column;}
}

/* BOUTONS */
div.bouche {display:inline-block;margin:0 4px;width:20px;height:20px;background:url('img/icons/bouche.png') no-repeat;background-size:contain;}
div.action {cursor:pointer}

button.joli {padding:6px 12px;font-size:16px;border:1px solid gray;border-radius:4px;}

/* Popup scénario */
div.popup.scenario {width:min(800px, calc(100vw - 32px));min-width:0;max-height:calc(100vh - 32px);box-sizing:border-box;overflow-y:auto;background:url('img/parchemin.png') no-repeat center center, #b9b99d;background-size: cover;border-radius:12px;padding:40px;}
div.popup.scenario div.boutons {margin-top:40px;}
div.popup.scenario img {float:left;max-width:250px;margin:12px;}
@media (max-width: 520px) {
    div.popup.scenario {padding:24px 18px;}
    div.popup.scenario div.boutons {margin-top:24px;}
    div.popup.scenario img {float:none;display:block;max-width:min(100%, 250px);margin:12px auto;}
}

/* Boutons de sélection de lieu */
.lieu-selection {
    margin: 10px 0;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    border: 1px solid #dee2e6;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.lieu-selection strong {
    display: block;
    margin-bottom: 16px;
    color: #212529;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.lieu-boutons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lieu-bouton {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.lieu-bouton:hover {
    background: linear-gradient(135deg, #0056b3 0%, #003d82 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.lieu-bouton:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.lieu-bouton.selected {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
    box-shadow: 0 0 0 3px rgba(40,167,69,0.3);
}

/* Boutons de lieu avec image */
.lieu-bouton-image {
    padding: 8px;
    width: 160px;
    min-width: 0;
    min-height: 176px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    border: 2px solid #495057;
}

.lieu-bouton-image img {
    width: 128px;
    max-width: 100%;
    height: 112px;
    object-fit: contain;
    filter: brightness(1.1) contrast(1.1);
}

.lieu-bouton-nom {
    width: 100%;
    color: white;
    line-height: 1.25;
    text-align: center;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.lieu-bouton-image:hover {
    background: linear-gradient(135deg, #495057 0%, #343a40 100%);
    border-color: #343a40;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

.lieu-bouton-image:hover img {
    filter: brightness(1.2) contrast(1.2);
}

.lieu-bouton-image.selected {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
    border-color: #1e7e34;
    box-shadow: 0 0 0 3px rgba(40,167,69,0.3);
}

.lieu-bouton-image.selected img {
    filter: brightness(1.3) contrast(1.2);
}

/* Popups d'actions */
.actionarguments {
    min-width: 400px;
}

.actionarguments.position-dialog {
    width: min(720px, calc(100vw - 28px));
    min-width: 0;
    box-sizing: border-box;
    padding: 30px;
    border: 1px solid rgba(46, 93, 129, 0.18);
    border-radius: 22px;
    color: #21364a;
    background: radial-gradient(circle at 50% 0, #f2f8ff 0, #fff 56%);
}

.position-dialog .header {
    position: relative;
    margin: 0 0 22px;
    padding: 4px 38px 17px;
    border-bottom: 1px solid #e4ebf2;
    text-align: center;
}

.position-dialog h4 {
    margin: 0;
    color: #24577c;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.position-dialog .position-dialog-subtitle {
    margin: 7px 0 0;
    color: #718195;
    font-size: 14px;
}

.position-selection-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.position-option {
    display: flex;
    min-height: 116px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 8px;
    border: 1px solid #e1e8ef;
    border-radius: 15px;
    color: #34485c;
    background: linear-gradient(145deg, #fff, #f7faff);
    box-shadow: 0 3px 10px rgba(39, 72, 103, 0.06);
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.position-option:hover,
.position-option:focus-visible {
    transform: translateY(-2px);
    border-color: #6ba8d4;
    background: #f1f8ff;
    box-shadow: 0 8px 18px rgba(44, 111, 163, 0.14);
    outline: none;
}

.position-option:active {
    transform: scale(0.98);
}

.position-option-icon {
    width: 54px;
    height: 54px;
}

.position-option-label {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
}

@media (max-width: 560px) {
    .actionarguments.position-dialog {
        padding: 24px 16px 18px;
        border-radius: 18px;
    }

    .position-selection-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .position-option {
        min-height: 104px;
    }
}

/* Sélection visuelle d'habits */
.habit-selection-visual {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    justify-content: center;
}

.habit-picto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.habit-picto:hover {
    border-color: #007bff;
    background: linear-gradient(135deg, #e7f1ff 0%, #cce7ff 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,123,255,0.15);
}

.habit-picto.selected {
    border-color: #007bff;
    background: linear-gradient(135deg, #cce7ff 0%, #99d6ff 100%);
    box-shadow: 0 4px 12px rgba(0,123,255,0.3);
    border-width: 3px;
}

.habit-picto.selected img {
    transform: scale(1.1);
}

.habit-picto img {
    width: 32px;
    height: 32px;
    transition: all 0.2s ease;
}

.actionarguments h4 {
    margin: 0 0 16px 0;
    font-size: 18px;
    color: #212529;
    text-align: center;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 8px;
}

.actionarguments .personne-argument-empty {
    margin: 6px 0;
    color: #526970;
    font-size: 13px;
    line-height: 1.4;
}

.actionarguments .personne-argument-empty[hidden] {
    display: none;
}

.actionarguments .validation {
    margin-top: 20px;
    text-align: center;
}

.actionarguments .validation button {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.actionarguments .validation button:hover {
    background: linear-gradient(135deg, #0056b3 0%, #003d82 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.actionarguments .validation button:active {
    transform: translateY(0);
}

/* Barres de vie et énergie */
.stat-bars-row {
    display: flex;
    gap: 8px;
    margin: 8px 0;
}

.moi-mana {
    margin: 8px 0;
    padding: 6px 10px;
    border: 1px solid #b9a6d1;
    border-radius: 6px;
    color: #432b63;
    background: #f4effa;
    font-weight: 600;
    text-align: center;
}

.action-cout-mana {
    margin: 8px 0;
    color: #432b63;
    font-weight: 600;
}

.action-cout-mana.insuffisant {
    color: #a12622;
}

.stat-bar-container {
    flex: 1;
}

.stat-bar {
    width: 100%;
    height: 24px;
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 
        inset 0 2px 4px rgba(0,0,0,0.1),
        0 1px 2px rgba(0,0,0,0.05);
    border: 1px solid #ced4da;
}

.stat-bar-fill {
    height: 100%;
    border-radius: 12px;
    transition: width 0.3s ease;
    position: relative;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.3);
}

.stat-bar-pv .stat-bar-fill {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 50%, #bd2130 100%);
}

.stat-bar-energie .stat-bar-fill {
    background: linear-gradient(135deg, #28a745 0%, #218838 50%, #1e7e34 100%);
}

.stat-bar-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: bold;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
    white-space: nowrap;
}

/* Effet de brillance pour les barres */
.stat-bar-fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 100%);
    border-radius: 10px 10px 0 0;
}

/* Responsive pour petits écrans */
@media (max-width: 1200px) {
    div.zone-principale {
        width: 60vw;
        height: 60vw;
        min-width: 500px;
        min-height: 500px;
    }
    
    div.sidebar {
        min-width: 250px;
    }
}

@media (max-width: 900px) {
    div.main {
        height: auto;
        min-height: 100vh;
        justify-content: flex-start;
    }

    div.main-content {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 8px;
        height: auto;
        min-height: 100vh;
    }
    
    div.zone-principale {
        width: calc(100vw - 16px);
        height: 60vh;
        min-width: 0;
        min-height: 400px;
        flex: 0 0 auto;
    }
    
    div.sidebar {
        flex-direction: column;
        max-width: none;
        min-width: auto;
        width: 100%;
        height: auto;
    }
    
    div.moi, div.rencontre, div.lieu-panel, div.log {
        box-sizing: border-box;
        flex: 0 1 auto;
        width: 100%;
        min-width: 0;
    }

    div.moi, div.log {
        max-height: 200px;
    }
    
    div.actions-overlay {
        position: absolute;
        bottom: 8px;
        left: 8px;
        right: 8px;
        transform: none;
    }
    
    div.actions-overlay div.boutons {
        justify-content: center;
    }
}

/* Interface de jeu mobile : scène et navigation restent dans le viewport. */
@media (max-width: 900px) {
    html, body { height: 100%; height: 100dvh; overflow: hidden; }
    body.interface-mobile div.main,
    body.interface-mobile div.main-content {
        display: flex;
        width: 100%;
        height: var(--hauteur-visible, 100dvh);
        min-height: 0;
        padding: 0;
        margin: 0;
        gap: 0;
        overflow: hidden;
    }
    body.interface-mobile div.main-content { flex-direction: column; }
    body.interface-mobile div.zone-principale {
        flex: 0 0 60%;
        width: 100%;
        height: 60%;
        min-width: 0;
        min-height: 0;
        box-sizing: border-box;
        border-radius: 0;
    }
    body.interface-mobile div.sidebar {
        display: flex;
        flex: 1 1 40%;
        flex-direction: column;
        width: 100%;
        min-width: 0;
        max-width: none;
        height: 40%;
        min-height: 0;
        gap: 0;
        overflow: hidden;
        border-top: 1px solid #c8b99f;
        background: #f8f5ee;
    }
    body.interface-mobile > .main > .reglages { display: none; }
    body.interface-mobile .navigation-mobile {
        display: flex;
        flex: 0 0 auto;
        min-height: 48px;
        padding: 4px max(6px, env(safe-area-inset-left)) 4px max(6px, env(safe-area-inset-right));
        gap: 3px;
        overflow-x: auto;
        background: #302a22;
        scrollbar-width: none;
    }
    body.interface-mobile .navigation-mobile::-webkit-scrollbar { display: none; }
    body.interface-mobile .navigation-mobile [role="tab"] {
        flex: 1 0 auto;
        min-width: 58px;
        min-height: 40px;
        padding: 6px 9px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #eee6d7;
        font-size: 12px;
        font-weight: 600;
        touch-action: manipulation;
    }
    body.interface-mobile .navigation-mobile [aria-selected="true"] {
        background: #f3e7cf;
        color: #392c1e;
    }
    body.interface-mobile .navigation-mobile [role="tab"]:focus-visible { outline: 2px solid #e5bd73; outline-offset: -2px; }
    body.interface-mobile .panneau-mobile {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }
    body.interface-mobile .panneau-mobile[hidden] { display: none; }
    body.interface-mobile .contenu-panneau-mobile {
        width: 100%;
        height: 100%;
        min-height: 0;
        overflow: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 8px;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
        box-sizing: border-box;
    }
    body.interface-mobile .contenu-panneau-mobile > .moi,
    body.interface-mobile .contenu-panneau-mobile > .rencontre,
    body.interface-mobile .contenu-panneau-mobile > .lieu-panel,
    body.interface-mobile .contenu-panneau-mobile > .log {
        display: block;
        width: 100%;
        max-width: none;
        max-height: none;
        height: auto;
        min-height: 0;
        margin: 0;
        overflow: visible;
        box-sizing: border-box;
        flex: initial;
    }
    body.interface-mobile .contenu-panneau-mobile > .actions-overlay {
        position: relative;
        inset: auto;
        transform: none;
        padding: 0;
    }
    body.interface-mobile .actions-overlay div.boutons {
        flex-wrap: wrap;
        width: auto;
        justify-content: center;
        border-radius: 14px;
        padding: 8px;
    }
    body.interface-mobile .contenu-panneau-mobile > .dialogue-rencontre-stack {
        position: static;
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-height: 100%;
        justify-content: flex-end;
        pointer-events: auto;
    }
    body.interface-mobile .dialogue-rencontre-stack > .dialogue,
    body.interface-mobile .dialogue-rencontre-stack > .choix-dialogue {
        position: relative;
        inset: auto;
        width: 100%;
        max-height: 22vh;
        min-height: 0;
        box-sizing: border-box;
        transform: none;
        pointer-events: auto;
    }
    body.interface-mobile .dialogue-rencontre-stack > .dialogue { height: auto; flex: 0 1 auto; }
    body.interface-mobile .dialogue-rencontre-stack > .choix-dialogue { flex: 0 1 auto; }
    body.interface-mobile .dialogue-rencontre-stack input,
    body.interface-mobile .dialogue-rencontre-stack textarea,
    body.interface-mobile .contenu-panneau-mobile input,
    body.interface-mobile .contenu-panneau-mobile textarea,
    body.interface-mobile .contenu-panneau-mobile select { scroll-margin: 12px; }
    body.interface-mobile .interface-header { top: max(6px, env(safe-area-inset-top)); right: max(6px, env(safe-area-inset-right)); }
    body.interface-mobile .aide-btn { width: 38px; height: 38px; }
    body.interface-mobile .menu-systeme.popup { max-height: calc(var(--hauteur-visible, 100dvh) - 24px); overflow-y: auto; }
}

@media (max-width: 900px) and (orientation: landscape) {
    body.interface-mobile div.zone-principale { flex-basis: 52%; height: 52%; }
    body.interface-mobile div.sidebar { height: 48%; }
}

.navigation-mobile { display: none; }

/* Styles pour l'explorateur de portraits */
.explorateur-portraits {
    width: 90%;
    max-width: 1200px;
    height: 90%;
    max-height: 800px;
    overflow-y: auto;
    padding: 20px;
}

.explorateur-portraits h2 {
    color: #8B4513;
    margin-bottom: 20px;
    font-size: 24px;
    text-align: center;
}

.filtres {
    margin-bottom: 20px;
    padding: 15px;
    background: #f9f9f9;
    border: 2px solid #d4af37;
    border-radius: 8px;
}

.filtres-colonnes {
    display: flex;
    gap: 30px;
}

.filtres-gauche {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filtres-droite {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: flex-start;
}

.filtres label {
    display: block;
    font-weight: 500;
    color: #5d4037;
}

.filtres-gauche label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
}

.filtres-droite label {
    padding: 8px;
}

.filtres input[type="range"] {
    width: 80px;
    margin: 5px 2px;
}

.filtres span {
    font-size: 0.9em;
    color: #8B4513;
    font-weight: bold;
    min-width: 60px;
    text-align: center;
}

.filtres select {
    padding: 4px 8px;
    border: 1px solid #8B4513;
    border-radius: 4px;
}

.filtres input[type="checkbox"] {
    transform: scale(1.2);
}

/* Section de tri */
.tri-section {
    margin: 15px 0;
    padding: 10px 15px;
    background: #f0f0f0;
    border-radius: 5px;
    border-left: 3px solid #8B4513;
}

.tri-section label {
    font-weight: 500;
    color: #5d4037;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tri-section select {
    padding: 5px 10px;
    border: 1px solid #8B4513;
    border-radius: 4px;
    background: white;
    color: #5d4037;
    font-size: 14px;
}

.portraits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.portrait-carte {
    border: 2px solid #d4af37;
    border-radius: 8px;
    padding: 15px;
    background: #fefefe;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.portrait-carte:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.portrait-image {
    text-align: center;
    margin-bottom: 15px;
}

.portrait-image img {
    max-width: 100%;
    max-height: 200px;
    border-radius: 4px;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.portrait-image img:hover {
    transform: scale(1.05);
}

.portrait-infos h4 {
    color: #8B4513;
    margin-bottom: 10px;
    font-size: 18px;
}

.portrait-id {
    color: #666;
    font-size: 12px;
    font-style: italic;
    margin-bottom: 8px;
}

.portrait-id-popup {
    color: #666;
    font-size: 14px;
    font-style: italic;
    text-align: center;
    margin-top: -10px;
    margin-bottom: 15px;
}

.portrait-infos p {
    margin: 5px 0;
    font-size: 14px;
    color: #5d4037;
}

.portrait-actions {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.voir-images, .tester-portrait {
    background: #d4af37;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 10px;
    margin-top: 5px;
    font-size: 12px;
    transition: background 0.2s ease;
}

.voir-images:hover, .tester-portrait:hover {
    background: #b8941f;
}

.aucun-resultat {
    grid-column: 1 / -1;
    text-align: center;
    color: #666;
    font-style: italic;
    padding: 40px;
}

/* Popup des images */
.images-portrait {
    width: 90%;
    max-width: 1000px;
    height: 80%;
    overflow-y: auto;
}

.images-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.image-item {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    background: #fafafa;
    text-align: center;
}

.image-item img {
    max-width: 100%;
    max-height: 150px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.image-cliquable {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.image-cliquable:hover {
    transform: scale(1.05);
}

.image-item p {
    margin: 5px 0;
    font-size: 12px;
    color: #666;
}

/* Responsive pour l'explorateur */
@media (max-width: 768px) {
    .filtres {
        flex-direction: column;
        gap: 10px;
    }
    
    .portraits-grid {
        grid-template-columns: 1fr;
    }
    
    .images-gallery {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

/* Popup pour l'affichage en grand format */
.image-grand-format {
    width: 95%;
    height: 95%;
    max-width: none;
    max-height: none;
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: rgba(0, 0, 0, 0.9);
}

.image-grand-format .close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1001;
    background: rgba(0, 0, 0, 0.7);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.image-grand-format .close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.image-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.image-plein-ecran {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Styles génériques pour tous les boutons de l'explorateur de portraits */
.explorateur-portraits button, 
.formulaire-ajout-image button,
.formulaire-nouveau-portrait button {
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-family: 'Exo 2', 'Segoe UI', sans-serif;
}

.explorateur-portraits button:hover,
.formulaire-ajout-image button:hover,
.formulaire-nouveau-portrait button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.explorateur-portraits button:active,
.formulaire-ajout-image button:active,
.formulaire-nouveau-portrait button:active {
    transform: translateY(0);
}

.explorateur-portraits button:disabled,
.formulaire-ajout-image button:disabled,
.formulaire-nouveau-portrait button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Bouton principal "Créer un nouveau portrait" */
.actions-principaux .nouveau-portrait {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    width: auto;
    display: inline-block;
}

.actions-principaux .nouveau-portrait:hover {
    background: linear-gradient(135deg, #0056b3 0%, #003d82 100%);
}

/* Styles pour l'ajout d'images aux portraits */
.ajouter-image {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
    color: white;
    padding: 8px 16px;
    margin: 8px 0;
    font-size: 13px;
    display: block;
    width: 100%;
}

.ajouter-image:hover {
    background: linear-gradient(135deg, #1e7e34 0%, #155724 100%);
}

.actions-portrait {
    padding: 15px 0;
    border-top: 1px solid #ddd;
    margin-top: 15px;
}

.ajouter-image-ici {
    background: #28a745;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    width: 100%;
}

.ajouter-image-ici:hover {
    background: #218838;
}

/* Boutons de suppression - style discret */
.supprimer-portrait,
.supprimer-image {
    background: transparent;
    color: #666;
    padding: 6px 12px;
    margin: 8px 0;
    font-size: 11px;
    border: 1px solid #ddd;
    cursor: pointer;
    font-weight: 400;
    transition: all 0.2s ease;
    font-family: 'Exo 2', 'Segoe UI', sans-serif;
    border-radius: 4px;
    display: block;
    width: 100%;
    opacity: 0.7;
}

.supprimer-portrait:hover,
.supprimer-image:hover {
    background: #f8f9fa;
    color: #dc3545;
    border-color: #dc3545;
    opacity: 1;
}

.supprimer-portrait:active,
.supprimer-image:active {
    background: #dc3545;
    color: white;
}

/* Bouton supprimer image dans la galerie (plus petit) */
.image-item .supprimer-image {
    width: auto;
    padding: 6px 12px;
    margin: 5px 0;
    font-size: 12px;
    display: inline-block;
}

/* Formulaire d'ajout d'image */
.formulaire-ajout-image {
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}

.formulaire-ajout-image h3 {
    color: #333;
    margin-bottom: 15px;
    border-bottom: 2px solid #007cba;
    padding-bottom: 10px;
}

.formulaire-ajout-image .form-group {
    margin-bottom: 15px;
}

.formulaire-ajout-image label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

.formulaire-ajout-image input[type="url"],
.formulaire-ajout-image select {
    width: 100%;
    padding: 8px 12px;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

.formulaire-ajout-image input[type="url"]:focus,
.formulaire-ajout-image select:focus {
    border-color: #007cba;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 124, 186, 0.3);
}

.formulaire-ajout-image .form-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.formulaire-ajout-image button[type="submit"] {
    flex: 1;
    background: #007cba;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
}

.formulaire-ajout-image button[type="submit"]:hover:not(:disabled) {
    background: #005a87;
}

.formulaire-ajout-image button[type="submit"]:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.formulaire-ajout-image .annuler {
    flex: 0 0 auto;
    background: #6c757d;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

.formulaire-ajout-image .annuler:hover {
    background: #545b62;
}

#resultat-ajout-image {
    margin-top: 15px;
}

#resultat-ajout-image .loading {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
}

#resultat-ajout-image .succes {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
    padding: 15px;
    border-radius: 4px;
}

#resultat-ajout-image .succes h4 {
    margin: 0 0 10px 0;
    color: #155724;
}

#resultat-ajout-image .erreur {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 15px;
    border-radius: 4px;
}

#resultat-ajout-image .erreur h4 {
    margin: 0 0 10px 0;
    color: #721c24;
}

/* Formulaire de création de nouveau portrait */
.formulaire-nouveau-portrait {
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
}

.formulaire-nouveau-portrait h3 {
    color: #333;
    margin-bottom: 20px;
    border-bottom: 2px solid #007bff;
    padding-bottom: 12px;
    text-align: center;
    font-size: 20px;
}

.formulaire-nouveau-portrait .form-section {
    margin-bottom: 25px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #007bff;
}

.formulaire-nouveau-portrait .form-section h4 {
    color: #007bff;
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.formulaire-nouveau-portrait .form-group {
    margin-bottom: 15px;
}

.formulaire-nouveau-portrait label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #495057;
}

.formulaire-nouveau-portrait input[type="text"],
.formulaire-nouveau-portrait input[type="url"],
.formulaire-nouveau-portrait input[type="range"],
.formulaire-nouveau-portrait select {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.formulaire-nouveau-portrait input[type="text"]:focus,
.formulaire-nouveau-portrait input[type="url"]:focus,
.formulaire-nouveau-portrait select:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 6px rgba(0, 123, 255, 0.25);
}

.formulaire-nouveau-portrait input[type="range"] {
    padding: 0;
    height: 6px;
    background: #dee2e6;
    border-radius: 3px;
    -webkit-appearance: none;
}

.formulaire-nouveau-portrait input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: #007bff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.formulaire-nouveau-portrait input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #007bff;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.formulaire-nouveau-portrait .form-actions {
    display: flex;
    gap: 15px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid #e9ecef;
}

.formulaire-nouveau-portrait button[type="submit"] {
    flex: 1;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 600;
}

.formulaire-nouveau-portrait button[type="submit"]:hover:not(:disabled) {
    background: linear-gradient(135deg, #0056b3 0%, #003d82 100%);
}

.formulaire-nouveau-portrait .annuler {
    flex: 0 0 auto;
    background: linear-gradient(135deg, #6c757d 0%, #545b62 100%);
    color: white;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 500;
}

.formulaire-nouveau-portrait .annuler:hover {
    background: linear-gradient(135deg, #545b62 0%, #3d4046 100%);
}

#resultat-nouveau-portrait {
    margin-top: 20px;
}

#resultat-nouveau-portrait .loading {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border: 1px solid #ffeaa7;
    color: #856404;
    padding: 15px;
    border-radius: 6px;
    text-align: center;
    font-weight: 500;
}

#resultat-nouveau-portrait .succes {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border: 1px solid #c3e6cb;
    color: #155724;
    padding: 20px;
    border-radius: 6px;
}

#resultat-nouveau-portrait .succes h4 {
    margin: 0 0 15px 0;
    color: #155724;
    font-size: 18px;
}

#resultat-nouveau-portrait .erreur {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 20px;
    border-radius: 6px;
}

#resultat-nouveau-portrait .erreur h4 {
    margin: 0 0 15px 0;
    color: #721c24;
    font-size: 18px;
}

/* Système de notifications dans le coin haut droit */
#notifications-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    max-width: 400px;
    pointer-events: none;
}

.notification {
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-family: 'Exo 2', sans-serif;
    font-size: 14px;
    line-height: 1.4;
    transform: translateX(100%);
    animation: slideInNotification 0.3s ease-out forwards;
    pointer-events: auto;
    position: relative;
    border-left: 4px solid #007bff;
    max-width: 100%;
    word-wrap: break-word;
}

.notification.succes {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border-color: #c3e6cb;
    border-left-color: #28a745;
    color: #155724;
}

.notification.erreur {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    border-color: #f5c6cb;
    border-left-color: #dc3545;
    color: #721c24;
}

.notification.loading {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border-color: #ffeaa7;
    border-left-color: #ffc107;
    color: #856404;
}

.notification h4 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
}

.notification p {
    margin: 4px 0;
    font-size: 13px;
}

.notification .close-notification {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification .close-notification:hover {
    opacity: 1;
}

@keyframes slideInNotification {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutNotification {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Carte schématique des lieux du monde */
.popup.carte-monde {
    box-sizing: border-box;
    width: min(920px, calc(100vw - 32px));
    min-width: 0;
    max-height: calc(100vh - 32px);
    padding: 28px;
}

.carte-monde h2 {
    margin: 0 44px 8px 0;
    color: #49351f;
}

.carte-monde-fermer {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    color: #514638;
    font-size: 20px;
    cursor: pointer;
}

.carte-monde-intro,
.carte-monde-actuel,
.carte-monde-indisponible {
    margin: 8px 0;
    color: #514638;
}

.carte-monde-indisponible { color: #8b3c24; font-weight: 700; }

.carte-monde-fuites {
    margin: 14px 0;
    padding: 10px 12px;
    border-left: 4px solid #a76832;
    border-radius: 4px;
    background: #f5eddf;
}

.carte-monde-fuites h3 { margin: 0 0 6px; color: #49351f; font-size: 1em; }
.carte-monde-fuites-liste { display: grid; gap: 4px; max-height: min(22vh, 200px); padding-right: 4px; overflow: auto; }
.carte-monde-fuite {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 8px 0;
    border-top: 1px solid rgba(73, 53, 31, 0.16);
    color: #514638;
    font-size: 0.92em;
}
.carte-monde-fuite strong { color: #49351f; }
.carte-monde-fuite-navigation { color: #514638; }
.carte-monde-fuite-rejoindre {
    justify-self: start;
    border: 1px solid #725b39;
    border-radius: 4px;
    padding: 5px 10px;
    background: #fffaf0;
    color: #49351f;
    cursor: pointer;
}
.carte-monde-fuite-rejoindre:hover:not(:disabled) { background: #eee0c7; }
.carte-monde-fuite-rejoindre:focus-visible { outline: 3px solid #315d9b; outline-offset: 2px; }
.carte-monde-fuite-rejoindre:disabled { cursor: default; opacity: 0.65; }

.carte-monde-lieux {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 12px;
    max-height: min(58vh, 560px);
    margin: 18px 0;
    padding: 2px 4px 8px 2px;
    overflow: auto;
}

.carte-monde-lieu {
    display: flex;
    min-width: 0;
    min-height: 150px;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    padding: 8px;
    border: 2px solid #9a835c;
    border-radius: 10px;
    background: rgba(255, 250, 235, 0.92);
    color: #392f22;
    text-align: left;
    cursor: pointer;
    transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.carte-monde-lieu:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: #5d713b;
    box-shadow: 0 4px 12px rgba(49, 42, 28, 0.2);
}

.carte-monde-lieu:focus-visible,
.carte-monde-commandes button:focus-visible {
    outline: 3px solid #315d9b;
    outline-offset: 2px;
}

.carte-monde-lieu:disabled { cursor: default; opacity: 0.72; }
.carte-monde-lieu.est-actuel { border-color: #497c49; background: #edf4df; }

.carte-monde-lieu img {
    width: 100%;
    height: 76px;
    border-radius: 6px;
    object-fit: cover;
    background: rgba(80, 65, 43, 0.12);
}

.carte-monde-lieu strong { overflow-wrap: anywhere; }
.carte-monde-lieu > span { color: #665b49; font-size: 0.88em; }
.carte-monde-lieu .carte-monde-acces-niveau { color: #654b2b; font-weight: 700; }
.reprendre-trajet-interlieu { margin: 8px 0; padding: 7px 10px; border: 1px solid #725b39; border-radius: 5px; background: #fffaf0; color: #49351f; cursor: pointer; }
.reprendre-trajet-interlieu[hidden] { display: none; }
.etat-trajet-interlieu { margin: 8px 0; padding: 8px 10px; border-left: 3px solid #6c8050; background: #f4f6ee; color: #343b2c; font-size: 0.92em; }
.etat-trajet-interlieu p { margin: 4px 0 0; }
.etat-trajet-interlieu[data-statut="acces_indisponible"], .etat-trajet-interlieu[data-statut="sans_route"] { border-color: #a44a3f; background: #fbefed; }
.etat-trajet-interlieu[data-statut="interrompu_temporaire"] { border-color: #aa8740; background: #fbf6e9; }
.etat-trajet-interlieu[hidden] { display: none; }
.carte-monde-lieu .carte-monde-itineraire { margin-top: auto; overflow-wrap: anywhere; }
.carte-monde-lieu:disabled .carte-monde-itineraire { color: #765545; }
.carte-monde-lieu .carte-monde-marqueur { color: #356038; font-weight: 700; }
.carte-monde-lieu .carte-monde-fugitifs-lieu { color: #8b3c24; font-weight: 700; }

.popup.acces-lieu-popup {
    position: relative;
    width: min(440px, calc(100vw - 32px));
    padding: 28px 26px 24px;
    border: 1px solid #9a835c;
    border-radius: 12px;
    background: linear-gradient(145deg, #fffaf0, #f0e5d0);
    color: #392f22;
    box-shadow: 0 18px 48px rgb(27 20 12 / 38%);
}
.acces-lieu-popup .acces-lieu-fermer { position: absolute; top: 8px; right: 10px; }
.acces-lieu-popup .acces-lieu-sur-titre { color: #806544; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.acces-lieu-popup h2 { margin: 8px 26px 10px 0; font: 700 24px/1.2 Georgia, serif; }
.acces-lieu-popup p { margin: 0; line-height: 1.55; }
.acces-lieu-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.acces-lieu-actions button {
    padding: 10px 14px;
    border: 1px solid #59442c;
    border-radius: 7px;
    background: #60492e;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.acces-lieu-actions button:hover { background: #493720; }
.acces-lieu-actions button:disabled { opacity: .72; cursor: not-allowed; }
.acces-lieu-actions button[aria-busy="true"] { cursor: wait; }
.acces-lieu-actions button:focus-visible,
.acces-lieu-fermer:focus-visible { outline: 3px solid #315d9b; outline-offset: 3px; }
.acces-lieu-popup .acces-lieu-action-indisponible { margin-top: 12px; color: #70402b; font-weight: 700; }

.carte-monde-commandes { display: flex; justify-content: flex-end; }
.carte-monde-commandes button {
    padding: 10px 16px;
    border: 1px solid #59442c;
    border-radius: 7px;
    background: #60492e;
    color: #fff;
    font: inherit;
    cursor: pointer;
}

@media (max-width: 600px) {
    .gestion-construction { padding: 8px; }
    .outils-construction { gap: 5px; }
    .outils-construction .bouton-action,
    .gestion-construction > .bouton-action {
        min-height: 40px;
        max-width: 100%;
        white-space: normal;
    }

    .gestion-construction.mode-construction {
        position: fixed;
        z-index: 50;
        left: 8px;
        right: 8px;
        bottom: 8px;
        max-height: 38vh;
        overflow-y: auto;
        box-sizing: border-box;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
        overscroll-behavior: contain;
    }

    .popup.carte-monde { width: calc(100vw - 20px); max-height: calc(100vh - 20px); padding: 22px 14px 16px; }
    .carte-monde-lieux { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 56vh; }
    .carte-monde-lieu { min-height: 132px; padding: 7px; }
    .carte-monde-lieu img { height: 62px; }
    .popup.acces-lieu-popup { width: calc(100vw - 24px); padding: 25px 18px 20px; }
}