/* ================================================================
   TI Conseil — interactions et animations.
   Tout est coupe si l'appareil demande moins d'animations.
   ================================================================ */
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
:focus-visible { outline: 3px solid rgba(201, 164, 92, 0.65); outline-offset: 2px; }
.btn { transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.98); }
.btn-gold:hover { box-shadow: 0 8px 20px rgba(201, 164, 92, 0.35); }
.btn.is-loading { pointer-events: none; opacity: 0.85; }
main, .app-content { animation: page-in 0.35s ease both; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }

/* Apparition au defilement (classe ajoutee par site.js : rien n'est cache sans JavaScript) */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease var(--reveal-delay, 0ms), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms), box-shadow 0.2s, border-color 0.2s; }
.reveal.in { opacity: 1; transform: none; }
a.ti-card.reveal.in:hover { transform: translateY(-3px); transition-delay: 0ms; }

/* Accroche de l'accueil et en-tetes de page */
.ti-hero .kicker, .ti-hero h1, .ti-hero .lead, .ti-hero .badge-aud, .ti-hero .btn { animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.ti-hero h1 { animation-delay: 0.08s; }
.ti-hero .lead { animation-delay: 0.18s; }
.ti-hero .badge-aud { animation-delay: 0.28s; }
.ti-hero .btn { animation-delay: 0.36s; }
.page-hero h1, .page-hero .lead, .page-hero .kicker { animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.page-hero .lead { animation-delay: 0.1s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* En-tete : se compacte et prend une ombre au defilement */
.ti-navbar { transition: padding 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease; }
.ti-navbar .navbar-brand img { transition: height 0.25s ease; }
.ti-navbar.scrolled { box-shadow: 0 6px 24px rgba(11, 31, 58, 0.08); background: rgba(255, 255, 255, 0.96); backdrop-filter: saturate(160%) blur(8px); padding-top: 0.2rem !important; padding-bottom: 0.2rem !important; }
.ti-navbar.scrolled .navbar-brand img { height: 56px; }
.ti-navbar .nav-link { position: relative; }
.ti-navbar .nav-link::after { content: ''; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.25rem; height: 2px; background: var(--ti-gold); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; }
.ti-navbar .nav-link:hover::after, .ti-navbar .nav-link.active::after { transform: scaleX(1); }

/* Selecteur de langue */
.lang-switch { display: inline-flex; border: 1px solid rgba(201, 164, 92, 0.55); border-radius: 999px; overflow: hidden; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; }
.lang-switch a { padding: 0.15rem 0.55rem; text-decoration: none; color: inherit; opacity: 0.75; transition: background-color 0.2s, opacity 0.2s; }
.lang-switch a:hover { opacity: 1; }
.lang-switch a.active { background: var(--ti-gold); color: var(--ti-navy); opacity: 1; }
.ti-navbar .lang-switch, .app-topbar .lang-switch, .auth-card .lang-switch { color: var(--ti-navy); }

/* Retour en haut */
.back-to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--ti-navy); color: #fff; box-shadow: 0 8px 20px rgba(11, 31, 58, 0.25); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.25s, transform 0.25s, background-color 0.2s; z-index: 1040; }
.back-to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.back-to-top:hover { background: var(--ti-gold); color: var(--ti-navy); }

/* Barre d'action fixe sur mobile (apparait apres l'accroche) */
.mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035; padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.97); box-shadow: 0 -6px 20px rgba(11, 31, 58, 0.1); display: flex; gap: 0.5rem; transform: translateY(110%); transition: transform 0.3s ease; }
body.past-hero .mobile-cta { transform: none; }
.mobile-cta .btn { flex: 1; }
@media (max-width: 991.98px) {
  body.has-mobile-cta { padding-bottom: 72px; }
  body.has-mobile-cta .back-to-top { bottom: 84px; }
}

