/* PedagoSphère — feuille de style du portail */
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolagegrotesque-bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolagegrotesque-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrumentsans-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrumentsans-bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrumentsans-italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --fond: #F4F5F1;
  --surface: #FFFFFF;
  --encre: #15233A;
  --gris: #4F5B6B;
  --filet: #D9DEDF;
  --accent: #1F7A72;
  --accent-clair: #DCEDEA;
  --or: #D4A23A;
  --titre: "Bricolage Grotesque", "Arial Narrow", Arial, sans-serif;
  --texte: "Instrument Sans", "Segoe UI", Arial, sans-serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 400 1.0625rem/1.6 var(--texte); }
@media (min-width: 48rem) { body { font-size: 1.125rem; } }
img, svg { max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--encre); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 700; line-height: 1.08; margin: 0; letter-spacing: -.015em; text-wrap: balance; }
p { margin: 0; }
.wrap { max-width: 72rem; margin: 0 auto; padding-left: max(1.25rem, env(safe-area-inset-left, 0px)); padding-right: max(1.25rem, env(safe-area-inset-right, 0px)); }
.evitement { position: absolute; left: -999px; top: 0; background: var(--encre); color: #fff; padding: .6rem 1rem; z-index: 10; }
.evitement:focus { left: 1rem; }

.entete .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; }
.marque { display: block; width: 13.5rem; line-height: 0; }
.nav { display: flex; gap: 1.6rem; font-size: .98rem; }
.nav a { color: var(--encre); text-decoration: none; }
.nav a:hover { color: var(--accent); text-decoration: underline; }
.nav a { white-space: nowrap; }
@media (max-width: 40rem) { .entete .wrap { flex-wrap: wrap; row-gap: .6rem; } .nav { gap: 1.2rem; font-size: .95rem; } .marque { width: 11rem; } }

.une .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 6vw, 5.5rem); }
.une h1 { font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.1rem); }
.une .chapo { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); color: var(--gris); max-width: 34rem; margin-top: 1.4rem; }
.une .actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.bouton { display: inline-block; padding: .75rem 1.3rem; border-radius: 999px; background: var(--encre); color: #fff; text-decoration: none; font-weight: 700; font-size: .98rem; }
.bouton:hover { background: var(--accent); color: #fff; }
.bouton.clair { background: transparent; color: var(--encre); border: 1.5px solid var(--encre); }
.bouton.clair:hover { background: var(--encre); color: #fff; }
.orbites { width: 100%; max-width: 34rem; justify-self: center; }
.orbites text { font-family: var(--texte); font-size: 15px; fill: var(--encre); }
.orbites .etat { font-size: 12.5px; fill: var(--gris); }
.orbites a:hover text, .orbites a:focus text { fill: var(--accent); text-decoration: underline; }
@media (max-width: 52rem) { .une .wrap { grid-template-columns: 1fr; } .orbites { max-width: 26rem; } }

.bloc { padding-block: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--filet); }
.bloc h2 { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); }
.bloc .intro { color: var(--gris); max-width: 40rem; margin-top: .8rem; }

.projets { list-style: none; padding: 0; margin: 2.25rem 0 0; display: grid; gap: 1.25rem; }
.projet { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; gap: 1.75rem; align-items: center; background: var(--surface); border: 1px solid var(--filet); border-radius: 1.25rem; padding: 1.5rem 1.75rem 1.5rem 1.5rem; }
.projet .visuel { width: 9.5rem; aspect-ratio: 1; border-radius: 1rem; display: grid; place-items: center; background: var(--c-clair); }
.projet .visuel img { width: 62%; }
.projet h3 { font-size: 1.6rem; }
.projet .etat { display: inline-block; margin-left: .6rem; padding: .15rem .65rem; border-radius: 999px; font-family: var(--texte); font-size: .8rem; font-weight: 700; letter-spacing: 0; vertical-align: .35em; }
.projet .etat.ligne { background: var(--accent-clair); color: #145650; }
.projet .etat.prepa { background: #ECEDEA; color: var(--gris); border: 1px dashed #9AA3AE; }
.projet p { color: var(--gris); margin-top: .5rem; max-width: 36rem; }
.projet.attente { background: transparent; border-style: dashed; }
@media (max-width: 46rem) { .projet { grid-template-columns: 1fr; gap: 1rem; } .projet .visuel { width: 6.5rem; } .projet .bouton { justify-self: start; } }

.apropos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem 3.5rem; margin-top: 2rem; }
.apropos h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.apropos p { color: var(--gris); }
@media (max-width: 46rem) { .apropos { grid-template-columns: 1fr; } }
.a-completer { background: #FBE9B7; padding: 0 .25em; border-radius: .2em; }

.pied { background: var(--encre); color: #C9D0DA; font-size: .92rem; }
.pied .wrap { padding-block: 2.5rem; display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; justify-content: space-between; align-items: center; }
.pied img { width: 12rem; }
.pied a { color: #E6ECF2; }
.prose { max-width: 42rem; }
.prose > * + * { margin-top: 1rem; }
.prose h2 { margin-top: 2.5rem; font-size: 1.5rem; }