:root {
	/* Couleur de fond évoluant en fonction de la vie du personnage 
	 * Tend vers le rouge et le sombre en perdant de la vie. 
	 */
	--couleur-vie-100:rgba(34, 34, 51, 1); /* gris mauve sombre */
	--couleur-vie-40:#241828;
	--couleur-vie-30:#250515;
	--couleur-vie-20:#1f0510;
	--couleur-vie-10:#1a0000;
	--couleur-vie-1:#160000;
	--couleur-vie-0:#000;
	--couleur-background: var(--couleur-vie-100);

	/* Couleur du texte évoluant en fonction du background 
	 * Le blanc s’atténue pour éviter un contraste trop fort lorsque le fond devient sombre
	 */
	--couleur-texte-100:#dddded;
	--couleur-texte-40:#dcdcec;
	--couleur-texte-30:#dbdbeb;
	--couleur-texte-20:#d8d8e8;
	--couleur-texte-10:#d0d0e0;
	--couleur-texte-1:#c8c8d8;
	--couleur-texte-0:#c0c0d0;
	--couleur-texte: var(--couleur-texte-100);
	
	/* Couleur d’alertes (bordures) évoluant en fonction 
	 * de vie ou de la réserve d’imergie du personnage
	 * Tend vers le rouge vif en perdant de la vie ou de l’imergie */
	--couleur-alerte-100:rgba(255, 85, 27, 0); 
	--couleur-alerte-40:rgba(255, 85, 27, .2);
	--couleur-alerte-30:rgba(255, 85, 27, .6);
	--couleur-alerte-20:rgba(255, 85, 27, .7);
	--couleur-alerte-10:rgba(255, 85, 27, .8);
	--couleur-alerte-1:rgba(255, 85, 27, .9);
	--couleur-alerte-0:rgba(255, 85, 27, 1);
	--couleur-alerte-imergie: var(--couleur-alerte-100);
	--couleur-alerte-vie: var(--couleur-alerte-100);

	/*
	 * Des fonds blancs transparents se superposant au fond de page
	 * Permet de conserver l’ambiance de la couleur de vie du personnage.
	 * 3 niveaux : 10%, 5% et 3% d’opacité, 
	 */
	--couleur-background-transparent-1: rgba(255, 255, 255, .1);
	--couleur-background-transparent-2: rgba(255, 255, 255, .05);
	--couleur-background-transparent-3: rgba(255, 255, 255, .03);

	/* Idem des fonds noirs transparents */
	--couleur-background-noir-1: rgba(0, 0, 0, .6);
	--couleur-background-noir-2: rgba(0, 0, 0, .4);
	--couleur-background-noir-3: rgba(0, 0, 0, .2);

	/*
	 * Des bordures également transparentes.
	 */
	--couleur-bordure: rgba(255, 255, 255, .2);
	--couleur-bordure-label: rgba(255, 255, 255, .1);
	--couleur-bordure-active: rgba(255, 255, 255, .5);

	/*
	 * Textes à effets négatifs
	 */
	--couleur-bordure-negatif: rgba(250, 55, 40, .2);
	--couleur-background-negatif: rgba(250, 55, 40, .2);

	/* Couleurs des liens */
	--couleur-lien: #c9a641; /*#aa3*/
	--couleur-lien-hover: #fed178; /*#f2af2a;*/
	--couleur-lien-focus: var(--couleur-background);
	--couleur-lien-focus-background: var(--couleur-texte);

	/* Autres couleurs spécifiques */
	--couleur-background-capacite: rgba(108, 49, 91, .7); 
	--couleur-texte-inactif: #889;

	/* Gabarit général de la page */
	--largeur-maxi: 50rem;
	--largeur-maxi-textes: 40rem;
	--line-height:1.5em;
	--hauteur-header: 3rem;
	--hauteur-footer: 3rem;

	/* Polices de caractères */
	--font-family-titre: 'Quintessential', cursive; /* ou Merienda ? */
	--font-family-texte: 'Roboto', sans-serif;

	/* Divers */
	/* Transitions : pas systématique sur toutes les balises sinon rallentit la page */
	--transitions: color .3s, background-color .3s, opacity .3s, border .1s;
}

/*
 * Code tarabiscoté pour modifier les couleurs en fonction de la vie du personnage.
 * On redéfinit certaines variables CSS en fonction de data-vie.
 */
