@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-fonce) #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;
}

/* Sur ordinateur, seul le survol (:hover) affiche le sous-menu — la classe
   "open" (ajoutée au clic par le script du menu mobile, voir index.html)
   n'a d'effet qu'en dessous de 860px, dans la media query plus bas :
   sans cette séparation, cliquer un menu au lieu de le survoler le
   figeait ouvert même après avoir déplacé la souris ailleurs. */
.main-nav .has-submenu:hover > .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;
}

/* Idem : sur ordinateur, seul :hover ouvre le sous-menu (voir le
   commentaire ci-dessus sur .menu-label). ".open" est géré plus bas, dans
   la media query mobile. */
.has-submenu:hover .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. Texte affiché en entier (retour à la ligne si besoin,
   plutôt que tronqué avec "…") ; l'info-bulle (title, posée en JS) reprend
   quand même le texte entier au survol, par confort. */
.header-breve {
	order: -1;
	grid-column: 1 / -1;
	white-space: normal;
	text-align: center;
	font-style: italic;
	font-size: 12px;
	line-height: 1.3;
	color: var(--bleu-fonce);
	max-width: 820px;
	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;
}

/* Rôle "site" (modérateur) uniquement, quand des messages du livre d'or
   attendent une validation (voir statut.php et index.html) : le cadenas
   passe en jaune plutôt qu'en rouge, pour signaler qu'une modération est à
   faire sans avoir besoin d'ouvrir la page d'administration. Déclarée après
   ".connecte", même spécificité : c'est donc bien elle qui l'emporte. */
a.lien-connexion.a-des-messages-en-attente {
	color: #b8860b;
}

a.lien-connexion.a-des-messages-en-attente:hover {
	color: #96700a;
}

/* 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);
}

/*-------------------------------------ALERTE INFO (bandeau défilant, façon "alerte info" JT)-----------------------*/
/* N'apparaît qu'à la demande : reste invisible tant que le paragraphe
   #alerteInfoTexte (dans index.html, juste après le header) est vide.
   Dès qu'un texte y est saisi, le script correspondant retire l'attribut
   "hidden" et duplique le texte pour le faire défiler en boucle. */
.alerte-info {
	max-width: 1200px;
	margin: 18px auto 0;
	padding: 0 20px;
}

.alerte-info-interieur {
	display: flex;
	align-items: center;
	width: 100%;
	background: #c1121f;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 3px 14px rgba(193, 18, 31, 0.35);
}

.alerte-info-badge {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 8px 16px;
	background: #7a0d15;
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.alerte-info-badge::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	animation: alerte-info-clignote 1.4s ease-in-out infinite;
}

/* Badge de droite : symétrique de celui de gauche (pastille après le texte
   plutôt qu'avant), purement décoratif — aria-hidden côté HTML, le message
   n'est annoncé qu'une fois par les lecteurs d'écran via le badge gauche. */
.alerte-info-badge-droite {
	flex-direction: row-reverse;
}

.alerte-info-piste {
	flex: 1;
	overflow: hidden;
	position: relative;
	height: 34px;
}

.alerte-info-defilant {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	height: 100%;
	white-space: nowrap;
	/* Position de repli tant que le script n'a pas encore mesuré la piste
	   (--depart / --arrivee) : au moins masqué hors champ à droite. */
	transform: translateX(var(--depart, 100%));
	animation: alerte-info-defile 18s linear infinite;
}

.alerte-info-copie {
	display: inline-block;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
}

@keyframes alerte-info-clignote {
	0%, 100% { opacity: 1; }
	50% { opacity: .25; }
}

/* Le texte part de juste hors champ à droite (--depart, calculé en JS =
   largeur de la piste) et défile jusqu'à disparaître entièrement hors champ
   à gauche (--arrivee = -largeur du texte) : les deux positions sont
   invisibles, donc le retour au point de départ à chaque boucle ne se voit
   pas — contrairement à un défilement qui apparaîtrait d'un bloc au milieu. */
@keyframes alerte-info-defile {
	from { transform: translateX(var(--depart, 100%)); }
	to   { transform: translateX(var(--arrivee, -100%)); }
}

@media (prefers-reduced-motion: reduce) {
	.alerte-info-defilant {
		animation: none;
		position: static;
		transform: none;
		white-space: normal;
		padding: 8px 14px;
	}
}

