@charset "utf-8";
/* ==========================================================================
   style.css
   Feuille de style principale du site SOIRAT.
   Étape 1 : header (logo, menu, date du jour + saint, lien communiquer).
   Étape 2 : encadré date + adaptation smartphone.
   ========================================================================== */

:root {
	--bleu: #46c3f8;
	--bleu-fonce: #02587d;
	--bleu-logo: #009fe3; /* bleu du "S" du logo principal (en-tête, en haut à gauche) */
	--hauteur-pastille: 40px; /* hauteur commune : enveloppe et encadré date */
}

* {
	box-sizing: border-box;
}

/* Masqué visuellement mais lu par les lecteurs d'écran et les moteurs de
   recherche : utilisé pour le <h1> de l'accueil (le logo assure déjà le rôle
   visuel de titre, mais la page a besoin d'un vrai <h1> texte pour le SEO et
   l'accessibilité). */
.visuellement-cache {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

body {
	margin: 0;
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, 'sans-serif';
	font-size: 14px;
	background: #EDEDED;
}

/*-------------------------------------ASCENSEUR (scrollbar)-----------------------*/
html {
	scrollbar-color: var(--bleu) #f0f0f0; /* Firefox : pouce cyan, piste gris clair */
	scrollbar-width: auto; /* Firefox ne permet pas de largeur en px : "auto" = le plus large des 2 mots-clés */
}

::-webkit-scrollbar {
	width: 24px;
	height: 24px;
}

::-webkit-scrollbar-track {
	background: #f0f0f0;
}

::-webkit-scrollbar-thumb {
	background: var(--bleu);
	border-radius: 8px;
	border: 3px solid #f0f0f0;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--bleu-fonce);
}
/*-------------------------------------FIN ASCENSEUR-----------------------*/

/*-------------------------------------DEF DES LIENS-----------------------*/
a:link { text-decoration: none; color: darkblue; }
a:visited { color: #009fe3; font-style: italic; font-weight: 800; }
a:hover { color: red; font-weight: 500; }
/*-------------------------------------FIN DEF DES LIENS-----------------------*/

/*-------------------------------------HEADER-----------------------*/
.site-header {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: 2px 25px;
	padding: 6px 20px 10px;
	background: linear-gradient(to right, #ffffff, var(--bleu));
	border-bottom: 3px solid var(--bleu-fonce);
	position: sticky;
	top: 0;
	z-index: 900;
	transition: background 0.25s ease, box-shadow 0.25s ease;
}

.site-header.scrolled {
	/* Le bandeau reste en dégradé même une fois l'ascenseur activé ;
	   seule une légère ombre indique qu'il est "détaché" du contenu. */
	box-shadow: 0 3px 10px rgba(2, 88, 125, 0.35);
}

.header-logo img {
	display: block;
	max-height: 62px;
	width: auto;
}

/*---------------BOUTON HAMBURGER (mobile uniquement)----------------------------*/
.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 34px;
	height: 34px;
	padding: 6px;
	background: none;
	border: none;
	cursor: pointer;
	order: 2;
}

.nav-toggle span {
	display: block;
	width: 100%;
	height: 3px;
	border-radius: 2px;
	background: var(--bleu-fonce);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.main-nav.is-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.main-nav.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
.main-nav.is-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/*---------------MENU PRINCIPAL----------------------------*/
.main-nav {
	order: 3;
}

.main-nav > ul {
	list-style: none;
	display: flex;
	margin: 0;
	padding: 0;
	gap: 28px;
}

.submenu {
	list-style: none;
}

.main-nav > ul > li {
	position: relative;
}

.main-nav > ul > li > a,
.main-nav > ul > li > .menu-label {
	display: block;
	padding: 10px 4px;
	color: var(--bleu-fonce);
	font-weight: 600;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}

.main-nav > ul > li > a:hover {
	color: red;
	border-bottom-color: red;
}

.main-nav .has-submenu:hover > .menu-label,
.main-nav .has-submenu.open > .menu-label {
	color: red;
	border-bottom-color: red;
}

.main-nav .has-submenu > .menu-label::after {
	content: " \25BC";
	font-size: 0.65em;
	vertical-align: middle;
}

.submenu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 230px;
	margin: 0;
	padding: 6px 0;
	background: #ffffff;
	box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
	z-index: 1000;
}

.has-submenu:hover .submenu,
.has-submenu.open .submenu {
	display: block;
}

.submenu li a {
	display: block;
	padding: 8px 16px;
	white-space: nowrap;
	color: var(--bleu-fonce);
}

.submenu li a:hover {
	background: rgba(70, 195, 248, 0.15);
	color: red;
}

/*---------------BRÈVE DU HEADER (phrase du moment, voir breves.js)----------------------------*/
/* Sur sa propre ligne, tout en haut de l'en-tête (au-dessus du menu et de la
   recherche), centrée. Une seule ligne (tronquée avec "…" si besoin) pour ne
   pas alourdir la hauteur de l'en-tête ; l'info-bulle (title, posée en JS)
   reprend le texte entier si jamais il est tronqué. */
.header-breve {
	order: -1;
	grid-column: 1 / -1;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: center;
	font-style: italic;
	font-size: 12px;
	line-height: 1.3;
	color: var(--bleu-fonce);
	max-width: 720px;
	margin: 0 auto;
	padding: 0 10px;
}

/*---------------CHAMP DE RECHERCHE (bandeau)----------------------------*/
.header-recherche {
	order: 4;
}

.form-recherche {
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(2, 88, 125, 0.25);
	border-radius: 20px;
	padding: 4px 6px 4px 14px;
	transition: background 0.2s ease, box-shadow 0.2s ease;
}

.form-recherche:focus-within {
	background: #ffffff;
	box-shadow: 0 0 0 2px rgba(2, 88, 125, 0.25);
}

.form-recherche input[type="search"] {
	border: none;
	background: transparent;
	outline: none;
	font-family: inherit;
	font-size: 13px;
	color: var(--bleu-fonce);
	width: 150px;
}

.form-recherche input[type="search"]::placeholder {
	color: #6a8494;
}

.form-recherche button {
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: none;
	cursor: pointer;
	padding: 6px;
	color: var(--bleu-fonce);
}

.form-recherche button:hover {
	color: red;
}

.form-recherche button svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

/*---------------LIEN COMMUNIQUER (enveloppe) + CONNEXION (cadenas)----------------------------*/
.header-contact {
	order: 5;
	display: flex;
	align-items: center;
	gap: 12px;
}

.header-contact img {
	height: var(--hauteur-pastille);
	width: auto;
	display: block;
	transition: transform 0.15s ease;
}

.header-contact a:hover img {
	transform: scale(1.1);
}

/* Cadenas de connexion : même gabarit que le bouton de recherche (SVG en
   currentColor), pour rester cohérent avec le reste de l'en-tête. Passe en
   rouge une fois une session ouverte (voir statut.php côté JS), pour que
   l'état connecté saute aux yeux. Sélecteurs préfixés par "a" pour avoir la
   même spécificité que la règle globale "a:link" et bien la remplacer
   (sinon "a:link" gagnait sur l'état par défaut, non connecté). */
a.lien-connexion {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bleu-fonce);
	transition: color 0.15s ease, transform 0.15s ease;
}

a.lien-connexion:hover {
	color: red;
	transform: scale(1.1);
}

.lien-connexion svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

a.lien-connexion.connecte {
	color: red;
}

/* Menu du compte (déroulant sous le cadenas une fois connecté : modération
   du livre d'or pour le rôle "site", déconnexion). Reste un simple lien
   direct tant que le visiteur n'est pas connecté — cette liste n'est
   révélée par le JS qu'après confirmation de la session (voir index.html). */
.menu-connexion {
	position: relative;
	display: flex;
	align-items: center;
}

.menu-connexion-liste {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	z-index: 950;
	margin: 0;
	padding: 8px;
	list-style: none;
	min-width: 220px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 3px 14px rgba(2, 88, 125, 0.28);
}

.menu-connexion-liste li + li {
	margin-top: 2px;
}

.menu-connexion-liste a {
	display: block;
	padding: 9px 12px;
	border-radius: 7px;
	color: var(--bleu-fonce);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.menu-connexion-liste a:hover {
	background: rgba(70, 195, 248, 0.16);
	color: var(--bleu-fonce);
}

/*-------------------------------------GRILLE DE CONTENU (rangées de blocs 1/3 - 2/3 - 3/3)-----------------------*/
.rangee {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	max-width: 1200px;
	margin: 26px auto;
	padding: 0 20px;
	align-items: stretch;
}

.bloc {
	background: #ffffff;
	border: 1.5px solid #a9d2e3;
	border-radius: 10px;
	box-shadow: 0 3px 14px rgba(2, 88, 125, 0.18);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Largeur des blocs, exprimée en tiers de rangée : combinez-les librement
   (1/3 + 2/3, 2/3 + 1/3, 1/3 + 1/3 + 1/3, ou 3/3 seul) selon l'ordre voulu. */
.bloc-1-3 { grid-column: span 1; }
.bloc-2-3 { grid-column: span 2; }
.bloc-3-3 { grid-column: span 3; }

.titre-bloc {
	margin: 0;
	padding: 10px 16px 8px;
	font-size: 15px;
	font-weight: 700;
	color: var(--bleu-fonce);
	border-bottom: 1px solid #eaf3f8;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Le logo court (version blanche) est posé sur un fond aux mêmes couleurs
   que le logo principal de l'en-tête (S blanc sur rond bleu #009fe3),
   pour rester lisible sur l'entête blanche des blocs. */
.titre-bloc .icone-bloc {
	width: 18px;
	height: 18px;
	padding: 3px;
	border-radius: 5px;
	background: var(--bleu-logo);
	flex-shrink: 0;
}

@media (max-width: 860px) {
	.rangee {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 0 14px;
	}
	.bloc-1-3, .bloc-2-3, .bloc-3-3 { grid-column: span 1; }
}

/*-------------------------------------BLOC "LE LIEN DU JOUR"-----------------------*/
.bloc-lien-hasard .miniature-link {
	display: block;
	line-height: 0;
	background: #eef7fc;
}

.bloc-lien-hasard .miniature-link img {
	width: 100%;
	height: 100px;
	object-fit: cover;
	object-position: top;
	display: block;
}

.lien-hasard-contenu {
	padding: 10px 16px 12px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.chargement {
	color: #667;
	font-style: italic;
	font-size: 13px;
	margin: 0;
}

.lien-hasard-contenu h4 {
	margin: 0 0 5px;
	font-size: 14.5px;
}

.lien-hasard-contenu h4 .titre-lien {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--bleu-fonce) !important;
}

.lien-hasard-contenu h4 .drapeau {
	width: 16px;
	height: auto;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.lien-hasard-contenu .desc {
	font-size: 12px;
	color: #333;
	line-height: 1.4;
	margin: 0 0 10px;
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lien-hasard-contenu .actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin-top: auto;
}

.lien-hasard-contenu .lien-site {
	display: inline-block;
	padding: 5px 11px;
	border-radius: 6px;
	border: 1px solid var(--bleu-fonce);
	color: var(--bleu-fonce) !important;
	font-weight: 700;
	font-size: 12px;
	white-space: nowrap;
}

.lien-hasard-contenu .lien-site:hover {
	background: var(--bleu-fonce);
	color: #fff !important;
}

.lien-hasard-contenu .voir-tout {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--bleu-fonce) !important;
	white-space: nowrap;
}

/*-------------------------------------BLOC "ARCHIVES" (onglets AD / AM / Pays)-----------------------*/
.bloc-archives {
	padding-bottom: 10px;
	background: rgba(70, 195, 248, 0.16);
}

/* Ces sélecteurs couvrent aussi .tabs-lectures (bloc "Lecture du jour",
   même principe d'onglets, un par dossier de lectures) et .tabs-outils
   (bloc "Boîte à outils", un onglet par groupe/dossier d'outils). */
.tabs-archives,
.tabs-lectures,
.tabs-outils {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 6px 16px 0;
	border-bottom: 2px solid rgba(70, 195, 248, 0.3);
}

.tabs-archives .onglet,
.tabs-lectures .onglet,
.tabs-outils .onglet {
	background: none;
	border: none;
	padding: 6px 14px;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--bleu-fonce);
	cursor: pointer;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
}

.tabs-archives .onglet:hover,
.tabs-lectures .onglet:hover,
.tabs-outils .onglet:hover { color: red; }

.tabs-archives .onglet.active,
.tabs-lectures .onglet.active,
.tabs-outils .onglet.active {
	color: red;
	border-bottom-color: red;
}

/* Pas d'ascenseur : police et espacements resserrés pour que toutes les
   entrées tiennent dans la hauteur du bloc. */
.panneau-archives {
	display: none;
	padding: 8px 16px 0;
	font-size: 10.5px;
	line-height: 1.6;
}

.panneau-archives.active { display: block; }

.panneau-archives a {
	display: inline-block;
	margin: 0 3px 4px 0;
	padding: 1px 6px;
	border: 1px solid #dbe7ee;
	border-radius: 10px;
	color: var(--bleu-fonce) !important;
	background: #ffffff;
}

.panneau-archives a:hover {
	background: var(--bleu-fonce);
	color: #fff !important;
	border-color: var(--bleu-fonce);
}

/*-------------------------------------BLOC "BOÎTE À OUTILS" (rangée pleine largeur, onglets par groupe/dossier, même principe que "Liens vers les archives")-----------------------*/
.bloc-outils { padding: 6px 0 10px; }
.bloc-outils .titre-bloc { padding-left: 16px; padding-right: 16px; }

.outils-liste { margin-top: 2px; }

.panneau-outils {
	display: none;
	padding: 8px 16px 2px;
}

.panneau-outils.active {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px;
}

.panneau-outils a {
	position: relative;
	display: inline-block;
	margin: 0 4px 3px 0;
	padding: 2px 8px;
	font-size: 11px;
	border: 1px solid rgba(70, 195, 248, 0.45);
	border-radius: 10px;
	background: rgba(70, 195, 248, 0.22);
	color: var(--bleu-fonce) !important;
}

.panneau-outils a:hover {
	background: var(--bleu-fonce);
	color: #fff !important;
	border-color: var(--bleu-fonce);
}

/* Bouton d'outil au libellé raccourci (attribut data-tip posé par le JS
   uniquement quand le nom complet ne tient pas) : l'intitulé entier
   s'affiche dans une bulle au survol ou au focus clavier. */
.panneau-outils a[data-tip]::after {
	content: attr(data-tip);
	position: absolute;
	left: 50%;
	bottom: 100%;
	transform: translateX(-50%) translateY(-4px);
	background: var(--bleu-fonce);
	color: #fff;
	padding: 4px 9px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s ease, transform .15s ease;
	pointer-events: none;
	box-shadow: 0 4px 10px rgba(2, 88, 125, .28);
	z-index: 30;
}

.panneau-outils a[data-tip]:hover::after,
.panneau-outils a[data-tip]:focus-visible::after {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(-8px);
}

/*-------------------------------------BLOC "SEMAINE EN COURS" (mini-calendrier, à côté de la boîte à outils)-----------------------*/
.bloc-semaine {
	padding: 6px 14px 10px;
	display: flex;
	flex-direction: column;
}

.mini-calendrier {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	margin-bottom: 8px;
}

.jour-semaine {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 6px 1px;
	border-radius: 6px;
	background: rgba(70, 195, 248, 0.16);
}

.jour-semaine .nom-jour {
	font-size: 8.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: #6a8494;
}

.jour-semaine .num-jour {
	font-size: 13px;
	font-weight: 700;
	color: var(--bleu-fonce);
}

.jour-semaine.aujourdhui {
	background: var(--bleu-fonce);
}

.jour-semaine.aujourdhui .nom-jour,
.jour-semaine.aujourdhui .num-jour {
	color: #fff;
}

.semaine-bas {
	margin-top: auto;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.fete-du-jour {
	font-size: 11px;
	font-style: italic;
	color: #6a8494;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.semaine-lien {
	flex-shrink: 0;
}

/*-------------------------------------BLOC "RECHERCHES" (illustration + entrées hautes de l'arborescence)-----------------------*/
.bloc-recherches { padding: 8px 14px 10px; }

.recherches-corps {
	display: flex;
	align-items: stretch;
	gap: 10px;
	min-height: 190px;
}

.recherches-vignette {
	display: block;
	flex: 0 0 38%;
	border-radius: 8px;
	overflow: hidden;
}

.recherches-vignette img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
	transition: transform 0.25s ease;
}

.recherches-vignette:hover img {
	transform: scale(1.05);
}

.liste-rubriques {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
}

.liste-rubriques a {
	display: block;
	padding: 8px 12px;
	font-size: 13px;
	border: 1px solid rgba(70, 195, 248, 0.45);
	border-radius: 6px;
	background: rgba(70, 195, 248, 0.22);
	color: var(--bleu-fonce) !important;
}

.liste-rubriques a:hover {
	background: var(--bleu-fonce);
	color: #fff !important;
	border-color: var(--bleu-fonce);
}

/*-------------------------------------BLOCS "HÉRALDIQUE" ET "PERSONNALITÉS GARDOISES" (fiche au hasard, même principe que "Le lien du jour")-----------------------*/
.bloc-heraldique .lien-hasard-contenu,
.bloc-personnalite .lien-hasard-contenu {
	padding: 10px 16px 12px;
}

/* Nom de la fiche centré au-dessus de la vignette (blason ou photo), sur un
   fond cyan soutenu, en blanc. Centrage par flex sur le h4 lui-même :
   .titre-lien est en display:flex ailleurs sur le site, un simple
   text-align n'aurait pas suffi à le centrer. */
.nom-fiche {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 0 8px;
	padding: 5px 10px;
	border-radius: 6px;
	background: rgba(70, 195, 248, 0.85);
	font-size: 14.5px;
	text-align: center;
}

/* Priorité sur la couleur bleu foncé posée ailleurs sur .titre-lien
   (règle avec !important) : sélecteur plus spécifique, via les id des blocs. */
#heraldique-contenu .nom-fiche .titre-lien,
#personnalite-contenu .nom-fiche .titre-lien,
#lecture-du-jour-contenu .nom-fiche .titre-lien {
	color: #ffffff !important;
}

/* Corps du bloc : vignette à gauche, détails (généalogie Soirat / courte bio) à droite. */
.fiche-corps {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
}

.fiche-details {
	flex: 1;
	min-width: 0; /* sans ça, un item flex ne peut pas rétrécir sous la largeur de son
	                 contenu ("min-width: auto" implicite) : sur petit écran, le texte
	                 poussait le bloc en dehors de son cadre au lieu de passer à la ligne. */
	font-size: 10.5px;
	line-height: 1.5;
	color: #333;
}

.fiche-details .details-titre {
	display: inline-block;
	margin-bottom: 2px;
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #6a8494;
}

/* Vignette du blason : le SVG est injecté tel quel depuis la fiche, on le
   recadre donc en CSS (ses attributs width/height d'origine sont ignorés). */
.miniature-blason {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #eef7fc;
	border-radius: 8px;
	padding: 8px;
}

.miniature-blason svg {
	width: auto !important;
	height: 110px !important;
	max-width: 100%;
	display: block;
}

/* Vignette photo du bloc "Personnalités gardoises" (à côté du texte, pas en bandeau).
   Taille alignée sur celle du blason juste à côté (.miniature-blason svg, 110px). */
.fiche-corps .miniature-link {
	flex: 0 0 118px;
	display: block;
	border-radius: 8px;
	overflow: hidden;
	background: #eef7fc;
}

.fiche-corps .miniature-link img {
	width: 118px;
	height: 118px;
	object-fit: cover;
	object-position: top center;
	display: block;
	border-radius: 8px;
}

/* Personnalités gardoises, cas particulier : la photo n'est plus recadrée
   (object-fit: cover coupait des visages selon le cadrage de la source).
   Même cadre, même taille (118px, alignée sur le blason juste à côté), mais
   la photo est affichée en entier (object-fit: contain) sur un fond cyan
   (même teinte que le bloc "Liens vers les archives", .bloc-archives) plutôt
   que sur l'ancien fond gris-bleu clair. Revers du choix : la photo ne
   remplit plus le cadre jusqu'aux bords, elle perd donc ses coins arrondis
   (on ne les voit qu'au niveau du cadre lui-même). */
#personnalite-contenu .fiche-corps .miniature-link {
	height: 118px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(70, 195, 248, 0.16);
}

#personnalite-contenu .fiche-corps .miniature-link img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center;
	border-radius: 0;
}

