/* H&C — page À propos (/a-propos/).
   Se charge après fiche.css (sections `.fb`, hero `.fh`, projecteur `.rig`, rideau `.diag`, pied de page).
   Choix de l'utilisateur sur la planche du 2026-10-15 : haut de page « le millésime » (piste 2).
   Les sections suivent docs/03-contenus/06-a-propos.md §1 :

    1. Hero · `.aph`      : nuit ; énorme « 20+ » à gauche, la phrase, deux arches de photos à droite, en bas la
                            frise des six grandes dates (liens vers `#jalon-n`).
    2. Mission · `.apm`   : la phrase de mission en grand, une photo, les trois gestes.
    3. Histoire · `.apy`  : frise à faire défiler (photo + date + texte), escalier montant, précédent / suivant.
    4. Chiffres · `.apc`  : cinq chiffres (le « 20+ » est dans le hero), compteurs.
    5. Expertise · `.ape` : quatre domaines en accordéon, photo qui change, liens vers les parcours.
    6. Pourquoi · `.apw`  : trois cartes à photo décalées (nuit).
    7. Méthode · `.apd`   : cinq impacts en marches qui montent, la dernière en jaune.
    8. Présence · `.apg`  : carte de l'Afrique, 17 villes, pastilles ↔ repères.
    9. Écosystème · `.apb`: une carte par marque.
   10. Équipe · `.apt`    : 4 portraits ❓ + « 30+ coachs ».
   11. Témoignages · `.apv`: 3 portraits en couleur et leur citation.
   12. CTA final · `.apf` : le rideau `.diag` devant le pied de page.
   ≤ 1000 px : tout s'empile ; ≤ 760 px : frise du hero et marches en liste ; ≤ 560 px : une colonne. */

:root { --ap-soft: #4b5569; --ap-muted: #5b6478; --ap-line: rgb(22 33 61 / 0.12); }

/* Bouton plein « papier » : le pendant clair du bouton jaune sur fond nuit (pas de contour). */
.btn--paper { padding-left: 7px; background: var(--paper); color: var(--ink); }
.btn--paper:hover { background: var(--wall); }
.btn--paper .btn__label { flex: 1; text-align: left; }
.btn--paper:hover .btn__icon { transform: rotate(-10deg); }

.ex { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: #7a8498; }
.fb--night .ex { color: rgb(255 255 255 / 0.5); }

.fb :is(a, button, summary):focus-visible,
.diag :is(a, button):focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* =========================================================
   1. Hero — le millésime
   ========================================================= */
.aph { --rig-x: 24%; --rig-y: 12px; --rig-w: 72px; --rig-tilt: 0deg; padding-bottom: clamp(36px, 4vw, 64px); }
.aph .cone { --spread: 22deg; --throw: 760px; }
.aph__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: end;
  column-gap: clamp(24px, 4vw, 64px);
  margin-top: clamp(6px, 1.4vw, 20px);
}
.aph__copy { display: grid; justify-items: start; gap: 8px; }
.aph__n {
  margin: 0 0 0 -0.04em;
  font-size: clamp(7rem, 17.5vw, 16.5rem);
  font-weight: 300;
  line-height: 0.84;
  letter-spacing: -0.05em;
  color: #fff;
}
.aph__n i { font-style: normal; color: var(--gold); }
.aph__h { max-width: 16ch; margin-top: 0; font-size: clamp(1.75rem, 3.3vw, 2.9rem); }
.aph__copy .fb__lead { max-width: 40ch; margin-top: 10px; font-size: clamp(1.0625rem, 1.4vw, 1.2rem); }
.aph__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }

.aph__ph { position: relative; height: clamp(300px, 35vw, 470px); }
.aph__arch { position: absolute; overflow: hidden; background: #14233a; }
.aph__arch img { display: block; width: 100%; height: 100%; object-fit: cover; }
.aph__arch--a { left: 4%; top: 0; width: 60%; height: 100%; border-radius: 999px 999px 26px 26px; box-shadow: 0 34px 60px -26px rgb(0 0 0 / 0.8); }
.aph__arch--a img { object-position: 50% 22%; }
.aph__arch--b { right: 0; bottom: 0; width: 40%; height: 57%; border-radius: 999px 999px 20px 20px; box-shadow: 0 0 0 7px var(--night), 0 30px 50px -24px rgb(0 0 0 / 0.8); }
.aph__arch--b img { object-position: 62% 40%; }

.aph__rib { margin-top: clamp(30px, 4.4vw, 60px); }
.aph__rib ol { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.aph__rib ol::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: rgb(255 255 255 / 0.28); }
.aph__rib li { position: relative; padding: 36px 14px 0 0; }
.aph__rib li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--night);
  box-shadow: 0 0 0 3px rgb(255 255 255 / 0.5);
  transition: background-color 0.25s, box-shadow 0.25s;
}
.aph__rib li.is-on::before { background: var(--gold); box-shadow: 0 0 0 5px rgb(226 174 12 / 0.3); }
.aph__rib a { display: block; color: inherit; text-decoration: none; font-size: 1.0625rem; font-weight: 500; line-height: 1.22; }
.aph__rib small { display: block; margin-bottom: 3px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: rgb(255 255 255 / 0.55); }
.aph__rib li.is-on small { color: var(--gold); }
.aph__rib a:hover small { color: #fff; }
.aph__rib li:hover::before { background: var(--gold); box-shadow: 0 0 0 5px rgb(226 174 12 / 0.3); }
.aph .ex { margin-top: clamp(18px, 2.4vw, 30px); }

/* =========================================================
   2. Notre mission
   ========================================================= */
.apm__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: start;
  gap: clamp(28px, 5vw, 80px);
}
.apm__tx { display: grid; justify-items: start; gap: 20px; }
.apm__big { margin: 0; max-width: 26ch; font-size: clamp(1.5rem, 2.5vw, 2.3rem); font-weight: 400; line-height: 1.22; letter-spacing: -0.015em; }
.apm__ph { margin: 0; aspect-ratio: 4 / 4.4; border-radius: 30px; overflow: hidden; background: var(--wall); box-shadow: 0 34px 60px -34px rgb(22 33 61 / 0.5); }
.apm__ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.apm__acts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.apm__acts li { display: grid; gap: 10px; padding: 20px 24px 22px; border-radius: 24px; background: var(--wall); }
.apm__acts b { font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.08em; color: #8a6500; }
.apm__acts span { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); font-weight: 500; line-height: 1.3; }

/* =========================================================
   3. Notre histoire
   ========================================================= */
.apy { --rig-x: 78%; --rig-y: 12px; --rig-w: 70px; --rig-tilt: 6deg; padding-bottom: clamp(48px, 6vw, 88px); }
.apy .cone { --spread: 26deg; --throw: 760px; }
.apy__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.apy__nav { display: flex; gap: 10px; }
.apy__btn {
  appearance: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.25s, opacity 0.25s, transform 0.3s var(--ease-out);
}
.apy__btn svg { width: 22px; height: 22px; stroke-width: 2; }
.apy__btn:hover:not(:disabled) { background: var(--gold-strong); transform: scale(1.06); }
.apy__btn:disabled { opacity: 0.3; cursor: default; }

