/*
Theme Name: Kathy Child (Genève Photographie)
Theme URI: https://genevephotographie.ch
Description: Thème enfant du thème Kathy (UXBARN) — applique à genevephotographie.ch la même "signature" graphique que sur photographe-megeve.com (fondu d'entrée, renard flottant à côté du titre, soulignement du menu au survol, révélation des photos en fondu+flou au défilement), avec sa propre couleur : l'orange déjà présent sur le site (le slogan/tagline sous le titre, et le menu "Accueil"), repris exactement, jamais une couleur inventée. Typographie inchangée (Century Gothic, réglages du thème parent).
Author: seba
Template: kathy
Version: 2.5.0
Text Domain: kathy-child
*/

/* ==========================================================================
   0. Couleur "signature" du site — l'orange déjà utilisé sur
   genevephotographie.ch (slogan sous le titre + lien "Accueil" du menu),
   prélevé au pixel près sur le site lui-même (#C3683E), jamais deviné ni
   réutilisé du rouge/bordeaux de photographe-megeve.com : chaque site de
   la maison garde sa propre couleur, seule la "signature" (fondu d'entrée,
   renard, soulignement, révélation des photos) est commune aux 4 sites.
   ========================================================================== */

:root {
	--kathy-accent-color: #C3683E;
}

/* ==========================================================================
   1. Fondu d'entrée — même principe que sur photographe-megeve.com : le
   contenu (#main-container) apparaît en fondu + léger glissement vers le
   haut, pendant que le bandeau latéral (#side-container : titre, tagline,
   menu) se repositionne lentement (transform uniquement — on ne touche
   PAS à son opacité, déjà gérée par le JS du thème parent qui l'affiche
   dès que sa taille/position est calculée, voir js/kathy.js
   setSideContainer()).
   ========================================================================== */

#main-container {
	opacity: 0;
	transform: translateY(12px);
}
body.kathy-loaded #main-container {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 1s ease, transform 1s ease;
}

#side-container {
	transform: translateY(10px);
}
body.kathy-loaded #side-container {
	transform: translateY(0);
	transition: transform 3.5s ease;
}

/* Si JavaScript est désactivé, on ne bloque jamais l'affichage du site. */
.no-js #main-container,
.no-js #side-container {
	opacity: 1 !important;
	transform: none !important;
}

/* ==========================================================================
   2. Menu — soulignement qui grandit depuis le centre au survol, dans la
   couleur orange du site, + le lien qui se soulève légèrement. Le thème
   parent n'a aucun effet de ce type nativement (vérifié : seul un simple
   changement de couleur au survol existe) — signature construite depuis
   zéro ici, avec la même mécanique que sur photographe-megeve.com. Même
   traitement pour le menu latéral (.site-menu) ET les liens de widgets du
   bas de page (.theme-widget-area).
   ========================================================================== */

.site-menu .menu-style > li > a,
.theme-widget-area .widget a {
	position: relative;
	display: inline-block;
	transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
}

/* Éléments du menu latéral moins serrés entre eux (le thème parent les
   colle directement les uns sous les autres). */
.site-menu .menu-style > li {
	margin-bottom: 6px;
}

.site-menu .menu-style > li > a:hover,
.theme-widget-area .widget a:hover {
	color: var(--kathy-accent-color) !important;
	transform: translateY(-2px);
}

.site-menu .menu-style > li > a::after,
.theme-widget-area .widget a::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -4px;
	width: 0;
	height: 1px;
	background: var(--kathy-accent-color);
	transform: translateX(-50%);
	transition: width 0.7s ease;
}

.site-menu .menu-style > li > a:hover::after,
.theme-widget-area .widget a:hover::after {
	width: 100%;
}

/* Le lien "Accueil" est déjà en orange en dur dans le thème parent lorsque
   c'est la page courante (classe .current-menu-item) — on garde cette
   couleur cohérente avec notre variable, au cas où elle diffèrerait. */
.site-menu .menu-style > li.current-menu-item > a,
.site-menu .menu-style > li.current_page_item > a {
	color: var(--kathy-accent-color);
}

/* ==========================================================================
   3. Logo mascotte (le renard) — à côté du titre du site, dans le bandeau
   latéral. Flottement vertical continu, comme sur photographe-megeve.com.
   ========================================================================== */

.site-logo-fox {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	vertical-align: middle;
	margin-right: 8px;
	width: 20px;
	height: 20px;
	animation: kathy-logo-float 6s ease-in-out infinite;
	will-change: transform;
}

/* Amplitude décalée vers le bas : le renard part du niveau de "Genève"
   (1re ligne du titre) et descend jusqu'au niveau de "Photographie"
   (2e ligne), au lieu d'osciller centré sur la seule 1re ligne. */
