/* ==========================================================================
   OFFICEVIBE — COMPOSANTS
   Chaque bloc cite la source Refero. Les blocs marqués [COMPOSÉ] ne sont pas
   attestés par la référence — voir ../../reference/GAPS.md §A.
   ========================================================================== */

/* ==========================================================================
   1. BOUTONS
   Refero · "Filled Pill Button (Primary)" : rayon 100px, #2545ff, texte #fff,
   Inter 16/500, padding 12×24, AUCUNE ombre.
   Refero · "Ghost Nav Button" : transparent, #222222, Inter 14/500, sans bordure.
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  line-height: 1.1;
  padding: var(--space-12) var(--space-24);
  border-radius: var(--radius-buttons);
  border: 1px solid transparent;
  background: none;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-button); /* none — Don't n°4 */
  transition: background-color var(--motion-base) var(--ease-standard),
              color var(--motion-base) var(--ease-standard),
              border-color var(--motion-base) var(--ease-standard);
}

.btn--primary {
  background: var(--color-electric-cobalt);
  color: var(--color-paper-white);
}
.btn--primary:hover { background: var(--color-primary-hover); } /* hover non documenté */

.btn--outline {
  background: transparent;
  color: var(--color-graphite);
  border-color: var(--color-smoke);
}
.btn--outline:hover { border-color: var(--color-graphite); }

.btn--ink { background: var(--color-ink-navy); color: var(--color-paper-white); }
.btn--ink:hover { background: var(--color-ink-hover); }

/* Bouton posé sur surface Ink — vu sur la bande CTA et la bande performance */
.btn--on-ink { background: var(--color-paper-white); color: var(--color-ink-navy); }
.btn--on-ink:hover { background: var(--color-lavender-mist); }
.btn--outline-on-ink {
  background: transparent;
  color: var(--color-paper-white);
  border-color: rgba(255,255,255,0.45);
}
.btn--outline-on-ink:hover { border-color: var(--color-paper-white); }

/* Ghost Nav Button */
.btn--ghost {
  background: transparent;
  color: var(--color-graphite);
  font-size: var(--text-body-sm);
  padding: var(--space-8) var(--space-16);
}
.btn--ghost:hover { color: var(--color-charcoal); }

.btn--sm { font-size: var(--text-body-sm); padding: var(--space-8) var(--space-16); }

/* Lien texte fléché — observé ("Discover Good Vibes →", "Read the article →") */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--color-electric-cobalt);
  text-decoration: none;
}
.link-arrow svg { transition: transform var(--motion-base) var(--ease-standard); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ==========================================================================
   2. BADGES
   Refero · "Metric Pill Badge" : #eaebf8, texte #0c1754, Inter 12/500,
   rayon 16, padding 4×10.
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-lavender-mist);
  color: var(--color-ink-navy);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  line-height: var(--lh-caption);
  border-radius: var(--radius-badges);
  padding: var(--space-4) 10px;
}
.badge--paper { background: var(--color-paper-white); border: var(--border-hairline); }
.badge--cobalt { background: var(--color-electric-cobalt); color: var(--color-paper-white); }

/* Chip en pilule — chips de suggestion du widget, tags cliquables (Do n°4) */
.chip {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  background: var(--color-warm-canvas);
  color: var(--color-charcoal);
  font-size: var(--text-caption);
  border: var(--border-hairline);
  border-radius: var(--radius-buttons);
  padding: var(--space-8) 14px;
  cursor: pointer;
  transition: background-color var(--motion-base) var(--ease-standard);
}
.chip:hover { background: var(--color-cream-border); }

/* Badge numéroté des cartes d'étape — Refero : "numbered badge in #2545ff" */
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  flex: 0 0 24px;
  border-radius: var(--radius-buttons);
  background: var(--color-electric-cobalt);
  color: var(--color-paper-white);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  line-height: 1;
}

/* ==========================================================================
   3. CARTES
   Refero · rayon 16, padding 32, bordure crème #f0e9e1.
   ========================================================================== */
.card {
  background: var(--surface-1);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
  border: var(--border-hairline);
}
.card--elevated { box-shadow: var(--shadow-card); border-color: transparent; }
.card--flat     { border: none; }