/* Cartes et elements cliquables */
a.ti-card .ti-icon { transition: transform 0.3s ease, background-color 0.3s ease; }
a.ti-card:hover .ti-icon { transform: scale(1.08) rotate(-3deg); background: rgba(201, 164, 92, 0.25); }
.mission { transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.6s ease; }
.mission.in:hover, .mission:not(.reveal):hover { transform: translateX(4px); box-shadow: 0 8px 24px rgba(11, 31, 58, 0.08); }
tr[data-href] { cursor: pointer; }
tr[data-href]:hover > td { background: #fbf8f1; }
.list-group-item-action { transition: background-color 0.15s, padding-left 0.2s; }
.list-group-item-action:hover { padding-left: 1.25rem; }

/* Etapes de la reservation */
.booking-steps { list-style: none; display: flex; padding: 0; margin: 0 0 2rem; }
.booking-steps li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; position: relative; font-size: 0.82rem; color: var(--ti-muted); text-align: center; }
.booking-steps li::before { content: ''; position: absolute; top: 16px; left: -50%; right: 50%; height: 2px; background: var(--ti-line); z-index: 0; }
.booking-steps li:first-child::before { display: none; }
.booking-steps li.done::before, .booking-steps li.current::before { background: var(--ti-gold); }
.booking-steps .dot { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 2px solid var(--ti-line); font-weight: 600; position: relative; z-index: 1; transition: all 0.3s; }
.booking-steps li.done .dot { background: var(--ti-gold); border-color: var(--ti-gold); color: var(--ti-navy); }
.booking-steps li.current .dot { background: var(--ti-navy); border-color: var(--ti-navy); color: #fff; box-shadow: 0 0 0 5px rgba(11, 31, 58, 0.12); }
.booking-steps li.current { color: var(--ti-navy); font-weight: 600; }
@media (max-width: 575.98px) { .booking-steps .lbl { display: none; } .booking-steps li.current .lbl { display: block; } }

/* Choix du jour */
.day-picker { display: flex; gap: 0.6rem; overflow-x: auto; padding: 0.25rem 0.1rem 0.75rem; scroll-snap-type: x mandatory; }
.day-chip { scroll-snap-align: start; flex: 0 0 auto; width: 78px; border: 1px solid var(--ti-line); border-radius: 14px; background: #fff; padding: 0.6rem 0.4rem; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; cursor: pointer; transition: all 0.2s; }
.day-chip .dow { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ti-muted); }
.day-chip .dnum { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--ti-navy); line-height: 1.1; }
.day-chip .cnt { font-size: 0.7rem; background: var(--ti-soft); border-radius: 999px; padding: 0 0.45rem; color: var(--ti-gold-dark); font-weight: 600; }
.day-chip:hover { border-color: var(--ti-gold); transform: translateY(-2px); }
.day-chip.active { background: var(--ti-navy); border-color: var(--ti-navy); }
.day-chip.active .dow, .day-chip.active .dnum { color: #fff; }
.day-chip.active .cnt { background: var(--ti-gold); color: var(--ti-navy); }
.slot-btn { border-radius: 10px; font-weight: 600; }
.slot-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(11, 31, 58, 0.15); }
.fade-in { animation: rise 0.35s ease both; }
.success-pop { animation: pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
@keyframes pop { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }

/* Depot de fichiers */
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; text-align: center; padding: 1.4rem 1rem; border: 2px dashed #d9cfb9; border-radius: 14px; background: #fdfbf7; cursor: pointer; transition: all 0.2s; margin: 0; width: 100%; }
.dropzone:hover, .dropzone.dragging { border-color: var(--ti-gold); background: #faf4e6; }
.dropzone.dragging { transform: scale(1.01); }
.dropzone.has-files { border-style: solid; }
.dropzone .dz-files { margin-top: 0.4rem; text-align: left; }

/* Solidite du mot de passe */
.pw-meter { height: 5px; border-radius: 999px; background: var(--ti-line); overflow: hidden; margin-top: -0.6rem; }
.pw-meter span { display: block; height: 100%; width: 0; transition: width 0.3s ease, background-color 0.3s; background: #dc3545; }
.pw-meter[data-level='2'] span { background: #f0ad4e; }
.pw-meter[data-level='3'] span { background: #198754; }

/* Recherche FAQ */
.faq-search { position: relative; }
.faq-search i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--ti-muted); }
.faq-search input { padding-left: 2.6rem; border-radius: 999px; }

/* Espaces connectes : fond sombre derriere la barre laterale mobile */
.app-backdrop { display: none; }
@media (max-width: 991.98px) {
  body.sidebar-open .app-backdrop { display: block; position: fixed; inset: 0; background: rgba(11, 31, 58, 0.45); z-index: 1025; animation: page-in 0.2s ease; }
}
.kpi { transition: transform 0.2s, box-shadow 0.2s; }
a.kpi:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11, 31, 58, 0.08); }
form.is-dirty .save-bar { position: sticky; bottom: 0; background: #fff; padding: 0.75rem 0; border-top: 1px solid var(--ti-line); z-index: 5; }

/* Bootstrap : un espacement g-5 (3rem) depasse la marge du conteneur sur petit ecran
   et cree un defilement horizontal. On le ramene a g-4 sous 576 px. */
@media (max-width: 575.98px) {
  .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}
@media print {
  .back-to-top, .mobile-cta { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}