/* ═══ « Les temps forts » — bloc partagé ═══════════════════════════
   Posé sur la page Transactions ET sur l'accueil depuis le 28/08. Son
   style vivait dans transactions.css : l'accueil l'aurait affiché nu.
   Il vit donc dans sa propre feuille, chargée là où le bloc apparaît.

   Les variables dont il dépend (--tx-navy, --tx-gold…) sont redéfinies
   ici en repli : sur l'accueil, transactions.css n'est pas chargé.
   ══════════════════════════════════════════════════════════════════ */
.tx-forts {
	--tx-navy: #14213F;
	--tx-gold: #8B6F47;
	--tx-cream: #FBFAF7;
	--tx-line: #E8E4DC;
	--tx-ink: #4A4A46;
}

/* Un palmarès, pas trois encadrés. Trois partis pris :
   · l'anneau doré autour de l'icône n'est pas un ornement — il DESSINE
     la part que la commune (ou la vente) pèse dans le mois, et il se
     remplit à l'arrivée ;
   · l'or n'est pas une couleur plate mais un dégradé, sur le chiffre
     comme sur l'anneau — c'est ce qui fait la différence entre « doré »
     et « en or » ;
   · le fond respire très lentement, deux halos qui dérivent en
     vingt-huit secondes. Assez pour que la bande soit vivante, trop
     lent pour qu'on le remarque consciemment. */
.tx-forts { position: relative; overflow: hidden; padding: 88px 0;
	background: radial-gradient(120% 140% at 15% 0%, #1B2E4F 0%, #14213F 45%, #0E1830 100%);
	color: #fff; }
.tx-forts::before, .tx-forts::after { content: ''; position: absolute; border-radius: 50%;
	pointer-events: none; filter: blur(70px); opacity: .5; }
.tx-forts::before { width: 46vw; height: 46vw; left: -12vw; top: -18vw;
	background: radial-gradient(circle, rgba(199,176,138,.28), transparent 68%);
	animation: tx-halo-a 28s ease-in-out infinite; }
.tx-forts::after { width: 40vw; height: 40vw; right: -14vw; bottom: -20vw;
	background: radial-gradient(circle, rgba(46,125,99,.24), transparent 68%);
	animation: tx-halo-b 34s ease-in-out infinite; }
@keyframes tx-halo-a { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(5vw,3vw,0) scale(1.12); } }
@keyframes tx-halo-b { 0%,100% { transform: translate3d(0,0,0) scale(1.06); } 50% { transform: translate3d(-4vw,-3vw,0) scale(1); } }

.tx-forts-inner { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.tx-forts-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
	flex-wrap: wrap; margin-bottom: 40px; }
.tx-forts .tx-d { color: #C7B08A; }
.tx-forts h2 { font-family: var(--r5-serif, Georgia, serif); font-weight: 400; color: #fff;
	font-size: clamp(25px, 3.2vw, 40px); line-height: 1.12; margin: 12px 0 0; letter-spacing: -.01em; }
.tx-forts-meta { font-size: 13px; color: rgba(255,255,255,.48); margin: 0 0 4px; font-variant-numeric: tabular-nums; }

.tx-forts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tx-fort { position: relative; overflow: hidden; padding: 34px 32px 30px; border-radius: 20px;
	background: linear-gradient(168deg, rgba(255,255,255,.085), rgba(255,255,255,.03));
	border: 1px solid rgba(255,255,255,.12);
	transition: transform .5s cubic-bezier(.22,.61,.36,1), opacity .7s cubic-bezier(.22,.61,.36,1),
		border-color .4s ease, box-shadow .4s ease; transition-delay: var(--delai, 0ms); }
/* Liseré doré au survol, sans épaissir la bordure : on éclaire, on ne charge pas. */
.tx-fort:hover { transform: translateY(-5px); border-color: rgba(199,176,138,.55);
	box-shadow: 0 22px 50px rgba(0,0,0,.32), 0 0 0 1px rgba(199,176,138,.18) inset; }
.tx-forts.anim .tx-fort { opacity: 0; transform: translateY(20px) scale(.985); }
.tx-forts.anim.vu .tx-fort { opacity: 1; transform: none; }

/* Le numéro de distinction, en filigrane */
.tx-fort-rang { position: absolute; top: 18px; right: 22px; font-family: var(--r5-serif, Georgia, serif);
	font-size: 54px; line-height: 1; color: rgba(255,255,255,.055); letter-spacing: -.03em;
	transition: color .4s ease; }
.tx-fort:hover .tx-fort-rang { color: rgba(199,176,138,.14); }

/* Médaille : anneau de part + icône */
.tx-fort-medaille { position: relative; display: block; width: 64px; height: 64px; margin-bottom: 24px; }
.tx-fort-anneau { position: absolute; inset: 0; width: 64px; height: 64px; }
.tx-fort-arc { stroke-dasharray: var(--circ) var(--circ); stroke-dashoffset: var(--circ);
	transition: stroke-dashoffset 1.5s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--delai, 0ms) + .35s); }
