/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video
{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section
{
    display: block;
}

body
{
    line-height: 1;
    font-family: calibri, serif;
    background: url("../images/background-1349262a1f7a64591ed0137f0b7aef93.jpg") no-repeat center center fixed;
    background-size: cover;
}

ol, ul
{
    list-style: none;
}

blockquote, q
{
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after
{
    content: '';
    content: none;
}

table
{
    border-collapse: collapse;
    border-spacing: 0;
}

/********************************************************************

	flipbooks

***********************************************************************/

.flipbook .p1{

    background: #000000;
    border-radius: 15px;
    box-shadow: 0 0 5px black, inset 0 0 3px white;

}

.flipbook .even{
    border-bottom-right-radius: 90px 20px;
    border-top-right-radius: 90px 20px;
    background-image: -webkit-linear-gradient(
            left, #EBCF8F, #F0DFB3 90%, #a08050
    );
    background-image: -ms-linear-gradient(
            left, #EBCF8F, #F0DFB3 90%, #a08050
    );
    background-image: -moz-linear-gradient(
            left, #EBCF8F, #F0DFB3 90%, #a08050
    );
    background-image: -o-linear-gradient(
            left, #EBCF8F, #F0DFB3 90%, #a08050
    );
}
.flipbook .odd{
    border-bottom-left-radius: 90px 20px;
    border-top-left-radius: 90px 20px;
    background-image: -webkit-linear-gradient(
            right, #EBCF8F, #F0DFB3 90%, #a08050
    );
    background-image: -ms-linear-gradient(
            right, #EBCF8F, #F0DFB3 90%, #a08050
    );
    background-image: -moz-linear-gradient(
            right, #EBCF8F, #F0DFB3 90%, #a08050
    );
    background-image: -o-linear-gradient(
            right, #EBCF8F, #F0DFB3 90%, #a08050
    );
}


body{
    overflow:scroll;
    margin:0;
    padding:0;
}

.flipbook-viewport{
    overflow:hidden;
    width:100%;
    height:100%;
}

p{
    margin: 30px;
}

.flipbook-viewport .container {
    position: absolute;
    /* Empreinte totale (non réduite) du livre + de ses onglets qui débordent au-dessus :
       .flipbook est décalé de -200px, .tabs de -22px puis .bigtabs de -72px après le flux
       normal de .tabs (22px) => le haut de .bigtabs est à -250px du repère de .container ;
       le bas de .flipbook (hauteur 800px) est à +600px de ce même repère. Empreinte = 850px. */
    --book-top-overflow: 250px;
    --book-height: 850px;
    --book-width: 1500px;
    /* Occupe le plus de place possible sans déborder : facteur 1 au maximum (jamais plus
       grand que la taille actuelle), réduit seulement si la fenêtre est plus petite que le
       livre. On ne vise pas le mobile/tablette ici, juste les petits écrans PC.

       tan(atan2(a, b)) est la façon portable d'obtenir le nombre sans unité a/b à partir de deux
       longueurs : `calc(100vw / 1500px)` (division d'une longueur par une longueur) n'est PAS
       supporté par Firefox, qui invalide alors --book-scale ; `transform` et `top`, qui le
       consomment via var(), tombaient à leur valeur initiale (transform: none) et le livre, laissé
       à `left: 50%` sans son translateX(-50%), partait hors écran sur la droite. Chrome, lui,
       accepte la division et masquait le problème. */
    --book-scale: min(1, tan(atan2(100vw - 20px, var(--book-width))), tan(atan2(100vh - 20px, var(--book-height))));
    /* Le haut de .bigtabs doit toujours retomber à 10px du haut de l'écran, quelle que soit
       l'échelle : comme .container est réduit avec une origine "top", le débord de 250px se
       réduit lui aussi proportionnellement (250px * --book-scale). */
    top: calc(10px + var(--book-top-overflow) * var(--book-scale));
    /* Centrage horizontal par `left` seul (et non plus par un translateX(-50%) accolé au
       scale()) : il ne dépend ainsi d'aucune expression exotique, donc si --book-scale venait
       à être invalide sur un moteur (cf. ci-dessus), le livre resterait centré - simplement
       non réduit - au lieu de filer hors écran. */
    left: calc(50% - var(--book-width) / 2);
    height: 0;
    margin: 0;
    transform: scale(var(--book-scale));
    transform-origin: top center;
}

.flipbook-viewport .flipbook{
    width:1400px;
    height:900px;
    margin-left:auto;
    margin-right:auto;
    top:-200px;
}

.flipbook-viewport .flipbook.changed::before{
    content: " ";
    position: absolute;
    left: 15px;
    right: 15px;
    top: 30px;
    bottom: 10px;
    border-radius: 15px;
}

.flipbook-viewport .page{
    width:680px;
    height:890px;
    background-color:white;
    background-repeat:no-repeat;
    background-size:100% 100%;
    overflow: auto;
}

.flipbook-viewport .shadow::before{
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    border: 15px solid transparent;
    border-top-width: 40px;
    left: 0;
    border-right-color: #BDA674;
}

.flipbook-viewport .shadow::after{
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    border: 15px solid transparent;
    border-top-width: 40px;
    right: 0;
    border-left-color: #BDA674;
}

/****************************************************

			Tabs 
			
*****************************************************/

/* Small tabs */

.flipbook .tabs{
    width:1490px;
    height:22px;
    top:-22px;
    position:relative;
    z-index:2;
}

.flipbook .tabs > div{
    width:600px;
    height:22px;
    float:left;
}

.flipbook .tabs .left{
    text-align: left;
    margin-left: 30px;
    float: left;
}

.flipbook .tabs .leftupped{
    text-align: left;
    margin-left: 30px;
    margin-top: -44px;
    float: left;
}

.flipbook .tabs .right{
    text-align: right;
    margin-right: 30px;
    float: right;
}

.flipbook .tabs .rightupped{
    text-align: right;
    margin-right: 30px;
    margin-top: -44px;
    float: right;
}

.flipbook .tabs span, .flipbook .tabs a{
    border-style: solid;
    border-width: 5px 20px 5px 20px;
    border-image: url("../images/tabs/tab-off-06fe2e12321a82b6f4071500a719b759.png") 5 20 5 20 fill;
    display:inline-block;
    font:bold 11px arial;
    text-shadow:1px 1px 0 #ddd;
    line-height:12px;
    text-decoration:none;
    color: black;
}

.flipbook .tabs .on,
.flipbook .tabs .on:hover{
    border-image: url("../images/tabs/tab-on-8c63d0cf73d22ffbc09f338560db9545.png") 5 20 5 20 fill;
    cursor:default;
}

.flipbook .tabs span:hover{
    text-decoration: none;
    cursor:pointer;
    border-image: url("../images/tabs/tab-hover-742b3500554452e96430ef1d29f0a77a.png") 5 20 5 20 fill;

}

/* Big tabs */

.flipbook .bigtabs{
    width:1490px;
    height:40px;
    top:-72px;
    position:relative;
    z-index:1;
}

.flipbook .bigtabs > div{
    width:250px;
}

.flipbook .bigtabs .bigleft{
    text-align:left;
    margin-left:40px;
    float:left;
}


.flipbook .bigtabs .bigright{
    text-align:right;
    margin-right: 40px;
    float:right;
    position: relative;
    left: 250px;
    top : 80px;
}

.flipbook .bigtabs span, .flipbook .bigtabs a{
    color:black;
    border-style: solid;
    border-width: thick;
    border-image: url("../images/tabs/bigtab-off-e40353685643d042a93b92ae3bf03b2f.png") 20 60 35 60 fill;
    display: block;
    font:bold 16px arial;
    text-shadow:1px 1px 0 #ddd;
    color:#333;
    line-height:12px;
    text-decoration:none;
    vertical-align:top;
    margin-top: 20px;
    padding: 10px;
}

.flipbook .bigtabs .on,
.flipbook .bigtabs .on:hover{
    border-image: url("../images/tabs/bigtab-on-985d0757a52fb56e004ce90521a3d780.png") 20 60 35 60 fill;
    cursor:default;
}

.flipbook .bigtabs span:hover{
    color:black;
    text-decoration: none;
    cursor:pointer;
    border-image: url("../images/tabs/bigtab-hover-18f20e0f0233af6f8d44dc803442a752.png") 20 60 35 60 fill;

}

/* Page précédente/suivante : navigation séquentielle fiche -> grimoire -> ... (voir
   PageNavigator et le contrôleur Stimulus page_turn_controller.js). Un coin de page (corner
   fold, effet CSS pur) apparaît au survol en bas de chaque page ; le clic joue une courte
   animation de tournage de page avant de suivre le lien.
   Les pages elles-mêmes (.page-wrapper) sont en position absolute/z-index:3 et couvrent toute
   la hauteur du .flipbook : ces éléments doivent donc être eux aussi en position absolute, avec
   un z-index supérieur, pour flotter par-dessus plutôt que d'être masqués dessous. */

.flipbook{
    perspective: 2500px;
}

.flipbook .page-corner{
    position: absolute;
    bottom: 0;
    width: 80px;
    height: 80px;
    z-index: 10;
    cursor: pointer;
    display: block;
    /* Le pli (::after) est coupé en diagonale par corner-shape:bevel : la zone découpée, dans
       le vrai coin de la page, reste transparente et laisse voir le contenu réel en dessous
       au survol. Ce fond plein (carré complet, pas de découpe) couvre toute la zone du coin
       dès le survol pour ne jamais rien laisser transparaître, quel que soit le contenu de la
       page à cet endroit. */
    background: transparent;
    transition: background .2s ease-out;
}
.flipbook .page-corner:hover{
    background: #EBCF8F;
}

/* Coin bas-droit (page suivante) : ancrée à 30px du bord droit, comme les vraies pages. */
.flipbook .page-corner--next{
    right: 30px;
}

/* Coin bas-gauche (page précédente), symétrique. */
.flipbook .page-corner--prev{
    left: 30px;
}

.flipbook .page-corner::before,
.flipbook .page-corner::after{
    content: "";
    position: absolute;
    inset: 0;
    /* Au repos, le pli est réduit à rien exactement sur le coin réel de la page (scale(0),
       origine sur ce coin) : au survol il grandit dans les deux axes à la fois depuis ce point,
       donc en diagonale vers le coin opposé - pas seulement de haut en bas (scaleY seul ne
       grandirait que verticalement depuis l'origine). */
    transform: scale(0);
    transition: transform .3s ease-out, border-radius .25s ease-out, opacity .25s ease-out, background .25s ease-out;
}

/* Le pli lui-même : un carré dont on coupe un coin au ras (border-radius = 100% de la boîte)
   avec corner-shape:bevel plutôt qu'un arrondi, ce qui donne une coupe droite en diagonale -
   exactement la forme d'un coin de page corné - sans le bricolage à base de bordures triangulaires
   utilisé précédemment. On coupe le coin côté bord réel de la page (bas-droit pour "next",
   bas-gauche pour "prev") : l'angle droit qui reste se retrouve donc du côté opposé, vers
   l'intérieur de la page - comme la pointe d'un coin qu'on commence à décoller/retourner,
   plutôt qu'un coin simplement tranché sur place. transform-origin est calé sur ce même coin
   réel, pour que l'étirement au survol parte bien de là. */
.flipbook .page-corner--next::before,
.flipbook .page-corner--next::after{
    border-bottom-right-radius: 80px;
    corner-bottom-right-shape: bevel;
    transform-origin: bottom right;
}
.flipbook .page-corner--prev::before,
.flipbook .page-corner--prev::after{
    border-bottom-left-radius: 80px;
    corner-bottom-left-shape: bevel;
    transform-origin: bottom left;
}

/* ombre portée par le pli sur la page, révélée au survol */
.flipbook .page-corner::before{
    background: rgba(89, 58, 26, .55);
    filter: blur(4px);
    opacity: 0;
}
.flipbook .page-corner:hover::before{
    opacity: 1;
    transform: scale(1.15);
}

/* le papier replié lui-même : mêmes teintes parchemin que les vraies pages (.even/.odd
   ci-dessus), pour rester cohérent avec le reste du rendu au lieu d'une couleur inventée. */
.flipbook .page-corner::after{
    background: #EBCF8F;
}
.flipbook .page-corner:hover::after{
    transform: scale(1);
}
.flipbook .page-corner--next:hover::after,
.flipbook .page-corner--prev:hover::after{
    background: #F0DFB3;
}

/* Variante coins SUPÉRIEURs (mêmes actions de tournage que les coins bas) : on ancre en haut et
   on retourne verticalement le pli (coin biseauté et transform-origin passés du bas au haut). */
.flipbook .page-corner--top{
    top: 0;
    bottom: auto;
}
.flipbook .page-corner--next.page-corner--top::before,
.flipbook .page-corner--next.page-corner--top::after{
    border-bottom-right-radius: 0;
    border-top-right-radius: 80px;
    corner-bottom-right-shape: round;
    corner-top-right-shape: bevel;
    transform-origin: top right;
}
.flipbook .page-corner--prev.page-corner--top::before,
.flipbook .page-corner--prev.page-corner--top::after{
    border-bottom-left-radius: 0;
    border-top-left-radius: 80px;
    corner-bottom-left-shape: round;
    corner-top-left-shape: bevel;
    transform-origin: top left;
}

/* Overlay de tournage joué au clic (voir page_turn_controller.js), retiré de la page après
   l'animation puisqu'on navigue vers l'écran suivant/précédent à la fin. Dégradé et arrondi
   côté reliure repris de .even/.odd (les vraies pages) plutôt qu'une teinte inventée. */

.flipbook .page-flip-overlay{
    position: absolute;
    top: 0;
    width: 720px;
    height: 800px;
    box-shadow: 0 0 40px rgba(0, 0, 0, .45);
    z-index: 20;
    pointer-events: none;
    backface-visibility: hidden;
}

/* suivante = page de droite (comme .odd) : reliure à gauche, dégradé assombri de ce côté */
.flipbook .page-flip-overlay--next{
    right: 30px;
    background-image: linear-gradient(to left, #EBCF8F, #F0DFB3 90%, #a08050);
    border-bottom-left-radius: 90px 20px;
    border-top-left-radius: 90px 20px;
    transform-origin: left center;
}

/* précédente = page de gauche (comme .even) : reliure à droite, dégradé assombri de ce côté */
.flipbook .page-flip-overlay--prev{
    left: 30px;
    background-image: linear-gradient(to right, #EBCF8F, #F0DFB3 90%, #a08050);
    border-bottom-right-radius: 90px 20px;
    border-top-right-radius: 90px 20px;
    transform-origin: right center;
}

/* L'animation est coupée en deux moitiés indépendantes plutôt qu'une seule traversant la
   navigation Turbo : --leave joue sur la page de départ (voir page_turn_controller.js), puis
   --enter rejoue la suite sur la page fraîchement chargée. Un même élément animé qu'on
   déplacerait vers le nouveau <body> pendant qu'il tourne encore verrait son animation
   redémarrer au moment de sa reconnexion au document - c'est ce qui causait le double
   déclenchement observé. */
.flipbook .page-flip-overlay--next.page-flip-overlay--leave{ animation: page-flip-next-leave .35s ease-in forwards; }
.flipbook .page-flip-overlay--next.page-flip-overlay--enter{ animation: page-flip-next-enter .35s ease-out forwards; }
.flipbook .page-flip-overlay--prev.page-flip-overlay--leave{ animation: page-flip-prev-leave .35s ease-in forwards; }
.flipbook .page-flip-overlay--prev.page-flip-overlay--enter{ animation: page-flip-prev-enter .35s ease-out backwards; }

/* ombre que la page en train de se soulever projette sur la page d'en face, pour donner de
   l'épaisseur au mouvement (voir page_turn_controller.js) */
.flipbook .page-flip-shadow{
    position: absolute;
    top: 0;
    width: 220px;
    height: 800px;
    z-index: 19;
    pointer-events: none;
    opacity: 0;
    animation: page-flip-shadow .35s ease-in-out forwards;
}
.flipbook .page-flip-shadow--next{
    left: 530px;
    background-image: linear-gradient(to right, transparent, rgba(89, 58, 26, .45));
}
.flipbook .page-flip-shadow--prev{
    left: 750px;
    background-image: linear-gradient(to left, transparent, rgba(89, 58, 26, .45));
}

@keyframes page-flip-next-leave{
    0%   { transform: rotateY(0deg); box-shadow: -8px 0 25px rgba(0, 0, 0, .3); }
    100% { transform: rotateY(-100deg); box-shadow: 35px 0 60px rgba(0, 0, 0, .55); }
}

@keyframes page-flip-next-enter{
    /* On ne continue pas la grande rotation de "leave" (0 -> -100) au-delà de -90 : au-delà,
       backface-visibility:hidden masque tout, donc cette phase serait invisible de bout en
       bout. À la place, un petit mouvement de pose, bien plus court que celui de "leave" donc
       qui ne se lit pas comme un retour en arrière, tout en restant visible. */
    0%   { transform: rotateY(-25deg); box-shadow: 20px 0 35px rgba(0, 0, 0, .35); }
    100% { transform: rotateY(0deg); box-shadow: 0 0 10px rgba(0, 0, 0, .08); }
}

@keyframes page-flip-prev-leave{
    0%   { transform: rotateY(0deg); box-shadow: 8px 0 25px rgba(0, 0, 0, .3); }
    100% { transform: rotateY(100deg); box-shadow: -35px 0 60px rgba(0, 0, 0, .55); }
}

@keyframes page-flip-prev-enter{
    0%   { transform: rotateY(25deg); box-shadow: -20px 0 35px rgba(0, 0, 0, .35); }
    100% { transform: rotateY(0deg); box-shadow: 0 0 10px rgba(0, 0, 0, .08); }
}

@keyframes page-flip-shadow{
    0%   { opacity: 0; }
    35%  { opacity: 1; }
    65%  { opacity: 1; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
    .flipbook .page-flip-overlay--next,
    .flipbook .page-flip-overlay--prev,
    .flipbook .page-flip-shadow{
        animation: none;
    }
}

/*********************************************************************

		Superadministration

*********************************************************************/

#nouvelavantage
{
    margin-left: auto;
    margin-right: auto;
}

#nouvelavantage th
{
    vertical-align: middle;
}

#nouveaumodule
{
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}

#nouveaumodule th
{
    vertical-align: middle;
}


#nouveausort
{
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

#nouveausort th
{
    vertical-align: middle;
}

#biglayout
{
    margin-bottom : 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 400px;
    width: 300px;
}

.smalllayout
{
    margin: 5px;
    height: 80px;
    width: 60px;
}

.smalllayout:hover
{
    border: 3px solid purple;
    cursor: pointer;
    height: 74px;
    width: 54px;
}

.smalllayouton
{
    margin: 5px;
    height: 74px;
    width: 54px;
    border: 3px solid green;
}

input[disabled]
{
    background-color: #555555;
    color: white;
}

input[type=file]
{
    width: 180px;
}

textarea[disabled]
{
    background-color: #555555;
    color: white;
}

#nouvelarticle
{
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

#nouvelarticle th
{
    vertical-align: middle;
}

/*********************************************************************

		Accueil

*********************************************************************/
h1{
    padding-top:30px;
    margin-bottom:30px;
    font-size: 38px;
    color: #CCCCCC;
    font-family: Georgia, serif;
    text-align: center;
    vertical-align: center;
    font-weight: bold;
    text-shadow:2px 2px 2px Black;
}

h2{
    padding-top : 20px;
    margin-bottom : 20px;
    font-size: 24px;
    font-family: Georgia, serif;
    text-align: center;
    vertical-align: center;
    font-weight: bold;
    text-shadow:1px 1px 0 GoldenRod;
}

h3{
    padding-top : 200px;
    margin-bottom : 20px;
    font-size: 24px;
    font-family: Georgia, serif;
    text-align: center;
    vertical-align: center;
    font-weight: bold;
    text-shadow:1px 1px 0 GoldenRod;
}

input[type=button]
{
    border-radius: 16px;
    border: solid black 1px;
    background-color: #333333;
    color: #F59B42;
    padding: 3px;
    margin: 3px;
    font-weight: bold;
    width: 200px;
}


input[type=submit]
{
    border-radius: 16px;
    border: solid black 1px;
    background-color: #333333;
    color: #F59B42;
    padding: 3px;
    margin: 3px;
    font-weight: bold;
    width: 200px;
    cursor: pointer;
}

#connexion
{
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 100px;
}

#inscription
{
    margin-left: auto;
    margin-right: auto;
}

.err
{
    color: red;
    margin-left: 140px;
    font-weight: bold;
    text-align: center;
    font-size: 21px;
    text-shadow:2px 2px 2px Black;
}

.err2
{
    padding-top: 10px;
    color: red;
    margin-left: 100px;
    font-weight: bold;
    font-size: 21px;
}

.persos{
    margin-left: auto;
    margin-right: auto;
    width : 620px;

}
.scrolltable{
    overflow-y: scroll;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-top : 40px;
    margin-bottom: 30px;
    width : 660px;
}

.invitations{
    margin-left: auto;
    margin-right: auto;
    margin-top : 30px;
    margin-bottom: 30px;
    width : 660px;
}

.nouveaugroupe{
    margin-left: auto;
    margin-right: auto;
    margin-top : 30px;
    width : 660px;
}

.inviter{
    margin-left: auto;
    margin-right: auto;
    margin-top : 30px;
    width : 660px;
}

.deconnexion{
    margin-left: auto;
    margin-right: auto;
    margin-top : 20px;
    width : 660px;
}

/*********************************************************************

		Fiche perso
	
**********************************************************************/

th, td {
    border: solid GoldenRod 2px;
    padding: 3px;
    font-size: 14px;
    font-family: Georgia, serif;
    text-align: center;
}

th{
    font-size: 15px;
    font-weight: bold;
    text-shadow: 1px 1px 0 GoldenRod;
}

/* Résumé */

.avatar{
    float: left;
    margin-left : 40px;
    margin-top : 30px;
    height: 200px;
    width : 150px;
    box-shadow:0 0 10px 5px GoldenRod;

}

.avatarMJ{
    float: left;
    margin-left : 40px;
    margin-top : 30px;
    height: 180px;
    width : 150px;
    box-shadow:0 0 10px 5px GoldenRod;

}

.modifiedavatar{
    float: left;
    margin-left : 40px;
    margin-top : 30px;
    height: 220px;
    width : 150px;
    box-shadow:0 0 10px 5px GoldenRod;
}

.avatar img{
    width: 150px;
    height: 180px;
}

.avatarMJ img{
    width: 150px;
    height: 180px;
}

.modifiedavatar img{
    width: 150px;
    height: 180px;
}

.avatar label{
    width: 148px;
}

.id {
    float: right;
    margin-top: 30px;
    margin-right: 50px;
    margin-bottom : 20px;
    width : 400px;
}

.id td {
    font-size : 18px;
    font-weight: bold;
    text-shadow:1px 1px 0 GoldenRod;
}

.carac{
    clear: both;
    float: left;
    margin-left : 30px;
    margin-top : 30px;
    width : 260px;
}

.carac td{text-align:left;}

.combat {
    margin-top : 0;
    float: right;
    margin-right: 50px;
    width : 360px;
}

.combat td{text-align:left;}

.pa{
    clear: both;
    float: left;
    margin-top : 30px;
    margin-left: 30px;
    width : 260px;
    margin-bottom: 30px;
}

.gv{
    margin-top: 10px;
    float: right;
    width : 360px;
    margin-right: 50px;
}


.pf{
    margin-top : 20px;
    float: right;
    width : 360px;
    margin-right: 50px;
    margin-bottom: 20px;
}

/* Bonus/malus temporaires (voir assets/controllers/bonus_malus_controller.js) */
.bm-reset-bar{
    clear: both;
    text-align: right;
    margin: 4px 50px 0 30px;
}

.bm-reset{
    display: inline-block;
    font: bold 10px arial;
    border: solid black 1px;
    background-color: #333333;
    color: #F59B42;
    padding: 2px 8px;
    cursor: pointer;
}

.bm-controls{
    display: inline-block;
    margin-left: 4px;
    white-space: nowrap;
}

.bm-btn{
    display: inline-block;
    width: 13px;
    height: 13px;
    line-height: 11px;
    text-align: center;
    font: bold 11px/11px arial;
    border: solid black 1px;
    border-radius: 3px;
    background-color: #eee;
    color: #333;
    cursor: pointer;
    padding: 0;
    vertical-align: middle;
}

.bm-btn:hover{
    background-color: #F59B42;
}

.bm-badge{
    display: inline-block;
    min-width: 16px;
    text-align: center;
    font: bold 10px arial;
    vertical-align: middle;
}

.bm-badge.bm-positive, .bm-value.bm-positive{ color: green; }
.bm-badge.bm-negative, .bm-value.bm-negative{ color: red; }

/* Écran de combat : les colonnes d'armes sont étroites -> les boutons -/+ passent sous la valeur
   (voir assets/controllers/arme_bonus_malus_controller.js). */
.armes .bm-controls{
    display: block;
    margin-left: 0;
    margin-top: 2px;
}

.modif{
    margin-top: 10px;
    clear: both;
    margin-left: auto;
    margin-right: auto;
}

.modif td{
    border: none;
}

.modifbutton, .btn-save, .btn-cancel{
    display: inline-block;
    text-align: center;
    text-decoration: none;
    border-radius: 16px;
    border: solid black 1px;
    background-color: #333333;
    color: #F59B42;
    padding: 3px;
    margin: 3px;
    font-weight: bold;
    width: 200px;
    box-sizing: border-box;
    cursor: pointer;
}

/* Boutons "Mode Modification" : libellé court, donc légèrement plus petits que les boutons
   Sauvegarder/Annuler, qui gardent la largeur de référence de .modifbutton. */
.modifbutton-mode{
    width: 170px;
    font-size: 0.9em;
}

.savestate{
    float: left;
    margin-left: 30px;
}

.buttonm{
    position: relative;
}

.buttonm:hover{
    cursor: pointer;
    bottom: -2px;
}

.redX{
    font-weight: bold;
    color: red;
}

.redX:hover{
    cursor: pointer;
}

.modules{
    margin-left: auto;
    margin-right: auto;
    margin-top : 30px;
    width : 660px;
}

.modules td{text-align:left;}

.avantages{
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    width : 660px;
}

.avantages td{text-align:left;}

.desavantages{
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    width : 660px;
}

.desavantages td{text-align:left;}

/* Compétences */
.comp1{
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    width : 660px;
}

.comp2{
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    width : 660px;
}

.compm{
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    width : 660px;
}

.coutcomp{
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 660px;
}

.coutcomp td{
    width: 150px;
}

/* Champs de edit/competences/{left,right}.html.twig : contrairement aux caractéristiques/combat en
   mode édition (.carac input, .combat input - pointer-events:none, modifiables uniquement via les
   boutons +/-), le "Base" d'une compétence se tape directement au clavier (plage bien plus large),
   d'où une règle séparée qui laisse le pointeur actif. */
.comp1 input[type="number"], .comp1 input[type="text"]{
    border: none;
    border-bottom: 1px dotted #999;
    background: none;
    font-size: 14px;
    font-family: inherit;
    color: inherit;
    padding: 0;
    margin: 0;
    outline: none;
    text-align: center;
}

.comp1 input[type="number"]{
    width: 50px;
}

.comp1 input[type="text"]{
    width: 95%;
}

.xp-remaining{
    margin: 10px auto;
    width: 660px;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    padding: 4px 0;
    border: solid GoldenRod 1px;
    border-radius: 6px;
    background: rgba(255,255,255,0.35);
}


/* Armes, arumure et artefacts */
.armes{
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    width : 660px;
}

.armes  th,
.armes  td {
    vertical-align: center;
}

.armures{
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    width : 660px;
}

.armures  th,
.armures  td {
    vertical-align: center;
}

.artefacts{
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    width : 660px;
}

.artefacts td{text-align:left;}

/* Formulaire d'édition : nom + description côte à côte sur une même ligne, plutôt que le nom en
   en-tête au-dessus de la description comme en lecture (combat/artefact.html.twig). */
.artefacts-edit th:nth-child(1),
.artefacts-edit td:nth-child(1){
    width: 160px;
}

.artefacts-edit th:nth-child(3),
.artefacts-edit td:nth-child(3){
    width: 1%;
    white-space: nowrap;
}

.artefacts-edit input[type="text"],
.artefacts-edit textarea{
    width: 100%;
    box-sizing: border-box;
}

.rappelscombat{
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    width : 660px;
}

/* Etat */
.pv{
    float: left;
    margin-left: 30px;
    margin-top: 10px;
    width : 220px;
}


.stenos{
    float: right;
    margin-right: 20px;
    margin-top: 10px;
    width : 230px;
}


.mana{
    margin-top: 10px;
    width : 220px;
}

.d10{
    clear:both;
    margin-top : 40px;
    width : 300px;
    margin-left: auto;
    margin-right: auto;
}

#rollresult{
    font-size: 28px;
}

#rollresult19{
    font-size: 28px;
    background-image: url("../images/d10-ad1e54452e2926ee13099ef02aefd392.png");
    background-color: transparent;
    padding-left: 19px;
    padding-right: 21px;
    padding-top: 12px;
    padding-bottom: 19px;
}

#rollresult10{
    font-size: 22px;
    background-image: url("../images/d10-ad1e54452e2926ee13099ef02aefd392.png");
    background-color: transparent;
    padding-left: 15px;
    padding-right: 21px;
    padding-top: 18px;
    padding-bottom: 19px;
}

/* Inventaire et descriptions */
.inventaire{
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    width : 660px;
}

.inventaire td{text-align:left;}

.richesses{
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    width : 660px;
}

.description{
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    width : 660px;
}

.description td{text-align:left;}

.personnalite{
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    width : 660px;
}

.personnalite td{text-align:left;}

.recapxp{
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    width : 660px;
}

.notes1{
    clear: both;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    width : 660px;
}

.notes1 td{text-align:left;}

#not1 div{
    max-height : 550px;
    overflow: scroll;
}

.notes2{
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    width : 660px;
}

.notes2 td{text-align:left;}

#not2 div{
    max-height : 740px;
    overflow: scroll;
}

/**********************************************************************

		Grimoire
		
**********************************************************************/

/* Résumé */

.idmagie{
    float: left;
    margin-left : 40px;
    margin-top : 30px;
    width : 300px;
}

.magies{
    float: right;
    margin-right: 50px;
    margin-top : 30px;
    width : 300px;
}

.liens {
    clear: both;
    float: left;
    margin-left : 40px;
    margin-top : 10px;
    width : 300px;
    margin-bottom: 10px;
}

.stats {
    margin-top : 10px;
    float: right;
    margin-right: 50px;
    width : 300px;
    margin-bottom: 10px;
}

.spemagie {
    clear: both;
    float: left;
    margin-left : 40px;
    width : 300px;
    margin-top: -15px;
    margin-bottom: 5px;
}

/* Sorts SA */
.sortSA  th,
.sortSA  td {
    border: solid #1E90FF 2px;
    padding : 3px;
    font-size : 14px;
    font-family: Georgia, serif;
    text-align: center;
    vertical-align: center;
    background-color: #E0FFFF;

}
.sortSA th{
    font-size: 14px;
    font-weight: bold;
    text-shadow: none;
    color: #1E90FF;
}

.sortSA{
    margin-left: auto;
    margin-right: auto;
    margin-top: 8px;
    width : 660px;
}

.sortSA .emph{
    color: #1E90FF;
    font-weight: bold;
}

/* Sorts appris */
.sortappris  th,
.sortappris  td {
    border: solid #009010 2px;
    padding : 3px;
    font-size : 14px;
    font-family: Georgia, serif;
    text-align: center;
    vertical-align: center;
    background-color: LightGreen;

}
.sortappris th{
    font-size: 15px;
    font-weight: bold;
    text-shadow: none;
    color: #009010;
}

.sortappris{
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    width : 660px;
}

.sortappris .emph{
    color: #009010;
    font-weight: bold;
}

/* Sorts en cours d'apprentissage */
.sortencours  th,
.sortencours  td {
    border: solid GoldenRod 2px;
    padding : 3px;
    font-size : 14px;
    font-family: Georgia, serif;
    text-align: center;
    vertical-align: center;
    background-color: #FFE788;
}
.sortencours th{
    font-size: 15px;
    font-weight: bold;
    text-shadow:none;
    color: GoldenRod;
}

.sortencours{
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    width : 660px;
}

.sortencours .emph{
    color: GoldenRod;
    font-weight: bold;
}

/* Sorts non appris */
.sortnonappris  th,
.sortnonappris  td {
    border: solid #A3A3A3 2px;
    padding : 3px;
    font-size : 14px;
    font-family: Georgia, serif;
    text-align: center;
    vertical-align: center;
    background-color: #F8F8F8;
}
.sortnonappris th{
    font-size: 15px;
    font-weight: bold;
    text-shadow:none;
    color: #A3A3A3
}

.sortnonappris{
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    width : 660px;
}

.sortnonappris .emph{
    color: #A3A3A3;
    font-weight: bold;
}

/* Résultat d'une formule dynamique dans le texte d'un sort (voir AppExtension::renderFormules) */
.sort-formule{
    color: #b3005c;
    font-weight: bold;
    font-size: 1.05em;
}
.sort-formule-src{
    color: #777;
    font-style: italic;
    font-size: 0.9em;
}

/* Sorts non achetés */
.sortnonachete  th,
.sortnonachete  td {
    border: solid #404040 2px;
    padding : 3px;
    font-size : 14px;
    font-family: Georgia, serif;
    text-align: center;
    vertical-align: center;
    background-color: #909090;
}
.sortnonachete th{
    font-size: 15px;
    font-weight: bold;
    text-shadow: none;
    color: #404040;
}

.sortnonachete{
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    width : 660px;
}



/**********************************************************************

		Manuels
		
***********************************************************************/
p{
    font-size: 16px;
    font-family: Georgia, serif;
    line-height: 1.4;
    padding-left: 5px;
    padding-right: 5px;
}

.imgmanuel{
    margin-left: auto;
    margin-right: auto;
}

.lleft{
    width: 360px;
    float: left;
}

.lright{
    width: 360px;
    float: right;
}

.lvbig{
    height: 700px;
    line-height:700px;
}

.lbig{
    height: 300px;
    line-height:300px;
}

.lbigl{
    height: 700px;
    line-height:700px;
}

.lbigr{
    height: 700px;
    line-height:700px;
}

.lsmallru{
    height: 300px;
    line-height:300px;
}

.lsmalllu{
    height: 300px;
    line-height:300px;
}

.lsmallrb{
    height: 300px;
    line-height:300px;
}

.lsmalllb{
    height: 300px;
    line-height:300px;
}

.lbottom{
    clear: both;
}

.lcenter{
    clear: both;
}

.ltop{
    clear: both;
}

.lvbigimg{
    height: 700px;
    margin-left: auto;
    margin-right: auto;
}

.lvbigimg td{
    border: 0 solid black;
}

.lbigimg{
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}

.lbigimg td{
    border: 0 solid black;
}

.lbiglimg{
    height: 700px;
    margin-left: auto;
    margin-right: auto;
}

.lbiglimg td{
    border: 0 solid black;
}

.lbigrimg{
    height: 700px;
    margin-left: auto;
    margin-right: auto;
}

.lbigrimg td{
    border: 0 solid black;
}

.lsmallruimg{
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}

.lsmallruimg td{
    border: 0 solid black;
}

.lsmallluimg{
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}

.lsmallluimg td{
    border: 0 solid black;
}

.lsmallrbimg{
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}

.lsmallrbimg td{
    border: 0 solid black;
}

.lsmalllbimg{
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}

.lsmalllbimg td{
    border: 0 solid black;
}

/**********************************************************************

		Autres

***********************************************************************/
.titles{
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    width: 660px;
}

.titles th{
    font-size: 24px;
}

.subtitles{
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    width: 660px;
}

.subtitles th{
    font-size: 24px;
}

.label-file {
    display: inline-block;
    text-align:center;
    cursor: pointer;
    border: solid black 1px;
    background-color: #333333;
    color: #F59B42;
    font-weight: bold;
    width: 148px;
    margin-left: auto;
    margin-right: auto;
}

.modifiedavatar input[type=button]{
    cursor: pointer;
    border-radius: 0;
    padding: 0;
    border: solid black 1px;
    background-color: #333333;
    color: #F59B42;
    font-weight: bold;
    width: 150px;
    margin: 0 auto;
}

input[type=button]:hover
{
    cursor: pointer;
}

.infos
{
    display: none;
}

.btn-primary{
    cursor: pointer;
    text-decoration: none;
    margin: 10px auto;
    border-radius: 8px;
    color: #F1CCBF;
    text-shadow: 0 1px 3px #000;
    text-align: center;
    font-family: Arial, serif;
    padding: 10px;
    background: radial-gradient(circle, #351B15, #351B15);
    border-top: 4px ridge #FB873A;
    border-left: 4px groove #FB873A;
    border-right: 4px ridge #FB873A;
    border-bottom: 4px groove #FB873A;
    box-shadow: inset 0 0 5px 3px rgba(1,1,1,0.3);
}

.btn-primary:hover{
    background: radial-gradient(circle, #B55C48, #351B15);
    box-shadow: 0 0 5px 5px rgba(255,255,255,0.2)
}

.btn-secondary{
    text-decoration: none;
    border-radius: 16px;
    border: solid black 1px;
    background-color: #333333;
    color: #F59B42;
    padding: 3px;
    margin: 3px;
    font-weight: bold;
    width: 200px;
    appearance: auto;
    cursor: pointer;
    box-sizing: border-box;
}

button.btn-secondary.btn-reorder{
    width: 40px;
    margin: 1px;
    padding: 3px 0;
}

.errors{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 25px;
}

.errors .error-msg{
    color: red;
    text-shadow: -1px -1px 1px rgb(255 255 255 / 24%), 1px 1px 1px rgb(0 0 0 / 86%);
}

.error-message{
    display: block;
    text-align: center;
    color: red;
    text-shadow: -1px -1px 1px rgb(255 255 255 / 24%), 1px 1px 1px rgb(0 0 0 / 68%);
}

.carac input, .combat input, .pa input, .pf input, #module_total{
    border: none;
    background: none;
    font-size: 16px;
    font-family: inherit;
    color: inherit;
    padding: 0;
    margin: 0;
    outline: none;
    pointer-events: none;
    width: 75px;
    text-align: center;
}

.carac td:has(input), .combat td:has(input), .pa td:has(input), .pf td:has(input){
    border: none;
    display: flex;
    justify-content: center;
}

.carac tr:has(input), .combat tr:has(input), .pa tr:has(input), .pf tr:has(input){
    border: solid GoldenRod 2px;
}

.reorder{
    width: 100px;
    /* garde les deux flèches (Monter / Descendre) côte à côte sur une seule ligne */
    white-space: nowrap;
}

/* Toasts (messages temporaires succès/erreur, voir toast_controller.js) */
#toast-container{
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.toast{
    background: white;
    color: #222;
    padding: 10px 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    border-left: 5px solid;
    font-weight: bold;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast--success{
    border-left-color: #2e7d32;
}

.toast--error{
    border-left-color: #c62828;
}

.toast--leaving{
    opacity: 0;
    transform: translateY(-10px);
}

/* Filtre des sorts d'une école de magie (sort_filtre_controller.js, grimoire/magie.html.twig).
   L'en-tête reste collé en haut de la colonne de sorts, qui défile (jusqu'à 133 sorts). */
.sort-filtre-entete{
    position: sticky;
    top: 0;
    z-index: 2;
    /* fond opaque obligatoire : les fiches de sorts défilent dessous (.page est blanche) */
    background-color: transparent;
    border-bottom: solid #333333 1px;
    padding: 4px 6px 6px;
    margin: 6px 30px;
}

.sort-filtre-ligne{
    display: flex;
    align-items: center;
    gap: 6px;
}

.sort-filtre-ligne input[type="search"]{
    flex: 1 1 auto;
    min-width: 0;
    font-family: Georgia, serif;
    font-size: 14px;
    padding: 3px;
}

.sort-filtre-ligne .btn-secondary{
    width: auto;
    flex: 0 0 auto;
    padding: 3px 10px;
}

.sort-filtre-compteur{
    font-family: Georgia, serif;
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
}

.sort-filtre-etats{
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    padding-top: 4px;
    font-family: Georgia, serif;
    font-size: 13px;
}

.sort-filtre-etats label{
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
}

.sort-filtre-vide{
    text-align: center;
    padding: 20px;
    font-family: Georgia, serif;
}

/* Le contrôleur masque les fiches avec l'attribut `hidden` : on le rend insensible à une
   éventuelle règle `display` posée plus tard sur .sortappris/.sortencours/.sortnonappris. */
.sort-filtre [hidden]{
    display: none !important;
}