@import url("../../prosilver/theme/stylesheet.css");
/*  Les trois polices de la boutique. L'italique de Source Sans a ete
    retire le 4 septembre : la charte ne s'en sert nulle part, c'etait
    un fichier telecharge pour rien a chaque visite.

    A FAIRE PLUS TARD : heberger ces trois polices sur small-tracks.fr
    plutot que chez Google. Le forum sera plus rapide, et l'adresse
    Internet de vos visiteurs ne partira plus chez un tiers. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=JetBrains+Mono:wght@500;700&family=Source+Sans+3:wght@400;600;700&display=swap");

/* =========================================================================
   SMALL TRACKS 5.0 — la charte de la boutique, posee sur phpBB.
   Rien n'est remplace : on habille prosilver, on ne le refait pas. Une
   mise a jour de phpBB ne cassera donc rien ici.
   ========================================================================= */

:root {
	--orange:        #FF8209;
	--orange-fonce:  #BB5C00;
	--creme:          #FDF1E4;
	--bleu:          #1B3A6B;   /* uniquement le drapeau, comme la boutique */
	--rouge:         #B4232A;
	--encre:         #1C1C1E;
	--gris:          #5B616B;
	--filet:         #E2DDD4;
	--papier:        #F4F1EA;
	--papier-clair:  #FAF8F4;
	--carte:         #FFFFFF;
	--d: "Archivo", "Segoe UI", Arial, sans-serif;
	--c: "Source Sans 3", "Segoe UI", Arial, sans-serif;
	--m: "JetBrains Mono", Consolas, monospace;
}

/* ── le fond et le texte ─────────────────────────────────────────────── */

html { font-size: 100%; }

body {
	background: var(--papier);
	color: var(--encre);
	font-family: var(--c);
	font-size: 15px;
	line-height: 1.55;
	/*  Le semis de points de la boutique, aux valeurs exactes de la
	    maquette : un point de 1,15 px tous les 20 px. */
	background-image: radial-gradient(#D9D2C4 1.15px, transparent 1.15px);
	background-size: 20px 20px;
}

/*  Chrome « ancre » le defilement quand un element du haut retrecit.
    C'est ce qui faisait vibrer le bandeau de la boutique. */
html, body { overflow-anchor: none; }

#wrap {
	max-width: 1180px;
	padding: 0 22px;
	border: 0;
	background: transparent;
}

#page-body { margin: 26px 0 40px; }

a { color: var(--orange-fonce); text-decoration: none; }
a:hover { color: var(--orange-fonce); text-decoration: underline; }

/* =========================================================================
   LE BANDEAU DU HAUT — la maquette du 2 septembre, au pixel
   -------------------------------------------------------------------------
   Fond encre, filet orange, drapeau. Le BLEU n'apparait que dans le
   drapeau : c'est la regle de la boutique, et c'est la sienne.
   ========================================================================= */

.st5-entete {
	position: sticky;
	top: 0;
	z-index: 50;
	margin: 0 -22px;   /* il traverse toute la largeur, comme la maquette */
}

.st5-bandeau {
	background: var(--encre);
	color: var(--papier);
	border-bottom: 4px solid var(--orange);
	/*  On isole le bandeau du reste : ce qui change ici ne fait pas
	    recalculer la page entiere. C'est ce qui rend le repli fluide. */
	contain: layout paint;
}

.st5-large {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 22px;
	/*  Hauteur FIXE dans les deux etats. On anime une hauteur connue,
	    jamais un empilement de marges : sinon le bandeau vibre.

	    Passee de 98 a 152 px le 4 septembre, pour donner au logo
	    historique la place d'etre lu. Le bandeau se replie toujours au
	    defilement : cette hauteur ne coute rien a la lecture. */
	height: 152px;
	display: flex;
	align-items: center;
	gap: 26px;
	transition: height .22s ease;
}

.st5-entete.reduit .st5-large { height: 58px; }

/* ── le logo ──────────────────────────────────────────────────────────── */

.st5-logo {
	width: 360px;
	height: 126px;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	transition: width .22s ease, height .22s ease;
}

/*  L'image porte ses dimensions dans le gabarit : le navigateur reserve
    la place avant meme de l'avoir chargee, et rien ne saute a
    l'affichage. Ici on ne fait que la contraindre. */
.st5-logo img {
	width: 100%;
	height: auto;
	max-height: 100%;
	display: block;
}

