/*
Theme Name: adstudio-child
Description: child theme AdStudio — Megève Snowboard School
Author: AdStudio
Author URI: https://www.adstudio.fr
Template: kathy
Version: 1.7.25
*/
/* ==========================================================================
0. Couleur & typographie — signature de la maison, appliquée à ce
nouveau site. Couleur reprise directement des réglages déjà en place sur
le site (Customizer > CSS additionnel : #912424, utilisée pour la
tagline "NEW SCHOOL MEGEVE · Winter 2027") pour rester cohérent avec ce
qui existe déjà, jamais une couleur devinée.
Police : "Century Gothic" reste en premier dans la pile (s'affiche
directement si déjà installée sur l'ordinateur du visiteur), "Jost"
(chargée en Google Font, voir functions.php) prend le relais partout
ailleurs — même esprit géométrique et rond, mais avec de VRAIES graisses
fines (100 à 700), fiable sur tous les systèmes. On garde la mise en
forme déjà en place (tailles, majuscules, espacement des lettres) : on
ne fait que sécuriser le RENDU de la police elle-même.
========================================================================== */
:root {
/* Corrigé : #912424 venait du CSS additionnel déjà en place sur CE site
(tagline), mais ce n'est PAS la même couleur que la maison utilise
réellement sur photographe-megeve.com — vérifié directement dans
l'inspecteur (propriété "color" calculée sur le menu, survol/page
active) : rgb(163, 57, 70) = #a33946, une couleur différente
(#912424 = rgb(145,36,36), plus sombre/brune). On aligne ici sur la
vraie valeur de la maison pour que ce soit VRAIMENT la même couleur
partout (menu, titres) — pas seulement une couleur proche. */
--snow-accent: #a33946;
/* Valeurs exactes données par l'utilisateur (2 gris DIFFÉRENTS, pas le
même partout) : gris du menu #e8e8e8 (très clair), gris du texte
courant #aaaaaa (plus soutenu). */
--snow-menu-grey: #bcbcbc;
/* EXACTEMENT la même pile que sur photographe-megeve.com (jeanne-child,
règle "body, h1-h6" ligne ~416) : Century Gothic (police système) en
premier, PUIS directement Arial/sans-serif — jamais Jost en secours
ici. Jost est réservé aux titres (site-title-line, h1-h6 de contenu),
jamais au corps du texte ni au menu : c'était la seule différence
restante, elle changeait visiblement la forme des lettres du menu dès
que Century Gothic n'est pas installé sur l'ordinateur du visiteur. */
--snow-font: 'centurygothic', 'Century Gothic', Arial, sans-serif;
/* Même gris de référence que sur photographe-megeve.com (un seul gris
pour TOUT le texte courant du site), pour garantir une présentation
générale identique. */
/* Retour à la vraie valeur de photographe-megeve.com (jeanne-child,
--jeanne-grey-text) : #aaaaaa (donné précédemment pour le texte
courant) est en réalité trop clair, signalé par l'utilisateur après
comparaison directe des 2 sites. rgba(0,0,0,0.55) ≈ #737373, un gris
nettement plus soutenu/lisible. */
--snow-grey-text: rgba(0, 0, 0, 0.55);
}
body,
input,
textarea,
select,
button {
font-family: var(--snow-font);
}
/* ==========================================================================
1. Fondu d'entrée général — logo, titre et mascotte apparaissent en
douceur au chargement (jamais de saut/sursaut), même principe que sur
les autres sites de la maison. Déclenché par "body.snow-loaded" (voir
js/snowboard-child.js).
========================================================================== */
html body .logo-tagline-wrapper .logo-wrapper {
opacity: 0;
transform: translateY(8px);
}
body.snow-loaded .logo-tagline-wrapper .logo-wrapper {
opacity: 1;
transform: translateY(0);
transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.no-js .logo-tagline-wrapper .logo-wrapper {
opacity: 1 !important;
transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
.logo-tagline-wrapper .logo-wrapper {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* v1.7.22 — même flottement (bas vers haut) + fondu ajouté à
iskimegeve.com (menu + copyright), demandé ici aussi, à l'identique,
sur le menu (".site-menu") et le copyright (".copyright-social-wrapper").
Le bloc photo (section 5 plus bas) n'est PAS concerné : il garde
uniquement son propre fondu + flou + zoom, sans changement.
ATTENTION ".copyright-social-wrapper" : le thème parent (kathy.js,
setCopyrightSocialIconsLocation(), déclenchée au chargement ET au
redimensionnement) pose lui-même un style INLINE
"style='opacity: 1;'" sur cet élément en version mobile/étroite
(< 1150px) — exactement le même piège déjà rencontré sur
iskimegeve.com (".site-menu" là-bas) : un style inline sans
"!important" bat toujours une règle de feuille de style externe sans
"!important". D'où le "!important" ci-dessous, sur les deux
éléments, pour ne pas dépendre de la largeur d'écran. */
html body .site-menu,
html body .copyright-social-wrapper {
opacity: 0 !important;
transform: translateY(18px);
transition: opacity 0.9s ease, transform 0.9s ease;
}
html body.snow-loaded .site-menu,
body.snow-loaded html body .site-menu,
html body.snow-loaded .copyright-social-wrapper,
body.snow-loaded html body .copyright-social-wrapper {
opacity: 1 !important;
transform: translateY(0);
}
.no-js .site-menu,
.no-js .copyright-social-wrapper {
opacity: 1 !important;
transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
html body .site-menu,
html body .copyright-social-wrapper {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* ==========================================================================
2/3. Titre + mascotte — repris à l'identique de photographe-megeve.com :
titre sur 2 lignes FORCÉES (ici "Snowboarding Mont d'Arbois Megève" /
"Megeve Snowboard School 2027", coupé en PHP — voir header.php — à la
2e occurrence de "Meg[è]ve" dans le titre du site, jamais un
qui
ajouterait sa propre hauteur de ligne), fines lettres espacées, PAS de
flottement sur le titre lui-même. La mascotte (le snowboarder) est
placée à GAUCHE du titre, beaucoup plus petite qu'avant, et flotte
verticalement entre les deux lignes — exactement le traitement du
renard sur les sites photo, avec le snowboarder à la place.
========================================================================== */
.site-title-heading,
.logo-tagline-wrapper .site-title {
font-weight: 400;
letter-spacing: 1.5px;
display: block;
text-align: left;
}
.logo-tagline-wrapper {
text-align: left;
}
/* Alignement demandé : le bloc titre+menu (colonne de gauche,
#side-container, centré verticalement dans la fenêtre) et le bloc des
4 photos (colonne de droite) n'étaient pas tout à fait au même niveau.
On remonte légèrement toute la colonne de gauche (le thème parent place
"margin-top: -5%" par défaut sur #side-container) pour les rapprocher.
v1.7.22 — BUG MOBILE CORRIGÉ : cette règle n'avait pas de media query,
elle s'appliquait donc aussi en mobile — alors que le thème parent
n'utilise ce "margin-top" négatif QUE dans sa mise en page bureau
(colonne de gauche en "position: fixed", centrée verticalement ; le
parent repasse en mise en page normale, "position: relative", sous
1150px — voir son style.css). Sur mobile, notre "-7.5%" continuait
donc de remonter tout le bloc titre, qui se retrouvait caché à moitié
sous la barre d'adresse du navigateur ("le premier mot est coupé à la
moitié"). On limite maintenant cette remontée à la mise en page
bureau (> 1150px, même seuil que le thème parent), et on redescend
légèrement le titre en mobile pour qu'il ne touche plus le haut de
l'écran. */
@media only screen and (min-width: 1151px) {
html body #side-container {
margin-top: -7.5%;
}
}
@media only screen and (max-width: 1150px) {
html body #side-container {
margin-top: 18px;
}
}
.logo-wrapper,
.logo-wrapper a {
display: inline-flex;
align-items: center;
justify-content: flex-start;
}
/* Spécificité renforcée ("html body .site-title-line.site-title-line") :
le Customizer (Kirki, Typography > Logo & Menu Area > "Site Title Font
Size", 18px par défaut) injecte sa propre valeur en CSS dynamique,
parfois en !important — sur l'élément ANCESTOR ".site-title", pas sur
".site-title-line" lui-même, mais on verrouille quand même ici pour
qu'aucune valeur héritée ne puisse jamais l'emporter.
28px = exactement la taille de "Photographe Megève" (valeur par défaut
du thème PARENT de Jeanne, jamais réécrite par jeanne-child — voir
photographe-megeve.com). Le rendu "trop petit" signalé jusqu'ici venait
en réalité du titre qui ne se coupait jamais en 2 lignes (voir
header.php) : tout le texte partait dans un seul bloc qui retombait à
la ligne n'importe où selon la largeur — jamais un vrai problème de
taille. Une fois le titre correctement coupé en 2 lignes, 28px donne
exactement le même rendu que sur photographe-megeve.com. */
html body .site-title-line.site-title-line {
display: block;
line-height: 1.3;
font-family: 'Jost', 'centurygothic', 'Century Gothic', Arial, sans-serif !important;
font-weight: 200 !important;
font-size: 28px !important;
}
/* 2e ligne ("Megeve Snowboard School 2027") : plus petite, encore plus
fine, un peu d'espace au-dessus — mêmes proportions que "Megève" sur
photographe-megeve.com (0.82em, poids 100). */
html body .site-title-line.site-title-line:last-child {
font-size: 0.82em !important;
font-weight: 100 !important;
margin-top: 6px;
}
/* Largeur de référence pour la 2e ligne ci-dessous : ".site-title" se cale
exactement sur la largeur de sa ligne la plus large ("Snowboard"), jamais
sur toute la largeur disponible de la colonne. */
.site-title {
display: inline-block;
width: max-content;
max-width: 100%;
}
/* "lessons Megève" (2e ligne) : espacement des lettres FIXE, valeur
calculée et donnée directement par l'utilisateur (5.6px) pour couvrir
exactement la largeur de "Snowboard" au-dessus — on ne recalcule plus
ça en JS (voir snowboard-child.js, la fonction de calcul dynamique a
été retirée pour ne plus jamais entrer en conflit avec cette valeur
fixe). "white-space: nowrap" : ne doit jamais retomber sur 2 lignes. */
html body #snow-title-line-2 {
letter-spacing: 5.6px !important;
white-space: nowrap;
}
.site-logo-snowboarder {
display: inline-flex;
align-items: center;
margin-right: 10px;
width: 38px;
height: auto;
animation: snow-logo-float 8s ease-in-out infinite;
will-change: transform;
}
/* Flottement purement vertical, entre les deux lignes du titre — même
rythme (8s, ease-in-out) que le renard sur les sites photo. */
@keyframes snow-logo-float {
0%, 100% {
transform: translateY(-8px);
}
50% {
transform: translateY(6px);
}
}
@media (prefers-reduced-motion: reduce) {
.site-logo-snowboarder {
animation: none;
}
}
@media only screen and (max-width: 767px) {
.site-logo-snowboarder {
width: 24px;
}
}
/* ==========================================================================
4. Menu — repris à l'identique de photographe-megeve.com : soulignement
qui grandit depuis le CENTRE (couleur de la maison, --snow-accent) + le
lien qui se soulève légèrement au survol. Espacement vertical entre les
items légèrement augmenté (demande explicite), pour respirer un peu
plus.
========================================================================== */
.menu-style li {
margin-bottom: 6px; /* un peu plus d'air entre chaque item */
}
.menu-style li:last-child {
margin-bottom: 0;
}
/* CORRIGÉ : cette règle forçait auparavant font-family / font-size /
font-weight / letter-spacing / color sur le menu — exactement l'erreur
signalée par l'utilisateur ("couleur menu et typo ne sont pas les
bonnes, celles d'origine doit rester"). La demande d'origine était
d'ajouter UNIQUEMENT l'effet de flottement + soulignement au survol,
sans toucher la typo ni la couleur déjà réglées par le thème/Customizer.
On ne garde donc ici que ce qui sert à l'effet lui-même (position pour
le pseudo-élément ::after, transition pour le mouvement) — plus aucune
propriété de police ni de couleur : le Customizer (Kirki) cible le menu
via la classe ".menu-style" (vérifié dans le thème parent, pas un ID),
donc en ne déclarant plus rien sur la police/couleur ici, sa règle
d'origine s'applique de nouveau normalement, sans aucun conflit. L'ID
"#snowboard-main-menu" (voir header.php) reste en place uniquement pour
cibler précisément CE menu (utile si plusieurs menus existent), pas pour
"gagner" contre le Customizer — ce n'était plus nécessaire ici. */
html body #snowboard-main-menu.menu-style > li > a {
position: relative;
display: inline-block;
transition: opacity 0.3s ease, transform 0.3s ease;
/* Demande client explicite (un peu plus foncé que le gris d'origine du
thème parent, "#aaa") — seule la couleur est touchée ici, rien
d'autre (voir note ci-dessus : la police/taille/espacement restent
volontairement celles du thème/Customizer). */
color: #7a7a7a !important;
}
/* Au survol : uniquement le léger soulèvement + estompage — plus de
changement de couleur forcé (voir note ci-dessus). */
html body #snowboard-main-menu.menu-style > li > a:hover {
transform: translateY(-2px);
opacity: 0.75;
}
/* Soulignement fluide : une ligne fine qui grandit depuis le centre.
Remonté (était -3px, encore signalé "trop bas") : plus proche du texte
maintenant. */
#snowboard-main-menu.menu-style > li > a::after {
content: '';
position: absolute;
left: 50%;
bottom: -1px;
width: 0;
height: 1px;
background: var(--snow-accent);
transform: translateX(-50%);
transition: width 0.7s ease;
}
#snowboard-main-menu.menu-style > li > a:hover::after {
width: 100%;
}
/* L'item actif (page en cours) : seul le soulignement (déjà visible, pas
seulement au survol) marque la page courante — plus de couleur de texte
forcée ici non plus, pour les mêmes raisons que ci-dessus. */
#snowboard-main-menu.menu-style > .current_page_item > a::after,
#snowboard-main-menu.menu-style > .current-menu-item > a::after,
#snowboard-main-menu.menu-style > .current-menu-parent > a::after,
#snowboard-main-menu.menu-style > .current-menu-ancestor > a::after,
#snowboard-main-menu.menu-style > li.active > a::after {
background: var(--snow-accent);
width: 100%;
}
@media (prefers-reduced-motion: reduce) {
.menu-style > li > a,
.menu-style > li > a::after {
transition: none !important;
}
}
/* Drapeaux FR/EN (sélecteur de langue, dans le menu) : réduits un peu,
comme demandé. "img.iso-3166-1" est la classe standard utilisée par les
plugins de langue (Polylang) pour les images de drapeau ; le sélecteur
plus large en repli couvre le cas où une autre classe est utilisée. */
html body #snowboard-main-menu img.iso-3166-1,
html body #snowboard-main-menu li img {
width: 14px !important;
height: auto !important;
margin-right: 4px;
}
/* ==========================================================================
4bis. Titres de page — même traitement que photographe-megeve.com :
Jost en poids fin (200) pour tous les titres de page/portfolio, pour une
vraie finesse visible (Century Gothic est une police système, le poids
seul n'y change rien — voir section 0).
".post-title" est la VRAIE classe utilisée par le thème Kathy pour les
titres de page/article (confirmé dans page.php/single.php — pas
".entry-title", qui n'existe pas sur ce thème).
DEUX sources concurrentes expliquaient l'absence d'effet malgré cette
règle déjà en place :
1) Le thème parent Kathy définit lui-même, en toutes lettres,
"h1, h2, h3, h4, h5, h6 { font-family:'Karla'; font-weight:700; }"
(style.css du thème parent, section #Reset). En sélecteur de BALISE
SEULE, ça a exactement la même spécificité que notre ancien
"h2, h3..." — en cas d'égalité, peu importe le poids qu'on donne à
chaque règle, c'est l'ORDRE qui décide, et selon les pages ça peut
retomber du mauvais côté.
2) Le Customizer (Kirki, Typography > Content > "Heading Font Weight")
injecte SA PROPRE valeur dynamique (par défaut 700) sur
"h1, h2, h3, h4, h5, h6, .post-title, ...", parfois en !important.
On verrouille donc avec "html body ..." (spécificité toujours
supérieure à une simple balise ou classe seule, quel que soit l'ordre
de chargement) sur CHAQUE variante, plus une règle "filet de sécurité"
très large (sélecteurs joker sur les classes contenant "title"/
"heading"/"pricing") pour couvrir aussi les titres générés par des
modules WPBakery/plugins dont le nom de classe exact n'a pas pu être
vérifié (ex. page "Class pricing").
========================================================================== */
html body .post-title,
html body .vc_custom_heading,
html body .portfolio-item-title,
html body .active-portfolio-category-title,
html body h1:not(.site-title-heading),
html body h2,
html body h3,
html body h4:not(.widget-title),
html body h5,
html body h6 {
font-family: 'Jost', 'centurygothic', 'Century Gothic', Arial, sans-serif !important;
font-weight: 200 !important;
}
/* Filet de sécurité : tout titre à l'intérieur du contenu (page builder,
module de tarifs, etc.) dont la classe contient "title", "heading" ou
"pricing", même si le nom exact de la classe n'est pas dans la liste
ci-dessus. Le titre du site (".site-title"/".site-title-line", dans
#side-container, pas #content-container) n'est jamais concerné. */
#content-container [class*="title"],
#content-container [class*="heading"],
#content-container [class*="pricing"] h1,
#content-container [class*="pricing"] h2,
#content-container [class*="pricing"] h3,
#content-container [class*="pricing"] h4 {
font-family: 'Jost', 'centurygothic', 'Century Gothic', Arial, sans-serif !important;
font-weight: 200 !important;
}
/* ==========================================================================
4ter. Couleurs — même code couleur que photographe-megeve.com : TOUT le
texte courant (paragraphes, listes) en gris (--snow-grey-text), et TOUS
les titres dans le rouge/bordeaux de la maison (--snow-accent), à
l'exception du titre du site lui-même (".site-title-heading", déjà
traité en section 2/3). C'est ce même principe, chez Jeanne, qui donne
au menu son apparence "grise" par contraste : le menu n'a pas de
couleur propre forcée par défaut, c'est le fait que TOUT LE RESTE du
texte passe en gris autour de lui qui crée cette identité visuelle
cohérente.
========================================================================== */
body,
p,
li,
.section-content,
.section-content p,
.section-content li {
color: var(--snow-grey-text) !important;
}
.section-content,
.section-content p,
.section-content li {
font-weight: 300;
}
html body .post-title,
html body .vc_custom_heading,
html body .portfolio-item-title,
html body .active-portfolio-category-title,
html body h1:not(.site-title-heading),
html body h2,
html body h3,
html body h4:not(.widget-title),
html body h5,
html body h6 {
color: var(--snow-accent) !important;
}
/* "Faux titres" mis en gras à la main dans l'éditeur (même principe que
sur photographe-megeve.com) : passent aussi dans le rouge de la maison,
avec le même traitement Jost fin que les vrais titres. */
#content-container strong,
.wpb_wrapper strong,
.section-content strong {
color: var(--snow-accent) !important;
font-family: 'Jost', 'centurygothic', 'Century Gothic', Arial, sans-serif !important;
font-weight: 200 !important;
font-size: 1.15em !important;
}
/* Copyright (bas de la colonne de gauche) : encore réduit (demande
explicite, après un premier passage à 9px qui reprenait la valeur du
CSS additionnel déjà en place sur ce site). "ISKI" et "AdStudio" y sont
en /, qui ne doivent JAMAIS grossir par rapport au reste du
texte — seule leur couleur/graisse peut changer, jamais leur taille. */
html body .copyright-social-wrapper,
html body .copyright-social-wrapper .copyright,
html body .copyright-social-wrapper .copyright *,
html body .copyright-social-wrapper a,
html body .copyright-social-wrapper strong {
font-size: 8px !important;
letter-spacing: 1px !important;
line-height: 1.6;
}
/* ==========================================================================
5. Photos — révélation au chargement/défilement. Même effet que sur
photographe-megeve.com (fondu + flou + léger zoom-arrière), puisque
c'est la même interface de portfolio derrière — mais encore plus LENT
ici, pour un rendu plus marqué/appuyé (demande explicite). L'état de
départ est posé directement en CSS dès le premier affichage (jamais
posé après coup en JS) pour ne jamais laisser apparaître une photo
nette avant l'effet — le JS n'a qu'à ajouter ".snow-revealed" au bon
moment (voir js/snowboard-child.js).
========================================================================== */
#content-container img:not(.site-logo-snowboarder):not(.logo-image),
.portfolio-item img, .image-wrapper img,
.wp-post-image, article img,
#root-container img:not(.site-logo-snowboarder):not(.logo-image):not([class*="slicknav"]) {
opacity: 0;
transform: translateY(16px) scale(0.965);
filter: blur(12px);
transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
filter 1.2s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform, filter;
}
.snow-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, .portfolio-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;
}
}
/* Neutralise l'animation d'entrée propre au thème parent sur les grilles
de portfolio (jQuery .animate() dans kathy.js, displayPortfolioItems())
: on garde le conteneur toujours visible et on laisse NOTRE effet
ci-dessus gérer entièrement la révélation, pour ne jamais avoir deux
effets qui se superposent ou se contrarient.
Complété (comparaison avec genevephotographie.ch/kathy-child, qui a ce
rideau de chargement masqué et n'a jamais eu le problème décrit
ci-dessous — cette règle manquait ici) : le "rideau" de chargement du
thème parent lui-même (".portfolio-loading"/".portfolio-loading-wrapper")
doit aussi être masqué, sinon il reste dans le DOM inutilement. */
.portfolio-item,
.image-wrapper {
opacity: 1 !important;
visibility: visible !important;
}
.portfolio-loading,
.portfolio-loading-wrapper {
display: none !important;
}
/* Texte qui apparaît au survol des 4 photos d'accueil (encadré noir,
".portfolio-title-wrapper" > ".portfolio-title", thème parent Kathy —
voir son style.css) — demande client : ne plus l'afficher à l'écran,
MAIS garder le texte lui-même dans le code de la page (mots-clés utiles
au référencement). On ne touche donc ni au HTML ni au texte : on se
contente de ne plus jamais le rendre visible, avec "visibility: hidden"
(jamais "display: none", qui masque aussi le texte aux moteurs de
recherche — "visibility: hidden" le laisse dans le code, juste jamais
affiché à l'écran, y compris au survol). */
.portfolio-title-wrapper {
opacity: 0 !important;
visibility: hidden !important;
}
/* ==========================================================================
5bis. Grille des 4 photos d'accueil PAS CENTRÉE en iPad horizontal
("en haut à droite au lieu du milieu de la page") — bug identifié en
comparant le thème parent Kathy (identique, vérifié octet pour octet,
sur ce site et sur genevephotographie.ch) avec les 2 media queries
responsive qui gèrent ".portfolio-listing" (style.css du thème PARENT) :
- Bureau (> 1150px) : ".portfolio-listing" a "margin-left: 27.7%" —
normal, pensé pour laisser la place à la colonne de gauche
("#side-container"), fixe et large de 27.1% de l'écran à cette
largeur.
- Mobile (≤ 1000px) : ".portfolio-listing" repasse à "margin: auto"
(vraiment centrée) — cohérent, la colonne de gauche n'est plus fixe
ni à côté (elle passe au-dessus, en pleine largeur) à cette largeur.
- ENTRE LES DEUX (1001px à 1150px — pile la largeur d'un iPad standard
en mode paysage, 1024px) : le thème parent fait déjà passer la
colonne de gauche en pleine largeur, au-dessus (comme en mobile,
voir "#side-container" dans ce même bloc du thème parent), MAIS
OUBLIE de repasser ".portfolio-listing" en "margin: auto" — elle
garde son "margin-left: 27.7%" de la mise en page bureau, alors que
la colonne qui justifiait cette marge n'est plus à côté d'elle. La
grille se retrouve donc décalée vers la droite au lieu d'être
centrée, exactement le symptôme décrit.
On comble ici précisément ce trou (1001px-1150px UNIQUEMENT, pour ne
surtout pas toucher à la mise en page bureau au-dessus, qui fonctionne
très bien) avec le même traitement que le thème parent applique déjà
lui-même en dessous de 1000px. */
@media only screen and (min-width: 1001px) and (max-width: 1150px) {
html body .portfolio-listing,
html body .portfolio-container .numbers-pagination {
margin-left: auto;
margin-right: auto;
float: none;
}
}
/* ==========================================================================
6. Slogan du site (Réglages > Général > Slogan — affiché via la classe
".tagline" dans la colonne de gauche, sous le titre : "Snowboarding
Mont d'Arbois Megève Megeve Snowboard School 2027") : demande explicite
— même couleur rouge de la maison que "NEW SCHOOL MEGEVE ・ Winter
2027" (--snow-accent), et un peu plus grand qu'avant (13px au lieu de
10px).
CONFLIT IDENTIFIÉ (grâce au CSS additionnel du Customizer, envoyé par
l'utilisateur) : une règle ".tagline { color: #912424 !important; }"
existe déjà là-bas, avec EXACTEMENT la même spécificité qu'ici (une
seule classe) — à égalité de poids/spécificité, c'est l'ordre de
chargement qui tranchait, et le CSS additionnel du Customizer passe
APRÈS notre feuille de style enfant. On verrouille donc ici avec une
spécificité clairement supérieure ("html body .tagline.tagline") pour
ne plus JAMAIS dépendre de l'ordre. */
html body .tagline.tagline {
display: block;
/* Descendue un peu plus bas sous le titre, plus proche du trait de
séparation en bas de colonne (demande explicite), au lieu de coller
juste sous "Megève". */
margin-top: 22px;
font-size: 13px;
letter-spacing: 0.5px;
color: var(--snow-accent) !important;
}