/* otrah.css — Page « OTRAH » : mission (liste), équipe & gouvernance. */

/* — Liste des objectifs de la mission — */
.mission { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px; margin-top: 30px; }
.mission li { list-style: none; display: flex; gap: 13px; align-items: flex-start; font-size: .96rem; }
.mission li svg { width: 22px; height: 22px; color: var(--rose); flex: none; margin-top: 2px; }
@media (max-width: 720px) { .mission { grid-template-columns: 1fr; } }

/* — Grille « à propos » de la page OTRAH (image + texte) — */
.apropos { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px,5vw,64px); align-items: center; }
.apropos-media { position: relative; }
.apropos-media img { width: 100%; border-radius: var(--rayon-lg); box-shadow: var(--ombre); aspect-ratio: 4/3.3; object-fit: cover; }
.apropos-media .liseret { position: absolute; inset: -1.5px; border-radius: calc(var(--rayon-lg) + 1.5px); padding: 1.5px; background: var(--deg-135); z-index: -1; }
.apropos-txt p { color: var(--encre-doux); margin-top: 16px; }
@media (max-width: 860px) { .apropos { grid-template-columns: 1fr; } .apropos-media { max-width: 480px; } }

/* — Équipe & gouvernance — */
/* ---- ÉQUIPE & GOUVERNANCE ---- */
.equipe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.membre { background: #fff; border: 1px solid var(--ligne); border-radius: var(--rayon-lg); overflow: hidden; transition: transform var(--t), box-shadow var(--t); }
.membre:hover { transform: translateY(-6px); box-shadow: var(--ombre); }
.membre .haut { height: 120px; background: var(--deg-135); position: relative; }
.membre:nth-child(2) .haut { background: linear-gradient(135deg, var(--teal), var(--rose)); }
.membre .mono { position: absolute; left: 24px; bottom: -30px; width: 68px; height: 68px; border-radius: 20px; background: var(--creme); border: 3px solid #fff; box-shadow: var(--ombre-sm); display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 1.4rem; color: var(--rose-prof); }
.membre .corps { padding: 40px 24px 26px; }
.membre .nom { font-family: var(--display); font-weight: 700; font-size: 1.32rem; letter-spacing: -.02em; }
.membre .fonction { font-family: var(--mono); font-size: .74rem; letter-spacing: .04em; color: var(--rose-prof); margin-top: 4px; }
.membre .bio { font-size: .88rem; color: var(--encre-doux); margin-top: 12px; }
.gouvernance { background: var(--encre); color: var(--creme); border-radius: var(--rayon-lg); padding: 30px 26px; display: flex; flex-direction: column; }
.gouvernance .eyebrow { color: var(--teal); } .gouvernance .eyebrow::before { background: var(--teal); }
.gouvernance h4 { font-size: 1.4rem; margin: 14px 0 6px; }
.gouvernance p { font-size: .88rem; color: rgba(251,246,241,.72); }
.gouvernance .duo { display: flex; gap: 26px; margin-top: 18px; }
.gouvernance .duo .n { font-family: var(--display); font-weight: 800; font-size: 2.1rem; color: var(--teal); line-height: 1; }
.gouvernance .duo .l { font-family: var(--mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(251,246,241,.6); margin-top: 5px; }
@media (max-width: 900px) { .equipe { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }