/**
 * THÈME — habillage visuel de l'atelier.
 *
 * Ce fichier ne remplace rien : il est chargé en dernier (index.php inclut les
 * CSS par ordre alphabétique) et se contente de surcharger l'apparence.
 * Le supprimer suffit à retrouver exactement l'aspect précédent.
 *
 * Parti pris : reprendre la palette des cartes du jeu — parchemin, encre brune
 * et or — plutôt que le bleu par défaut de Bootstrap, pour que l'interface
 * prolonge le bandeau au lieu de s'y opposer.
 */

:root {
    /* Couleurs reprises du gabarit des cartes : le texte d'une carte est
       rgb(50,40,32) sur un fond rgb(233,219,199). */
    --odv-encre: #2f261e;
    --odv-encre-douce: #6b5f51;
    --odv-parchemin: #f4f0e7;
    --odv-panneau: #fffdf9;
    --odv-bordure: #ddd4c4;
    --odv-bordure-forte: #c4b8a2;
    --odv-or: #a67c3d;
    --odv-or-clair: #c39a54;
    --odv-or-voile: rgba(166, 124, 61, .16);

    --odv-rayon: 3px;
    --odv-ombre: 0 1px 2px rgba(47, 38, 30, .06), 0 4px 16px rgba(47, 38, 30, .06);
    --odv-ombre-forte: 0 2px 4px rgba(47, 38, 30, .08), 0 12px 32px rgba(47, 38, 30, .12);
    --odv-transition: 140ms ease;
}

/* ---------------------------------------------------------------
   Fond et rythme général
   Le blanc pur coupait net sous le bandeau noir et doré. Un fond
   parchemin très clair fait respirer les panneaux, qui deviennent
   les seules surfaces réellement blanches.
   --------------------------------------------------------------- */

body {
    background-color: var(--odv-parchemin) !important;
    color: var(--odv-encre) !important;
    -webkit-font-smoothing: antialiased;
}

#main {
    padding: 2.5em 3em 4em !important;
    max-width: 1600px;
    margin: 0 auto;
}

/* ---------------------------------------------------------------
   Bandeau
   --------------------------------------------------------------- */

/*
 * La barre est une grille de trois colonnes : le bouton à gauche, le logo au
 * centre, la commande TTS à droite. Le menu déroulé occupe une deuxième
 * ligne, sur toute la largeur.
 *
 * Elle était auparavant une rangée flex où deux marges « auto » se
 * disputaient l'espace — celle du logo, qui voulait se centrer, et celle du
 * bloc TTS, qui voulait être à droite. Le résultat variait avec la largeur
 * de l'écran : logo décentré, texte coupé en plein mot, bloc TTS renvoyé
 * seul à la ligne. Les colonnes latérales sont ici de largeur égale
 * (« 1fr »), ce qui centre réellement le logo, et « minmax(0, 1fr) »
 * autorise la troisième à rétrécir au lieu de déborder.
 */
#burgerNavbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 1em;

    background-color: #1a1613 !important;
    /* Un filet doré very fin sépare le bandeau du contenu. */
    border-bottom: 1px solid rgba(166, 124, 61, .45);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}

#burgerButton {
    border: 1px solid rgba(233, 219, 199, .3) !important;
    border-radius: var(--odv-rayon) !important;
    transition: border-color var(--odv-transition), background-color var(--odv-transition);
    /* Reprend l'animation d'appel du menu, en or au lieu du violet vif
       qui tranchait avec le bandeau (voir w1anim dans style.css). */
    animation: odvAppelMenu 2.8s ease-in-out infinite !important;
}

@keyframes odvAppelMenu {
    0%, 100% {
        box-shadow: 0 0 0 rgba(166, 124, 61, 0);
        border-color: rgba(233, 219, 199, .3);
    }

    50% {
        box-shadow: 0 0 10px rgba(166, 124, 61, .55);
        border-color: rgba(166, 124, 61, .85);
    }
}

#burgerButton:hover {
    background-color: rgba(233, 219, 199, .08) !important;
    border-color: var(--odv-or) !important;
    /* Une fois que l'utilisateur a trouvé le menu, l'appel n'a plus lieu d'être. */
    animation: none !important;
}

/* Le contour violet vif que Bootstrap pose sur le bouton au clavier
   n'a rien à faire sur un bandeau noir et or. */
#burgerButton:focus,
#burgerButton:active,
.navbar-toggler:focus,
.navbar-toggler:active {
    outline: 0 !important;
    box-shadow: 0 0 0 2px var(--odv-or-voile) !important;
    border-color: var(--odv-or) !important;
}

/* Le bandeau porte le logo seul — « L'Ordre de Veiel » — et le nom de
   l'outil est écrit en dessous, en texte. La même image sert ainsi les trois
   outils du site : l'encyclopédie, le tirage aléatoire et cet atelier.
   L'ancien « banner.png », qui incrustait « L'atelier du deckbuilding
   tactique » dans l'image, n'est plus utilisé. */
/* Le logo ramène à l'accueil — ici, vos créations — comme sur n'importe
   quel site. */
/* Chaque élément dans sa colonne. Les marges « auto » d'origine n'ont plus
   lieu d'être : c'est la grille qui place. */
#burgerNavbar > #burgerButton {
    grid-column: 1;
    justify-self: start;
}

#burgerNavbar > .websiteTitle {
    grid-column: 2;
}

#burgerNavbar > div[style*="cursor"] {
    grid-column: 3;
    justify-self: end;
    min-width: 0;
    text-align: right;
}

/*
 * Les deux lignes du bloc TTS — l'invitation et la commande — tiennent
 * chacune sur une seule ligne, quoi qu'il arrive.
 *
 * Sans cela, dès que sa colonne se resserrait, le texte s'y empilait mot par
 * mot : la barre passait de 108 px de haut à 251 px vers 900 px de large, et
 * la commande se retrouvait très loin sous le logo. Des points de suspension
 * disent clairement que le texte continue — un clic le copie en entier.
 */
#burgerNavbar > div[style*="cursor"] > div,
#burgerNavbar #userHello h4 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

/*
 * En dessous de 1200 px, la colonne latérale n'est plus assez large pour
 * l'invitation : on ne garde que la commande, qui est l'information utile.
 * Mieux vaut un palier net qu'une phrase tronquée à mi-mot dont la longueur
 * varie avec l'écran.
 */
@media (max-width: 1199px) {
    #burgerNavbar > div[style*="cursor"] > div:first-child {
        display: none;
    }

    #burgerNavbar #userHello h4 {
        font-size: 1.1em !important;
    }
}

/* Le menu déroulé prend sa propre ligne, sur toute la largeur. */
#burgerNavbar > #burgerMenu {
    grid-column: 1 / -1;
}

#burgerNavbar .websiteTitle {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    max-height: none !important;
    margin: 0 !important;
    cursor: pointer;
    transition: opacity var(--odv-transition);
}

#burgerNavbar .websiteTitle:hover {
    opacity: .85;
}

#burgerNavbar .websiteTitle img {
    display: block;
    width: min(360px, 100%);
    height: auto;
}

/* Le site masque le logo sur téléphone — « hidden-for-phone », au palier de
   800 px — faute de place à côté du bouton et de la commande TTS. La règle
   ci-dessus, plus spécifique, le faisait réapparaître : il revenait alors
   se serrer contre le reste et se retrouvait coupé au bord de l'écran. */
@media (max-width: 800px) {
    #burgerNavbar .websiteTitle.hidden-for-phone {
        display: none !important;
    }
}

.entete-sous-titre {
    display: block;
    margin-top: .75em;
    font-family: Georgia, "Iowan Old Style", serif !important;
    font-size: clamp(.6rem, 1.2vw, .78rem);
    letter-spacing: .28em;
    text-transform: uppercase;
    color: rgba(233, 219, 199, .72) !important;
    white-space: nowrap;
    /* L'interlettrage ajoute une espace après la dernière lettre : sans ce
       rattrapage, la ligne paraît décalée d'un cran vers la gauche. */
    text-indent: .28em;
}

#userHello h4 {
    font-size: 1.15em !important;
    color: var(--odv-or-clair) !important;
    letter-spacing: .01em;
    transition: color var(--odv-transition);
}

#userHello:hover h4 {
    color: #ddb572 !important;
}

/* ---------------------------------------------------------------
   Titres de section
   « Vos scénarios », « Cartes sans groupe » étaient en gris pâle et
   se lisaient comme du texte secondaire. Un filet doré leur donne
   le statut de titre sans les rendre bruyants.
   --------------------------------------------------------------- */

.groupTitle,
.groupName {
    color: var(--odv-encre) !important;
    font-family: "CrimsonSemibold", serif !important;
    font-size: 1.5em !important;
    letter-spacing: .01em;
}

.groupTitle {
    padding-bottom: .35em;
    margin-bottom: .9em !important;
    border-bottom: 1px solid var(--odv-bordure);
    position: relative;
}

/* Un court trait doré doublait ce filet, un pixel plus haut : deux lignes
   pour un seul titre, dont l'une décalée. Le filet suffit. */

/* Le nom d'un groupe est composé d'un numéro suivi du nom de la carte
   maîtresse : on donne le premier rôle au nom, pas au numéro. */
.groupTitle .groupeName {
    font-family: "CrimsonSemibold", serif !important;
}

h1, h2, h3, h4 {
    color: var(--odv-encre) !important;
    letter-spacing: .01em;
}

/* ---------------------------------------------------------------
   Panneaux
   --------------------------------------------------------------- */

/* Les écrans mélangent .card (Bootstrap 4) et .panel (Bootstrap 3) :
   les deux doivent recevoir le même traitement. */
