.pc-sec{background:var(--pc-page);padding:48px 0}
  #per-comprendre{
	--pc-navy:#07124A;
	--pc-orange:#F18815;
	--pc-orange-2:#d4760f;
	--pc-muted:#64748B;
	--pc-muted-2:#6b7391;
	--pc-line:#E7E9F0;
	--pc-hair:#C9D2E4;
	--pc-tint:#EEF1F9;
	--pc-page:#F8F9FB;
	--pc-font:'Plus Jakarta Sans',system-ui,sans-serif;
	max-width:1240px;margin:0 auto;padding:0 32px;font-family:var(--pc-font);line-height:1.55}
  #per-comprendre p,#per-comprendre h2,#per-comprendre h3,#per-comprendre h4{margin:0;padding:0}
  #per-comprendre .pc__ey{display:flex;align-items:center;gap:10px;font-size:11.5px;font-weight:800;
    letter-spacing:.16em;text-transform:uppercase;color:var(--pc-navy);margin:0 0 16px}
  #per-comprendre .pc__ey::before{content:"";width:16px;height:3px;border-radius:2px;background:var(--pc-orange);flex:none}
  #per-comprendre .pc__t{font-size:36px;font-weight:800;line-height:1.18;letter-spacing:-.03em;
    color:var(--pc-navy);margin:0 0 16px;max-width:20em}
  #per-comprendre .pc__lead{font-size:16.5px;line-height:28px;color:var(--pc-muted);margin:0 0 12px;max-width:44em}
  #per-comprendre .pc__lead b{color:var(--pc-navy);font-weight:700}

  /* le chemin : cinq etapes, le numero dans sa propre boite */
  #per-comprendre .pc__path{margin:34px 0 0}
  /* LE CHEMIN DES CHIFFRES DE CLAIRE
     Les trois encadres de Claire sortent des cartes et se posent dans une colonne
     a droite, sur le fond de la section. Un pointille orange les relie sur toute
     la hauteur : il est dehors, donc visible, ce qui etait impossible tant qu ils
     etaient a l interieur des cartes blanches. */
  #per-comprendre .pc__path{position:relative;margin:34px 0 0}
  #per-comprendre .pc__path::before{content:"";position:absolute;top:34px;bottom:34px;right:250px;
    width:0;border-left:2px dashed rgba(241,136,21,.5)}
  #per-comprendre .pc__step{display:grid;grid-template-columns:1fr 250px;gap:34px;align-items:start;
    margin:0 0 20px}
  #per-comprendre .pc__step:last-child{margin-bottom:0}
  /* Le rail porte son propre decalage : sa premiere ligne se pose sur le titre h3
     de la carte, plus sur son sur-titre. 30 (padding de .pc__box) + 34 (hauteur de
     .pc__num, qui fixe .pc__top) + 12 (marge de .pc__top) = 76px jusqu au h3, moins
     22px de padding interne de .pc__fig = 54px. Le modele de la grille, la carte et
     l ordre des elements ne changent pas. */
  #per-comprendre .pc__rail{position:relative;padding-top:54px}
  #per-comprendre .pc__fig{position:relative;margin-left:28px;padding:20px 22px;background:#fff;
    border-radius:14px;box-shadow:0 10px 28px -18px rgba(7,18,74,.26)}
  #per-comprendre .pc__fig::before{content:"";position:absolute;left:-28px;top:28px;width:28px;height:2px;
    background:var(--pc-orange)}
  #per-comprendre .pc__fig::after{content:"";position:absolute;left:-34px;top:23px;width:12px;height:12px;
    border-radius:50%;background:var(--pc-orange);box-shadow:0 0 0 4px var(--pc-page)}
  #per-comprendre .pc__fig-k{font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
    color:var(--pc-orange-2);margin:0 0 10px;line-height:1.4}
  #per-comprendre .pc__fig-v{font-size:28px;font-weight:800;letter-spacing:-.04em;line-height:1;
    color:var(--pc-navy);margin:0;font-variant-numeric:tabular-nums}
  #per-comprendre .pc__fig-v span{font-size:19px;font-weight:700;margin-left:2px}
  #per-comprendre .pc__fig-d{font-size:12.5px;line-height:19px;color:var(--pc-muted-2);margin:10px 0 0}
  #per-comprendre .pc__fig--acc .pc__fig-v{color:var(--pc-orange-2)}
  #per-comprendre .pc__box--cas{background:var(--pc-tint);box-shadow:none}
  #per-comprendre .pc__num--cas{background:var(--pc-orange)}
  #per-comprendre .pc__fig--txt .pc__fig-v{font-size:20px;letter-spacing:-.02em;line-height:1.2}
  #per-comprendre .pc__box{background:#fff;border-radius:20px;padding:30px 32px;
    box-shadow:0 16px 44px -28px rgba(7,18,74,.22)}
  #per-comprendre .pc__top{display:flex;align-items:center;gap:14px;margin:0 0 12px}
  #per-comprendre .pc__num{flex:none;width:34px;height:34px;border-radius:10px;background:var(--pc-navy);
    color:#fff;display:flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
  #per-comprendre .pc__kick{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
    color:var(--pc-orange-2)}
  #per-comprendre .pc__h3{font-size:23px;font-weight:800;line-height:1.26;letter-spacing:-.024em;
    color:var(--pc-navy);margin:0 0 14px;max-width:24em}
  #per-comprendre .pc__p{font-size:15.5px;line-height:27px;color:var(--pc-muted);margin:0 0 14px;max-width:44em}
  #per-comprendre .pc__p:last-child{margin-bottom:0}
  #per-comprendre .pc__p b{color:var(--pc-navy);font-weight:700}

  /* le chiffre de l'etape, a droite */
  #per-comprendre .pc__fig{padding:22px 24px;background:var(--pc-tint);border-radius:14px;text-align:center}
  #per-comprendre .pc__fig-k{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
    color:var(--pc-muted-2);margin:0 0 8px}
  #per-comprendre .pc__fig-v{font-size:31px;font-weight:800;letter-spacing:-.04em;line-height:1;
    color:var(--pc-navy);font-variant-numeric:tabular-nums}
  #per-comprendre .pc__fig-v span{font-size:20px;font-weight:700;margin-left:2px}
  #per-comprendre .pc__fig-d{font-size:12.5px;line-height:19px;color:var(--pc-muted-2);margin:10px 0 0}
  #per-comprendre .pc__fig--acc .pc__fig-v{color:var(--pc-orange-2)}
  #per-comprendre .pc__box--cas{background:var(--pc-tint);box-shadow:none}
  #per-comprendre .pc__num--cas{background:var(--pc-orange)}
  #per-comprendre .pc__fig--txt .pc__fig-v{font-size:20px;letter-spacing:-.02em;line-height:1.2}
  #per-comprendre .pc__acct{margin-top:22px}
  #per-comprendre .pc__acct-k{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
    color:var(--pc-orange-2);margin:0 0 12px}

  /* les deux supports, et les cinq sorties : des lignes lisibles */
  #per-comprendre .pc__pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:4px 0 0}
  #per-comprendre .pc__sup{padding:20px 22px;background:var(--pc-page);border-radius:14px}
  #per-comprendre .pc__sup-t{font-size:15.5px;font-weight:800;color:var(--pc-navy);margin:0 0 4px}
  #per-comprendre .pc__sup-s{font-size:12.5px;font-weight:700;color:var(--pc-orange-2);margin:0 0 10px}
  #per-comprendre .pc__sup-d{font-size:14px;line-height:22px;color:var(--pc-muted)}

  #per-comprendre .pc__ways{margin:6px 0 0}
  #per-comprendre .pc__way{display:grid;grid-template-columns:26px 1fr;gap:14px;padding:15px 0;
    border-bottom:1px solid var(--pc-line)}
  #per-comprendre .pc__way:last-child{border-bottom:none;padding-bottom:0}
  #per-comprendre .pc__way svg{width:20px;height:20px;margin-top:2px;fill:none;stroke:var(--pc-orange);
    stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  #per-comprendre .pc__way-t{font-size:15.5px;font-weight:800;color:var(--pc-navy);margin:0 0 3px}
  #per-comprendre .pc__way-d{font-size:14px;line-height:22px;color:var(--pc-muted)}
  #per-comprendre .pc__way-d b{color:var(--pc-navy);font-weight:700}

  /* les deux briques de l'impot */
  #per-comprendre .pc__bricks{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:4px 0 16px}
  #per-comprendre .pc__brick{padding:22px 24px;background:#fff;border-radius:14px;
    box-shadow:0 10px 28px -18px rgba(7,18,74,.26)}
  #per-comprendre .pc__brick-k{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
    color:var(--pc-orange-2);margin:0 0 8px}
  #per-comprendre .pc__brick-t{font-size:16.5px;font-weight:800;color:var(--pc-navy);margin:0 0 8px;line-height:1.3}
  #per-comprendre .pc__brick-d{font-size:14px;line-height:22px;color:var(--pc-muted);margin:0 0 14px}
  #per-comprendre .pc__brick-d b{color:var(--pc-navy);font-weight:700}
  #per-comprendre .pc__brick-n{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    padding:12px 14px;background:var(--pc-tint);border-radius:10px}
  #per-comprendre .pc__brick-nk{font-size:11.5px;font-weight:700;color:var(--pc-muted-2)}
  #per-comprendre .pc__brick-nv{font-size:18px;font-weight:800;color:var(--pc-navy);
    font-variant-numeric:tabular-nums}

  /* le compte, pose comme une addition */
  #per-comprendre .pc__nl{display:grid;grid-template-columns:26px 1fr auto;gap:14px;align-items:baseline;
    padding:14px 0;border-bottom:1px solid var(--pc-line)}
  #per-comprendre .pc__nl-op{font-size:17px;font-weight:800;color:var(--pc-hair);text-align:center;line-height:1}
  #per-comprendre .pc__nl-lab{font-size:14.5px;line-height:22px;color:var(--pc-muted)}
  #per-comprendre .pc__nl-n{font-size:19px;font-weight:800;color:var(--pc-navy);white-space:nowrap;
    letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  #per-comprendre .pc__nl--sub{border-top:2px solid var(--pc-navy);border-bottom:none;margin-top:2px}
  #per-comprendre .pc__nl--sub .pc__nl-op{color:var(--pc-navy)}
  #per-comprendre .pc__nl--sub .pc__nl-lab{font-weight:700;color:var(--pc-navy)}
  #per-comprendre .pc__nl--tot{border-bottom:none;margin-top:8px;padding:18px 22px;background:#FDF0E0;
    border-radius:14px;align-items:center}
  #per-comprendre .pc__nl--tot .pc__nl-op{color:var(--pc-orange)}
  #per-comprendre .pc__nl--tot .pc__nl-lab{font-size:15.5px;font-weight:800;color:var(--pc-navy)}
  #per-comprendre .pc__nl--tot .pc__nl-n{font-size:30px;color:var(--pc-orange-2)}

  /* les six portes */
  #per-comprendre .pc__doors{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:6px 0 0}
  #per-comprendre .pc__door{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;
    background:var(--pc-page);border-radius:12px;font-size:14.5px;line-height:23px;font-weight:600;
    color:var(--pc-muted)}
  #per-comprendre .pc__door svg{flex:none;width:17px;height:17px;margin-top:3px;fill:none;
    stroke:var(--pc-orange);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  #per-comprendre .pc__ref{font-size:12.5px;line-height:20px;color:var(--pc-muted-2);margin:18px 0 0;
    padding-top:16px;border-top:1px solid var(--pc-line)}

  @media(max-width:900px){
    #per-comprendre .pc__pair,#per-comprendre .pc__bricks{grid-template-columns:1fr}
    #per-comprendre .pc__doors{grid-template-columns:1fr 1fr}
  }
  @media(max-width:600px){
    #per-comprendre{padding:0 20px}
    #per-comprendre .pc__t{font-size:26px}
    #per-comprendre .pc__h3{font-size:19px}
    #per-comprendre .pc__box{padding:22px 20px}
    #per-comprendre .pc__doors{grid-template-columns:1fr;gap:10px}
    #per-comprendre .pc__num{width:30px;height:30px;font-size:12px;border-radius:9px}
    /* Le decalage du rail ne survit pas ici : a cette largeur le padding de la
       carte et .pc__num rapetissent (64px, pas 76px), et la rangee est deja
       serree. Remis a zero plutot que recalcule, pour ne pas creer de vide. */
    #per-comprendre .pc__rail{padding-top:0}

    #per-comprendre .pc__nl{grid-template-columns:20px 1fr;gap:6px 10px}
    #per-comprendre .pc__nl-n{grid-column:2}
  }

/* PROMPT 58 : respiration sous le carton de l'etape 03.
   .pc__box est partagee par les sept etapes : on ne touche donc QUE le carton
   porteur du modificateur --tail, pose dans le gabarit sur cette seule etape.
   La derniere ligne de ce carton est un .pc__p:last-child, dont la marge basse
   est annulee ; le texte s'appuyait donc directement sur les 30px de rembourrage
   de la carte. On ajoute 22px, ce qui reste dans la fourchette demandee. */
#per-comprendre .pc__box--tail { padding-bottom: 52px; }
@media (max-width: 860px) {
	/* Base mobile : 22px de rembourrage. Meme increment, meme intention. */
	#per-comprendre .pc__box--tail { padding-bottom: 44px; }
}