/* ═══════════════════════════════════════════════════════════════════════
   MODE WEB — habillage à la charte du site Grand-Auverné (CDC §11.4).
   Chargée UNIQUEMENT quand index.php reçoit ?mode=web ; la borne du hall
   (mode kiosk) garde stylesHome.css + le theming site_settings, inchangés.

   Tokens héraldiques (charte-graphique.md du site) :
   gueules #a8201a · gueules-sombre #7a1612 · or #c8a04a · ardoise #3a4248
   encre #1a1f22 · papier #f7f4ec · blanc-hermine #fdfcf9 · lignes #c5bdac
   pierre #e8e2d6 · lac #2e6571
   Cette feuille est chargée APRÈS le <style> inline de theming : mêmes
   sélecteurs, elle prend la main sans !important.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face {
	font-family: 'Fraunces';
	src: url('../fonts/fraunces-variable.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-display: swap;
}
@font-face {
	font-family: 'IBM Plex Sans';
	src: url('../fonts/plex-sans-variable.woff2') format('woff2-variations');
	font-weight: 100 700;
	font-display: swap;
}

/* ── Fond général et typo ── */
html, body { height: 100%; }
body {
	font-family: 'IBM Plex Sans', Arial, sans-serif;
	background: #f7f4ec; /* papier */
	color: #3a4248;      /* ardoise */
	overflow: hidden;    /* seule la colonne des catégories défile */
}

/* Hauteur : le calc(100vh - 120px) de stylesHome.css est calibré pour le
   header kiosque. En mode web, on laisse le flex de <body> distribuer la
   hauteur : le conteneur prend tout l'espace restant sous l'en-tête. */
.public-container {
	height: auto;
	flex: 1 1 auto;
	min-height: 0;
}
/* Le bandeau défilant (40px, position:fixed) recouvre le bas : on réserve
   la place pour que les dernières catégories restent atteignables. */
.categories {
	box-sizing: border-box;
	padding-bottom: 56px;
}
.viewer iframe { margin-bottom: 0; height: calc(100% - 40px); }

/* ── En-tête : rappel du ga-header (blanc-hermine, filet gueules) ── */
header {
	background: #fdfcf9; /* blanc-hermine */
	border-bottom: 3px solid #a8201a; /* gueules */
}
header .banner { padding: 8px 18px 8px 10px; }
header .logo { height: 52px; }
h1 {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 600;
	font-size: 1.45rem;
	color: #1a1f22; /* encre */
	margin: 0;
}

/* Lien « Retour au site de la mairie » (mode web uniquement) */
.web-retour {
	margin-left: auto;
	background: #a8201a;       /* gueules */
	color: #fdfcf9;
	padding: 0.55rem 1.1rem;
	border-radius: 4px;
	font-size: 0.95rem;
	font-weight: 600;
	white-space: nowrap;
	transition: background 0.15s ease;
}
.web-retour:hover {
	background: #7a1612;       /* gueules-sombre */
	text-decoration: none;
	color: #fdfcf9;
}

/* ── Colonne des catégories ── */
.categories {
	background: #f7f4ec; /* papier */
	border-right: 1px solid #c5bdac; /* lignes */
}
h2 {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 600;
	color: #1a1f22;
}
.category {
	background: #a8201a; /* gueules */
	color: #fdfcf9;
	font-size: 1.05rem;
	padding: 8px 10px;
	border: 1px solid transparent;
}
.category:hover {
	background: #7a1612; /* gueules-sombre */
	border-color: #7a1612;
	color: #fdfcf9;
}
.toggle { color: #e8d49a; } /* or-clair */
.nested {
	border-left: 2px solid #c5bdac; /* lignes */
	margin-left: 12px;
	padding-left: 10px;
}
.nested a { color: #3a4248; }
.nested a:hover { color: #a8201a; text-decoration: underline; }

/* Sous-catégories (blocs .category imbriqués) : déclinaison pierre/encre
   pour hiérarchiser sans saturer de rouge */
.nested .category {
	background: #e8e2d6; /* pierre */
	color: #1a1f22;
	font-size: 0.98rem;
}
.nested .category:hover { background: #d8d0be; border-color: #c5bdac; color: #1a1f22; }
.nested .category .toggle { color: #a8201a; }
/* L'icône de page (documentb.png) est blanche : sur les sous-catégories
   claires, on la passe en noir (brightness(0) noircit tous les pixels
   en conservant la transparence). */
.nested .category .documentb { filter: brightness(0); }

/* ── Visualiseur ── */
.viewer { background: #1a1f22; } /* encre */

/* ── Bouton « Fermer le document » ──
   En kiosk, .overlay est un CACHE volontaire : il recouvre les boutons
   imprimer/télécharger du visualiseur PDF (pas d'imprimante sur la borne).
   En mode web, l'internaute DOIT pouvoir imprimer : le cache devient
   transparent et le bouton descend SOUS la barre d'outils du visualiseur. */
.overlay {
	background-color: transparent;
	width: auto;
	height: auto;
	top: auto;
	pointer-events: none; /* la zone ne bloque plus la barre d'outils */
}
.resetpage {
	pointer-events: auto;
	top: 140px;   /* sous l'en-tête (~71px) + barre d'outils PDF (~56px) */
	right: 14px;
	background: #a8201a; /* gueules */
	color: #fdfcf9;
	border-radius: 4px;
	font-family: 'IBM Plex Sans', Arial, sans-serif;
	font-weight: 600;
	box-shadow: 0 2px 8px rgba(26, 31, 34, 0.35);
}
.resetpage:hover { background: #7a1612; } /* gueules-sombre */
button { background: #1a1f22; }

/* ── Bandeau défilant et pied ── */
#marquee {
	background: #1a1f22; /* encre */
	color: #f7f4ec;
	border-top: 2px solid #c8a04a; /* or */
}
.logobas { background: #1a1f22; }