/*
Theme Name: IDETIC Photo
Author: IDETIC SSL
Description: Habillage sur mesure des sites de Raphaël Photographe. Thème enfant de Twenty Twenty-Four : palette chaude, typographie éditoriale, galeries en grille alignée. Aucune ressource externe, les polices Cardo et Inter sont celles déjà fournies par le thème parent.
Template: twentytwentyfour
Version: 1.1.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 8.0
Text Domain: idetic-photo
*/

/* ==========================================================================
   1. Palette et rythme
   On redéfinit la valeur des presets du thème parent plutôt que la liste des
   couleurs : les motifs de Twenty Twenty-Four continuent ainsi de fonctionner.
   ========================================================================== */

:root,
body {
	--wp--preset--color--base: #faf9f7;          /* papier chaud */
	--wp--preset--color--base-2: #f1eee8;        /* aplats et cartes */
	--wp--preset--color--contrast: #1a1917;      /* texte */
	--wp--preset--color--contrast-2: #565249;    /* texte secondaire */
	--wp--preset--color--contrast-3: #8b857a;    /* légendes */
	--wp--preset--color--accent: #94714a;        /* laiton chaud */

	--idetic-liseré: rgba(26, 25, 23, 0.12);
	/* mesure de lecture partagée : en unités absolues, car « ch » se calcule
	   sur la police de chaque élément et désalignerait les citations */
	--idetic-mesure: 45rem;
	--idetic-espace-galerie: clamp(0.4rem, 1vw, 0.85rem);
}

body {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* ==========================================================================
   2. Typographie
   ========================================================================== */

body {
	font-size: 1.0625rem;
	line-height: 1.75;
	letter-spacing: 0.003em;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.wp-block-post-title,
.wp-block-site-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	letter-spacing: -0.012em;
	line-height: 1.15;
	text-wrap: balance;
}

.wp-block-post-title {
	font-size: clamp(2.05rem, 4.6vw, 3.15rem);
	margin-bottom: 0.6em;
	text-align: center;
}

/* un filet discret sous le titre de page, en guise de signature graphique */
.wp-block-post-title::after {
	content: "";
	display: block;
	width: 3.25rem;
	height: 1px;
	margin: 0.85em auto 0;
	background-color: var(--wp--preset--color--accent);
}

.entry-content h2 {
	font-size: clamp(1.45rem, 2.5vw, 1.9rem);
	margin-top: 2.4em;
	margin-bottom: 0.7em;
}

.entry-content h3 {
	font-size: clamp(1.2rem, 2vw, 1.4rem);
	margin-top: 2em;
}

.entry-content p {
	max-width: var(--idetic-mesure);   /* longueur de ligne confortable */
	margin-inline: auto;
}

.entry-content a:where(:not(.wp-element-button)) {
	color: inherit;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	transition: color 0.2s ease;
}

.entry-content a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--accent);
}

/* ==========================================================================
   3. En-tête : collant, translucide, discret
   ========================================================================== */

header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--idetic-liseré);
}

@supports (backdrop-filter: blur(8px)) {
	header.wp-block-template-part {
		background-color: rgba(250, 249, 247, 0.86);
		backdrop-filter: blur(10px) saturate(1.1);
	}
}

.wp-block-site-title {
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	line-height: 1.25;
}

.wp-block-site-title a {
	text-decoration: none;
}

.wp-block-site-title a:hover {
	color: var(--wp--preset--color--accent);
}

/* le logo du client porte deja son nom : le titre de site ferait doublon */
.wp-block-site-logo img {
	width: clamp(110px, 13vw, 158px) !important;
	height: auto !important;
	max-width: none;
}

.wp-block-site-logo a {
	display: block;
	line-height: 0;
}

.wp-block-site-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ==========================================================================
   4. Navigation
   ========================================================================== */

.wp-block-navigation {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	letter-spacing: 0.05em;
}

.wp-block-navigation a:hover {
	color: var(--wp--preset--color--accent);
}

.wp-block-navigation__submenu-container {
	border: 1px solid var(--idetic-liseré);
	box-shadow: 0 12px 28px rgba(26, 25, 23, 0.09);
	background-color: var(--wp--preset--color--base);
}

/* menu plein écran sur mobile : on aère */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: clamp(1.5rem, 6vw, 3rem);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 1.1rem;
	font-size: 1.15rem;
	letter-spacing: 0.02em;
}

/* ==========================================================================
   5. Galeries : une grille réellement alignée
   Le bloc galerie de WordPress répartit les images en flex selon leur ratio,
   ce qui donne des lignes irrégulières dès que l'on mélange portraits et
   paysages. On repasse en grille avec un cadrage constant ; l'image entière
   reste accessible au clic.
   ========================================================================== */

/* Les styles du bloc galerie sont imprimés par WordPress après la feuille du
   thème, et ils gonflent leur spécificité avec `:not(#individual-image)`. Il
   faut donc à la fois monter la spécificité et forcer les quelques propriétés
   qui portent la mise en page. */
body .wp-block-gallery.has-nested-images:not(#idetic) {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: var(--idetic-espace-galerie) !important;
	align-items: stretch;
}

