/* =====================================================================
   HABILLAGE SOFIA — surcharge du thème Elegance
   Claude, 29/08/2026.

   Pourquoi un fichier à part : Elegance est compilé depuis du SCSS, et son
   stylesheet.css (5 607 lignes) porte en tête « DO NOT EDIT ». C'est un
   produit de compilation : le modifier serait perdu à la moindre
   recompilation, et il n'y a pas de compilateur SASS sur cancale.

   Piège rencontré le 29/08/2026 : tweaks.css semblait le point d'accroche
   idéal (chargé en dernier), mais overall_header.html l'enferme dans un
   <!--[if lte IE 9]> — aucun navigateur moderne ne le lit. D'où ce fichier,
   appelé par un <link> ajouté juste après utilities.css.

   Retour arrière : supprimer ce fichier, retirer les deux lignes ajoutées
   dans overall_header.html (original en overall_header.html.orig), vider le
   cache. Les logos d'origine sont en images/logo*.png.phpbb-orig.

   Palette relevée le 29/08/2026 dans le thème enfant WordPress
   wp-content/themes/blocksy-sofia/style.css — mêmes valeurs que le site.
   ================================================================== */

:root {
	--sofia-bleu:        #336699; /* bandeau, menu, titres */
	--sofia-bleu-fonce:  #224466; /* survol */
	--sofia-gris:        #DFDFDF; /* bordures */
	--sofia-gris-fond:   #BFBFBF; /* marges latérales de la page */
	--sofia-lien-survol: #FF8000; /* survol des liens, comme Escal */
}

/* ---------------------------------------------------------------------
   1. LE BANDEAU — logo sur blanc à gauche, nom du site en blanc sur bleu.
   Reprend la composition de l'en-tête du site sous WordPress
   (.sofia-entete-corps : dégradé blanc jusqu'à 330px, puis bleu).
   ------------------------------------------------------------------ */
.headerbar {
	background-color: var(--sofia-bleu);
	border-radius: 5px;
}

.headerbar > .inner {
	padding: 0;
}

/* Elegance pose un clearfix ::before/::after sur .site-description ;
   ces pseudo-éléments deviendraient des enfants flexibles. */
.site-description {
	display: flex;
	align-items: stretch;
}
.site-description::before,
.site-description::after {
	content: none;
}

.logo {
	flex: 0 0 auto;
	float: none;
	display: flex;
	align-items: center;
	background-color: #fff;
	padding: 8px 14px;
	border-radius: 5px 0 0 5px;
}

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

/* Le <p> sans classe porte {SITE_DESCRIPTION} ; les deux autres sont
   p.sitename (« SOFIA », redondant avec le logo) et p.skiplink. */
.site-description > p:not(.sitename):not(.skiplink) {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	margin: 0;
	/* La réserve de droite dégage la boîte de recherche, qu'Elegance
	   positionne en absolu à right:5px. */
	padding: 12px 240px 12px 26px;
	color: #fff;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	font-weight: bold;
	font-size: 22px;
	line-height: 1.25;
}

/* La boîte de recherche se pose maintenant sur du bleu. */
.headerbar .search-header {
	border-color: rgba(255, 255, 255, 0.45);
	box-shadow: none;
}

/* Sous 700px Elegance centre le logo, masque le texte et la recherche, et
   supprime les arrondis. La règle de titre ci-dessus est plus spécifique que
   son `display: none` : elle l'emporterait même dans cette largeur, avec une
   réserve de 240px devenue inutile puisque la recherche est masquée. On
   empile donc explicitement, et on garde le nom du site — il est lisible. */
@media (max-width: 700px) {
	.headerbar {
		border-radius: 0;
	}
	.site-description {
		display: block;
	}
	.logo {
		display: block;
		border-radius: 0;
		padding: 10px;
	}
	.logo img {
		margin: 0 auto;
	}
	.site-description > p:not(.sitename):not(.skiplink) {
		display: block;
		padding: 10px 14px 14px;
		text-align: center;
		font-size: 17px;
	}
}

/* ---------------------------------------------------------------------
   2. LE BLEU — Elegance emploie #3462a0, la SOFIA #336699.
   Les deux sont proches ; on aligne pour que le forum et le site ne
   jurent pas côte à côte.
   ------------------------------------------------------------------ */
a,
h2,
.sep,
.postlink,
.pagination li a,
.pagination li.page-jump a::after {
	color: var(--sofia-bleu);
}

.postlink {
	border-bottom-color: var(--sofia-bleu);
}

.forabg ul.topiclist li.header,
.forumbg ul.topiclist li.header,
.panel > .inner > h3:first-child,
.panel > h3:first-child,
table.table1 thead th,
.jumpbox-cat-link,
.navbar .nav-tabs,
.pagination li.active span {
	background-color: var(--sofia-bleu);
	border-color: var(--sofia-bleu);
}

.navbar .nav-tabs .tab.selected {
	color: var(--sofia-bleu);
}

.jumpbox .dropdown li {
	border-top-color: var(--sofia-bleu);
}

/* ---------------------------------------------------------------------
   3. LE SURVOL — Escal passe les liens à l'orange (#FF8000) ; Elegance
   les passe au rouge (#b93329). On aligne sur le site.
   Le rouge d'Elegance est DÉLIBÉRÉMENT conservé partout où il signale
   une anomalie : .error, div.rules, p.post-notice, et la pastille de
   notification (.tab > strong). Un message d'erreur orange ne se lit
   plus comme une erreur.
   ------------------------------------------------------------------ */
a:hover,
.postlink:hover,
a.time:hover,
a.top:hover,
a.top2:hover,
.pagination li.page-jump a:hover::after {
	color: var(--sofia-lien-survol);
}

/* Sur la barre bleue, l'orange manquerait de contraste : on reprend le
   procédé du menu du site — fond bleu foncé, texte blanc. */
.navbar .nav-tabs .tab:hover,
.navbar .nav-tabs .tab.dropdown-visible {
	background-color: var(--sofia-bleu-fonce);
	color: #fff;
}

.pagination li a:hover,
.pagination .dropdown-visible a.dropdown-trigger {
	background-color: var(--sofia-bleu-fonce);
	border-color: var(--sofia-bleu-fonce);
}

/* ---------------------------------------------------------------------
   4. LES MARGES DE LA PAGE — le site pose #BFBFBF de part et d'autre du
   contenu (valeur arrêtée par Cyril le 28/08/2026 après essais).
   ------------------------------------------------------------------ */
html,
body {
	background-color: var(--sofia-gris-fond);
}