.card,
.panel {
    background-color: var(--odv-panneau) !important;
    border: 1px solid var(--odv-bordure) !important;
    border-radius: var(--odv-rayon) !important;
    box-shadow: var(--odv-ombre);
}

.card-body,
.panel-body {
    padding: 1.75em 2em !important;
    background-color: transparent !important;
    /* style.css posait un second cadre — arrondi à 1em, avec sa propre ombre —
       à l'intérieur de celui du panneau. On voyait donc deux filets emboîtés
       aux rayons différents. Le cadre appartient au panneau ; le corps n'en
       porte plus. */
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Garde-fou : un « panel » sans « panel-body » n'a pas de marge intérieure,
   son contenu se colle donc au filet. Plutôt que d'encadrer n'importe quoi,
   ces panneaux-là s'effacent. */
.panel:not(:has(.panel-body)),
.card:not(:has(.card-body)) {
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Le titre du panneau devient un véritable en-tête de section. */
.card .card-title,
.panel .panel-title {
    font-size: 1.45em !important;
    padding-bottom: .45em;
    border-bottom: 1px solid var(--odv-bordure);
    margin-bottom: .2em !important;
    position: relative;
}


/* Le titre est dans une .form-row qui le contraignait en largeur. */
.panel-body > .form-row:first-child {
    display: block !important;
    margin: 0 0 1.4em !important;
}

/* ---------------------------------------------------------------
   Formulaires
   --------------------------------------------------------------- */

label {
    color: var(--odv-encre) !important;
    font-family: "CrimsonSemibold", serif !important;
    letter-spacing: .01em;
}

.form-control {
    border: 1px solid var(--odv-bordure-forte) !important;
    border-radius: var(--odv-rayon) !important;
    color: var(--odv-encre) !important;
    background-color: #fff !important;
    transition: border-color var(--odv-transition), box-shadow var(--odv-transition);
}

.form-control:focus {
    border-color: var(--odv-or) !important;
    box-shadow: 0 0 0 3px var(--odv-or-voile) !important;
}

/* Les indications sous les champs étaient d'un bleu-violet qui jurait
   avec l'univers du jeu et attirait l'œil plus que les libellés. */
small.text-muted,
.text-muted {
    color: var(--odv-encre-douce) !important;
    font-size: .82em !important;
}

small.text-muted a {
    color: var(--odv-or) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* L'aide sous un champ est un paragraphe à elle seule. Comme tout « small »
   elle reste en ligne, si bien que le bouton qui la suit se collait au bout
   de sa dernière phrase au lieu de commencer sa propre ligne. */
.form-group > small.text-muted {
    display: block;
}

/* Les astérisques de champ obligatoire. */
sup {
    color: var(--odv-or) !important;
}

/* Quelques libellés portent un style en ligne « orangered » pour attirer
   l'attention. L'intention est bonne, la couleur criait : on la remplace
   par l'or de la charte, plus discret mais tout aussi repérable. */
label[style*="orangered"] {
    color: var(--odv-or) !important;
}

/* ---------------------------------------------------------------
   Boutons
   L'ombre portée diffuse et le fond blanc donnaient un aspect daté.
   On passe à un bouton plat à filet, dont le survol inverse
   franchement les valeurs.
   --------------------------------------------------------------- */

/* Centrage vertical du contenu.
   Un bouton Bootstrap est un bloc en ligne : son contenu se cale sur la
   ligne de base, pas au milieu de la boîte. Selon ce qu'il contient — une
   icône Font Awesome, du texte, ou les deux — le résultat tombait chaque
   fois à une hauteur différente : le « TTS » d'une vignette ne s'alignait
   pas avec l'icône Discord voisine, et le libellé de « Créer une carte »
   flottait au-dessus du milieu à cause des jambages de la Crimson.
   En faire un conteneur flex règle les trois cas d'un coup.

   Les boutons de menu déroulant (bootstrap-select) sont exclus : leur
   contenu est positionné par la bibliothèque elle-même. */
.btn:not(.dropdown-toggle) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
}

/* Cale invisible : elle donne au contenu la hauteur d'une ligne de texte,
   pour qu'un bouton ne portant qu'une icône fasse exactement la même
   hauteur que son voisin qui porte un mot. */
.btn:not(.dropdown-toggle)::before {
    content: "";
    display: block;
    width: 0;
    height: 1.3em;
}

.btn:not(.dropdown-toggle) > i,
.btn:not(.dropdown-toggle) > svg {
    flex: 0 0 auto;
    line-height: 1;
}

.btn-primary {
    background-color: transparent !important;
    border: 1px solid var(--odv-bordure-forte) !important;
    color: var(--odv-encre) !important;
    border-radius: var(--odv-rayon) !important;
    font-family: "CrimsonSemibold", serif !important;
    font-size: 1.05em !important;
    padding: .45em 1.1em !important;
    box-shadow: none !important;
    transition: background-color var(--odv-transition), border-color var(--odv-transition), color var(--odv-transition);
}

.btn-primary:not(.disabled):hover {
    background-color: var(--odv-encre) !important;
    border-color: var(--odv-encre) !important;
    color: var(--odv-parchemin) !important;
}

.btn-primary:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--odv-or-voile) !important;
}

