/* Association Scintillae — ajustements propres au site */

/* Logo de la page d'accueil, posé en HTML et non incrusté dans le fond */
/* Le logo devient le conteneur d'une zone d'accès discrète, centrée sur
   l'étoile. Elle ne remplace pas la protection : celle-ci reste le code
   demandé par membres.php. Elle évite seulement d'annoncer l'espace
   réservé aux visiteurs qui n'ont rien à y faire. */
#intro .marque-zone {
	position: relative;
	display: block;
	width: 100%;
	max-width: 26rem;
	margin: 0 auto 1.5rem auto;
	line-height: 0;
}

#intro .marque {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

#intro .acces-membres {
	position: absolute;
	left: 10%;
	top: 25%;
	width: 13%;
	height: 50%;
	border: 0;
	border-radius: 50%;
}

#intro .acces-membres:hover {
	background-color: rgba(255, 255, 255, 0.06);
}

#intro h1 {
	margin-bottom: 0.5rem;
}

#intro .sous-titre {
	font-size: 0.8rem;
	letter-spacing: 0.25rem;
	text-transform: uppercase;
	opacity: 0.75;
	margin-bottom: 2rem;
}

@media screen and (max-width: 736px) {
	#intro .marque-zone {
		max-width: 16rem;
		margin-bottom: 1rem;
	}
	#intro .acces-membres {
		left: 7%;
		width: 19%;
		top: 20%;
		height: 60%;
	}
	#intro .sous-titre {
		letter-spacing: 0.15rem;
	}
}

/* Lecteur de documents : remonté au plus près du menu */
#main > .post.lecteur-page {
	padding: 1.25rem 1.25rem 1rem 1.25rem;
}

.lecteur-pdf {
	position: relative;
	width: 100%;
	height: calc(100vh - 11rem);
	min-height: 30rem;
	margin-bottom: 1rem;
	border: solid 1px rgba(212, 212, 255, 0.1);
	background: rgba(255, 255, 255, 0.04);
}

.lecteur-pdf iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.lecteur-pdf .repli {
	display: none;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	text-align: center;
	padding: 0 2rem;
	margin: 0;
}

.lecteur-page .actions {
	margin-bottom: 0;
}

@media screen and (max-width: 736px) {
	#main > .post.lecteur-page {
		padding: 0.75rem 0.75rem 0.5rem 0.75rem;
	}
	.lecteur-pdf {
		height: calc(100vh - 9rem);
		min-height: 22rem;
	}
}

/* Fin de la page d'accueil : les boutons appartiennent à l'article,
   ce qui évite le filet de séparation et la marge des sections du thème. */
.fin-accueil {
	text-align: center;
	margin-top: 2.5rem;
}

/* Bloc à part : sans cela, le bouton rond se placerait à côté du précédent */
.fin-accueil .retour-haut {
	margin-top: 2.5rem;
}

@media screen and (max-width: 736px) {
	.fin-accueil {
		margin-top: 2rem;
	}
	.fin-accueil .retour-haut {
		margin-top: 1.75rem;
	}
}

/* Repli : navigateurs sans lecteur PDF intégré (mobiles pour l'essentiel) */
.repli-doc {
	display: none;
	text-align: center;
	padding: 3rem 1.5rem 2rem 1.5rem;
}

.repli-doc h3 {
	margin-bottom: 1rem;
}

.repli-doc p {
	color: rgba(255, 255, 255, 0.65);
	margin-bottom: 2rem;
}

.repli-doc .actions {
	margin-bottom: 0;
}

@media screen and (max-width: 736px) {
	.repli-doc {
		padding: 2rem 0.5rem 1rem 0.5rem;
	}
	.repli-doc p {
		margin-bottom: 1.5rem;
	}
}

/* ---- Barre de navigation ----
   Le thème coupe silencieusement le menu (#nav a overflow:hidden) dès que les
   liens dépassent. On resserre l'espacement dans la zone la plus étroite et
   quand la police du navigateur est agrandie. */
@media screen and (max-width: 1280px) {
	#nav ul.links li a {
		padding: 0 1.4rem;
	}
}

@media screen and (max-width: 1080px) {
	#nav ul.links li a {
		padding: 0 1rem;
		letter-spacing: 0.04em;
	}
}

/* ---- Tableau des documents ----
   Sur petit écran, la colonne de l'auteur force un défilement horizontal
   alors qu'elle répète « SkintilHoma ». On la masque. */
@media screen and (max-width: 736px) {
	.table-wrapper table th:nth-child(2),
	.table-wrapper table td:nth-child(2) {
		display: none;
	}
	.table-wrapper table td[colspan="2"] {
		display: table-cell;
	}
}

/* ---- Lecteur de documents ----
   Sur mobile, 100vh inclut la barre d'adresse rétractable : l'élément dépasse
   l'écran. dvh corrige quand il est disponible. */