body[data-vie^="4"] {
	--couleur-background: var(--couleur-vie-40);
	--couleur-texte: var(--couleur-texte-40);
	--couleur-alerte-vie: var(--couleur-alerte-40);
} 
body[data-vie^="3"] {
	--couleur-background: var(--couleur-vie-30);
	--couleur-texte: var(--couleur-texte-30);
	--couleur-alerte-vie: var(--couleur-alerte-30);
}
body[data-vie^="2"] {
	--couleur-background: var(--couleur-vie-20);
	--couleur-texte: var(--couleur-texte-20);
	--couleur-alerte-vie: var(--couleur-alerte-20);
}
body[data-vie^="1"] {
	--couleur-background: var(--couleur-vie-10);
	--couleur-texte: var(--couleur-texte-10);
	--couleur-alerte-vie: var(--couleur-alerte-10);
}
body[data-vie="1"], body[data-vie="2"], body[data-vie="3"], 
body[data-vie="4"], body[data-vie="5"], body[data-vie="6"], 
body[data-vie="7"], body[data-vie="8"], body[data-vie="9"] {
	--couleur-background: var(--couleur-vie-1);
	--couleur-texte: var(--couleur-texte-1);
	--couleur-alerte-vie: var(--couleur-alerte-1);
}
body[data-vie="0"] {
	--couleur-background: var(--couleur-vie-0);
	--couleur-texte: var(--couleur-texte-0);
	--couleur-alerte-vie: var(--couleur-alerte-0);
}
body[data-vie="100"] { 
	--couleur-background: var(--couleur-vie-100); 
	--couleur-texte: var(--couleur-texte-100);
	--couleur-alerte-vie: var(--couleur-alerte-100);
}
/* même chose pour l’imergie */
body[data-imergie^="4"] {
	--couleur-alerte-imergie: var(--couleur-alerte-40);
} 
body[data-imergie^="3"] {
	--couleur-alerte-imergie: var(--couleur-alerte-30);
}
body[data-imergie^="2"] {
	--couleur-alerte-imergie: var(--couleur-alerte-20);
}
body[data-imergie^="1"] {
	--couleur-alerte-imergie: var(--couleur-alerte-10);
}
body[data-imergie="1"], body[data-imergie="2"], body[data-imergie="3"], 
body[data-imergie="4"], body[data-imergie="5"], body[data-imergie="6"], 
body[data-imergie="7"], body[data-imergie="8"], body[data-imergie="9"] {
	--couleur-alerte-imergie: var(--couleur-imergie-1);
}
body[data-imergie="0"] {
	--couleur-alerte-imergie: var(--couleur-alerte-0);
}
body[data-imergie="100"] { 
	--couleur-alerte-imergie: var(--couleur-alerte-100); 
}

/* Les polices (Roboto est déjà installée par Vorple) */
@font-face{
	font-family:Quintessential;
	src:local(Quintessential Regular), url(Quintessential-Regular.ttf);
}


/* C’est parti */
* {
	/* Les unités hauteur / largeur intègrent bordure et padding */
	box-sizing: border-box;
}

html {
	/* Définition de 1rem */
	font-size:18px;
}

/* Gabarit de la page */
body {
	line-height:var(--line-height);
	font-size:1rem;
	background-color: var(--couleur-background);
	color:var(--couleur-texte);
	font-family: var(--font-family-texte);
	overflow:hidden;
	transition: background-color .5s, color .5s;
}

/* Fonds de page */
#haven {
	background: transparent url(../images/environnement/brume.png);
	background-size:cover;
}

body[data-environnement="brume"] #haven {
	background-image: url(../images/environnement/brume.png);
}



/* Vorple (nous embête) */
#output {
	max-width: 100%;
	padding: 0;
	margin: 0;
	line-height: inherit;
}

#window0 {
	display:grid;
	grid-template-areas: ". header ."
                         ". content ."
                         ". footer .";
	grid-template-rows: var(--hauteur-header) 1fr var(--hauteur-footer);
	grid-template-columns: 1fr minmax(auto, var(--largeur-maxi)) 1fr;
	grid-row-gap: 1rem;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}
body[data-affichage=combat] #window0 {
	grid-template-areas: ". header ."
                         "content content content"
                         ". footer .";
}

section {
	overflow-y:auto;
	grid-area: content;
	padding:0 1rem;
}