.tx-forts.vu .tx-fort-arc { stroke-dashoffset: calc(var(--circ) - (var(--circ) * var(--part) / 100)); }
.tx-fort-ic { position: absolute; inset: 0; display: grid; place-items: center; color: #C7B08A; }
.tx-fort-ic svg { width: 24px; height: 24px; }

.tx-fort-label { display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
	color: rgba(255,255,255,.55); }
.tx-fort-filet { display: block; height: 1px; width: 0; margin: 12px 0 14px;
	background: linear-gradient(90deg, #C7B08A, rgba(199,176,138,0));
	transition: width 1s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--delai, 0ms) + .25s); }
.tx-forts.vu .tx-fort-filet { width: 62px; }

.tx-fort-valeur { display: flex; align-items: baseline; gap: 9px; margin: 0 0 12px; }
.tx-fort-valeur span { font-family: var(--r5-serif, Georgia, serif); font-size: clamp(36px, 4.6vw, 50px);
	line-height: 1; font-variant-numeric: tabular-nums;
	background: linear-gradient(135deg, #F2E7D0 0%, #C7B08A 52%, #9C7F55 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent; }
.tx-fort-valeur small { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.tx-fort-sujet { margin: 0 0 6px; font-size: 19px; }
.tx-fort-sujet a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(199,176,138,.4);
	transition: color .3s ease, border-color .3s ease; }
.tx-fort-sujet a:hover { color: #C7B08A; border-bottom-color: #C7B08A; }
.tx-fort-detail { margin: 0 0 16px; font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.6; }
.tx-fort-part { margin: 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.09);
	font-size: 12.5px; color: rgba(255,255,255,.5); }
.tx-fort-part strong { color: #C7B08A; font-weight: 600; font-variant-numeric: tabular-nums; }

.tx-forts-note { margin: 30px 0 0; font-size: 13.5px; color: rgba(255,255,255,.58);
	border-left: 2px solid rgba(199,176,138,.45); padding-left: 14px; line-height: 1.65; max-width: 70ch; }

@media (max-width: 980px) { .tx-forts-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
	.tx-forts { padding: 60px 0; }
	.tx-fort { padding: 26px 22px 24px; }
	.tx-fort-valeur span { font-size: 36px; }
	.tx-fort-rang { font-size: 44px; top: 14px; right: 18px; }
	.tx-forts::before, .tx-forts::after { filter: blur(50px); opacity: .38; }
}
@media (prefers-reduced-motion: reduce) {
	.tx-fort { opacity: 1 !important; transform: none !important; transition: none !important; }
	.tx-fort-arc { transition: none !important; stroke-dashoffset: calc(var(--circ) - (var(--circ) * var(--part) / 100)) !important; }
	.tx-fort-filet { transition: none !important; width: 62px !important; }
	.tx-forts::before, .tx-forts::after { animation: none !important; }
}

/* Le CTA du bloc — présent sur l'accueil seulement, là où le lecteur
   n'est pas encore arrivé sur la carte. */
.tx-forts-cta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px;
	margin: 44px 0 0;
}
.tx-forts-cta .btn-primary {
	display: inline-block; padding: 15px 34px; border-radius: 100px;
	background: var(--tx-gold, #8B6F47); color: #fff; text-decoration: none;
	font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
	transition: background .2s ease, transform .2s ease;
}
.tx-forts-cta .btn-primary:hover,
.tx-forts-cta .btn-primary:focus-visible {
	background: #A88B63; transform: translateY(-2px);
}
.tx-forts-cta span {
	font-size: 13px; color: rgba(255,255,255,.62); line-height: 1.5;
}
@media (max-width: 600px) {
	.tx-forts-cta { margin-top: 34px; }
	.tx-forts-cta .btn-primary { width: 100%; text-align: center; }
}

/* ── Alignement sur l'accueil ─────────────────────────────────────
   L'accueil normalise le bord de contenu de toutes ses sections à
   24 / 48 / 80 px, pour une colonne de 1280 px au plus (voir la fin de
   hero.css). Le bloc vient de la page Transactions, plus étroite :
   posé tel quel, son titre démarrait 74 px plus à droite que tous les
   autres. On l'aligne ici plutôt que d'ajouter un nom de plus à la
   longue liste de sélecteurs de hero.css — le bloc porte son propre
   comportement, où qu'il aille. */
/* La marge se pose sur la SECTION, la largeur sur le conteneur. Les
   mettre toutes deux sur le conteneur les additionne : le centrage
   automatique donnait déjà 80 px sur un écran de 1440, et le remplissage
   en ajoutait 80 autres — titre à 160 px au lieu de 80.

   Le !important n'est pas un caprice : base.css impose 20 px à toute
   section (« filet mobile hérité »), également en !important. Sans lui,
   le bloc resterait à 20 px quand ses voisins passent à 48 puis 80. */
#page-home .tx-forts { padding-left: 24px !important; padding-right: 24px !important; }
#page-home .tx-forts-inner { max-width: 1280px; padding-left: 0; padding-right: 0; }
@media (min-width: 768px) {
	#page-home .tx-forts { padding-left: 48px !important; padding-right: 48px !important; }
}
@media (min-width: 1100px) {
	#page-home .tx-forts { padding-left: 80px !important; padding-right: 80px !important; }
}