/* =====================================================================
   Habillage des pages de test internes (Forest Deep).
   Purement presentation : aucun contenu genere en texte (les seuls
   pseudo-elements ajoutes sont des formes graphiques vides). Chaque regle
   est portee par #tra-page pour l'emporter sur les styles en ligne du
   contenu existant (balises <style> des pages legales / A propos) sans
   modifier ce contenu.
   ===================================================================== */

/* ---------- Socle commun ---------- */
#tra-page .tra-int{ position:relative; padding:150px 0 112px; background:var(--bg); overflow:hidden; min-height:72vh; }
#tra-page .tra-int-content{ position:relative; z-index:1; max-width:1220px; margin:0 auto; padding:0 32px; }
#tra-page .tra-int-glow{ position:absolute; z-index:0; border-radius:50%; pointer-events:none; }
#tra-page .tra-int-glow-a{ right:-160px; top:-120px; width:720px; height:720px; max-width:90vw; max-height:90vw; background:radial-gradient(circle,#8EB69B26 0%,#23534718 46%,transparent 72%); }
#tra-page .tra-int-glow-b{ left:-220px; top:34%; width:620px; height:620px; max-width:80vw; max-height:80vw; background:radial-gradient(circle,#2353472e 0%,transparent 70%); }
html.tra-anim #tra-page .tra-int-glow-a{ animation:traIntDriftA 32s ease-in-out infinite alternate; }
html.tra-anim #tra-page .tra-int-glow-b{ animation:traIntDriftB 38s ease-in-out infinite alternate; }
@keyframes traIntDriftA{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-40px,30px) scale(1.07); } }
@keyframes traIntDriftB{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(34px,-26px) scale(1.06); } }

/* Espacement historique conserve : un paragraphe vide (lien vide invisible) retire du contenu occupait 22 px
   (en haut sur A propos, en bas sur les pages legales) ; on garde la meme hauteur totale. */