@media (max-width: 640px) {
	.alerte-info { margin-top: 12px; padding: 0 10px; }
	.alerte-info-badge { padding: 6px 10px; font-size: 11px; }
	/* Sur petit écran, un seul badge (celui de gauche) suffit à identifier
	   le bandeau ; celui de droite est retiré pour laisser la place au texte. */
	.alerte-info-badge-droite { display: none; }
	.alerte-info-piste { height: 30px; }
	.alerte-info-copie { font-size: 13px; }
}
/*-------------------------------------FIN ALERTE INFO-----------------------*/

/*-------------------------------------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;
}

/* Jour avec un événement noté dans l'agenda (actus/calendrier-api.php) */
.jour-semaine.avec-evenement {
	background: #d64545;
}

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

.jour-semaine.avec-evenement.aujourdhui {
	background: #d64545;
	box-shadow: 0 0 0 2px var(--bleu-fonce) inset;
}

.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: grid;
	grid-template-columns: repeat(2, 1fr);
	align-content: center;
	gap: 6px 8px;
}

.liste-rubriques a {
	display: block;
	min-width: 0; /* comme .liste-rubriques ci-dessus : sans ça, un intitulé
	                 avec un mot un peu long ("Personnalités", "Héraldique"…)
	                 impose sa largeur à la colonne de la grille au lieu de
	                 se répartir sur 2 lignes, et le bouton d'à côté déborde
	                 alors du bloc sur petit écran (bord droit coupé). */
	overflow-wrap: break-word;
	padding: 5px 8px;
	font-size: 12px;
	line-height: 1.25;
	text-align: center;
	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;
	min-width: 0; /* même correctif que .pdf-du-jour-col plus bas : sans ça,
	                 un titre d'album un peu long (non coupé, voir
	                 .photos-a-voir-lien) impose sa largeur à la colonne
	                 grille au lieu d'être tronqué avec "…" comme prévu, et
	                 fait déborder le bloc sur petit écran (bord droit coupé). */
}

.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;
	}
}

/* Sur mobile, la mise en page en ligne héritée (vignette à gauche, texte à
   droite, le tout centré verticalement via align-items: center sur
   .fiche-corps) devient illisible : l'extrait fait jusqu'à 600 caractères
   (pensé pour la largeur du bloc 2/3 sur ordinateur) et se retrouve
   compressé dans une colonne de texte étroite — donc très haute —, ce qui
   centre la vignette, bien plus basse, au milieu d'un grand vide. On
   empile plutôt la vignette (centrée) puis le texte (pleine largeur,
   agrandi pour rester lisible), et on limite ce dernier à quelques lignes
   : le lien "Lire →" juste en dessous mène de toute façon au texte complet. */
@media (max-width: 860px) {
	#lecture-du-jour-contenu .fiche-corps {
		flex-direction: column;
		align-items: center;
	}

	#lecture-du-jour-contenu .fiche-corps .miniature-link {
		flex: 0 0 auto;
	}

	#lecture-du-jour-contenu .fiche-details {
		width: 100%;
		font-size: 13px;
		line-height: 1.55;
	}

	#lecture-du-jour-contenu .fiche-details-texte {
		display: -webkit-box;
		-webkit-line-clamp: 8;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

.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;
	}

	/* Contrepartie mobile des règles ":hover" du bloc principal (voir les
	   commentaires vers .main-nav .has-submenu:hover > .menu-label et
	   .has-submenu:hover .submenu) : ici c'est la classe "open", ajoutée par
	   le script au clic sur un libellé de menu, qui ouvre le sous-menu. */
	.main-nav .has-submenu.open > .menu-label {
		color: red;
		border-bottom-color: red;
	}

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

	.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;
	}

	/* Une fois la page défilée, l'en-tête (collé en haut grâce à
	   "position: sticky") restait affiché à sa pleine hauteur en
	   permanence — jusqu'à environ un tiers de la hauteur d'un écran de
	   téléphone — cachant provisoirement ce qui défilait juste en dessous.
	   Boutons de "Recherches" ou photo de "Photos à voir" pouvaient ainsi
	   sembler coupés ou manquants selon la position de défilement, alors
	   qu'ils étaient simplement passés (temporairement) sous l'en-tête.
	   On réutilise ici la classe "scrolled" — déjà ajoutée par le script
	   de l'en-tête dès que la page défile, jusqu'ici seulement utilisée
	   pour une ombre — afin de compacter l'en-tête, comme c'est déjà fait
	   en mode paysage un peu plus bas dans ce fichier (même principe :
	   brève masquée, logo réduit). */
	.site-header.scrolled .header-breve {
		display: none;
	}

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

	.site-header.scrolled {
		gap: 8px 14px;
	}
}

/*-------------------------------------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;
	}
}