/*
 * Prophezine - Responsive
 * Le design d'origine (menu à disques en sprite, mises en page en <table>,
 * largeurs fixes en "em") a été conçu pour un écran de bureau. Cette feuille
 * de style réagence l'affichage sur les écrans étroits (tablette / mobile)
 * sans toucher au rendu "bureau" d'origine.
 */

/* ---------------------------------------------------------------------
   Général : rien ne doit jamais dépasser la largeur de l'écran
--------------------------------------------------------------------- */

* {
	box-sizing: border-box;
}

img {
	max-width: 100%;
	height: auto;
}

table {
	max-width: 100%;
}

/* ---------------------------------------------------------------------
   Bouton menu (hamburger) : masqué sur le rendu bureau d'origine
--------------------------------------------------------------------- */

#prophezine-menu-toggle {
	display: none;
}

/* ---------------------------------------------------------------------
   Tablette et mobile
--------------------------------------------------------------------- */

@media (max-width: 900px) {

	body {
		font-size: 0.95em;
	}

	/* --- Bandeau de titre (en haut) --- */

	#titre {
		height: auto;
		min-height: 70px;
		background-size: cover;
		padding-bottom: 0.5em;
		overflow: hidden;
	}

	#titre h1 {
		display: none;
	}

	/* --- Sélecteur de tendance (juste sous la bannière) --- */

	#skin {
		padding: 0.75em 1em 0.5em 1em;
		float: none;
	}

	#skin div {
		width: auto;
		max-width: 100%;
	}

	#skin div p {
		white-space: normal;
	}

	/* --- Menu mobile : bouton "hamburger" replié par défaut, menu complet
	   affiché uniquement au clic (le menu à disques d'origine, en sprites
	   positionnés au pixel près, est de toute façon remplacé par une liste
	   de liens texte, impossible à conserver tel quel sur petit écran). --- */

	#nav {
		position: static;
		margin: 0;
		background: rgba(0,0,0,0.9);
	}

	#disque-base {
		display: none;
	}

	#prophezine-menu-toggle {
		display: flex;
		align-items: center;
		gap: 0.6em;
		width: 100%;
		padding: 0.8em 1em;
		background: none;
		border: 0;
		color: #fff;
		font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, Geneva, sans-serif;
		font-size: 1em;
		font-weight: bold;
		text-align: left;
		cursor: pointer;
	}

	.prophezine-menu-toggle-bars {
		display: inline-flex;
		flex-direction: column;
		justify-content: space-between;
		width: 22px;
		height: 16px;
		flex: 0 0 auto;
	}

	.prophezine-menu-toggle-bars span {
		display: block;
		height: 2px;
		background: #fff;
		border-radius: 1px;
	}

	#nav ul {
		position: static;
		width: auto;
		height: auto;
		background: none;
		display: none;
		flex-wrap: wrap;
		margin: 0;
		border-top: 1px solid rgba(255,255,255,0.15);
	}

	/* Menu déplié : ajouté en JS au clic sur le bouton */
	#nav.prophezine-menu-open ul {
		display: flex;
	}

	#nav.prophezine-menu-open #prophezine-menu-toggle {
		background: rgba(255,255,255,0.08);
	}

	#nav li {
		position: static;
		display: block;
		width: 50%;
	}

	#nav a {
		display: block;
		width: auto;
		height: auto;
		background: none !important;
		padding: 0.8em 1em;
		border: 1px solid rgba(255,255,255,0.15);
		color: #fff;
		font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, Geneva, sans-serif;
		font-size: 0.95em;
		text-align: center;
	}

	#nav a:hover, #nav a:focus, #nav a.on {
		background: rgba(255,255,255,0.15) !important;
	}

	#nav span {
		display: inline !important;
	}

	#nav span.disque {
		display: none !important;
	}

	/* --- Corps de la page --- */

	#corps {
		margin: 0.5em 0.5em 5px 0.5em;
		padding: 0 0.8em 0.8em 0.8em;
	}

	h1 {
		letter-spacing: 0.05em;
		font-size: 1.3em;
		margin-left: 0;
	}

	/* --- Toute mise en page en <table> passe en colonne unique --- */

	table, tbody, tr, td {
		display: block;
		width: 100% !important;
	}

	table td {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* --- Largeurs fixes en "em" du design d'origine : on les laisse respirer --- */

	form.carnet fieldset,
	form.livredor fieldset,
	.encadre {
		width: auto;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		float: none;
	}

	/* --- Colonne de droite (widgets) : passe sous le contenu principal --- */

	#content-columns {
		display: block;
	}

	#content-sidebar {
		width: auto;
		margin-top: 2em;
		padding-top: 1em;
		border-top: 1px solid #ccc;
	}

	/* --- Formulaires : les champs texte/textarea prennent toute la largeur --- */

	input[type="text"],
	input[type="url"],
	input[type="email"],
	input[type="search"],
	input[type="number"],
	textarea,
	select {
		max-width: 100%;
	}

	form.carnet textarea,
	form.livredor textarea,
	#nouvelle {
		width: 100%;
	}

	/* --- Grimoire : le tableau de filtres redevient un formulaire vertical --- */

	.filtre {
		margin-top: 0.6em;
	}

	/* --- Barre de navigation en haut d'un article (sommaire-aplat) --- */

	#sommaire-aplat {
		font-size: 0.9em;
		line-height: 1.6em;
	}

	/* --- Pied de page --- */

	#footer-left, #footer-right {
		float: none;
		text-align: center;
		margin: 0.3em 1em;
	}
}

/* ---------------------------------------------------------------------
   Très petits écrans
--------------------------------------------------------------------- */

@media (max-width: 480px) {

	#nav li {
		width: 100%;
	}

	h1 {
		font-size: 1.15em;
	}

	h2 {
		font-size: 1.2em;
	}
}