.btn-secondary {
    background-color: transparent !important;
    border: 1px solid var(--odv-bordure-forte) !important;
    color: var(--odv-encre-douce) !important;
    border-radius: var(--odv-rayon) !important;
    box-shadow: none !important;
}

.btn-secondary:hover {
    background-color: var(--odv-bordure) !important;
    color: var(--odv-encre) !important;
}

/* L'action principale de chaque écran mérite d'être identifiable au
   premier coup d'œil : elle est pleine, les autres sont en filet. */
[onclick*="GenerateCard"],
[onclick*="printController.Save"],
[onclick*="scenarioCreatorController.save"] {
    background-color: var(--odv-encre) !important;
    border-color: var(--odv-encre) !important;
    color: var(--odv-parchemin) !important;
    padding: .55em 1.6em !important;
}

[onclick*="GenerateCard"]:not(.disabled):hover,
[onclick*="printController.Save"]:not(.disabled):hover,
[onclick*="scenarioCreatorController.save"]:not(.disabled):hover {
    background-color: var(--odv-or) !important;
    border-color: var(--odv-or) !important;
    color: #fff !important;
}

/* Les boutons de copie de commande TTS sont fréquents et secondaires :
   on les allège pour qu'ils ne concurrencent pas les cartes. */
.importButton {
    font-size: .95em !important;
    color: var(--odv-encre-douce) !important;
    border-style: dashed !important;
}

/* ---------------------------------------------------------------
   Galerie
   --------------------------------------------------------------- */

.groupOfCards {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
    gap: 1.5em .5em;
    /* Un trait gris pleine largeur fermait chaque groupe : dans une grille,
       c'est l'espace qui sépare, pas la ligne. */
    border-bottom: 0 !important;
    margin: 0 0 2.5em !important;
    padding-bottom: 0 !important;
}

.groupOfCards > div {
    margin-bottom: 0 !important;
}

.imageContainerInGallery {
    border-radius: var(--odv-rayon);
    overflow: hidden;
    box-shadow: var(--odv-ombre);
    transition: transform var(--odv-transition), box-shadow var(--odv-transition);
    width: 200px;
    margin: 0 auto .75em;
}

.imageContainerInGallery:hover {
    transform: translateY(-3px);
    box-shadow: var(--odv-ombre-forte);
}

.imageInGallery {
    margin: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
}

.imageInGallery:hover {
    opacity: 1 !important;
}

.buttonLineInGallery {
    margin-left: 0 !important;
    width: 200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: .4em;
}

/* Les quatre boutons sous une carte avaient quatre styles différents.
   Ils partagent maintenant la même forme ; seule la couleur au survol
   rappelle le service concerné. */
.buttonLineInGallery .btn-primary {
    flex: 1;
    font-size: .9em !important;
    padding: .35em .5em !important;
    margin-right: 0 !important;
}

/* Ces deux boutons ne sont pas de simples liens : ils portent un ÉTAT.
   « TTS » dit si la carte part sur Tabletop Simulator et se bascule d'un
   clic ; « Discord » dit si elle a déjà son fil de discussion.
   Le thème les avait mis tous les deux en filet clair, si bien que la
   bascule ne se voyait presque plus — on croyait le bouton mort alors
   qu'il faisait son travail. L'état actif est donc peint aux couleurs du
   service, l'état inactif reste un contour en pointillé. */
.discordButton:not(.disabled) {
    background-color: #5865f2 !important;
    border-color: #5865f2 !important;
    color: #fff !important;
}

.tabletopButton {
    font-size: .82em !important;
    letter-spacing: .04em;
}

.tabletopButton:not(.disabled) {
    background-color: #d15a3f !important;
    border-color: #d15a3f !important;
    color: #fff !important;
}

.discordButton:not(.disabled):hover,
.tabletopButton:not(.disabled):hover {
    background-color: var(--odv-encre) !important;
    border-color: var(--odv-encre) !important;
    color: var(--odv-parchemin) !important;
}

/* « disabled » ne veut pas dire inerte ici : on clique dessus pour activer
   l'envoi vers Tabletop. Le pointillé dit « éteint », pas « interdit », et
   on ne le noie pas sous l'opacité de Bootstrap. */
.discordButton.disabled,
.tabletopButton.disabled {
    background-color: transparent !important;
    border-style: dashed !important;
    border-color: var(--odv-bordure-forte) !important;
    color: var(--odv-encre-pale) !important;
    opacity: 1 !important;
}

