/* ── a-propos.css — styles spécifiques à /a-propos/ ── */

.ap-hero {
  display:grid;
  grid-template-columns:1fr 340px;
  gap:60px;
  align-items:start;
  padding:90px 0 60px;
}

.ap-portrait {
  position:sticky;
  top:80px;
  width:100%;
  max-width:340px;
}

.ap-portrait-frame {
  width:100%;
  overflow:hidden;
  border-radius:16px;
}

.ap-portrait img {
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}

@media (max-width:900px) {
  .ap-hero {
    display:block;
    padding:32px 0 60px;
  }

  .ap-portrait {
    position:static;
    top:auto;
    max-width:420px;
    width:100%;
    margin:0 auto 32px;
  }

  .ap-portrait-frame {
    max-width:420px;
    margin:0 auto;
  }

  .ap-portrait img {
    width:100%;
    height:auto;
  }
}

@media (max-width:600px) {
  .ap-portrait {
    max-width:100%;
    margin-bottom:28px;
  }

  .ap-portrait-frame {
    max-width:100%;
  }
}
.ap-portrait-placeholder {
  width:100%;
  aspect-ratio:3/4;
  border-radius:16px;
  background:var(--s2);
  border:1px solid var(--br);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--t3);
  font-family:var(--ffm);
  font-size:.75rem;
  text-align:center;
}
.ap-bmd-badge {
  margin-top:16px;
  padding:14px 16px;
  background:var(--s2);
  border:1px solid var(--br);
  border-radius:10px;
  display:flex;
  align-items:center;
  gap:12px;
}
.ap-bmd-dot {
  width:10px; height:10px; border-radius:50%;
  background:#c8912a;
  flex-shrink:0;
  box-shadow:0 0 0 3px rgba(200,145,42,.2);
}
.ap-bmd-text { font-family:var(--ffm); font-size:.7rem; color:var(--t2); line-height:1.4; }
.ap-bmd-text strong { color:var(--t1); display:block; margin-bottom:2px; }

.ap-section { padding:44px 0; border-top:1px solid var(--br); }
.ap-section:first-child { border-top:none; }
.ap-section-label {
  font-family:var(--ffm);
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--acc);
  margin-bottom:16px;
}
.ap-section h2 {
  font-family:var(--ffd);
  font-size:clamp(1.3rem,2.5vw,1.7rem);
  font-weight:800;
  color:var(--t1);
  margin-bottom:16px;
  line-height:1.2;
}
.ap-section p { color:var(--t2); line-height:1.75; margin-bottom:12px; }
.ap-section p:last-child { margin-bottom:0; }

.ap-proof-grid,
.ap-route-grid,
.ap-faq-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:12px;
  margin-top:24px;
}
.ap-card {
  padding:18px 20px;
  background:var(--s2);
  border:1px solid var(--br);
  border-radius:10px;
}
.ap-card h3 {
  font-family:var(--ffd);
  font-size:.95rem;
  font-weight:700;
  color:var(--t1);
  margin-bottom:8px;
}
.ap-card p {
  font-size:.84rem;
  color:var(--t2);
  margin:0;
  line-height:1.65;
}

.ap-cert-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:10px;
  margin-top:24px;
}
.ap-cert-item {
  padding:16px 18px;
  background:var(--s2);
  border:1px solid var(--br);
  border-radius:10px;
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.ap-cert-icon {
  width:32px; height:32px;
  border-radius:8px;
  background:rgba(200,145,42,.1);
  border:1px solid rgba(200,145,42,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-size:.7rem;
  font-weight:700;
  color:#c8912a;
  font-family:var(--ffm);
}
.ap-cert-info strong {
  display:block;
  font-size:.82rem;
  color:var(--t1);
  margin-bottom:4px;
  line-height:1.3;
}
.ap-cert-info span {
  font-family:var(--ffm);
  font-size:.65rem;
  color:var(--t3);
}

.ap-info-row {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:20px;
}
.ap-info-pill {
  padding:8px 16px;
  background:var(--s2);
  border:1px solid var(--br);
  border-radius:100px;
  font-family:var(--ffm);
  font-size:.72rem;
  color:var(--t1);
  display:flex;
  align-items:center;
  gap:6px;
}
.ap-info-pill .dot {
  width:6px; height:6px; border-radius:50%; background:var(--acc);
}

.ap-route-card {
  padding:18px 20px;
  background:var(--s2);
  border:1px solid var(--br);
  border-radius:10px;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  transition:border-color .2s, background .2s;
}
.ap-route-card:hover {
  border-color:var(--acc);
  background:rgba(200,145,42,.04);
}
.ap-route-card span { font-size:.85rem; font-weight:500; color:var(--t1); }
.ap-route-card svg { color:var(--t3); flex-shrink:0; }

/* ── FIX MOBILE / TABLETTE : portrait non sticky ── */
@media (max-width:1100px) {
  .ap-hero {
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:32px !important;
    padding:32px 0 60px !important;
  }

  .ap-portrait {
    order:0;
    position:static !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    inset:auto !important;
    transform:none !important;
    z-index:1 !important;

    width:100% !important;
    max-width:420px !important;
    margin:0 auto 28px !important;
  }

  .ap-portrait-frame {
    width:100% !important;
    max-width:420px !important;
    margin:0 auto !important;
    overflow:hidden !important;
    border-radius:16px !important;
  }

  .ap-portrait img {
    width:100% !important;
    height:auto !important;
    display:block !important;
    object-fit:cover !important;
  }
}

@media (max-width:600px) {
  .ap-portrait,
  .ap-portrait-frame {
    max-width:100% !important;
  }
}