/* ==========================================================================
   WHISP — Composants réutilisables (langage Material / Drive).
   ========================================================================== */

/* ==========================================================================
   Boutons
   Trois variantes Material : rempli, tonal, contour. Tous en pilule, avec
   un voile d'état au survol plutôt qu'un changement de couleur brutal.
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.65rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

/* Voile d'état : une couche neutre par-dessus la couleur du bouton. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: currentColor;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.btn:hover::before { opacity: 0.08; }
.btn:active::before { opacity: 0.12; }

.btn > * { position: relative; }
.btn svg { position: relative; flex: none; }

/* --- Rempli : action principale ------------------------------------------ */
.btn--primary {
  background-color: var(--brand-solid);
  color: var(--text-on-brand);
  box-shadow: var(--shadow-1);
}

.btn--primary:hover { box-shadow: var(--shadow-2); }

/* --- Tonal : le « bleu clair » caractéristique de Drive ------------------- */
.btn--tonal {
  background-color: var(--brand-container);
  color: var(--on-brand-container);
}

.btn--tonal:hover { box-shadow: var(--shadow-1); }

/* --- Contour ------------------------------------------------------------- */
.btn--secondary {
  background-color: transparent;
  border-color: var(--border-strong);
  color: var(--brand);
}

.btn--secondary:hover { background-color: var(--brand-ghost); }

/* --- Texte seul ---------------------------------------------------------- */
.btn--ghost {
  padding-inline: 1rem;
  color: var(--brand);
}

.btn--ghost:hover { background-color: var(--brand-ghost); }

/* --- Tailles ------------------------------------------------------------- */
.btn--lg { padding: 0.9rem 1.9rem; font-size: var(--text-md); }
.btn--sm { padding: 0.5rem 1.1rem; font-size: var(--text-base); }
.btn--block { display: flex; width: 100%; }

.btn__arrow { transition: transform var(--dur) var(--ease-emphasized); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ==========================================================================
   Puces & étiquettes
   ========================================================================== */

/* Chip Material : contour fin, pilule, fond transparent. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.42rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background-color: var(--bg);
  color: var(--text-secondary);
  font-size: var(--text-base);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.chip svg { color: var(--brand); flex: none; }

.chip--filled {
  border-color: transparent;
  background-color: var(--surface);
}

a.chip:hover { background-color: var(--surface-hover); border-color: var(--border-strong); }

/* Étiquette d'annonce en haut du héros. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 0.9rem 0.35rem 0.6rem;
  border-radius: var(--radius-full);
  background-color: var(--brand-container);
  color: var(--on-brand-container);
  font-size: var(--text-base);
  font-weight: 500;
}

.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--green-600);
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-full);
  background-color: var(--brand-container);
  color: var(--on-brand-container);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* ==========================================================================
   Cartes
   Pas de verre ni de dégradé : un aplat, un contour fin, et une élévation
   qui n'apparaît qu'au survol.
   ========================================================================== */

.card {
  position: relative;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background-color: var(--bg);
  border: 1px solid var(--border);
  transition:
    transform var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

/* Variante remplie : le gris Drive, sans contour. */
.card--filled {
  background-color: var(--surface);
  border-color: transparent;
}

/* Le décalage passe par --lift pour rester compatible avec l'apparition
   au défilement (voir base.css). */
.card--interactive {
  --lift: 0px;
  transform: translateY(var(--lift));
}

.card--interactive:hover {
  --lift: -2px;
  border-color: transparent;
  box-shadow: var(--shadow-3);
  background-color: var(--bg);
}

/* ==========================================================================
   Icône encadrée
   Pastille ronde colorée : le vocabulaire visuel des produits Google.
   La teinte est passée par --icon-tint pour varier d'une carte à l'autre.
   ========================================================================== */

.icon-tile {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--icon-tint, var(--blue-400)) 14%, transparent);
  color: var(--icon-tint, var(--blue-500));
  transition: transform var(--dur) var(--ease-emphasized);
}

.card--interactive:hover .icon-tile { transform: scale(1.06); }

.icon-tile--blue   { --icon-tint: var(--blue-500); }
.icon-tile--green  { --icon-tint: var(--green-400); }
.icon-tile--yellow { --icon-tint: var(--yellow-400); }
.icon-tile--red    { --icon-tint: var(--red-400); }
.icon-tile--teal   { --icon-tint: var(--teal-400); }
.icon-tile--purple { --icon-tint: var(--purple-400); }

/* ==========================================================================
   En-tête de site
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--bg);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

/* Drive ne floute pas : il pose une ombre franche dès le défilement. */
.header.is-stuck {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-1);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  height: 4.5rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text-secondary);
}

.logo__mark { width: 2rem; height: 2rem; }

