/*
Theme Name: En mémoire de Jany
Theme URI: http://enmemoiredejany.fr/
Description: Thème enfant de Twenty Twenty-Two pour le site mémorial familial « En mémoire de Jany ». Mise en page sobre et recueillie, texte volontairement agrandi pour le confort de lecture, navigation simple et entièrement accessible au clavier.
Author: Famille de Jany
Template: twentytwentytwo
Version: 1.0.0
Requires at least: 6.1
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: enmemoiredejany
Tags: block-templates, full-site-editing, one-column, accessibility-ready, blog
*/

/*
 * Ce fichier reste volontairement court.
 * Couleurs, tailles de texte, espacements et largeurs sont définis dans theme.json.
 * On ne trouve ici que ce que theme.json ne sait pas exprimer.
 */

/* -------------------------------------------------------------------------
   1. Focus clavier — visible partout, dans la couleur d'accent
   ------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	border-radius: 2px;
}

/*
 * Le lien d'évitement (« Aller au contenu ») est fourni automatiquement par
 * WordPress pour les thèmes de blocs : il cible le premier élément <main>,
 * que tous les gabarits de ce thème déclarent. Rien à ajouter ici.
 */

/* -------------------------------------------------------------------------
   2. En-tête et pied de page
   ------------------------------------------------------------------------- */

.entete-site {
	border-bottom: 1px solid var(--wp--preset--color--bordure);
}

.pied-site {
	border-top: 1px solid var(--wp--preset--color--bordure);
}

/*
 * Sous-menu « Les hommages » : il s'ouvre au clic sur un vrai bouton
 * (openSubmenusOnClick), jamais au simple survol. On garde une largeur
 * confortable et un contour net pour qu'il reste lisible.
 */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--bordure);
	min-width: 16rem;
	padding-block: 0.35rem;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.6rem 1rem;
}

/* Cible tactile d'au moins 44 px de haut sur les entrées de menu. */
.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-submenu__toggle {
	min-height: 44px;
	display: flex;
	align-items: center;
}

/* -------------------------------------------------------------------------
   3. Photo principale de Jany
   ------------------------------------------------------------------------- */

/*
 * Aucun recadrage, aucune déformation : l'image garde ses proportions.
 * La double contrainte largeur / hauteur donne un rendu correct aussi bien
 * pour un portrait (limité par max-height) que pour un paysage (par max-width).
 */
.photo-principale {
	margin-inline: auto;
}

.photo-principale img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(100%, 30rem);
	max-height: 72vh;
	margin-inline: auto;
	border-radius: 2px;
}

/* -------------------------------------------------------------------------
   4. Blocs d'accès de la page d'accueil — cliquables sur toute leur surface
   ------------------------------------------------------------------------- */

/*
 * Technique du « lien étiré » : le lien reste un vrai lien (donc accessible
 * au clavier et annoncé correctement par les lecteurs d'écran), et son
 * pseudo-élément recouvre toute la carte pour capter le clic.
 * Aucun JavaScript n'est nécessaire.
 */
.carte-acces {
	position: relative;
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 3px;
	background-color: var(--wp--preset--color--blanc);
	transition: none;
}

.carte-acces .carte-acces__titre {
	margin: 0 0 0.35rem;
}

.carte-acces .carte-acces__titre a {
	text-decoration: none;
	color: var(--wp--preset--color--primary);
}

.carte-acces .carte-acces__titre a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 3px;
}

.carte-acces p {
	margin: 0;
	color: var(--wp--preset--color--secondary);
}

.carte-acces:hover {
	background-color: var(--wp--preset--color--tertiary);
	border-color: var(--wp--preset--color--primary);
}

.carte-acces:hover .carte-acces__titre a {
	text-decoration: underline;
}

/* Le focus clavier met en évidence la carte entière, pas seulement le titre. */
.carte-acces:focus-within {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

.carte-acces .carte-acces__titre a:focus-visible {
	outline: none;
}

/* -------------------------------------------------------------------------
   5. Pages d'hommage
   ------------------------------------------------------------------------- */

.mention-auteur {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.02em;
	margin-block-start: 0.5rem;
}

/* Texte de remplacement : visiblement provisoire, à remplacer. */
.texte-a-remplacer {
	border-left: 3px solid var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--tertiary);
	padding: 1rem 1.25rem;
	color: var(--wp--preset--color--secondary);
}

.navigation-hommages {
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--bordure);
}

.navigation-hommages__liens {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
}

.navigation-hommages__liens a {
	flex: 1 1 14rem;
	display: block;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 3px;
	text-decoration: none;
	background-color: var(--wp--preset--color--blanc);
}

.navigation-hommages__liens a:hover {
	background-color: var(--wp--preset--color--tertiary);
	border-color: var(--wp--preset--color--primary);
}

.navigation-hommages__liens .nav-suivant {
	text-align: right;
}

.navigation-hommages__etiquette {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--secondary);
}

.navigation-hommages__titre {
	display: block;
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.navigation-hommages__retour {
	margin-block-start: 1.5rem;
	text-align: center;
}

/* -------------------------------------------------------------------------
   6. Galeries
   ------------------------------------------------------------------------- */

/*
 * Le cœur de WordPress gère déjà 2 colonnes en dessous de 600 px et le
 * nombre choisi au-delà. On ajoute les deux paliers intermédiaires demandés :
 * 2 colonnes sur tablette, 3 sur petit ordinateur portable, 4 au-delà.
 * Le sélecteur :not(#specificite) reproduit l'astuce de spécificité du cœur.
 */
@media (max-width: 781px) {
	.wp-block-gallery.has-nested-images.galerie-memoire figure.wp-block-image:not(#specificite) {
		width: calc(50% - var(--wp--style--unstable-gallery-gap, 1rem) / 2);
	}
}

@media (min-width: 782px) and (max-width: 1099px) {
	.wp-block-gallery.has-nested-images.galerie-memoire figure.wp-block-image:not(#specificite) {
		width: calc(33.33% - var(--wp--style--unstable-gallery-gap, 1rem) * 2 / 3);
	}
}

/* Légendes lisibles, sous l'image et jamais superposées à celle-ci. */
.galerie-memoire.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	position: static;
	background: none;
	padding: 0.5rem 0 0;
	margin: 0;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
	text-align: left;
	overflow: visible;
	max-height: none;
}

.galerie-memoire.wp-block-gallery.has-nested-images figure.wp-block-image img {
	border-radius: 2px;
}

/* Encadré affiché tant que la galerie est vide. */
.galerie-vide {
	border: 1px dashed var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--tertiary);
	padding: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--secondary);
}

/* -------------------------------------------------------------------------
   7. Confort de lecture général
   ------------------------------------------------------------------------- */

/* Pas de césure agressive ni de débordement horizontal. */
body {
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

p,
li {
	overflow-wrap: break-word;
}

/* Listes un peu aérées, comme les paragraphes. */
.wp-block-post-content li + li {
	margin-block-start: 0.5rem;
}

/*
 * Respect du réglage système « réduire les animations ».
 * Le thème n'anime rien, cette règle neutralise ce que pourrait
 * introduire le cœur de WordPress ou le thème parent.
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}