@media (min-width:1500px) {
	body[data-affichage=combat] section {
		display:grid;
		grid-column-gap: 2rem;
		grid-template-rows: auto auto auto auto 1fr;
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "titre titre"
							 "notifications notifications"
							 "zonedescription zonedescription"
							 "rencontre zoneaction"
							 "choix choix";
	}
	section .zonetitre {
		grid-area: titre;
	}
	section .notifications {
		grid-area: notifications;
	}
	section .rencontre {
		grid-area: rencontre;
		margin-left:auto;
		margin-right:0;
	}
	section .zoneaction {
		grid-area: zoneaction;
		margin-left:0;
		margin-right:auto;
	}
	section .zonedescription {
		grid-area: zonedescription;
	}
	section > ul.choix {
		grid-area: choix;
		width: 100%;
	}
}



header {
	grid-area: header;
	border-bottom:1px solid var(--couleur-bordure);
	background: var(--couleur-background-transparent-3);
}
footer {
	grid-area: footer;
	border-top:1px solid var(--couleur-bordure);
	background: var(--couleur-background-transparent-3);
}
header, footer {
	text-align:center;
	/* Centrage vertical et horizontal des contenus de header et footer */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 1rem;
}
header ul.onglets, footer h3 {
	margin:0;
}



/* =========== 
 * Typographie 
 */

::selection {
	background: #bdbdbd;
	color: black;
}

/* Liens en général */
a {
	color: var(--couleur-lien);
	text-decoration:none;
	display:inline-block;
	padding:0 .1em;
	transition: var(--transitions);
}
a:visited {
	color: var(--couleur-lien);
}
a:hover,
a:hover:focus {
	color: var(--couleur-lien-hover);
	text-decoration:underline;
	background:none;
	border-radius: 0;
}
a:focus {
	background-color:var(--couleur-lien-focus-background);
	color:var(--couleur-lien-focus);
	border-radius: 3px;
}

/* Les titrailles par défaut */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-family-titre);
	line-height:var(--line-height);
}
h1 { 
	text-align:center;
	font-size:3rem; 
	margin:1rem 0;
	margin-top:0;
	margin-top: .5em;
	margin-bottom: .5em;
	font-weight:normal;
	line-height:1.5em; /* le titre principal plus grand */
}
h1:first-of-type, h1.titre-environnement {
	margin-top:0;
	margin-bottom:0;
}
h2 { 
	font-size:1.5rem; 
	font-weight:normal; 
	margin: 1rem 0;
}
h3 { 
	font-size:1.3rem; 
	font-weight:normal;
	margin: 1rem 0 0; 
}
h4 { font-size:1.2rem; }
h5 { font-size:1rem; }
h6 { font-size:1rem; }

/* lignes de séparation */
hr { 
	width:40%; 
	margin: 2rem auto;
	border-color:var(--couleur-bordure);
	border-width:2px 0 0 0;
}

/* images */
.vorple-image {
	text-align: center;
}

/* Tableaux */
table {
	margin:2rem 0;
	table-layout: fixed;
	width: 100%;
	border-collapse: collapse;
	table-layout: auto;
}
h2.titretableau + table {
	margin-top:0;
}
caption, h2.titretableau, h2.titrelisting, th, td, ul.listing li {
	padding:.25em .5rem;
	text-align:left;
	border-bottom: 1px solid var(--couleur-bordure);
}
h2.titretableau, h2.titrelisting {
	margin-bottom:0;
	margin-top:2rem;
}
caption, h2.titretableau, h2.titrelisting {
	font-size:1.1rem;
	background-color: var(--couleur-background-transparent-1);
	border-radius:5px 5px 0 0;
}
th {
	background-color: var(--couleur-background-transparent-2);
	font-weight:normal;
}



/* Onglets / Menus horizontaux */
ul.onglets {
	margin:1em 0 2em; 
	padding:0;
	text-align:center;
}
ul.onglets li {
	display:inline-block;
	padding:0 .5em;
	margin:0 .5em;
	position:relative;
}
ul.onglets li + li::before {
	content: "•";
	position:absolute;
	left:-.8em;
}
ul.onglets a:hover {
	text-decoration:none;
	border-bottom:2px solid var(--couleur-lien);
}

/* 
 * États actifs ou inactifs. 
 * Concerne les onglets, mais aussi les options, certains liens
 */