#tra-page main.tra-int--apropos{ padding-top:172px; }
#tra-page main.tra-int--legal{ padding-bottom:134px; }
@media (max-width:760px){ #tra-page main.tra-int--apropos{ padding-top:166px; } #tra-page main.tra-int--legal{ padding-bottom:106px; } }

/* Neutralise la mise en page Themify Builder : les rangees/colonnes ne
   servent plus que de conteneurs, la composition est faite ici. */
#tra-page .tra-int .themify_builder_content{ width:100%; }
#tra-page .tra-int .module_row{ padding:0!important; margin:0!important; background:none!important; border:0!important; width:100%!important; }
#tra-page .tra-int .row_inner{ padding:0!important; margin:0!important; max-width:none!important; width:100%!important; display:block!important; }
#tra-page .tra-int .module_column.tb-column{ padding:0!important; margin:0!important; width:100%!important; float:none!important; }
#tra-page .tra-int .module_column:empty{ display:none; }
#tra-page .tra-int .module{ margin:0!important; padding:0!important; border:0!important; border-radius:0!important; box-shadow:none!important; background:none!important; }
#tra-page .tra-int .tb_text_wrap{ padding:0; }
#tra-page .tra-int .tb_text_wrap > br{ display:none; }
#tra-page .tra-int .wow{ animation:none!important; visibility:visible!important; opacity:1!important; }
#tra-page .tra-int a{ transition:color .2s ease; }
#tra-page .tra-int p,#tra-page .tra-int li{ font-family:"Inter",sans-serif; }
#tra-page .tra-int :focus-visible{ outline:2px solid var(--sage); outline-offset:3px; }

/* =====================================================================
   Pages legales : lecture calme, largeur de texte maitrisee, aucune
   animation. Meme materiau de verre que la page d'accueil.
   ===================================================================== */
#tra-page .tra-int--legal .sd-legal-section{ width:auto!important; padding:0!important; background:none!important; color:var(--text)!important; }
#tra-page .tra-int--legal .sd-legal-card{
	position:relative; max-width:1040px; margin:0 auto!important; padding:clamp(28px,5.4vw,72px)!important; border-radius:26px;
	background:linear-gradient(165deg, rgba(218,241,222,.07) 0%, rgba(142,182,155,.05) 45%, rgba(11,43,38,.16) 100%)!important;
	backdrop-filter:blur(22px) saturate(1.4); -webkit-backdrop-filter:blur(22px) saturate(1.4);
	border:1px solid rgba(218,241,222,.18)!important;
	box-shadow:0 1px 0 rgba(218,241,222,.08) inset, 0 30px 60px -34px rgba(5,19,20,.6)!important;
}
#tra-page .tra-int--legal .sd-legal-logo{ text-align:left; margin:0 0 30px; padding:0!important; border:0!important; border-radius:0; background:none!important; backdrop-filter:none; -webkit-backdrop-filter:none; }
#tra-page .tra-int--legal .sd-legal-logo a{ font-family:"Fraunces",serif; font-size:22px; font-weight:600; letter-spacing:-.01em; color:var(--mint); }
#tra-page .tra-int--legal .sd-legal-logo span{ color:var(--sage); }
#tra-page .tra-int--legal .sd-legal-logo a:hover,#tra-page .tra-int--legal .sd-legal-logo a:focus-visible{ color:var(--sage); }
#tra-page .tra-int--legal .sd-legal-badge{ display:flex; align-items:center; gap:10px; width:fit-content; margin:0 0 20px; padding:0; border-radius:0; background:none; color:var(--sage); font-size:13px; font-weight:700; letter-spacing:.1em; }
#tra-page .tra-int--legal .sd-legal-badge::before{ content:""; width:22px; height:2px; background:var(--sage); }
#tra-page .tra-int--legal .sd-legal-card h1{ margin:0 0 14px; font-size:clamp(36px,5.2vw,62px); line-height:1.05; color:var(--mint); }
#tra-page .tra-int--legal .sd-legal-date{ margin:0 0 44px; color:var(--sage); font-size:15px; }
#tra-page .tra-int--legal .sd-legal-block{
	display:grid; grid-template-columns:minmax(170px,250px) minmax(0,1fr); column-gap:clamp(28px,5vw,64px); row-gap:0;
	padding:34px 0!important; border-top:1px solid rgba(218,241,222,.12)!important;
}
#tra-page .tra-int--legal .sd-legal-block > h2{ grid-column:1; grid-row:1 / span 60; align-self:start; position:sticky; top:104px; margin:0; font-size:20px; line-height:1.25; color:var(--mint); }
#tra-page .tra-int--legal .sd-legal-block > *:not(h2){ grid-column:2; max-width:68ch; }
#tra-page .tra-int--legal .sd-legal-block h3{ margin:22px 0 10px; font-size:17.5px; line-height:1.3; color:var(--sage); }
#tra-page .tra-int--legal .sd-legal-block > h3:first-of-type{ margin-top:0; }
#tra-page .tra-int--legal .sd-legal-block p,
#tra-page .tra-int--legal .sd-legal-block li{ font-size:16.5px; line-height:1.8; color:rgba(218,241,222,.86); }
#tra-page .tra-int--legal .sd-legal-block p{ margin:0 0 14px; }
#tra-page .tra-int--legal .sd-legal-block strong{ color:var(--mint); font-weight:600; }
#tra-page .tra-int--legal .sd-legal-block ul,#tra-page .tra-int--legal .sd-legal-block ol{ margin:0 0 14px; padding-left:22px; }
#tra-page .tra-int--legal .sd-legal-block li{ margin:0 0 6px; padding-left:4px; }
#tra-page .tra-int--legal .sd-legal-block li::marker{ color:var(--sage); }
#tra-page .tra-int--legal .sd-legal-block > *:last-child{ margin-bottom:0; }
#tra-page .tra-int--legal .sd-legal-block a{ color:var(--mint); text-decoration:underline; text-decoration-color:rgba(142,182,155,.7); text-underline-offset:3px; }
#tra-page .tra-int--legal .sd-legal-block a:hover,#tra-page .tra-int--legal .sd-legal-block a:focus-visible{ color:var(--sage); }

@media (max-width:760px){
	#tra-page .tra-int{ padding:144px 0 84px; }
	#tra-page .tra-int-content{ padding:0 16px; }
	#tra-page .tra-int--legal .sd-legal-block{ display:block; padding:28px 0!important; }
	#tra-page .tra-int--legal .sd-legal-block > h2{ position:static; margin:0 0 14px; font-size:19px; }
	#tra-page .tra-int--legal .sd-legal-block > *:not(h2){ max-width:none; }
	#tra-page .tra-int--legal .sd-legal-card{ border-radius:20px; }
}

/* =====================================================================
   A propos : composition vivante. Les trois piliers restent trois liens
   (memes textes, memes destinations, meme ordre) ; foi et sport sont mis
   en avant par la typographie, le format des cartes et les images deja
   presentes sur le site (fonds decoratifs des cartes).
   ===================================================================== */