body .wp-block-gallery.has-nested-images:not(#idetic) figure.wp-block-image:not(#idetic) {
	width: 100% !important;
	max-width: 100% !important;
	flex: none !important;
	margin: 0 !important;
	overflow: hidden;
	background-color: var(--wp--preset--color--base-2);
}

body .wp-block-gallery.has-nested-images:not(#idetic) figure.wp-block-image > a {
	display: block;
	width: 100%;
	height: 100%;
}

body .wp-block-gallery.has-nested-images:not(#idetic) figure.wp-block-image img:not(#idetic) {
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover !important;
	object-position: center;
	border-radius: 0;
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

body .wp-block-gallery.has-nested-images:not(#idetic) figure.wp-block-image:hover img {
	transform: scale(1.045);
}

/* les légendes n'ont pas de sens dans une grille cadrée */
body .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	display: none;
}

/* une galerie mérite toute la largeur */
.entry-content > .wp-block-gallery {
	margin-block: clamp(2rem, 5vw, 3.5rem);
}

/* ==========================================================================
   6. Images isolées et légendes
   ========================================================================== */

.entry-content > figure.wp-block-image {
	margin-block: clamp(2rem, 5vw, 3.25rem);
}

.entry-content figure.wp-block-image img {
	border-radius: 2px;
}

.wp-element-caption,
figcaption.wp-element-caption {
	color: var(--wp--preset--color--contrast-3);
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	text-align: center;
	margin-top: 0.7em;
}

/* le thème parent fait flotter certaines images héritées de l'ancien site */
.entry-content img.alignleft,
.entry-content img.alignright {
	float: none;
	display: block;
	margin-inline: auto;
}

/* ==========================================================================
   7. Citations et témoignages
   ========================================================================== */

.entry-content .wp-block-quote {
	background: none;
	border: 0;
	border-left: 2px solid var(--wp--preset--color--accent);
	border-radius: 0;
	padding: 0.35rem 0 0.35rem 1.6rem;
	margin-block: clamp(1.8rem, 4vw, 2.75rem);
	/* même mesure que les paragraphes : le cadre de la citation s'aligne sur
	   le bord du texte au lieu de déborder à gauche */
	box-sizing: border-box;
	max-width: var(--idetic-mesure);
	margin-inline: auto;
}

.entry-content .wp-block-quote p {
	max-width: none;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.1rem, 1.8vw, 1.3rem);
	font-style: italic;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
	margin-inline: 0;
}

.entry-content .wp-block-quote cite {
	display: block;
	margin-top: 0.9em;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.83rem;
	font-style: normal;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-3);
}

/* ==========================================================================
   8. Encart de tarif : un paragraphe centré tout en gras
   ========================================================================== */

.entry-content > p.has-text-align-center:has(> strong:only-child) {
	display: block;
	max-width: 30rem;
	margin: clamp(1.6rem, 4vw, 2.4rem) auto;
	padding: 0.9rem 1.4rem;
	border: 1px solid var(--idetic-liseré);
	border-radius: 2px;
	background-color: var(--wp--preset--color--base-2);
	font-size: 0.98rem;
	letter-spacing: 0.01em;
}

/* ==========================================================================
   9. Pied de page
   ========================================================================== */

footer.wp-block-template-part {
	margin-top: clamp(3.5rem, 8vw, 6rem);
	border-top: 1px solid var(--idetic-liseré);
	background-color: var(--wp--preset--color--base-2);
}

footer.wp-block-template-part p {
	color: var(--wp--preset--color--contrast-2);
}

footer.wp-block-template-part a {
	color: inherit;
	text-decoration-color: var(--wp--preset--color--accent);
	text-underline-offset: 0.2em;
}

footer.wp-block-template-part a:hover {
	color: var(--wp--preset--color--accent);
}

/* ==========================================================================
   10. Adaptation aux écrans
   ========================================================================== */

@media (max-width: 900px) {
	body .wp-block-gallery.has-nested-images:not(#idetic) {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 600px) {
	body {
		font-size: 1rem;
	}

	body .wp-block-gallery.has-nested-images:not(#idetic) {
		grid-template-columns: 1fr !important;
		gap: 0.6rem !important;
	}

	/* en une seule colonne, autant montrer l'image dans sa proportion réelle */
	body .wp-block-gallery.has-nested-images:not(#idetic) figure.wp-block-image img:not(#idetic) {
		aspect-ratio: 4 / 3 !important;
	}

	.entry-content p {
		max-width: none;
	}

	.entry-content .wp-block-quote {
		padding-left: 1.1rem;
	}
}

/* rien ne doit provoquer de défilement horizontal */
img,
figure,
iframe,
pre,
table {
	max-width: 100%;
}

/* les textes récupérés de l'ancien site citent des URL complètes en clair
   (Instagram, Facebook) : sans césure elles débordent de l'écran en mobile */
.entry-content,
.entry-content p,
.entry-content li,
.entry-content h2,
.entry-content h3 {
	overflow-wrap: break-word;
}

.entry-content a {
	overflow-wrap: anywhere;
}

.wp-block-table {
	overflow-x: auto;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-gallery.has-nested-images figure.wp-block-image img,
	.entry-content a {
		transition: none;
	}

	.wp-block-gallery.has-nested-images figure.wp-block-image:hover img {
		transform: none;
	}
}