@charset "utf-8";
/* ==========================================================================
   Aminfostrad - Theme front INFORMATUX "Moniteur Amstrad CPC 464"
   --------------------------------------------------------------------------
   Base reprise de style-404.css (scanlines CRT), passee au bleu.
   Toutes les couleurs sont des variables : recolorer le theme se fait ici.
   ========================================================================== */

/* ---- Police du CPC 464 -------------------------------------------------- */
/* Glyphes 8x8 extraits de la table de caracteres de la ROM du CPC 464
   (cpc464.rom, offset 0x3900). Le jeu du CPC n'ayant pas de « © », ce
   seul glyphe a ete redessine dans le meme style. */
@font-face {
	font-family: 'Amstrad CPC464';
	src: url('fonts/amstrad-cpc464.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: block;
}

/* ---- Variables ---------------------------------------------------------- */
:root {
	/* --- Phosphore bleu --- */
	--am-ink:        rgba(150, 200, 255, 0.90);
	--am-ink-bright: #ffffff;
	--am-glow:       rgba(51, 153, 255, 1);
	--am-glow-soft:  rgba(32, 96, 176, 0.80);
	--am-accent:     #ffff00;          /* jaune CPC, pour les accents */
	--am-paper:      #000080;          /* bleu PAPER du CPC 464 */
	--am-deep:       #01060f;

	/* --- Overlay par defaut (cf. config.php) ---
	   Le fond occupe TOUT le trou du bezel, sinon ses angles droits
	   laissent voir des coins noirs dans les arrondis du tube. Le texte,
	   lui, reste dans le rectangle inscrit via --mon-safe-*.
	   Chaque overlay ayant sa propre geometrie, ces valeurs sont
	   redefinies plus bas par [data-overlay]. */
	--mon-image:   url('images/amstrad-overlay-1.png');
	--mon-left:    14.583%;
	--mon-top:      2.778%;
	--mon-width:   70.781%;
	--mon-height:  93.704%;
	/* Aucun arrondi : le fond occupe toute la boite du trou et c'est le
	   bezel, opaque au-dela, qui dessine la courbe. Un rayon fixe ne peut
	   pas convenir aux deux overlays — le tube du premier est tres arrondi
	   (560 px de bezel opaque sur sa ligne du haut), celui du second
	   presque droit (15 px) — et laissait voir le fond de page dans les
	   coins du second. */
	--mon-radius:   0;
	--mon-safe-x:   1.9%;
	--mon-safe-y:   2.1%;

	/* --- Polices --- */
	--am-pix:  'Silkscreen', 'Courier New', monospace;
	--am-body: 'Inconsolata', 'IBM Plex Mono', Consolas, monospace;
	--am-cpc:  'Amstrad CPC464', 'Inconsolata', Consolas, monospace;
}

/* ---- Base --------------------------------------------------------------- */
* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}

body {
	background-color: #000000;
	font-family: var(--am-body), Helvetica, sans-serif;
	font-size: 1.15rem;
	line-height: 1.55;
	color: var(--am-ink);
	text-shadow:
		0 0 1ex var(--am-glow),
		0 0 2px rgba(255, 255, 255, 0.8);
	overflow: hidden;
}

a {
	color: var(--am-ink-bright);
	text-decoration: none;
}
/* Les crochets encadrent les liens de texte, jamais une vignette. */
a:not(:has(img))::before { content: "["; }
a:not(:has(img))::after  { content: "]"; }
a:hover { color: var(--am-accent); }

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

/* ==========================================================================
   1. Le moniteur
   ========================================================================== */

/* Le cadre garde le ratio de l'overlay (1920x1080) et se centre dans la
   fenetre, façon object-fit:contain : la zone d'ecran reste donc toujours
   alignee sur le bezel, quel que soit le format de la fenetre. */
.monitor {
	position: fixed;
	inset: 0;
	display: grid;
	place-items: center;
	background: #262628;
	overflow: hidden;
}

.monitor__frame {
	position: relative;
	width:  min(100vw, calc(100vh * 1920 / 1080));
	height: min(100vh, calc(100vw * 1080 / 1920));
}

/* Le bezel decoupe (interieur transparent) passe AU-DESSUS du contenu.
   Image posee en fond et non en <img> : le choix du visiteur se fait
   alors par une simple bascule de variable CSS. */
