/* ==========================================================================
   Era Studio — charte graphique (v1, sept. 2026)
   Feuille de style de référence. À charger via le thème enfant ou
   Apparence > Personnaliser > CSS additionnel.
   Aucune couleur hors de cette palette. Aucun dégradé coloré.
   ========================================================================== */

:root {
  /* --- Couleurs ---------------------------------------------------------- */
  --era-ink:          #0A0A0A;  /* titres, corps, icônes, libellés nav */
  --era-ink-muted:    #46464C;  /* paragraphes de soutien, légendes */
  --era-ink-faint:    #8A8A92;  /* micro-labels non essentiels */
  --era-mint:         #95FFB4;  /* ACCENT UNIQUE */
  --era-mint-hover:   #7BEF9E;  /* survol des boutons mint */
  --era-mint-pale:    #D9F2E1;  /* disques portraits, formes de fond */
  --era-surface:      #F0F0F0;  /* fond des blocs / sections */
  --era-surface-alt:  #F8F8F8;  /* cartes imbriquées */
  --era-page:         #EFEEF4;  /* fond de page */
  --era-white:        #FFFFFF;  /* cartes flottantes, badges */
  --era-hairline:     #E4E4E8;  /* toutes les bordures 1px */
  --era-hairline-alt: #D8D8DE;  /* séparateurs verticaux internes */

  /* --- Typographie ------------------------------------------------------- */
  --era-font-sans: Figtree, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --era-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* --- Rayons ------------------------------------------------------------ */
  --era-radius-sm:   8px;    /* petits blocs, vignettes logos */
  --era-radius-md:   14px;   /* cartes, badges */
  --era-radius-lg:   22px;   /* grands panneaux */
  --era-radius-xl:   28px;   /* panneaux CTA pleine largeur */
  --era-radius-pill: 999px;  /* boutons, pastilles, avatars */

  /* --- Élévation --------------------------------------------------------- */
  --era-shadow-1: 0 6px 20px rgba(16, 16, 24, 0.06);
  --era-shadow-2: 0 18px 44px rgba(16, 16, 24, 0.10);

  /* --- Espacement (échelle 4/8) ----------------------------------------- */
  --era-space-1: 4px;   --era-space-2: 8px;   --era-space-3: 12px;
  --era-space-4: 16px;  --era-space-6: 24px;  --era-space-8: 32px;
  --era-space-12: 48px; --era-space-16: 64px; --era-space-24: 96px;

  --era-container: 1240px;
}

/* --------------------------------------------------------------------------
   1. Bases
   -------------------------------------------------------------------------- */
