/*
==================================================
ÆKOZ — BASE COMMUNE (structure / layout / responsive)
Ce fichier ne contient AUCUNE couleur en dur.
Toutes les couleurs viennent des variables --xxx
définies dans theme-origin.css / theme-business.css / theme-care.css
==================================================
*/

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-body);
  /* "--text-on-page-bg" est le texte posé directement sur
     le fond de la page (--bg-body), à distinguer du texte
     à l'intérieur des cards/containers (--text-primary).
     Sur Origin et Business, fond de page et fond de card
     sont tous les deux sombres, donc cette variable vaut
     la même chose que --text-primary par défaut — rien ne
     change pour ces deux pages. Mais sur Care, le fond de
     page est sombre alors que les cards restent blanches :
     ces deux textes doivent alors être différents (l'un
     clair, l'autre sombre), ce que permet cette séparation. */
  color: var(--text-on-page-bg, var(--text-primary));
  font-family: Inter, Arial, Helvetica, sans-serif;
  font-size: var(--base-font-size, 17px);
}

.page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 44px 22px 70px;
}

/* HEADER */

.header {
  text-align: center;
  margin-bottom: 34px;
}

/* ==================================================
NAV DES PAGES API
Barre fine en haut de chaque page Origin/Business/Care.
Construite avec les mêmes variables que le reste de
base.css (--surface, --border-soft, etc.), donc elle
s'adapte automatiquement aux couleurs de chaque thème
sans qu'on ait besoin d'écrire 3 versions différentes.

- À gauche : le logo, qui renvoie vers la page d'accueil
  du vrai site (aekoz.com), comme un bouton "retour".
- À droite : les 3 noms des formules. Celle de la page
  actuelle est colorée avec sa couleur de marque (classe
  "is-active"), les 2 autres restent cliquables pour
  changer de démo directement, sans repasser par le site.
================================================== */

.api-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;

  max-width: 1160px;
  margin: 0 auto;
  padding: 0 22px;

  /* "min-height: 88px" reprend exactement la hauteur de
     la nav du vrai site (aekoz.com), mesurée dans l'inspecteur
     (le 72px du CSS source du site n'est qu'un minimum, le
     rendu réel y est plus haut). C'est cette valeur précise
     qui donne au logo assez d'espace pour respirer en haut
     et en bas de la barre. */
  min-height: 88px;

  /* "--nav-border, var(--border-soft)" : sur Origin/Business,
     la nav et les containers sont tous les deux sur fond sombre,
     donc la même variable --border-soft convient aux deux.
     Sur Care, le fond de la nav reste sombre alors que les
     containers sont blancs — ces deux contextes ont besoin
     d'une opacité de bordure différente (une bordure discrète
     sur fond sombre devient invisible sur fond clair, et
     inversement). --nav-border permet à Care de définir une
     valeur propre à la nav, sans toucher à --border-soft. */
  border-bottom: 1px solid var(--nav-border, var(--border-soft));
}

.api-nav__logo {
  display: flex;
  align-items: center;
}

.api-nav__logo-img {
  /* On reprend exactement la même taille que le logo dans
     la nav du site (aekoz.com) : 80px de large. On dimensionne
     par la largeur, pas par la hauteur, parce que c'est ce que
     fait le site lui-même (.landing-nav__logo-image--desktop),
     et que ce logo est presque carré — fixer une largeur donne
     un résultat plus prévisible qu'une hauteur ici. */
  width: 80px;
  height: auto;
  display: block;
}

.api-nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.api-nav__link {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;

  color: var(--text-tertiary);

  transition: color 0.2s ease;
}

.api-nav__link:hover {
  color: var(--text-primary);
}

.api-nav__link--origin.is-active {
  color: #E74F01;
}

.api-nav__link--business.is-active {
  color: #245BFF;
}

.api-nav__link--care.is-active {
  color: #18C9B7;
}

@media (max-width: 560px) {
  .api-nav {
    padding: 0 16px;
    min-height: 60px;
  }

  .api-nav__logo-img {
    height: 40px;
  }

  .api-nav__links {
    gap: 18px;
  }

  .api-nav__link {
    font-size: 12px;
  }
}

.header h1 {
  margin: 0;
  color: var(--text-on-page-bg, var(--text-primary));
  font-size: clamp(42px, 6vw, 68px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -1.6px;
}

/* Couleurs des H1 */

.h1-orange h1 {
    color: #E74F01;
}

.h1-teal h1 {
    color: #18C9B7;
}

.h1-blue h1 {
    color: #245BFF;
}

.header p {
  margin: 18px auto 0;
  color: var(--text-secondary-on-page-bg, var(--text-secondary));
  line-height: 1.55;
}

.hero-baseline {
  max-width: 720px;
  margin: 18px auto 0;
  color: var(--text-secondary-on-page-bg, var(--text-secondary));
  font-size: 22px;
  line-height: 1.5;
}

.hero-description {
  max-width: 1160px;
  margin: 22px auto 0;
  padding: 22px 26px;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1.7;
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 26px rgba(5, 20, 27, 0.20);
}

/* Classe d'appoint, à coller directement sur le texte qui
   pose problème (ex: <p class="hero-description hero-description--dark-text">).
   Volontairement écrite avec une couleur fixe (pas une
   variable --xxx) et un !important : une tentative précédente
   de changer la couleur via une variable n'a eu aucun effet
   visible, sans qu'on en ait trouvé la cause exacte — cette
   classe, plus spécifique et en dur, a la meilleure chance
   d'avoir le dernier mot malgré tout. */
.hero-description.hero-description--dark-text {
  color: #05141B !important;
}

.hero-description strong {
  color: var(--text-primary);
}

/* CARTES INTRO / SCHÉMAS */

.diagram-card,
.intro-card {
  max-width: 1160px;
  margin: 0 auto 34px;
  padding: 24px 28px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.24);
}

