/* =====================================================================
   Coque commune des pages de test internes (harmonisation Forest Deep).
   Extraite a l'identique de page-test-accueil-vert.php (jetons, boutons,
   en-tete flottant + logo compact, curseur, pied de page). Ce fichier n'est
   charge QUE par le gabarit page-test-interne.php : aucune page publique
   ni la page test-accueil-vert ne l'utilise. Sans intro ni particules.
   ===================================================================== */
:root{
	--bg:#051F20; --bg-alt:#0B2B26; --surface:#163832; --accent:#235347;
	--sage:#8EB69B; --mint:#DAF1DE;
	--text:var(--mint); --text-soft:var(--sage);
}
/* Descente douce vers #prestations au clic sur "Decouvrir" ; desactivee
   sous reduction de mouvement (voir plus bas), l'ancre saute alors direct. */
html{ scroll-behavior:smooth; }
#tra-page{ font-family:"Inter",sans-serif; color:var(--text); background:var(--bg); line-height:1.65; overflow-x:clip; -webkit-font-smoothing:antialiased; }
#tra-page *,#tra-page *::before,#tra-page *::after{ box-sizing:border-box; }
#tra-page img{ max-width:100%; display:block; }
#tra-page a,#tra-page button{ color:inherit; text-decoration:none; font:inherit; background:none; border:0; cursor:pointer; }
#tra-page h1,#tra-page h2,#tra-page h3{ font-family:"Fraunces",serif; font-weight:600; line-height:1.08; letter-spacing:-0.01em; margin:0; color:var(--text); }
#tra-page .tra-container{ max-width:1220px; margin:0 auto; padding:0 32px; position:relative; z-index:1; }
#tra-page .tra-eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-soft); }
#tra-page .tra-eyebrow::before{ content:""; width:22px; height:2px; background:var(--sage); }
#tra-page .tra-emph{ color:var(--text); font-style:italic; border-bottom:2px solid var(--sage); }
/* ---------- Boutons / liens ---------- */
/* Verre teinte a l'echelle du bouton : contour fin, reflet discret au
   survol, sans grossissement (le survol de l'anneau du curseur suffit
   deja comme retour ; le bouton ne bouge/grossit pas lui-meme au-dela
   d'un tres leger lift). tra-btn-dark (action principale du formulaire)
   reste sensiblement plus clair/sature pour rester le plus visible. */
#tra-page .tra-btn{
	display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:16px; padding:16px 30px;
	border-radius:999px;
	background:linear-gradient(155deg,#2353479c 0%,#16383285 100%);
	backdrop-filter:blur(14px) saturate(1.3);
	-webkit-backdrop-filter:blur(14px) saturate(1.3);
	color:var(--mint);
	border:1.5px solid #8EB69B4d;
	box-shadow:0 1px 0 #DAF1DE26 inset, 0 10px 24px -14px #05131466;
	transition:background .22s ease, box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
#tra-page .tra-btn:hover,#tra-page .tra-btn:focus-visible{ background:linear-gradient(155deg,#2c6653b0 0%,#1c4038a3 100%); border-color:#8EB69B8c; box-shadow:0 1px 0 #DAF1DE33 inset, 0 12px 28px -12px #8EB69B4d; transform:translateY(-1px); }
#tra-page .tra-btn .arrow{ transition:transform .22s ease; display:inline-block; }
#tra-page .tra-btn:hover .arrow,#tra-page .tra-btn:focus-visible .arrow{ transform:translateY(3px); }
#tra-page .tra-btn:focus-visible{ outline:2px solid var(--sage); outline-offset:3px; }
#tra-page .tra-btn-dark{ background:linear-gradient(155deg,#a9d0b6c9 0%,#8eb69bcc 100%); color:var(--bg); border-color:#DAF1DE80; box-shadow:0 1px 0 #ffffff33 inset, 0 14px 30px -14px #8EB69B66; }
#tra-page .tra-btn-dark:hover,#tra-page .tra-btn-dark:focus-visible{ background:linear-gradient(155deg,#c3e0cce6 0%,#a3c9aee6 100%); border-color:#DAF1DEb0; box-shadow:0 1px 0 #ffffff40 inset, 0 16px 34px -12px #8EB69B80; }

/* Essai "verre v2" - meme recette allegee que les cartes, appliquee pour
   l'instant a un seul bouton (comparaison avant extension). */
#tra-page .tra-btn.tra-btn-v2{
	background:linear-gradient(165deg, rgba(218,241,222,.10) 0%, rgba(142,182,155,.08) 50%, rgba(11,43,38,.12) 100%);
	backdrop-filter:blur(18px) saturate(1.5);
	-webkit-backdrop-filter:blur(18px) saturate(1.5);
	border:1px solid rgba(218,241,222,.24);
	box-shadow:0 8px 20px -14px rgba(5,19,20,.4);
}
#tra-page .tra-btn.tra-btn-v2:hover,#tra-page .tra-btn.tra-btn-v2:focus-visible{
	background:linear-gradient(165deg, rgba(218,241,222,.16) 0%, rgba(142,182,155,.12) 50%, rgba(11,43,38,.16) 100%);
	border-color:rgba(218,241,222,.36);
	box-shadow:0 10px 24px -12px rgba(5,19,20,.46);
}

/* Bouton principal "Decouvrir" (hero) : contraste plutot que transparence
   (demande explicite - le fond translucide se confondait avec le decor
   derriere lui). Fond clair dominant, texte vert profond, dimensions
   fixes ~190x60px. L'effet verre (tra-btn-v2 ci-dessus) reste reserve aux
   elements secondaires - pas de backdrop-filter ici, pas d'animation en
   boucle (pas de pulsation), seule une transition au survol/focus. */
#tra-page .tra-btn.tra-btn-solid{
	min-width:190px; height:60px; justify-content:center;
	background:linear-gradient(155deg, #DAF1DE 0%, #8EB69B 100%);
	backdrop-filter:none; -webkit-backdrop-filter:none;
	color:#051F20;
	border:1px solid rgba(5,19,20,.14);
	box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 14px 28px -12px rgba(5,19,20,.5);
}
#tra-page .tra-btn.tra-btn-solid:hover,#tra-page .tra-btn.tra-btn-solid:focus-visible{
	background:linear-gradient(155deg, #e9f8ee 0%, #9cc4a8 100%);
	border-color:rgba(5,19,20,.2);
	box-shadow:0 1px 0 rgba(255,255,255,.65) inset, 0 18px 34px -12px rgba(5,19,20,.56);
	transform:translateY(-2px);
}

#tra-page .tra-link{ position:relative; display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:16px; padding-bottom:3px; color:var(--text); }
#tra-page .tra-link::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--text); transform:scaleX(1); transform-origin:left; transition:transform .28s ease, background .28s ease; }
#tra-page .tra-link:hover::after,#tra-page .tra-link:focus-visible::after{ background:var(--sage); transform:scaleX(1.06); }

/* Barre d'administration WordPress (utilisateur connecte) : l'en-tete flottant est fixe, il doit rester
   sous la barre (32 px ; 46 px sous 783 px de large ; sous 601 px la barre defile avec la page, sa hauteur
   visible est alors mise a jour par le script via --tra-ab). Aucun effet pour un visiteur deconnecte. */
body.admin-bar{ --tra-ab:32px; }
@media (max-width:782px){ body.admin-bar{ --tra-ab:46px; } }
#tra-page header.tra-header{ top:calc(16px + var(--tra-ab, 0px)); }

/* ---------- En-tete ----------
   Logique et mise en page reprises du header reel de sanctumdesign.fr
   (bandeau flottant, arrondi, centre en haut de l'ecran, qui se retire
   au scroll vers le bas et revient vers le haut) - couleurs et
   materiaux entierement remplaces par l'identite Forest Deep de cette
   page (meme recette de verre translucide que les cartes/formulaire,
   variables --bg/--sage/--mint deja definies plus haut). Le halo du
   logo reutilise l'animation traPulseGlow deja utilisee sur le portrait
   du hero, plutot que d'inventer une seconde identite d'animation. */