.tabletopButton.disabled:hover {
    border-style: solid !important;
    border-color: #d15a3f !important;
    color: #d15a3f !important;
}

/* Le trait sous chaque carte fragmentait la grille. */
.groupOfCards .hr {
    display: none;
}

hr {
    border: 0 !important;
    border-top: 1px solid var(--odv-bordure) !important;
    margin: 2.5em 0 !important;
}

/* ---------------------------------------------------------------
   Scénarios
   Le nom et ses deux boutons étaient aux deux extrémités de l'écran.
   On les rassemble sur une ligne, comme une entrée de sommaire.
   --------------------------------------------------------------- */

.scenarioInGallery {
    display: flex;
    align-items: center;
    gap: 1em;
    max-width: 620px;
    padding: .6em .9em;
    background-color: var(--odv-panneau);
    border: 1px solid var(--odv-bordure);
    border-left: 2px solid var(--odv-or);
    border-radius: var(--odv-rayon);
    transition: box-shadow var(--odv-transition);
}

.scenarioInGallery:hover {
    box-shadow: var(--odv-ombre);
}

.scenarioInGallery .scenarioTitle {
    flex: 1;
    font-family: "CrimsonSemibold", serif !important;
    font-size: 1.25em;
    color: var(--odv-encre);
}

.scenarioInGallery .buttonLineInGallery {
    width: auto !important;
    margin: 0 !important;
    flex: 0 0 auto;
}

.scenarioInGallery .buttonLineInGallery .btn-primary {
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------
   Aperçu de la carte générée
   L'aperçu s'affichait à 500 px de large, soit près de 700 px de haut :
   il fallait faire défiler la page pour voir sa propre carte. On réduit
   l'AFFICHAGE seulement — l'image téléchargée garde sa définition
   d'impression.
   --------------------------------------------------------------- */

#generatedImage > img {
    max-width: 330px !important;
    border-radius: var(--odv-rayon);
    box-shadow: var(--odv-ombre-forte);
}

/* ---------------------------------------------------------------
   Fenêtres modales
   --------------------------------------------------------------- */

.modal-content {
    background-color: var(--odv-panneau) !important;
    border: 1px solid var(--odv-bordure-forte) !important;
    border-radius: var(--odv-rayon) !important;
    box-shadow: var(--odv-ombre-forte) !important;
}

.modal-header,
.modal-footer {
    border-color: var(--odv-bordure) !important;
}

.modal-body {
    color: var(--odv-encre) !important;
    padding: 1.6em 1.8em !important;
}

/* ---------------------------------------------------------------
   Sélecteurs bootstrap-select : ils rendent un bouton, pas un champ.
   On leur donne l'apparence des autres champs du formulaire.
   --------------------------------------------------------------- */

.bootstrap-select > .dropdown-toggle {
    background-color: #fff !important;
    border: 1px solid var(--odv-bordure-forte) !important;
    border-radius: var(--odv-rayon) !important;
    color: var(--odv-encre) !important;
    box-shadow: none !important;
    font-family: "CrimsonRoman", serif !important;
}

.bootstrap-select > .dropdown-toggle:focus {
    outline: none !important;
    border-color: var(--odv-or) !important;
    box-shadow: 0 0 0 3px var(--odv-or-voile) !important;
}

/* Pas de filet autour du menu : il en dessinait un deuxième, décalé, sous
   celui du champ lui-même. L'ombre portée suffit à détacher le menu. */
.dropdown-menu {
    border: 0 !important;
    border-radius: var(--odv-rayon) !important;
    box-shadow: var(--odv-ombre-forte) !important;
}

/* Le champ de recherche du menu déroulant se dessinait comme un champ de
   formulaire à part entière — cadre arrondi et halo doré — à l'intérieur
   d'un menu qui a déjà le sien : deux cadres emboîtés aux rayons
   différents. Il ne garde qu'un filet de séparation, souligné d'or quand
   on y écrit. */
.bs-searchbox {
    padding: .5em .6em !important;
}

.bs-searchbox .form-control {
    border: 0 !important;
    border-bottom: 1px solid var(--odv-bordure) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
    padding: .3em .2em !important;
}

.bs-searchbox .form-control:focus {
    border-bottom-color: var(--odv-or) !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--odv-or) !important;
    color: #fff !important;
}

.dropdown-item:hover {
    background-color: var(--odv-parchemin) !important;
    color: var(--odv-encre) !important;
}

/* ---------------------------------------------------------------
   Menu latéral
   --------------------------------------------------------------- */

#burgerMenu .nav-item {
    color: var(--odv-parchemin);
    border-left: 2px solid transparent;
    transition: border-color var(--odv-transition), background-color var(--odv-transition);
}

#burgerMenu .nav-item:hover {
    border-left-color: var(--odv-or);
    background-color: rgba(233, 219, 199, .06);
}

#burgerMenu .nav-item i {
    color: var(--odv-or-clair);
    margin-right: .6em;
}

