/* Pied de page TATEA « les deux logos sous le projecteur » (piste D, 2026-10-20) — commun à la landing (tatea-hero-3)
   et aux pages académie (tatea-ceo → build-academies). Mur clair ; le projecteur sur rail des pages académie éclaire
   les deux logos TATEA by H&C, puis l'appel à l'action et les colonnes. Ancienne version « la signature » : bak/tatea-foot.css.pre-footD */
.tf { --gap: clamp(20px, 3vw, 44px); --rig-x: 50%; --rig-y: 0px; --rig-w: 72px; --rig-tilt: 0deg; position: relative; z-index: 30; overflow: clip; isolation: isolate; background: var(--wall); color: var(--ink); }
.tf p { margin: 0; }

/* le projecteur sur rail (même dessin et même faisceau que .rig / .cone de tatea-ceo.css, que la landing ne charge pas) */
.tf .rig { position: absolute; inset: 0 0 auto; z-index: 0; height: 0; pointer-events: none; }
.tf .rig__rail { position: absolute; top: var(--rig-y); left: 0; right: 0; height: 8px; background: repeating-linear-gradient(90deg, transparent 0 119px, rgb(255 255 255 / .07) 119px 120px), linear-gradient(#2c3855, #121b30); box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 10px 22px rgb(0 0 0 / .25); }
.tf .rig__lamp { position: absolute; top: var(--rig-y); left: var(--rig-x); width: var(--rig-w); height: calc(var(--rig-w) * 1.2); translate: -50% 0; overflow: visible; fill: #1a2440; stroke: #46557e; stroke-width: 1.3; }
.tf .rig__stem { fill: none; stroke-width: 3; }
.tf .rig__head { transform-box: view-box; transform-origin: 50px 30px; transform: rotate(calc(-1 * var(--rig-tilt))); }
.tf .rig__body { stroke-linejoin: round; }
.tf .rig__rib { fill: none; stroke: #2f3c60; stroke-width: 1.4; }
.tf .rig__rim { fill: #232e4f; stroke: #5a6a96; stroke-width: 1.6; }
.tf .rig__lens { stroke: none; fill: #3a4562; }
.tf .rig__glow { stroke: none; fill: #fff; filter: drop-shadow(0 0 7px rgb(255 255 255 / .9)); opacity: 0; transition: opacity .9s ease .2s; }
.tf__light { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .9s ease .2s; }
.tf.is-in :is(.tf__light, .rig__glow), html:not(.js) .tf :is(.tf__light, .rig__glow) { opacity: 1; }
.tf .cone, .tf .cone::after { position: absolute; inset: 0; pointer-events: none; }
.tf .cone {
  --spread: 24deg; --throw: 760px;
  --lx: calc(var(--rig-x) + var(--rig-w) * .51 * sin(var(--rig-tilt)));
  --ly: calc(var(--rig-y) + var(--rig-w) * (.3 + .51 * cos(var(--rig-tilt))));
  --back: calc(var(--rig-w) * .17 / tan(var(--spread)));
  --cx: calc(var(--lx) - var(--back) * sin(var(--rig-tilt)));
  --cy: calc(var(--ly) - var(--back) * cos(var(--rig-tilt)));
  background: radial-gradient(circle var(--throw) at var(--cx) var(--cy), rgb(255 255 255 / .95), rgb(255 255 255 / .55) 35%, rgb(255 255 255 / .16) 70%, transparent);
  -webkit-mask: conic-gradient(from calc(180deg - var(--rig-tilt) - var(--spread) - 7deg) at var(--cx) var(--cy), transparent 0deg, #000 7deg, #000 calc(7deg + 2 * var(--spread)), transparent calc(14deg + 2 * var(--spread))), radial-gradient(circle at var(--cx) var(--cy), transparent calc(var(--back) - 1px), #000 calc(var(--back) + 2px));
  mask: conic-gradient(from calc(180deg - var(--rig-tilt) - var(--spread) - 7deg) at var(--cx) var(--cy), transparent 0deg, #000 7deg, #000 calc(7deg + 2 * var(--spread)), transparent calc(14deg + 2 * var(--spread))), radial-gradient(circle at var(--cx) var(--cy), transparent calc(var(--back) - 1px), #000 calc(var(--back) + 2px));
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.tf .cone::after {
  content: "";
  background: radial-gradient(circle calc(var(--throw) * .8) at var(--cx) var(--cy), rgb(255 255 255 / .7), transparent);
  -webkit-mask: conic-gradient(from calc(180deg - var(--rig-tilt) - var(--spread) * .45 - 5deg) at var(--cx) var(--cy), transparent 0deg, #000 5deg, #000 calc(5deg + .9 * var(--spread)), transparent calc(10deg + .9 * var(--spread))), radial-gradient(circle at var(--cx) var(--cy), transparent calc(var(--back) - 1px), #000 calc(var(--back) + 2px));
  mask: conic-gradient(from calc(180deg - var(--rig-tilt) - var(--spread) * .45 - 5deg) at var(--cx) var(--cy), transparent 0deg, #000 5deg, #000 calc(5deg + .9 * var(--spread)), transparent calc(10deg + .9 * var(--spread))), radial-gradient(circle at var(--cx) var(--cy), transparent calc(var(--back) - 1px), #000 calc(var(--back) + 2px));
  -webkit-mask-composite: source-in; mask-composite: intersect;
}

/* les deux logos, éclairés */
.tf__stage { position: relative; padding: calc(var(--rig-w) * 1.2 + clamp(34px, 5vw, 70px)) var(--edge) clamp(44px, 6vw, 84px); }
.tf__duo { --h: clamp(54px, calc((100vw - 2 * var(--edge) - 120px) / 7.9), 150px); display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2.4vw, 36px); transition: opacity .9s var(--ease) .15s, transform 1.1s var(--ease) .15s; }
.js .tf:not(.is-in) .tf__duo { opacity: .2; transform: translateY(18px); }
.tf__duo a { display: block; transition: transform .5s var(--ease); }
.tf__duo a:hover { transform: translateY(-4px); }
.tf__duo img { width: auto; height: var(--h); }
.tf__duo a:last-child img { height: calc(var(--h) * .86); }
.tf__by { font-size: calc(var(--h) * .3); font-style: italic; color: rgb(22 33 61 / .5); }

/* l'appel à l'action + les colonnes */
.tf__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px var(--gap); padding: clamp(40px, 5vw, 64px) var(--edge); border-top: 1px solid rgb(22 33 61 / .12); }
.tf__k { font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-strong); }
.tf__h { margin-top: 12px !important; font-size: clamp(28px, 2.8vw, 40px); font-weight: 400; line-height: 1.06; letter-spacing: -.01em; }
.tf__h em { font-style: normal; color: var(--gold); }
.tf__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.tf__btn { display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border-radius: 999px; background: rgb(22 33 61 / .08); color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none; transition: background-color .25s; }
.tf__btn:hover { background: rgb(22 33 61 / .14); }
.tf__btn--gold { background: var(--gold); }
.tf__btn--gold:hover { background: var(--gold-strong); }
.tf__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--gap); }
.tf__col { display: grid; align-content: start; justify-items: start; gap: 9px; }
.tf__col > p { margin-bottom: 6px !important; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgb(22 33 61 / .5); }
.tf__col > a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 15px; text-decoration: none; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--ease); }
.tf__col > a:hover { background-size: 100% 1px; }
.tf__col a i { padding: 2px 8px; border-radius: 999px; background: var(--gold); color: var(--ink); font-style: normal; font-size: 11px; font-weight: 600; }
.tf__soc { display: flex; gap: 8px; margin-top: 8px; }
.tf__soc a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgb(22 33 61 / .08); color: var(--ink); transition: background-color .25s; }
.tf__soc a:hover { background: var(--gold); }
.tf__soc svg { width: 17px; height: 17px; fill: currentColor; }

/* la ligne du bas */
.tf__bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding: 20px var(--edge); border-top: 1px solid rgb(22 33 61 / .12); font-size: 13px; color: rgb(22 33 61 / .62); }
.tf__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.tf__legal a, .tf__legal button.cc-open { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tf__legal a:hover, .tf__legal button.cc-open:hover { color: var(--ink); }

@media (max-width: 1100px) { .tf__row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .tf { --rig-w: 58px; }
  .tf__duo { --h: 64px; flex-direction: column; gap: 8px; }
  .tf__by { font-size: 17px; }
  .tf__grid { gap: 28px 16px; }
  .tf__col:last-child { grid-column: 1 / -1; }
  .tf__btn { min-height: 42px; padding: 0 16px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .tf * { transition: none !important; } }