#tra-page .tra-int--apropos .sd-pillars{ padding:0!important; }
#tra-page .tra-int--apropos .sd-pillars-wrap{ max-width:none!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; background:none!important; box-shadow:none!important; overflow:visible!important; }
#tra-page .tra-int--apropos .sd-pillars-head{ max-width:900px; margin:0 0 clamp(44px,6vw,76px); }
#tra-page .tra-int--apropos .sd-pillars-head span{ display:inline-flex; align-items:center; gap:10px; margin:0 0 26px!important; padding:0!important; border-radius:0!important; background:none!important; color:var(--sage)!important; font-size:13px!important; font-weight:700!important; letter-spacing:.1em; }
#tra-page .tra-int--apropos .sd-pillars-head span::before{ content:""; width:22px; height:2px; background:var(--sage); transform-origin:left; }
#tra-page .tra-int--apropos .sd-pillars-head h1{ max-width:16ch; margin:0 0 30px!important; font-size:clamp(42px,6.4vw,88px)!important; line-height:1.02!important; font-weight:600!important; letter-spacing:-.02em!important; color:var(--mint)!important; }
#tra-page .tra-int--apropos .sd-pillars-head p{ max-width:620px; margin:0!important; font-size:clamp(17px,1.5vw,20px)!important; line-height:1.7!important; color:var(--sage)!important; }

#tra-page .tra-int--apropos .sd-pillars-grid{ display:grid!important; grid-template-columns:1fr 1fr; grid-template-rows:auto!important; gap:22px; }
#tra-page .tra-int--apropos .sd-pillar{
	position:relative; isolation:isolate; overflow:hidden; display:flex!important; flex-direction:column; justify-content:flex-end;
	min-height:520px; padding:36px!important; border-radius:26px;
	color:var(--mint); text-decoration:none!important;
	background:linear-gradient(165deg, rgba(218,241,222,.09) 0%, rgba(142,182,155,.07) 45%, rgba(11,43,38,.10) 100%)!important;
	backdrop-filter:blur(22px) saturate(1.5); -webkit-backdrop-filter:blur(22px) saturate(1.5);
	border:1px solid rgba(218,241,222,.22)!important;
	box-shadow:0 10px 26px -18px rgba(5,19,20,.5)!important;
	--mx:50%; --my:38%;
	transition:border-color .35s ease, box-shadow .35s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
/* Fond : image (cartes 02 et 03) sous un voile vert profond qui garantit la lisibilite du texte. */
#tra-page .tra-int--apropos .sd-pillar::before{
	content:""; position:absolute; inset:0; z-index:-2; width:auto; height:auto; border-radius:0; transform:none;
	background:radial-gradient(circle at 88% 12%, rgba(142,182,155,.20) 0%, transparent 46%);
	transition:transform 1.4s cubic-bezier(.22,1,.36,1);
}
#tra-page .tra-int--apropos .sd-pillar:nth-child(1)::before{
	background-image:linear-gradient(180deg, rgba(5,31,32,.76) 0%, rgba(5,31,32,.40) 30%, rgba(5,31,32,.62) 58%, rgba(5,31,32,.95) 100%), url("https://sanctumdesign.fr/wp-content/uploads/2026/06/Foi-Sanctumdesign-1-1152x1536.webp");
	background-size:cover; background-position:center 32%;
}
#tra-page .tra-int--apropos .sd-pillar:nth-child(2)::before{
	background-image:linear-gradient(180deg, rgba(5,31,32,.76) 0%, rgba(5,31,32,.40) 30%, rgba(5,31,32,.62) 58%, rgba(5,31,32,.95) 100%), url("https://sanctumdesign.fr/wp-content/uploads/2026/06/Sport-Sanctumdesign.webp");
	background-size:cover; background-position:58% center;
}
/* Reflet qui suit le curseur (survol/focus uniquement). */
#tra-page .tra-int--apropos .sd-pillar::after{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(300px circle at var(--mx) var(--my), rgba(218,241,222,.14) 0%, transparent 62%); opacity:0; transition:opacity .4s ease; }
#tra-page .tra-int--apropos .sd-pillar:hover,#tra-page .tra-int--apropos .sd-pillar:focus-visible{ transform:translateY(-4px); border-color:rgba(218,241,222,.36)!important; box-shadow:0 22px 44px -24px rgba(5,19,20,.7)!important; }
#tra-page .tra-int--apropos .sd-pillar:hover::before,#tra-page .tra-int--apropos .sd-pillar:focus-visible::before{ transform:scale(1.05); }
#tra-page .tra-int--apropos .sd-pillar:hover::after,#tra-page .tra-int--apropos .sd-pillar:focus-visible::after{ opacity:1; }