@keyframes kathy-logo-float {
	0%, 100% {
		transform: translateY(2px);
	}
	50% {
		transform: translateY(16px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-logo-fox {
		animation: none;
	}
}

/* Le renard est placé DANS le même lien que le titre (voir header.php),
   ce qui grignotait de la largeur au texte et le faisait retomber sur une
   ligne de plus (le titre lui-même se cassait en 2, poussant le numéro de
   téléphone qui le suit sur une 3e ligne). On fixe la largeur du renard
   ("flex: 0 0 auto") et on laisse le texte du titre prendre tout le reste
   de la largeur disponible ("flex: 1 1 auto" + "min-width: 0", sinon un
   texte flex ne se réduit/ne s'enroule jamais correctement) : le titre
   retrouve exactement le même espace qu'avant l'ajout du renard, et ne
   revient à la ligne qu'à l'endroit où il le faisait déjà (le numéro de
   téléphone reste sur sa propre ligne, juste sous le titre). */
.logo-wrapper a {
	display: flex;
	align-items: flex-start;
}
.site-logo-fox {
	flex: 0 0 auto;
	margin-top: 2px;
}
.logo-wrapper a .site-title,
.logo-wrapper a .logo-image {
	flex: 1 1 auto;
	min-width: 0;
}

/* Le numéro de téléphone (voir header.php : coupé du reste du titre juste
   avant le "+") passe toujours à la ligne, quelle que soit la largeur
   disponible — plus de retour à la ligne "au hasard" au milieu du numéro.
   Réduit un peu en taille par rapport au reste du titre, pour rester bien
   dans la largeur du bandeau latéral. */
.site-title-name {
	display: block;
	/* Espacement des lettres augmenté (0.5px d'origine → 2px) : c'est à peu
	   près le maximum tenable sur la largeur étroite du bandeau latéral
	   sans faire déborder "GENEVE" ou "PHOTOGRAPHIE" hors du cadre — au-delà,
	   les mots (qui ne peuvent pas se couper au milieu) commencent à dépasser.
	   "overflow-wrap" en filet de sécurité : si jamais ça devient trop juste
	   (fenêtre plus étroite, changement de nom de site, etc.), le mot se
	   coupe proprement plutôt que de déborder par-dessus le contenu. */
	letter-spacing: 2px;
	overflow-wrap: break-word;
}
.site-title-phone {
	display: block;
	font-size: 0.72em;
	margin-top: 4px;
	/* Le "text-justify: inter-character" essayé juste avant partait trop
	   large (rendu très inégal selon navigateur) — retour à une valeur fixe,
	   entre les 2.5px (trop court) et 4px (déborde) essayés précédemment. */
	letter-spacing: 3.2px;
}

/* ==========================================================================
   4. Titres de page — couleur orange du site (voir section 0), reprise
   des mêmes sélecteurs que le réglage Personnaliser > Couleurs > Contenu
   du thème parent (includes/customizer/section-colors-content.php), pour
   être certain de cibler exactement les mêmes éléments. On exclut
   explicitement .site-title-heading (le "GENEVE PHOTOGRAPHIE" du bandeau
   latéral, qui reste dans sa couleur d'origine — seuls les TITRES DE PAGE
   passent à l'orange, comme demandé). Spécificité renforcée
   (html body + sélecteur répété) pour prendre le dessus sur ce même
   réglage du Customizer, qui peut sortir en CSS dynamique après cette
   feuille de style.

   On affine aussi légèrement leur graisse (Century Gothic reste la police,
   comme demandé — on ne touche qu'au poids, pas à la taille, déjà bonne) :
   700 (gras) par défaut dans le thème parent → 400 (normal), la seule
   graisse réellement distincte que rendent les polices système comme
   Century Gothic (leçon du thème Jeanne : demander un poids intermédiaire,
   ex. 300, ne change rien de visible sur une police système à 2 graisses
   seulement — 400 est donc le choix le plus fin qui produise un vrai
   changement visuel ici).
   ========================================================================== */

html body h1:not(.site-title-heading),
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .post-title,
html body .post-item .post-title a,
html body .section-title,
html body .section-title a,
html body .portfolio-title {
	color: var(--kathy-accent-color) !important;
	font-weight: 400 !important;
}

/* ==========================================================================
   4bis. Descriptif orange (le "tagline" du site, sous le bloc titre/menu) —
   un peu plus bas, un peu plus petit, et affiné (Jost en poids fin, voir
   functions.php : Century Gothic reste la police du reste du site — comme
   pour le titre de Jeanne, c'est la seule façon d'obtenir une vraie
   finesse visible, la graisse seule ne change rien sur une police système).
   ========================================================================== */

.tagline {
	display: block;
	margin-top: 14px;
	text-align: center;
	font-family: 'Jost', 'centurygothic', 'Century Gothic', Arial, sans-serif;
	font-weight: 300;
}

/* Chaque descriptif ("Cours de photographie à l'année", "Photo-reportage
   sur mesure", etc. — voir header.php : découpés aux "·" du slogan) sur sa
   propre ligne, centrée, plutôt qu'un seul paragraphe qui s'enroule "au
   hasard". Les points ne sont plus affichés : chaque ligne étant déjà
   isolée visuellement, ils n'étaient plus nécessaires — et ça libère un
   peu de largeur pour l'espacement des lettres ci-dessous.
   Taille réduite (11px → 9px) pour que même la ligne la plus longue
   ("Masterclass Genève et international") tienne sur une seule ligne avec
   cet espacement ; à ajuster encore si une ligne repasse quand même à la
   ligne chez toi (largeur exacte du bandeau non vérifiable d'ici). */
.tagline-line {
	display: block;
	font-size: 9px;
	letter-spacing: 1px;
	margin-top: 6px;
}
.tagline-line:first-child {
	margin-top: 0;
}

/* ==========================================================================
   5. Révélation des photos — même principe que sur photographe-megeve.com :
   l'état de départ (flou + léger glissement + opacité 0) est posé
   directement en CSS sur les images elles-mêmes dès le premier affichage
   de la page (pas de flash d'image nette), le JS n'a qu'à ajouter
   ".kathy-revealed" une fois l'image chargée et visible à l'écran.
   ========================================================================== */

#content-container img:not(.site-logo-fox):not(.logo-image),
#side-container img:not(.site-logo-fox):not(.logo-image),
.portfolio-item img, .portfolio-format-item img, .image-wrapper img,
.wp-post-image, article img,
#root-container img:not(.site-logo-fox):not(.logo-image):not([class*="slicknav"]) {
	opacity: 0;
	transform: translateY(14px) scale(0.97);
	filter: blur(10px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
	            filter 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform, filter;
}

.kathy-revealed {
	opacity: 1 !important;
	transform: translateY(0) scale(1) !important;
	filter: blur(0) !important;
}

.no-js img {
	opacity: 1 !important;
	transform: none !important;
	filter: none !important;
	transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
	#content-container img, #side-container img, .portfolio-item img,
	.portfolio-format-item img, .image-wrapper img, .wp-post-image,
	article img, #root-container img {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}
}

/* Le thème Kathy a SA PROPRE animation d'entrée pour les grilles de
   portfolio (js/kathy.js, fonction displayPortfolioItems()) : il cache
   ".portfolio-item"/".image-wrapper" (opacity:0 + visibility:hidden en
   CSS parent, jusqu'à ce que le JS les révèle) derrière un "rideau" de
   chargement (".portfolio-loading"/".portfolio-loading-wrapper"). Avec
   nos propres photos qui gèrent déjà leur apparition (section 5
   ci-dessus), ce rideau donnait un effet en trop, non désiré — on le
   supprime, et on force les conteneurs à rester visibles pour laisser
   nos images gérer seules leur révélation.
   ========================================================================== */

.portfolio-item,
.portfolio-format-item,
.image-wrapper {
	opacity: 1 !important;
	visibility: visible !important;
}

.portfolio-loading,
.portfolio-loading-wrapper {
	display: none !important;
}

/* ==========================================================================
   6. "© 2026" et le crédit ("CREDIT PHOTOS TG 0.95 • DESIGNED BY ADSTUDIO")
   — les 2 blocs du réglage Personnaliser > Identité du site > Texte de
   copyright sont désormais assemblés sur une seule ligne directement en
   PHP (voir header.php), plus fiable qu'un réglage CSS qui doit deviner
   quelle balise (<p> ou <br>) sépare les 2 blocs. On s'assure juste ici
   que ce texte reste bien sur une seule ligne visuellement (pas de retour
   à la ligne forcé par un élément resté en display:block).
   ========================================================================== */

.copyright,
.copyright p {
	display: inline;
}

/* Taille réduite (hérite de 11px par défaut), sans l'espacement des
   lettres hérité de .copyright-social-wrapper (1px) : le texte entier
   ("© 2026 CREDIT PHOTOS TG 0.95 • DESIGNED BY ADSTUDIO.") est assez long
   pour que ce soit nécessaire afin qu'il tienne sur une seule ligne dans
   la largeur du bandeau latéral. */
.copyright {
	font-size: 8px;
	letter-spacing: 0;
}

/* ==========================================================================
   Ajoute ici tes autres ajustements de style (child theme = zone de travail
   sûre, jamais écrasée par une mise à jour du thème parent Kathy).
   ========================================================================== */