/* =========================================================
   TICKET-DIRECT : styles communs (navbar + footer)
   Emplacement : public/css/td-layout.css
   Tout est préfixé "td-" pour ne rien casser dans tes pages.
   ========================================================= */

:root{
  --td-navy:#0a1122;
  --td-navy-2:#121c36;
  --td-navy-3:#1b2850;
  --td-ink:#0f172a;
  --td-orange:#ff6a13;
  --td-orange-d:#e25500;
  --td-cream:#fff6ec;
  --td-sand:#ffe5cc;
  --td-signal:#35e0c2;
  --td-muted:#5b6478;
  --td-line:rgba(15,23,42,.12);
  --td-display:'Bricolage Grotesque','Inter',system-ui,sans-serif;
  --td-nav-h:72px;
}

.td-nav,.td-nav *,.td-nav *::before,.td-nav *::after,
.td-contact,.td-contact *,.td-contact *::before,.td-contact *::after,
.td-footer,.td-footer *,.td-footer *::before,.td-footer *::after{box-sizing:border-box}

.td-nav ul,.td-footer ul{margin:0;padding:0;list-style:none}
.td-nav a,.td-footer a,.td-contact a{text-decoration:none}
.td-nav :focus-visible,.td-footer :focus-visible,.td-contact :focus-visible{outline:3px solid var(--td-signal);outline-offset:3px;border-radius:10px}

/* =========================================================
   NAVBAR
   ========================================================= */
.td-nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  font-family:'Inter',system-ui,sans-serif;color:var(--td-ink);
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid transparent;
  transition:box-shadow .3s ease,border-color .3s ease,background-color .3s ease;
}
.td-nav.is-scrolled{
  background:rgba(255,255,255,.96);
  border-color:var(--td-line);
  box-shadow:0 12px 30px -20px rgba(10,17,34,.45);
}
.td-nav__bar{
  max-width:1240px;margin:0 auto;height:var(--td-nav-h);padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}

/* Marque */
.td-brand{display:inline-flex;align-items:center;gap:12px;color:var(--td-ink)}
.td-brand__icon{
  position:relative;display:grid;place-items:center;flex:none;
  width:40px;height:40px;border-radius:13px;color:#fff;
  background:linear-gradient(145deg,var(--td-orange),var(--td-orange-d));
  box-shadow:0 8px 20px -8px rgba(255,106,19,.9);
  transition:transform .3s ease;
}
.td-brand:hover .td-brand__icon{transform:rotate(-6deg) scale(1.05)}
.td-brand__icon svg{width:22px;height:22px;overflow:visible}
.td-brand__icon .arc{opacity:.25;animation:td-arc 2.4s ease-in-out infinite}
.td-brand__icon .arc:nth-child(2){animation-delay:.2s}
.td-brand__icon .arc:nth-child(3){animation-delay:.4s}
@keyframes td-arc{0%,100%{opacity:.25}40%,60%{opacity:1}}
.td-brand__name{
  font-family:var(--td-display);font-weight:800;font-size:1.4rem;letter-spacing:-.03em;line-height:1;
}
.td-brand__name span{color:var(--td-orange);margin-left:2px}

/* Liens */
.td-nav__links{display:none;align-items:center;gap:4px}
.td-nav__links a{
  display:block;padding:10px 16px;border-radius:999px;
  font-weight:600;font-size:.95rem;color:#38405a;
  transition:background-color .2s ease,color .2s ease;
}
.td-nav__links a:hover{background:var(--td-sand);color:var(--td-orange-d)}