/* ---------------------------------------------------------------
   Barres de boutons de fin de formulaire
   Chaque bouton portait sa propre marge (« margin-right-1 » plus
   « margin-bottom: 1em »), ce qui laissait une marge morte à droite
   du dernier et sous la ligne. Une seule gouttière suffit.
   --------------------------------------------------------------- */

.end-form-button-list {
    display: flex;
    flex-wrap: wrap;
    gap: .75em;
    align-items: center;
}

.end-form-button-list > button {
    margin: 0 !important;
}

/* ---------------------------------------------------------------
   Champs de saisie
   --------------------------------------------------------------- */

/* Les zones de texte tenaient sur deux lignes : on y rédige pourtant
   l'effet complet d'une carte ou l'introduction d'un affrontement. */
textarea.form-control {
    min-height: 8.5em;
    line-height: 1.55;
    resize: vertical;
}

/* La présentation destinée à Discord est un texte long : on lui donne
   d'emblée la hauteur d'un vrai paragraphe. */
#description {
    min-height: 12em;
}

/* ---------------------------------------------------------------
   Sélecteur d'illustrations
   Les vignettes sont carrées, à l'image de la fenêtre découpée dans
   les cadres ordinaires. Une illustration full art couvre toute la
   carte : sa vignette prend donc les proportions d'une carte, pour
   qu'on choisisse en voyant ce qu'on obtiendra.
   --------------------------------------------------------------- */

#imagePicker .wall {
    display: flex;
    flex-wrap: wrap;
    gap: .8em;
    align-content: flex-start;
}

#imagePicker .wall .brick {
    margin: 0;
    border-radius: var(--odv-rayon);
}

#imagePicker .wall--fullart .brick {
    width: 160px;
    height: 223px;
}

#imagePickerLibrary {
    display: block;
    margin-top: 2.2em;
    font-variant-numeric: tabular-nums;
}

/* Le décompte de caractères, discret tant qu'on est loin de la limite. */
.compteur-caracteres {
    float: right;
    font-variant-numeric: tabular-nums;
    color: var(--odv-encre-pale);
}

.compteur-caracteres.proche-limite {
    color: var(--odv-or);
    font-weight: 700;
}

/* Le champ « Nombre de caractères par ligne » et les points de vie
   n'ont besoin que de deux ou trois caractères : un champ pleine
   largeur laissait croire qu'on attendait une phrase.
 *
 * Le « input » en tête des deux derniers sélecteurs n'est pas décoratif.
 * Écrits « [id^="life"] », ils attrapaient aussi le panneau qui contient
 * ces champs — il s'appelle « lifesAndWounds » : le panneau entier se
 * retrouvait large de 7 em et centré, d'où les libellés superposés et la
 * colonne écrasée dès qu'on choisissait la catégorie Ennemi. */
#charactersPerLine,
#threat,
#discardedCardFamiliar,
#drawnCardFamiliar,
input[id^="life"],
input[id^="wounds"] {
    max-width: 7em;
    text-align: center;
}

/* L'image choisie flottait à cinq pixels du bord, sans cadre. */
#selectedImage {
    display: block;
    margin: .25em 0 .5em !important;
    border-radius: var(--odv-rayon);
    box-shadow: var(--odv-ombre);
}

/* La ligne qui ne contient que cette image (et rien quand elle est
   masquée) n'a pas à réserver l'espace d'un champ. */
.form-row > #selectedImage {
    margin-left: .35em !important;
}

/* ---------------------------------------------------------------
   Aide à la rédaction de l'effet
   Un long dépliant de listes à puces, sans hiérarchie ni repère.
   On le rattache à un filet et on rend chaque code cliquable
   visiblement cliquable.
   --------------------------------------------------------------- */

#collapseExample {
    border-left: 2px solid var(--odv-bordure);
    padding: .2em 0 .4em 1.2em;
    margin-top: 1.2em !important;
    max-width: 62em;
}

#collapseExample h4 {
    font-size: 1.05em !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--odv-encre-douce) !important;
    margin: 1.6em 0 .5em;
}

#collapseExample h4:first-child {
    margin-top: .4em;
}

#collapseExample ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: .5em;
}

#collapseExample li {
    padding: .2em .5em;
    border-radius: var(--odv-rayon);
}

#collapseExample li.copyOnClick {
    display: flex;
    align-items: baseline;
    gap: .4em;
    cursor: pointer;
    transition: background-color var(--odv-transition);
}

#collapseExample li.copyOnClick:hover {
    background-color: var(--odv-parchemin);
    text-decoration: none;
}

/* Un discret « copier » n'apparaît qu'au survol : la liste reste
   calme, mais l'action devient évidente au bon moment. */
#collapseExample li.copyOnClick::after {
    content: "copier";
    margin-left: auto;
    font-size: .8em;
    color: var(--odv-or);
    opacity: 0;
    transition: opacity var(--odv-transition);
}