#tra-page .tra-int--apropos .sd-pillar-top{ display:flex; align-items:center; justify-content:space-between; margin:0 0 auto!important; padding-bottom:40px; gap:16px; }
#tra-page .tra-int--apropos .sd-num{ width:auto; height:auto; display:block; border-radius:0; background:none!important; box-shadow:none; color:var(--sage)!important; font-family:"Fraunces",serif; font-size:30px; font-style:italic; font-weight:500; line-height:1; transition:color .3s ease, transform .3s ease; }
#tra-page .tra-int--apropos .sd-icon{ width:52px; height:52px; display:flex; align-items:center; justify-content:center; border-radius:16px; background:rgba(218,241,222,.10)!important; border:1px solid rgba(218,241,222,.24); box-shadow:none; color:var(--mint)!important; font-size:22px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transition:transform .35s ease, border-color .35s ease; }
#tra-page .tra-int--apropos .sd-pillar .sd-num{ color:var(--mint)!important; text-shadow:0 1px 10px rgba(5,31,32,.7); }
#tra-page .tra-int--apropos .sd-pillar:hover .sd-num,#tra-page .tra-int--apropos .sd-pillar:focus-visible .sd-num{ color:var(--mint)!important; transform:translateY(-2px); }
#tra-page .tra-int--apropos .sd-pillar:hover .sd-icon,#tra-page .tra-int--apropos .sd-pillar:focus-visible .sd-icon{ transform:rotate(-6deg) scale(1.05); border-color:rgba(218,241,222,.4); }
#tra-page .tra-int--apropos .sd-pillar h2{ margin:0 0 12px!important; font-family:"Fraunces",serif; font-weight:600; font-size:clamp(38px,4.4vw,58px)!important; line-height:1.04; letter-spacing:-.015em; color:var(--mint)!important; }
#tra-page .tra-int--apropos .sd-pillar p{ max-width:440px; margin:0 0 26px!important; font-size:16.5px!important; line-height:1.7!important; color:rgba(218,241,222,.88)!important; }
/* Libelle du lien = pastille de verre (meme recette que les boutons de la page d'accueil). */
#tra-page .tra-int--apropos .sd-pillar strong{
	display:inline-flex; align-items:center; gap:12px; width:fit-content; padding:13px 26px; border-radius:999px;
	font-size:15px!important; font-weight:700; color:var(--mint)!important;
	background:linear-gradient(165deg, rgba(218,241,222,.12) 0%, rgba(142,182,155,.09) 50%, rgba(11,43,38,.14) 100%);
	backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5);
	border:1px solid rgba(218,241,222,.26); box-shadow:0 8px 20px -14px rgba(5,19,20,.5);
	transition:background .25s ease, border-color .25s ease;
}
#tra-page .tra-int--apropos .sd-pillar strong::after{ content:""; width:8px; height:8px; border-top:1.6px solid currentColor; border-right:1.6px solid currentColor; transform:rotate(45deg); transition:transform .3s ease; }
#tra-page .tra-int--apropos .sd-pillar:hover strong,#tra-page .tra-int--apropos .sd-pillar:focus-visible strong{ background:linear-gradient(165deg, rgba(218,241,222,.2) 0%, rgba(142,182,155,.14) 50%, rgba(11,43,38,.18) 100%); border-color:rgba(218,241,222,.42); }
#tra-page .tra-int--apropos .sd-pillar:hover strong::after,#tra-page .tra-int--apropos .sd-pillar:focus-visible strong::after{ transform:translateX(3px) rotate(45deg); }


/* Revelation douce (seulement sous html.tra-anim, donc jamais sans JS ni en mouvement reduit). */
html.tra-anim #tra-page .tra-int--apropos .sd-pillar.tra-reveal:nth-child(2){ transition-delay:.1s; }
html.tra-anim #tra-page .tra-int--apropos .sd-pillars-head span::before{ transform:scaleX(0); transition:transform .9s cubic-bezier(.22,1,.36,1) .15s; }
html.tra-anim #tra-page .tra-int--apropos .sd-pillars-head.tra-visible span::before{ transform:scaleX(1); }

@media (max-width:850px){
	#tra-page .tra-int--apropos .sd-pillars-grid{ grid-template-columns:1fr; }
	#tra-page .tra-int--apropos .sd-pillar{ min-height:440px; padding:28px!important; }
}