.monitor__bezel {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 30;
	pointer-events: none;
	user-select: none;
	background-image: var(--mon-image);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

/* Tout ce qui doit epouser exactement la zone d'ecran du bezel. */
.monitor__screen,
.monitor__crt,
.monitor__tools,
.boot {
	position: absolute;
	left:   var(--mon-left);
	top:    var(--mon-top);
	width:  var(--mon-width);
	height: var(--mon-height);
	border-radius: var(--mon-radius);
}

/* La zone d'ecran : c'est la que vit le site, et c'est elle qui defile. */
.monitor__screen {
	z-index: 10;
	padding: var(--mon-safe-y) var(--mon-safe-x);
	overflow-x: hidden;
	overflow-y: auto;
	background-color: #000000;
	background-image: radial-gradient(circle at 50% 45%, #0b2a5e, var(--am-deep));
	scrollbar-width: thin;
	scrollbar-color: var(--am-glow-soft) transparent;
}
.monitor__screen::-webkit-scrollbar { width: 8px; }
.monitor__screen::-webkit-scrollbar-track { background: transparent; }
.monitor__screen::-webkit-scrollbar-thumb { background: var(--am-glow-soft); }

/* ==========================================================================
   2. Effet CRT - repris de style-404.css
   ========================================================================== */

/* Trame de lignes + balayage vertical. Calque frere de .monitor__screen et
   non enfant : sinon il defilerait avec le contenu et ne couvrirait que le
   premier ecran. */
.monitor__crt {
	pointer-events: none;
	z-index: 20;
	overflow: hidden;
	background:
		repeating-linear-gradient(
			180deg,
			rgba(0, 0, 0, 0) 0,
			rgba(0, 0, 0, 0.3) 50%,
			rgba(0, 0, 0, 0) 100%);
	background-size: auto 4px;
	z-index: 20;
}

.monitor__crt::before {
	content: "";
	pointer-events: none;
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(
		0deg,
		transparent 0%,
		rgba(32, 96, 176, 0.2) 2%,
		rgba(32, 96, 176, 0.8) 3%,
		rgba(32, 96, 176, 0.2) 3%,
		transparent 100%);
	background-repeat: no-repeat;
	animation: scan 7.5s linear 0s infinite;
}

/* Vignettage : assombrit les bords comme un vrai tube. */
.monitor__crt::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse at 50% 50%,
		rgba(0, 0, 0, 0) 55%,
		rgba(0, 0, 0, 0.55) 100%);
}

@keyframes scan {
	0%        { background-position: 0 -100vh; }
	35%, 100% { background-position: 0 100vh; }
}

/* ==========================================================================
   3. Contenu dans l'ecran
   ========================================================================== */

.screen-inner {
	position: relative;
	z-index: 15;
	min-height: 100%;
	padding: 2.2rem 2.6rem 3rem;
	text-transform: uppercase;
}

.screen-head {
	display: flex;
	align-items: center;
	gap: .8rem;
	font-family: var(--am-pix);
	font-size: .78rem;
	letter-spacing: 1px;
	color: var(--am-accent);
	border-bottom: 2px solid var(--am-glow-soft);
	padding-bottom: .9rem;
	margin-bottom: 1.4rem;
}
.screen-head img {
	width: 34px;
	height: auto;
	/* Le logo source est vert : on le ramene au bleu du phosphore. */
	filter: hue-rotate(105deg) saturate(1.4) brightness(1.15);
}
.screen-head a::before, .screen-head a::after { content: ""; }