/* Step Card — trois variantes documentées */
.step-card { border-radius: var(--radius-cards); padding: var(--card-padding); }
.step-card--dark {
  background: var(--color-ink-navy);
  color: var(--color-paper-white);
  border: 1px solid var(--color-ink-navy);
}
.step-card--dark .step-card__body { color: var(--color-lavender-mist); }
.step-card--light {
  background: var(--color-paper-white);
  border: var(--border-hairline);
}
.step-card--bordered {
  background: var(--color-paper-white);
  border: var(--border-accent); /* 1.5px #2545ff */
}
.step-card > .row:first-child { align-items: flex-start; }
.step-card > .row:first-child .step-num { margin-top: 2px; }
.step-card__title {
  font-family: var(--font-geometric);
  font-size: var(--text-subheading);
  font-weight: var(--weight-regular);
  letter-spacing: var(--ls-subheading);
  margin: 0;
}
.step-card__body { font-size: var(--text-body-sm); line-height: var(--lh-body-sm); margin: 0; }

/* Carte témoignage — 4 teintes mesurées, rayon 16 */
.quote-card { border-radius: var(--radius-cards); padding: var(--space-24); }
.quote-card--lavender { background: var(--tint-lavender); }
.quote-card--cyan     { background: var(--tint-cyan); }
.quote-card--amber    { background: var(--tint-amber); }
.quote-card--pink     { background: var(--tint-pink); }
.quote-card__text {
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-charcoal);
  margin: 0;
}
.quote-card__author { font-size: var(--text-body-sm); font-weight: var(--weight-bold); margin: 0; }
.quote-card__date   { font-size: var(--text-caption); color: var(--color-graphite); margin: 0; }
.quote-card__rating { display: flex; align-items: center; gap: 6px; font-size: var(--text-caption); font-weight: var(--weight-medium); }

/* Carte article — grille Ressources */
.article-card {
  display: flex; flex-direction: column; gap: var(--space-12);
  background: var(--color-warm-canvas);
  border-radius: var(--radius-cards);
  padding: var(--space-24);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--motion-base) var(--ease-standard);
}
.article-card:hover { background: var(--color-cream-border); }
.article-card__title {
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  line-height: 1.35;
  color: var(--color-charcoal);
  margin: 0;
}
/* Vignette : placeholder géométrique — aucune photo (Imagery : "no stock imagery") */
.article-thumb {
  border-radius: var(--radius-images); /* 24px pour les grands visuels */
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

/* ==========================================================================
   4. NAVIGATION
   Refero · "Top Navigation Bar" : fond #f9f8f6, wordmark Inter 18/700,
   liens Inter 14/500 #222222, hauteur 64–72px.
   Le filet bas suit la capture Refero (voir GAPS.md §C-4).
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface-0);
  border-bottom: var(--border-hairline);
}
.nav__inner {
  height: 72px;
  display: flex; align-items: center; gap: var(--space-32);
}
.nav__wordmark {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  color: var(--color-charcoal);
  text-decoration: none;
}
.nav__links { display: flex; align-items: center; gap: var(--space-4); }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--color-graphite);
  text-decoration: none;
  padding: var(--space-8) var(--space-16);
  transition: color var(--motion-base) var(--ease-standard);
}
.nav__link:hover { color: var(--color-charcoal); }
.nav__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-8); }
.nav__toggle { display: none; }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__inner { height: 64px; gap: var(--space-16); }
}
@media (max-width: 620px) {
  .nav__actions .btn--ghost { display: none; }
}

/* ==========================================================================
   5. HERO — split 2 colonnes, visuel produit centré verticalement
   ========================================================================== */
.hero { padding-block: var(--space-80) var(--space-64); }
.hero__title { margin: 0; }
/* Ratio releve sur la capture Refero : colonne droite legerement plus large,
   gouttiere ~80px, et la dashboard card calee a droite pour laisser la place
   aux decors (carte inclinee + fleche). */
.hero .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: var(--space-80); }
.hero__visual { position: relative; }
.hero__visual .dashboard { margin-left: 11%; }