#tra-page .tra-header{
	position:fixed; top:16px; left:50%; z-index:60;
	width:min(1200px, calc(100% - 40px));
	border-radius:20px;
	background:linear-gradient(160deg, rgba(22,56,50,.6) 0%, rgba(11,43,38,.7) 100%);
	backdrop-filter:blur(18px) saturate(1.4);
	-webkit-backdrop-filter:blur(18px) saturate(1.4);
	border:1px solid rgba(142,182,155,.18);
	box-shadow:0 1px 0 rgba(218,241,222,.14) inset, 0 20px 44px -26px rgba(5,19,20,.6);
	transform:translate(-50%,0);
	transition:transform .38s cubic-bezier(.4,0,.2,1), box-shadow .3s ease;
	will-change:transform;
}
#tra-page .tra-header.is-hidden{ transform:translate(-50%, calc(-100% - 32px)); }
#tra-page .tra-header:focus-within{ transform:translate(-50%,0); }
#tra-page .tra-header-inner{ display:grid; grid-template-columns:1fr auto 1fr; grid-template-rows:68px auto; row-gap:0; column-gap:20px; align-items:center; padding:0 18px 0 24px; }
/* Logo a ouverture horizontale (principe Uiverse : largeur + overflow:hidden
   + transitions logo/texte), habille Forest Deep.
   REPOS : conteneur compact et STABLE (44x44), jamais d'ouverture
   automatique. Seul mouvement permanent : le degrade a l'interieur du S
   (nuances sauge / creme qui derivent), sans bande lumineuse, sans flash,
   sans halo. OUVERTURE : uniquement survol ou focus clavier ; comme ce
   sont des transitions CSS, une entree/sortie rapide repart toujours de
   la valeur courante (pas de saut). .tra-logo-wrap garde une empreinte
   fixe dans la grille : le conteneur absolu ne pousse rien. */
#tra-page .tra-logo-wrap{ position:relative; grid-column:1; justify-self:start; width:44px; height:44px; }
#tra-page .tra-logo{
	position:absolute; left:0; top:50%; z-index:2; transform:translateY(-50%);
	display:flex; align-items:center; width:44px; height:44px; overflow:hidden;
	border-radius:14px; border:1px solid rgba(142,182,155,.18);
	background-image:linear-gradient(155deg, rgba(22,56,50,.62) 0%, rgba(11,43,38,.72) 100%);
	box-shadow:0 1px 0 rgba(218,241,222,.1) inset, 0 10px 22px -16px rgba(5,19,20,.55);
	backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
	font-family:"Fraunces",serif; font-weight:600;
	transition:width .7s cubic-bezier(.22,1,.36,1), border-color .5s ease, box-shadow .5s ease;
}
#tra-page .tra-logo-icon{ position:relative; isolation:isolate; flex:0 0 42px; width:42px; height:42px; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:12px; transition:transform .7s cubic-bezier(.22,1,.36,1); }
#tra-page .tra-logo-icon img{ position:relative; z-index:1; height:26px; width:auto; border-radius:5px; display:block; }
/* Degrade interne du S : le calque est fondu en mode "color" sur l'image, il
   ne teinte donc que le S clair (le fond noir du logo reste noir). Deux
   couches periodiques (horizontale 84px, verticale 60px) dont les periodes
   different : le motif ne se repete visuellement qu'apres un long cycle et
   chaque couche se decale d'EXACTEMENT une periode -> boucle sans raccord.
   Etat statique identique en reduction de mouvement (seule l'animation saute). */
#tra-page .tra-logo-mark{ position:relative; isolation:isolate; display:block; height:26px; border-radius:5px; overflow:hidden; }
#tra-page .tra-logo-mark::after{
	content:""; position:absolute; inset:0; z-index:2; pointer-events:none; mix-blend-mode:color;
	background-image:
		linear-gradient(90deg, #8EB69B 0%, #EAF8ED 50%, #8EB69B 100%),
		linear-gradient(0deg, rgba(35,83,71,0) 0%, rgba(35,83,71,.95) 50%, rgba(35,83,71,0) 100%);
	background-size:84px 100%, 100% 60px;
	background-repeat:repeat-x, repeat-y;
	background-position:0 0, 0 0;
}
html.tra-anim #tra-page .tra-logo-mark::after{ animation:traLogoSGradient 12s linear infinite; }
@keyframes traLogoSGradient{ from{ background-position:0 0, 0 0; } to{ background-position:84px 0, 0 60px; } }
/* Texte : ferme = largeur 0, decale a gauche (derriere l'icone), bord droit
   adouci par un masque qui accompagne l'ouverture. */