.screen-nav {
	margin-left: auto;
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

h1, h2, h3, h4 {
	font-family: var(--am-pix);
	color: var(--am-ink-bright);
	letter-spacing: 1px;
	line-height: 1.35;
}
h1 { font-size: 1.25rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: .92rem; color: var(--am-accent); }

.output::before { content: "> "; }

.screen-foot {
	margin-top: 2.4rem;
	padding-top: 1rem;
	border-top: 2px solid var(--am-glow-soft);
	font-family: var(--am-pix);
	font-size: .68rem;
	letter-spacing: 1px;
}

/* Curseur clignotant du CPC. */
.cursor {
	display: inline-block;
	width: .62em;
	height: 1.05em;
	background: var(--am-ink);
	vertical-align: -.18em;
	animation: blink .55s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ==========================================================================
   4. Page d'accueil : transition de demarrage
   ========================================================================== */

.boot {
	z-index: 25;
	background: var(--am-paper);
	/* Sans ce clip, les bandes de couleur debordent de l'arrondi du tube. */
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4%;
	transition: opacity .45s steps(6, end);
}
.boot.is-gone { opacity: 0; pointer-events: none; }

/* Bandes de couleur defilantes du bord d'ecran de chargement. */
.boot__stripes {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(
		180deg,
		#ff0000 0 5px,
		#ffff00 5px 9px,
		#00ffff 9px 14px,
		#ff00ff 14px 19px,
		#00ff00 19px 24px);
	animation: crawl .28s linear infinite;
}
@keyframes crawl { to { background-position: 0 24px; } }

.boot__inner {
	position: absolute;
	inset: 14px;
	background: var(--am-paper);
	border-radius: var(--mon-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4%;
}

.boot__text {
	/* Vraie police du CPC 464 : pas de lissage, sinon les pixels bavent. */
	font-family: var(--am-cpc);
	-webkit-font-smoothing: none;
	font-smooth: never;
	color: var(--am-accent);
	line-height: 1.5;
	text-shadow: none;
	text-transform: none;
	/* L'ecran du CPC fait 40 colonnes : le bloc est cale dessus, et la
	   taille suit la fenetre pour que les lignes ne se coupent jamais.
	   La police etant monospace a chasse pleine, 1 caractere = 1em. */
	width: 40ch;
	max-width: 100%;
	font-size: clamp(9px, 1.35vw, 20px);
	white-space: pre;
	overflow-x: auto;
}
.boot__text .cursor { background: var(--am-accent); }

.boot__skip {
	position: absolute;
	bottom: 5%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	font-family: var(--am-cpc);
	font-size: .7rem;
	letter-spacing: 1px;
	background: none;
	border: 2px solid var(--am-accent);
	color: var(--am-accent);
	padding: .6rem 1rem;
	cursor: pointer;
	text-shadow: none;
}
.boot__skip:hover { background: var(--am-accent); color: var(--am-paper); }

/* ==========================================================================
   5. Adaptatif
   ========================================================================== */

/* Sous 900px le bezel mangerait tout l'espace : on le retire et l'ecran
   occupe la fenetre entiere, en gardant l'effet CRT. */
@media (max-width: 900px) {
	.monitor__frame {
		width: 100vw;
		height: 100vh;
		height: 100dvh;
	}
	.monitor__bezel { display: none; }
	.monitor__screen,
	.monitor__crt,
	.monitor__tools,
	.boot {
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		border-radius: 0;
	}
	.monitor__screen { padding: 0; }
	.screen-inner { padding: 1.2rem 1.1rem 2rem; }
	body { font-size: 1rem; }
}

/* Respect du reglage systeme : ni balayage, ni clignotement, ni defilement. */
@media (prefers-reduced-motion: reduce) {
	.monitor__crt::before,
	.boot__stripes,
	.cursor {
		animation: none;
	}
}

/* ---- Page 404 ----------------------------------------------------------- */
.errorcode { color: var(--am-accent); }

/* ---- Listes de contenu -------------------------------------------------- */
.crt-list {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
}
.crt-list li {
	padding: .45rem 0;
	border-bottom: 1px dotted var(--am-glow-soft);
}
.crt-list li::before { content: "> "; }

.crt-date {
	color: var(--am-accent);
	margin-right: .8rem;
}
.crt-cat {
	opacity: .65;
	margin-left: .8rem;
	font-size: .82em;
}

/* ---- Formulaires -------------------------------------------------------- */
.crt-form input,
.crt-form textarea,
.crt-form select {
	background: rgba(0, 0, 0, .45);
	border: 2px solid var(--am-glow-soft);
	color: var(--am-ink);
	font-family: var(--am-body);
	font-size: 1rem;
	padding: .5rem .7rem;
	width: 100%;
	max-width: 34em;
	margin-bottom: .9rem;
}
.crt-form input:focus,
.crt-form textarea:focus {
	outline: none;
	border-color: var(--am-accent);
}
.crt-form button,
.crt-form input[type="submit"] {
	width: auto;
	cursor: pointer;
	background: var(--am-glow-soft);
	color: var(--am-ink-bright);
	border-color: var(--am-accent);
	text-transform: uppercase;
}


/* ==========================================================================
   6. Choix du moniteur par le visiteur
   --------------------------------------------------------------------------
   Chaque overlay a sa propre geometrie de tube, mesuree sur son image.
   L'attribut data-overlay est pose sur <html> par le script de l'en-tete,
   avant le premier rendu, pour eviter tout clignotement.
   ========================================================================== */

:root[data-overlay="1"] {
	--mon-image:   url('images/amstrad-overlay-1.png');
	--mon-left:    14.583%;
	--mon-top:      2.778%;
	--mon-width:   70.781%;
	--mon-height:  93.704%;
	--mon-safe-x:   1.9%;
	--mon-safe-y:   2.1%;
}

:root[data-overlay="2"] {
	--mon-image:   url('images/amstrad-overlay-2.png');
	--mon-left:    14.844%;
	--mon-top:      2.963%;
	--mon-width:   70.312%;
	--mon-height:  93.241%;
	--mon-safe-x:   1.1%;
	--mon-safe-y:   1.3%;
}

/* Les deux suivants sont dessines pour le theme, faute d'overlay libre
   trouve en ligne. Leur tube est une superellipse : le galbe est donc plus
   arrondi que sur un vrai boitier, d'ou une marge de securite plus large. */
:root[data-overlay="3"] {
	--mon-image:   url('images/amstrad-overlay-3.png');
	--mon-left:    13.542%;
	--mon-top:      2.593%;
	--mon-width:   72.917%;
	--mon-height:  91.111%;
	--mon-safe-x:   6.0%;
	--mon-safe-y:   6.4%;
}

/* GX4000 : habillage lateral de la console (manette a gauche, console a
   droite) autour d'un cadre de moniteur clair ajoute par Patrice. Le tube
   reprend donc la geometrie du premier overlay. Provenance et conditions
   d'usage : voir CREDITS.md a la racine du theme. */
:root[data-overlay="3"] {
	--mon-image:   url('images/amstrad-overlay-3.png');
	--mon-left:    14.479%;
	--mon-top:      2.778%;
	--mon-width:   70.781%;
	--mon-height:  93.704%;
	--mon-safe-x:   1.9%;
	--mon-safe-y:   2.1%;
}

/* GX4000 en situation : moniteur cadre serre, bandeaux « AMSTRAD GX4000 »
   de part et d'autre. L'image d'origine etait opaque (une partie de jeu
   remplissait le tube) ; le tube y a ete decoupe, son contour releve au
   pixel sur les quatre bords. C'est un vrai tube bombe en barillet — il
   s'ecarte de 21 px au milieu de sa boite englobante a gauche, de 20 px a
   droite, d'ou une marge de securite du niveau du premier overlay et non
   du second, dont le tube est presque droit. */
:root[data-overlay="4"] {
	--mon-image:   url('images/amstrad-overlay-4.png');
	--mon-left:    14.844%;
	--mon-top:      3.056%;
	--mon-width:   70.312%;
	--mon-height:  93.889%;
	--mon-safe-x:   1.9%;
	--mon-safe-y:   2.2%;
}

/* Bouton d'appel, pose sur le boitier en haut a droite. Le tube s'arretant
   a 85 % de la largeur, il reste hors de l'ecran quel que soit l'overlay. */
.monitor__pick {
	position: absolute;
	right: 2.2%;
	top: 3.4%;
	z-index: 35;
	font-family: var(--am-cpc);
	font-size: clamp(7px, .62vw, 11px);
	letter-spacing: 1px;
	color: var(--am-ink);
	background: rgba(0, 0, 0, .55);
	border: 1px solid var(--am-glow-soft);
	padding: .45em .7em;
	cursor: pointer;
	text-shadow: none;
	opacity: .55;
	transition: opacity .2s;
}
.monitor__pick:hover,
.monitor__pick:focus-visible { opacity: 1; color: var(--am-accent); border-color: var(--am-accent); }

/* Modale de choix. */
.ovmodal {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: rgba(0, 0, 0, .78);
}
/* Sans cette regle, le display:flex ci-dessus l'emporte sur l'attribut
   hidden et la modale reste affichee en permanence. */
.ovmodal[hidden] { display: none; }
.ovmodal__box {
	background: var(--am-deep);
	border: 2px solid var(--am-glow-soft);
	padding: 1.6rem;
	max-width: 900px;
	width: 100%;
	max-height: 100%;
	overflow-y: auto;
}
.ovmodal__box h2 {
	font-family: var(--am-cpc);
	color: var(--am-accent);
	font-size: 1rem;
	margin: 0 0 1.2rem;
	text-shadow: none;
}
/* Le minimum commande le nombre de colonnes : dans une boite de 900 px,
   240 px en laissait tenir trois, donc une quatrieme vignette seule et
   etiree sur la ligne suivante. A 320 px il en tient deux, et les quatre
   moniteurs se rangent en 2 x 2. Une seule colonne sous ~660 px. */
.ovmodal__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 1.1rem;
}
.ovcard {
	display: block;
	width: 100%;
	background: none;
	border: 2px solid var(--am-glow-soft);
	padding: .5rem;
	cursor: pointer;
	color: var(--am-ink);
	font-family: var(--am-cpc);
	font-size: .78rem;
	text-align: center;
	text-shadow: none;
}
.ovcard img { display: block; width: 100%; height: auto; margin-bottom: .5rem; }
.ovcard:hover,
.ovcard:focus-visible { border-color: var(--am-accent); color: var(--am-accent); }
.ovcard[aria-pressed="true"] { border-color: var(--am-accent); color: var(--am-accent); }
.ovcard[aria-pressed="true"]::after { content: " \2713"; }

.ovmodal__close {
	margin-top: 1.3rem;
	font-family: var(--am-cpc);
	font-size: .78rem;
	background: none;
	border: 2px solid var(--am-accent);
	color: var(--am-accent);
	padding: .55em .9em;
	cursor: pointer;
	text-shadow: none;
}
.ovmodal__close:hover { background: var(--am-accent); color: var(--am-deep); }

/* Sous 900px le bezel est masque : le choix n'a plus d'objet. */
@media (max-width: 900px) {
	.monitor__pick { display: none; }
}


/* ==========================================================================
   7. Menu principal : bandeau, puis hamburger a l'etroit
   --------------------------------------------------------------------------
   Le seuil est haut (1500px) car l'ecran ne fait que 70 % de la largeur du
   cadre : le bandeau manque de place bien avant que la fenetre soit petite.
   ========================================================================== */

.screen-head__name { font-family: var(--am-pix); }

/* Le logo et le nom forment un seul lien vers l'accueil. Pas de crochets
   ici : la regle a:not(:has(img)) les ecarte deja, le lien portant l'image. */
.screen-head__brand {
	display: inline-flex;
	align-items: center;
	gap: .8rem;
	color: var(--am-accent);
}
.screen-head__brand:hover { color: var(--am-ink-bright); }

.screen-burger {
	display: none;
	margin-left: auto;
	background: none;
	border: 2px solid var(--am-glow-soft);
	color: var(--am-ink);
	padding: .45em .6em;
	cursor: pointer;
	line-height: 0;
}
.screen-burger:hover,
.screen-burger[aria-expanded="true"] { border-color: var(--am-accent); }

/* Les trois barres, en pur CSS. */
.screen-burger__bars,
.screen-burger__bars::before,
.screen-burger__bars::after {
	display: block;
	width: 20px;
	height: 3px;
	background: currentColor;
	content: "";
}
.screen-burger__bars::before { transform: translateY(-7px); }
.screen-burger__bars::after  { transform: translateY(4px); }
.screen-burger[aria-expanded="true"] { color: var(--am-accent); }

@media (max-width: 1500px) {
	.screen-burger { display: block; }

	.screen-nav {
		display: none;
		position: absolute;
		right: 0;
		top: 100%;
		z-index: 40;
		flex-direction: column;
		gap: 0;
		min-width: 15em;
		background: var(--am-deep);
		border: 2px solid var(--am-glow-soft);
		padding: .4rem 0;
		margin-left: 0;
	}
	.screen-nav.is-open { display: flex; }
	.screen-nav a { padding: .55em 1em; }
	.screen-head { position: relative; }
}

/* ==========================================================================
   8. Bouton moniteur : pulsation d'appel
   --------------------------------------------------------------------------
   Attire l'oeil a l'arrivee sur le site, puis s'arrete. Le script ne la
   declenche pas si le visiteur a deja choisi son moniteur : il connait
   alors la fonction.
   ========================================================================== */

@keyframes monpulse {
	0%, 100% { opacity: .55; box-shadow: 0 0 0 0 rgba(255, 255, 0, .55); }
	50%      { opacity: 1;   box-shadow: 0 0 0 7px rgba(255, 255, 0, 0); }
}
.monitor__pick.is-pulsing {
	animation: monpulse 1.5s ease-in-out infinite;
	border-color: var(--am-accent);
	color: var(--am-accent);
}
@media (prefers-reduced-motion: reduce) {
	.monitor__pick.is-pulsing { animation: none; opacity: 1; }
}

/* ==========================================================================
   9. Module « actualites » dans le tube
   ========================================================================== */

/* Choix des rubriques, en tete de la page Actualites. */
.crt-rubriques {
	margin: 0 0 1.6rem;
	padding-bottom: 1rem;
	border-bottom: 2px solid var(--am-glow-soft);
}
.crt-rubriques__t {
	font-family: var(--am-pix);
	font-size: .72rem;
	letter-spacing: 1px;
	color: var(--am-accent);
	margin: 0 0 .7rem;
	text-transform: uppercase;
}
.crt-rubriques ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .45rem .9rem;
}

/* Sous-rubriques d'une rubrique. Meme presentation que le choix des
   rubriques, mais sans trait de separation et decalees derriere un filet
   vertical : les deux blocs peuvent se suivre, on lit alors le second
   comme un contenu du premier et non comme un second menu. */
.crt-rubriques--sous {
	border-bottom: 0;
	border-left: 2px solid var(--am-glow-soft);
	padding: 0 0 0 .9rem;
	margin-bottom: 1.2rem;
}

/* --------------------------------------------------------------------------
   Liste d'articles.
   --------------------------------------------------------------------------
   Le module propose TROIS dispositions, choisies rubrique par rubrique
   dans l'administration :
     - masonrycss : colonnes CSS          -> #sbnews sans data-masonry
     - masonry    : bibliotheque Masonry  -> #sbnews.sbnews-layout-masonry
     - normal     : flottants
   Les regles de colonnes ne doivent viser que la premiere : posees sur la
   seconde, elles entreraient en conflit avec le positionnement absolu de
   Masonry.

   La feuille du module est injectee DANS le corps, donc apres celle du
   theme : a specificite egale elle gagnerait. D'ou le prefixe
   .screen-inner sur chaque regle a reprendre.
   -------------------------------------------------------------------------- */

.screen-inner #sbnews {
	margin: 1.6rem 0 0;
	padding: 0 .2rem;
	font-size: 1em;
}

/* --- Habillage commun aux trois dispositions --- */
.screen-inner #sbnews .sbnews {
	box-shadow: none;
	border: 1px solid var(--am-glow-soft);
	background: rgba(0, 0, 0, .25);
	padding: 1rem 1.1rem 1.2rem;
}
.screen-inner #sbnews h3 { margin: 0 0 .5rem; text-transform: none; }
.screen-inner #sbnews .sbnews-date { color: var(--am-accent); margin: 0 0 .45rem; }
.screen-inner #sbnews .sbnews-category { margin: 0 0 .45rem; }
.screen-inner #sbnews .sbnews-p { text-transform: none; }

