/* ========================================================
   /ecoles - page de routage (deux portes). Langue v5.
   Tokens/polices : brand.css. Scopé .ecoles-chooser.
   ======================================================== */
.ecoles-chooser {
  font-family: var(--font-sans-v5);
  color: var(--ink-warm);
  background-color: var(--paper-warm);
  background-image:
    linear-gradient(var(--grid-warm) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-warm) 1px, transparent 1px);
  background-size: 38px 38px;
  overflow-x: hidden;
}
.ecoles-chooser *, .ecoles-chooser *::before, .ecoles-chooser *::after { box-sizing: border-box; }
.ecoles-chooser .wrap { width: 100%; max-width: 1000px; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(16px, 4vw, 28px); }
.ecoles-chooser h1 { font-family: var(--font-serif-v5); font-weight: 400; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.12; letter-spacing: -.01em; margin: 1rem 0 .6rem; }
.ecoles-chooser .lead { font-size: clamp(1.05rem, 1.5vw, 1.18rem); color: var(--ink-warm-soft); max-width: 640px; }
.ecoles-chooser .tag-section { display: inline-block; font-weight: 700; font-size: .83rem; letter-spacing: .1em; text-transform: uppercase; background: var(--ink-warm); color: var(--paper-warm); padding: .45em 1.1em; border-radius: 999px; transform: rotate(-2deg); box-shadow: var(--hard-sm); }

.ecoles-chooser .portes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: clamp(1.8rem, 4vw, 2.6rem); }
@media (max-width: 760px) { .ecoles-chooser .portes { grid-template-columns: 1fr; } }
.ecoles-chooser .porte {
  border: 2.5px solid var(--ink-warm); border-radius: 20px; box-shadow: var(--hard);
  padding: 1.9rem 1.8rem; display: flex; flex-direction: column; gap: .8rem; transition: transform .18s ease;
}
.ecoles-chooser .porte:hover { transform: translateY(-4px); }
.ecoles-chooser .porte-scolaire { background: var(--green-tint); transform: rotate(-.6deg); }
.ecoles-chooser .porte-parascolaire { background: var(--jaune-soft); transform: rotate(.6deg); }
.ecoles-chooser .porte h2 { font-family: var(--font-serif-v5); font-weight: 400; font-size: clamp(1.4rem, 2.3vw, 1.8rem); line-height: 1.12; }
.ecoles-chooser .porte p { color: var(--ink-warm-soft); font-size: .98rem; }
.ecoles-chooser .porte .btn {
  align-self: flex-start; margin-top: .4rem;
  display: inline-flex; align-items: center; gap: .55em; font-weight: 700; font-size: 1rem;
  text-decoration: none; cursor: pointer; padding: .8em 1.4em; border-radius: var(--r-warm-sm);
  border: 2.5px solid var(--ink-warm); box-shadow: var(--hard); font-family: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ecoles-chooser .porte .btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink-warm); }
.ecoles-chooser .porte-scolaire .btn { background: var(--green); color: #fff; }
.ecoles-chooser .porte-parascolaire .btn { background: var(--white-warm); color: var(--ink-warm); }
.ecoles-chooser a:focus-visible, .ecoles-chooser button:focus-visible { outline: 3px solid var(--rouge); outline-offset: 3px; border-radius: 8px; }