/* Art'Bastringue - habillage d'époque, mise en page fluide
   Palette et typographie reprises du site original (1997-2005). */

:root {
	--bg:      #000061;
	--texte:   #ffffff;
	--lien:    #a7a7e8;
	--visite:  #bfbfd7;
	--actif:   #7f7fb0;
	--filet:   #2a2a8a;
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	padding: 1.25rem;
	background-color: var(--bg);
	color: var(--texte);
	font-family: "Times New Roman", Times, serif;
	font-size: 1.0625rem;
	line-height: 1.55;
	-webkit-text-size-adjust: 100%;
}

a         { color: var(--lien); }
a:visited { color: var(--visite); }
a:hover,
a:active  { color: var(--actif); }
a:focus-visible {
	outline: 2px solid var(--texte);
	outline-offset: 2px;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
	border: 0;
}

.page {
	max-width: 1100px;
	margin: 0 auto;
}

.layout {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
	align-items: flex-start;
}

.aside {
	flex: 0 1 250px;
	margin-left: auto;
	margin-right: auto;
}

.aside--affiche { flex-basis: 412px; }

.aside img { margin: 0 auto; }

.contenu {
	flex: 1 1 22rem;
	min-width: 0;
	text-align: justify;
	hyphens: auto;
}

h1 {
	margin: 0 0 .15em;
	font-size: 1.85rem;
	font-weight: bold;
	letter-spacing: .09em;
}

h2 {
	margin: 0 0 1.4em;
	font-size: 1.15rem;
	font-weight: normal;
	font-style: italic;
	color: var(--visite);
}

h3 {
	margin: 2em 0 .6em;
	font-size: 1.15rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--filet);
	padding-bottom: .3em;
}

ul { padding-left: 1.4em; }
li { margin-bottom: .35em; }

.illustration {
	margin: 1.6em 0;
}

.illustration img {
	margin: 0 auto;
}

.jour {
	margin-bottom: .3em;
	font-weight: bold;
	letter-spacing: .04em;
}

.retour {
	margin-top: 2.2em;
	border: 0;
	text-transform: none;
	letter-spacing: 0;
}

.pied {
	max-width: 1100px;
	margin: 3rem auto 1rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--filet);
	text-align: center;
	letter-spacing: .05em;
}

.encart {
	margin-top: 1.5rem;
	text-align: center;
}

/* Écrans étroits : une seule colonne, texte au fer à gauche */
@media (max-width: 760px) {
	body { padding: .9rem; font-size: 1.0625rem; }
	.layout { gap: 1.5rem; }
	.contenu { text-align: left; }
	h1 { font-size: 1.55rem; }
	h2 { font-size: 1.05rem; }
	.aside, .aside--affiche { flex-basis: 100%; max-width: 420px; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}