/*-------------------------------------BLOC "DERNIERS AJOUTS"-----------------------*/
.bloc-derniers-ajouts { padding: 8px 14px 10px; }

.derniers-ajouts-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.derniers-ajouts-liste li a {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 5px 8px;
	border: 1px solid rgba(70, 195, 248, 0.45);
	border-radius: 6px;
	background: rgba(70, 195, 248, 0.22);
}

.derniers-ajouts-liste .entete {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.derniers-ajouts-liste .categorie {
	flex-shrink: 0;
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #6a8494;
	background: #ffffff;
	padding: 1px 6px;
	border-radius: 8px;
}

.derniers-ajouts-liste .nom {
	font-size: 13px;
	font-weight: 700;
	color: var(--bleu-logo) !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
}

/* Extrait de la fiche (2 lignes max — voir "extrait" dans derniers-ajouts.php) */
.derniers-ajouts-liste .extrait {
	font-size: 11px;
	line-height: 1.35;
	color: var(--bleu-fonce);
	opacity: .8;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.derniers-ajouts-liste li a:hover {
	background: var(--bleu-fonce);
}

.derniers-ajouts-liste li a:hover .nom,
.derniers-ajouts-liste li a:hover .categorie {
	color: #ffffff !important;
}

.derniers-ajouts-liste li a:hover .extrait {
	color: #ffffff;
	opacity: 1;
}

/*-------------------------------------BLOC "PHOTOS À VOIR …" (deux colonnes : au hasard / dernier album)-----------------------*/
.bloc-photos-a-voir { padding: 8px 14px 10px; }

.photos-a-voir-colonnes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.photos-a-voir-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
}

.photos-a-voir-sous-titre {
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #6a8494;
}

.photos-a-voir-vignette {
	display: block;
	width: 100%;
	border-radius: 8px;
	overflow: hidden;
	background: #eef7fc;
}

.photos-a-voir-vignette img {
	width: 100%;
	height: 90px;
	object-fit: cover;
	display: block;
}

.photos-a-voir-lien {
	font-size: 11px;
	font-weight: 600;
	color: var(--bleu-fonce) !important;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 640px) {
	.photos-a-voir-colonnes {
		grid-template-columns: 1fr 1fr;
	}
}

/*-------------------------------------BLOC "BIBLIOTHÈQUE PDF" (deux colonnes : au hasard / dernier ajouté, même principe que "Photos à voir …")-----------------------*/
.bloc-pdf-du-jour { padding: 8px 14px 10px; }

.pdf-du-jour-colonnes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.pdf-du-jour-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	min-width: 0; /* sans ça, un nom de PDF un peu long (non coupé, voir
	                 .pdf-du-jour-lien) impose sa largeur à la colonne grille
	                 ("min-width: auto" implicite) et fait déborder le bloc sur
	                 petit écran, au lieu d'être tronqué avec "…" comme prévu. */
}