.diagram-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.diagram-card p,
.intro-card p {
  max-width: 900px;
  margin: 0 auto;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1.7;
}

/* ZONE DE SAISIE */

.input-zone {
  max-width: 1160px;
  margin: 0 auto 48px;
  padding: 30px;
  text-align: center;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.34),
    0 0 48px var(--glow-soft);
}

.example-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}

/* Onglets (utilisés sur la page Care) */

.profile-tabs {
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  margin-bottom: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-soft);
}

.tab-button {
  padding: 12px 22px;
  border-radius: 999px;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 13px;
  box-shadow: none;
}

.tab-button.active {
  background: var(--accent-strong);
  color: var(--on-accent);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.20);
}

.scenario-intro {
  max-width: 720px;
  margin: 0 auto 20px;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.6;
}

textarea {
  width: 100%;
  min-height: 260px;
  padding: 24px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  outline: none;
  resize: vertical;
  background: var(--surface-dark);
  color: var(--text-primary);
  font-size: 17px;
  line-height: 1.65;
  font-family: inherit;
  box-shadow: inset 0 2px 18px rgba(0, 0, 0, 0.10);
}

textarea:focus {
  border-color: var(--accent);
  box-shadow:
    0 0 0 4px var(--accent-soft),
    inset 0 2px 18px rgba(0, 0, 0, 0.10);
}

textarea::placeholder {
  color: var(--text-tertiary);
}

/* BOUTONS */

button {
  cursor: pointer;
  border: none;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease,
    border-color 180ms ease;
}

button:hover {
  transform: translateY(-1px);
}

.small-button,
.main-button {
  background: var(--accent-gradient, var(--accent));
  color: var(--on-accent);
  border-radius: 999px;
  box-shadow:
    0 10px 26px var(--accent-shadow),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}

.small-button {
  padding: 12px 24px;
  font-size: 12px;
}

.main-button {
  padding: 16px 38px;
  font-size: 14px;
}

.ghost-button {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 15px 32px;
  font-size: 14px;
}

.ghost-button:hover {
  border-color: var(--accent);
  color: var(--text-primary);
  box-shadow: 0 0 18px var(--accent-soft);
}

.buttons {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
}

.notice {
  margin-top: 16px;
  color: var(--text-tertiary);
  font-size: 14px;
  line-height: 1.5;
}

/* STATUS */

.status-message {
  min-height: 24px;
  margin-top: 14px;
  color: var(--text-tertiary);
  font-size: 14px;
}

.status-message.status-active {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--text-secondary);
  font-weight: 700;
}

.status-message.status-active::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent-soft);
  animation: pulseAekoz 1s ease-in-out infinite;
}

@keyframes pulseAekoz {

  0%,
  100% {
    opacity: 0.4;
    transform: scale(0.85);
  }

  50% {
    opacity: 1;
    transform: scale(1.18);
  }
}

/* RÉSULTATS */

