/* ==========================================================================
   Era Studio - complements hero
   era-studio-tokens.css reste la source de verite et n'est pas modifie.
   On ne traite ici que ce que la charte ne couvrait pas : le recalage vertical
   depuis que le header est sorti du hero, les boutons Elementor natifs, et le
   bandeau de logos defilant.
   Aucune valeur nouvelle : uniquement des variables --era-*.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hauteur du hero
   La charte prevoyait 100vh quand le header etait DANS le hero. Il est
   maintenant au-dessus : on lui retire sa hauteur. svh et non vh, pour ne pas
   etre fausse par la barre d'URL des navigateurs mobiles.
   -------------------------------------------------------------------------- */
body.era .era-hero,
body.era .era-hero.e-con {
  min-height: calc(100svh - var(--era-header-h));
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

body.era .era-hero__body,
body.era .era-hero__body.e-con {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  text-align: center;
  gap: var(--era-space-6);
  width: 100%;
  max-width: var(--era-container);
  margin-inline: auto;
  padding: var(--era-space-8) clamp(20px, 5vw, 64px) var(--era-space-16);
  box-sizing: border-box;
}

/* Chaque bloc occupe toute la largeur disponible et centre son contenu par le
   texte. Compter sur align-items avec des largeurs automatiques laissait le
   titre deborder et decalait tout le hero vers la droite. */
body.era .era-hero__body > * {
  width: 100%;
  max-width: 100%;
  margin-bottom: 0;
  box-sizing: border-box;
}

/* Elementor rend le titre et l'accroche dans ses propres balises : on y reporte
   les mesures de la charte, faute de quoi elles resteraient aux valeurs du kit. */
body.era .era-hero__title .elementor-heading-title {
  margin: 0;
  max-width: 16ch;
  margin-inline: auto;
  overflow-wrap: break-word;
  font-family: var(--era-font-sans);
  font-size: clamp(40px, 7.5vw, 86px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: var(--era-ink);
  text-wrap: balance;
  isolation: isolate; /* sans quoi le bloc mint passerait DEVANT le texte */
}
body.era .era-hero__title .era-highlight { position: relative; font-style: italic; font-weight: 700; }

body.era .era-hero__lede { text-align: center; }
body.era .era-hero__lede p {
  margin: 0 auto;
  max-width: 56ch;
  font-family: var(--era-font-sans);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--era-ink-muted);
  text-wrap: pretty;
}
body.era .era-hero__lede strong { color: var(--era-ink); font-weight: 700; }

body.era .era-micro .elementor-heading-title {
  font-family: var(--era-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--era-ink-muted);
}

/* --------------------------------------------------------------------------
   2. Boutons Elementor natifs habilles par la charte
   Les libelles restent editables au clic. Les icones sont des masques CSS :
   aucune bibliotheque d'icones n'est chargee.
   -------------------------------------------------------------------------- */
body.era .era-hero__actions,
body.era .era-hero__actions.e-con {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--era-space-3);
  width: auto;
  padding: 0;
}

body.era .era-cta-primary .elementor-button,
body.era .era-cta-ghost .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--era-font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 15px 30px;
  border-radius: var(--era-radius-pill);
  border: 1px solid transparent;
  box-shadow: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}

body.era .era-cta-primary .elementor-button {
  background-color: var(--era-mint);
  color: var(--era-ink);
}
body.era .era-cta-primary .elementor-button:hover {
  background-color: var(--era-mint-hover);
  color: var(--era-ink);
}

body.era .era-cta-ghost .elementor-button {
  background-color: transparent;
  color: var(--era-ink);
  border-color: var(--era-ink);
}
body.era .era-cta-ghost .elementor-button:hover {
  background-color: var(--era-ink);
  color: var(--era-surface-alt);
}

