/*
 * Typographie du thème enfant "Escalade Megève".
 *
 * Demande du 21/10/2026 : reprendre exactement la même typo que
 * escalade-geneve.com (police Century Gothic, mêmes poids/tailles/
 * espacements pour le menu et le pied de page), pour faciliter les mises
 * en page sur les deux sites. Les COULEURS NE CHANGENT PAS : on garde le
 * marron/saumon déjà choisi pour Megève (le bleu d'escalade-geneve.com
 * n'est jamais repris ici).
 *
 * Century Gothic n'est pas une police libre (pas sur Google Fonts) : elle
 * s'affiche seulement si elle est déjà installée sur l'ordinateur du
 * visiteur (c'est le cas sur la plupart des Mac/Windows), sinon le
 * navigateur utilise automatiquement CenturyGothic / AppleGothic, puis une
 * police sans-serif classique en dernier recours — exactement la même
 * logique de secours que sur escalade-geneve.com.
 *
 * Sélecteurs utilisés ci-dessous : ceux réellement présents dans le thème
 * parent (vérifiés dans son code), PAS ceux
 * d'escalade-geneve.com (#escalade-main-menu, .tagline, .site-title-
 * heading...), qui viennent d'un thème différent (Kathy) et n'existent
 * pas ici.
 */

body,
#header .logo,
#navbar,
#footer {
	font-family: 'Poppins', 'Century Gothic', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

/*
 * Demande du 21/10/2026 : "tout le site doit être en Century Gothic" —
 * cause trouvée : le thème parent force lui-même tous les titres (h1 à
 * h6) dans une police cursive décorative ("Codystar", voir son style.css),
 * ce qui gagnait sur l'héritage de Century Gothic ci-dessus (une règle
 * directement posée sur une balise bat toujours un héritage, quelle que
 * soit la spécificité de la règle héritée). C'est ce qui rendait, entre
 * autres, "Choisissez votre voie" visiblement différent du reste du texte
 * sur l'accueil. !important nécessaire pour neutraliser cette règle du
 * thème parent de façon fiable, y compris pour les titres à l'intérieur
 * du contenu d'un article ou d'une page.
 */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Poppins', 'Century Gothic', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
}

/* Menu principal (bandeau du haut, celui qui reste visible au défilement) :
   même poids, même taille et même espacement des lettres que sur
   escalade-geneve.com. */
#navbar .nav > li > a {
	font-weight: 300;
	font-size: 12px;
	letter-spacing: 2.2px;
	position: relative;
	display: inline-block;
	transition: opacity 0.3s ease, transform 0.3s ease;
}
#navbar .nav > li > a:hover {
	transform: translateY(-2px);
	opacity: 0.8;
}

/* Soulignement qui grandit depuis le centre au survol — même animation
   que escalade-geneve.com, mais en saumon (couleur déjà choisie pour
   Megève, à la place du bleu de l'autre site). */
#navbar .nav > li > a::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -2px;
	width: 0;
	height: 1px;
	background: #ef9d87;
	transform: translateX(-50%);
	transition: width 0.7s ease;
}
#navbar .nav > li > a:hover::after,
#navbar .nav > li.active > a::after,
#navbar .nav > li.current_page_item > a::after {
	width: 100%;
}

/* Pied de page (crédit photo en bas de chaque page) : même petite taille
   que le "copyright" de escalade-geneve.com. */
#footer,
#footer .container {
	font-size: 9px;
}

/*
 * Bandeau du haut sur les pages standard (toutes sauf l'accueil, qui a son
 * propre habillage dans front-page.php). Demande du 21/10/2026 : enlever
 * le grand bandeau bleu par défaut du thème parent (habillage Bootstrap
 * d'origine, jamais adapté à la charte marron/saumon) et le remplacer par
 * un petit logo + "Escalade Megève", avec les mêmes animations au survol
 * que sur les autres sites de l'utilisateur : le texte se souligne depuis
 * le centre vers les extrémités, le logo flotte légèrement en continu.
 *
 * Le thème parent n'offre pas de filtre pour changer le HTML du bandeau
 * (balise <a class="brand">...texte ou image...</a> générée en dur dans
 * inc/menu.php) : on change donc l'apparence en CSS plutôt que le gabarit,
 * ce qui marche quel que soit le réglage "logo" actuel du thème parent
 * (texte ou image) et reste sans danger si ce réglage change plus tard.
 * !important nécessaire ici : le bandeau bleu vient d'une des feuilles de
 * style "skin" du thème parent (assets/css/style*.css), choisie par une
 * option qu'on ne contrôle pas depuis ce fichier.
 */