#tra-page .tra-logo-text{
	display:block; max-width:0; overflow:hidden; white-space:nowrap; opacity:0; transform:translateX(-16px);
	-webkit-mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%); mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
	transition:max-width .6s cubic-bezier(.22,1,.36,1), opacity .3s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
#tra-page .tra-logo-name{
	display:block; padding:0 22px 0 4px; font-size:16.5px; line-height:1.15;
	color:var(--mint);
	background-image:linear-gradient(90deg, var(--mint) 0 54%, var(--sage) 54% 100%); background-origin:content-box;
	-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
/* Ouverture : survol (vrais pointeurs) et focus clavier */
#tra-page .tra-logo:focus-visible{ width:214px; border-color:rgba(142,182,155,.32); outline:none; }
#tra-page .tra-logo:focus-visible .tra-logo-icon{ transform:translateX(-2px); }
#tra-page .tra-logo:focus-visible .tra-logo-text{ max-width:196px; opacity:1; transform:translateX(0); transition:max-width .7s cubic-bezier(.22,1,.36,1), opacity .5s ease .1s, transform .7s cubic-bezier(.22,1,.36,1); }
@media (hover:hover){
	#tra-page .tra-logo:hover{ width:214px; border-color:rgba(142,182,155,.32); box-shadow:0 1px 0 rgba(218,241,222,.16) inset, 0 14px 28px -16px rgba(5,19,20,.6); }
	#tra-page .tra-logo:hover .tra-logo-icon{ transform:translateX(-2px); }
	#tra-page .tra-logo:hover .tra-logo-text{ max-width:196px; opacity:1; transform:translateX(0); transition:max-width .7s cubic-bezier(.22,1,.36,1), opacity .5s ease .1s, transform .7s cubic-bezier(.22,1,.36,1); }
}
/* Tactile (pas de survol) : etat ouvert fixe, lisible, sans mouvement
   automatique ; on reste compact sur tres petits ecrans. */
@media (hover:none) and (min-width:360px){
	#tra-page .tra-logo{ width:200px; }
	#tra-page .tra-logo .tra-logo-icon{ transform:translateX(-2px); }
	#tra-page .tra-logo .tra-logo-text{ max-width:182px; opacity:1; transform:translateX(0); }
}
#tra-page .tra-nav-links{ grid-column:2; justify-self:center; display:flex; align-items:center; gap:38px; }
#tra-page .tra-nav-links a{ font-size:14.5px; font-weight:600; color:var(--text-soft); transition:color .2s ease; }
#tra-page .tra-nav-links a:hover,#tra-page .tra-nav-links a:focus-visible{ color:var(--text); }
#tra-page .tra-header-actions{ grid-column:3; justify-self:end; display:flex; align-items:center; gap:14px; }
/* Bouton principal du header : reduit par rapport a tra-btn (base
   partagee avec le bouton du hero et du formulaire, non modifiee) et
   dote d'une micro-interaction en plusieurs couches au survol :
   1) le fond (degrade deja anime en continu, cf tra-btn-v2) se decale ;
   2) un anneau en degrade tres fin apparait et tourne lentement autour
      du bouton (bordure animee, pas un simple border-color) ;
   3) un reflet diagonal traverse le bouton (glissement lumineux) ;
   4) le libelle se souleve tres legerement avec un tracking elargi ;
   5) le bouton lui-meme se souleve (profondeur), sans aucun scale(). */
#tra-page .tra-btn.tra-header-cta{
	position:relative; overflow:hidden;
	padding:9px 20px; font-size:13.5px;
	background-size:220% 100%; background-position:0% 0%;
	transition:background-position .6s ease, border-color .3s ease, box-shadow .3s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
