/* ==========================================================================
   Bloc « Entretien d'orientation » — partial entretien-orientation.php
   Feuille autonome, scopee sous .eo, chargeable sur n'importe quelle page.
   style.css est compile depuis scss/ : ne rien y fusionner sans repasser
   par les sources.
   ========================================================================== */

.eo {
  --eo-ink: #4A4A4A;
  --eo-ink-2: #666666;
  --eo-green: #43AA8B;
  --eo-green-dark: #216051;
  --eo-brown: #CA9E67;
  --eo-brown-dark: #A97E45;
  /* Couleur d'accent : reprise de la filiere quand le bloc est pose dans une
     page de formation (.fp--mtc, .fp--mte), vert EPSN partout ailleurs
     (page contact par exemple). */
  --eo-accent: var(--fp-accent, #43AA8B);
  --eo-accent-bg: var(--fp-accent-bg, #EEF6F4);
  --eo-rule: #EAD8C2;
  --eo-error: #87180F;
  --eo-display: "Euclid Flex Medium", "Euclid Flex", sans-serif;
  --eo-text: "Suisse intl", Arial, sans-serif;
  --eo-medium: "Suisse intl Medium", "Suisse intl", Arial, sans-serif;

  background: #fff;
  border-bottom: 1px solid var(--eo-rule);
  font-family: var(--eo-text);
  font-size: 16px;
  line-height: 24px;
  color: var(--eo-ink);
  scroll-margin-top: 184px;
}

.eo *, .eo *::before, .eo *::after { box-sizing: border-box; }
.eo p { margin: 0; color: var(--eo-ink); font-size: 16px; line-height: 24px; }

.eo__inner {
  max-width: 1280px; margin: 0 auto; padding: 80px 24px;
  display: flex; flex-wrap: wrap; gap: 40px 64px; align-items: flex-start;
}
.eo__intro { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.eo__eyebrow {
  font-family: var(--eo-medium); font-weight: 500; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--eo-brown-dark);
}
.eo h2 {
  margin: 0; font-family: var(--eo-display); font-weight: 500;
  font-size: clamp(26px, 3.2vw, 34px); line-height: 1.2; color: var(--eo-brown);
}
.eo__intro p { max-width: 520px; }
.eo__reassurance { font-size: 15px; color: var(--eo-ink-2); }

.eo__card {
  flex: 1 1 460px; min-width: 0; background: var(--eo-accent-bg);
  border-top: 6px solid var(--eo-accent); padding: clamp(22px, 3vw, 36px);
}
.eo__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.eo__field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
/* .eo en tete : style.css colore les label en brun et les input en vert pale */
.eo .eo__label { font-family: var(--eo-medium); font-weight: 500; font-size: 14px; color: var(--eo-ink); }
.eo .eo__field input {
  height: 48px; border: 1px solid var(--eo-rule); border-radius: 0; padding: 0 14px;
  font-family: var(--eo-text); font-size: 16px; color: var(--eo-ink);
  background: #fff; outline: none; transition: border-color .3s ease-in-out;
}
.eo .eo__field input:focus { border-color: var(--eo-green); }
.eo .eo__field input.is-invalid { border-color: var(--eo-error); }
.eo__hint { font-size: 13px; color: var(--eo-ink-2); }

/* piege a robots : hors ecran, jamais visible ni tabulable */
.eo__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.eo__submit {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap;
  gap: 12px 20px; align-items: center; margin-top: 8px;
}
/* neutralise le button:hover global de style.css */
.eo .eo__button {
  font-family: var(--eo-medium); font-weight: 500; font-size: 18px;
  background: var(--eo-green); color: #fff; padding: 14px 40px;
  border: none; border-radius: 50px; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.2); transition: all .3s ease-in-out;
}
.eo .eo__button:hover,
.eo .eo__button:focus { background: var(--eo-green-dark); color: #fff; box-shadow: none; }
.eo .eo__button[disabled] { opacity: .6; cursor: default; }
.eo__rgpd { font-size: 13px; color: var(--eo-ink-2); }
.eo__error { grid-column: 1 / -1; color: var(--eo-error); font-size: 15px; }

.eo__done { display: flex; flex-direction: column; gap: 10px; }
.eo__done-title { font-family: var(--eo-display); font-weight: 500; font-size: 24px; line-height: 30px; }

@media (max-width: 1199.98px) {
  .eo { scroll-margin-top: 128px; }
}

@media (max-width: 767.98px) {
  .eo__inner { padding: 56px 24px; }
}