body.era {
  margin: 0;
  font-family: var(--era-font-sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--era-ink);
  background: var(--era-page);
  -webkit-font-smoothing: antialiased;
}
body.era a { color: var(--era-ink); text-decoration: none; }
body.era a:hover { color: #2AA35A; }
body.era a:focus-visible,
body.era button:focus-visible {
  outline: 2px solid var(--era-ink);
  outline-offset: 2px;
  border-radius: var(--era-radius-sm);
}
.era-container {
  width: 100%;
  max-width: var(--era-container);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 64px);
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   2. Typographie
   -------------------------------------------------------------------------- */
.era-display {
  margin: 0;
  font-size: clamp(40px, 7.5vw, 86px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.02;
  text-wrap: balance;
  isolation: isolate; /* requis : le surligneur mint se place en z-index -1 */
}
.era-h2 { margin: 0; font-size: clamp(28px, 3vw, 40px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.era-h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.era-body { margin: 0; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.55; color: var(--era-ink-muted); text-wrap: pretty; }
.era-body strong { color: var(--era-ink); font-weight: 700; }
.era-caption { font-size: 12px; color: var(--era-ink-muted); }
.era-micro {
  font-family: var(--era-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--era-ink-muted);
}

/* Surligneur mint — l'élément SEUL usage plein de l'accent dans un titre.
   Toujours sur un parent en isolation: isolate. */
.era-highlight { position: relative; font-style: italic; font-weight: 700; }
.era-highlight::before {
  content: '';
  position: absolute;
  inset: -3px -0.16em;
  background: var(--era-mint);
  transform: skewX(-11deg); /* suit l'inclinaison de l'italique */
  z-index: -1;
}

/* --------------------------------------------------------------------------
   3. Boutons — pilule, 48px, sans ombre
   -------------------------------------------------------------------------- */
.era-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: var(--era-radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.era-btn svg { flex: none; }
.era-btn--accent  { background: var(--era-mint); color: var(--era-ink); }
.era-btn--accent:hover  { background: var(--era-mint-hover); color: var(--era-ink); }
.era-btn--primary { background: var(--era-ink); color: var(--era-surface-alt); }
.era-btn--primary:hover { background: #262626; color: var(--era-surface-alt); }
.era-btn--ghost   { background: transparent; color: var(--era-ink); border-color: var(--era-ink); }
.era-btn--ghost:hover   { background: var(--era-ink); color: var(--era-surface-alt); }
.era-btn--quiet   { background: var(--era-white); color: var(--era-ink); border-color: var(--era-hairline); }
.era-btn--quiet:hover   { background: var(--era-surface); color: var(--era-ink); }
.era-btn--sm { font-size: 15px; padding: 13px 24px; }

/* --------------------------------------------------------------------------
   4. Cartes & surfaces
   -------------------------------------------------------------------------- */
.era-card {
  background: var(--era-white);
  border: 1px solid var(--era-hairline);
  border-radius: var(--era-radius-md);
  box-shadow: var(--era-shadow-1);
  box-sizing: border-box;
}
.era-card--flat  { box-shadow: none; }
.era-card--raised { box-shadow: var(--era-shadow-2); }
.era-panel {
  background: var(--era-surface);
  border: 1px solid var(--era-hairline);
  border-radius: var(--era-radius-xl);
  box-sizing: border-box;
}
.era-rule { width: 1px; align-self: stretch; background: var(--era-hairline); }
.era-rule--sm { height: 16px; background: var(--era-hairline-alt); }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.era-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px clamp(20px, 4vw, 56px);
  background: transparent;   /* IMPÉRATIF : le halo mint doit passer dessous */
  position: sticky;
  top: 0;
  z-index: 10;
  flex-wrap: wrap;
}
.era-header__logo { height: 52px; width: auto; display: block; }
.era-header__brand { display: flex; align-items: center; gap: 20px; }
.era-header__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.era-nav { display: none; align-items: center; gap: 14px; font-size: 15px; font-weight: 600; }
.era-nav__item { display: flex; align-items: center; gap: 8px; }
.era-nav__item svg { flex: none; }
@media (min-width: 1180px) {
  .era-nav { display: flex; }
  .era-header__brand .era-rule { display: block; height: 44px; }
}
@media (max-width: 760px) {
  .era-header { padding-block: 14px; }
  .era-header__logo { height: 36px; }
  .era-header__actions .era-btn--quiet { display: none; } /* le tél reste dans le hero */
}

/* --------------------------------------------------------------------------
   6. Hero + fond aurore mint
   -------------------------------------------------------------------------- */
.era-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: radial-gradient(120% 80% at 50% 0%, #FBFBFB 0%, #F1F0F6 55%, #E7E6EF 100%);
}
.era-hero__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 26px;
  padding: clamp(24px, 5vw, 64px) clamp(20px, 5vw, 64px) 88px;
}
.era-hero__lede { max-width: 56ch; }
.era-hero__title { max-width: 16ch; }

/* Couche décorative : à placer en premier enfant de .era-hero, aria-hidden */
.era-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.era-glow > * { position: absolute; }
.era-glow__halo {
  left: 50%; top: -18%; width: 130%; height: 96%;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(149,255,180,0.34) 0%, rgba(149,255,180,0.16) 38%, rgba(149,255,180,0) 72%);
  filter: blur(28px);
  animation: era-breathe 11s ease-in-out infinite;
}
.era-glow__sweep {
  left: 50%; top: -70%; width: 150%; height: 170%;
  transform: translateX(-50%);
  transform-origin: 50% 50%;
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(149,255,180,0) 0deg, rgba(149,255,180,0.22) 42deg, rgba(149,255,180,0) 96deg,
    rgba(149,255,180,0) 260deg, rgba(110,247,155,0.16) 310deg, rgba(149,255,180,0) 360deg);
  filter: blur(52px);
  opacity: 0.75;
  animation: era-sweep 46s linear infinite;
}
.era-glow__blob-a {
  left: -14%; top: 8%; width: 46vw; height: 46vw; max-width: 720px; max-height: 720px;
  border-radius: var(--era-radius-pill);
  background: radial-gradient(circle, rgba(110,247,155,0.30) 0%, rgba(149,255,180,0.10) 45%, rgba(149,255,180,0) 70%);
  filter: blur(46px);
  animation: era-drift-a 21s ease-in-out infinite;
}
.era-glow__blob-b {
  right: -12%; top: 22%; width: 42vw; height: 42vw; max-width: 660px; max-height: 660px;
  border-radius: var(--era-radius-pill);
  background: radial-gradient(circle, rgba(149,255,180,0.28) 0%, rgba(149,255,180,0.09) 48%, rgba(149,255,180,0) 72%);
  filter: blur(52px);
  animation: era-drift-b 27s ease-in-out infinite;
}
.era-glow__blob-c {
  left: 32%; bottom: -22%; width: 52vw; height: 34vw; max-width: 820px;
  border-radius: var(--era-radius-pill);
  background: radial-gradient(ellipse, rgba(180,255,205,0.26) 0%, rgba(149,255,180,0.08) 52%, rgba(149,255,180,0) 76%);
  filter: blur(58px);
  animation: era-drift-c 33s ease-in-out infinite;
}
/* Voile neutre haut : garde le header et les pastilles mint lisibles */
.era-glow__scrim-top {
  inset: 0 0 auto 0; height: 220px;
  background: linear-gradient(180deg, rgba(247,247,250,0.92) 0%, rgba(247,247,250,0.55) 55%, rgba(247,247,250,0) 100%);
}
/* Fondu bas vers le fond de page */
.era-glow__scrim-bottom {
  inset: 0;
  background: linear-gradient(180deg, rgba(239,238,244,0) 0%, rgba(239,238,244,0.35) 58%, rgba(239,238,244,0.92) 100%);
}
/* Grille technique masquée en radial */
.era-glow__grid {
  inset: 0; opacity: 0.5;
  background-image:
    linear-gradient(rgba(10,10,10,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 78%);
          mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 78%);
}

@keyframes era-drift-a { 0%,100% { transform: translate3d(-6%,-4%,0) scale(1);    } 50% { transform: translate3d(8%,6%,0) scale(1.18); } }
@keyframes era-drift-b { 0%,100% { transform: translate3d(6%,3%,0) scale(1.1);    } 50% { transform: translate3d(-8%,-7%,0) scale(0.9); } }
@keyframes era-drift-c { 0%,100% { transform: translate3d(0,4%,0) scale(0.95);    } 50% { transform: translate3d(-5%,-6%,0) scale(1.25); } }
@keyframes era-breathe { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes era-sweep   { to { transform: translateX(-50%) rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .era-glow > * { animation: none !important; }
}

/* --------------------------------------------------------------------------
   7. Badges & pastilles
   -------------------------------------------------------------------------- */
.era-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--era-white);
  border: 1px solid var(--era-hairline);
  border-radius: var(--era-radius-pill);
  padding: 7px 18px 7px 8px;
  box-shadow: var(--era-shadow-1);
  font-size: 15px;
  font-weight: 600;
}
.era-badge__year {
  font-family: var(--era-font-mono);
  font-size: 11px;
  font-weight: 500;
  background: var(--era-mint);
  color: var(--era-ink);
  border-radius: var(--era-radius-pill);
  padding: 5px 10px;
}
.era-pill-dark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--era-ink);
  color: var(--era-surface);
  border-radius: var(--era-radius-pill);
  padding: 11px 20px;
  font-size: 14px;
}
.era-pill-dark strong { color: var(--era-white); font-weight: 700; }
.era-pill-dark svg { stroke: var(--era-mint); flex: none; }