.pdf-du-jour-sous-titre {
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #6a8494;
}

/* La couverture est dessinée dans le <canvas> par pdf.js (1ʳᵉ page du PDF) ;
   l'icône de repli (📄) reste visible en fond tant que le rendu n'a pas
   abouti (chargement en cours, ou échec — fichier introuvable, PDF
   corrompu…), puisqu'elle n'est jamais masquée explicitement. */
.pdf-du-jour-vignette {
	position: relative;
	display: block;
	width: 100%;
	height: 90px;
	border-radius: 8px;
	overflow: hidden;
	background: #eef7fc;
}

.pdf-du-jour-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
}

.pdf-du-jour-canvas {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 90px;
	object-fit: cover;
	object-position: top center;
	display: block;
}

.pdf-du-jour-lien {
	font-size: 11px;
	font-weight: 600;
	color: var(--bleu-fonce) !important;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pdf-du-jour-bas {
	display: block;
	margin-top: 10px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--bleu-fonce) !important;
	white-space: nowrap;
}

@media (max-width: 640px) {
	.pdf-du-jour-colonnes {
		grid-template-columns: 1fr 1fr;
	}
}

/*-------------------------------------BLOC "LIVRE D'OR" (les 3 derniers messages publiés, même gabarit que "Derniers ajouts", même fond que le bloc "Liens vers les archives")-----------------------*/
.bloc-livre-or {
	padding: 8px 14px 10px;
	background: rgba(70, 195, 248, 0.16);
}

