/*
 * Feuilles de composants, extraites de scripts qui les injectaient à
 * l'exécution (issue #170, suite de #99).
 *
 * Chaque section provient d'un `<style>` créé par JS. Ces injections étaient
 * refusées dès que `style-src` perdait `'unsafe-inline'` : le navigateur
 * supprimait la feuille sans erreur visible (mesuré en production après
 * 1.17.0). Elles sont désormais servies comme une feuille statique, mise en
 * cache par le navigateur et le CDN au lieu d'être recréée à chaque visite.
 *
 * Ordre = ordre d'injection historique. `@keyframes blink` existe deux fois
 * (home-modern puis city) : la dernière déclaration gagne, comme avant selon
 * l'ordre de chargement des scripts ; les deux pages ne se croisent pas.
 */

/* ───── newsletter.js ───── */
/* Validation inline email */
#newsletter-email { transition: border-color 200ms, box-shadow 200ms; }
#newsletter-email.is-valid { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,0.1); }
#newsletter-email.is-invalid { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.1); }

/* Bouton submit états */
#newsletter-form button[type="submit"] { transition: background-color 200ms, transform 200ms; position: relative; }
#newsletter-form button[type="submit"].is-loading { pointer-events: none; opacity: 0.85; }
#newsletter-form button[type="submit"].is-success { background-color: #10b981; border-color: #10b981; }
#newsletter-form button[type="submit"].is-error { animation: newsletter-shake 400ms; }

/* Spinner */
.newsletter-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: newsletter-spin 0.6s linear infinite;
  vertical-align: middle;
}
@keyframes newsletter-spin { to { transform: rotate(360deg); } }

/* Shake on error */
@keyframes newsletter-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* Toast succès */
.newsletter-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary-600, #4f46e5);
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.2);
  z-index: 1300;
  font-size: 14px;
  display: flex; align-items: center; gap: 12px;
  animation: newsletter-toast-in 300ms ease-out;
}
@keyframes newsletter-toast-in {
  from { transform: translate(-50%, 100%); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}
.newsletter-toast__close {
  background: transparent; border: none; color: inherit;
  cursor: pointer; font-size: 18px; line-height: 1;
  padding: 0; opacity: 0.8;
}
.newsletter-toast__close:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  #newsletter-form button[type="submit"].is-error { animation: none; }
  .newsletter-spinner { animation: none; }
  .newsletter-toast { animation: none; }
}

/* ───── surprise.js ───── */
.surprise-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: surprise-spin 0.6s linear infinite;
}
@keyframes surprise-spin {
  to { transform: rotate(360deg); }
}
.nav-random-link[data-loading="true"] {
  pointer-events: none;
  opacity: 0.7;
}

/* ───── main.js ───── */
*:focus {
            outline: 2px solid #2563eb !important;
            outline-offset: 2px !important;
        }
        
        *:focus:not(:focus-visible) {
            outline: none !important;
        }
        
        *:focus-visible {
            outline: 2px solid #2563eb !important;
            outline-offset: 2px !important;
        }

/* ───── toc-progress.js ───── */
/* Barre de progression */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--color-primary-500, #6366f1);
  z-index: var(--z-header, 1000);
  transition: width 100ms linear;
}

/* TOC sticky (desktop) — position:fixed non-intrusive pour ne pas
   casser le layout des sections pleine largeur (hero, bannières, etc.) */
.toc-aside {
  position: fixed;
  top: 100px;  /* sous le header sticky */
  right: 16px;
  width: 220px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding: var(--space-4, 1rem);
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-md, 8px);
  font-size: var(--font-size-sm, 14px);
  box-shadow: var(--shadow-sm, 0 1px 3px 0 rgba(0, 0, 0, 0.1));
  z-index: var(--z-sticky, 200);
}