/* =====================================================================
   Mes valeurs (Foi) et Le role du sport : refonte 2026-09-23. Contenu
   ecrit directement dans le gabarit (content-foi-sport.php), plus le
   formulaire de contact d'origine, restyle, en bas de page (bloc suivant,
   inchange). Foi = colonne calme, rythme lent. Sport = escalier
   ascendant, rythme plus vif. Meme materiau (verre, halos) que le reste
   du site pour rester dans la meme famille visuelle.
   ===================================================================== */
#tra-page main.tra-int--valeurs,
#tra-page main.tra-int--sport{ padding-top:clamp(150px,18vw,196px); }
#tra-page .tra-int--valeurs .tra-int-content,
#tra-page .tra-int--sport .tra-int-content{ display:flex; flex-direction:column; }

/* ---------- Hero (partage) ---------- */
#tra-page .tra-foi-hero,
#tra-page .tra-sport-hero{ max-width:760px; margin:0 0 clamp(64px,9vw,110px); }
#tra-page .tra-foi-hero{ margin-left:auto; margin-right:auto; text-align:center; }
#tra-page .tra-foi-hero .tra-eyebrow,
#tra-page .tra-sport-hero .tra-eyebrow{ margin-bottom:22px; }
#tra-page .tra-foi-hero .tra-eyebrow{ justify-content:center; }
#tra-page .tra-foi-hero h1{ font-size:clamp(36px,5.4vw,60px); line-height:1.14; }
#tra-page .tra-sport-hero h1{ font-size:clamp(42px,7vw,84px); line-height:1.02; letter-spacing:-.02em; }
#tra-page .tra-foi-lede{ max-width:600px; margin:24px auto 0; font-size:clamp(17px,1.5vw,19.5px); line-height:1.85; color:var(--text-soft); }
#tra-page .tra-sport-lede{ max-width:560px; margin:22px 0 0; font-size:clamp(17px,1.5vw,19.5px); line-height:1.8; color:var(--text-soft); }

/* ---------- Foi : colonne calme (spine verticale, pas d'escalier) ---------- */
#tra-page .tra-foi-spine{ position:relative; max-width:640px; margin:0 auto; padding:8px 0 0; }
#tra-page .tra-foi-spine-line{ position:absolute; left:11px; top:10px; bottom:32px; width:1.5px; background:linear-gradient(180deg, transparent 0%, rgba(142,182,155,.4) 10%, rgba(142,182,155,.4) 90%, transparent 100%); }
#tra-page .tra-foi-step{ position:relative; padding:0 0 0 56px; margin:0 0 clamp(48px,7vw,76px); }
#tra-page .tra-foi-step:last-child{ margin-bottom:0; }
#tra-page .tra-foi-dot{ position:absolute; left:5px; top:6px; width:13px; height:13px; border-radius:50%; background:var(--sage); border:1.5px solid rgba(142,182,155,.6); transition:background .5s ease, border-color .5s ease, box-shadow .5s ease; }
#tra-page .tra-foi-step.tra-visible .tra-foi-dot{ background:var(--sage); border-color:var(--mint); box-shadow:0 0 0 5px rgba(142,182,155,.16); }
/* Etat de depart (dot eteint) uniquement quand l'animation au defilement est
   reellement active : sans JS ou en mouvement reduit, le point reste toujours
   "allume" (page complete des l'affichage, comme le reste du gabarit). */
html.tra-anim #tra-page .tra-foi-dot{ background:var(--bg); }
#tra-page .tra-foi-num{ display:block; margin:0 0 8px; font-family:"Fraunces",serif; font-style:italic; font-size:14px; letter-spacing:.06em; color:var(--sage); }
#tra-page .tra-foi-step h2{ margin:0 0 12px; font-size:clamp(25px,2.8vw,32px); }
#tra-page .tra-foi-step p{ max-width:56ch; margin:0; font-size:16.5px; line-height:1.8; color:rgba(218,241,222,.86); }
#tra-page .tra-foi-close{ max-width:560px; margin:clamp(56px,8vw,90px) auto 0; padding-top:clamp(40px,6vw,56px); border-top:1px solid rgba(218,241,222,.14); text-align:center; }
#tra-page .tra-foi-close p{ margin:0; font-family:"Fraunces",serif; font-style:italic; font-size:clamp(18px,1.9vw,22px); line-height:1.6; color:var(--mint); }
html.tra-anim #tra-page .tra-foi-step:nth-child(2){ transition-delay:.08s; }
html.tra-anim #tra-page .tra-foi-step:nth-child(3){ transition-delay:.16s; }
html.tra-anim #tra-page .tra-foi-step:nth-child(4){ transition-delay:.24s; }

