/* ═══════════════════════════════════════════════════════════
   EvolutionsAI — HOME (pivot éditorial clair)
   Chargé UNIQUEMENT sur la home (Base.astro, conditionnel) APRÈS style.css.
   Stratégie : re-déclarer les tokens sur :root[data-home] (spécificité > :root)
   → toutes les classes partagées (.section/.card/.btn/.faq…) héritent du thème
   crème/vert foncé sur la home seule. Piliers/blog/admin : INCHANGÉS.

   Palette : crème #FAF9F5 · encre #191919 · vert #3E7D5A / #2D6A4F (texte AA)
   Référence visuelle : anthropic.com/learn (clair, éditorial, posé).
   Typo : tailles alignées sur l'échelle modulaire φ (tokens --fs-*, style.css) ;
   toute valeur hors échelle est commentée à son point d'usage (doctrine §6).
   a11y : verts purs (#74A892/#95C5AF) ÉCHOUENT AA en texte sur crème (~2.8:1).
   → texte/liens/labels = vert foncé #2D6A4F (4.57:1) ; warm #74A892 = déco non textuelle.
   ═══════════════════════════════════════════════════════════ */

:root[data-home] {
  /* Surfaces */
  --bg: #faf9f5;          /* ivoire — fond page */
  --bg-panel: #f0eee6;    /* cartes / encarts */
  --bg-raised: #eae7dc;   /* surfaces surélevées */

  /* Encre */
  --text: #191919;
  --text-muted: #5c5a52;  /* ≈ 6,5:1 sur crème */

  /* Vert / vert foncé — paliers contrôlés en contraste */
  --green-warm: #74a892;   /* warm — aplats décoratifs uniquement (PAS de texte) */
  --green: #3e7d5a;        /* vert — grande déco / gros titres (≥3:1 large) */
  --green-strong: #2d6a4f; /* vert foncé — texte/liens/icônes (4.57:1, AA) */
  --green-deep: #1b4332;   /* vert profond — survol bouton (5.7:1) */

  /* On remappe les accents historiques (utilisés dans style.css) sur le vert
     text-safe → ::after, dots, focus, summary::after… passent vert automatiquement. */
  --teal: var(--green-strong);
  --violet: var(--green);

  /* Dégradés : version AA-large (le palier clair s'arrête à #3e7d5a = 3.9:1) */
  --grad: linear-gradient(135deg, #3e7d5a, #1b4332);
  --grad-btn: #2d6a4f;        /* surface bouton plein (label blanc = 4.91:1) */
  --grad-btn-hover: #1b4332;  /* survol */

  /* Filets clairs */
  --line: rgba(25, 25, 25, 0.10);
  --line-strong: rgba(25, 25, 25, 0.16);

  /* Famille d'affichage : General Sans (titres). Corps = Inter (inchangé). */
  --font-display: "General Sans", "General Sans Fallback", system-ui, sans-serif;

  /* Rythme : air maîtrisé (base-8), coins un peu moins ronds */
  --section-pad: clamp(72px, 9vw, 128px);
  --radius: 14px;
}

/* ── Overrides scopés des valeurs EN DUR de style.css ──────── */

/* Sélection : violet → vert translucide */
:root[data-home] ::selection { background: rgba(45, 106, 79, 0.22); color: #191919; }

/* Grain : pensé pour le fond sombre — sur crème il salit. On retire. */
:root[data-home] .grain { display: none; }

/* Header sticky : voile sombre → voile crème translucide */
:root[data-home] .header.is-scrolled {
  background: rgba(250, 249, 245, 0.82);
  border-bottom-color: var(--line);
}

/* Menu mobile : overlay sombre → overlay crème */
:root[data-home] .menu { background: rgba(250, 249, 245, 0.96); }
:root[data-home] .menu__link:hover {
  /* le clip-text dégradé tomberait sur du warm clair (sous 3:1) → solide vert */
  background: none;
  -webkit-text-fill-color: var(--green-strong);
  color: var(--green-strong);
}

/* Bouton fantôme : fond blanc translucide invisible sur crème → transparent */
:root[data-home] .btn--ghost { background: transparent; }

/* ── Titres : General Sans 600 (le 700 rend trop noir/trapu pour ce registre) ── */
:root[data-home] .hero__title,
:root[data-home] .section__title,
:root[data-home] .cta__title {
  font-weight: 500;          /* serif Gambetta 500 = registre éditorial calme */
  letter-spacing: normal;    /* une serif ne se resserre pas */
}
:root[data-home] .hero__title { line-height: 1.1; }
:root[data-home] .section__title,
:root[data-home] .cta__title { line-height: 1.12; }  /* < --lh-heading (1.2) */

/* Titre em : encre + dégradé vert AA-large (via --grad remappé) ; sécurise le clip webkit */
:root[data-home] .section__title em,
:root[data-home] .hero__title em { -webkit-text-fill-color: transparent; }
/* CTA em : sur la bannière sauge, accent vert forêt SOLIDE (pas de clip transparent) */
:root[data-home] .cta__title em {
  background: none;
  -webkit-text-fill-color: #1b4332;
  color: #1b4332;
}

/* Filets de séparation entre sections (structure sans alourdir) */
:root[data-home] .section + .section { border-top: 1px solid var(--line); }

/* Intro de section : mesure courte, pas de veuve, collée au titre */
:root[data-home] .section__lede {
  margin-top: -6px;
  max-width: none;   /* aligné sur le titre (pas de marge droite « en trop ») */
  text-wrap: pretty;
}

/* ═══════════════════════════════════════════════════════════
   Hero — composition 2 colonnes (tue le vide droit)
   ═══════════════════════════════════════════════════════════ */
:root[data-home] .hero { min-height: auto; align-items: stretch; overflow: visible; }
:root[data-home] .hero__content {
  padding-top: clamp(116px, 14vh, 168px);
  padding-bottom: clamp(56px, 8vh, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(40px, 5vw, 76px);
  align-items: center;
}
:root[data-home] .hero__title { max-width: 16ch; }

/* Pastille eyebrow : tint warm très léger plutôt qu'un blanc invisible */
:root[data-home] .hero__eyebrow {
  background: rgba(116, 168, 146, 0.07);
  border-color: rgba(45, 106, 79, 0.22);
  color: var(--green-strong);
}
:root[data-home] .hero__eyebrow-dot { box-shadow: 0 0 10px rgba(45, 106, 79, 0.5); }

/* CTA secondaire du hero : net, aligné sur le bouton */
:root[data-home] .hero__actions { align-items: center; }
:root[data-home] .hero__secondary {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-body);
  border-bottom: 1.5px solid var(--line-strong); padding-bottom: 4px;
}
:root[data-home] .hero__secondary:hover { color: var(--green-strong); border-color: var(--green-strong); }

/* Colonne droite : rail de réassurance (les 3 preuves réelles, verticales) */
:root[data-home] .hero__aside {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  border-left: 1px solid var(--line);
  padding-left: clamp(24px, 2.4vw, 40px);
}
:root[data-home] .hero__aside li {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text);
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px;
}
:root[data-home] .hero__aside li:first-child { padding-top: 0; }
:root[data-home] .hero__aside li:last-child { border-bottom: 0; padding-bottom: 0; }
:root[data-home] .hero__aside-ic {
  flex: none; width: 22px; height: 22px;
  color: var(--green-strong);   /* stroke=currentColor */
}

/* ═══════════════════════════════════════════════════════════
   3 expertises
   ═══════════════════════════════════════════════════════════ */
.home-expertises__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: clamp(40px, 5vw, 64px);
}
.home-expertise {
  position: relative;
  display: flex; flex-direction: column;
  padding: 28px 28px 26px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.4s, translate 0.4s var(--ease-out), box-shadow 0.4s;
}
.home-expertise:hover {
  border-color: var(--line-strong);
  border-top-color: var(--green-strong);  /* accent vert au survol seulement (retenue) */
  translate: 0 -2px;
}
.home-expertise__step {
  font-family: var(--font-display);
  font-size: var(--fs-caption);   /* ~10px (16/φ) */
  font-weight: 600; letter-spacing: 0.2em;
  color: var(--green-strong);
  margin-bottom: 16px;
}
.home-expertise__title {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.2vw, var(--fs-h3));  /* 26px = 16·φ */
  font-weight: 600; letter-spacing: -0.015em; line-height: 1.15;
  margin-bottom: 12px;
}
.home-expertise__text {
  font-size: var(--fs-body);
  color: var(--text-muted);
  margin-bottom: 24px;
  text-align: justify; hyphens: auto;
}
.home-expertise__links {
  list-style: none; margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);  /* le vide bas devient une zone d'action */
  display: flex; flex-direction: column; gap: 10px;
}
.home-expertise__links a {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-size: var(--fs-body); font-weight: 500;
  color: var(--green-strong);
}
.home-expertise__links a::after { content: "→"; transition: transform 0.3s var(--ease-out); }
.home-expertise__links a:hover::after { transform: translateX(3px); }