/*  Replie : le logo suit, sans jamais deborder du bandeau. */
.st5-entete.reduit .st5-logo { width: 145px; height: 51px; }

/*  RETIRE LE 4 SEPTEMBRE.

    Vivaient ici la pastille de secours de phpBB et le cadre en
    pointilles « VOTRE LOGO ICI ». Le vrai logo est arrive : les deux
    n'ont plus lieu d'etre, et les laisser aurait fini par ecraser les
    tailles reelles. */

/* ── le titre ─────────────────────────────────────────────────────────── */

/*  CENTRAGE DU 4 SEPTEMBRE.

    Le bloc du titre occupe desormais toute la place libre entre le logo
    et la colonne de droite, et son contenu est centre dedans. Le
    drapeau suit, centre lui aussi. */
.st5-titraille {
	flex: 1 1 auto;
	min-width: 0;
	text-align: center;
}

.st5-titre {
	font-family: var(--d);
	font-weight: 800;
	font-size: 30px;
	letter-spacing: -.02em;
	line-height: 1;
	color: var(--papier);
	display: block;
	transition: font-size .22s ease;
}

.st5-titre:hover { color: #fff; text-decoration: none; }

.st5-baseline {
	font-size: 12.5px;
	color: rgba(244, 241, 234, .62);
	margin-top: 3px;
	line-height: 1.35;
}

/*  « depuis 2008 » : sur sa propre ligne, et plus discret. Ce n'est pas
    le slogan, c'est sa signature. */
.st5-depuis {
	display: block;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(244, 241, 234, .45);
	margin-top: 2px;
}

/*  Le drapeau, et le seul endroit ou le bleu a le droit d'exister. */
.st5-drapeau {
	height: 3px;
	width: 104px;
	margin: 7px auto 0;
	border-radius: 2px;
	background: linear-gradient(90deg,
		var(--bleu) 0 33.3%, #F4F1EA 33.3% 66.6%, var(--rouge) 66.6% 100%);
}

.st5-entete.reduit .st5-titre { font-size: 19px; }
.st5-entete.reduit .st5-baseline,
.st5-entete.reduit .st5-drapeau,
.st5-entete.reduit .st5-compte { display: none; }

/* ── la colonne de droite : les comptes, puis la loupe ────────────────── */

/*  Un seul bloc, cale sur le bord droit. Les deux elements se suivent
    verticalement et partagent le meme bord : c'est ce qui met fin au
    desequilibre du bandeau. */
.st5-droite {
	margin-left: auto;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
}

.st5-compte {
	text-align: center;
	white-space: nowrap;
	font-size: 12.5px;
	color: rgba(244, 241, 234, .72);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.st5-compte b {
	font-family: var(--d);
	font-weight: 700;
	color: #fff;
	font-size: 15px;
}

/*  Le point de separation : ni colle aux mots, ni perdu au milieu. */
.st5-point {
	display: inline-block;
	padding: 0 7px;
	color: rgba(244, 241, 234, .34);
}

/* ── la loupe, discrete, dans le bandeau ──────────────────────────────── */

/*  prosilver donne a sa boite de recherche des marges prevues pour une
    barre de navigation. Ici elle est dans le bandeau : on les remet a
    zero, sinon elle ne retombe pas a la bonne hauteur. */
.st5-loupe { flex: 0 0 auto; margin: 0; float: none; }
.st5-loupe fieldset { margin: 0; padding: 0; border: 0; }
.st5-loupe .inputbox { background: rgba(255, 255, 255, .08); border-color: rgba(255,255,255,.18); color: var(--papier); }
.st5-loupe .inputbox::placeholder { color: rgba(244, 241, 234, .5); }

/* ── la barre de menu de phpBB, habillee comme la maquette ────────────── */

.navbar {
	background: var(--papier-clair);
	border: 0;
	border-bottom: 1px solid var(--filet);
	border-radius: 0;
	margin: 0;
	padding: 0;
}

.navbar .inner { max-width: 1180px; margin: 0 auto; padding: 0 22px; }

.navbar .linklist > li > a {
	font-family: var(--d);
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--gris);
	border-bottom: 3px solid transparent;
	padding: 12px 13px;
}

.navbar .linklist > li > a:hover {
	color: var(--encre);
	border-bottom-color: var(--filet);
	text-decoration: none;
}

.st5-entete.reduit .navbar .linklist > li > a { padding-top: 8px; padding-bottom: 8px; }

/*  Sur un ecran moyen, les trois nombres sur une ligne deviendraient
    trop longs : ils s'effacent, la loupe reste. */
@media (max-width: 1040px) {
	.st5-compte { display: none; }
}

@media (max-width: 700px) {
	.st5-large { height: auto; padding: 12px 12px; flex-wrap: wrap; gap: 12px; }
	.st5-droite { margin-left: auto; }
	.st5-entete { position: static; margin: 0 -10px; }
	.st5-titre { font-size: 21px; }
	.st5-logo { width: 240px; height: 84px; }
	.st5-compte { display: none; }
}

/* ── le titre d'une rubrique ─────────────────────────────────────────── */

.forabg, .forumbg {
	background: transparent;
	border-radius: 12px;
	padding: 0;
	margin-bottom: 11px;
	box-shadow: none;
}

.forabg .inner, .forumbg .inner {
	background: var(--carte);
	border: 1px solid var(--filet);
	border-radius: 7px;
	overflow: hidden;
}

/*  Le nom de la rubrique se lit sur le papier, pas sur un bandeau de
    couleur : c'est la boutique, pas un forum d'usine. L'orange ne sert
    qu'a souligner. */
ul.topiclist li.header {
	background: var(--papier-clair);
	border-bottom: 2px solid var(--filet);
	box-shadow: inset 4px 0 0 var(--orange);
}

ul.topiclist li.header dt,
ul.topiclist li.header dd {
	font-family: var(--d);
	font-weight: 700;
	font-size: 1.08rem;
	letter-spacing: -.01em;
	color: var(--encre);
	text-transform: none;
	text-shadow: none;
	padding-top: 11px;
	padding-bottom: 11px;
}

ul.topiclist li.header dd { font-size: .82rem; font-weight: 600; color: var(--gris); }

ul.topiclist li.header dt a { color: var(--encre); }
ul.topiclist li.header dt a:hover { color: var(--orange-fonce); }

/* ── les sections ────────────────────────────────────────────────────── */

ul.topiclist dt,
ul.topiclist dd { font-size: 1rem; }

li.row {
	background: var(--carte);
	border-top: 1px solid var(--filet);
}

li.row:first-child { border-top: 0; }
li.row:hover { background: var(--papier-clair); }

li.row strong { font-weight: 600; }

a.forumtitle, a.topictitle {
	font-family: var(--d);
	font-weight: 600;
	font-size: 1.06rem;
	color: var(--encre);
	text-shadow: none;
}

a.forumtitle:hover, a.topictitle:hover { color: var(--orange-fonce); }

.forum-image img { max-width: 34px; max-height: 34px; }

dl.row-item dt .list-inner { padding-left: 48px; }

/* Les compteurs, en chiffres alignes : une colonne de nombres doit se
   lire d'un coup d'oeil, pas se dechiffrer. */
dd.posts, dd.topics, dd.views {
	font-variant-numeric: tabular-nums;
	color: var(--gris);
	font-size: .95rem;
}

dd.lastpost > span { font-size: .92rem; color: var(--gris); }

/* =========================================================================
   L'ACCUEIL : LES RUBRIQUES EN CARTES, LES SECTIONS EN PASTILLES
   -------------------------------------------------------------------------
   Valeurs reprises telles quelles de la maquette du 2 septembre. Ce ne
   sont pas mes proportions : ce sont les siennes.
   ========================================================================= */

.st5-accueil { counter-reset: rubrique; }

.rubrique {
	background: var(--carte);
	border: 1px solid var(--filet);
	border-radius: 7px;
	margin-bottom: 11px;
	overflow: hidden;
	counter-increment: rubrique;
}

.rub-tete {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 12px 15px;
}

/*  L'icone de la rubrique — la vôtre, celle de l'ancien forum.
    Hauteur fixe, largeur libre : les dessins n'ont pas tous la meme
    largeur, et les deformer serait pire que de ne rien mettre. */
.rub-icone {
	width: 66px;
	height: 42px;
	flex: 0 0 auto;
	display: block;
	/*  Le dessin garde ses proportions et se cale a gauche de son
	    emplacement : toutes les cartes s'alignent, quelle que soit la
	    largeur du dessin. */
	object-fit: contain;
	object-position: left center;
}

/*  Une rubrique sans icone garde sa place, pour que rien ne se decale. */
.rub-icone-vide { background: none; }

/*  Le numero se compte tout seul : ajouter ou retirer une rubrique ne
    demande de renumeroter nulle part. */
.rub-tete .num {
	font-family: var(--m);
	font-weight: 700;
	font-size: 12px;
	color: var(--orange-fonce);
	background: var(--creme);
	border-radius: 4px;
	padding: 5px 8px;
	flex: 0 0 auto;
}

.rub-tete .num::before { content: counter(rubrique, decimal-leading-zero); }

.rub-nom {
	font-family: var(--d);
	font-weight: 700;
	font-size: 17.5px;
	letter-spacing: -.01em;
}

.rub-nom a { color: var(--encre); }
.rub-nom a:hover { color: var(--orange-fonce); text-decoration: none; }

.rub-nb {
	margin-left: auto;
	font-family: var(--m);
	font-size: 12px;
	color: var(--gris);
	white-space: nowrap;
}

.rub-nb b { color: var(--encre); }

.rub-mot {
	padding: 0 15px 10px;
	margin-top: -6px;
	font-size: 13px;
	color: var(--gris);
}

.sections {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0 15px 13px;
}

a.sec {
	font-size: 12.5px;
	border: 1px solid var(--filet);
	border-radius: 20px;
	padding: 3px 11px;
	background: var(--papier-clair);
	color: var(--gris);
	display: inline-flex;
	align-items: center;
	gap: 5px;
	line-height: 1.5;
	transition: border-color .12s, background .12s;
}

a.sec:hover { border-color: var(--orange); background: var(--carte); text-decoration: none; }
a.sec b { color: var(--encre); font-weight: 600; }

a.sec i {
	font-style: normal;
	font-family: var(--m);
	font-size: 10.5px;
	color: var(--orange-fonce);
	font-variant-numeric: tabular-nums;
}

/*  Une section ou il y a du neuf se voit sans qu'on la cherche. */
a.sec.neuve {
	background: var(--creme);
	border-color: #F3D9BD;
}

a.sec.neuve b { color: var(--orange-fonce); }

/*  L'icone facultative, devant le nom. Rien si rien. */
.sec-img { display: inline-flex; }
.sec-img img { max-width: 16px; max-height: 16px; display: block; }

@media (max-width: 700px) {
	.rub-nom { font-size: 15.5px; }
	.rub-nb { font-size: 11px; }
	.rub-icone { width: 50px; height: 32px; }
	.sections { padding: 0 11px 11px; }
}

/* ── les boutons ─────────────────────────────────────────────────────── */

.button {
	background: var(--carte);
	border: 1px solid var(--filet);
	border-radius: 8px;
	color: var(--encre);
	font-family: var(--c);
	font-weight: 600;
}

.button:hover {
	background: var(--creme);
	border-color: var(--orange);
	color: var(--orange-fonce);
}

.button.button-secondary:hover .icon,
.button:hover .icon { color: var(--orange-fonce); }

/* ── la recherche ────────────────────────────────────────────────────── */

.search-header {
	background: var(--papier-clair);
	border: 1px solid var(--filet);
	border-radius: 8px;
	box-shadow: none;
}

.search-header .inputbox { color: var(--encre); }

/* ── les messages ────────────────────────────────────────────────────── */

.post {
	background: var(--carte) !important;
	border: 1px solid var(--filet);
	border-radius: 12px;
	margin-bottom: 14px;
	padding: 4px 6px;
}

.postbody { color: var(--encre); }

.postbody h3, .postbody h3 a {
	font-family: var(--d);
	font-weight: 700;
	color: var(--encre);
}

blockquote {
	background: var(--creme);
	border: 1px solid #F3DCC4;
	border-left: 4px solid var(--orange);
	border-radius: 8px;
}

blockquote cite { color: var(--orange-fonce); font-style: normal; font-weight: 600; }

.codebox {
	background: var(--papier-clair);
	border: 1px solid var(--filet);
	border-radius: 8px;
}

/* Une photo de montage merite d'etre vue : on la laisse respirer. */
.postbody .content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

/* ── le pied de page ─────────────────────────────────────────────────── */

.copyright { color: var(--gris); font-size: .88rem; }

#page-footer .navbar { margin-bottom: 10px; }

/* ── les petits ecrans ───────────────────────────────────────────────── */

@media (max-width: 700px) {
	#wrap { padding: 0 10px; }
	.headerbar { padding: 14px; border-radius: 10px; }
	.site-description h1, .site-description h1 a { font-size: 1.5rem; }
	a.forumtitle, a.topictitle { font-size: 1rem; }
}

/* ── les titres de familles, et le menage de l'accueil ────────────────── */

.titre-famille {
	font-family: var(--d);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gris);
	margin: 22px 0 9px;
}

.st5-accueil > .titre-famille:first-child { margin-top: 0; }

/*  « Il est vendredi 4 septembre, 5 h 04 » : phpBB le met en haut de
    l'accueil. La maquette ne l'a pas, et l'heure est deja au pied de
    page. On le retire de l'accueil, et de la seulement. */
.section-index #page-body > p.time { display: none; }

/* =========================================================================
   LA COLONNE DE GAUCHE DE L'ACCUEIL — 5 septembre
   -------------------------------------------------------------------------
   Elle reprend les blocs de la colonne de gauche de la boutique, pour que
   le visiteur retrouve les memes reperes d'un site a l'autre.

   Elle n'existe QUE sur l'accueil : le gabarit qui la porte n'est utilise
   que la. Les pages de sujets gardent toute leur largeur.
   ========================================================================= */

.st5-deux-colonnes {
	display: flex;
	align-items: flex-start;
	gap: 22px;
}

.st5-cote {
	flex: 0 0 252px;
	width: 252px;
	position: sticky;
	top: 76px;   /* sous le bandeau replie */
}

.st5-principal { flex: 1 1 auto; min-width: 0; }

.st5-bloc {
	background: var(--carte);
	border: 1px solid var(--filet);
	border-radius: 12px;
	padding: 13px 14px 14px;
	margin-bottom: 11px;
}

.st5-bloc h3 {
	font-family: var(--d);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--orange-fonce);
	margin: 0 0 9px;
	padding-bottom: 7px;
	border-bottom: 1px solid var(--filet);
}