#collapseExample li.copyOnClick:hover::after {
    opacity: 1;
}

#collapseExample li b {
    color: var(--odv-encre-douce);
    font-weight: 600;
    flex: 0 0 auto;
}

/* Le rappel « les codes ne collent pas un autre mot » était en rouge vif. */
#collapseExample div[style*="color:red"] {
    color: var(--odv-encre-douce) !important;
    border-left: 2px solid var(--odv-or);
    padding-left: .8em;
    margin-left: 0 !important;
    font-style: italic;
}

/* ---------------------------------------------------------------
   Vignettes de la galerie
   --------------------------------------------------------------- */

/* La pastille « DOS » était calée à 30 px du bord gauche, une valeur
   qui datait d'une autre largeur de vignette. On l'ancre au coin. */
.infoInGallery {
    top: .5em;
    left: auto;
    right: .5em;
    width: 2.4em;
    height: 2.4em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: .72em;
    letter-spacing: .04em;
    color: var(--odv-encre);
    background-color: rgba(255, 253, 249, .94);
    box-shadow: 0 1px 4px rgba(47, 38, 30, .35);
}

/* Deux lignes de boutons se suivent sous chaque carte : un écart d'un
   « em » entre elles les faisait lire comme deux groupes distincts. */
.groupOfCards .buttonLineInGallery {
    margin-bottom: .4em !important;
}

.groupOfCards .buttonLineInGallery:last-child {
    margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------
   Écran d'impression
   La colonne de gauche portait un filet, mais aucune marge
   intérieure : le texte touchait le trait.
   --------------------------------------------------------------- */

#printCardSelector {
    gap: 1.5em;
    align-items: flex-start;
}

#printCardSelector > div:first-child {
    border: 1px solid var(--odv-bordure) !important;
    border-radius: var(--odv-rayon);
    background-color: var(--odv-parchemin);
    padding: 1.2em;
}

/* Ces lignes portent un « style="margin: 1em 0" » en dur ; seul un
   !important peut resserrer la colonne. */
#printCardSelector > div:first-child > .row {
    margin: 0 0 .9em !important;
}

#printCardSelector > div:first-child > .row:last-child {
    margin-bottom: 0 !important;
}

/* Les résultats de recherche s'empilaient un par un dans une colonne large
   de mille pixels, chaque carte occupant toute la largeur. Une grille en
   remplit autant que la place le permet — cinq ou six sur un écran de
   bureau, deux dans un panneau étroit, une sur téléphone. */
#cardsContainer {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    align-content: start;
    gap: .9em;
    margin-left: 0 !important;
    padding: .25em;
}

#cardsContainer .printCard {
    max-width: none;
    min-width: 0;
    margin: 0 !important;
}

#cardsContainer .printCard img {
    display: block;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: auto;
    border-radius: var(--odv-rayon);
    box-shadow: var(--odv-ombre);
    transition: transform var(--odv-transition), box-shadow var(--odv-transition);
}

#cardsContainer .printCard:hover img {
    transform: translateY(-3px);
    box-shadow: var(--odv-ombre-forte);
}

#numberOf {
    line-height: 1.7;
}

#selectedCardsList > div {
    padding: .2em 0;
    border-bottom: 1px solid var(--odv-bordure);
}

#selectedCardsList > div:last-child {
    border-bottom: 0;
}

/* ---------------------------------------------------------------
   Panneaux latéraux des scénarios
   Trois bordures bleues de 3 px, héritées d'un thème Bootstrap 3.
   --------------------------------------------------------------- */

#scenariosTree,
#toolsPanel {
    background-color: var(--odv-panneau) !important;
    border: 1px solid var(--odv-bordure) !important;
    box-shadow: var(--odv-ombre);
}

#arrowScenarioTree,
#arrowToolsPanel {
    background: var(--odv-encre);
    color: var(--odv-parchemin);
    border-radius: var(--odv-rayon);
}

#arrowScenarioTree:hover,
#arrowToolsPanel:hover {
    background: var(--odv-or);
    color: #fff;
}

.node-scenariosTree,
.list-group-item {
    background-color: transparent !important;
}

.list-group-item.active {
    background-color: var(--odv-parchemin) !important;
    border-color: var(--odv-bordure) !important;
}

/* ---------------------------------------------------------------
   Divers filets et séparateurs
   --------------------------------------------------------------- */

.bottom-divider,
.encyclopediaDivider,
.sidebar-heading,
#searchEncyclopedia,
#searchWorkshop {
    border-color: var(--odv-bordure) !important;
    background-color: transparent !important;
}

.encyclopediaDivider {
    height: 1px;
    background: linear-gradient(to right, var(--odv-bordure), transparent) !important;
}

/* L'aperçu de la carte générée méritait d'être annoncé. */
#generatedImage {
    text-align: center;
    padding-top: .5em;
}