/* ---------- Sport : escalier ascendant, rythme plus vif ---------- */
#tra-page .tra-sport-steps{ position:relative; max-width:640px; padding:6px 0 0 76px; }
#tra-page .tra-sport-line{ position:absolute; left:0; top:0; width:60px; height:100%; color:var(--sage); overflow:visible; }
#tra-page .tra-sport-line polyline{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; opacity:.55; stroke-dashoffset:0; }
/* Trace au defilement uniquement quand l'animation est reellement active
   (voir note ci-dessus sur .tra-foi-dot) : sinon le trait est visible en
   entier des l'affichage, jamais bloque a mi-parcours. */
html.tra-anim #tra-page .tra-sport-line polyline{ stroke-dasharray:1; stroke-dashoffset:1; }
html.tra-anim #tra-page .tra-sport-steps.tra-visible .tra-sport-line polyline{ transition:stroke-dashoffset 1.6s cubic-bezier(.22,1,.36,1) .1s; stroke-dashoffset:0; }
#tra-page .tra-sport-step{ max-width:480px; margin:0 0 clamp(44px,6.5vw,72px); }
#tra-page .tra-sport-step:last-child{ margin-bottom:0; }
#tra-page .tra-sport-step:nth-child(2){ margin-left:clamp(0px,6vw,48px); }
#tra-page .tra-sport-step:nth-child(3){ margin-left:clamp(0px,12vw,96px); }
#tra-page .tra-sport-step:nth-child(4){ margin-left:clamp(0px,18vw,144px); }
#tra-page .tra-sport-num{ display:block; margin:0 0 6px; font-family:"Fraunces",serif; font-style:italic; font-weight:500; font-size:clamp(30px,3.6vw,44px); line-height:1; color:var(--sage); opacity:.9; }
#tra-page .tra-sport-step h2{ margin:0 0 10px; font-size:clamp(23px,2.6vw,30px); }
#tra-page .tra-sport-step p{ max-width:48ch; margin:0; font-size:16.5px; line-height:1.75; color:rgba(218,241,222,.86); }
html.tra-anim #tra-page .tra-sport-step:nth-child(2){ transition-delay:.08s; }
html.tra-anim #tra-page .tra-sport-step:nth-child(3){ transition-delay:.16s; }
html.tra-anim #tra-page .tra-sport-step:nth-child(4){ transition-delay:.24s; }

/* ---------- Passerelle vers l'autre pilier (partagee Foi / Sport) ----------
   Volontairement discrete : un simple lien de continuite de lecture (pas un
   second CTA), nettement moins visible que le bouton "Decouvrir ma methode"
   qui suit. Alignement repris de celui du pilier courant (centre sur Foi,
   aligne a gauche sur Sport). */
#tra-page .tra-int-nextpillar{ max-width:640px; margin:clamp(48px,6vw,64px) auto 0; font-size:15.5px; }
#tra-page .tra-int--valeurs .tra-int-nextpillar{ text-align:center; }
#tra-page .tra-int--sport .tra-int-nextpillar{ text-align:left; margin-left:0; }
#tra-page .tra-int-nextpillar .tra-link{ font-size:15.5px; font-weight:600; color:var(--text-soft); }
#tra-page .tra-int-nextpillar .tra-link:hover,
#tra-page .tra-int-nextpillar .tra-link:focus-visible{ color:var(--mint); }
#tra-page .tra-int-nextpillar-arrow{ display:inline-block; transition:transform .3s cubic-bezier(.22,1,.36,1); }
#tra-page .tra-int-nextpillar .tra-link:hover .tra-int-nextpillar-arrow,
#tra-page .tra-int-nextpillar .tra-link:focus-visible .tra-int-nextpillar-arrow{ transform:translateX(4px); }

/* ---------- Passerelle vers SanctumDesign (partagee Foi / Sport) ----------
   C'est ici, et seulement ici, que se trouve le vrai CTA de fin de page
   (bouton plein, "Decouvrir ma methode") : nettement plus visible que le
   lien discret vers l'autre pilier juste au-dessus. */
#tra-page .tra-int-bridge{ max-width:560px; margin:clamp(56px,7vw,84px) auto 0; padding-top:clamp(36px,5vw,48px); border-top:1px solid rgba(218,241,222,.14); text-align:center; }
#tra-page .tra-int-bridge p{ margin:0; font-size:16px; line-height:1.75; color:var(--text-soft); }
#tra-page .tra-int-bridge-actions{ margin-top:26px; display:flex; justify-content:center; }

