/**
 * Archétypes éditoriaux Phase 2.
 *
 * Règle de direction artistique :
 * --------------------------------
 * on évite les grilles de cartes identiques. Les pages alternent listes
 * éditoriales, séquences, grands espaces, photos et blocs sombres. La couleur sert
 * de repère, pas de remplissage décoratif systématique.
 */

/* --------------------------------------------------------------------------
   Hero intérieur
   -------------------------------------------------------------------------- */

.ey-inner-hero {
  padding: 72px 0 78px;
  background: var(--ey-white);
}

.ey-inner-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(390px, .78fr);
  gap: 76px;
  align-items: center;
}

.ey-inner-hero h1 {
  max-width: 810px;
  font-size: clamp(2.8rem, 4.8vw, 4.9rem);
}

.ey-inner-hero__lead {
  max-width: 720px;
  margin-top: 22px;
  color: var(--ey-paper-700);
  font-size: 1.05rem;
}

.ey-inner-hero .ey-actions {
  margin-top: 30px;
}

.ey-inner-hero__visual {
  position: relative;
  min-width: 0;
}

.ey-photo--inner {
  height: 520px;
  border-radius: var(--ey-radius-md);
  box-shadow: var(--ey-shadow-soft);
}

.ey-inner-hero__aside {
  position: relative;
  width: 86%;
  margin: -44px 0 0 auto;
  padding: 22px 24px 22px 30px;
  border-left: 4px solid var(--ey-elan);
  background: rgba(255,255,255,.97);
  box-shadow: var(--ey-shadow-soft);
  color: var(--ey-paper-700);
  font-size: .84rem;
}

.ey-inner-hero__motif {
  position: absolute;
  top: -24px;
  right: 12px;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Situations / problèmes : liste éditoriale plutôt que cartes
   -------------------------------------------------------------------------- */

.ey-problem-layout {
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
  gap: 86px;
}

.ey-section-heading--sticky {
  position: sticky;
  top: 120px;
  align-self: start;
}

.ey-editorial-rows {
  border-top: 1px solid var(--ey-paper-100);
}

.ey-editorial-rows article {
  display: grid;
  grid-template-columns: 46px minmax(220px, .85fr) minmax(260px, 1fr);
  gap: 20px;
  padding: 27px 0 29px;
  border-bottom: 1px solid var(--ey-paper-100);
}

.ey-editorial-rows span {
  color: var(--ey-elan);
  font-size: .68rem;
  font-weight: 700;
}

.ey-editorial-rows h3 {
  font-size: 1.04rem;
  line-height: 1.38;
}

.ey-editorial-rows p {
  color: var(--ey-paper-500);
  font-size: .82rem;
}

.ey-editorial-rows--quotes h3 {
  font-size: 1.08rem;
}

/* --------------------------------------------------------------------------
   Ce qu'on travaille
   -------------------------------------------------------------------------- */

.ey-work-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 34px;
  border-top: 1px solid var(--ey-paper-100);
}

.ey-work-grid article {
  padding: 29px 0 0;
}

.ey-work-grid b {
  display: block;
  margin-bottom: 18px;
  color: var(--ey-elan);
  font-size: .68rem;
}

.ey-work-grid h3 {
  margin-bottom: 9px;
  font-size: 1rem;
}

.ey-work-grid p {
  color: var(--ey-paper-500);
  font-size: .8rem;
}

/* --------------------------------------------------------------------------
   Séquence sombre
   -------------------------------------------------------------------------- */

.ey-sequence-layout {
  display: grid;
  grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr);
  gap: 90px;
}

.ey-sequence {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255,255,255,.22);
}

.ey-sequence li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  padding: 21px 0;
  border-bottom: 1px solid rgba(255,255,255,.16);
}

.ey-sequence li > span {
  color: var(--ey-curiosity);
  font-size: .68rem;
  font-weight: 700;
}

.ey-sequence strong {
  color: var(--ey-white);
  font-family: var(--ey-font-display);
  font-size: .92rem;
}

.ey-sequence p {
  margin-top: 4px;
  color: rgba(255,255,255,.62);
  font-size: .8rem;
}

/* --------------------------------------------------------------------------
   Liens contextuels
   -------------------------------------------------------------------------- */

.ey-related-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  border-top: 1px solid var(--ey-paper-100);
}

.ey-related-links a {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px 22px 0;
  border-bottom: 1px solid var(--ey-paper-100);
  color: var(--ey-confidence);
  font-weight: 700;
  text-decoration: none;
}

.ey-related-links a:nth-child(odd) {
  border-right: 1px solid var(--ey-paper-100);
}

.ey-related-links a:nth-child(even) {
  padding-left: 24px;
}

.ey-related-links i {
  color: var(--ey-potential);
  font-style: normal;
}

/* --------------------------------------------------------------------------
   Hubs matières / niveaux / examens
   -------------------------------------------------------------------------- */

.ey-subject-index,
.ey-level-path {
  border-top: 1px solid var(--ey-paper-100);
}

