table1 {
		margin-bottom: 1em;
		width: 100%;
	}

		table1.default tbody tr:nth-child(2n+2) {
			background: #f4f4f4;
		}

		table1.default td {
			padding: 0.5em 1em 0.5em 1em;
		}

		table1.default th {
			text-align: left;
			font-weight: 700;
			padding: 0.75em 1em 0.75em 1em;
		}

		table1.default thead {
			border-bottom: solid 1px #ddd;
		}

		table1.default tfoot {
			border-top: solid 1px #ddd;
			background: #eee;
		}

		.tg  {border-collapse:collapse;border-spacing:0;border-color:#bbb;}
		.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:3px;overflow:hidden;word-break:normal;border-color:#bbb;color:#000000;background-color:none;}
		.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:3px;overflow:hidden;word-break:normal;border-color:#bbb;color:#000000;background-color:none;}
		.tg .tg-baqh{text-align:center;vertical-align:middle}
		.tg .tg-baqr{text-align:left;vertical-align:middle}
		.tg .tg-13pz{font-size:16px;text-align:center;vertical-align:middle;color:#000000;}

span.article {
    font-size:12px;
}

span.retrait {
    text-align:left;
}

.polpen a {
    color: #0a22f7;
}

.polpen a:hover {
	color: #aa20d4;
	font-size: 14px;
	font-weight : bold;
	text-decoration: none;
    line-height: 100%;
}

	ul.a {
		margin-left : 10px;
	}

	ul.b {
		margin-left : 40px;
	}	
	
	ul.c {
		padding-top: 10px;
		margin-left : 40px;
	}
	
	ul.d {
		margin-left : 80px;
	}

	ul.e {
		margin-left : 10px;
	}

	ul.e li {
		font-size: 14px;
		padding-left: 50px;
	}


.polpen h3,h4,h5 {
    letter-spacing: 0;
    font-weight: bold;
    position: relative;
    line-height: 120% !important;
    margin: 0
}

.polpen h3 {
    padding: 15px 0 10px 0;
    color: #990099;
}

.polpen h4 {
    letter-spacing: 0;
    padding: 0 0 10px 100px;
    color: #009900;
}

.polpen h5 {
    padding: 25px 0 10px 140px;
    color: #3333CC;
}

.carmin {
	color :#993333;
	font-size: 20px;
    font-weight: bold;
}

.important {
	color: #FF0033;
	text-align: center;
	font-size: 20px;
}

.panel a {
	color : blue;
}

/* === Référentiel des sets ================================= */

/* ============================================================
   PREVIEW 6
   ------------------------------------------------------------
   Base : référentiel des sets
   Référentiel : ../json/set.json
   ============================================================ */

#sets-app .toolbar{
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 50px !important;
    z-index: 1030;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    background: #f4f5f7;
    border: 1px solid #d7dbe0;
    border-radius: 6px;
    margin-bottom: 12px;
}

#sets-app input, #sets-app select{
    padding: 8px 10px;
    border: 1px solid #d7dbe0;
    border-radius: 5px;
    background: #fff;
    font-size: 14px;
}

#sets-app #search{
    flex: 1;
    min-width: 230px;
}

#sets-app .reset-filters{
    padding: 8px 10px;
    border: 1px solid #b7c0ca;
    border-radius: 5px;
    background: #fff;
    color: #303843;
    font-size: 14px;
    cursor: pointer;
}

#sets-app .reset-filters:hover{
    background: #eceff2;
}

#sets-app .count{
    padding: 8px;
    color: #68717b;
    white-space: nowrap;
}

#sets-app .language-switch{ display:flex; gap:4px; align-items:center; margin-left:2px; }
#sets-app .lang-btn{ border:1px solid #d7dbe0; background:#fff; border-radius:5px; padding:6px 8px; cursor:pointer; font-size:18px; line-height:1; }
#sets-app .lang-btn.active{ outline:2px solid #d4af37; outline-offset:-2px; background:#fff8d6; }
#sets-app .lang-btn:hover{ background:#f4f5f7; }

/* ------------------------------------------------------------
   LAYOUT : trois zones solidaires dans le flux de la page
   1. barre de filtres
   2. listing
   3. fiche descriptive
   ------------------------------------------------------------ */