/* Dispositif signature : carte sombre inclinée qui dépasse derrière le visuel */
.tilt-card {
  position: absolute;
  inset: 26% auto 30% 0;
  width: 26%;
  background: var(--color-ink-navy);
  clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%);
  z-index: 0;
}
/* Tache dégradée qui dépasse en haut du visuel */
.gradient-blob {
  position: absolute;
  top: -30px; right: 4%;
  width: 34%; height: 58px;
  background: var(--gradient-blob);
  border-radius: 20px 20px 0 0;
  transform: rotate(-1.2deg);
  z-index: 0;
}
/* Flèche dessinée à la main (#0c1754 au hero, #ff5b22 sur le bloc étapes) */
.hand-arrow { position: absolute; z-index: 2; pointer-events: none; }
.hand-arrow path { fill: none; stroke-width: 1.6; stroke-linecap: round; }

/* Pilule flottante posée sur le visuel produit */
.float-pill {
  position: absolute;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--color-accent-violet);
  color: var(--color-paper-white);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-buttons);
  padding: var(--space-8) 14px;
  box-shadow: var(--shadow-card);
}

/* ==========================================================================
   6. PRODUCT DASHBOARD CARD
   Refero · #ffffff, rayon 16, ombre 0 4px 24px rgba(12,23,84,.08), padding 32.
   Jauge circulaire #2545ff/#0c1754 + aire dégradée violet→corail + pastilles.
   ========================================================================== */
.dashboard {
  position: relative; z-index: 1;
  background: var(--surface-1);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-card);
  padding: var(--space-24);
}
.dashboard__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-20); }
.dashboard__title { font-size: var(--text-body); font-weight: var(--weight-medium); color: var(--color-ink-navy); margin: 0; }
.dashboard__meta { display: flex; align-items: center; gap: 6px; font-size: var(--text-caption); color: var(--color-graphite); }
.dashboard__top { display: grid; grid-template-columns: 146px minmax(0,1fr); gap: var(--space-12); align-items: center; }

.gauge { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); }
.gauge__figure { position: relative; width: 108px; height: 108px; }
.gauge__value {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--font-geometric);
  font-size: 30px; line-height: 1; color: var(--color-charcoal);
}
.gauge__value small { font-size: var(--text-caption); color: var(--color-graphite); margin-top: 2px; }
.gauge__label { font-family: var(--font-geometric); font-size: var(--text-subheading); color: var(--color-charcoal); }
.gauge__delta { font-size: var(--text-caption); color: var(--color-graphite); }

.chart { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 6px; align-items: stretch; }
.chart__yaxis, .chart__xaxis { font-size: 9px; color: var(--color-stone); }
.chart__yaxis { display: flex; flex-direction: column; justify-content: space-between; text-align: right; padding-block: 2px 18px; }
.chart__xaxis { grid-column: 2; display: flex; justify-content: space-between; padding-inline: 4px; }

.metric-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-8); }
.metric {
  display: flex; align-items: center; gap: var(--space-8);
  padding: var(--space-8) 10px;
  border-radius: 12px;
  border: 1px solid transparent;
}
.metric--alert {
  background: color-mix(in srgb, var(--state-critical) 8%, transparent);
  border-color: color-mix(in srgb, var(--state-critical) 35%, transparent);
}
.metric__dot {
  width: 22px; height: 22px; flex: 0 0 22px;
  border-radius: var(--radius-buttons);
  display: grid; place-items: center;
}
.metric__dot--red   { background: color-mix(in srgb, var(--state-critical) 16%, transparent); color: var(--state-critical-text); }
.metric__dot--amber { background: color-mix(in srgb, var(--state-caution) 22%, transparent); color: var(--state-caution-text); }
.metric__dot--green { background: color-mix(in srgb, var(--state-positive) 14%, transparent); color: var(--state-positive-text); }
.metric__score { font-size: var(--text-caption); font-weight: var(--weight-medium); color: var(--color-charcoal); }
.metric__name  { font-size: 10px; color: var(--color-graphite); line-height: 1.3; }
.dashboard__subtitle { font-size: var(--text-caption); font-weight: var(--weight-bold); color: var(--color-charcoal); margin: var(--space-16) 0 var(--space-8); }

