/* ==========================================================================
   Endogeni — styles propres à la page d'accueil
   ========================================================================== */

/* ==========================================================================
   1. Hero
   ========================================================================== */
.hero {
  position: relative;
  overflow: clip;
  min-height: 900px;
  display: flex;
  align-items: center;
  padding-block: 8px 80px;
}

.hero__wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 72px;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 48px;
  align-items: center;
}

.hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }

.hero__title { max-width: 14ch; }
.hero__lead { max-width: 60ch; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* --- Sol numérique -------------------------------------------------------- */
.hero-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 460px;
  z-index: 0;
  perspective: 520px;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #fff 34%, #fff 74%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #fff 34%, #fff 74%, transparent 100%);
}

.hero-floor__grid {
  position: absolute;
  left: -70%;
  right: -70%;
  bottom: 0;
  height: 1000px;
  transform: rotateX(68deg);
  transform-origin: 50% 100%;
  background-image:
    repeating-linear-gradient(to bottom, rgba(90, 100, 220, .28) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(to right,  rgba(90, 100, 220, .28) 0 1px, transparent 1px 64px);
  animation: floor-scroll 2.6s linear infinite;
}

@keyframes floor-scroll {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 0 64px, 0 0; }
}

/* --- Visuel : orbe + grand « e » ------------------------------------------ */
.hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 620px;
}

.hero__orb {
  width: 620px;
  left: 50%;
  top: 50%;
  margin-left: -310px;
  margin-top: -310px;
}

.hero-e {
  position: relative;
  z-index: 1;
  width: 440px;
  max-width: 100%;
  animation: hero-float 7s ease-in-out infinite;
}

.hero-e__svg { width: 100%; height: auto; overflow: visible; }

@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* « e » de base, en blanc */
.hero-e__bar,
.hero-e__loop {
  fill: none;
  stroke: #fff;
  stroke-width: 10;
  stroke-linecap: round;
}

/* la boucle se dessine à l'ouverture de la page */
.hero-e__loop {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: hero-draw 2s ease-out .1s forwards;
}

@keyframes hero-draw { to { stroke-dashoffset: 0; } }

/* le point et son halo */
.hero-e__halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: halo-pulse 2.25s ease-out infinite;
}