.livre-or-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.livre-or-liste li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 6px 9px;
	border: 1px solid rgba(70, 195, 248, 0.45);
	border-radius: 6px;
	background: #fff;
}

.livre-or-pseudo {
	font-size: 11px;
	font-weight: 700;
	color: var(--bleu-fonce);
}

.livre-or-texte {
	font-size: 11.5px;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.livre-or-bas {
	display: block;
	margin-top: 10px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--bleu-fonce) !important;
	white-space: nowrap;
}

/*-------------------------------------BLOC "LECTURE DU JOUR" (2/3, un onglet par dossier de lectures, même principe que "Liens vers les archives")-----------------------*/
.panneau-lecture {
	display: none;
	padding: 10px 16px 12px;
}

.panneau-lecture.active { display: block; }

/* Vignette un peu plus grande que sur les blocs 1/3 Héraldique/Personnalités : le bloc est deux fois plus large. */
#lecture-du-jour-contenu .fiche-corps .miniature-link {
	flex: 0 0 160px;
}

#lecture-du-jour-contenu .fiche-corps .miniature-link img {
	width: 160px;
	height: 160px;
}

/* Sur les tout petits écrans, la vignette à 160px ne laisse plus assez de
   place au texte à côté (voir aussi min-width: 0 sur .fiche-details
   ci-dessus) : on la réduit un peu pour que ça respire. */
