/* ============================================================================
   portfolio-layout.css — disposition « Éditorial » FIXE du portfolio (11/2026)
   ----------------------------------------------------------------------------
   Le visiteur ne personnalise plus rien : pas de palette.js, thème clair unique,
   accent unique. Chargé APRÈS console.css ; tout est scopé `body.pf-site`.
   Au-dessus de 880 px : la sidebar du shell devient une barre de navigation
   horizontale collante. En dessous : le tiroir mobile de console.css est conservé.
   ========================================================================== */
:root{ --accent:#d9531e; --pf-nav-h:68px; --pf-w:1160px; }
body.pf-site{
  --bg:#fafaf8; --surface:#ffffff; --surface-2:#f4f3ef;
  --border:#e6e5e0; --border-strong:#cfcdc6;
  --text:#17181a; --text-muted:#5f636a; --text-faint:#8d9097;
  --radius:16px;
  --accent-2:color-mix(in srgb, var(--accent), #000 16%);
}
body.pf-site h1, body.pf-site h2{ letter-spacing:-.035em; }

@media (min-width:881px){
  body.pf-site .shell{ display:block; }
  body.pf-site .side{
    position:sticky; top:0; z-index:40; height:var(--pf-nav-h);
    flex-direction:row; align-items:center; gap:2px; flex-wrap:nowrap;
    padding:0 max(24px, calc((100vw - var(--pf-w)) / 2));
    background:var(--bg); border-right:0; border-bottom:1px solid var(--border);
  }
  body.pf-site .side .brand{ padding:0; margin-right:auto; }
  body.pf-site .side .brand small{ display:none; }
  body.pf-site .side .wordmark{ font-size:21px; }
  body.pf-site .side .navlbl, body.pf-site .side .user{ display:none; }
  body.pf-site .side .nav{ display:contents; }
  body.pf-site .side .nav a{
    width:auto; padding:8px 10px; border-radius:999px; font-size:13px; white-space:nowrap;
  }
  body.pf-site .side .nav a svg{ display:none; }
  body.pf-site .side .nav a:hover{ background:transparent; color:var(--text); }
  body.pf-site .side .nav a.on{ background:#f0ece4; color:var(--text); font-weight:700; }
  /* le Dashboard est dans le pied de page (écosystème) ; « Me contacter » devient le bouton */
  body.pf-site .side .nav a[href="https://www.fabien-abrt.fr"]{ display:none; }
  body.pf-site .side .nav a[href="/pages/contact.html"]{
    order:99; margin-left:10px; background:var(--text); color:#fff; font-weight:600;
  }
  body.pf-site .side .nav a[href="/pages/contact.html"]:hover{ background:var(--accent); color:#fff; }
  body.pf-site .side .nav a[href="/pages/contact.html"].on{ background:var(--accent); color:#fff; }

  /* En-tête de page : un grand titre, plus une barre d'outils collante */
  body.pf-site .bar{
    position:static; background:transparent; border:0; flex-wrap:wrap;
    padding:56px max(24px, calc((100vw - var(--pf-w)) / 2)) 4px;
  }
  body.pf-site .bar h1{ font-size:clamp(34px,4.6vw,56px); line-height:1.05; letter-spacing:-.045em; white-space:normal; }
  body.pf-site .bar h1 small{ margin-top:10px; font-size:16px; letter-spacing:0; font-weight:400; color:var(--text-muted); }
  /* « Me contacter » est déjà le bouton de la barre de navigation */
  body.pf-site .bar a.btn[href="/pages/contact.html"]{ display:none; }
  body.pf-site .bar h1{ flex:1 1 360px; }
  body.pf-site .body{ padding:28px max(24px, calc((100vw - var(--pf-w)) / 2)) 56px; overflow:visible; }
  body.pf-site .foot{
    background:transparent; padding:24px max(24px, calc((100vw - var(--pf-w)) / 2));
  }
}

/* Boutons : plein noir, comme la maquette ; l'accent n'est que la touche */
body.pf-site .btn{ border-radius:999px; padding:11px 22px; background:var(--text); }
body.pf-site .btn:hover{ background:var(--accent); }
body.pf-site .btn.ghost{ background:var(--surface); color:var(--text); border:1px solid var(--border-strong); }
body.pf-site .btn.ghost:hover{ background:var(--surface-2); }
body.pf-site .seccard, body.pf-site .card, body.pf-site .scard{ border-radius:var(--radius); }
body.pf-site .seccard:hover{ border-color:var(--text); box-shadow:none; }

/* Accueil : héros centré, sans carte ni avatar */
body.pf-landing .hero{
  flex-direction:column; align-items:center; text-align:center; gap:0;
  background:transparent; border:0; padding:6vh 0 5vh; margin:0 !important;
}
body.pf-landing .hero .ava{ display:none; }
body.pf-landing .hero h2{ font-size:clamp(40px,7vw,84px); line-height:1.02; letter-spacing:-.05em; }
body.pf-landing .hero .role{ font-size:17px; margin-top:16px; }
body.pf-landing .hero p{ font-size:17px; max-width:640px; margin-left:auto; margin-right:auto; }
body.pf-landing .hero .skills{ justify-content:center; margin-top:22px; }
body.pf-landing .secgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
body.pf-landing .seccard{ flex-direction:column; padding:26px; gap:18px; }
body.pf-landing .seccard h3{ font-size:18px; letter-spacing:-.02em; }
body.pf-landing .seccard p{ font-size:14.5px; }
@media (max-width:1000px){ body.pf-landing .secgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ body.pf-landing .secgrid{ grid-template-columns:1fr; } body.pf-landing .hero h2{ font-size:38px; } }

/* CV, mode PDF : la barre de navigation n'appartient plus à .main */
body.pf-site.mode-pdf .main{ height:calc(100vh - var(--pf-nav-h)); height:calc(100dvh - var(--pf-nav-h)); }
@media (max-width:880px){ body.pf-site.mode-pdf .main{ height:100dvh; } }

/* Accueil : le grand titre est déjà le héros, la barre d'en-tête ferait doublon */
body.pf-landing .bar{ display:none; }
@media (max-width:880px){ body.pf-landing .bar{ display:flex; } }

/* CV, mode PDF : en-tête compact pour laisser la place au document */
@media (min-width:881px){
  body.pf-site.mode-pdf .bar{ padding-top:18px; padding-bottom:14px; }
  body.pf-site.mode-pdf .bar h1{ font-size:26px; }
  body.pf-site.mode-pdf .bar h1 small{ margin-top:2px; font-size:13px; }
}