/* Vignettes : la hauteur est reservee AVANT le chargement de l'image.
   Sans cela les hauteurs valent zero au premier rendu, la mise en page
   est calculee dessus puis refaite a l'arrivee des images — d'ou les
   blocs qui se chevauchent. Vaut pour les deux masonry. */
.screen-inner #sbnews .sbnews-div-l { margin: 0 0 .9rem; }
.screen-inner #sbnews .sbnews-div-l img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border: 1px solid var(--am-glow-soft);
}
.screen-inner #sbnews .sbnews-div-l a::before,
.screen-inner #sbnews .sbnews-div-l a::after { content: ""; }

/* --- Colonnes CSS : uniquement la disposition « masonrycss » --- */
.screen-inner #sbnews.sbnews-layout-masonrycss {
	column-gap: 1.5rem;
	column-count: 1;
}
.screen-inner #sbnews.sbnews-layout-masonrycss .sbnews {
	/* Sans cela une carte peut etre coupee entre deux colonnes. */
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
	display: block;
	width: 100%;
	overflow: hidden;
	margin: 0 0 1.5rem;
}
.screen-inner #sbnews.sbnews-layout-masonrycss .sbnews-link-item { margin: 0 !important; }

/* Les seuils du module raisonnent en largeur de fenetre, alors que le
   contenu ne dispose que du tube, soit 70 % du cadre : tous decales. */