@media (max-width: 340px) {
	#lecture-du-jour-contenu .fiche-corps .miniature-link {
		flex: 0 0 120px;
	}

	#lecture-du-jour-contenu .fiche-corps .miniature-link img {
		width: 120px;
		height: 120px;
	}
}

.fiche-details-texte {
	margin: 0;
}

/*-------------------------------------PIED DE PAGE-----------------------*/
.site-footer {
	margin-top: 40px;
	padding: 22px 20px 26px;
	text-align: center;
	border-top: 1px solid #d7e4ea;
	background: #ffffff;
}

.footer-liens {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 8px;
	font-size: 12.5px;
}

.footer-liens a {
	color: var(--bleu-fonce) !important;
	font-weight: 600;
}

.footer-liens a:hover {
	color: red !important;
}

.footer-liens .separateur {
	color: #a9c0cc;
}

.footer-copyright {
	margin: 0;
	font-size: 11.5px;
	color: #8a97a0;
}

/*-------------------------------------ADAPTATION SMARTPHONE-----------------------*/
@media (max-width: 860px) {

	.site-header {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 12px 14px;
	}

	.header-logo { order: 1; }
	.header-logo img { max-height: 56px; }

	/* Sur mobile, la brève prend toute la largeur sur sa propre ligne, juste
	   sous le logo (elle n'a plus de colonne dédiée à occuper, le header
	   repassant en disposition flex empilée) ; recentrée, comme avant. */
	.header-breve {
		order: 2;
		flex-basis: 100%;
		max-width: none;
		margin: 0;
		justify-content: center;
		text-align: center;
	}

	.nav-toggle { display: flex; }

	.site-header {
		--hauteur-pastille: 32px;
	}

	/* Le menu devient un panneau plein écran, replié par défaut */
	.main-nav {
		flex-basis: 100%;
		order: 6;
	}

	.main-nav > ul {
		display: none;
		flex-direction: column;
		width: 100%;
		gap: 0;
		background: #ffffff;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	}

	.main-nav.is-open > ul {
		display: flex;
	}

	.main-nav > ul > li {
		width: 100%;
		border-top: 1px solid #eee;
	}

	.main-nav > ul > li > a,
	.main-nav > ul > li > .menu-label {
		padding: 14px 16px;
		white-space: normal;
	}

	/* Sur mobile, les sous-menus s'ouvrent au clic (pas au survol) et prennent la largeur */
	.submenu {
		position: static;
		box-shadow: none;
		padding-left: 12px;
		background: #f7fbfe;
	}

	.submenu li a {
		padding: 12px 16px;
	}

	.header-recherche {
		order: 4;
		flex-basis: 100%;
	}

	.form-recherche input[type="search"] {
		width: 100%;
	}

	/* Sans ce rappel, .header-contact hériterait de son ordre "bureau" (6),
	   ce qui la ferait passer après le panneau de menu (.main-nav, ordre 6
	   également) au lieu de rester avec le logo/la recherche en haut. */
	.header-contact {
		order: 5;
	}
}

/*-------------------------------------ADAPTATION SMARTPHONE EN MODE PAYSAGE-----------------------*/
/* En hauteur d'écran réduite (téléphone tourné en paysage), l'en-tête empilé
   ci-dessus (logo + brève + recherche + contact/menu, chacun sur sa propre
   ligne, pensé pour le portrait) devient bien trop haut : combiné à
   "position: sticky", il occupait jusqu'à 60% d'un écran de téléphone en
   paysage, en permanence. On le compacte (brève masquée, logo réduit,
   cadenas remonté à côté du logo) et on le laisse défiler avec la page
   plutôt que de rester fixé en haut. */
@media (max-height: 500px) and (orientation: landscape) {

	.site-header {
		position: static;
	}

	.header-logo img {
		max-height: 34px;
	}

	/* La brève (citation tirée au hasard) est un agrément, pas une
	   information essentielle à la navigation : on la masque pour regagner
	   une ligne entière de hauteur. */
	.header-breve {
		display: none;
	}
}

/* Réagencement supplémentaire, propre à l'en-tête "empilé" du mode
   smartphone (voir @media max-width: 860px ci-dessus) : sur les plus grands
   téléphones actuels, la largeur en paysage dépasse ce seuil de 860px et
   l'en-tête reste alors en disposition "bureau" (grille), à laquelle ce
   réagencement (pensé pour l'empilement en colonne) ne s'applique pas. */
@media (max-width: 860px) and (max-height: 500px) and (orientation: landscape) {

	/* Cadenas remonté à côté du logo (au lieu d'être tout en bas, après la
	   recherche et le panneau de menu) : une ligne de moins avant le menu. */
	.header-contact {
		order: 2;
	}

	.header-recherche {
		order: 3;
	}

	.main-nav {
		order: 4;
	}
}