.opton {
	border-bottom:2px solid var(--couleur-bordure-active);
	display:inline-block;
	padding:0 .1em;
}
.optoff {
	color: var(--couleur-texte-inactif);
}


/* Listes d’éléments 
 * Devraient toujours être précédées d’un titre.
 * 3 colonnes maximum en grand écran, s’étendant sur la largeur disponible.
 * 
 * Fixme: La dernière ligne malheureusement s’étend sur la largeur même s’il manque
 * une ou 2 cellules pour compléter...
 */
ul.listing {
	margin:2rem 0;
	padding:0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	list-style-type:none;
}
ul.listing li {
	padding:.25em .5rem;
	background-color:var(--couleur-background-transparent-3);
}
h2.titrelisting + ul.listing {
	margin-top:0;
}
/* Cas particulier : fiche du personnage */
h2.titrelisting + .vorple-image,
h2.titrelisting + .vorple-image + ul.listing {
	margin-top:0;
}
h2.titrelisting + .vorple-image {
	background-color:var(--couleur-background-transparent-3);
	padding:.5rem;
	border-bottom: 1px solid var(--couleur-bordure);
}
h2.titrelisting + .vorple-image img {
	max-width: 100%;
	width: 100%;
	height: auto;
}



/* Labels, mot clés … 
 * En ligne si dans un ul.tags.
 */
.label {
	display: inline-block;
	border-radius: 3px;
	background: var(--couleur-background-transparent-1);
	padding: .1em .3em;
	border: 1px solid var(--couleur-bordure-label);
	margin-right: .5em;
	font-size: .9rem;
	line-height:1.3rem;
	font-family:var(--font-family-texte);
}
.label.negatif {
	background: var(--couleur-background-negatif);
	border: 1px solid var(--couleur-bordure-negatif);
}
.label.negatif::before {
	content:"";
}
ul.tags {
	list-style-type:none;
	margin:0 0 1em;
	padding:0;
}


/* Contexte de lieu, de personnage (texte descriptif) */
.narration, ul.choix {
	margin: 1rem auto;
	max-width: var(--largeur-maxi-textes);
	display:block;
}
ul.choix {
	list-style-position: outside;
}
ul.choix > li > a {
	display:inline;
}

/* Aides du tuto */
.info-tuto {
	background-color: var(--couleur-texte);
	color: var(--couleur-background);
	padding:1rem;
}

/* Liens de retour de l’aide vers le sommaire */
.lien-sommaire {
	margin-top:1rem;
}

/* 
 * Zone de notifications
 * Actions validées / échouées… 
 * "Épreuve d'Athlétisme (45%) : réussie"
 */
.notifications {
	background-color: var(--couleur-background-noir-3);
	margin:1em auto 2em;
	width:100%;
	max-width:var(--largeur-maxi);
	padding:0;
	list-style-type:none;
	max-height:7rem;
	overflow-y: auto;
	font-size: .9rem;
	--couleur-texte: rgb(200, 200, 200);
	--couleur-bordure: rgba(200, 200, 200, .6);
	border-left:3px solid var(--couleur-bordure);
	border-right:3px solid var(--couleur-bordure);
	box-shadow: 0 0 2px rgba(200,200,200,.4);
}
.notifications > li:first-child { margin-top:1em; }
.notifications > li:last-child { margin-bottom:1em; }
.notifications > li {
	color:var(--couleur-texte);
	font-style:italic;
	margin:0 1em; 
	padding:0;
}
/* aide du tutorial */
.notifications > li.notif-aide {
	background-color: var(--couleur-texte);
	color: var(--couleur-background);
	padding:.5em 1em;
	margin:.5em 0;
}
.notifications > li.notif-aide + .notif-aide {
	margin-top:-1em; 
	padding-top:0;
}
/* icones des notifications */
.notifications > li::before {
	margin-right:.3em;
	width:1em;
	display:inline-block;
	text-align: center;
	font-weight:bold;
	font-style:normal;
	content:" ";
}
/* aide du tutorial */
.notifications > li.notif-aide::before {
	display:none;
}
.notifications > li.neutre::before,
.neutre:before {
	content: "!";
	color:#dac553;
}
.notifications > li.positif::before,
.positif:before {
	content: "✓";
	color:#73e032;
}
.notifications > li.negatif::before,
.negatif::before {
	content: "✘";
	color:#e42828;
}