.home-expertises__more { margin-top: 28px; }
.home-expertises__more a {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--font-display);
  font-size: var(--fs-body); font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 3px;
  transition: color 0.3s, border-color 0.3s;
}
.home-expertises__more a:hover { color: var(--green-strong); border-color: var(--green-strong); }

/* ═══════════════════════════════════════════════════════════
   Hub 6 piliers
   ═══════════════════════════════════════════════════════════ */
.home-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: clamp(40px, 5vw, 64px);
}
.home-pillar {
  display: flex; flex-direction: column;
  padding: 28px;
  background: var(--bg-panel);  /* détache du fond crème */
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.35s, translate 0.35s var(--ease-out), box-shadow 0.35s;
}
.home-pillar:hover {
  border-color: var(--green);
  translate: 0 -2px;
  box-shadow: 0 8px 24px rgba(25, 25, 25, 0.05);  /* élévation douce et chaude */
}
.home-pillar__name {
  font-family: var(--font-display);
  font-size: var(--fs-h4);   /* ~20px (16·√φ) */
  font-weight: 600; letter-spacing: -0.01em;
  margin-bottom: 8px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.home-pillar__name span.arrow {
  color: var(--green-strong); font-weight: 700;
  transition: transform 0.3s var(--ease-out);
}
.home-pillar:hover .home-pillar__name span.arrow { transform: translateX(3px); }
.home-pillar__intent { font-size: var(--fs-body); color: var(--text-muted); line-height: 1.6; text-align: justify; hyphens: auto; }

/* ═══════════════════════════════════════════════════════════
   Preuve / interlocuteur local
   ═══════════════════════════════════════════════════════════ */
.home-proof { background: var(--bg-panel); }
.home-proof__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: start;  /* ancre les 2 colonnes en haut (supprime le vide centré) */
}
.home-proof__text .section__title { margin-bottom: 18px; }
/* le kicker .section__index est aussi un <p> → l'exclure pour ne pas le grossir */
.home-proof__text p:not(.section__index) {
  font-size: clamp(16px, 1.4vw, var(--fs-h4));  /* 16→20px, sur l'échelle */
  color: var(--text-muted);
  line-height: var(--lh-body);   /* 1.75 */
  max-width: var(--measure);     /* 66ch */
  margin-bottom: 24px;
  text-align: justify; hyphens: auto;  /* doctrine §9 */
}
.home-proof__link {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--font-display);
  font-size: var(--fs-body); font-weight: 600;
  color: var(--green-strong);
  border-bottom: 1px solid var(--green);
  padding-bottom: 3px;
  transition: gap 0.3s var(--ease-out);
}
.home-proof__link::after { content: "→"; }
.home-proof__link:hover { gap: 12px; }
.home-proof__points { list-style: none; display: grid; gap: 16px; margin-top: 6px; }
.home-proof__points li {
  position: relative;
  padding-left: 22px;
  font-size: var(--fs-body); line-height: 1.6;
  color: var(--text);
}
.home-proof__points li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green-strong);
}