@supports (height: 100dvh) {
	.lecteur-pdf {
		height: calc(100dvh - 11rem);
	}
}

@media screen and (min-width: 737px) and (max-width: 980px) {
	.lecteur-pdf {
		height: calc(100vh - 10rem);
	}
	#main > .post.lecteur-page {
		padding: 1rem 1rem 0.75rem 1rem;
	}
}

@supports (height: 100dvh) {
	@media screen and (max-width: 736px) {
		.lecteur-pdf {
			height: calc(100dvh - 9rem);
		}
	}
}

/* ---- Boutons ----
   Le thème leur impose white-space:nowrap et une hauteur fixe : un libellé un
   peu long déborde de l'écran sans pouvoir revenir à la ligne. Sur petit écran
   on les laisse occuper la largeur disponible et se replier si nécessaire.
   Le bouton rond (.solo) est exclu : sa forme dépend de sa hauteur fixe. */
@media screen and (max-width: 736px) {
	.button:not(.solo),
	button:not(.solo),
	input[type="submit"],
	input[type="reset"],
	input[type="button"] {
		display: block;
		width: 100%;
		max-width: 100%;
		padding-left: 1rem;
		padding-right: 1rem;
	}

	/* Les liens peuvent se replier sur deux lignes ; pas les <input>. */
	a.button:not(.solo) {
		white-space: normal;
		height: auto;
		min-height: 3rem;
		line-height: 1.4;
		padding-top: 0.85rem;
		padding-bottom: 0.85rem;
	}

	a.button.large:not(.solo) {
		min-height: 3.5rem;
	}

	/* Un input ne se replie pas : on réduit plutôt le texte. */
	input[type="submit"] {
		font-size: 0.8rem;
	}
}

@media screen and (max-width: 360px) {
	input[type="submit"] {
		font-size: 0.72rem;
		letter-spacing: 0.05em;
	}
}

/* ---- Groupes de boutons ----
   ul.actions est un conteneur flex aligné à gauche, qui ne passe en colonne
   qu'à 480 px alors que les boutons débordent bien avant. */
@media screen and (max-width: 736px) {
	ul.actions:not(.fixed) {
		flex-direction: column;
		justify-content: center;
		align-items: stretch;
		width: 100%;
		margin-left: 0;
	}

	ul.actions:not(.fixed) li {
		padding-left: 0;
		width: 100%;
	}

	ul.actions:not(.fixed) li + li {
		margin-top: 0.75rem;
	}
}


/* ---- Intitulés de sections dans la liste des documents ----
   Deux ensembles distincts : ce qui engage l'association, et ce qui est
   seulement mis à disposition. Chacun est annoncé par une ligne repérable. */
.separateur-corpus {
	background-color: #eef4f7;
	border-bottom: solid 1px #cfe4ee !important;
	padding: 1.25rem 1rem !important;
}

/* Le tableau fusionne ses bordures : une bordure blanche épaisse crée un vrai
   blanc entre les deux ensembles, et le filet bleu est dessiné à l'intérieur
   de la cellule pour rester collé au fond coloré. */
.separateur-corpus:not(.premier) {
	border-top: solid 2.75rem #ffffff !important;
	box-shadow: inset 0 3px 0 0 #18bfef;
}

/* La ligne qui précède garde une bordure basse d'1 px : en mode « collapse »
   c'est la plus large qui l'emporte, mais on la retire pour éviter tout trait
   flottant au milieu du blanc. */
tr:has(+ tr > .separateur-corpus:not(.premier)) {
	border-bottom-color: transparent;
}

/* Le premier intitulé suit l'en-tête du tableau : pas de blanc au-dessus. */
.separateur-corpus.premier {
	border-top: solid 3px #18bfef !important;
}

.separateur-corpus strong {
	display: block;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.7rem;
	color: #1e252d;
	margin-bottom: 0.4rem;
}

.separateur-corpus span {
	display: block;
	color: #4a5a63;
	font-size: 0.85rem;
	line-height: 1.5;
}

/* Un peu d'air après chaque intitulé, avant la première ligne de sa section. */
.separateur-corpus + tr td,
tr:has(.separateur-corpus) + tr td {
	padding-top: 1rem;
}

@media screen and (max-width: 736px) {
	.separateur-corpus {
		padding: 1rem 0.5rem !important;
	}
	.separateur-corpus:not(.premier) {
		border-top-width: 2rem !important;
	}
	.separateur-corpus span {
		font-size: 0.8rem;
	}
}

/* ---- En-tête ----
   Le lien « accueil » fait doublon avec l'onglet « L'association » du menu et
   avec l'icône du navigateur : on le masque sans retirer l'élément, dont le
   thème se sert pour caler le menu et pour animer le bouton de menu mobile. */
#header .logo {
	display: none;
}

/* L'en-tête est ramené de 20 rem à la hauteur du menu, plus un liseré qui
   laisse dépasser les onglets. */