/* ==========================================================================
   7. BANDE PLEINE LARGEUR (performance / CTA) — rayon 24, surface Ink
   ========================================================================== */
.band-card {
  border-radius: var(--radius-images); /* 24px */
  padding: var(--space-40);
  background: var(--surface-2);
  color: var(--color-paper-white);
  position: relative;
  overflow: hidden;
}
.band-card--gradient { background: var(--gradient-cta); }
/* Coin crème en biais, observé sur la bande CTA */
.band-card__wedge {
  position: absolute; inset: 0 0 0 auto; width: 34%;
  background: var(--color-warm-canvas);
  clip-path: polygon(26% 0, 100% 0, 100% 100%, 0 100%);
}
.band-card__content { position: relative; z-index: 1; }
.band-card__aside {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-16);
  color: var(--color-ink-navy);
}
.app-glyph {
  width: 64px; height: 64px;
  border-radius: 18px;
  background: var(--color-electric-cobalt);
  display: grid; place-items: center;
  color: var(--color-paper-white);
  font-family: var(--font-geometric);
  font-size: 30px;
}

/* ==========================================================================
   8. ONGLETS DE FONCTIONNALITÉ — observés ("Step 1 / Step 2 / Step 3")
   ========================================================================== */
.tabs { display: flex; gap: var(--space-24); margin-bottom: var(--space-48); }
.tab {
  display: inline-flex; align-items: center; gap: var(--space-8);
  background: none; border: none; cursor: pointer;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--color-stone);
  padding: 0;
  transition: color var(--motion-base) var(--ease-standard);
}
.tab::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--radius-buttons);
  background: currentColor;
}
.tab[aria-selected="true"] { color: var(--color-electric-cobalt); }
.tab:hover { color: var(--color-graphite); }
.tab[aria-selected="true"]:hover { color: var(--color-electric-cobalt); }
.tabpanel[hidden] { display: none; }

/* Checklist à coches rondes — observée dans les panneaux d'onglet */
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-12); }
.checklist li { display: flex; gap: var(--space-12); font-size: var(--text-body-sm); line-height: var(--lh-body-sm); }
.checklist svg { flex: 0 0 18px; margin-top: 3px; color: var(--color-electric-cobalt); }

/* Panneau produit sombre — rayon 24, fond Ink */
.showcase {
  background: var(--surface-2);
  border-radius: var(--radius-images);
  padding: var(--space-32);
  min-height: 380px;
  display: grid;
  align-content: center;
  gap: var(--space-16);
}

/* Bulles de conversation dans le showcase (maquette produit) */
.bubble {
  background: var(--color-paper-white);
  border-radius: 14px;
  padding: var(--space-12) var(--space-16);
  font-size: var(--text-body-sm);
  line-height: 1.45;
  color: var(--color-charcoal);
  box-shadow: var(--shadow-card);
}
.bubble--soft   { background: var(--color-lavender-mist); }
.bubble--cobalt { background: var(--color-electric-cobalt); color: var(--color-paper-white); }
.bubble__meta   { font-size: 10px; color: var(--color-stone); margin-top: var(--space-4); }

/* ==========================================================================
   9. PREUVE SOCIALE — wordmarks monochromes #171417
   ========================================================================== */
.logo-strip {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-56); flex-wrap: wrap;
}
.logo-strip span {
  font-family: var(--font-geometric);
  font-size: var(--text-subheading);
  font-weight: var(--weight-bold);
  color: var(--color-charcoal);
  opacity: .85;
  letter-spacing: -0.02em;
}

/* ==========================================================================
   10. FAQ ACCORDION
   Refero · #ffffff, bordure crème 1px EN BAS uniquement, padding vertical 24px,
   question Inter 16/500 #171417, chevron #222222 à droite, corps lh 1.6.
   ========================================================================== */