/* messages positifs, négatifs */
/* texte positif */
.txtp { color: #60dd0a; }
/* texte négatif */
.txtn { color: #F03728; }


/* titre de définition de caractéristiques */
.carac {
	font-weight:bold;
}
/* nom de capacité */
.capacite {
	display: inline;
	border-radius: 3px;
	background: var(--couleur-background-capacite);
	padding: 0 .2rem;
	border: 1px solid var(--couleur-bordure-label);
	margin-right: 0;
	font-size: .9rem;
	font-style:normal !important;
}
/* nom d’épreuve pour une action à faire */
.epreuve {
	display: inline;
	border-radius: 3px;
	background: var(--couleur-background-transparent-1);
	padding: 0 .2rem;
	border: 1px solid var(--couleur-bordure-label);
	margin-right: 0;
}



/* Zone de description d’élément (objet, compétence, ennemi) */
.zonedescription {
	border-radius:0 0 10px 0;
	border-left:2px solid var(--couleur-bordure);
	padding:.5rem 1rem 1rem;
	background-color:var(--couleur-background-transparent-3);
	margin:1rem auto;
	max-width:var(--largeur-maxi-textes);
}
.zonedescription .titredescription {
	margin:0 0 1rem 0;
}
.titredescription + .tags {
	position:relative;
	margin-top:-1rem;
}
.zonedescription h3 {
	font-size:1.3rem;
}


/* Rencontres (ennemis, combattants… ) */
.rencontre {
	max-width:var(--largeur-maxi);
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:stretch;
	flex-wrap:wrap;
	margin:1rem auto 2rem;
	--couleur-bordure: rgba(78,88,89,.9);
	--couleur-background-rencontre: rgba(78,88,89,.5);
	--border-width: 3px;
}
.rencontre .perso-en-combat {
	max-width:12.7rem;
	margin:.25rem;
	border-radius:0 0 5px 5px;
	font-size: .9em;
	background: var(--couleur-background-rencontre);
	border: var(--border-width) solid var(--couleur-bordure);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position:relative;
}
.rencontre .perso-en-combat img {
	max-width:100%;
	width:100%;
	height:auto;
	padding:.2rem;
}
.rencontre .perso-en-combat ul {
	list-style-type:none;
	margin:0 .5rem .5rem;
	padding:0;
}
.rencontre .perso-en-combat ul li { 
	text-align:center; 
}
.rencontre .perso-en-combat ul li + li {
	border-top:1px solid var(--couleur-bordure);
}
.rencontre .perso-en-combat h3.nom-perso {
	text-align:center;
	margin-top:0;
	background: var(--couleur-background-noir-2);
	border-bottom:var(--border-width) solid var(--couleur-bordure);
	padding: 5px 0;
}

/* Types de personnages 
 * - mob 
 * - mini-boss
 * - boss
 */
.mob::before, .mini-boss::before, .boss::before {
	display:inline-block;
	content:"";
	text-align:center;
	margin: -1em auto;
	position: absolute;
	left: 0;
	right: 0;
} 
.mob::before {
	content: "★";
	color: #E19083;
}
.mini-boss::before {
	content: "★ ★";
	color: #CFD0AB;
}
.boss::before {
	content: "★ ★ ★";
	color: #D5B500;
}



/* Actions de combat */
.action-normale {}
.action-rapide {}

/* Liste des actions en combat */
.zoneaction { 
	margin:0 auto 2rem; 
	max-width: var(--largeur-maxi);
	width:100%;
}
.info-rapide { 
	background-color: var(--couleur-background-transparent-2);
	padding:.5rem;
}
.info-rapide::before {
	content: "▶"; /* triangle pointant à droite */
	padding-right:.5rem;
}


/* Spécificité écran d’options */
.options-audio th span + span,
.options-jeu th span + span {
	font-size:.9rem;
	font-style:italic;
}
.options-audio td,
.options-jeu td {
	width: 8.5rem;
	text-align: center;
}
.tableau-equipement th {
	max-width: 10rem;
}


/* Spécifités écran personnages > caractérisitques */
.fiche-globale {
	display:grid;
	margin:1rem 0;
	grid-template-columns: 1fr 1fr 1fr;
	grid-column-gap: 1rem;
}
.fiche-globale > * {}
.fiche-globale h2 { margin-top:1rem; }
.fiche-globale .listing { margin-bottom:1rem; }
.fiche-globale > .fiche-general { grid-column: 2 / 3; }
.fiche-globale > .fiche-combat { grid-column: 1 / 2; }
.fiche-globale > .fiche-imergie { grid-column: 2 / 3; }
.fiche-globale > .fiche-voyage { grid-column: 3 / 4; }
@media (max-width: 720px) {
	.fiche-globale { grid-template-columns: 1fr 1fr; }
	.fiche-globale > .fiche-general { grid-column: 1 / 2; }
	.fiche-globale > .fiche-combat { grid-column: 2 / 3; }
	.fiche-globale > .fiche-imergie { grid-column: 1 / 2; }
	.fiche-globale > .fiche-voyage { grid-column: 2 / 3; }
}
@media (max-width: 520px) {
	.fiche-globale { grid-template-columns: 1fr; }
	.fiche-globale > .fiche-general { grid-column: 1 / 2; }
	.fiche-globale > .fiche-combat { grid-column: 1 / 2; }
	.fiche-globale > .fiche-imergie { grid-column: 1 / 2; }
	.fiche-globale > .fiche-voyage { grid-column: 1 / 2; }
}

/** Pied de page */
footer .zonepied {
	margin:1em 0 1em; 
	padding:0;
	display: flex;
	flex-wrap:wrap;
	align-items: center;
	justify-content: center;
	text-align:center;
}
footer .zonepied li {
	display:inline-block;
	padding:0 .5em;
	margin:0 .5em;
	position:relative;
}
footer .zonepied li + li::before {
	content: "•";
	position:absolute;
	left:-.5em;
}

footer abbr {
	text-decoration:none;
	padding: 0px 4px;
	border-radius: 3px;
	min-width: 25px;
	display: inline-block;
	transition: background-color .3s;
	cursor: help;
}
footer abbr:hover {
	background-color: var(--couleur-background-transparent-1);
}
footer .etat-vie span {
	border-bottom:2px solid var(--couleur-alerte-vie);
	animation: bounce-alerte 3s infinite;
}
footer .etat-reserve {
	border-bottom:2px solid var(--couleur-alerte-imergie);
	animation: bounce-alerte 3s infinite;
}
@keyframes bounce-alerte {
	20% {
	   border-color: var(--couleur-alerte-100);
	}
}




/** screen reader only */
.sr-only {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	padding: 0 !important;
	border: 0 !important;
	height: 1px !important;
	width: 1px !important;
	overflow: hidden;
}

/* 
 * Cacher ce qui est vide 
 * 
 * Note: Le programme utilisé crée des balises vides avec
 * certaines classes CSS et utilise ces classes pour envoyer du contenu,
 * après coup, dedans… Mais parfois elles restent non utilisées.
 * Pour ne pas qu’elles perturbent l’affichage CSS et les marges,
 * on les enlève totalement du flux.
 * :empty n’est pas pris en compte s’il y a uniquement des espaces vides 
 * ou des sauts de ligne dans la balise. Il fait vraiment un contenu vide.
 */
h2:empty,
.zoneonglets2:empty,
.notifications:empty, 
.contexte:empty,
.zoneaffichage:empty,
.zonedescription:empty,
.titredescription:empty,
.zoneaction:empty,
.titreaction:empty,
.zonepied:empty {
	display:none;
}


/* Surcharges Vorple */
.force-hidden {
	position:absolute; left:-3000em;
}



/* Responsive */
@media (max-width: 620px) {
	ul.onglets li, 
	footer ul li {
		margin:0;
	}
	ul.onglets li + li::before,
	footer ul li + li::before {
		left:-.2em;
	}
}
@media (max-width: 520px) {
	header, footer {
		font-size:16px;
	}
}
/* Note : le pied de page contient la vie, l’imergie, la réserve d’imergie ET les munitions */
@media (max-width: 500px) {
	footer h3 { font-size: 1.1rem; }
	footer .zonepied li.etat-vie { flex:0 0 100%; }
	footer .zonepied li.etat-vie + li::before { display:none; }
}

@media (max-width: 460px) {
	body {
		font-size:16px;
	}
	/* réduire certains espacements */
	h1 {
		font-size:2.2rem;
		line-height:1.3em;
	}
	.notifications {
		margin:1em -1rem;
		width: auto;
	}
}