/* Profil & Parcours (FR) / Profile & Career (EN) — contenu de l'ancien accueil, charte BOZONNET.
   Les textes occupent toute la largeur du conteneur commun (1200 px), comme sur Vision (demande du 20/10).
   Mise en forme seulement : textes, chiffres, photo et formulaire sont ceux de la page d'origine.
   Organisation reprise de l'ancienne version bleue (repère vertical des titres, frise chronologique,
   cartes de domaines, groupe de chiffres, contact en bande sombre), transposée en rouge/anthracite. */

.pp{font-size:18px}
.pp .muted{color:var(--bz-ink-2)}

/* ---------- Accroche ---------- */
.pp-hero__in{display:flex;gap:40px;align-items:flex-start;padding-top:56px;padding-bottom:40px}
.pp-hero__photo{flex:0 0 176px}
.pp-hero__photo img{width:176px;aspect-ratio:3 / 4;object-fit:cover;border:1px solid var(--bz-rule);border-radius:6px}
.pp-hero__txt{flex:1;min-width:0}
.pp-hero h1{font-size:36px;line-height:1.12;letter-spacing:-.01em}
.pp-role{margin-top:12px;font-size:18px;font-weight:500;line-height:1.45;color:var(--bz-ink)}
.pp-lead{margin-top:16px;color:var(--bz-ink-2)}
.pp-lead strong{color:var(--bz-ink)}
.pp-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------- Chiffres clés : un seul groupe, le chiffre d'abord ---------- */
.pp-kpis{padding-bottom:16px}
.pp-kpis__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));list-style:none;margin:0;padding:0;background:var(--bz-bg-2);border:1px solid var(--bz-rule);border-radius:8px}
.pp-kpis__grid li{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 12px;text-align:center}
.pp-kpis__grid li + li{border-left:1px solid var(--bz-rule)}
.pp-kpis .n{font-size:30px;font-weight:600;line-height:1.05;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--bz-ink)}
.pp-kpis .l{font-size:14px;line-height:1.35;color:var(--bz-ink-2)}

/* ---------- Sections : titre avec repère vertical rouge ---------- */
.pp-sec{padding:var(--bz-sec) 0;border-bottom:1px solid var(--bz-rule)}
.pp-sec:last-child{border-bottom:0}
/* Titres de section : composant partagé .bz-h2 (repère vertical rouge) */
.pp-sec h2{margin-bottom:24px}
.pp-sec > p + p{margin-top:14px}

/* Valeur ajoutée : leviers en étiquettes arrondies, liste cochée */
.value .vlead{font-size:19px}
.value .levers{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:20px 0 28px;padding:0}
.value .levers li{padding:7px 16px;background:var(--bz-bg-2);border:1px solid var(--bz-rule);border-radius:999px;font-size:15px;font-weight:500;line-height:1.3;color:var(--bz-ink)}
.value .vsub{font-weight:600;margin:28px 0 14px}
.value .checks{display:grid;grid-template-columns:1fr 1fr;gap:12px 48px;list-style:none;margin:0;padding:0}
.value .checks li{position:relative;padding-left:30px;line-height:1.45}
.value .checks li::before{content:"";position:absolute;left:0;top:.08em;width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23C8102E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5l3.5 3.5L15.5 6'/%3E%3C/svg%3E") no-repeat center / 20px}

/* Parcours : frise verticale continue, date au-dessus du rôle (lecture sans va-et-vient) */
.exp{position:relative;margin-left:5px;padding:0 0 30px 30px;border-left:2px solid var(--bz-rule)}
.exp:last-of-type{padding-bottom:4px}
.exp::before{content:"";position:absolute;left:-7px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--bz-bg);border:2px solid var(--bz-red);box-shadow:0 0 0 3px var(--bz-bg)}
.exp:first-of-type::before{background:var(--bz-red)}
.exp .meta{font-size:14px;font-weight:600;line-height:1.4;letter-spacing:.02em;color:var(--bz-ink-2)}
.exp .title{margin-top:4px;font-size:18px;font-weight:600;line-height:1.35;color:var(--bz-ink)}
.exp ul{margin:8px 0 0;padding-left:18px;color:var(--bz-ink-2)}
.exp li{margin:4px 0}
.exp li::marker{color:var(--bz-ink-2)}

