/* ════════════════════════════════════════════════════════════════════════
   Infographie « repères d'activité physique » (OMS 2020)
   Rendue par partials/infographie.php — préfixe .pa-
   Trois paliers : escalier 5 colonnes ≥1121px · 3+2 de 761 à 1120px · bandes ≤760px
   ════════════════════════════════════════════════════════════════════════ */

/* .s-sub vit dans le <style> inline d'index.php : on ne le touche pas, on le
   resserre ici, sous la seule .pa-section, pour coller l'alerte à l'accroche. */
.pa-section .s-sub{margin-bottom:24px}
.pa-info{max-width:1180px;margin:0 auto;background:var(--cream);border:1px solid var(--gray-light);border-radius:var(--r20);overflow:hidden;text-align:left}
/* En-tête de la carte */
.pa-hd{padding:24px 32px 20px;margin:0;font-family:var(--fd);font-weight:900;font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.25;text-transform:uppercase;letter-spacing:.02em;color:var(--black)}
/* Alerte sédentarité — HORS de la carte, entre l'accroche et l'infographie.
   text-align:left explicite : la section est centrée, la carte ne l'englobe plus. */
.pa-alert{display:flex;align-items:center;gap:16px;background:var(--red-pale);padding:18px 22px;max-width:1180px;margin:0 auto 24px;border-radius:var(--r12);text-align:left}
.pa-alert-dot{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--red);color:var(--cream);font-family:var(--fd);font-weight:900;font-size:18px;line-height:30px;text-align:center}
.pa-alert-txt{font-size:15px;line-height:1.5;color:var(--black)}
.pa-alert-txt strong{font-weight:700}
/* Escalier */
.pa-stair{display:grid;grid-template-columns:190px repeat(3,1fr) 190px;border-top:1px solid var(--gray-light);padding:0 32px}
.pa-step{display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 20px 32px;border-left:1px solid var(--gray-light)}
.pa-ill{flex:0 0 auto;width:90px;height:90px;border-radius:50%;background:var(--red-pale);display:flex;align-items:center;justify-content:center}
.pa-ill img{width:62px;height:62px;display:block}
/* L'âge est AVANT la pastille « i » dans le HTML : en mobile la tête passe en
   display:block et la pastille suit alors l'âge, sur une ligne qui tient toujours.
   En bureau, order remet le trio dans l'ordre visuel nom + « i » / âge en dessous,
   et width:100% sur l'âge force le retour à la ligne. */
.pa-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;position:relative;text-align:center}
.pa-name{order:1;font-family:var(--fd);font-weight:900;font-size:15px;text-transform:uppercase;letter-spacing:.04em;color:var(--black);line-height:1.2}
.pa-age{order:3;width:100%;font-size:13px;color:var(--gray)}
.pa-fig{margin-top:auto;width:100%;min-height:92px;background:var(--warm);border-radius:var(--r12);padding:12px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.pa-fig-n{font-family:var(--fd);font-weight:900;font-size:clamp(1.35rem,2vw,1.9rem);line-height:1;color:var(--red);white-space:nowrap}
.pa-fig-u{font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--gray);text-align:center}
/* Bouton « i » : zone tactile de 44 px, pastille visible de 21 px */
.pa-i{order:2;width:44px;height:44px;margin:-12px -10px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:inherit}
.pa-i span{width:21px;height:21px;border-radius:50%;background:var(--red);color:var(--cream);font-family:var(--fb);font-weight:700;font-size:12px;line-height:21px;text-align:center}
.pa-i:focus-visible{outline:2px solid var(--black);outline-offset:2px;border-radius:50%}
.pa-tip{display:none;position:absolute;top:34px;left:50%;transform:translateX(-50%);width:270px;max-width:78vw;background:var(--black);color:var(--cream);font-size:12px;font-weight:400;line-height:1.5;letter-spacing:0;text-transform:none;text-align:left;padding:12px 14px;border-radius:var(--r12);box-shadow:0 6px 24px rgba(17,17,17,.18);z-index:20}
.pa-head.open .pa-tip{display:block}
/* ⚠ nth-child et non nth-of-type : les 5 enfants de .pa-stair sont tous des <div>,
   « of-type » désignerait l'encart latéral et non la 3ᵉ tranche d'âge.
   La bulle du dernier pas est calée à droite : .pa-info est en overflow:hidden,
   une bulle centrée y serait rognée. */