@media (min-width:  760px) { .screen-inner #sbnews.sbnews-layout-masonrycss { column-count: 2; } }
@media (min-width: 1250px) { .screen-inner #sbnews.sbnews-layout-masonrycss { column-count: 3; } }
@media (min-width: 1750px) { .screen-inner #sbnews.sbnews-layout-masonrycss { column-count: 4; } }

/* --- Masonry JavaScript : gouttiere, sans toucher au positionnement --- */
.screen-inner #sbnews.sbnews-layout-masonry .sbnews {
	margin: 0 1.5rem 1.5rem 0;
}


/* --------------------------------------------------------------------------
   Portfolio : gabarit sur mesure de la rubrique (champ tpl_list, en base).
   Une fiche par realisation, vignette a gauche, texte a droite.
   -------------------------------------------------------------------------- */

.crt-folio {
	display: flex;
	gap: 1.4rem;
	align-items: flex-start;
	border: 1px solid var(--am-glow-soft);
	background: rgba(0, 0, 0, .25);
	padding: 1.2rem 1.3rem;
	margin: 0 0 1.5rem;
}

.crt-folio__img {
	flex: 0 0 clamp(140px, 22%, 320px);
	margin: 0;
}
.crt-folio__img img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--am-glow-soft);
}

.crt-folio__txt { flex: 1 1 auto; min-width: 0; }
.crt-folio__txt h3 { margin: 0 0 .5rem; }