.toc-aside__title {
  font-size: var(--font-size-xs, 12px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-fg-muted, #6b7280);
  margin-bottom: var(--space-2, 8px);
  font-weight: var(--font-weight-semibold, 600);
}

.toc-aside__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc-aside__list li {
  margin-bottom: var(--space-1, 4px);
}

.toc-aside__list a {
  display: block;
  padding: var(--space-1, 4px) var(--space-2, 8px);
  color: var(--color-fg-muted, #6b7280);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color var(--transition-fast, 150ms),
              border-color var(--transition-fast, 150ms),
              background-color var(--transition-fast, 150ms);
  border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
}

.toc-aside__list a:hover {
  color: var(--color-primary-600, #4f46e5);
  background: var(--color-bg-muted, #f9fafb);
}

.toc-aside__list a.is-active {
  color: var(--color-primary-600, #4f46e5);
  border-left-color: var(--color-primary-500, #6366f1);
  font-weight: var(--font-weight-medium, 500);
}

/* Masquer le TOC sur mobile et tablette */
@media (max-width: 1023px) {
  .toc-aside { display: none; }
}

/* ───── skeleton.js ───── */
/* Skeleton loader */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-muted, #f3f4f6) 0%,
    var(--color-border, #e5e7eb) 50%,
    var(--color-bg-muted, #f3f4f6) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm, 4px);
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Lignes de skeleton pour suggestions recherche */
.search-skeleton {
  padding: var(--space-3, 12px) var(--space-4, 16px);
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
}

.search-skeleton__avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full, 50%);
  flex-shrink: 0;
}

.search-skeleton__lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}

.search-skeleton__line {
  height: 10px;
  width: 100%;
}

.search-skeleton__line--short {
  width: 60%;
}

/* Respect de prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
    background: var(--color-bg-muted, #f3f4f6);
  }
}

/* ───── micro-animations.js ───── */
/* 1. Reveal staggered au scroll */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}
.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* 2. Hover lift sur les cartes */
.hover-lift {
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.1));
}

/* 3. Ripple effect sur les CTA */
.ripple { position: relative; overflow: hidden; }
.ripple__wave {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: ripple-anim 600ms ease-out;
  pointer-events: none;
}
@keyframes ripple-anim {
  to { transform: scale(2.5); opacity: 0; }
}

/* 4. Smooth scroll natif */
html { scroll-behavior: smooth; }

/* Désactivé si prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hover-lift:hover { transform: none !important; }
  .ripple__wave { display: none !important; }
  html { scroll-behavior: auto !important; }
}

/* ───── discussion-invite.js ───── */
.kdi-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(3px);z-index:var(--z-modal,1200);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .25s}.kdi-overlay.kdi-show{opacity:1}.kdi-box{background:#fff;border-radius:20px;max-width:440px;width:100%;padding:30px 26px 26px;position:relative;text-align:center;transform:translateY(14px);transition:transform .25s;box-shadow:0 24px 60px rgba(15,23,42,.3)}.kdi-show .kdi-box{transform:translateY(0)}.kdi-close{position:absolute;top:10px;right:14px;border:0;background:none;font-size:1.5rem;line-height:1;color:#94a3b8;cursor:pointer;padding:6px}.kdi-badge{display:inline-block;background:#eef2ff;color:#4338ca;border-radius:50px;padding:5px 14px;font-size:.8rem;font-weight:600;margin-bottom:12px}.kdi-box h3{margin:0 0 8px;color:#1e293b;font-size:1.3rem}.kdi-box p{margin:0 0 18px;color:#64748b;font-size:.95rem}.kdi-btns{display:flex;flex-direction:column;gap:10px}.kdi-btn{display:block;width:100%;padding:13px 18px;border-radius:12px;font-weight:700;font-size:.98rem;cursor:pointer;text-decoration:none;border:0}.kdi-btn-primary{background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff}.kdi-btn-secondary{background:#f1f5f9;color:#334155;border:1px solid #e2e8f0}.kdi-input{width:100%;padding:12px 14px;border:1px solid #cbd5e1;border-radius:12px;font-size:.95rem;margin-bottom:10px;box-sizing:border-box}.kdi-input:focus{outline:2px solid #6366f1;border-color:#6366f1}.kdi-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:14px}.kdi-chip{background:#eef2ff;color:#4338ca;border:1px solid #c7d2fe;border-radius:50px;padding:5px 12px;font-size:.8rem;cursor:pointer}.kdi-later{margin-top:12px;background:none;border:0;color:#94a3b8;font-size:.85rem;cursor:pointer;text-decoration:underline}@media (max-width:480px){.kdi-overlay{align-items:flex-end;padding:0}.kdi-box{border-radius:20px 20px 0 0;max-width:none}}

/* ───── home-modern.js ───── */
.suggestion-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.suggestion-item:hover {
    background: rgba(79, 172, 254, 0.1);
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(79, 172, 254, 0.1);
    color: #4facfe;
    border-radius: 50%;
    flex-shrink: 0;
}

.suggestion-content {
    flex: 1;
}

.suggestion-name {
    font-weight: 600;
    color: #1a1c20;
    margin-bottom: 4px;
}

.suggestion-path {
    font-size: 0.9rem;
    color: #636e72;
}

@keyframes blink {
    0%, 50% { border-color: #4facfe; }
    51%, 100% { border-color: transparent; }
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    animation: ripple-animation 0.6s ease-out;
    pointer-events: none;
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

.cta-primary, .cta-secondary, .search-button-modern {
    position: relative;
    overflow: hidden;
}

/* ───── home-spectacular.js ───── */
.suggestion-item-spectacular {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(79, 172, 254, 0.1);
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(10px);
}

.suggestion-item-spectacular:hover {
    background: rgba(79, 172, 254, 0.1);
    transform: translateX(10px);
    border-left: 3px solid #4facfe;
}

.suggestion-item-spectacular:last-child {
    border-bottom: none;
}

.suggestion-icon-spectacular {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(79, 172, 254, 0.1);
    color: #4facfe;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(79, 172, 254, 0.2);
}

.suggestion-content-spectacular {
    flex: 1;
}

.suggestion-name-spectacular {
    font-weight: 700;
    color: white;
    margin-bottom: 6px;
    font-size: 1.1rem;
}

.suggestion-path-spectacular {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

@keyframes blink {
    0%, 50% { border-color: #4facfe; }
    51%, 100% { border-color: transparent; }
}

.ripple-spectacular {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: ripple-animation-spectacular 0.6s ease-out;
    pointer-events: none;
}

@keyframes ripple-animation-spectacular {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

.cta-primary, .cta-secondary, .search-button-spectacular {
    position: relative;
    overflow: hidden;
}

#search-suggestions-modern {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background: rgba(10, 14, 39, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(79, 172, 254, 0.2);
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

/* ───── city.js ───── */
@keyframes voice-slide {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes blink {
    0%, 50% { border-color: var(--quartier-secondary); }
    51%, 100% { border-color: transparent; }
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

.quartier-story, .experience-card {
    transition: all 0.4s ease;
}

.story-location h3 {
    transition: color 0.3s ease;
}

.experience-icon {
    transition: transform 0.3s ease;
}