#navbar .navbar-inner {
	background: #1c1210 !important;
	background-image: none !important;
	border: none !important;
	box-shadow: none !important;
}
#navbar .brand {
	display: flex !important;
	align-items: center !important;
	float: none !important;
	font-size: 0 !important; /* masque le texte d'origine du thème, quel qu'il soit */
	line-height: 1 !important;
	padding: 13px 20px !important;
	margin-left: 0 !important;
	text-shadow: none !important;
}
#navbar .brand::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-right: 10px;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef9d87' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19h18L14.5 6 10 13.5 7.5 10 3 19z'/%3E%3Ccircle cx='8.2' cy='5.4' r='1.6'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	animation: em-logo-float 6s ease-in-out infinite;
}
#navbar .brand::after {
	content: "Escalade Megève";
	font-size: 15px;
	font-weight: 300;
	letter-spacing: 1px;
	color: #fff !important;
	background-image: linear-gradient(#ef9d87, #ef9d87);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 0% 1px;
	padding-bottom: 4px;
	transition: background-size 0.5s ease;
}
#navbar .brand:hover::after,
#navbar .brand:focus::after {
	background-size: 100% 1px;
}
/* Flottement très léger, en continu — même principe que sur les autres
   sites de l'utilisateur (amplitude réduite ici, demandée explicitement
   "très léger"). */
@keyframes em-logo-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-3px); }
}

/*
 * Demande du 21/10/2026 : plus de carré jaune "UP" ni de bandeau gris de
 * pied de page sur les pages standard (ne correspondaient plus à la
 * charte marron/saumon). La page d'accueil n'est pas concernée : elle
 * cache déjà #footer/#btn_up elle-même dans son propre <style>.
 */
#btn_up {
	display: none !important;
}
#footer {
	background: transparent !important;
	color: #3a2620 !important;
}
#footer a {
	color: #e9785a !important;
}

/*
 * Couleur de fond uniforme (blanc cassé) sur toute la hauteur des pages
 * standard, y compris en dessous du contenu si la page est courte —
 * demande explicite du 21/10/2026. L'accueil garde son propre fond sombre
 * (déclaré directement dans front-page.php, chargé après ce fichier-ci
 * dans le flux HTML, donc prioritaire pour les pages où il s'applique).
 */
html,
body {
	background-color: #faf6f3 !important;
}

/*
 * Effet d'apparition en fondu + léger flottement (demande du 21/10/2026),
 * même principe que sur les autres sites (fondu + léger déplacement
 * vertical progressif, ni instantané ni trop lent). Les éléments restent
 * masqués par défaut puis sont révélés par reveal.js, en ajoutant
 * .is-visible, dès qu'ils entrent dans le cadre visible — fonctionne donc
 * aussi bien pour les briques visibles d'entrée que pour des photos plus
 * bas dans une page longue.
 */
.em-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.9s ease, transform 0.9s ease;
}
.em-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Lignes de titre de l'accueil ("École d'escalade Megève...", "Choisissez
   votre voie") : apparition distincte des briques — fondu seul, sans
   flottement, décalée très légèrement entre les deux lignes. */
.em-reveal-text {
	opacity: 0;
	transition: opacity 0.8s ease;
}
.em-reveal-text.is-visible {
	opacity: 1;
}

/* Demande du 21/10/2026 : la brique "marque" (logo + nom de l'école) doit
   descendre très légèrement en apparaissant, sens inverse des photos qui
   remontent — pour que les deux effets se rejoignent visuellement. Même
   durée/allure que .em-reveal, juste le sens du déplacement qui change. */
.em-reveal-down {
	opacity: 0;
	transform: translateY(-14px);
	transition: opacity 0.9s ease, transform 0.9s ease;
}
.em-reveal-down.is-visible {
	opacity: 1;
	transform: translateY(0);
}