.apy__track {
  --edge: max(var(--pad-x), calc((100vw - 1240px) / 2));
  margin-top: clamp(26px, 3.6vw, 48px);
  margin-inline: calc(var(--pad-x) * -1);
  padding: 8px var(--edge) 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.apy__track::-webkit-scrollbar { display: none; }
.apy__track:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.apy__list { display: flex; align-items: flex-start; gap: 20px; width: max-content; margin: 0; padding: 0; list-style: none; }
.apy__c {
  flex: 0 0 clamp(264px, 26vw, 340px);
  scroll-snap-align: start;
  margin-top: calc((5 - var(--k)) * 20px);
}
.apy__ph { margin: 0; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; background: #14233a; transition: box-shadow 0.4s; }
.apy__ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.apy__c.is-hit .apy__ph { box-shadow: 0 0 0 4px var(--gold); }
.apy__tx { display: grid; justify-items: start; gap: 8px; padding: 18px 4px 0; }
.apy__d {
  margin: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.12);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.apy__c.is-key .apy__d { background: var(--gold); color: var(--ink); }
.apy__tx h3 { margin: 4px 0 0; font-size: clamp(1.2rem, 1.7vw, 1.45rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.15; }
.apy__tx p:not(.apy__d) { margin: 0; font-size: 1rem; line-height: 1.5; color: rgb(255 255 255 / 0.74); }
.apy__tbc { position: relative; margin: 2px 0 0 !important; padding-left: 16px; font-size: 0.8125rem !important; color: rgb(255 255 255 / 0.5) !important; }
.apy__tbc::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.apy__bar { height: 4px; margin-top: clamp(26px, 3vw, 40px); border-radius: 4px; background: rgb(255 255 255 / 0.16); overflow: hidden; }
.apy__bar i { display: block; width: var(--p, 20%); height: 100%; border-radius: 4px; background: var(--gold); transition: width 0.25s linear; }

/* =========================================================
   4. H&C en chiffres
   ========================================================= */
.apc__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(28px, 5vw, 80px); }
.apc__tx { display: grid; gap: 20px; }
.apc__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.apc__t { display: grid; align-content: end; gap: 6px; min-height: 168px; padding: 22px 26px; border-radius: 28px; background: var(--paper); }
.apc__t b { font-size: clamp(2.5rem, 4.2vw, 3.5rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.apc__t b i { font-style: normal; font-weight: 400; color: #b98a00; }
.apc__t span { font-size: 1.0625rem; line-height: 1.3; color: var(--ap-soft); }
.apc__t small { font-size: 0.8125rem; line-height: 1.35; color: #6d7790; }
.apc__t--big { grid-column: 1 / -1; min-height: 220px; background: var(--gold); }
.apc__t--big b { font-size: clamp(3.4rem, 7vw, 6.2rem); }
.apc__t--big b i { color: var(--ink); }
.apc__t--big span { font-size: clamp(1.125rem, 1.6vw, 1.4rem); font-weight: 500; color: var(--ink); }
.apc__t--big small { color: rgb(22 33 61 / 0.7); }

/* =========================================================
   5. Nos domaines d'expertise
   ========================================================= */
.ape__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: start; gap: clamp(28px, 6vw, 96px); }
.ape__tx { display: grid; gap: clamp(22px, 3vw, 40px); }
.ape__list { border-top: 1px solid var(--ap-line); }
.ape__p { border-bottom: 1px solid var(--ap-line); }
.ape__p summary { display: flex; align-items: center; gap: 18px; padding: 22px 0; list-style: none; cursor: pointer; }
.ape__p summary::-webkit-details-marker { display: none; }
.ape__p summary::after {
  content: "";
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--wall) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2316213d' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: background-color 0.25s, rotate 0.35s var(--ease-out);
}
.ape__p[open] summary::after { rotate: 45deg; background-color: var(--gold); }
.ape__n { flex: none; width: 2.2ch; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em; color: #8a6500; }
.ape__t { flex: 1; font-size: clamp(1.25rem, 1.9vw, 1.6rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.15; }
.ape__b { display: grid; gap: 14px; padding: 0 0 26px calc(2.2ch + 18px); }
.ape__b p { margin: 0; max-width: 46ch; font-size: 1.0625rem; line-height: 1.5; color: var(--ap-soft); }
.ape__b ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ape__b li a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 16px;
  border-radius: 999px;
  background: var(--wall);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.25s;
}
.ape__b li a span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--paper); transition: background-color 0.25s, transform 0.3s var(--ease-out); }
.ape__b li a svg { width: 14px; height: 14px; stroke-width: 2.2; }
.ape__b li a:hover { background: var(--gold); }
.ape__b li a:hover span { background: rgb(255 255 255 / 0.55); transform: translateX(2px); }
.ape__in { display: none; width: 100%; aspect-ratio: 3 / 2; border-radius: 22px; object-fit: cover; }
.ape__stage { position: sticky; top: clamp(90px, 12vh, 130px); aspect-ratio: 4 / 5; border-radius: 34px; overflow: hidden; background: var(--wall); box-shadow: 0 34px 60px -34px rgb(22 33 61 / 0.5); }
.ape__ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; scale: 1.06; transition: opacity 0.6s ease, scale 1.1s var(--ease-out); }
.ape__ph.is-on { opacity: 1; scale: 1; }

/* =========================================================
   6. Pourquoi nous choisir
   ========================================================= */
.apw { --rig-x: 50%; --rig-y: 12px; --rig-w: 70px; --rig-tilt: 0deg; padding-bottom: clamp(72px, 8vw, 120px); }
.apw .cone { --spread: 34deg; --throw: 760px; }
.apw__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: clamp(16px, 2vw, 28px); margin: clamp(30px, 4vw, 56px) 0 0; padding: 0; list-style: none; }
.apw__c { overflow: hidden; border-radius: 28px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 56px -30px rgb(0 0 0 / 0.7); }
.apw__c:nth-child(2) { margin-top: clamp(0px, 3vw, 44px); }
.apw__c:nth-child(3) { margin-top: clamp(0px, 6vw, 88px); }
.apw__c figure { position: relative; aspect-ratio: 3 / 2; margin: 0; }
.apw__c img { display: block; width: 100%; height: 100%; object-fit: cover; }
.apw__tag { position: absolute; left: 14px; top: 14px; padding: 6px 12px; border-radius: 999px; background: var(--gold); color: var(--ink); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; }
.apw__c > div { display: grid; gap: 8px; padding: 18px 24px 26px; }
.apw__n { font-size: 3rem; font-weight: 300; line-height: 1; letter-spacing: -0.03em; color: #b98a00; }
.apw__c h3 { margin: 0; font-size: clamp(1.3rem, 1.8vw, 1.55rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.15; }
.apw__c p { margin: 0; font-size: 1.0625rem; line-height: 1.5; color: var(--ap-soft); }

/* =========================================================
   7. La méthode : 5 impacts
   ========================================================= */
.apd__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: 14px; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; list-style: none; }
.apd__s {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  min-height: calc(200px + var(--k) * 48px);
  padding: 20px 20px 24px;
  border-radius: 26px 26px 20px 20px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 24px 44px -30px rgb(22 33 61 / 0.45);
}
.apd__s.is-last { background: var(--gold); }
.apd__num { margin: 0; font-size: 2.3rem; font-weight: 300; line-height: 1; letter-spacing: -0.02em; color: #b98a00; }
.apd__s.is-last .apd__num { color: var(--ink); }
.apd__s h3 { margin: 0; font-size: clamp(1.1rem, 1.5vw, 1.3rem); font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; }
.apd__s p:not(.apd__num) { margin: 0; font-size: 0.9375rem; line-height: 1.4; color: var(--ap-soft); }
.apd__s.is-last p:not(.apd__num) { color: rgb(22 33 61 / 0.78); }
.apd__tag { display: inline-block; margin-left: 4px; padding: 3px 9px; border-radius: 999px; background: var(--gold); color: var(--ink); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; vertical-align: 0.15em; white-space: nowrap; }

/* =========================================================
   8. Notre présence
   ========================================================= */
.apg { --rig-x: 60%; --rig-y: 12px; --rig-w: 70px; --rig-tilt: -4deg; padding-bottom: clamp(64px, 8vw, 110px); }
.apg .cone { --spread: 28deg; --throw: 780px; }
.apg__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(24px, 4vw, 64px); }
.apg__tx { display: grid; justify-items: start; gap: 22px; }
.apg__stats { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; padding: 0; list-style: none; }
.apg__stats li { display: grid; gap: 4px; padding: 14px 20px; border-radius: 22px; background: rgb(255 255 255 / 0.08); }
.apg__stats b { font-size: 2.6rem; font-weight: 300; line-height: 1; letter-spacing: -0.02em; }
.apg__stats b i { font-style: normal; font-weight: 400; color: var(--gold); }
.apg__stats span { font-size: 0.9375rem; color: rgb(255 255 255 / 0.7); }
.apg__regs { display: grid; gap: 12px; width: 100%; margin: 0; }
.apg__regs > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); align-items: start; gap: 12px; }
.apg__regs dt { padding-top: 8px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(255 255 255 / 0.5); }
.apg__regs dd { margin: 0; }
.apg__regs ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.apg__chip {
  appearance: none;
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.1);
  color: #fff;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s;
}
.apg__chip:hover, .apg__chip.is-on { background: var(--gold); color: var(--ink); }
.apg__abroad { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 0.9375rem; color: rgb(255 255 255 / 0.7); }
.apg__abroad b { padding: 6px 14px; border-radius: 999px; background: rgb(255 255 255 / 0.12); color: #fff; font-weight: 500; }

.apg__map { position: relative; width: min(100%, 640px); aspect-ratio: 830 / 721; margin-inline: auto; }
.apg__map > img { position: absolute; inset: 0; width: 100%; height: 100%; filter: brightness(0) invert(1); opacity: 0.2; }
.apg__pin { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0; border: 0; background: none; cursor: pointer; }
.apg__pin i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 5px rgb(226 174 12 / 0.22);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.apg__pin em {
  position: absolute;
  left: 50%;
  bottom: 100%;
  padding: 4px 10px;
  border-radius: 10px;
  background: rgb(11 22 38 / 0.92);
  color: #fff;
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  translate: -50% 4px;
  pointer-events: none;
  transition: opacity 0.25s, translate 0.3s var(--ease-out);
}
.apg__pin.is-hq i { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
.apg__pin:hover i, .apg__pin:focus-visible i, .apg__pin.is-on i { transform: scale(1.5); box-shadow: 0 0 0 8px rgb(226 174 12 / 0.28); }
.apg__pin:hover em, .apg__pin:focus-visible em, .apg__pin.is-on em { opacity: 1; translate: -50% -2px; }
.apg__pin:hover, .apg__pin:focus-visible { z-index: 2; }
.apg__pin.is-on { z-index: 3; }
.apg__cap { position: absolute; left: 0; bottom: 0; margin: 0; font-size: 0.9375rem; color: rgb(255 255 255 / 0.7); }

/* =========================================================
   9. L'écosystème H&C
   ========================================================= */
.apb__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); margin: clamp(30px, 4vw, 52px) 0 0; padding: 0; list-style: none; }
.apb__grid > li { display: flex; }
.apb__c { position: relative; display: block; flex: 1; min-height: clamp(340px, 34vw, 440px); border-radius: 28px; overflow: hidden; isolation: isolate; color: #fff; text-decoration: none; }
.apb__c--ph img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: scale 0.9s var(--ease-out); }
.apb__c--ph:hover img { scale: 1.05; }
.apb__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(11 22 38 / 0) 28%, rgb(11 22 38 / 0.9) 100%); }
.apb__tx { position: absolute; inset: auto 0 0; display: grid; gap: 6px; padding: 26px; }
.apb__tx small { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; }
.apb__tx b { font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.1; }
.apb__tx > span:not(.apb__go, .apb__tbc) { font-size: 0.9375rem; line-height: 1.4; opacity: 0.88; }
.apb__go { display: inline-flex; align-items: center; justify-self: start; gap: 10px; margin-top: 8px; font-size: 0.9375rem; font-weight: 500; }
.apb__go i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--gold); color: var(--ink); transition: transform 0.35s var(--ease-out); }
.apb__go svg { width: 16px; height: 16px; stroke-width: 2; }
.apb__c:hover .apb__go i { transform: translate(2px, -2px); }
.apb__c--tx { background: var(--wall); color: var(--ink); }
a.apb__c--tx { background: var(--gold); }
.apb__c--tx .apb__tx { position: absolute; }
.apb__c--tx .apb__tx > span:not(.apb__go, .apb__tbc) { opacity: 1; color: rgb(22 33 61 / 0.78); }
.apb__c--tx .apb__go i { background: var(--ink); color: #fff; }
.apb__tbc { justify-self: start; margin-top: 8px; padding: 6px 12px; border-radius: 999px; background: var(--paper); font-size: 0.8125rem; font-weight: 600; color: var(--ap-muted); }

/* =========================================================
   10. Équipe (aperçu)
   ========================================================= */
.apt__top, .apv__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; }
.apt__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; gap: clamp(12px, 1.6vw, 20px); margin: clamp(30px, 4vw, 52px) 0 0; padding: 0; list-style: none; }
.apt__c { display: grid; gap: 2px; }
.apt__c:nth-child(even) { margin-top: clamp(0px, 2.4vw, 36px); }
.apt__c figure { aspect-ratio: 4 / 5; margin: 0 0 12px; border-radius: 26px; overflow: hidden; background: var(--paper); }
.apt__c img { display: block; width: 100%; height: 100%; object-fit: cover; }
.apt__c b { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
.apt__c span { font-size: 0.9375rem; line-height: 1.35; color: var(--ap-soft); }
.apt__c small { margin-top: 4px; font-size: 0.8125rem; color: #7a8498; }
.apt__stat { display: grid; align-content: end; gap: 6px; align-self: stretch; min-height: 260px; padding: 24px; border-radius: 26px; background: var(--gold); color: var(--ink); }
.apt__stat b { font-size: clamp(3rem, 4.6vw, 4.2rem); font-weight: 300; line-height: 1; letter-spacing: -0.03em; }
.apt__stat b i { font-style: normal; font-weight: 400; }
.apt__stat span { font-size: 1.0625rem; font-weight: 500; line-height: 1.25; }
.apt .ex { margin-top: clamp(22px, 2.6vw, 34px); }

/* =========================================================
   11. Témoignages
   ========================================================= */
.apv__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin: clamp(96px, 9vw, 120px) 0 0; padding: 0; list-style: none; }
.apv__c { display: grid; align-content: start; gap: 14px; padding: 0 clamp(20px, 2vw, 30px) clamp(24px, 2.2vw, 32px); border-radius: 30px; background: var(--wall); }
.apv__c figure { display: flex; align-items: flex-end; height: 208px; margin: -84px 0 4px; }
.apv__c img { display: block; width: auto; height: 100%; max-width: 100%; object-fit: contain; object-position: left bottom; }
.apv__c blockquote { margin: 0; }
.apv__c blockquote p { margin: 0; font-size: clamp(1.1875rem, 1.6vw, 1.4rem); font-weight: 400; line-height: 1.35; letter-spacing: -0.01em; }
.apv__who { display: grid; gap: 2px; margin: 0; }
.apv__who b { font-size: 1.0625rem; font-weight: 600; }
.apv__who span { font-size: 0.9375rem; color: var(--ap-muted); }

/* =========================================================
   12. CTA final (le rideau devant le pied de page)
   ========================================================= */
.apf { min-height: 0; padding-bottom: clamp(72px, 9vw, 130px); }
.apf__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.apf__card { padding-block: clamp(20px, 2.4vw, 30px) clamp(8px, 1.2vw, 14px); }
.apf__lab { margin: 0 0 4px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-muted); }
.apf__card ul { display: grid; margin: 0; padding: 0; list-style: none; }
.apf__card li + li { border-top: 1px solid var(--ap-line); }
.apf__row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px 0; color: var(--ink); text-decoration: none; }
.apf__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: #fff; transition: background-color 0.25s, color 0.25s; }
.apf__ic svg { width: 21px; height: 21px; stroke-width: 1.8; }
.apf__row b { display: block; font-size: 1.125rem; font-weight: 500; line-height: 1.25; }
.apf__row small { display: block; margin-top: 2px; font-size: 0.9375rem; line-height: 1.35; color: var(--ap-muted); }
.apf__row i svg { width: 20px; height: 20px; color: var(--ap-muted); stroke-width: 1.8; transition: transform 0.3s var(--ease-out); }
.apf__row:hover .apf__ic { background: var(--gold); color: var(--ink); }
.apf__row:hover i svg { transform: translateX(4px); }