/* ---------------------------------------------------------------
   Pied de page
   Le même que sur l'encyclopédie et le tirage aléatoire : l'atelier
   était le seul à ne pas en avoir. Les valeurs sont reprises telles
   quelles de EncyclopedieODVDBT/CSS/theme.css.
   --------------------------------------------------------------- */

.contact-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6em;
    margin-top: 3em;
    padding: 2.5em 1.5em 3em;
    background: var(--odv-parchemin-creux);
    border-top: 1px solid var(--odv-bordure);
    box-shadow: inset 0 1px 0 var(--odv-or-voile);
}

.contact-links .btn {
    display: flex;
    align-items: center;
    gap: .5em;
    text-decoration: none;
    background-color: transparent !important;
    color: var(--odv-encre-douce) !important;
    border: 1px solid var(--odv-bordure-forte) !important;
    border-radius: var(--odv-rayon) !important;
    font-family: Georgia, "Iowan Old Style", serif !important;
    font-weight: 400 !important;
    font-size: .88rem !important;
    padding: .5em 1em !important;
    box-shadow: none !important;
    transition: background-color var(--odv-transition), color var(--odv-transition),
        border-color var(--odv-transition), transform var(--odv-transition) !important;
}

.contact-links .btn:hover {
    background-color: var(--odv-encre) !important;
    border-color: var(--odv-encre) !important;
    color: var(--odv-parchemin) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--odv-ombre) !important;
}

/* Les liens vers les autres outils du site ne sont pas des liens de
   contact : ils passent en premier plan, en or. */
.contact-links .btn.tool-link {
    background-color: var(--odv-or) !important;
    border-color: var(--odv-or) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.contact-links .btn.tool-link:hover {
    background-color: var(--odv-encre) !important;
    border-color: var(--odv-encre) !important;
    color: var(--odv-parchemin) !important;
}

/* Le corps du site remplit la hauteur de l'écran : sans cela, sur un
   écran de création presque vide, le pied de page remontait au milieu
   de la page. */
#content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#content .container-fluid#main {
    flex: 1 0 auto;
}

/* « flex: 0 0 auto » sur le bandeau, et c'est le point important : par
   défaut un élément de flexbox peut RÉTRÉCIR. Le menu déroulé fait grandir
   le bandeau, mais le corps de page réclamait toute la hauteur restante et
   le recomprimait à ses 100 px d'origine. Les entrées du menu débordaient
   alors hors du fond sombre — texte blanc sur parchemin, donc invisible :
   il ne restait que les icônes. */
#burgerNavbar,
.contact-links {
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------
   Filet de sécurité
   « .hidden » est la façon dont tout le JavaScript masque un élément.
   Comme ce fichier est chargé en dernier, une règle « display » en
   !important posée plus haut lui passerait devant à égalité de
   spécificité. On réaffirme la règle ici, à la toute fin.
   --------------------------------------------------------------- */

.hidden {
    display: none !important;
}

/* ---------------------------------------------------------------
   Écrans étroits
   La marge de 3em héritée du poste de travail poussait le contenu
   hors de l'écran sur téléphone.
   --------------------------------------------------------------- */

@media (max-width: 768px) {
    #main {
        padding: 1.5em 1em 3em !important;
    }

    /* Les marges négatives des .row de Bootstrap dépassaient de l'écran. */
    #main .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Sur téléphone la commande revient à la taille du texte courant : en
       h4 elle mangeait à elle seule la moitié de la barre. */
    #burgerNavbar #userHello h4 {
        font-size: 1em !important;
    }

    /* Le logo étant masqué sous 800 px, la colonne du milieu est vide : la
       barre se réduit d'elle-même au bouton et à la commande TTS, chacun de
       son côté. Rien de particulier à régler, la grille suffit. */
    #burgerMenu .nav-item {
        font-size: 1.15em;
        padding: .7em .4em;
        white-space: normal;
    }

    /* Deux boutons d'action côte à côte doivent pouvoir passer à la ligne. */
    #main .row {
        flex-wrap: wrap !important;
    }

    .groupOfCards {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 1.2em .5em;
    }

    /* Ces éléments portaient une largeur fixe de 200 px : deux colonnes
       dépassaient la largeur d'un téléphone. */
    .imageContainerInGallery,
    .buttonLineInGallery,
    .imageInGallery,
    .mask {
        width: 100% !important;
        max-width: 200px;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Aucun bouton ne doit être plus large que son conteneur. */
    .btn {
        max-width: 100%;
        white-space: normal;
    }

    /* Les boutons pleine largeur évitent les lignes qui débordent. */
    #main .row > .btn-primary {
        flex: 1 1 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .importButton {
        white-space: normal;
        text-align: left;
    }

    .scenarioInGallery {
        max-width: none;
    }

    .panel-body,
    .card-body {
        padding: 1.2em 1em !important;
    }

    .groupTitle {
        font-size: 1.3em !important;
    }
}