/* ═══════════════════════════════════════════════════════════
   Méthode — réparer les pastilles d'étape (blanc sur crème = invisible)
   ═══════════════════════════════════════════════════════════ */
:root[data-home] .step__num {
  color: var(--green-strong);        /* #2D6A4F = 4.57:1 (AA), au lieu du muted délavé */
  border-color: var(--line-strong);
  font-weight: 600;
}
:root[data-home] .step.is-active .step__num {
  color: #fff;
  background: var(--grad-btn);       /* disque plein vert (pas de padding-box crème) */
  border-color: transparent;
  box-shadow: 0 0 24px rgba(45, 106, 79, 0.22);  /* halo vert, pas teal */
}

/* ═══════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  :root[data-home] .hero__content { grid-template-columns: 1fr; gap: 32px; }
  :root[data-home] .hero__aside {
    border-left: 0; border-top: 1px solid var(--line);
    padding-left: 0; padding-top: 22px;
    flex-direction: row; flex-wrap: wrap; gap: 10px 28px;
  }
  :root[data-home] .hero__aside li { border-bottom: 0; padding: 0; }
  .home-expertises__grid { grid-template-columns: 1fr; }
  .home-pillars { grid-template-columns: repeat(2, 1fr); }
  .home-proof__inner { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
  .home-pillars { grid-template-columns: 1fr; }
}