/* Page /a-propos (v2, octobre 2026). Mise en page de la maquette validée, dans la DA du site :
   conteneur .container-xl de la home, VCNudge sur le seul H1, titres en SwissNow 600
   (design-system/TYPE-SCALE.md), cartes blanches à 10px de rayon comme l’ancienne page. La bande noire des chiffres
   et la mise en page du parcours reprennent l’ancienne page (choix de Marjolaine, 07/10/2026).
   Grilles : conférences 2 par ligne, podcasts 3 par ligne, 1 par ligne sur mobile. */

.ap-hero { padding-bottom: 72px; }
.ap-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.ap-hero-txt { display: grid; gap: 18px; min-width: 0; }
.ap-hero-txt .text-mono { margin: 0; }
.ap-hero h1 { margin: 0; font-family: VCNudge, sans-serif; font-weight: 800; font-size: 56px; line-height: 62px; letter-spacing: -0.015em; text-wrap: balance; }
.ap-u { border-bottom: 5px solid #121117; line-height: .9em; display: inline-block; }
.ap-hero-txt p { margin: 0; font-size: 18px; line-height: 27px; max-width: 34em; opacity: .8; }
.ap-ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.ap-portrait { width: 100%; max-width: 560px; height: auto; display: block; justify-self: center; }


.ap-band { padding-top: 90px; padding-bottom: 90px; }

/* Bande noire des chiffres (DA de l'ancienne page, chiffres à jour) */
.ap-band-head { display: grid; grid-template-columns: 1fr auto; gap: 60px; align-items: end; }
.ap-band-head .text-mono { margin: 0 0 12px; }
.ap-band h2 { color: #f8f9ec; }
.ap-chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 56px; }
.ap-chiffre { border-top: 1px solid rgba(245, 242, 238, .25); padding-top: 26px; display: grid; gap: 8px; align-content: start; }
.ap-chiffre b { font-family: VCNudge, sans-serif; font-weight: 800; font-size: 56px; line-height: 60px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.ap-chiffre span { font-size: 17px; line-height: 25px; opacity: .7; }

/* Parcours (DA de l'ancienne page : photo collante à gauche, étapes à droite) */
.ap-bio { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 80px; align-items: start; }
.ap-bio-side { position: sticky; top: 150px; }
.ap-bio-side .text-mono { margin: 0 0 12px; }
.ap-bio-side img { margin-top: 32px; width: 100%; display: block; object-fit: cover; aspect-ratio: 4 / 5; border-radius: 10px; background: rgba(18, 17, 23, .08); }
.ap-rows { display: flex; flex-direction: column; }
.ap-row { border-top: 1px solid rgba(18, 17, 23, .16); padding: 30px 0; display: grid; grid-template-columns: 110px 1fr; gap: 30px; align-items: baseline; }
.ap-row-yr { font-family: "Abcfavoritmono Book", ABCFavoritMono, monospace; font-size: 12px; letter-spacing: .4px; opacity: .7; }
.ap-row p { margin: 0; font-size: 19px; line-height: 28px; }

/* En-tête de section */
.ap-sh { margin-bottom: 40px; }
.ap-sh .text-mono { margin: 0 0 12px; }
.ap-band h2, .ap-bio-side h2, .ap-sh h2, .ap-nl h2 { font-family: SwissNow, sans-serif; font-weight: 600; font-size: 42px; line-height: 52px; letter-spacing: -0.02em; margin: 0; }
.ap-sh p { margin: 12px 0 0; font-size: 18px; line-height: 27px; opacity: .7; }
.ap-hero ~ section h3 { font-family: SwissNow, sans-serif; font-weight: 600; font-size: 24px; line-height: 30px; letter-spacing: -0.01em; margin: 0; }

/* Cartes */
.ap-card { background: #fff; border-radius: 10px; padding: 28px; margin: 0; display: grid; gap: 12px; align-content: start; color: inherit; text-decoration: none; }
.ap-card p { margin: 0; font-size: 17px; line-height: 25px; opacity: .7; }
.ap-g2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ap-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }


/* Témoignages VIP */
.ap-vip { grid-template-columns: 88px 1fr; gap: 22px; align-items: start; text-align: left; }
.ap-vip img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }
.ap-vip blockquote, .ap-vip .ap-who { text-align: left; }
.ap-vip blockquote { margin: 0; padding: 0; border: 0; font-size: 19px; line-height: 28px; }
.ap-who { margin-top: 14px; display: grid; gap: 2px; font-weight: 600; font-size: 16px; }
.ap-who .ap-role { font-weight: 400; opacity: .6; font-size: 15px; }

/* Cartes à la une (dotAI, GDIY) : la seule image en pleine largeur */
.ap-feat { display: grid; grid-template-columns: 1.15fr 1fr; background: #121117; color: #f8f9ec; border-radius: 10px; overflow: hidden; text-decoration: none; margin-bottom: 16px; }
.ap-feat img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.ap-feat > div { padding: 36px; display: grid; gap: 14px; align-content: center; }
.ap-feat h3 { color: #f8f9ec; font-size: 30px !important; line-height: 36px !important; }
.ap-feat p { margin: 0; font-size: 17px; line-height: 25px; color: rgba(248, 249, 236, .72); }
.ap-pill { justify-self: start; display: inline-block; font-family: "Abcfavoritmono Book", ABCFavoritMono, monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 6px 12px; background: #ffe8c8; color: #121117; }
.ap-pill.is-light { background: #eae7fb; }

/* Conférences : 2 par ligne */
.ap-vids { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ap-vid { background: #fff; border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; display: grid; grid-template-columns: 42% 1fr; align-items: stretch; }
.ap-vid img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.ap-vid > div { padding: 18px 22px; display: grid; gap: 8px; align-content: center; min-width: 0; }
.ap-vid .text-mono { margin: 0; font-size: 11px; line-height: 15px; }
.ap-vid strong { font-weight: 500; font-size: 18px; line-height: 24px; }

.ap-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px 56px; margin-top: 48px; }
.ap-logos img { height: 30px; width: auto; max-width: 150px; object-fit: contain; opacity: .7; }

/* Podcasts : 3 par ligne */
.ap-podgroup { margin-top: 40px; }
.ap-podgroup > .text-mono { margin: 0 0 16px; }
.ap-eps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ap-ep { background: #fff; border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.ap-ep img { flex: none; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.ap-ep img.is-square { object-fit: contain; background: #121117; }
.ap-ep > div { padding: 18px 20px 20px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.ap-ep strong { font-weight: 500; font-size: 18px; line-height: 24px; }
.ap-ep span { font-size: 15px; line-height: 21px; opacity: .6; }
.ap-more { margin: 24px 0 0; font-size: 17px; opacity: .7; }

.ap-vid, .ap-ep, .ap-res, .ap-feat { transition: box-shadow .2s; }
.ap-vid:hover, .ap-ep:hover, .ap-res:hover { box-shadow: 0 0 0 2px #121117; }
.ap-feat:hover { box-shadow: 0 0 0 3px #ffe8c8; }

/* Ressources */
.ap-go { display: inline-flex; align-items: center; min-height: 44px; justify-self: start; font-weight: 500; font-size: 16px; color: inherit; text-decoration: none; margin-top: 4px; }
a.ap-go:hover { text-decoration: underline; }
.ap-center { text-align: center; margin: 32px 0 0; }

/* Hors écran */
.ap-off { padding: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0; }
.ap-off img { flex: none; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.ap-off img.is-surf { object-position: 50% 40%; }
.ap-off > div { padding: 26px 28px 30px; display: grid; gap: 12px; align-content: start; }
.ap-music { grid-column: 1 / -1; }

/* Newsletter : formulaire du site (data-name « Newsletter », liste Brevo 8) */
.ap-nl { background: #121117; color: #f8f9ec; border-radius: 10px; padding: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.ap-nl h2 { color: #f8f9ec; margin-top: 16px !important; }
.ap-nl p { margin: 12px 0 0; font-size: 18px; line-height: 27px; color: rgba(248, 249, 236, .72); }
.ap-nl .w-form { margin: 0; }
.ap-nl .capture_form { display: flex; gap: 10px; flex-wrap: nowrap; align-items: stretch; margin: 0; max-width: none; width: 100%; }
.ap-nl .capture_form .w-button { flex: none; margin: 0; }
.ap-nl .capture_input-field { flex: 1 1 auto; width: auto !important; max-width: none; min-width: 0; margin: 0; height: auto; padding: 15px 16px; border: 0; border-radius: 4px; font-size: 16px; background: #f8f9ec; color: #121117; }
.ap-nl .w-form-done, .ap-nl .w-form-fail { background: transparent; color: #f8f9ec; padding: 12px 0 0; text-align: left; }

/* Tablette */
@media (max-width: 991px) {
  .ap-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .ap-portrait { max-width: 460px; order: -1; }
  .ap-band-head, .ap-bio { grid-template-columns: 1fr; gap: 28px; }
  .ap-band-head .w-button { justify-self: start; }
  .ap-chiffres { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; margin-top: 40px; }
  .ap-bio-side { position: static; }
  .ap-bio-side img { max-width: 420px; aspect-ratio: 4 / 3; }
  .ap-g3, .ap-vids, .ap-nl { grid-template-columns: 1fr; }
  .ap-eps { grid-template-columns: repeat(2, 1fr); }
  .ap-feat { grid-template-columns: 1fr; }
}

/* Mobile : une carte par ligne */
@media (max-width: 767px) {
  .page-maquette .ap-hero h1 { font-size: 40px !important; line-height: 46px !important; }
  .ap-band h2, .ap-bio-side h2, .ap-sh h2, .ap-nl h2 { font-size: 32px; line-height: 38px; }
  .ap-sh { margin-bottom: 28px; }
  .ap-g2, .ap-eps { grid-template-columns: 1fr; }
  .ap-vid { grid-template-columns: 1fr; }
  .ap-vid img { height: auto; }
  .ap-card { padding: 22px; }
  .ap-feat > div { padding: 24px; }
  .ap-feat h3 { font-size: 24px !important; line-height: 30px !important; }
  .ap-nl { padding: 28px 22px; }
  .ap-vip { grid-template-columns: 64px 1fr; gap: 16px; }
  .ap-vip img { width: 64px; height: 64px; }
  .ap-logos { gap: 20px 32px; }
  .ap-logos img { height: 24px; }
  .ap-chiffre b { font-size: 40px; line-height: 44px; }
  .ap-row { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
  .ap-row p { font-size: 17px; line-height: 25px; }
}
@media (max-width: 479px) {
  .page-maquette .ap-hero h1 { font-size: 36px !important; line-height: 42px !important; }
  .ap-chiffres { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .ap-chiffre span { font-size: 15px; line-height: 21px; }
}