@media (max-width:760px){
	#tra-page .tra-foi-spine{ padding-top:4px; }
	#tra-page .tra-sport-steps{ padding-left:0; }
	#tra-page .tra-sport-line{ display:none; }
	#tra-page .tra-sport-step{ max-width:none; }
	#tra-page .tra-sport-step:nth-child(2),
	#tra-page .tra-sport-step:nth-child(3),
	#tra-page .tra-sport-step:nth-child(4){ margin-left:0; }
}

/* =====================================================================
   Bloc de contact (Mes valeurs / Le role du sport) : meme composant et
   memes regles que la section #contact de l'accueil de test.
   ===================================================================== */
#tra-page .tra-int-contact-wrap{ position:relative; z-index:1; max-width:1220px; margin:clamp(72px,9vw,120px) auto 0; padding:0 32px; }
#tra-page .tra-int-contact{ position:relative; scroll-margin-top:110px; }
#tra-page .tra-contact-head{ max-width:640px; margin:0 auto 48px; text-align:center; }
#tra-page .tra-contact-head h2{ margin-top:14px; font-size:clamp(30px,4vw,44px); }
#tra-page .tra-contact-form{
	position:relative; overflow:hidden;
	max-width:640px; margin:0 auto;
	background:linear-gradient(160deg,#23534759 0%,#0b2b267a 100%);
	backdrop-filter:blur(20px) saturate(1.3);
	-webkit-backdrop-filter:blur(20px) saturate(1.3);
	border:1px solid #8EB69B3d;
	border-radius:22px;
	padding:44px;
	box-shadow:0 1px 0 #DAF1DE24 inset, 0 30px 60px -28px #05131470;
}
#tra-page .tra-contact-form::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(135deg,#DAF1DE14 0%,transparent 42%); }
#tra-page .tra-field{ position:relative; z-index:1; margin-bottom:22px; }
#tra-page .tra-field label{ display:block; font-size:13.5px; font-weight:700; color:var(--mint); margin-bottom:8px; }
#tra-page .tra-field .tra-optional{ font-weight:500; color:var(--text-soft); text-transform:none; letter-spacing:0; }
#tra-page .tra-field input[type=text],#tra-page .tra-field input[type=email],#tra-page .tra-field select,#tra-page .tra-field textarea{ width:100%; padding:13px 16px; border:1.5px solid #8EB69B40; border-radius:8px; background:#051718e0; color:var(--mint); font-size:15.5px; font-family:inherit; transition:border-color .2s ease, box-shadow .2s ease; }
#tra-page .tra-field input::placeholder,#tra-page .tra-field textarea::placeholder{ color:#8EB69B99; }
#tra-page .tra-field input:focus,#tra-page .tra-field select:focus,#tra-page .tra-field textarea:focus{ outline:none; border-color:var(--sage); box-shadow:0 0 0 3px #8EB69B33; }
#tra-page .tra-field textarea{ min-height:130px; resize:vertical; }
#tra-page .tra-hp{ position:absolute; left:-9999px; top:-9999px; }
#tra-page .tra-form-note{ position:relative; z-index:1; margin-top:18px; font-size:13px; color:var(--text-soft); text-align:center; }
#tra-page .tra-form-note a{ color:var(--mint); text-decoration:underline; }
#tra-page .tra-banner{ max-width:640px; margin:0 auto 24px; padding:16px 20px; border-radius:10px; font-size:14.5px; font-weight:600; text-align:center; }
#tra-page .tra-banner-success{ background:#8EB69B22; color:#DAF1DE; border:1px solid #8EB69B55; }
#tra-page .tra-banner-error{ background:#c8663722; color:#f3c9b9; border:1px solid #c8663755; }
#tra-page .tra-contact-submit{ width:100%; justify-content:center; margin-top:6px; }
@media (max-width:760px){
	#tra-page .tra-int-contact-wrap{ padding:0 16px; }
	#tra-page .tra-contact-form{ padding:30px 22px; }
}

/* =====================================================================
   Erreur 404 : composition centree minimale.
   ===================================================================== */
