/* Maquette v4, styles partagés par toutes les pages. Tailwind (CDN) porte le reste.
   Un seul thème, clair. Base épurée (fond blanc, beaucoup d’air), accents francs :
   titres condensés très gras, bordures noires, ombres pleines décalées, couleurs vives par levier. */
:root {
  --ink: #111111;
  --marker: #ffd400;
  --marker-solid: #ffd400;
  --pop-yellow: #ffd400;
  --pop-orange: #ff8a4c;
  --pop-green: #19c37d;
  --pop-blue: #7aa5ff;
  --pop-pink: #ff8cc0;
  --pop-violet: #b69cff;
  --display: "Archivo", "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
}

body { background: #fff; color: var(--ink); }

/* Titres : grotesque condensée très grasse, capitales pour le titre de page */
h1[class*="text-["], h1.text-3xl, h2.text-3xl {
  font-family: var(--display);
  font-weight: 800 !important;
  font-stretch: 72%;
  letter-spacing: -0.005em !important;
  line-height: 0.98 !important;
}
h1[class*="text-["] { text-transform: uppercase; }
h1.text-3xl { text-transform: uppercase; }
h2.text-3xl { font-stretch: 78%; }

.marker {
  background: var(--marker);
  padding: 0 .12em;
  margin: 0 -.02em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
h1 .marker, h2 .marker { border-radius: .08em; }

/* Boutons principaux : jaune, bordure noire, ombre pleine */
.btn-pop {
  background: var(--pop-yellow) !important;
  color: var(--ink) !important;
  border: 2px solid var(--ink) !important;
  box-shadow: 3px 3px 0 var(--ink);
  font-weight: 700 !important;
  transition: transform .12s ease, box-shadow .12s ease !important;
}
.btn-pop:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn-pop:active { transform: translate(2px, 2px) !important; box-shadow: 1px 1px 0 var(--ink); }

/* Cartes mises en avant */
.card-pop {
  border: 2px solid var(--ink) !important;
  border-radius: 14px !important;
  box-shadow: 6px 6px 0 var(--pop, var(--ink));
}

/* Grand champ de l’accueil, façon invite */
.field-pop {
  border: 2px solid var(--ink) !important;
  border-radius: 16px !important;
  box-shadow: 6px 6px 0 var(--ink) !important;
}
.field-pop:focus-within { box-shadow: 6px 6px 0 var(--pop-yellow), 0 0 0 0 transparent !important; --tw-ring-shadow: 0 0 #0000 !important; }

.video-pop {
  border: 2px solid var(--ink) !important;
  border-radius: 18px !important;
  box-shadow: 10px 10px 0 var(--pop-blue) !important;
}

/* Une couleur par levier */
#mesurer { --pop: var(--pop-blue); }
#ecrire { --pop: var(--pop-orange); }
#reparer { --pop: var(--pop-green); }
#entretenir { --pop: var(--pop-pink); }
#faire-parler { --pop: var(--pop-violet); }
#garder-la-main { --pop: var(--pop-yellow); }
.toc a[href="#mesurer"] .toc-bar { background: var(--pop-blue); }
.toc a[href="#ecrire"] .toc-bar { background: var(--pop-orange); }
.toc a[href="#reparer"] .toc-bar { background: var(--pop-green); }
.toc a[href="#entretenir"] .toc-bar { background: var(--pop-pink); }
.toc a[href="#faire-parler"] .toc-bar { background: var(--pop-violet); }
.toc a[href="#garder-la-main"] .toc-bar { background: var(--pop-yellow); }
.toc .toc-bar { width: .5rem !important; border-radius: 3px !important; }
.lever-rule { border-top: 3px solid var(--pop, var(--ink)) !important; }

details summary::-webkit-details-marker { display: none; }
details[open] .faq-icon { transform: rotate(45deg); }

@media (prefers-reduced-motion: no-preference) {
  .hero-in > * { animation: rise .9s cubic-bezier(.16,1,.3,1) both; }
  .hero-in > *:nth-child(2) { animation-delay: .08s; }
  .hero-in > *:nth-child(3) { animation-delay: .16s; }
  .hero-in > *:nth-child(4) { animation-delay: .24s; }
  .hero-in > *:nth-child(5) { animation-delay: .32s; }
  .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
  .reveal.is-in { opacity: 1; transform: none; }
  .msg-in { animation: rise .45s cubic-bezier(.16,1,.3,1) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  .typing span { animation: blink 1.2s infinite both; }
  .typing span:nth-child(2) { animation-delay: .2s; }
  .typing span:nth-child(3) { animation-delay: .4s; }
  @keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
}

/* Chat */
.thread-scroll { scrollbar-gutter: stable; }
.composer textarea { field-sizing: content; max-height: 12rem; }

/* Tuiles de couleur pleine (packs) */
.tile-pop {
  background: var(--pop) !important;
  border: 2px solid var(--ink);
  border-radius: 12px !important;
  color: var(--ink);
}
.tile-pop p { color: var(--ink) !important; }

/* Grands chiffres */
span.text-5xl, p.text-5xl, .text-5xl.font-semibold {
  font-family: var(--display);
  font-weight: 800 !important;
  font-stretch: 75%;
}

h1[class*="text-["], h1.text-3xl, h2.text-3xl { word-spacing: .06em; }
.field-pop .btn-pop { box-shadow: none; }
.field-pop .btn-pop:hover { transform: none; box-shadow: none; filter: brightness(.96); }
.composer.field-pop { box-shadow: 4px 4px 0 var(--ink) !important; }