@keyframes halo-pulse {
  0%   { transform: scale(1);   opacity: .5; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* orbites */
.hero-e__orbit { fill: none; stroke: #fff; stroke-width: .3; }
.hero-e__orbit--dashed { stroke-dasharray: 2 3; }

.hero-e__orbit-group {
  transform-box: view-box;
  transform-origin: 64px 60px;
}

.hero-e__orbit-group--a { animation: orbit-cw 30s linear infinite; }
.hero-e__orbit-group--b { animation: orbit-ccw 48s linear infinite; }

@keyframes orbit-cw  { to { transform: rotate(360deg); } }
@keyframes orbit-ccw { to { transform: rotate(-360deg); } }

/* propagation : le choc parcourt le point, la barre, puis la boucle */
.hero-e__pulse,
.hero-e__trail {
  fill: none;
  stroke: var(--c-violet);
  stroke-linecap: round;
  opacity: 0;
}

.hero-e__pulse {
  stroke-width: 12;
  stroke-dasharray: .01 200;
  animation: prop-run 4.5s linear infinite, prop-fade 4.5s linear infinite;
}

.hero-e__trail {
  stroke-width: 10;
  stroke-dasharray: 16 200;
  animation: prop-run-trail 4.5s linear infinite, prop-fade-trail 4.5s linear infinite;
}

@keyframes prop-run {
  0%        { stroke-dashoffset: 0; }
  58%, 100% { stroke-dashoffset: -100; }
}

@keyframes prop-run-trail {
  0%        { stroke-dashoffset: 16; }
  58%, 100% { stroke-dashoffset: -84; }
}

@keyframes prop-fade {
  0%  { opacity: 0; }
  6%  { opacity: 1; }
  52% { opacity: 1; }
  60%, 100% { opacity: 0; }
}

@keyframes prop-fade-trail {
  0%  { opacity: 0; }
  8%  { opacity: .55; }
  52% { opacity: .55; }
  60%, 100% { opacity: 0; }
}

/* ondes à l'arrivée */
.hero-e__wave {
  fill: none;
  stroke-width: 1.2;
  opacity: 0;
  transform-box: view-box;
  transform-origin: 64px 60px;
  animation: wave-out 4.5s ease-out infinite;
}

.hero-e__wave:nth-child(2) { animation-delay: .35s; }
.hero-e__wave:nth-child(3) { animation-delay: .7s; }

@keyframes wave-out {
  0%, 56%   { transform: scale(1);    opacity: 0; }
  58%       { transform: scale(1);    opacity: .65; }
  90%, 100% { transform: scale(1.75); opacity: 0; }
}

/* --- Pastilles de bas de hero --------------------------------------------- */
.hero__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.hero__fact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 22px;
  border-radius: var(--r-tile);
}

.hero__fact-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  line-height: 1.3;
}

.hero__fact-label--violet       { color: var(--c-violet); }
.hero__fact-label--blue         { color: var(--c-blue); }
.hero__fact-label--cyan         { color: #14A6B3; }
.hero__fact-label--violet-light { color: var(--c-violet-soft); }

.hero__fact-text { font-size: 14px; color: var(--c-ink-soft); line-height: 1.5; }


/* ==========================================================================
   2. Méthode
   ========================================================================== */
.orb--page-left   { width: 720px; left: -280px;  top: 60px; }
.orb--page-right  { width: 780px; right: -300px; top: 20px; }
.orb--page-center { width: 860px; left: 50%; margin-left: -430px; top: -140px; }

.methode__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.methode__card { display: flex; flex-direction: column; gap: 14px; }
.methode__num  { font-size: 30px; }


/* ==========================================================================
   3. Technologie
   ========================================================================== */
.moteur__panel { padding: 56px; }

.moteur__diagram {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px minmax(0, 2.1fr) 76px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}

 /* courbes de liaison : une colonne de grille dédiée entre chaque bloc */
.moteur__wire {
  position: relative;
  align-self: stretch;
  pointer-events: none;
}

/* en absolu : les courbes ne pèsent pas sur la hauteur de la rangée */
.moteur__wire svg {
  position: absolute;
  inset: 56px 0 0 0;
  width: 100%;
  height: calc(100% - 56px);
}

.moteur__link path {
  fill: none;
  stroke-width: 1.4;
  stroke-dasharray: 6 8;
  vector-effect: non-scaling-stroke;
  animation: link-dash 1.4s linear infinite;
}

@keyframes link-dash { to { stroke-dashoffset: -14; } }

.moteur__col {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.moteur__list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  flex: 1;
}

.moteur__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--r-tile);
  font-size: 14px;
  line-height: 1.45;
  color: var(--c-ink);
}

.moteur__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.moteur__arrow { color: var(--c-violet); font-size: 15px; line-height: 1; flex: none; }

/* --- Le moteur ------------------------------------------------------------- */
.moteur__core {
  position: relative;
  z-index: 1;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.moteur__core:hover { transform: none; }

.moteur__core-orb { width: 260px; right: -90px; top: -90px; }

.moteur__core-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.moteur__core-mark { width: 30px; height: 30px; overflow: visible; flex: none; }

.moteur__core-title {
  font-family: var(--font-display);
  letter-spacing: var(--track-display);
  font-size: 20px;
  margin: 0;
  flex: 1;
  min-width: 0;
}

.moteur__core-badge { margin: 0; }

.moteur__tiles {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.moteur__tile { padding: 16px 18px; border-radius: var(--r-tile); }

.moteur__tile-title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--c-ink);
  line-height: 1.35;
}

.moteur__tile-text { font-size: 13px; color: var(--c-ink-soft); line-height: 1.5; margin: 0; }


/* ==========================================================================
   4. Domaines
   ========================================================================== */
.domaines__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 290px;
  gap: var(--grid-gap);
}

.domaines__card--4 { grid-column: span 4; }
.domaines__card--8 { grid-column: span 8; }

.domaines__card { display: flex; flex-direction: column; }

.domaines__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.domaines__num { font-size: 26px; }

.domaines__badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill);
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1;
  color: var(--c-violet);
  background: rgba(107, 75, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(107, 75, 255, .2);
}

.domaines__title { margin-top: auto; padding-top: 24px; }
.domaines__card .card__text { margin-top: 12px; }