#tra-page .tra-int--404{ min-height:0; }
#tra-page .tra-int--404 .tra-int-content{ display:flex; align-items:center; justify-content:center; min-height:46vh; text-align:center; }
#tra-page .tra-int--404 .themify_builder_content{ max-width:720px; margin:0 auto; }
#tra-page .tra-int--404 h1{ margin:0 0 16px; font-size:clamp(48px,9vw,110px); line-height:1; letter-spacing:-.025em; color:var(--mint); }
#tra-page .tra-int--404 h2{ margin:0 0 12px; font-family:"Inter",sans-serif; font-size:clamp(30px,3.6vw,42px); font-weight:500; line-height:1.5; letter-spacing:0; color:var(--mint); }
#tra-page .tra-int--404 .tb_text_wrap a:not(.tra-link),
#tra-page .tra-int--404 .module a:not(.tra-link){
	display:flex; width:fit-content; margin:0 auto; justify-content:center; align-items:center; gap:10px; min-height:56px; padding:16px 34px; border-radius:999px; font-weight:700; font-size:16px; color:var(--mint);
	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);
	transition:background .22s ease, border-color .22s ease, transform .22s ease;
}
#tra-page .tra-int--404 .module a:not(.tra-link):hover,#tra-page .tra-int--404 .module a:not(.tra-link):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); transform:translateY(-1px); }
/* Lien secondaire sobre (services), sous le bouton principal : reprend .tra-link tel quel, juste centre et espace ici. */
#tra-page .tra-int--404 .tb_text_wrap p:has(> .tra-link){ margin:22px 0 0; text-align:center; }
#tra-page .tra-int--404 .tra-link{ font-size:15px; }

/* Anneau de focus clavier coherent pour l'en-tete et le pied de page (le logo s'ouvre deja au focus). */
#tra-page .tra-header a:not(.tra-logo):focus-visible,#tra-page .tra-footer a:focus-visible,#tra-page .tra-nav-toggle:focus-visible{ outline:2px solid var(--sage); outline-offset:3px; border-radius:8px; }
#tra-page .tra-header a.tra-btn:focus-visible,#tra-page .tra-footer a.tra-btn:focus-visible{ border-radius:999px; }

/* Decor anime herite du site public (snippet global), invisible derriere le fond opaque : coupe pour ne rien animer inutilement. */
body.tra-internal .sd-wow-bg{ display:none!important; }

/* =====================================================================
   Variante "service" (pages de prestations dediees, brouillons du
   2026-09-26 - Creation de site internet / Referencement et visibilite
   Google) : presentation commerciale distincte des pages legales, sans
   toucher aux variantes existantes (selecteurs scopes sous
   .tra-int--service uniquement, classes .tra-eyebrow/.tra-btn deja
   partagees et inchangees). Reprend le meme langage visuel que la liste
   de prestations de l'accueil (numero en Fraunces italique + titre +
   texte), sans dupliquer son CSS scope a #tra-page directement dans le
   gabarit accueil.
   ===================================================================== */
#tra-page main.tra-int--service{ padding-top:172px; padding-bottom:134px; }
@media (max-width:760px){ #tra-page main.tra-int--service{ padding-top:166px; padding-bottom:106px; } }

#tra-page .sd-service-hero{ max-width:760px; margin:0 0 clamp(48px,6vw,80px); }
#tra-page .sd-service-hero h1{ margin:14px 0 20px; font-size:clamp(38px,5.6vw,64px); line-height:1.05; font-weight:600; letter-spacing:-.02em; color:var(--mint); }
#tra-page .sd-service-hero p{ font-size:clamp(17px,1.6vw,20px); line-height:1.7; color:var(--sage); max-width:640px; }

#tra-page .sd-service-list{ display:flex; flex-direction:column; margin:0 0 56px; }
#tra-page .sd-service-item{ position:relative; display:grid; grid-template-columns:56px 1fr; gap:20px; padding:28px 4px; border-top:1px solid #8EB69B26; }
#tra-page .sd-service-item:last-child{ border-bottom:1px solid #8EB69B26; }
#tra-page .sd-service-num{ font-family:"Fraunces",serif; font-size:26px; font-style:italic; color:var(--sage); line-height:1.2; }
#tra-page .sd-service-item h2{ font-size:21.5px; margin:0 0 8px; color:var(--mint); }
#tra-page .sd-service-item p{ margin:0; font-size:15.5px; line-height:1.65; color:var(--text-soft); max-width:620px; }
@media (max-width:600px){ #tra-page .sd-service-item{ grid-template-columns:36px 1fr; padding:22px 0; } }

#tra-page .sd-service-block{ max-width:720px; margin:0 0 48px; }
#tra-page .sd-service-block h2{ font-size:clamp(24px,2.6vw,30px); margin:0 0 16px; color:var(--mint); }
#tra-page .sd-service-block p{ font-size:16px; line-height:1.7; color:var(--text-soft); }

#tra-page .sd-service-cta{ margin-top:16px; }

/* ---------- Mouvement reduit ---------- */
@media (prefers-reduced-motion:reduce){ #tra-page *,#tra-page *::before,#tra-page *::after{ animation:none!important; transition:none!important; } html{ scroll-behavior:auto; } }