/* * Restyle — Single-campagne * Override du CSS du dev (haeros-core) via wp_enqueue_scripts priorité 99 */ /* ================================================== Bouton "Payer avec Stripe" Le dev le met en bleu Stripe (#635bff) → on l'aligne sur la DA Haeros (or) ================================================== */ .hr-contribuer__btn-payer { background-color: var(--hr-or, #DCA54A) !important; color: var(--hr-noir, #222222) !important; } .hr-contribuer__btn-payer:hover { background-color: var(--hr-or-fonce, #c89539) !important; } /* ================================================== Galerie images de présentation Le dev plafonne à max-width: 500px → on libère la galerie ================================================== */ .hr-images-flex { max-width: 75%; } .hr-images-flex__item img { width: 100%; height: auto; display: block; border-radius: 6px; } /* ================================================== Paliers & Goodies ================================================== */ /* Supprime le translateY(30px) du dev qui décale les items vers le bas et peut provoquer chevauchements ou coupures sur petits écrans */ .hr-paliers-goodies__item { transform: none; margin-bottom: 40px; } /* Taille de police plus lisible pour le seuil (montant) */ .hr-paliers-goodies__seuil { font-size: 20px; color: var(--hr-or, #DCA54A); } /* Nom du palier plus lisible */ .hr-paliers-goodies__name { font-size: 16px; color: var(--hr-bleu-nuit, #0F172A); line-height: 1.5; } /* Ligne verticale en couleur Haeros */ .hr-paliers-goodies__line { background-color: var(--hr-or, #DCA54A); } .hr-paliers-goodies__line::after { border-top-color: var(--hr-or, #DCA54A); } .hr-paliers-goodies__marker { background-color: var(--hr-or, #DCA54A); } .hr-paliers-goodies__marker::before { background-color: var(--hr-or, #DCA54A); border-color: var(--hr-blanc, #FFFFFF); box-shadow: 0 0 0 2px var(--hr-or, #DCA54A); } /* ================================================== Barre de progression — Paliers (élément RÉELLEMENT rendu : .hr-progressbar) Problème : labels en diagonale (rotate 65deg) + jalons décalés en escalier (style inline bottom:X%). Objectif : texte DROIT + jalons sur la ligne + alternance lisible un-en-bas / un-en-haut. Scopé au paysage/desktop : le dev a une belle version verticale en portrait (mobile) qu'on laisse intacte. ================================================== */ @media (orientation: landscape) { /* --- Place pour DEUX niveaux d'étiquettes de chaque côté --------------- Les jalons restent positionnés proportionnellement à leur montant : avec beaucoup de paliers rapprochés, deux niveaux (un dessus / un dessous) ne suffisaient plus et les noms se chevauchaient. On passe à quatre niveaux, ce qui quadruple la largeur disponible par étiquette. Le retrait horizontal (80px) empêche l'étiquette du dernier palier — centrée sur le jalon posé à 100 % — de sortir de la section. */ .hr-progressbar { padding: 152px 80px; } /* Tous les jalons reviennent SUR la ligne (annule le bottom:X% inline) */ .hr-progressbar__milestone { top: 50% !important; bottom: auto !important; overflow: visible; } .hr-progressbar__track { overflow: visible; } /* Texte DROIT : on annule la rotation 65deg et on recentre sous le marqueur */ .hr-progressbar__milestone-label { transform: translateX(-50%) !important; transform-origin: center !important; left: 50%; white-space: normal !important; /* autorise le retour à la ligne (annule le nowrap du dev) */ overflow: visible !important; /* annule overflow:hidden du dev */ text-overflow: clip !important; /* annule l'ellipsis du dev */ width: 160px !important; /* largeur fixe → évite l'effondrement 1 mot/ligne */ max-width: none !important; /* annule le max-width:100px du dev */ line-height: 1.35; text-align: center; font-size: 14px; font-weight: 600; color: var(--hr-bleu-nuit, #0F172A); } .hr-progressbar__milestone-value { transform: translateX(-50%); left: 50%; white-space: nowrap; text-align: center; font-size: 15px; font-weight: 700; color: var(--hr-or, #DCA54A); } /* --- Répartition sur 4 niveaux ---------------------------------------- Le 1er enfant de la piste est .hr-progressbar__fill : le palier n°1 est donc nth-child(2). Le cycle de 4 se lit : palier 1 → nth-child(4n+2) bas, niveau 1 palier 2 → nth-child(4n+3) haut, niveau 1 palier 3 → nth-child(4n+4) bas, niveau 2 palier 4 → nth-child(4n+1) haut, niveau 2 (n≥1 : l'enfant 1 est le remplissage, jamais un jalon) */ /* Niveau 1 — juste sous la ligne */ .hr-progressbar__milestone:nth-child(4n+2) .hr-progressbar__milestone-value { top: 22px; bottom: auto; } .hr-progressbar__milestone:nth-child(4n+2) .hr-progressbar__milestone-label { top: 42px; bottom: auto; } /* Niveau 1 — juste au-dessus de la ligne */ .hr-progressbar__milestone:nth-child(4n+3) .hr-progressbar__milestone-value { bottom: 22px; top: auto; } .hr-progressbar__milestone:nth-child(4n+3) .hr-progressbar__milestone-label { bottom: 42px; top: auto; } /* Niveau 2 — plus bas */ .hr-progressbar__milestone:nth-child(4n+4) .hr-progressbar__milestone-value { top: 100px; bottom: auto; } .hr-progressbar__milestone:nth-child(4n+4) .hr-progressbar__milestone-label { top: 120px; bottom: auto; } /* Niveau 2 — plus haut */ .hr-progressbar__milestone:nth-child(4n+1) .hr-progressbar__milestone-value { bottom: 100px; top: auto; } .hr-progressbar__milestone:nth-child(4n+1) .hr-progressbar__milestone-label { bottom: 120px; top: auto; } /* --- Fil de rattachement pour le niveau 2 ----------------------------- Éloignée de la ligne, l'étiquette perd son jalon de vue : un trait fin la relie à son point. */ .hr-progressbar__milestone:nth-child(4n+4)::after, .hr-progressbar__milestone:nth-child(4n+1)::after { content: ''; position: absolute; left: 50%; width: 1px; height: 82px; background: var(--hr-bordure, #D3C4A7); z-index: 0; } .hr-progressbar__milestone:nth-child(4n+4)::after { top: 14px; } .hr-progressbar__milestone:nth-child(4n+1)::after { bottom: 14px; } } @media (max-width: 576px) { /* Galerie pleine largeur sur mobile */ .hr-images-flex { max-width: 100%; } /* Paliers : fontes légèrement réduites */ .hr-paliers-goodies__item { margin-bottom: 32px; } .hr-paliers-goodies__seuil { font-size: 17px; } .hr-paliers-goodies__name { font-size: 15px; } }