.faq { border-top: var(--border-hairline); }
.faq__row { border-bottom: var(--border-hairline); background: var(--surface-1); }
.faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-24);
  background: none; border: none; cursor: pointer;
  padding: var(--space-24) 0;
  text-align: left;
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  color: var(--color-charcoal);
}
.faq__q svg { flex: 0 0 20px; color: var(--color-graphite); transition: transform var(--motion-base) var(--ease-standard); }
.faq__row[data-open="true"] .faq__q svg { transform: rotate(180deg); }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--motion-slow) var(--ease-standard);
}
.faq__row[data-open="true"] .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  color: var(--color-charcoal);
  margin: 0;
  padding-bottom: var(--space-24);
  max-width: 62ch;
}
.faq__aside { position: sticky; top: 120px; align-self: start; }

/* ==========================================================================
   11. FORMULAIRE  [COMPOSÉ]
   Aucune section formulaire n'est documentée ni observée. Seuls les tokens
   d'input le sont : rayon 16, fond #f9f8f6/#ffffff, bordure #cccccc,
   placeholder #969696. Voir GAPS.md §A.
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: var(--space-8); }
.field__label {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--color-charcoal);
}
.input, .textarea, .select {
  width: 100%;
  background: var(--color-warm-canvas);
  border: var(--border-input);
  border-radius: var(--radius-inputs);
  padding: 14px var(--space-16);
  font-size: var(--text-body);
  line-height: 1.43;
  color: var(--color-charcoal);
  transition: border-color var(--motion-base) var(--ease-standard),
              background-color var(--motion-base) var(--ease-standard);
}
.input::placeholder, .textarea::placeholder { color: var(--color-stone); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--color-graphite); }
.input:focus, .textarea:focus, .select:focus {
  background: var(--color-paper-white);
  border-color: var(--color-electric-cobalt);
  outline: none;
}
.textarea { min-height: 120px; resize: vertical; }
.select { appearance: none; cursor: pointer; padding-right: var(--space-40); }
.field__help { font-size: var(--text-caption); color: var(--color-stone); }
.input:disabled, .textarea:disabled { background: var(--color-warm-canvas); color: var(--color-smoke); cursor: not-allowed; }

.checkbox { display: flex; gap: var(--space-12); align-items: flex-start; font-size: var(--text-body-sm); }
.checkbox input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--color-electric-cobalt); }

/* ==========================================================================
   12. BANDE DE STATISTIQUES  [COMPOSÉ]
   Non documentée comme pattern. Composée depuis l'échelle de type + Metric Pill.
   ========================================================================== */
.stat { display: flex; flex-direction: column; gap: var(--space-8); }
.stat__value {
  font-family: var(--font-geometric);
  font-size: var(--text-heading-lg);
  line-height: var(--lh-heading-lg);
  letter-spacing: var(--ls-heading-lg);
  color: var(--color-ink-navy);
}
.stat__label { font-size: var(--text-body-sm); color: var(--color-graphite); max-width: 26ch; }

/* ==========================================================================
   13. WIDGET DE CHAT
   Refero · fixé BAS-CENTRE, #ffffff, rayon 16, bordure #cccccc 1px,
   ombre 0 8px 32px rgba(12,23,84,.12), avatar 32px #2545ff, chips en pilule.
   Largeur : capture ≈590px vs spec "360px" — voir GAPS.md §C-5.
   ========================================================================== */