.ey-subject-index a,
.ey-level-path a {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) 34px;
  gap: 24px;
  align-items: center;
  padding: 31px 0;
  border-bottom: 1px solid var(--ey-paper-100);
  text-decoration: none;
}

.ey-subject-index a > span,
.ey-level-path a > span {
  color: var(--ey-elan);
  font-size: .7rem;
  font-weight: 700;
}

.ey-subject-index h2,
.ey-level-path h2 {
  margin-bottom: 6px;
  font-size: clamp(1.5rem,2.4vw,2.2rem);
}

.ey-subject-index p,
.ey-level-path p {
  max-width: 720px;
  color: var(--ey-paper-500);
}

.ey-subject-index i,
.ey-level-path i {
  color: var(--ey-potential);
  font-size: 1.4rem;
  font-style: normal;
}

.ey-editorial-note {
  max-width: 760px;
  margin-top: 38px;
  padding-left: 20px;
  border-left: 3px solid var(--ey-curiosity);
  color: var(--ey-paper-700);
}

/* --------------------------------------------------------------------------
   Matières : compétences + niveaux
   -------------------------------------------------------------------------- */

.ey-skill-layout {
  display: grid;
  grid-template-columns: minmax(320px,.8fr) minmax(0,1.2fr);
  gap: 80px;
  align-items: start;
}

.ey-skill-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ey-skill-cloud li {
  padding: 11px 15px;
  border: 1px solid var(--ey-paper-100);
  border-radius: 999px;
  color: var(--ey-confidence);
  font-weight: 700;
}

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

.ey-dark-columns article {
  padding-right: 34px;
  border-right: 1px solid rgba(255,255,255,.16);
}

.ey-dark-columns article + article {
  padding-left: 34px;
}

.ey-dark-columns article:last-child {
  border-right: 0;
}

.ey-dark-columns h3 {
  margin-bottom: 10px;
  color: var(--ey-white);
}

.ey-dark-columns p {
  color: rgba(255,255,255,.64);
  font-size: .82rem;
}

/* --------------------------------------------------------------------------
   Niveaux
   -------------------------------------------------------------------------- */

.ey-level-challenges {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 44px;
  border-top: 1px solid var(--ey-paper-100);
}

.ey-level-challenges article {
  padding-top: 28px;
}

.ey-level-challenges span {
  color: var(--ey-elan);
  font-size: .68rem;
  font-weight: 700;
}

.ey-level-challenges h3 {
  margin: 16px 0 8px;
}

.ey-level-challenges p {
  color: var(--ey-paper-500);
  font-size: .82rem;
}

.ey-milestone-layout {
  display: grid;
  grid-template-columns: minmax(300px,.85fr) minmax(0,1.15fr);
  gap: 80px;
  align-items: start;
}

.ey-milestone-layout > div:first-child p:not(.ey-overline) {
  max-width: 560px;
  color: var(--ey-paper-500);
}

.ey-milestones {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ey-paper-100);
}

.ey-milestones li {
  display: grid;
  grid-template-columns: 48px 1fr;
  padding: 18px 0;
  border-bottom: 1px solid var(--ey-paper-100);
}

.ey-milestones span {
  color: var(--ey-elan);
  font-size: .68rem;
}

.ey-milestones strong {
  color: var(--ey-confidence);
}

/* --------------------------------------------------------------------------
   Examens
   -------------------------------------------------------------------------- */

.ey-exam-routes {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 0 54px;
  border-top: 1px solid var(--ey-paper-100);
}

.ey-exam-routes a {
  position: relative;
  padding: 30px 0 34px;
  border-bottom: 1px solid var(--ey-paper-100);
  text-decoration: none;
}

.ey-exam-routes span,
.ey-exam-routes i {
  color: var(--ey-elan);
  font-size: .68rem;
  font-style: normal;
  font-weight: 700;
}

.ey-exam-routes h2 {
  margin: 15px 0 9px;
  font-size: 1.45rem;
}

.ey-exam-routes p {
  max-width: 500px;
  color: var(--ey-paper-500);
  font-size: .82rem;
}

.ey-exam-routes i {
  display: block;
  margin-top: 16px;
  color: var(--ey-potential);
}

.ey-exam-timeline-layout {
  display: grid;
  grid-template-columns: minmax(300px,.72fr) minmax(0,1.28fr);
  gap: 88px;
}

.ey-exam-timeline {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ey-exam-timeline::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 12px;
  left: 17px;
  width: 1px;
  background: var(--ey-paper-100);
}

.ey-exam-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 17px;
  padding: 0 0 30px;
}

.ey-exam-timeline li > span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--ey-paper-100);
  border-radius: 50%;
  background: var(--ey-paper-25);
  color: var(--ey-elan);
  font-size: .64rem;
  font-weight: 700;
}

.ey-exam-timeline h3 {
  margin-bottom: 7px;
  font-size: 1.04rem;
}

.ey-exam-timeline p {
  color: var(--ey-paper-500);
  font-size: .82rem;
}