#sets-app .layout{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    gap: 12px;
    align-items: start;
}

#sets-app .list-area{
    min-width: 0;
}

#sets-app .list-table{
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

#sets-app .list-table th, #sets-app .list-table td{
    padding: 8px 10px;
    border-bottom: 1px solid #e4e7ea;
    text-align: left;
    vertical-align: top;
}

#sets-app .list-table th{
    background: #eceff2;
    font-size: 12px;
}

#sets-app .list-table tbody tr{
    cursor: pointer;
}

#sets-app .list-table tbody tr:hover{
    background: #f7f8f9;
}

#sets-app .list-table tbody tr.selected{
    background: #fff6c9;
}

/* ------------------------------------------------------------
   FICHE : présente dès l'ouverture de la page
   ------------------------------------------------------------ */

#sets-app .panel{
    display: block;
    position: sticky;
    top: 68px;
    max-height: calc(100vh - 80px);
    overflow: auto;
    align-self: start;
}

#sets-app .panel-empty{
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #68717b;
    font-size: 15px;
    line-height: 1.5;
    padding: 30px;
}

#sets-app .panel-inner{
    background: #fff;
    border: 1px solid #d7dbe0;
    border-radius: 6px;
    padding: 15px;
    max-height: none;
    overflow: visible;
}

#sets-app .close{
    float: right;
    border: 0;
    background: none;
    font-size: 18px;
    cursor: pointer;
}

#sets-app .title{
    margin: 0 35px 3px 0;
}

#sets-app .english{
    color: #68717b;
    margin-bottom: 12px;
}

#sets-app .info{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

#sets-app .field{
    border: 1px solid #e4e7ea;
    padding: 7px;
}

#sets-app .field b{
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    color: #68717b;
}

#sets-app .section-title{
    margin-top: 12px;
    padding: 6px 0;
    border-bottom: 2px solid #e6ca53;
    font-weight: bold;
}

#sets-app .bonus-table{
    width: 100%;
    border-collapse: collapse;
}

#sets-app .bonus-table th, #sets-app .bonus-table td{
    padding: 7px 8px;
    border-bottom: 1px solid #e4e7ea;
    text-align: left;
    vertical-align: top;
}

#sets-app .bonus-table th{
    background: #f6f7f8;
    font-size: 12px;
}

#sets-app .note{
    color: #68717b;
    font-size: 12px;
}

#sets-app .references{
    line-height: 1.7;
}

/* ------------------------------------------------------------
   PETITES FENÊTRES
   ------------------------------------------------------------ */

#sets-app .multi-value{
    line-height: 1.35;
}

#sets-app .orientation-header{ text-align:center !important; }
#sets-app .orientation-cell{ text-align:center !important; vertical-align:middle !important; font-weight:700; }
#sets-app .orientation-unknown{ color:#68717b; font-weight:400; }
#sets-app .orientation-yes{ color:#2e7d32; font-weight:700; }
#sets-app .orientation-check{ color:#188038; font-weight:800; }


#sets-app .bonus-health{color:#c62828;font-weight:600}
#sets-app .bonus-magicka{color:#1565c0;font-weight:600}
#sets-app .bonus-stamina{color:#2e7d32;font-weight:600}
@media (max-width: 1050px){
    #sets-app .layout{
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 12px;
    }

    #sets-app .toolbar{
        gap: 8px;
    }
}

/* ------------------------------------------------------------
   TABLETTE / MOBILE : consultation portrait
   ------------------------------------------------------------ */