.chat-widget {
  position: fixed;
  bottom: var(--space-24);
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  width: min(620px, calc(100vw - 48px));
  background: var(--surface-1);
  border: var(--border-input);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-widget);
  padding: var(--space-16);
  display: flex; flex-direction: column; gap: var(--space-12);
}
.chat-widget__head { display: flex; align-items: center; gap: var(--space-12); }
.chat-widget__avatar {
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: var(--radius-buttons);
  background: var(--color-electric-cobalt);
  color: var(--color-paper-white);
  display: grid; place-items: center;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-bold);
}
.chat-widget__input {
  flex: 1; min-width: 0; text-overflow: ellipsis;
  border: none; background: none; outline: none;
  font-size: var(--text-body-sm);
  color: var(--color-charcoal);
}
.chat-widget__input::placeholder { color: var(--color-stone); }
.chat-widget__foot { display: flex; align-items: center; gap: var(--space-8); }
.chat-widget__chips { display: flex; gap: 6px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.chat-widget__chips .chip { padding: var(--space-8) var(--space-12); }
.chat-widget__chips::-webkit-scrollbar { display: none; }
.chat-widget__send {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 10px; border: none;
  background: var(--color-warm-canvas);
  color: var(--color-electric-cobalt);
  display: grid; place-items: center;
  cursor: pointer;
}
.chat-widget__send:hover { background: var(--color-cream-border); }
.chat-widget__close {
  position: absolute; top: -10px; right: -10px;
  width: 24px; height: 24px; border-radius: var(--radius-buttons);
  border: var(--border-input); background: var(--surface-1);
  color: var(--color-graphite); cursor: pointer;
  display: grid; place-items: center; font-size: 13px; line-height: 1;
}
@media (max-width: 700px) {
  .chat-widget { width: calc(100vw - 32px); bottom: var(--space-16); }
  .chat-widget__chips { display: none; }
  .chat-widget__foot { justify-content: flex-end; }
}

/* ==========================================================================
   14. FOOTER  [COMPOSÉ — contradiction non résolue, voir GAPS.md §C-3]
   Ink Navy retenu : rôle de la couleur + Do n°3.
   ========================================================================== */
.footer { background: var(--surface-2); color: var(--color-paper-white); padding-block: var(--space-64) var(--space-32); }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--space-40); }
.footer__wordmark { font-size: 18px; font-weight: var(--weight-bold); letter-spacing: -0.02em; }
.footer__col h4 {
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-lavender-mist);
  margin: 0 0 var(--space-16);
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-12); }
.footer__col a {
  font-size: var(--text-body-sm);
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  transition: color var(--motion-base) var(--ease-standard);
}
.footer__col a:hover { color: var(--color-paper-white); }
.footer__base {
  margin-top: var(--space-48);
  padding-top: var(--space-24);
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex; justify-content: space-between; gap: var(--space-24); flex-wrap: wrap;
  font-size: var(--text-caption);
  color: rgba(255,255,255,0.6);
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .footer__grid { grid-template-columns: minmax(0,1fr); } }

/* ==========================================================================
   15. UTILITAIRES DE PAGE
   ========================================================================== */
.divider { height: 1px; background: var(--color-cream-border); border: none; margin: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.page-bottom-pad { padding-bottom: 120px; } /* réserve pour le widget de chat fixe */


/* ==========================================================================
   16. RESPONSIVE DES VARIANTES DE GRILLE
   Breakpoints NON documentés par Refero — voir ../../reference/GAPS.md §A.
   Ce bloc est en fin de fichier pour passer après les surcharges de section.
   ========================================================================== */
.split--faq   { grid-template-columns: 0.85fr 1.15fr; }
.split--band  { gap: var(--space-32); }
.grid--resources { grid-template-columns: 1.1fr 1.1fr 0.95fr; }

@media (max-width: 1120px) {
  .grid--resources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero .split,
  .split--faq,
  .split--band { grid-template-columns: minmax(0, 1fr); gap: var(--space-40); }
  .hero__visual .dashboard { margin-left: 0; }
  .faq__aside { position: static; }
  .band-card__aside { justify-content: flex-start; }
  .band-card__wedge { display: none; }
  /* Decors du hero : purement decoratifs, retires en colonne unique */
  .tilt-card, .gradient-blob, .hero .hand-arrow { display: none; }
  .grid--resources { grid-template-columns: minmax(0, 1fr); }
  .tabs { flex-wrap: wrap; gap: var(--space-16); }
  .logo-strip { gap: var(--space-32); }
  /* Les fleches manuscrites du bloc 3 etapes n'ont plus de sens empilees */
  #features .hand-arrow { display: none; }
}
@media (max-width: 620px) {
  .step-card { transform: none !important; }
  .dashboard { padding: var(--space-16); }
  .dashboard__top { grid-template-columns: minmax(0, 1fr); }
  .metric-row { grid-template-columns: minmax(0, 1fr); }
  .band-card { padding: var(--space-24); }
  .nav__inner { gap: var(--space-12); }
}