/* Bouton connexion */
.td-nav__cta{
  display:none;align-items:center;gap:10px;padding:11px 20px;border-radius:999px;
  background:var(--td-orange);color:#fff;font-weight:700;font-size:.95rem;
  box-shadow:0 10px 24px -10px rgba(255,106,19,.85);
  transition:transform .2s ease,background-color .2s ease;
}
.td-nav__cta:hover{background:var(--td-orange-d);transform:translateY(-2px);color:#fff}
.td-nav__cta svg{width:19px;height:19px}

/* Burger */
.td-burger{
  display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:14px;
  background:var(--td-cream);color:var(--td-ink);cursor:pointer;
}
.td-burger span{display:block;width:20px;height:2px;border-radius:2px;background:currentColor;transition:transform .3s ease,opacity .2s ease}
.td-burger span+span{margin-top:5px}
.td-nav[data-open="true"] .td-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.td-nav[data-open="true"] .td-burger span:nth-child(2){opacity:0}
.td-nav[data-open="true"] .td-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Panneau mobile */
.td-menu{
  position:absolute;left:0;right:0;top:100%;
  padding:8px 24px 28px;background:#fff;border-bottom:1px solid var(--td-line);
  box-shadow:0 30px 40px -24px rgba(10,17,34,.4);
  visibility:hidden;opacity:0;transform:translateY(-10px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s;
}
.td-nav[data-open="true"] .td-menu{visibility:visible;opacity:1;transform:none}
.td-menu a.td-menu__link{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 4px;border-bottom:1px solid var(--td-line);
  font-weight:600;font-size:1.1rem;color:var(--td-ink);
}
.td-menu a.td-menu__link::after{content:"›";font-size:1.5rem;color:var(--td-orange)}
.td-menu .td-nav__cta{display:flex;justify-content:center;margin-top:20px;padding:15px 20px}

@media (min-width:920px){
  .td-nav__links{display:flex}
  .td-nav__cta{display:inline-flex}
  .td-burger,.td-menu{display:none}
}

/* =========================================================
   CONTACT (section id="contact")
   ========================================================= */
.td-contact{
  position:relative;overflow:hidden;padding:104px 24px;
  background:var(--td-cream);color:var(--td-ink);font-family:'Inter',system-ui,sans-serif;
}
.td-contact::before{
  content:"";position:absolute;right:-180px;top:-180px;width:520px;height:520px;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,transparent 0 44px,rgba(255,106,19,.16) 45px 47px);
  pointer-events:none;
}
.td-contact__wrap{position:relative;max-width:1160px;margin:0 auto}
.td-contact__head{max-width:560px}
.td-contact h2{
  margin:0;font-family:var(--td-display);font-weight:800;letter-spacing:-.03em;line-height:1.04;
  font-size:clamp(2rem,4vw,3.1rem);
}
.td-contact__head p{margin:16px 0 0;font-size:1.1rem;line-height:1.65;color:var(--td-muted)}
.td-contact__grid{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.td-ccard{
  display:flex;flex-direction:column;gap:6px;padding:30px 28px;border-radius:24px;
  background:#fff;color:var(--td-ink);box-shadow:inset 0 0 0 1px var(--td-line);
  transition:transform .25s ease,box-shadow .25s ease;
}
a.td-ccard:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 2px var(--td-orange)}
.td-ccard__icon{
  display:grid;place-items:center;width:48px;height:48px;margin-bottom:16px;border-radius:15px;
  background:var(--td-sand);color:var(--td-orange-d);
}
.td-ccard__icon svg{width:24px;height:24px}
.td-ccard small{font-size:.9rem;font-weight:600;color:var(--td-muted)}
.td-ccard strong{font-size:1.15rem;line-height:1.4;font-weight:700;word-break:break-word}

/* =========================================================
   FOOTER
   ========================================================= */
.td-footer{
  position:relative;overflow:hidden;color:#c6cee3;font-family:'Inter',system-ui,sans-serif;
  background:radial-gradient(700px 360px at 100% 100%,rgba(255,106,19,.22),transparent 62%),var(--td-navy);
}
.td-footer::before{
  content:"";display:block;height:4px;
  background:linear-gradient(90deg,var(--td-orange),#ffb066,var(--td-signal));
}
.td-footer__wrap{max-width:1160px;margin:0 auto;padding:64px 24px 40px}
.td-footer__top{display:grid;grid-template-columns:1.3fr .8fr .8fr;gap:48px}
.td-footer .td-brand{color:#fff}
.td-footer__about{margin:20px 0 0;max-width:40ch;line-height:1.65;color:#9fb0d6}
.td-footer h3{
  margin:0 0 18px;font-family:var(--td-display);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;color:#fff;
}
.td-footer__links{display:grid;gap:12px}
.td-footer__links a{color:#c6cee3;transition:color .2s ease,transform .2s ease;display:inline-block}
.td-footer__links a:hover{color:var(--td-orange);transform:translateX(4px)}
.td-footer__btn{
  display:inline-flex;align-items:center;justify-content:center;margin-top:20px;padding:13px 24px;border-radius:999px;
  background:var(--td-orange);color:#fff;font-weight:700;
  transition:transform .2s ease,background-color .2s ease;
}
.td-footer__btn:hover{background:var(--td-orange-d);transform:translateY(-2px);color:#fff}
.td-footer__bottom{
  margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:.9rem;color:#8f9bbb;
}
.td-footer__bottom p{margin:0}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .td-contact{padding:76px 20px}
  .td-contact__grid{grid-template-columns:1fr}
  .td-footer__top{grid-template-columns:1fr 1fr;gap:36px}
  .td-footer__top > :first-child{grid-column:1/-1}
}
@media (max-width:520px){
  .td-nav__bar{padding:0 16px}
  .td-brand__name{font-size:1.25rem}
  .td-footer__top{grid-template-columns:1fr}
  .td-footer__bottom{flex-direction:column;align-items:flex-start}
}

/* Respect de "réduire les animations" */
@media (prefers-reduced-motion:reduce){
  .td-nav *,.td-nav,.td-contact *,.td-footer *{animation:none!important;transition:none!important}
  .td-brand__icon .arc{opacity:1}
}




/* === NAVBAR : AGRANDISSEMENT PROGRESSIF AU SCROLL === */

#td-nav {
    --scroll-progress: 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 2px 10px rgba(20, 30, 45, 0.04);
    overflow: visible;
}

/* Barre orange qui montre la progression */
#td-nav::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--scroll-progress) * 100%);
    height: 4px;
    background: #ff6a13;
    z-index: 1001;
    pointer-events: none;
}

/* Hauteur évolutive */
#td-nav .td-nav__bar {
    box-sizing: border-box;
    min-height: calc(64px + var(--scroll-progress) * 36px);
    padding-top: calc(var(--scroll-progress) * 10px);
    padding-bottom: calc(var(--scroll-progress) * 10px);
}

/* Logo plus grand au fur et à mesure */
#td-nav .td-brand__icon {
    transform: scale(calc(1 + var(--scroll-progress) * 0.25));
    transform-origin: center;
}

#td-nav .td-brand__name {
    font-size: calc(1rem + var(--scroll-progress) * 0.2rem);
}

/* Ombre et fond légèrement plus marqués */
#td-nav.is-scrolled {
    box-shadow: 0 8px 28px rgba(20, 30, 45, 0.12);
}