.domaines__card--wide .card__text { max-width: 58ch; }
.domaines__orb { width: 300px; right: -100px; top: -110px; }
.domaines__card--wide .domaines__top,
.domaines__card--wide .domaines__title,
.domaines__card--wide .card__text { position: relative; z-index: 1; }

/* --- Bandeau transversal ---------------------------------------------------- */
.domaines__banner {
  grid-column: span 8;
  border-radius: var(--r-card);
  padding: 32px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  color: var(--c-white);
  box-shadow: var(--shadow-violet);
}

.domaines__banner-copy { flex: 1 1 340px; }
.domaines__banner-label { color: rgba(255, 255, 255, .78); margin-bottom: 14px; }

.domaines__banner-text {
  font-family: var(--font-display);
  letter-spacing: var(--track-display);
  font-size: 22px;
  line-height: 1.35;
}

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

.domaines__banner-pill {
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .34);
  color: var(--c-white);
  font-size: 13px;
  font-weight: 500;
}

.domaines__banner-pill--solid {
  background: var(--c-white);
  border-color: var(--c-white);
  color: var(--c-violet);
}


/* ==========================================================================
   5. Offres
   ========================================================================== */
.offres__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.offres__card { display: flex; flex-direction: column; gap: 16px; }
.offres__num  { font-size: 46px; }


/* ==========================================================================
   6. Citation
   ========================================================================== */
.citation__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
}

.citation__mark { width: 72px; height: 72px; overflow: visible; }

.citation__quote {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: var(--track-display);
  font-size: var(--fs-quote);
  line-height: 1.24;
  max-width: 22ch;
}


/* ==========================================================================
   7. Contact
   ========================================================================== */
.contact__panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}

.contact__orb { width: 420px; right: -130px; top: -160px; }

.contact__copy { position: relative; z-index: 1; flex: 1 1 520px; }
.contact__title { margin-top: 16px; max-width: 20ch; }

.contact__action {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  text-align: right;
}

.contact__email { font-size: var(--fs-small); color: var(--c-ink-soft); }


/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1279px) {
  .hero { min-height: 0; padding-block: 8px 72px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .hero__title { max-width: none; }
  .hero__visual { min-height: 420px; }
  .hero__orb { width: 460px; margin-left: -230px; margin-top: -230px; }
  .hero-e { width: 360px; }
  .hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .methode__grid,
  .offres__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .moteur__panel { padding: 36px; }
  .moteur__diagram { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .moteur__wire { display: none; }
  .moteur__list { justify-content: flex-start; }

  .domaines__grid { grid-auto-rows: auto; }
  .domaines__card--4 { grid-column: span 6; }
  .domaines__card--8,
  .domaines__banner { grid-column: span 12; }
  .domaines__title { padding-top: 32px; }

  .citation__quote { max-width: 26ch; }

  .contact__action { align-items: flex-start; text-align: left; }
}

@media (max-width: 860px) {
  .hero { padding-block: 0 56px; }
  .hero__wrap { gap: 48px; }
  .hero__grid { gap: 40px; }
  .hero__copy { align-items: flex-start; }

  .hero__visual { min-height: 340px; }
  .hero-e { width: 300px; margin-inline: auto; }
  .hero__orb { width: 360px; margin-left: -180px; margin-top: -180px; }

  .hero-floor { height: 320px; }
  .hero__actions .btn { flex: 1 1 100%; }

  .hero__facts { grid-template-columns: minmax(0, 1fr); gap: 12px; }

  .methode__grid,
  .offres__grid { grid-template-columns: minmax(0, 1fr); }

  .moteur__panel { padding: 24px; }
  .moteur__core { padding: 20px; }
  .moteur__tiles { grid-template-columns: minmax(0, 1fr); }

  .domaines__card--4 { grid-column: span 12; }
  .domaines__title { padding-top: 24px; }
  .domaines__banner { padding: 24px; }
  .domaines__banner-text { font-size: 18px; }

  .citation__figure { gap: 28px; }
  .citation__mark { width: 56px; height: 56px; }
  .citation__quote { max-width: none; }

  .contact__panel { gap: 28px; }
  .contact__title { max-width: none; }
  .contact__action { width: 100%; }
  .contact__action .btn { width: 100%; }
}