.ey-focus-strip {
  padding-top: 28px;
  border-top: 1px solid var(--ey-paper-100);
}

.ey-focus-strip ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.ey-focus-strip li {
  padding: 10px 13px;
  border-radius: 999px;
  background: var(--ey-potential-50);
  color: var(--ey-potential);
  font-size: .78rem;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   CTA intérieur
   -------------------------------------------------------------------------- */

.ey-final-cta--inner {
  padding: 22px 0 92px;
}

/* --------------------------------------------------------------------------
   Demande parent
   -------------------------------------------------------------------------- */

.ey-demand-hero {
  padding: 76px 0 68px;
}

.ey-demand-hero__grid {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(300px,.7fr);
  gap: 80px;
  align-items: end;
}

.ey-demand-hero h1 {
  max-width: 800px;
  font-size: clamp(2.8rem,4.9vw,4.8rem);
}

.ey-demand-hero__lead {
  max-width: 670px;
  margin-top: 20px;
  color: var(--ey-paper-700);
  font-size: 1.02rem;
}

.ey-demand-steps {
  border-top: 1px solid var(--ey-paper-100);
}

.ey-demand-steps div {
  display: grid;
  grid-template-columns: 42px 1fr;
  padding: 13px 0;
  border-bottom: 1px solid var(--ey-paper-100);
}

.ey-demand-steps b {
  color: var(--ey-elan);
  font-size: .68rem;
}

.ey-demand-steps span {
  color: var(--ey-confidence);
  font-weight: 700;
}

.ey-demand-card {
  display: grid;
  grid-template-columns: minmax(300px,.85fr) minmax(0,1.15fr);
  gap: 80px;
  align-items: center;
  padding-block: 28px;
}

.ey-demand-card h2 {
  font-size: clamp(2rem,3.2vw,3rem);
}

.ey-demand-card__copy > p:last-child {
  color: var(--ey-paper-500);
}

.ey-postal-form {
  padding: 34px;
  border-top: 4px solid var(--ey-curiosity);
  background: var(--ey-white);
  box-shadow: var(--ey-shadow-soft);
}

.ey-postal-form label {
  display: block;
  margin-bottom: 10px;
  color: var(--ey-confidence);
  font-weight: 700;
}

.ey-postal-form__row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 12px;
}

.ey-postal-form input {
  min-height: 52px;
  padding: 0 15px;
  border: 1px solid var(--ey-paper-100);
  border-radius: var(--ey-radius-sm);
  background: var(--ey-white);
  color: var(--ey-paper-900);
  font-size: 1.05rem;
}

.ey-form-status {
  min-height: 24px;
  margin-top: 12px;
  font-size: .78rem;
}

.ey-form-status[data-state="error"] { color: var(--ey-error); }
.ey-form-status[data-state="success"] { color: var(--ey-success); }
.ey-form-status[data-state="loading"] { color: var(--ey-info); }

.ey-demand-reassurance {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 40px;
  border-top: 1px solid var(--ey-paper-100);
}

.ey-demand-reassurance > div {
  padding-top: 27px;
}

.ey-demand-reassurance span {
  color: var(--ey-elan);
  font-size: .68rem;
  font-weight: 700;
}

.ey-demand-reassurance strong {
  display: block;
  margin: 14px 0 7px;
  color: var(--ey-confidence);
}

.ey-demand-reassurance p {
  color: var(--ey-paper-500);
  font-size: .8rem;
}

/* --------------------------------------------------------------------------
   Formulaire B2B réutilisable
   -------------------------------------------------------------------------- */

.ey-b2b-form-panel {
  display: grid;
  grid-template-columns: minmax(280px,.75fr) minmax(0,1.25fr);
  gap: 70px;
}

.ey-b2b-form-panel__intro p:not(.ey-overline) {
  max-width: 480px;
  color: var(--ey-paper-500);
}

.ey-b2b-form {
  display: grid;
  gap: 20px;
}

.ey-form-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 18px;
}

.ey-b2b-form label > span {
  display: block;
  margin-bottom: 7px;
  color: var(--ey-confidence);
  font-size: .78rem;
  font-weight: 700;
}

.ey-b2b-form input,
.ey-b2b-form textarea {
  width: 100%;
  border: 1px solid var(--ey-paper-100);
  border-radius: var(--ey-radius-sm);
  background: var(--ey-white);
  color: var(--ey-paper-900);
}

.ey-b2b-form input {
  min-height: 48px;
  padding-inline: 13px;
}

.ey-b2b-form textarea {
  padding: 13px;
  resize: vertical;
}

.ey-b2b-form .ey-button {
  justify-self: start;
}

.ey-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(1px,1px,1px,1px) !important;
}

.ey-form-notice {
  grid-column: 2;
  padding: 12px 14px;
  border-left: 3px solid var(--ey-info);
  background: var(--ey-paper-25);
  font-size: .8rem;
}

.ey-form-notice--success { border-left-color: var(--ey-success); }
.ey-form-notice--error { border-left-color: var(--ey-error); }