/*
Theme Name: Alvar Child
Theme URI: https://tavaresgomes.com
Description: Thème enfant du thème Alvar (UXBARN) — même signature graphique que les autres sites de la maison (kathy-child, jeanne-child) : menu avec flottement + soulignement au survol, apparition du logo en fondu/flou/grossissant, révélation des photos en fondu+flou sur toutes les pages (accueil compris), typo unifiée (Century Gothic) pour ne plus jamais avoir de "saut" de police à l'affichage, drapeaux de langue réduits. Le CSS additionnel du Customizer (couleurs #912424, boutons, etc.) reste actif et intouché : on ne touche ici QUE la typo et les effets.
Author: seba
Template: alvar
Version: 1.6.5
Text Domain: alvar-child
*/

/* ==========================================================================
   0. Police — v1.6.0, la police est maintenant auto-hébergée PAR LE THÈME,
   plus par le plugin "Use Any Font" :

   Historique : v1.2.0 remplaçait Arimo (police d'origine) par Century
   Gothic/Arial PARTOUT, y compris le menu → rendu trop épais. v1.3.0 est
   reparti dans l'autre sens et a tout remis en Arimo, y compris les
   titres → régression ("les titres n'ont pas changé"). v1.4.0/1.5.0
   ciblaient la bonne police ("century_gothic", générée par le plugin
   "Use Any Font") avec le bon nom — mais le fichier lui-même
   (170903070935Century_Gothic.woff2) répondait en 404 sur le serveur
   (confirmé par le client via la console du navigateur) : la police
   n'avait donc jamais pu se charger, quel que soit le CSS, d'où
   l'absence totale de changement malgré 2 correctifs.

   FIX v1.6.0 : le client ne peut pas réparer ça depuis "Use Any Font"
   (le plugin refuse le re-téléversement : "This key does not exist in
   our records", clé de licence invalide/expirée côté plugin). Plutôt que
   de dépendre de ce plugin, la police (même fichier réel, fourni par le
   client — la même Century Gothic utilisée sur tous les sites de la
   maison) est maintenant embarquée directement dans le thème enfant
   (dossier "fonts/"), avec sa propre déclaration @font-face ci-dessous.
   Fini la dépendance au plugin : ce fichier est servi par le thème,
   toujours disponible, jamais un 404 imprévu.
   ========================================================================== */