/* =========================================================
   Tablette et mobile
   ========================================================= */
@media (max-width: 1100px) {
  .apt__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .apt__c:nth-child(even) { margin-top: 0; }
  .apt__stat { grid-column: span 2; min-height: 0; aspect-ratio: auto; align-self: stretch; }
}
@media (max-width: 1000px) {
  .aph__grid, .apm__grid, .apc__grid, .ape__grid, .apg__grid { grid-template-columns: minmax(0, 1fr); }
  .aph__ph { max-width: 560px; height: clamp(300px, 52vw, 400px); margin-top: clamp(24px, 4vw, 40px); }
  .aph__arch--a { left: 0; }
  .aph__h { max-width: none; }
  .aph__rib ol { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 8px; }
  .aph__rib ol::before { display: none; }
  .aph__rib li { padding-top: 30px; }
  .aph__rib li::after { content: ""; position: absolute; left: 0; right: 14px; top: 11px; height: 2px; background: rgb(255 255 255 / 0.28); }
  .apm__ph { aspect-ratio: 16 / 10; }
  .apc__t { min-height: 140px; }
  .ape__stage { display: none; }
  .ape__in { display: block; }
  .apw__row { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .apw__c:nth-child(2), .apw__c:nth-child(3) { margin-top: 0; }
  .apd__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .apd__s { min-height: calc(190px + var(--k) * 12px); }
  .apd__s.is-last { grid-column: span 2; }
  .apg__tx { display: contents; }
  .apg__grid { justify-items: start; gap: 22px; }
  .apg__map { order: 1; justify-self: center; width: min(100%, 520px); }
  .apg__stats, .apg__regs, .apg__abroad { order: 2; }
  .apb__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apv__row { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-top: 96px; row-gap: 104px; }
  .apy__top { align-items: flex-end; }
}
@media (max-width: 820px) {
  .aph, .apy, .apw, .apg { --rig-x: 62%; --rig-w: 62px; --rig-tilt: 0deg; }
  .aph .cone, .apy .cone, .apw .cone, .apg .cone { --spread: 16deg; }
}
@media (max-width: 760px) {
  .aph__rib ol { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding-left: 0; }
  .aph__rib ol::before { display: block; left: 7px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
  .aph__rib li { padding: 0 0 18px 34px; }
  .aph__rib li::before { left: 0; top: 4px; }
  .aph__rib li::after { display: none; }
  .aph__rib a { display: grid; gap: 2px; }
  .apd__steps { grid-template-columns: minmax(0, 1fr); }
  .apd__s, .apd__s.is-last { grid-column: auto; }
  .apd__s { width: calc(64% + var(--k) * 9%); min-height: 0; padding: 18px 20px 20px; border-radius: 22px; }
  .apt__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apt__stat { grid-column: 1 / -1; min-height: 150px; }
  .apg__regs > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .apg__regs dt { padding-top: 0; }
}
@media (max-width: 560px) {
  .aph__btns { display: grid; grid-template-columns: minmax(0, 1fr); }
  .aph__btns .btn { justify-content: flex-start; }
  .aph__ph { height: 300px; }
  .apm__acts { grid-template-columns: minmax(0, 1fr); }
  .apy__top { flex-direction: column; align-items: flex-start; }
  .apy__nav { order: 2; }
  .apy__c { flex-basis: min(78vw, 300px); margin-top: 0; }
  .apc__tiles { grid-template-columns: minmax(0, 1fr); }
  .apc__t { min-height: 120px; }
  .apb__grid { grid-template-columns: minmax(0, 1fr); }
  .apb__c { min-height: 340px; }
  .apt__c b { font-size: 1rem; }
  .apf__row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; }
  .apf__ic { width: 44px; height: 44px; }
  .apf__btns { display: grid; grid-template-columns: minmax(0, 1fr); }
  .apf__btns .btn { justify-content: flex-start; }
  .ape__b { padding-left: 0; }
  .ape__n { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .apy__btn, .apy__bar i, .apy__ph, .ape__p summary::after, .ape__ph, .apg__pin i, .apg__pin em, .apb__c--ph img,
  .apb__go i, .apf__row i svg, .aph__rib li::before { transition: none; }
}

/* 2026-10-16 · aperçu de l'équipe : monogramme tant que la photo n'est pas fournie (postes repris d'agiltym.com) */
.apt__c figure.is-mono { display: grid; place-items: center; background: linear-gradient(160deg, #1d3252, #0f1c31); color: var(--gold); font-size: clamp(2.2rem, 3.4vw, 3.4rem); font-weight: 300; letter-spacing: -0.02em; }
.apt__c figure.is-mono i { font-style: normal; }