/* --- Navigation ---------------------------------------------------------- */
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nav__link {
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: var(--text-base);
  font-weight: 500;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.nav__link:hover { color: var(--text); background-color: var(--surface); }

.nav__link[aria-current="page"] {
  color: var(--brand);
  background-color: var(--brand-container);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* --- Bouton menu mobile -------------------------------------------------- */
.nav-toggle {
  display: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  color: var(--text-secondary);
  transition: background-color var(--dur) var(--ease);
}

.nav-toggle:hover { background-color: var(--surface); }

.nav-toggle__bar {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}

.nav-toggle__bar + .nav-toggle__bar { margin-top: 4px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 900px) {
  .nav-toggle { display: grid; }

  .header__nav {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: var(--gutter);
    right: var(--gutter);
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background-color: var(--bg-elevated);
    box-shadow: var(--shadow-3);
    opacity: 0;
    transform: scale(0.96);
    transform-origin: top center;
    visibility: hidden;
    transition:
      opacity var(--dur) var(--ease),
      transform var(--dur) var(--ease-emphasized),
      visibility var(--dur);
  }

  .header__nav.is-open {
    opacity: 1;
    transform: none;
    visibility: visible;
  }

  /* Le <nav> imbriqué doit passer en colonne lui aussi. */
  .header__nav .nav {
    flex-direction: column;
    align-items: stretch;
  }

  .header__nav .nav__link {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-xs);
  }

  .header__nav .header__actions {
    flex-direction: column;
    align-items: stretch;
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
  }

  .header__nav .btn { width: 100%; }
}

/* ==========================================================================
   Pied de page
   ========================================================================== */

.footer {
  padding-block: var(--space-9) var(--space-6);
  border-top: 1px solid var(--border);
  background-color: var(--bg-subtle);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--space-7) var(--space-6);
}

.footer__brand p {
  max-width: 32ch;
  margin-top: var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.footer__title {
  margin-bottom: var(--space-4);
  color: var(--text);
  font-size: var(--text-base);
  font-weight: 500;
}

.footer__list { display: grid; gap: var(--space-3); }

.footer__list a {
  color: var(--text-muted);
  font-size: var(--text-base);
  transition: color var(--dur-fast) var(--ease);
}

.footer__list a:hover { color: var(--brand); text-decoration: underline; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--text-base);
}

@media (max-width: 780px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

/* ==========================================================================
   Cartes tarifaires
   ========================================================================== */

.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.plan {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  min-height: 100%;
}

.plan--featured {
  border-color: var(--blue-200);
  border-width: 2px;
  box-shadow: var(--shadow-2);
}

.plan__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.plan__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
}

.plan__tagline {
  margin-top: var(--space-2);
  min-height: 2.8em;
  color: var(--text-muted);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-block: var(--space-5) var(--space-2);
}

.plan__amount {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  letter-spacing: var(--tracking-tighter);
  font-variant-numeric: tabular-nums;
}

.plan__currency { font-size: var(--text-md); color: var(--text-secondary); }
.plan__period { color: var(--text-muted); font-size: var(--text-base); }

.plan__note {
  min-height: 1.4em;
  color: var(--text-faint);
  font-size: var(--text-sm);
}

.plan__limits {
  display: grid;
  gap: var(--space-2);
  margin-block: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
}

.plan__limit {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-base);
}

.plan__limit svg { color: var(--brand); flex: none; }

.plan__features {
  display: grid;
  gap: var(--space-3);
  margin-block: var(--space-5) var(--space-6);
}

.plan__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
}

.plan__feature svg { flex: none; margin-top: 0.15em; color: var(--green-600); }
.plan__feature--off { color: var(--text-faint); }
.plan__feature--off svg { color: var(--text-faint); }

.plan__cta { margin-top: auto; }

@media (max-width: 940px) {
  .plans { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; }
}

/* --- Bascule mensuel / annuel -------------------------------------------- */
.billing-toggle {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--space-7);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.billing-toggle__btn {
  padding: 0.6rem 1.4rem;
  color: var(--text-secondary);
  font-size: var(--text-base);
  font-weight: 500;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.billing-toggle__btn:hover { background-color: var(--surface); }

.billing-toggle__btn[aria-pressed="true"] {
  background-color: var(--brand-container);
  color: var(--on-brand-container);
}

.billing-toggle__save {
  margin-left: 0.4rem;
  color: var(--green-600);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* ==========================================================================
   FAQ (accordéon natif <details>)
   ========================================================================== */

.faq {
  display: grid;
  border-top: 1px solid var(--border);
}

.faq__item { border-bottom: 1px solid var(--border); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-2);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
  list-style: none;
  transition: color var(--dur) var(--ease);
}

.faq__q:hover { color: var(--brand); }
.faq__q::-webkit-details-marker { display: none; }

.faq__icon {
  flex: none;
  color: var(--text-muted);
  transition: transform var(--dur) var(--ease-emphasized), color var(--dur) var(--ease);
}

.faq__item[open] .faq__icon { transform: rotate(180deg); color: var(--brand); }

.faq__a {
  padding: 0 var(--space-2) var(--space-5);
  max-width: 68ch;
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* ==========================================================================
   Fenêtre applicative simulée
   ========================================================================== */

.window {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--bg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}

.window__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.75rem var(--space-5);
  border-bottom: 1px solid var(--border);
}

.window__dots { display: flex; gap: 0.4rem; }

.window__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--grey-200);
}

.window__title {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.window__body { padding: var(--space-5); }

/* ==========================================================================
   Barre de progression
   ========================================================================== */

.progress {
  position: relative;
  height: 4px;
  border-radius: var(--radius-full);
  background-color: var(--blue-100);
  overflow: hidden;
}

.progress__bar {
  position: relative;
  overflow: hidden;
  height: 100%;
  border-radius: inherit;
  background-color: var(--blue-500);
  transition: width var(--dur-slow) var(--ease);
}