.crt-folio__lead {
	color: var(--am-accent);
	text-transform: none;
	margin: 0 0 .8rem;
}

.crt-folio__body {
	text-transform: none;
}
.crt-folio__body p { margin: 0 0 .7rem; }
.crt-folio__body img { border: 1px solid var(--am-glow-soft); }

/* Sous 700px la fiche passe en pile. */
@media (max-width: 700px) {
	.crt-folio { flex-direction: column; }
	.crt-folio__img { flex: 0 0 auto; width: 100%; max-width: 320px; }
}


/* --------------------------------------------------------------------------
   Page d'un article : navigation et « autres articles ».
   --------------------------------------------------------------------------
   Le module habille ces deux blocs pour un fond clair (bandeau #eee a
   1.7em, tuiles bleu moyen) et pose une balise <style> DANS le corps.
   Le prefixe .screen-inner suffit a passer devant.
   -------------------------------------------------------------------------- */

/* --- Article precedent / suivant --- */
.screen-inner .sbnews-single-next-prev {
	background-color: rgba(0, 0, 0, .3);
	border: 1px solid var(--am-glow-soft);
	border-left: 0;
	border-right: 0;
	color: var(--am-ink);
	font-size: .82em;
	font-weight: 400;
	padding: .8rem 1rem;
	margin: 2rem 0 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.4rem;
	justify-content: space-between;
	align-items: center;
	text-align: left;
}
.screen-inner .sbnews-single-next-prev a.next_a,
.screen-inner .sbnews-single-next-prev a.prev_a {
	float: none;
}
.screen-inner .sbnews-single-next-prev span a {
	background: none;
	color: var(--am-ink);
	float: none;
	display: inline;
	font-size: 1em;
	line-height: inherit;
	margin: 0;
	padding: 0;
	width: auto;
}
.screen-inner .sbnews-single-next-prev a:hover { color: var(--am-accent); }

/* --- « Autres articles » --- */
.screen-inner h2.sbnews-single-others-h2 {
	border-bottom: 2px solid var(--am-glow-soft);
	color: var(--am-accent);
	padding-bottom: .7rem;
	margin: 2.4rem 0 1.3rem;
}

/* Le module empile ces tuiles en colonnes CSS, une par article (8 par
   defaut) : illisible dans le tube. Passage en grille qui s'adapte. */
.screen-inner .sbnews-single-others {
	columns: auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 1.1rem;
}
.screen-inner .sbnews-single-others > div { margin: 0; }
.screen-inner .sbnews-single-others a::before,
.screen-inner .sbnews-single-others a::after { content: ""; }

.screen-inner .sbnews-othernews {
	height: 210px;
	background-color: rgba(0, 0, 0, .45);
	background-position: center center !important;
	border: 1px solid var(--am-glow-soft);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	padding: .8rem;
}
/* Voile sombre permanent : sans lui le texte passe mal sur la vignette. */
.screen-inner .sbnews-othernews::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(1, 6, 15, .92) 0%, rgba(1, 6, 15, .45) 55%, rgba(1, 6, 15, .2) 100%);
	opacity: 1;
	transition: opacity .3s;
}
.screen-inner .sbnews-othernews:hover::after { opacity: .55; }

.screen-inner .sbnews-othernews span {
	position: relative;
	z-index: 2;
	color: var(--am-ink);
	text-shadow: 0 0 3px #000, 0 0 1px #000;
}
.screen-inner .sbnews-othernews span.title {
	font-family: var(--am-pix);
	font-size: .68rem;
	line-height: 1.5;
	letter-spacing: .5px;
	color: var(--am-accent);
	margin: 0 0 .4rem;
	padding-top: 0;
	text-align: left;
	width: auto;
}
.screen-inner .sbnews-othernews span.content {
	font-size: .78rem;
	line-height: 1.4;
	text-align: left;
	text-transform: none;
	padding: 0;
	width: auto;
	max-height: 4.2em;
	overflow: hidden;
}


/* --------------------------------------------------------------------------
   Debordements horizontaux dans le contenu.
   --------------------------------------------------------------------------
   Certains articles contiennent des chaines sans espace plus larges que le
   tube : chaines User-Agent, URL, requetes SQL. L'ecran masquant le
   debordement (overflow-x: hidden), elles etaient simplement coupees.
   -------------------------------------------------------------------------- */

.screen-inner {
	overflow-wrap: anywhere;
}

/* Le code garde ses retours a la ligne d'origine mais peut desormais se
   replier, et defile horizontalement s'il ne s'y prete pas. */
.screen-inner pre {
	white-space: pre-wrap;
	overflow-x: auto;
	max-width: 100%;
	border: 1px solid var(--am-glow-soft);
	background: rgba(0, 0, 0, .35);
	padding: .8rem 1rem;
}
.screen-inner code,
.screen-inner kbd,
.screen-inner samp { overflow-wrap: anywhere; }