#tra-page .tra-btn.tra-header-cta:hover,#tra-page .tra-btn.tra-header-cta:focus-visible{ background-position:100% 0%; transform:translateY(-2px); }
#tra-page .tra-header-cta-label{ display:inline-block; transition:transform .3s ease, letter-spacing .3s ease; }
#tra-page .tra-header-cta:hover .tra-header-cta-label,#tra-page .tra-header-cta:focus-visible .tra-header-cta-label{ transform:translateY(-1px); letter-spacing:.012em; }
/* Reflet diagonal qui traverse le bouton (glissement lumineux). */
#tra-page .tra-header-cta::before{ content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(120deg, transparent, rgba(218,241,222,.34), transparent); transform:skewX(-20deg); transition:left .6s ease; pointer-events:none; }
#tra-page .tra-header-cta:hover::before,#tra-page .tra-header-cta:focus-visible::before{ left:120%; }
/* Anneau en degrade fin, invisible au repos, qui tourne lentement autour
   du bouton uniquement pendant le survol - une bordure animee, pas un
   trait statique qui change juste de couleur. */
#tra-page .tra-header-cta::after{
	content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
	background:conic-gradient(from 0deg, transparent 0%, rgba(218,241,222,.7) 12%, transparent 28%, transparent 100%);
	-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite:xor; mask-composite:exclude;
	opacity:0; transition:opacity .3s ease;
	pointer-events:none;
}
#tra-page .tra-header-cta:hover::after,#tra-page .tra-header-cta:focus-visible::after{ opacity:1; animation:traHeaderRing 2.6s linear infinite; }
@keyframes traHeaderRing{ from{ background:conic-gradient(from 0deg, transparent 0%, rgba(218,241,222,.7) 12%, transparent 28%, transparent 100%); } to{ background:conic-gradient(from 360deg, transparent 0%, rgba(218,241,222,.7) 12%, transparent 28%, transparent 100%); } }
/* Menu hamburger (mobile/tablette uniquement) */
#tra-page .tra-nav-toggle{ display:none; position:relative; width:36px; height:36px; border-radius:10px; border:1px solid rgba(142,182,155,.25); background:rgba(218,241,222,.06); cursor:pointer; padding:0; transition:background .2s ease, border-color .2s ease; }
#tra-page .tra-nav-toggle:hover,#tra-page .tra-nav-toggle:focus-visible{ background:rgba(218,241,222,.12); border-color:rgba(142,182,155,.4); }
#tra-page .tra-nav-toggle span{ position:absolute; left:9px; right:9px; height:2px; background:var(--mint); border-radius:2px; transition:transform .3s ease, opacity .3s ease; }
#tra-page .tra-nav-toggle span:nth-child(1){ top:12px; }
#tra-page .tra-nav-toggle span:nth-child(2){ top:17px; }
#tra-page .tra-nav-toggle span:nth-child(3){ top:22px; }
#tra-page .tra-nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
#tra-page .tra-nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
#tra-page .tra-nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }
/* Panneau mobile : vraie navigation repliee, pas juste des liens qui
   disparaissent - le CTA y est reintegre puisqu'il est masque du bandeau
   principal en dessous de 980px. */
#tra-page .tra-mobile-nav{ display:none; grid-column:1 / -1; flex-direction:column; gap:2px; padding:6px 22px 22px; }
#tra-page .tra-mobile-nav a{ display:block; padding:13px 4px; font-size:15.5px; font-weight:600; color:var(--text-soft); border-bottom:1px solid rgba(218,241,222,.08); transition:color .2s ease; }
#tra-page .tra-mobile-nav a:hover,#tra-page .tra-mobile-nav a:focus-visible{ color:var(--mint); }
#tra-page .tra-mobile-nav a.tra-mobile-cta{ margin-top:14px; border-bottom:none; justify-content:center; }
#tra-page .tra-header.is-nav-open .tra-mobile-nav{ display:flex; }
@media (max-width:980px){
	#tra-page .tra-header-cta{ display:none; }
	#tra-page .tra-nav-links{ display:none; }
	#tra-page .tra-nav-toggle{ display:block; }
}

