/* =========================================================
   AMILI — COMPONENTS
   Bibliothèque de composants réutilisables (HTML/CSS)
   Importer après tokens.css
   ========================================================= */

/* ============ WORDMARK ============ */
/* Usage: <span class="amili-wordmark">Am<span class="amili-i amili-i--hot">ı</span>l<span class="amili-i amili-i--cold">ı</span></span>
   Le caractère ı (U+0131) est le i sans point. La pastille est dessinée en pseudo-élément. */
.amili-wordmark {
  font-family: var(--font);
  font-weight: var(--w-display);
  font-style: normal;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  color: var(--ink);
}
.amili-wordmark__top {
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
}
.amili-wordmark__sub {
  font-size: 0.265em;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-indent: 0.32em;
  margin-top: 0.18em;
  opacity: 0.82;
  line-height: 1;
}
.amili-wordmark .amili-i {
  position: relative;
  display: inline-block;
  font-style: normal;
}
.amili-wordmark .amili-i::before {
  content: '';
  position: absolute;
  top: 0.04em;
  left: 50%;
  transform: translateX(-50%);
  width: 0.18em;
  height: 0.18em;
  border-radius: 50%;
  background: currentColor;
}
.amili-wordmark .amili-i--hot::before  { background: var(--chaud); }
.amili-wordmark .amili-i--cold::before { background: var(--froid); }
/* Variante sur fond sombre */
.on-night .amili-wordmark { color: var(--papier); }

/* ============ TEXT UTILS ============ */
.eyebrow {
  font-weight: var(--w-metiers);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: var(--t-12);
  color: var(--metier);
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: currentColor;
  display: block;
}
.eyebrow--ink   { color: var(--ink); }
.eyebrow--paper { color: var(--papier); }
.eyebrow--mute  { color: var(--text-muted); }

.metier-tag {
  font-weight: var(--w-metiers);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: var(--t-14);
}

.service-tag {
  font-weight: var(--w-services);
  font-style: italic;
  color: var(--metier);
}

.display {
  font-weight: var(--w-display);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  font-size: clamp(56px, 11vw, 200px);
  color: var(--ink);
  margin: 0;
}
.display em {
  font-style: italic;
  font-weight: var(--w-services);
  color: var(--metier);
}
.display--on-night { color: var(--papier); }

.headline {
  font-weight: var(--w-display);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  font-size: clamp(36px, 6vw, 88px);
  color: var(--ink);
  margin: 0;
}
.headline em {
  font-style: italic;
  font-weight: var(--w-services);
  color: var(--metier);
}

.lede {
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: var(--w-body);
  line-height: 1.45;
  color: var(--text-muted);
  max-width: 56ch;
}