/* Domaines : cartes structurées, lien CV aligné en bas */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}
.card{display:flex;flex-direction:column;gap:6px;padding:20px 22px;background:var(--bz-bg-2);border:1px solid var(--bz-rule);border-radius:8px;color:var(--bz-ink);text-decoration:none;transition:border-color .15s ease}
.card h3{font-size:18px;line-height:1.3}
.card p{font-size:15px;line-height:1.5;color:var(--bz-ink-2)}
.card .tag{margin-top:auto;padding-top:10px;font-size:15px;font-weight:600;color:var(--bz-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.card:hover{border-color:var(--bz-red)}
.card:hover .tag,.card:active .tag{color:var(--bz-red);text-decoration-thickness:2px}
@media (prefers-reduced-motion:reduce){.card{transition:none}}

/* Formation & Certifications : deux colonnes séparées par un filet (diplôme | certifications et formations),
   même traitement que la frise : intitulé en gras, détails en gris. Pas de cartes ni d'icônes. */
.edu__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.edu__col:first-child{padding-right:48px}
.edu__col + .edu__col{padding-left:48px;border-left:1px solid var(--bz-rule)}
.edu h3{font-size:18px;font-weight:600;line-height:1.35;color:var(--bz-ink)}
.edu__degree{margin-top:12px;color:var(--bz-ink)}
.edu__detail{margin-top:2px;color:var(--bz-ink-2)}
.edu ul{margin:12px 0 0;padding-left:18px;color:var(--bz-ink-2)}
.edu li{margin:4px 0}
.edu li::marker{color:var(--bz-ink-2)}

/* ---------- Contact : bande anthracite pleine largeur ----------
   Couleurs, champs, focus et messages : composant partagé .bz-ink (bz-page.css).
   La section reste dans le conteneur ; le fond déborde jusqu'aux bords de l'écran
   (ombre pleine découpée par clip-path), sans défilement horizontal. */
.pp-contact{padding:var(--bz-sec) 0 calc(var(--bz-sec) + 8px);box-shadow:0 0 0 100vmax var(--bz-ink);clip-path:inset(0 -100vmax)}
/* Bloc Contact identique à l'accueil : titre, phrase et formulaire unique (contact-copy.php, contact-form.php),
   formulaire limité à 720 px ; l'espace à droite est voulu */
.pp-sec.pp-contact{border-bottom:0}
.pp-contact__main > h2 + p{margin-top:-8px}
.pp-contact .bz-contact__form{margin-top:32px}

@media (max-width:879px){
  .pp-kpis__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pp-kpis__grid li:nth-child(4){border-left:0}
  .pp-kpis__grid li:nth-child(n+4){border-top:1px solid var(--bz-rule)}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-contact .bz-contact__form{margin-top:28px}
}
@media (max-width:767px){
  .pp{font-size:16px}
  .pp-hero__in{flex-direction:column;gap:24px;padding-top:36px;padding-bottom:28px}
  .pp-hero__photo{flex-basis:auto}
  .pp-hero__photo img{width:132px}
  .pp-hero h1{font-size:30px}
  .pp-role{font-size:16px}
  .pp-kpis__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-kpis__grid li{padding:18px 10px}
  .pp-kpis__grid li:nth-child(odd){border-left:0}
  .pp-kpis__grid li:nth-child(4){border-left:1px solid var(--bz-rule)}
  .pp-kpis__grid li:nth-child(n+3){border-top:1px solid var(--bz-rule)}
  .pp-kpis .n{font-size:26px}
  .value .vlead{font-size:17px}
  .value .checks{grid-template-columns:1fr}
  .exp{padding-left:24px;padding-bottom:26px}
  .exp .title{font-size:17px}
  .cards{grid-template-columns:minmax(0,1fr)}
  .edu__grid{grid-template-columns:minmax(0,1fr)}
  .edu__col:first-child{padding-right:0}
  .edu__col + .edu__col{margin-top:24px;padding:24px 0 0;border-left:0;border-top:1px solid var(--bz-rule)}
}