/* Les tableaux ne se replient pas : on les fait defiler. */
.screen-inner table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/* Medias et objets : jamais plus larges que le tube.
   Les images en sont volontairement exclues : `.screen-inner img` est plus
   specifique que les regles du module (classe + element contre classe
   seule) et ecrasait leurs plafonds — `.sbnews-single-img` est cadree a
   max-width: 50%, elle passait a 100 %. Le plafond des images est pose au
   niveau de l'element seul, en tete de feuille, ou il ne prime sur rien. */
.screen-inner iframe,
.screen-inner video,
.screen-inner embed,
.screen-inner object,
.screen-inner canvas { max-width: 100%; }

/* Certains articles portent une largeur en dur dans l'attribut style
   (jusqu'a 900px) ou un white-space:nowrap, hérités de l'ancien thème
   pleine largeur. On les ramene dans le cadre. */
.screen-inner [style*="width"] { max-width: 100%; }
.screen-inner [style*="nowrap"] { white-space: normal; }


/* --------------------------------------------------------------------------
   Image d'illustration d'un article.
   --------------------------------------------------------------------------
   Le module la cadre a max-width: 50%. Reglage du theme : 30%.
   La regle porte sur la classe et non sur `img`, pour ne pas ecraser les
   plafonds des autres images du module.
   -------------------------------------------------------------------------- */

.screen-inner .sbnews-single-img {
	max-width: 30%;
}

/* Sous 700px le bezel a disparu et l'ecran occupe toute la fenetre :
   30 % donnerait une vignette minuscule avec du texte qui l'enroule.
   L'image passe alors au-dessus du texte, pleine largeur. */
@media (max-width: 700px) {
	.screen-inner .sbnews-single-img {
		float: none;
		max-width: 100%;
		margin: 0 0 1.2rem;
	}
}


/* --------------------------------------------------------------------------
   Retour en haut de page.
   --------------------------------------------------------------------------
   Le calque epouse la zone d'ecran et laisse passer les clics ; seul le
   bouton les capte. Il se place au-dessus de la trame CRT (z-index 20) mais
   sous la transition de demarrage (25) et le bezel (30).
   -------------------------------------------------------------------------- */

.monitor__tools {
	z-index: 24;
	pointer-events: none;
	overflow: hidden;
}

.monitor__top {
	position: absolute;
	right: 1.4rem;
	bottom: 1.4rem;
	width: 2.6rem;
	height: 2.6rem;
	display: grid;
	place-items: center;
	background: rgba(0, 0, 0, .6);
	border: 1px solid var(--am-glow-soft);
	color: var(--am-ink);
	cursor: pointer;
	/* Masque tant qu'on n'a pas defile. On joue sur l'opacite et les
	   evenements de pointeur plutot que sur `visibility` : transitionner
	   `visibility` est un piege classique, la propriete etant discrete. */
	opacity: 0;
	pointer-events: none;
	transform: translateY(.5rem);
	transition: opacity .25s, transform .25s, border-color .2s, color .2s;
}
.monitor__top.is-visible {
	opacity: .75;
	pointer-events: auto;
	transform: none;
}
.monitor__top:hover,
.monitor__top:focus-visible {
	opacity: 1;
	border-color: var(--am-accent);
	color: var(--am-accent);
}

/* La fleche est dessinee en CSS : pas de dependance a une police ni a une
   image, et elle prend la couleur du bouton. */
.monitor__top::before {
	content: "";
	width: 0;
	height: 0;
	border-left: .42rem solid transparent;
	border-right: .42rem solid transparent;
	border-bottom: .55rem solid currentColor;
	margin-bottom: .12rem;
}

@media (prefers-reduced-motion: reduce) {
	.monitor__top { transition: none; }
}


/* --------------------------------------------------------------------------
   Pages Profil / CV et Outils WEB.
   -------------------------------------------------------------------------- */

.crt-txt { text-transform: none; margin: 0 0 1rem; }

.crt-list--serree li { padding: .25rem 0; border-bottom: 0; }
.crt-list--serree li::before { content: "> "; }

/* --- Bandeau d'identite --- */
.crt-cv {
	display: flex;
	flex-wrap: wrap;
	gap: 1.6rem;
	border: 1px solid var(--am-glow-soft);
	background: rgba(0, 0, 0, .25);
	padding: 1.2rem 1.3rem;
	margin: 0 0 2rem;
}
.crt-cv__id { flex: 0 0 clamp(150px, 24%, 260px); }
.crt-cv__id img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--am-glow-soft);
	margin-bottom: .8rem;
}
.crt-cv__nom {
	font-family: var(--am-pix);
	font-size: .78rem;
	color: var(--am-accent);
	margin: 0 0 .3rem;
}
.crt-cv__role { font-size: .85rem; margin: 0 0 .8rem; }
.crt-cv__coord { flex: 1 1 16rem; min-width: 0; }
.crt-cv__coord h3:first-child { margin-top: 0; }