/*  Un lien de la colonne : le nom en clair, et dessous ce qu'on y trouve.
    C'est la deuxieme ligne qui donne envie de cliquer, pas la premiere. */
.st5-lien {
	display: block;
	padding: 7px 8px;
	margin: 0 -8px;
	border-radius: 7px;
	font-family: var(--d);
	font-weight: 600;
	font-size: 13.5px;
	color: var(--encre);
	line-height: 1.25;
}

.st5-lien span {
	display: block;
	font-family: var(--c);
	font-weight: 400;
	font-size: 11.5px;
	color: var(--gris);
	margin-top: 2px;
}

.st5-lien:hover {
	background: var(--creme);
	color: var(--orange-fonce);
	text-decoration: none;
}

.st5-lien:hover span { color: var(--gris); }

.st5-note {
	font-size: 11.5px;
	color: var(--gris);
	margin: 9px 0 0;
	line-height: 1.4;
}

/*  Sur un ecran etroit, la colonne passe SOUS les rubriques : personne
    n'est venu pour elle, elle ne doit pas retarder ce qu'on cherche. */
@media (max-width: 900px) {
	.st5-deux-colonnes { display: block; }
	.st5-cote { width: auto; position: static; margin-top: 18px; }
	.st5-bloc { border-radius: 10px; }
}