@media (max-width: 800px), (orientation: landscape) and (max-height: 600px) and (hover: none) and (pointer: coarse){
    /* La fiche n'occupe l'espace du listing qu'après sélection d'un set. */
    #sets-app .panel{
        display: none;
    }

    #sets-app.mobile-detail-mode .list-area{
        display: none;
    }

    #sets-app.mobile-detail-mode .panel{
        display: block;
        position: static;
        order: 1;
        width: 100%;
        max-height: none;
        flex: 1 1 auto;
    }

    #sets-app .panel-back{
        display: none;
    }

    #sets-app.mobile-detail-mode .panel-back{
        display: inline-flex;
        align-items: center;
        margin: 0 0 12px;
        padding: 8px 10px;
        border: 1px solid #c8ced5;
        border-radius: 4px;
        background: #f6f7f8;
        color: #303843;
        font: inherit;
        cursor: pointer;
    }

    #sets-app .toolbar{
        top: 50px !important;
    }

    #sets-app body{
        font-size: 14px;
    }

    #sets-app header{
        padding: 12px 14px;
    }

    #sets-app header h1{
        font-size: 18px;
        line-height: 1.25;
    }

    #sets-app header .sub{
        font-size: 11px;
    }

    #sets-app main{
        padding: 10px;
    }

    /* La barre reste accessible pendant la consultation du listing */
    #sets-app .toolbar{
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 50px !important;
        z-index: 1030;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 7px;
        padding: 8px;
        margin-bottom: 10px;
        background: rgba(255,255,255,.97);
        border: 1px solid #d7dbe0;
        border-radius: 6px;
    }

    #sets-app .toolbar input, #sets-app .toolbar select{
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        font-size: 13px;
    }

    #sets-app .toolbar input{
        grid-column: 1 / -1;
    }

    #sets-app .reset-filters{
        grid-column: 1 / -1;
        width: 100%;
    }

    #sets-app .language-switch{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
    }

    #sets-app .count{
        display: flex;
        align-items: center;
        font-size: 12px;
    }

    #sets-app .layout{
        display: flex;
        flex-direction: column;
        gap: 10px;
        height: calc(100vh - 150px);
        min-height: 0;
    }

    /* Sur téléphone : seul le listing défile.
       La fiche reste affichée en bas de l'écran. */
    #sets-app .list-area{
        width: 100%;
        min-width: 0;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Téléphone : filtres et sets suivent le défilement normal de la page. */
    #sets-app .toolbar{
        position: static !important;
    }

    #sets-app .layout{
        height: auto;
    }

    #sets-app .list-area{
        overflow: visible;
    }

    /* Transformation du tableau en cartes lisibles en portrait.
       Les six orientations restent toutes visibles. */
    #sets-app .list-table, #sets-app .list-table thead, #sets-app .list-table tbody, #sets-app .list-table tr, #sets-app .list-table th, #sets-app .list-table td{
        display: block;
    }

    #sets-app .list-table thead{
        display: none;
    }

    #sets-app .list-table tbody tr{
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 6px 10px;
        padding: 9px 10px;
        margin-bottom: 7px;
        border: 1px solid #d7dbe0;
        border-radius: 6px;
        background: #fff;
    }

    #sets-app .list-table tbody td:first-child{
        grid-column: 1 / -1;
        padding: 0 0 5px 0;
        border-bottom: 1px solid #e4e7ea;
        text-align: left !important;
        font-size: 14px;
    }

    #sets-app .list-table tbody td:not(:first-child){
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 24px;
        min-height: 24px;
        padding: 2px 5px;
        border: 0;
        border-radius: 4px;
        background: #f6f7f8;
        font-size: 13px;
    }

    #sets-app .list-table tbody td:not(:first-child)::before{
        font-size: 9px;
        margin-right: 3px;
        color: #68717b;
        font-weight: 600;
    }

    #sets-app .list-table tbody td:nth-child(2)::before{ content: 'PVE'; }
    #sets-app .list-table tbody td:nth-child(3)::before{ content: 'PVP'; }
    #sets-app .list-table tbody td:nth-child(4)::before{ content: 'T'; }
    #sets-app .list-table tbody td:nth-child(5)::before{ content: 'H'; }
    #sets-app .list-table tbody td:nth-child(6)::before{ content: 'DM'; }
    #sets-app .list-table tbody td:nth-child(7)::before{ content: 'DV'; }

    #sets-app .list-table tbody td:empty{
        opacity: .35;
    }

    #sets-app .panel{
        position: sticky;
        bottom: 0;
        top: auto;
        width: 100%;
        flex: 0 0 auto;
        max-height: 42vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        order: 2;
        z-index: 1020;
    }

    #sets-app .panel-inner{
        padding: 12px;
    }

    #sets-app .panel-empty{
        min-height: 180px;
        padding: 20px;
    }

    #sets-app .info{
        grid-template-columns: 1fr;
    }

    #sets-app .bonus-table th, #sets-app .bonus-table td{
        padding: 6px;
        font-size: 12px;
    }
}