#header {
	height: 5rem;
	padding-bottom: 0;
}

/* Sur l'accueil, l'en-tête remonte sur la bannière : le décalage doit suivre
   la nouvelle hauteur, sans quoi le menu chevaucherait le titre. */
#intro + #header {
	margin-top: -5rem;
}

/* Sous 980 px le menu horizontal cède la place au bouton flottant. L'en-tête
   n'a plus rien à porter, mais il doit rester assez haut pour que le contenu
   ne vienne pas affleurer ce bouton : il descend jusqu'à 2,85 rem du haut. */
@media screen and (max-width: 980px) {
	#header {
		height: 4.75rem;
		padding-bottom: 0;
	}
	#intro + #header {
		margin-top: 0;
	}
}

@media screen and (max-width: 736px) {
	#header {
		height: 4.25rem;
	}
}

/* ---- Bouton « vers le bas » de la bannière ----
   Le thème le masque sous 980 px. Or c'est le seul moyen évident de passer
   de la bannière au contenu sur petit écran, le menu horizontal ayant cédé
   la place au bouton flottant. On le rétablit. */
@media screen and (max-width: 980px) {
	#intro .actions {
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		justify-content: center;
		margin-top: 1.5rem;
		margin-left: 0;
	}
	#intro .actions li {
		padding-left: 0;
		width: auto;
	}
}

@media screen and (max-width: 736px) {
	#intro .actions {
		margin-top: 1rem;
	}
}

/* Le thème force à 100 % de largeur tout enfant d'un ul.actions sous 736 px.
   Appliqué au bouton rond, cela l'étire en rectangle et fait réapparaître son
   libellé, que l'indentation de 4 rem ne suffit plus à masquer. */
@media screen and (max-width: 736px) {
	ul.actions:not(.fixed) li .button.solo,
	ul.actions:not(.fixed) li > .solo {
		width: 4rem;
		max-width: 4rem;
		height: 4rem;
		line-height: 4rem;
		padding: 0;
		text-indent: 4rem;
		overflow: hidden;
		white-space: nowrap;
	}
}

/* ---- Survol sur écran tactile ----
   Un téléphone n'a pas de survol : après un appui, l'état :hover reste collé
   au bouton jusqu'au prochain appui ailleurs. Le bouton restait donc bleu.
   On rend l'état de survol inopérant là où il n'a pas de sens, et on le
   remplace par un retour visuel bref au moment de l'appui. */
@media (hover: none) {
	input[type="submit"]:hover,
	input[type="reset"]:hover,
	input[type="button"]:hover,
	button:hover,
	.button:hover {
		box-shadow: inset 0 0 0 2px #212931;
		color: #212931 !important;
		background-color: transparent;
	}

	input[type="submit"].primary:hover,
	input[type="reset"].primary:hover,
	input[type="button"].primary:hover,
	button.primary:hover,
	.button.primary:hover {
		background-color: #212931;
		box-shadow: none;
		color: #ffffff !important;
	}

	#intro input[type="submit"]:hover,
	#intro input[type="reset"]:hover,
	#intro input[type="button"]:hover,
	#intro button:hover,
	#intro .button:hover {
		box-shadow: inset 0 0 0 2px #ffffff;
		color: #ffffff !important;
		background-color: transparent;
	}

	#intro input[type="submit"].primary:hover,
	#intro button.primary:hover,
	#intro .button.primary:hover {
		background-color: #ffffff;
		box-shadow: none;
		color: #1e252d !important;
	}

	/* Retour visuel au moment de l'appui, qui disparaît dès le relâchement. */
	.button:active,
	button:active,
	input[type="submit"]:active,
	input[type="reset"]:active,
	input[type="button"]:active {
		opacity: 0.65;
	}

	#nav ul.links li a:hover {
		background-color: transparent;
	}
}

/* L'icône du bouton rond est positionnée avec « width: inherit ». Comme le
   thème force la largeur du bouton à 100 % dans ul.actions, cet héritage
   devient imprévisible et la flèche se décale. On fixe ses dimensions. */
@media screen and (max-width: 736px) {
	ul.actions:not(.fixed) li .button.solo:before,
	ul.actions:not(.fixed) li > .solo:before {
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		right: auto;
		width: 4rem;
		height: 4rem;
		line-height: 4rem;
		text-align: center;
		text-indent: 0;
		margin: 0;
		padding: 0;
	}
}


/* ---- Hiérarchie des titres ----
   Chaque page a désormais un h1 (le titre de la page), les rubriques du pied
   de page sont en h4. On conserve l'apparence que le thème donnait au h3. */
#main > .post header.major > h1.titre-page,
#main > .post header.major > h2.titre-page,
#main > .post header.major > .titre-page {
	font-size: 1.25rem;
	line-height: 1.5;
	margin: 0 0 1.5rem 0;
}

#footer h4 {
	font-size: 1rem;
	margin: 0 0 1.5rem 0;
}