/*  La vignette de walkaround, tiree au sort. Hauteur fixe et recadrage
    au centre : les photos n'ont pas toutes le meme format, et le bloc ne
    doit pas sauter d'une visite a l'autre. */
.st5-walk {
	display: block;
	position: relative;
	margin: 10px 0 9px;
	border-radius: 8px;
	overflow: hidden;
	line-height: 0;
}

/*  CORRIGE LE 5 SEPTEMBRE. « cover » remplissait le cadre en rognant ce
    qui depassait : une photo verticale — un fuselage debout, une figurine
    en pied — se retrouvait coupee en haut et en bas. « contain » montre la
    photo ENTIERE, quitte a laisser deux bandes de papier sur les cotes.
    Un walkaround sert a montrer un detail : le couper le prive de sens.

    La hauteur reste fixe : sans elle, le bloc sauterait a chaque visite
    selon le format de la photo tiree au sort. */
.st5-walk img {
	width: 100%;
	height: 148px;
	object-fit: contain;
	display: block;
	background: var(--papier);
	transition: transform .35s ease;
}

.st5-walk:hover img { transform: scale(1.02); }

.st5-walk b {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 16px 10px 7px;
	font-family: var(--d);
	font-weight: 700;
	font-size: 13px;
	line-height: 1.2;
	color: #fff;
	background: linear-gradient(transparent, rgba(28, 28, 30, .82));
}