/* ============ PASTILLES MITIGEUR ============ */
.dot { display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%; vertical-align: middle; }
.dot--hot  { background: var(--chaud); }
.dot--cold { background: var(--froid); }
.dot-pair { display: inline-flex; gap: 0.3em; align-items: center; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  height: 56px;
  padding: 0 var(--s-7);
  border-radius: var(--r-pill);
  font-weight: var(--w-metiers);
  font-size: var(--t-14);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: transform var(--d-fast) var(--ease), background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--ink    { background: var(--ink);    color: var(--papier); }
.btn--ink:hover { background: #000; }
.btn--metier { background: var(--metier); color: var(--papier); }
.btn--metier:hover { background: #d65a1f; }
.btn--ghost  { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }

.btn .arrow {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 4px;
  transition: transform var(--d-fast) var(--ease);
}
.btn:hover .arrow { transform: rotate(45deg) translate(2px, -2px); }

/* ============ TEL BUTTON (signature pill noir) ============ */
.btn-tel {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  height: 48px;
  padding: 0 var(--s-6);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--papier);
  font-weight: var(--w-metiers);
  font-size: var(--t-14);
  letter-spacing: 0.04em;
}
.btn-tel:hover { background: #000; }

/* ============ NAV LINK ============ */
.nav-link {
  font-weight: var(--w-services);
  font-size: var(--t-16);
  color: var(--ink);
  position: relative;
  padding: 6px 0;
  transition: color var(--d-fast) var(--ease);
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--metier);
  transition: right var(--d-mid) var(--ease);
}
.nav-link:hover::after,
.nav-link.is-active::after { right: 0; }
.on-night .nav-link { color: var(--papier); }

/* ============ CARD ============ */
.card {
  background: var(--papier);
  border-radius: var(--r-xl);
  padding: var(--s-8);
  border: 1px solid var(--border);
  transition: transform var(--d-mid) var(--ease), box-shadow var(--d-mid) var(--ease);
}

/* ============ STAT ============ */
.stat-num {
  font-weight: var(--w-display);
  font-size: clamp(56px, 8vw, 120px);
  line-height: 0.9;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.stat-num em { font-style: italic; font-weight: var(--w-services); color: var(--metier); }
.stat-label {
  font-weight: var(--w-metiers);
  font-size: var(--t-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-muted);
  margin-top: var(--s-5);
}

/* ============ FRAME / SECTION ============ */
.frame {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section {
  padding-block: clamp(80px, 12vw, 200px);
}
.section--tight { padding-block: clamp(48px, 8vw, 120px); }
.section--ink     { background: var(--ink);    color: var(--papier);    }
.section--night   { background: var(--nuit);   color: var(--text-on-night); }
.section--paper   { background: var(--papier); }
.section--alt     { background: var(--papier-2); }
.section--deep    { background: var(--papier-3); }
.section--ink .lede,
.section--night .lede { color: var(--text-on-night-dim); }

/* ============ DIVIDER NUMBER (— 01 / Accueil) ============ */
.section-marker {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  font-weight: var(--w-metiers);
  font-size: var(--t-12);
  letter-spacing: var(--tracking-caps);
  color: var(--text-muted);
  text-transform: uppercase;
}
.section-marker::before {
  content: '';
  width: 32px;
  height: 1.5px;
  background: currentColor;
}

/* ============ MITIGEUR ICON ============ */
/* Petit composant signature : deux pastilles chaud/froid alignées */
.mitigeur {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.mitigeur i {
  width: 10px; height: 10px; border-radius: 50%; display: block;
}
.mitigeur .hot  { background: var(--chaud); }
.mitigeur .cold { background: var(--froid); }
.mitigeur--lg i { width: 16px; height: 16px; }

/* ============ MARQUEE / TICKER ============ */
.ticker {
  overflow: hidden;
  border-block: 1px solid var(--border);
  background: var(--papier);
  padding: var(--s-7) 0;
}
.ticker__track {
  display: flex;
  gap: var(--s-9);
  width: max-content;
  animation: ticker-scroll 40s linear infinite;
}
.ticker__item {
  font-weight: var(--w-metiers);
  text-transform: uppercase;
  font-size: clamp(28px, 4vw, 64px);
  letter-spacing: var(--tracking-caps);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: var(--s-7);
}
.ticker__item .star {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--metier);
  display: inline-block;
}
@keyframes ticker-scroll {
  to { transform: translateX(-50%); }
}

/* ============ REVEAL (scroll-trigger — Apple-style) ============ */
/* Only hide if JS has flagged the page as reveal-ready, so content
   stays visible if the script fails to load. */
/* Reveal is a nice-to-have, never required for content to be visible.
   Disabled by default to avoid blanking the page if JS fails. */
html.js-reveal-on [data-reveal] {
  opacity: 0;
  transform: translateY(56px) scale(0.985);
  filter: blur(8px);
  transition:
    opacity 1100ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1100ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 900ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}
html.js-reveal-on [data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}
[data-reveal-delay="1"] { transition-delay: 100ms; }
[data-reveal-delay="2"] { transition-delay: 200ms; }
[data-reveal-delay="3"] { transition-delay: 300ms; }
[data-reveal-delay="4"] { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: opacity 200ms linear; transform: none; filter: none; }
}

/* italique orange — emphase Amili */
em {
  font-style: italic;
  font-weight: var(--w-services);
  color: var(--metier);
}

/* ============ GRID HELPERS ============ */
.grid { display: grid; gap: var(--s-7); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: center; }
.stack > * + * { margin-top: var(--s-5); }
.stack-lg > * + * { margin-top: var(--s-7); }

/* ============ RULE ============ */
.rule { border: none; border-top: 1px solid var(--border); margin: 0; }
.rule--night { border-top-color: var(--border-night); }