.results {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card {
  position: relative;
  padding: 26px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.large-card {
  border-color: var(--border-strong);
}

.card h2,
.card h3 {
  margin-top: 0;
  margin-bottom: 14px;
  color: var(--accent);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 1px;
}

.card p,
.card li {
  line-height: 1.65;
  color: var(--text-primary);
}

.card p {
  margin-bottom: 0;
  color: var(--text-secondary);
}

.card ul {
  margin: 0;
  padding-left: 20px;
}

.card li {
  margin-bottom: 9px;
}

.card li::marker {
  color: var(--accent);
}

.card li span {
  color: var(--text-secondary);
  font-size: 15px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

/* TAGS */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tags span {
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
  color: var(--text-primary);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

/* ENRICHISSEMENT */

.enrich-card {
  margin-top: 8px;
}

.enrich-card textarea {
  min-height: 130px;
  margin: 12px 0 18px;
}

/* EMPTY STATE */

.empty-state {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  color: var(--text-tertiary);
  font-size: 15px;
  line-height: 1.6;
}

.empty-state::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-soft);
}

/* RECHERCHE */

.search-zone {
  margin-top: 28px;
}

.search-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  margin: 18px 0 12px;
}

.search-form input {
  width: 100%;
  padding: 17px 20px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  outline: none;
  background: var(--surface-dark);
  color: var(--text-primary);
  font-size: 16px;
  font-family: inherit;
}

.search-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.search-form input::placeholder {
  color: var(--text-tertiary);
}

.search-result {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.search-result h3 {
  margin-top: 0;
  color: var(--accent);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 1px;
}

.memory-card-item {
  padding: 16px 0;
  border-top: 1px solid var(--border-soft);
}

.memory-card-item:first-of-type {
  border-top: none;
}

.memory-title {
  color: var(--text-primary) !important;
  font-size: 21px;
  font-weight: 800;
  margin: 0 0 10px;
}

.search-why {
  margin-top: 14px;
  color: var(--text-tertiary) !important;
  font-size: 14px;
}

button:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

/* FOOTER */

.footer {
  text-align: center;
  margin-top: 46px;
  color: var(--text-tertiary-on-page-bg, var(--text-tertiary));
  font-size: 14px;
  letter-spacing: 0.4px;
}

/* ==================================================
   SECTION COMPARAISON DES 3 FORMULES
   (mêmes 3 couleurs de marque sur les 3 pages,
   définies dans chaque theme-*.css via
   --plan-origin / --plan-business / --plan-care)
   ================================================== */

.aekoz-compare-section {
  /* Avant, cette ligne était "width: min(1160px, calc(100% - 32px))".
     Le problème : ce calc(100% - 32px) retirait toujours 32px de
     large, et comme .page a déjà sa propre marge de sécurité sur
     les côtés (son padding), cette section finissait toujours plus
     étroite que les autres blocs de la page, peu importe le chiffre
     mis à côté de "min(...)". On retire cette double sécurité
     redondante pour que la section atteigne vraiment 1160px, comme
     .diagram-card et .input-zone juste au-dessus. */
  max-width: 1160px;
  margin: 80px auto 40px;
  padding: 32px;
  border: 1px solid var(--border-soft);
  border-radius: 24px;
  background: var(--surface-soft);
}

.aekoz-compare-section h2 {
  margin: 0 0 28px;
  text-align: center;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.aekoz-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.aekoz-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.flow-card,
.plan-card {
  padding: 24px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
}

.flow-card h3,
.plan-card h3 {
  margin: 0 0 12px;
  text-transform: uppercase;
}

.flow-card h3 {
  font-size: 1.05rem;
  color: var(--accent);
}

.plan-card h3 {
  font-size: 1.3rem;
  text-align: center;
}

.flow-card p,
.plan-card p {
  margin: 0 0 16px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.flow-card ul,
.plan-card ul {
  margin: 0;
  padding-left: 18px;
}

.flow-card li,
.plan-card li {
  margin-bottom: 8px;
  color: var(--text-primary);
  line-height: 1.4;
}

.plan-subtitle {
  text-align: center;
  font-weight: 600;
  color: var(--text-secondary);
}

.plan-card h4 {
  margin: 22px 0 10px;
  font-size: 0.95rem;
  text-transform: uppercase;
  color: var(--text-primary);
}

.aekoz-objective {
  margin: 28px 0 48px;
  padding: 18px;
  border-radius: 14px;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-primary);
  background: var(--accent-soft);
  border: 1px solid var(--border-strong);
}

/* Les 3 cartes de formules gardent TOUJOURS les mêmes couleurs
   de marque, peu importe la page sur laquelle on se trouve. */

.plan-card.origin {
  border: 2px solid var(--plan-origin);
  box-shadow: 0 0 20px var(--plan-origin-glow);
}

.plan-card.origin h3 {
  color: var(--plan-origin);
}

.plan-card.business {
  border: 2px solid var(--plan-business);
  box-shadow: 0 0 20px var(--plan-business-glow);
}

.plan-card.business h3 {
  color: var(--plan-business);
}

.plan-card.care {
  border: 2px solid var(--plan-care);
  box-shadow: 0 0 20px var(--plan-care-glow);
}

.plan-card.care h3 {
  color: var(--plan-care);
}

/* RESPONSIVE */

@media (max-width: 768px) {
  .page {
    padding: 30px 14px 54px;
  }

  .header p,
  .hero-baseline {
    font-size: 18px;
  }

  .hero-description {
    max-width: 100%;
    padding: 20px;
    font-size: 16px;
  }

  .diagram-card,
  .intro-card {
    padding: 18px;
    margin-bottom: 24px;
  }

  .diagram-card p,
  .intro-card p {
    font-size: 16px;
  }

  .input-zone {
    padding: 20px;
  }

  textarea {
    min-height: 230px;
    font-size: 16px;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .buttons,
  .example-buttons {
    flex-direction: column;
  }

  .profile-tabs {
    width: 100%;
    display: flex;
  }

  .tab-button {
    flex: 1;
  }

  .main-button,
  .ghost-button,
  .small-button {
    width: 100%;
  }

  .search-form {
    grid-template-columns: 1fr;
  }

  .aekoz-flow,
  .aekoz-plans {
    grid-template-columns: 1fr;
  }

  .aekoz-compare-section {
    padding: 22px;
  }
}