@media (max-width: 430px){
    #sets-app main{
        padding: 7px;
    }

    #sets-app .toolbar{
        grid-template-columns: 1fr 1fr;
        padding: 6px;
    }

    #sets-app .toolbar select{
        font-size: 12px;
        padding: 7px 5px;
    }

    #sets-app .list-table tbody tr{
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    #sets-app .list-table tbody td:first-child{
        grid-column: 1 / -1;
    }

    #sets-app .list-table tbody td:not(:first-child){
        min-width: 0;
        padding: 2px;
    }

    #sets-app .list-table tbody td:not(:first-child)::before{
        margin-right: 1px;
        font-size: 8px;
    }

    #sets-app .section-title{
        margin-top: 10px;
    }
}

/* Téléphone en paysage : la barre de filtres est plus haute que la fenêtre.
   On laisse donc la page entière défiler, au lieu de tronquer le listing et
   de faire apparaître le pied de page juste après les filtres. */
@media (orientation: landscape) and (max-height: 600px) and (hover: none) and (pointer: coarse){
    #sets-app .toolbar{
        position: static !important;
    }

    #sets-app .layout{
        height: auto;
        min-height: 0;
    }

    #sets-app .list-area{
        overflow: visible;
    }
}


#sets-app{width:100%;}
#sets-app .sets-app-shell{width:100%;}

/* ============================================================
   INTEGRATION LA TAVERNE
   Le header et le footer conservent leur conteneur historique.
   Seule la zone des sets s'étend sur toute la largeur disponible.
   ============================================================ */
.sets-module{
    padding: 24px 0 60px !important;
    overflow: visible !important;
}
.sets-module > .container{
    overflow: visible !important;
}
.sets-module .main{
    overflow: visible !important;
}
.sets-module > .container{
    width: 100% !important;
    max-width: none !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
}
.sets-module #sets-app{
    width: 100% !important;
    max-width: none !important;
}
@media (min-width: 1200px){
    .sets-module > .container{
        width: 100% !important;
    }
}
@media (max-width: 767px){
    .sets-module{
        padding: 16px 0 35px !important;
    }
    .sets-module > .container{
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}


/* Ajustement d'empilement avec le header fixe de La Taverne :
   la fiche reste sous la barre de filtres lorsqu'elles sont sticky. */
#sets-app .panel{
    top: 166px;
    max-height: calc(100vh - 178px);
}

#sets-app .panel-inner .title{
    font-size: 24px;
    line-height: 1.2;
}

#sets-app .panel-inner .english{
    font-size: 13px;
}

@media (max-width: 1050px) and (min-width: 801px){
    #sets-app .panel{
        top: 166px;
        max-height: calc(100vh - 178px);
    }
}

@media (max-width: 800px), (orientation: landscape) and (max-height: 600px) and (hover: none) and (pointer: coarse){
    #sets-app .panel{
        top: auto;
        bottom: 0;
        max-height: 42vh;
        overflow-y: auto;
    }
    #sets-app .panel-inner .title{
        font-size: 22px;
    }
}

/* ============================================================
   HEADER — La Taverne de [logo Bulleyeti]
   Test responsive : le logo remplace le mot Bulleyeti.
   ============================================================ */
.navbar-custom .navbar-brand-taverne{
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 50px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    white-space: nowrap !important;
    letter-spacing: 3px !important;
}

.navbar-custom .navbar-brand-taverne img{
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    object-fit: contain !important;
    flex: 0 0 auto !important;
}

@media (max-width: 1050px){
    .navbar-custom .navbar-brand-taverne{
        gap: 6px !important;
        letter-spacing: 2px !important;
    }

    .navbar-custom .navbar-brand-taverne img{
        width: 40px !important;
        height: 40px !important;
        max-width: 40px !important;
    }
}