.pa-stair>:nth-child(4) .pa-tip{left:auto;right:-10px;transform:none}
/* Encarts latéraux */
.pa-side{display:flex;flex-direction:column;gap:14px;padding:28px 20px 32px}
.pa-side-more{border-left:1px solid var(--gray-light)}
.pa-side-hd{display:flex;align-items:center;gap:8px}
.pa-side-dot{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--warm2);color:var(--gray);font-weight:700;font-size:15px;line-height:26px;text-align:center}
.pa-side-more .pa-side-dot{background:var(--red);color:var(--white)}
.pa-side-hd b{font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--black);line-height:1.25}
.pa-side p{font-size:13px;color:var(--gray);line-height:1.6;margin:0}
/* Pied de l'infographie */
.pa-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:var(--warm);padding:22px 32px;margin-top:36px}
.pa-sources{font-size:12px;color:var(--gray);line-height:1.7;margin:0;max-width:640px}
.pa-sources b{color:var(--black);font-weight:700}
.pa-sources a{color:var(--gray)}
/* Les deux sources alignées sur la même verticale, sous le mot « Sources ».
   padding-left réserve la gouttière des numéros → un intitulé qui passe à la
   ligne se cale sous son texte, pas sous son numéro. */
.pa-sources ol{margin:2px 0 0;padding-left:1.5em;list-style:decimal}
.pa-sources li{margin-top:2px}
.pa-src{font-size:.62em;font-weight:800;color:var(--red);vertical-align:super;margin-left:1px}
/* Tablette : les 3 tranches d'âge sur une ligne, les 2 encarts en dessous.
   Placement EXPLICITE — en auto-placement, l'encart « limiter » (1ᵉʳ dans le DOM)
   décalait les tranches et cassait la grille. */
@media(min-width:761px) and (max-width:1120px){
  .pa-stair{grid-template-columns:repeat(6,1fr)}
  .pa-stair>:nth-child(2){grid-area:1/1/2/3;border-left:0}
  .pa-stair>:nth-child(3){grid-area:1/3/2/5}
  .pa-stair>:nth-child(4){grid-area:1/5/2/7}
  .pa-stair>:nth-child(1){grid-area:2/1/3/4;border-top:1px solid var(--gray-light)}
  .pa-stair>:nth-child(5){grid-area:2/4/3/7;border-top:1px solid var(--gray-light)}
}
/* Mobile : bandes empilées — illustration à gauche, repère à droite. */
@media(max-width:760px){
  .pa-alert{margin:0 auto 18px;padding:16px 18px;gap:13px}
  .pa-hd{padding:20px 18px 16px;font-size:1rem}
  .pa-stair{grid-template-columns:1fr;padding:0 14px}
  .pa-stair>*{border-left:0;border-top:1px solid var(--gray-light);padding:20px 0}
  .pa-stair>:first-child{border-top:0}
  .pa-step{flex-direction:row;align-items:center;gap:12px;text-align:left;position:relative}
  .pa-ill{width:52px;height:52px}
  .pa-ill img{width:36px;height:36px}
  /* display:block et non flex : en flex, un nom sur deux lignes renvoyait
     la pastille « i » à la ligne suivante. En bloc, elle suit le texte. */
  .pa-head{display:block;flex:1 1 auto;min-width:0;text-align:left;position:static}
  .pa-name{display:block;font-size:14px}
  .pa-age{display:inline;width:auto;font-size:12px;white-space:nowrap}
  .pa-i{display:inline-flex;vertical-align:middle;margin:-12px -10px}
  .pa-fig{margin-top:0;width:auto;flex:0 0 auto;max-width:36%;min-height:0;background:none;padding:0;align-items:flex-end;gap:2px}
  .pa-fig-n{font-size:1.05rem}
  .pa-fig-u{text-align:right;font-size:11px}
  /* La bulle se cale sur toute la largeur de la bande : ancrée à .pa-head,
     elle débordait de .pa-info (overflow:hidden) et se faisait rogner. */
  .pa-tip,.pa-stair>:nth-child(4) .pa-tip{top:100%;left:0;right:0;width:auto;max-width:none;transform:none;margin-top:6px}
  .pa-foot{padding:20px 18px;margin-top:0;justify-content:center;text-align:center}
  /* La liste reste alignée à gauche même dans un pied centré : deux références
     centrées ne partagent aucune verticale et deviennent illisibles. */
  .pa-sources{text-align:left}
}