#tra-page .tra-cursor-fx{ position:fixed; inset:0; z-index:90; pointer-events:none; opacity:0; transition:opacity .18s ease; }
#tra-page .tra-cursor-halo{ position:absolute; top:0; left:0; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; background:radial-gradient(circle,#DAF1DE2e 0%,#8EB69B1c 55%,transparent 75%); filter:blur(3px); will-change:transform; }
#tra-page .tra-cursor-ring{ position:absolute; top:0; left:0; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; border:1.4px solid #DAF1DEa8; will-change:transform; }
#tra-page .tra-footer{ background:var(--bg); color:var(--mint); padding:80px 0 32px; }
#tra-page .tra-footer-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; padding-bottom:52px; }
#tra-page .tra-footer-brand{ max-width:440px; }
#tra-page .tra-footer-logo{ font-family:"Fraunces",serif; font-weight:600; font-size:24px; color:var(--mint); margin-bottom:16px; }
#tra-page .tra-footer-logo span{ color:var(--sage); }
#tra-page .tra-footer-brand p{ max-width:420px; }
#tra-page .tra-footer-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; padding-bottom:40px; border-bottom:1px solid #DAF1DE1a; }
#tra-page .tra-footer-col .tra-footer-title{ font-family:"Ibarra Real Nova",serif; font-size:12px; line-height:1.3; letter-spacing:.1em; text-transform:uppercase; color:var(--sage); margin:0 0 18px; max-width:none; font-weight:700; }
#tra-page .tra-footer p{ margin:0 0 12px; color:#DAF1DEaa; font-size:14.5px; line-height:1.7; max-width:320px; }
#tra-page .tra-footer a{ display:block; width:fit-content; color:#DAF1DEdd; font-size:14.5px; margin-bottom:12px; transition:color .2s ease; }
#tra-page .tra-footer a:hover,#tra-page .tra-footer a:focus-visible{ color:var(--sage); }
/* Lien LinkedIn du pied de page : pastille de verre + libelle, cible tactile >= 44 px. */
#tra-page .tra-footer a.tra-footer-social{ display:inline-flex; align-items:center; gap:12px; min-height:44px; margin:0 0 4px -4px; padding:0 14px 0 4px; color:#DAF1DEdd; }
#tra-page .tra-footer-social-icon{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:11px; border:1px solid rgba(218,241,222,.24); background:linear-gradient(165deg, rgba(218,241,222,.10) 0%, rgba(142,182,155,.08) 50%, rgba(11,43,38,.12) 100%); color:var(--mint); transition:border-color .2s ease, color .2s ease, background .2s ease; }
#tra-page .tra-footer-social-icon svg{ width:18px; height:18px; fill:currentColor; display:block; }
#tra-page .tra-footer a.tra-footer-social:hover,#tra-page .tra-footer a.tra-footer-social:focus-visible{ color:var(--sage); }
#tra-page .tra-footer a.tra-footer-social:hover .tra-footer-social-icon,#tra-page .tra-footer a.tra-footer-social:focus-visible .tra-footer-social-icon{ border-color:rgba(142,182,155,.7); color:var(--sage); background:rgba(142,182,155,.14); }
#tra-page .tra-footer a.tra-footer-social:focus-visible{ outline:2px solid var(--sage); outline-offset:3px; border-radius:12px; }
#tra-page .tra-footer-bottom{ padding-top:26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; color:#DAF1DE66; }
#tra-page .tra-footer-bottom p{ margin:0; max-width:none; color:inherit; font-size:inherit; }

@media (max-width:900px){ #tra-page .tra-footer-grid{ grid-template-columns:1fr 1fr; row-gap:36px; } }
@media (max-width:600px){
	#tra-page .tra-container{ padding:0 20px; }
	#tra-page .tra-header-inner{ padding:14px 20px; }
	#tra-page .tra-footer-top{ flex-direction:column; align-items:flex-start; padding-bottom:40px; }
	#tra-page .tra-footer-grid{ grid-template-columns:1fr; row-gap:32px; }
	#tra-page .tra-footer-bottom{ flex-direction:column; gap:8px; }
}
#tra-page .tra-reveal{ opacity:1; transform:none; }
html.tra-anim #tra-page .tra-reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
html.tra-anim #tra-page .tra-reveal.tra-visible{ opacity:1; transform:none; }