/* Tablette : garder la marque et le menu sur une seule ligne autant que possible.
   Le bloc logo est rapproché du bord gauche et réduit sans affecter le téléphone. */
@media (min-width: 768px) and (max-width: 1199px){
    .navbar-custom > .container{
        width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .navbar-custom .navbar-brand-taverne{
        gap: 3px !important;
        height: 40px !important;
        padding: 2px 0 !important;
        font-size: 18px !important;
        letter-spacing: 0 !important;
    }

    .navbar-custom .navbar-brand-taverne img{
        width: 30px !important;
        height: 30px !important;
        max-width: 30px !important;
    }

    .navbar-custom .navbar-collapse{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .navbar-custom .navbar-nav > li > a{
        padding-left: 5px !important;
        padding-right: 5px !important;
        font-size: 10px !important;
        letter-spacing: 0 !important;
    }
}

/* Tablette tactile : utiliser le menu replié du téléphone.
   Les liens restent accessibles, sans créer une seconde ligne permanente. */
@media (min-width: 768px) and (max-width: 1366px) and (hover: none) and (pointer: coarse){
    .navbar-custom .navbar-header{
        float: none;
    }

    .navbar-custom .navbar-toggle{
        display: block;
    }

    .navbar-custom .navbar-collapse.collapse{
        display: none !important;
    }

    .navbar-custom .navbar-collapse.collapse.in{
        display: block !important;
        overflow-y: auto !important;
    }

    .navbar-custom .navbar-nav{
        float: none !important;
        margin: 7.5px -15px !important;
    }

    .navbar-custom .navbar-nav > li{
        float: none !important;
    }

    .navbar-custom .navbar-nav .open .dropdown-menu{
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        box-shadow: none;
    }
}

@media (max-width: 767px){
    .navbar-custom .navbar-brand-taverne{
        gap: 5px !important;
        letter-spacing: 1px !important;
        font-size: 18px !important;
        height: 50px !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    .navbar-custom .navbar-brand-taverne img{
        width: 36px !important;
        height: 36px !important;
        max-width: 36px !important;
    }
}

@media (max-width: 380px){
    .navbar-custom .navbar-brand-taverne{
        font-size: 16px !important;
        letter-spacing: 0 !important;
        gap: 4px !important;
    }

    .navbar-custom .navbar-brand-taverne img{
        width: 34px !important;
        height: 34px !important;
        max-width: 34px !important;
    }
}

/* Menu « Jeu de base » : les trois alliances sont visibles sans défilement
   vertical sur ordinateur. Sur téléphone, elles retrouvent une seule colonne. */
.navbar-custom .menu-mega{
    min-width: 650px;
    padding: 14px 12px;
    grid-template-columns: repeat(3, minmax(190px, 1fr));
    gap: 12px;
}
.navbar-custom .open > .menu-mega{ display: grid; }
.navbar-custom .menu-mega section + section{
    border-left: 1px solid rgba(255,255,255,.12);
    padding-left: 12px;
}
.navbar-custom .menu-mega .dropdown-header{
    margin: 0;
    padding: 5px 10px 8px;
    color: #d0a52c;
    font-size: 11px;
    letter-spacing: 1px;
}
.navbar-custom .menu-mega a{
    display: block;
    padding: 7px 10px;
    color: #999;
    font-size: 11px;
    letter-spacing: 1px;
}
.navbar-custom .menu-mega a:hover,
.navbar-custom .menu-mega a:focus{
    background: rgba(255,255,255,.1);
    color: #fff;
    text-decoration: none;
}
.navbar-custom .menu-mega a.is-disabled{
    color: #626262;
    cursor: not-allowed;
    pointer-events: none;
}
.navbar-custom .menu-mega hr{
    margin: 8px 0;
    border-color: rgba(255,255,255,.12);
}
@media (max-width: 767px), (min-width: 768px) and (max-width: 1366px) and (hover: none) and (pointer: coarse){
    .navbar-custom .menu-mega{
        min-width: 0;
        display: none;
        padding: 0;
    }
    .navbar-custom .open > .menu-mega{ display: block; }
    .navbar-custom .menu-mega section + section{
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.12);
        padding-left: 0;
    }
}