/* ==========================================================================
   EPN — Pages institutionnelles
   ========================================================================== */

/* --- Texte long en colonne étroite, avec appui latéral -------------------- */
.texte-institution {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 860px) { .texte-institution { grid-template-columns: 1fr; gap: var(--e2); } }
.texte-institution h2 {
  position: sticky; top: 110px;
  font-size: var(--t-h3);
  color: var(--bleu);
  margin: 0;
}
@media (max-width: 860px) { .texte-institution h2 { position: static; } }
.texte-institution .corps p { font-size: 1.1rem; line-height: 1.75; color: var(--encre-douce); }
.texte-institution .corps p:first-child { color: var(--encre); }

.bloc-institution + .bloc-institution {
  margin-top: var(--e5);
  padding-top: var(--e5);
  border-top: 1px solid var(--papier-bord);
}

/* --- Valeurs -------------------------------------------------------------- */
.grille-valeurs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e3);
}
@media (max-width: 940px) { .grille-valeurs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .grille-valeurs { grid-template-columns: 1fr; } }
.valeur {
  background: var(--blanc);
  border: 1px solid var(--papier-bord);
  border-radius: var(--r-moyen);
  padding: var(--e3);
  border-top: 3px solid var(--bleu);
}
.valeur:nth-child(2) { border-top-color: var(--safran); }
.valeur:nth-child(3) { border-top-color: var(--niv-secondaire); }
.valeur:nth-child(4) { border-top-color: var(--niv-prescolaire); }
.valeur h3 { margin-bottom: .4rem; }
.valeur p { font-size: var(--t-petit); color: var(--encre-douce); margin: 0; }

/* --- Projets : liste horodatée ------------------------------------------- */
.liste-projets { list-style: none; margin: 0; padding: 0; }
.liste-projets li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: var(--e2);
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--papier-bord);
}
.liste-projets li:first-child { border-top: 1px solid var(--papier-bord); }
.liste-projets svg { width: 20px; height: 20px; color: var(--safran); margin-top: 3px; }
.liste-projets strong { display: block; margin-bottom: .15rem; }
.liste-projets span { font-size: var(--t-petit); color: var(--encre-douce); }

/* --- Équipe --------------------------------------------------------------- */
.grille-equipe {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e3);
}
@media (max-width: 760px) { .grille-equipe { grid-template-columns: 1fr; } }
.poste {
  background: var(--blanc);
  border: 1px solid var(--papier-bord);
  border-left: 4px solid var(--bleu);
  border-radius: 0 var(--r-moyen) var(--r-moyen) 0;
  padding: var(--e3);
}
.poste h3 { font-size: 1.1rem; margin-bottom: .45rem; }
.poste p { font-size: var(--t-petit); color: var(--encre-douce); margin: 0; }

.note-equipe {
  background: var(--papier-creux);
  border: 1px dashed var(--papier-bord);
  border-radius: var(--r-moyen);
  padding: var(--e3);
  font-size: var(--t-petit);
  color: var(--encre-douce);
  margin-top: var(--e4);
}

/* --- FAQ ------------------------------------------------------------------ */
.faq-grille {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 860px) { .faq-grille { grid-template-columns: 1fr; } }
.faq-aside {
  background: var(--blanc);
  border: 1px solid var(--papier-bord);
  border-radius: var(--r-moyen);
  padding: var(--e3);
  position: sticky; top: 110px;
}
@media (max-width: 860px) { .faq-aside { position: static; } }
.faq-recherche { position: relative; margin-bottom: var(--e3); }
.faq-recherche input {
  width: 100%; font: inherit; font-size: var(--t-petit);
  padding: .8rem .9rem .8rem 2.5rem;
  border: 1px solid var(--papier-bord);
  border-radius: var(--r-petit);
}
.faq-recherche svg {
  position: absolute; left: .85rem; top: 50%; translate: 0 -50%;
  width: 16px; height: 16px; color: var(--encre-tenue);
}
.faq-vide { padding: var(--e4) 0; color: var(--encre-douce); }

/* --- Contact -------------------------------------------------------------- */
.contact-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .contact-grille { grid-template-columns: 1fr; } }

.coordonnees { list-style: none; margin: 0 0 var(--e4); padding: 0; }
.coordonnees li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: var(--e2);
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--papier-bord);
}
.coordonnees li:first-child { border-top: 1px solid var(--papier-bord); }
.coordonnees .icone {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(10, 78, 163, .09); color: var(--bleu);
}
.coordonnees .icone svg { width: 19px; height: 19px; }
.coordonnees h3 { font-family: var(--texte); font-size: var(--t-mini); font-weight: 700; color: var(--encre-tenue); margin: 0 0 .3rem; }
.coordonnees a { text-decoration: none; font-weight: 500; }
.coordonnees a:hover { color: var(--bleu); text-decoration: underline; text-underline-offset: 3px; }
.coordonnees p { margin: 0; font-size: var(--t-petit); }
.coordonnees .tel { display: block; }

.carte-formulaire {
  background: var(--blanc);
  border: 1px solid var(--papier-bord);
  border-radius: var(--r-grand);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.plan {
  margin-top: var(--e5);
  border: 1px solid var(--papier-bord);
  border-radius: var(--r-grand);
  overflow: hidden;
  background: var(--papier-creux);
}
.plan iframe { width: 100%; height: 380px; border: 0; display: block; }

/* --- 404 ------------------------------------------------------------------ */
.page-404 { text-align: center; padding-block: var(--e7); }
.page-404 .code {
  font-family: var(--titre);
  font-size: clamp(5rem, 16vw, 11rem);
  line-height: .9;
  color: var(--papier-bord);
  margin-bottom: var(--e3);
}
.page-404 p { margin-inline: auto; color: var(--encre-douce); }
.page-404 .boutons { display: flex; justify-content: center; flex-wrap: wrap; gap: .7rem; margin-top: var(--e3); }