@font-face {
	/* v1.6.3 : le fichier "century-gothic.woff" que je générais en v1.6.1/
	   1.6.2 (conversion du .ttf, même après avoir retiré la table DSIG)
	   restait suspect (le "O" ne s'affichait toujours pas comme un cercle
	   parfait, signe qu'une autre police locale prenait le relais). Demande
	   explicite du client : ne plus "générer" de fichier dérivé — utiliser
	   le fichier réel tel qu'il l'a envoyé, sans AUCUNE transformation.
	   "fonts/century-gothic.ttf" est maintenant une copie IDENTIQUE
	   (vérifié octet pour octet, même empreinte MD5) du fichier fourni :
	   plus de conversion .woff du tout, une seule source, le fichier
	   d'origine. */
	font-family: 'AlvarChildCenturyGothic';
	src: url('fonts/century-gothic.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

html body .post-title {
	font-family: 'AlvarChildCenturyGothic', 'century_gothic', 'Century Gothic', Arial, sans-serif !important;
	/* v1.6.1 : le thème applique 700 (gras) par défaut sur les h1/.post-title,
	   mais le fichier fourni par le client n'a que la graisse Regular (400) —
	   sans ça, le navigateur "invente" un faux gras en épaississant
	   artificiellement les lettres (confirmé dans l'inspecteur : panneau
	   "Police" affichait "Épaisseur : 700" avec une icône d'avertissement),
	   ce qui donne un rendu déformé, pas la vraie Century Gothic. On force
	   donc le poids normal pour utiliser la vraie graisse disponible. */
	font-weight: normal !important;
}

/* ==========================================================================
   0bis. Anti-"saut de police" au chargement — nouvelle méthode v1.4.0.

   v1.3.0 pensait avoir réglé le "saut" en supprimant la contradiction sur
   ".post-title" (CSS additionnel du Customizer vs typographie du thème).
   Le client confirme que le saut est TOUJOURS là après avoir vidé le
   cache : cette contradiction n'était donc pas la seule cause — la cause
   principale est plus simple, c'est le mécanisme même de "font-display:
   swap" utilisé par les polices Google du thème (Arimo) ET par la police
   Century Gothic ci-dessus (chargée par le plugin "Use Any Font") :  le
   navigateur affiche TOUJOURS un texte avec une police de secours en
   premier, PUIS bascule sur la vraie police dès qu'elle finit de se
   télécharger, provoquant un "saut" visible à chaque fois qu'une police
   n'est pas encore en cache navigateur (donc systématiquement après avoir
   vidé le cache, comme observé).

   FIX : on ne peut pas empêcher ce téléchargement, mais on peut empêcher
   le VISITEUR DE LE VOIR, en gardant le contenu textuel invisible
   (opacité 0, déjà l'état de départ posé par le fondu d'entrée général,
   voir plus bas "#main-container") jusqu'à ce que les polices soient
   confirmées prêtes par le navigateur lui-même (API "document.fonts
   .ready", voir js/alvar-child.js) — le texte n'apparaît alors QU'UNE
   FOIS dans sa police finale, jamais dans la police de secours : plus
   aucun saut visible possible, quel que soit l'état du cache. Un filet de
   sécurité (voir le JS) évite aussi d'attendre indéfiniment si cette API
   est indisponible ou bloquée.
   ========================================================================== */

/* ==========================================================================
   1. Menu — UNIQUEMENT le style de flottement + soulignement au survol,
   repris à l'identique des autres sites de la maison. La typo (taille,
   graisse, majuscules, couleur) n'est PAS touchée : elle reste celle déjà
   réglée sur le site (voir style.css du thème parent + CSS additionnel).
   Couleur du soulignement = le rouge déjà utilisé partout sur ce site
   (boutons, bordures des photos — voir CSS additionnel, #912424), jamais
   une couleur inventée.
   ========================================================================== */

html body .site-menu .menu-style > li > a {
	/* CORRIGÉ v1.3.0 : ne force plus "Arimo" ici non plus, même si Arimo
	   est la bonne police — forcer une valeur en dur risque de ne pas
	   reproduire exactement le poids/l'espacement que le Customizer
	   applique réellement (voir section 0, même erreur identifiée et
	   corrigée sur le child theme de Megève Snowboard School). Comme la
	   police du site n'est plus remplacée nulle part (section 0 ne touche
	   plus le menu), le menu hérite naturellement de la police et du poids
	   d'origine réglés par le thème — plus fiable qu'une valeur recopiée
	   à la main. */
	position: relative;
	display: inline-block;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.site-menu .menu-style > li > a:hover {
	transform: translateY(-2px);
	opacity: 0.75;
}

.site-menu .menu-style > li > a::after {
	content: '';
	position: absolute;
	left: 50%;
	/* Remonté une 2e fois (était -6px, puis -3px, toujours signalé "trop
	   bas") : encore plus proche du texte maintenant. */
	bottom: -1px;
	width: 0;
	height: 1px;
	background: #912424;
	transform: translateX(-50%);
	transition: width 0.7s ease;
}

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

/* ==========================================================================
   2. Logo — apparition lente et progressive au chargement : fondu + flou
   + léger grossissement (part un peu plus petit que sa taille finale et
   grandit doucement en même temps qu'il devient net), demandée
   explicitement, + taille finale très légèrement réduite (scale 0.94 au
   lieu de 1 — le thème parent gère déjà la largeur du logo en JS via un
   "max-width" en pixels recalculé selon la colonne de gauche ; passer par
   un léger "scale" CSS réduit la taille affichée SANS perturber ce calcul
   de mise en page). Le logo reste fixe une fois affiché (pas de
   flottement continu).

   POURQUOI L'EFFET NE JOUAIT TOUJOURS PAS EN v1.3.0 (trouvé, corrigé
   v1.4.0) : le VRAI problème n'était pas le "visibility" du thème parent
   (déjà neutralisé en v1.3.0, ce fix reste utile et est conservé), mais
   sa STRUCTURE : son script (setLogoTaglinePosition(), dans alvar.js)
   DÉPLACE le ".logo-wrapper" hors de ".logo-tagline-wrapper" — sur cette
   mise en page (classe "logo-above-menu", confirmée dans header.php), il
   le fait passer en premier enfant de ".site-menu" à la place (voir
   alvar.js : "$('.site-menu').prepend($logoWrapper)"). Nos règles
   v1.2.0/v1.3.0 ciblaient ".logo-tagline-wrapper .logo-wrapper" : dès
   que ce déplacement a lieu, ce sélecteur ne correspond PLUS du tout à
   l'élément (il n'est plus dans ce parent) — ses styles retombent
   instantanément à leurs valeurs par défaut (opacité 1, sans transition),
   AVANT même que notre JS ait eu la moindre chance de jouer l'effet :
   d'où "aucun effet", à chaque fois, quelle que soit la méthode de
   déclenchement essayée.

   FIX v1.4.0 : on cible directement la classe ".logo-wrapper" elle-même,
   SANS exiger un parent précis — elle reste "logo-wrapper" où qu'elle se
   trouve dans le DOM, déplacée ou non, donc nos styles s'appliquent en
   continu, avant et après ce déplacement. */

html body .logo-tagline-wrapper {
	visibility: visible !important;
}

/* Sens re-inversé (v1.6.3, retour au sens d'origine sur demande explicite
   du client : "je préfère partir de loin vers l'avant") : le logo part à
   nouveau PLUS PETIT (comme s'il était loin) et GRANDIT vers sa taille
   finale (scale 0.94) en devenant net et opaque — v1.5.0 avait inversé ce
   sens (part grand, rétrécit), mais ce n'était pas le rendu souhaité au
   final. */
html body .logo-wrapper {
	opacity: 0;
	transform: scale(0.78);
	filter: blur(10px);
}

body.alvar-logo-ready .logo-wrapper {
	opacity: 1;
	transform: scale(0.94);
	filter: blur(0);
	transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 1.6s cubic-bezier(0.16, 1, 0.3, 1),
	            filter 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.no-js .logo-wrapper {
	opacity: 1 !important;
	transform: none !important;
	filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.logo-wrapper {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}
}

/* Fondu d'entrée général du reste de la page (contenu), même principe que
   sur les autres sites de la maison — léger glissement + fondu. */
#main-container {
	opacity: 0;
	transform: translateY(12px);
}
body.alvar-loaded #main-container {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 1s ease, transform 1s ease;
}

.no-js #main-container {
	opacity: 1 !important;
	transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
	#main-container {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ==========================================================================
   3. Révélation des photos — TOUTES les photos du site (les 4 photos
   d'accueil comprises, ainsi que les pages internes), en fondu + flou
   progressif. Même principe déjà éprouvé sur les autres sites : l'état de
   départ est posé directement ici en CSS (jamais par le JS après coup,
   pour ne jamais laisser une image nette "clignoter" avant l'effet) ; le
   JS (js/alvar-child.js) n'a plus qu'à ajouter ".alvar-revealed" au bon
   moment. Le logo et les drapeaux de langue sont exclus (ils gèrent leur
   propre apparition, voir sections 2 et 4).
   ========================================================================== */

#content-container img:not(.logo-image):not(.iso-3166-1),
#root-container img:not(.logo-image):not(.iso-3166-1),
.portfolio-item img, .image-wrapper img,
.wp-post-image, article img {
	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;
}

.alvar-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, #root-container img, .portfolio-item img,
	.image-wrapper img, .wp-post-image, article img {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}
}

/* ==========================================================================
   4. Drapeaux (sélecteur du switcher de langue) — pas encore réduits
   malgré la v1.1.0 : mes sélecteurs (classes WPML classiques) ne
   correspondent visiblement pas à ce que ce switcher génère réellement
   ici. Élargi avec davantage de variantes possibles (WPML récent,
   dropdown, dimensions posées en style inline par le plugin — d'où le
   "width/height" en plus du sélecteur d'image, pour aussi couvrir le cas
   où ce serait un lien/bouton redimensionné plutôt qu'une image).

   Si ça ne suffit toujours pas après ce zip : peux-tu m'envoyer une
   capture de l'inspecteur (clic droit sur le drapeau > Inspecter) ? Avec
   la classe exacte affichée là, je vise juste et je n'ai plus à deviner.
   ========================================================================== */

img.iso-3166-1,
.wpml-ls-legacy-list-horizontal img,
.wpml-ls-legacy-list-vertical img,
.wpml-ls-legacy-dropdown img,
.wpml-ls-slot-shortcode img,
a.wpml-ls-link img,
.wpml-ls-item img,
#mobile-menu img.iso-3166-1,
.site-menu img.iso-3166-1 {
	/* Entre la taille normale du thème et le 12px trop réduit d'avant
	   (demande explicite : "entre les deux, ce sera parfait"). */
	width: 15px !important;
	height: auto !important;
}

/* ==========================================================================
   5. "ISKI MEGÈVE" (tampon au-dessus des 4 photos d'accueil) — IDENTIFIÉ
   avec certitude via le code source réel de la page envoyé par le client :
   ce n'est PAS un ".vc_custom_heading" WPBakery comme supposé jusqu'ici,
   mais <h1 class="post-title">iSki Megève</h1>, à l'intérieur de
   <div class="top-section post-item post-content-container ...">, juste
   au-dessus de la grille photo (".portfolio-listing-wrapper"). Le
   sélecteur ci-dessous corrigeait donc la mauvaise cible depuis le début
   — jamais appliqué jusqu'ici.

   Portée choisie : ".archive .top-section .post-title, .all-works
   .top-section .post-title" — EXACTEMENT le même couple de sélecteurs que
   le thème parent utilise lui-même pour cibler ce tampon précis (voir
   includes/customizer/section-portfolio-styles.php), donc on touche
   uniquement ce tampon-listing (accueil compris), jamais les autres
   ".post-title" du site (titres de page/article classiques, gérés par la
   règle générale de la section 0bis plus haut).

   Le CSS additionnel du Customizer contient une règle
   ".post-title { display: none; }" plus bas dans sa cascade — sans
   rapport avec CE ".post-title"-ci en pratique (elle vise le titre
   d'article générique, pas le tampon de la grille), mais on neutralise
   quand même "display" ici par sécurité pour être certain que le tampon
   reste visible, en plus de la couleur + Century Gothic demandés. */
html body .archive .top-section .post-title,
html body .all-works .top-section .post-title {
	display: block !important;
	color: #912424 !important;
	font-family: 'AlvarChildCenturyGothic', 'century_gothic', 'Century Gothic', Arial, sans-serif !important;
	font-weight: normal !important; /* v1.6.1, voir note section 0 : évite le faux gras */
}

/* ==========================================================================
   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 Alvar).
   ========================================================================== */