/* --- Jauges de competences --- */
.crt-jauges { list-style: none; margin: 0 0 2rem; padding: 0; }
.crt-jauges li {
	display: grid;
	grid-template-columns: minmax(6rem, 10rem) 1fr 3rem;
	align-items: center;
	gap: .8rem;
	padding: .3rem 0;
}
.crt-jauge__n { font-family: var(--am-pix); font-size: .62rem; letter-spacing: 1px; }
.crt-jauge {
	display: block;
	height: .7rem;
	border: 1px solid var(--am-glow-soft);
	background: rgba(0, 0, 0, .4);
}
/* Le remplissage est trame, comme une barre de chargement d'epoque. */
.crt-jauge i {
	display: block;
	height: 100%;
	background: repeating-linear-gradient(
		90deg,
		var(--am-glow) 0 3px,
		transparent 3px 5px);
}
.crt-jauge__v { font-size: .8rem; color: var(--am-accent); text-align: right; }

/* --- Grille d'outils --- */
.crt-outils {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 1rem;
}
.crt-outils li {
	border: 1px solid var(--am-glow-soft);
	background: rgba(0, 0, 0, .25);
	padding: .9rem 1rem;
}
.crt-outils a { display: inline-block; margin-bottom: .35rem; }
.crt-outils span { display: block; font-size: .82rem; text-transform: none; opacity: .85; }

/* --- QR Code --- */
.crt-qr {
	list-style: none;
	margin: 0 0 1.4rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
}
.crt-qr li { text-align: center; }
.crt-qr img {
	display: block;
	width: 100%;
	max-width: 190px;
	height: auto;
	border: 1px solid var(--am-glow-soft);
	background: #fff;
	padding: .4rem;
}
.crt-qr span {
	display: block;
	font-family: var(--am-pix);
	font-size: .6rem;
	letter-spacing: 1px;
	color: var(--am-accent);
	margin-top: .5rem;
}

@media (max-width: 700px) {
	.crt-jauges li { grid-template-columns: 1fr 2.6rem; }
	.crt-jauge { grid-column: 1 / -1; }
}





/* --------------------------------------------------------------------------
   Page d'erreur : phosphore vert.
   --------------------------------------------------------------------------
   Reprend les teintes de l'ancien theme (style-404.css). Tout passant par
   des variables, il suffit de les redefinir sur le cadre : l'ecran, la
   trame CRT et le contenu suivent.
   -------------------------------------------------------------------------- */

.monitor.is-erreur {
	--am-ink:        rgba(128, 255, 128, 0.85);
	--am-ink-bright: #ffffff;
	--am-glow:       rgba(51, 255, 51, 1);
	--am-glow-soft:  rgba(32, 128, 32, 0.80);
	--am-accent:     #b6ff6a;
	--am-deep:       #041607;
}

.monitor.is-erreur .monitor__screen {
	background-image: radial-gradient(circle at 50% 45%, #11581e, var(--am-deep));
}

/* Le balayage vertical passe lui aussi au vert. */
.monitor.is-erreur .monitor__crt::before {
	background-image: linear-gradient(
		0deg,
		transparent 0%,
		rgba(32, 128, 32, 0.2) 2%,
		rgba(32, 128, 32, 0.8) 3%,
		rgba(32, 128, 32, 0.2) 3%,
		transparent 100%);
}

/* Le logo est ramene au vert plutot qu'au bleu. */
.monitor.is-erreur .screen-head img { filter: none; }

.monitor.is-erreur .errorcode { color: var(--am-accent); }


/* --------------------------------------------------------------------------
   Module de recherche.
   -------------------------------------------------------------------------- */

.crt-search {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .7rem;
	border: 1px solid var(--am-glow-soft);
	background: rgba(0, 0, 0, .25);
	padding: .9rem 1.1rem;
	margin: 0 0 1.6rem;
}
.crt-search label {
	font-family: var(--am-pix);
	font-size: .66rem;
	letter-spacing: 1px;
	color: var(--am-accent);
}
.crt-search input[type="search"] {
	flex: 1 1 14rem;
	min-width: 0;
	background: rgba(0, 0, 0, .45);
	border: 1px solid var(--am-glow-soft);
	color: var(--am-ink);
	font-family: var(--am-body);
	font-size: 1rem;
	padding: .45em .6em;
}
.crt-search input[type="search"]:focus {
	outline: none;
	border-color: var(--am-accent);
}
.crt-search button {
	font-family: var(--am-pix);
	font-size: .66rem;
	letter-spacing: 1px;
	background: none;
	border: 1px solid var(--am-accent);
	color: var(--am-accent);
	padding: .55em 1.1em;
	cursor: pointer;
}
.crt-search button:hover { background: var(--am-accent); color: var(--am-deep); }

.crt-search__res { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.crt-search__res li {
	border-bottom: 1px dotted var(--am-glow-soft);
	padding: .9rem 0;
}
.crt-search__t { margin: 0 0 .3rem; font-size: 1rem; }
.crt-search__m {
	margin: 0 0 .4rem;
	font-size: .78rem;
	color: var(--am-accent);
}
.crt-search__type {
	border: 1px solid var(--am-glow-soft);
	padding: .1em .5em;
	margin-right: .3em;
}
.crt-search__e {
	margin: 0;
	font-size: .86rem;
	text-transform: none;
	opacity: .85;
}


/* --- Entree « recherche » du menu, en loupe --------------------------- */
.screen-nav__loupe {
	display: inline-flex;
	align-items: center;
}
/* Les crochets encadrent les entrees en toutes lettres, pas l'icone. */
.screen-nav__loupe::before,
.screen-nav__loupe::after { content: ""; }

.screen-nav__loupe svg {
	width: 1.05em;
	height: 1.05em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: square;
}