/* ==========================================================================
   PROFIL
   Fiche noir / blanc / magenta, comme l'écran de statut d'un personnage.
   Grand écran : Identité et Présentation côte à côte, Parcours dessous,
   le tout dans la fenêtre. Petit écran : un sélecteur (Identité,
   Présentation, Parcours) affiche une rubrique à la fois, sans défilement.
   ========================================================================== */

#profil::before{background:
  linear-gradient(100deg,transparent 0 61%,var(--magenta) 61% 61.5%,transparent 61.5%),
  linear-gradient(100deg,var(--veil-mono) 0 62%,var(--veil-mono-soft) 62.2% 100%)}

.pf{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:auto auto;align-content:start;
  gap:clamp(12px,2.4vh,30px) clamp(22px,3vw,44px);max-width:1150px}
.pf-block{min-width:0;min-height:0}

/* Sélecteur, visible seulement sur petit écran */
.pf-switch{display:none;flex:none;gap:.4rem}
.pfs{position:relative;isolation:isolate;flex:1;padding:.55rem .6rem;border:0;background:none;cursor:pointer;color:var(--paper);
  font:italic 800 .92rem/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase}
.pfs::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:skewX(-14deg);box-shadow:inset 0 0 0 1px var(--grey)}
.pfs[aria-selected="true"]{color:var(--ink)}
.pfs[aria-selected="true"]::before{background:var(--paper);box-shadow:0 3px 0 var(--magenta)}
.pfs:focus-visible{outline:none}
.pfs:focus-visible::before{box-shadow:0 0 0 3px var(--foam)}

/* Identité */
.pf-card{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:clamp(4.4rem,6.5vw,5.6rem) minmax(0,1fr);
  background:var(--paper);color:var(--ink);clip-path:polygon(0 0,100% 0,calc(100% - 2.2rem) 100%,0 100%)}
.pf-mono{display:grid;justify-items:center;align-content:start;padding-top:1rem;background:var(--ink);color:var(--paper);
  border-right:6px solid var(--magenta);font:italic 900 clamp(2rem,3.4vw,2.8rem)/1 var(--f-display);letter-spacing:-.05em}
.pf-mono span{animation:numSlam .5s .35s cubic-bezier(.2,1.6,.4,1) backwards}
.pf-body{min-width:0;padding:clamp(14px,2.4vh,28px) clamp(40px,5vw,60px) clamp(14px,2.4vh,28px) clamp(18px,2.4vw,28px)}
.pf-line{display:flex;align-items:center;gap:.55rem;margin:0;font:italic 700 .95rem/1.2 var(--f-display);letter-spacing:.06em;text-transform:uppercase}
.pf-line::before{content:"";flex:none;width:3px;height:1.3em;background:var(--magenta);transform:rotate(25deg)}
.pf-name{margin:.35rem 0 0;font:italic 900 clamp(1.9rem,min(3.4vw,5.4vh),2.8rem)/.92 var(--f-display);text-transform:uppercase}
.pf-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.4rem 1rem;margin:clamp(.6rem,1.6vh,1rem) 0 0;padding-top:clamp(.6rem,1.4vh,.9rem);border-top:2px solid var(--ink)}
.pf-facts dt{font:italic 800 .82rem/1.5 var(--f-display);letter-spacing:.12em;text-transform:uppercase}
.pf-facts dt::after{content:" ·"}
.pf-facts dd{margin:0;font:500 .97rem/1.45 var(--f-body)}
.pf-facts a{color:var(--ink);text-decoration-color:var(--magenta);text-decoration-thickness:2px;text-underline-offset:3px}

/* Présentation */
.pf-bio{display:grid;gap:clamp(.6rem,1.4vh,.9rem);padding:clamp(16px,2.6vh,28px) clamp(18px,2.6vw,30px);background:var(--ink);box-shadow:inset 0 0 0 1px var(--grey)}
.pf-tag{display:inline-flex;align-items:center;gap:.6rem;justify-self:start;margin:0;padding:.32rem .9rem .32rem .4rem;background:var(--paper);color:var(--ink);
  font:italic 900 1.1rem/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;clip-path:polygon(0 0,100% 0,94% 100%,0 100%)}
.checker{width:1.4rem;height:1.4rem;background:conic-gradient(var(--ink) 25%,var(--paper) 0 50%,var(--ink) 0 75%,var(--paper) 0) 0 0/.7rem .7rem;
  animation:checker 2s steps(2) infinite}
.pf-bio p:not(.pf-tag){margin:0;font:400 clamp(.96rem,1.2vw,1.03rem)/1.65 var(--f-body);color:var(--paper);max-width:62ch}
.pf-cta{justify-self:start;margin-top:.2rem}
.pf-cta::before{background:var(--magenta)}
.pf-cta:hover::before{background:var(--paper)}

/* Parcours */
.pf-path{grid-column:1/-1}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
.step{position:relative;isolation:isolate;display:grid;align-content:start;gap:.3rem;padding:clamp(.7rem,1.6vh,1rem) 1.5rem clamp(.8rem,1.8vh,1.1rem) 1.3rem;color:var(--paper);
  transition:transform .18s var(--ease-out),color .15s;animation:revealIn .5s cubic-bezier(.2,1.25,.4,1) backwards;animation-delay:calc(.5s + var(--n) * 110ms)}
.step::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);box-shadow:inset 0 0 0 1px var(--grey);transform:skewX(-8deg);transition:background .15s}
.step:hover{transform:translateY(-4px);color:var(--ink)}
.step:hover::before{background:var(--paper)}
.step-n{font:italic 900 clamp(1.8rem,3.4vh,2.4rem)/.85 var(--f-display);color:var(--magenta);letter-spacing:-.03em}
.step-t{margin:0;font:italic 800 1.18rem/1.1 var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.step-d{margin:0;font:400 .93rem/1.45 var(--f-body);opacity:.88}
.step:not(:last-child)::after{content:"";position:absolute;right:-.85rem;top:1.2rem;width:.7rem;height:1rem;background:var(--magenta);
  clip-path:polygon(0 0,100% 50%,0 100%,30% 50%)}

@keyframes checker{50%{background-position:.7rem 0}}
@keyframes blockIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}

/* Petit écran : une rubrique à la fois */
@media (max-width:860px){
  .pf-switch{display:flex}
  .pf{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
  .pf-block{display:none;grid-row:1;grid-column:1}
  .pf-block.is-on{display:block;animation:blockIn .35s var(--ease-out)}
  .pf-block .blk-label{display:none}
  .steps{grid-template-columns:minmax(0,1fr);gap:.7rem}
  .step:not(:last-child)::after{right:auto;left:1.6rem;top:auto;bottom:-.75rem;transform:rotate(90deg)}
}
@media (max-width:640px){
  .pf-card{grid-template-columns:3.4rem minmax(0,1fr)}
  .pf-mono{font-size:1.7rem}
  .pf-body{padding-right:2.4rem}
}