/* Icones en masque : la fleche suit le libelle, le combine le precede. */
body.era .era-cta-primary .elementor-button-text::after,
body.era .era-cta-ghost .elementor-button-text::before {
  content: '';
  display: inline-block;
  width: 17px;
  height: 17px;
  vertical-align: -3px;
  background-color: currentColor;
  -webkit-mask: var(--era-icon) center / contain no-repeat;
          mask: var(--era-icon) center / contain no-repeat;
}
body.era .era-cta-primary .elementor-button-text::after {
  margin-left: 10px;
  --era-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}
body.era .era-cta-ghost .elementor-button-text::before {
  margin-right: 10px;
  --era-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.2 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   3. Bandeau de logos defilant
   Alimente par un widget Galerie d'images : ajouter ou retirer un logo dans la
   mediatheque suffit. La piste est dupliquee en JavaScript pour boucler sans
   saut. Defilement suspendu au survol et au focus clavier, et desactive sous
   prefers-reduced-motion (WCAG 2.2.2).
   -------------------------------------------------------------------------- */
body.era .era-marquee {
  width: 100%;
  max-width: 980px;
  margin-top: var(--era-space-8);
  margin-inline: auto; /* sans cela le bandeau restait cale a gauche */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
body.era .era-marquee__viewport {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
body.era .era-marquee .gallery {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 40px;
  width: max-content;
  margin: 0;
  /* Logos en couleurs d'origine : ecart assume a la section 5 du brief, qui
     prevoyait niveaux de gris et opacite 55 %. */
  opacity: 1;
  filter: none;
  animation: era-marquee 28s linear infinite;
}
body.era .era-marquee .gallery-item {
  margin: 0 !important;
  width: auto !important;
  float: none !important;
  flex: none;
}
body.era .era-marquee .gallery-item img {
  height: 46px;
  width: auto;
  max-width: none;
  display: block;
  border: 0 !important;
}
body.era .era-marquee .gallery-caption { display: none; }

@keyframes era-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 20px)); }
}

body.era .era-marquee__viewport:hover .gallery,
body.era .era-marquee__viewport:focus-within .gallery { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  body.era .era-marquee .gallery {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
  }
  body.era .era-marquee__viewport {
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* Tant qu'aucun logo n'est depose, le bloc entier s'efface. */
body.era .era-marquee.is-empty { display: none; }

/* --------------------------------------------------------------------------
   4. Ajustements fins du contenu
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  body.era .era-hero__body { gap: var(--era-space-4); padding-bottom: var(--era-space-12); }
  body.era .era-hero__actions { width: 100%; flex-direction: column; }
  body.era .era-hero__actions .elementor-widget-button,
  body.era .era-hero__actions .elementor-button { width: 100%; }
  body.era .era-proof { width: 100%; box-sizing: border-box; }
}

/* --------------------------------------------------------------------------
   5. Preuve sociale
   Le theme applique img { height: auto }, qui ecrasait la hauteur de 40 px des
   avatars et les rendait ovales. On repasse devant avec un selecteur plus fort.
   -------------------------------------------------------------------------- */
body.era .era-proof .era-avatars > * {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--era-radius-pill);
  border: 2px solid var(--era-white);
  object-fit: cover;
  box-sizing: border-box;
  display: block;
  max-width: none;
}
body.era .era-proof .era-avatars > * + * { margin-left: -13px; }
body.era .era-proof .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);
}
body.era .era-proof .era-stars svg { fill: currentColor; }

/* era-marquee-mobile : hauteur des logos reduite sur petits ecrans */
@media (max-width: 560px) {
  body.era .era-marquee .gallery-item img { height: 34px; }
  body.era .era-marquee .gallery { gap: 24px; }
}

/* --------------------------------------------------------------------------
   Etoiles de la preuve sociale
   Ecart assume : le brief imposait des etoiles noires et interdisait
   explicitement les etoiles jaunes, et la palette ne contient aucun jaune.
   Choix de Damien, a reporter dans BRIEF-WORDPRESS.md (sections 2 et 5, et la
   recette de validation en section 8).
   -------------------------------------------------------------------------- */
:root { --era-stars: #F0A500; }
body.era .era-proof .era-stars { color: var(--era-stars); }
body.era .era-proof .era-stars svg { fill: currentColor; }