/* --------------------------------------------------------------------------
   8. Preuve sociale (avatars empilés + étoiles)
   -------------------------------------------------------------------------- */
.era-proof {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  background: var(--era-white);
  border: 1px solid var(--era-hairline);
  border-radius: var(--era-radius-md);
  padding: 12px 20px 12px 12px;
  box-shadow: var(--era-shadow-1);
}
.era-avatars { display: flex; }
.era-avatars > * {
  width: 40px; height: 40px;
  border-radius: var(--era-radius-pill);
  border: 2px solid var(--era-white);
  object-fit: cover;
  display: block;
  box-sizing: border-box;
}
.era-avatars > * + * { margin-left: -13px; }
.era-avatars__count {
  background: var(--era-mint);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--era-ink);
}
.era-stars { display: flex; align-items: center; gap: 2px; color: var(--era-ink); }
.era-stars svg { fill: currentColor; }
.era-proof__text { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.era-proof__text span { font-size: 14px; color: var(--era-ink-muted); }
.era-proof__text strong { color: var(--era-ink); font-weight: 700; }

/* Portrait détouré sur disque mint pâle */
.era-portrait {
  width: clamp(180px, 22vw, 320px);
  aspect-ratio: 1;
  border-radius: var(--era-radius-pill);
  background: radial-gradient(circle at 50% 35%, #E6FBEC 0%, var(--era-mint-pale) 60%, var(--era-mint) 100%);
  position: relative;
  display: grid;
  place-items: end center;
}
.era-portrait img { max-width: 118%; height: auto; display: block; } /* le sujet déborde */

/* --------------------------------------------------------------------------
   9. Bandeau logos clients
   -------------------------------------------------------------------------- */
.era-logos { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 44px; width: 100%; max-width: 900px; }
.era-logos__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 30px; opacity: 0.55; filter: grayscale(1); }
.era-logos__row img { height: 28px; width: auto; display: block; } /* hauteur optique constante */

/* --------------------------------------------------------------------------
   10. Grille de services
   -------------------------------------------------------------------------- */
.era-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.era-service { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.era-service__icon { color: var(--era-ink); }