/* pascallepine.ca – refonte visuelle
   Palette Direction artistique PL v2.0 : crème #F3F1ED · noir #0D0D0D
   secondaire #333333 · mentions #666666 · filets rgba(13,13,13,.14)
   EB Garamond (éditorial) · DM Sans (utilitaire)
   Les pages Accueil / Parcours / Pratique / Parlons-nous sont en styles
   intégrés dans index.html ; ce fichier porte le châssis (en-tête, menu,
   pied de page, bascule des pages), les états au survol et au focus,
   et les classes des vues rendues par site.js. */

:root {
  --pl-creme: #F3F1ED;
  --pl-noir: #0D0D0D;
  --pl-second: #333333;
  --pl-mention: #666666;
  --pl-filet: rgba(13, 13, 13, 0.14);
  --pl-filet-champ: rgba(13, 13, 13, 0.20);
  --pl-gris: #F2F2F2;
  --pl-sur-noir: #B3B3B3;
  --pl-filet-noir: #2E2E2E;
  --pl-serif: 'EB Garamond', Garamond, 'Times New Roman', serif;
  --pl-sans: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --pl-max: 1200px;
  --pl-marge: clamp(20px, 4vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--pl-creme); }
body {
  font-family: var(--pl-sans);
  color: var(--pl-noir);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
p, h1, h2, h3 { margin: 0; }
h1, h2, h3 { font-weight: 400; }
a { color: var(--pl-noir); text-decoration: none; }
a:hover { color: var(--pl-mention); }
button { font: inherit; color: inherit; background: none; border: 0; border-radius: 0; }
img, video { border-radius: 0; }
:focus-visible { outline: 2px solid var(--pl-noir); outline-offset: 3px; }
::selection { background: var(--pl-noir); color: var(--pl-creme); }

/* ── accès clavier ─────────────────────────────────────────────── */
.pl-skip { position: absolute; left: -9999px; top: 0; }
.pl-skip:focus {
  position: fixed; left: 12px; top: 12px; z-index: 200;
  background: var(--pl-noir); color: var(--pl-creme);
  padding: 12px 18px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
}

/* ── en-tête : le nom est le signe, le signe d'origine le précède ─ */
.pl-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--pl-creme);
  border-bottom: 1px solid var(--pl-filet);
}
.pl-bar {
  max-width: var(--pl-max); margin: 0 auto; padding: 0 var(--pl-marge);
  min-height: 74px; display: flex; align-items: center;
  justify-content: space-between; gap: 28px;
}
.pl-brand {
  display: flex; align-items: center; gap: 14px; flex: 0 0 auto;
  padding: 12px 0; min-height: 48px;
}
.pl-brand svg { display: block; flex: 0 0 auto; overflow: visible; }
.pl-brand span { font-family: var(--pl-serif); font-size: clamp(19px, 2.1vw, 23px); white-space: nowrap; }
.pl-brand:hover { color: var(--pl-noir); }

.pl-nav-desktop { display: flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; gap: clamp(14px, 1.5vw, 26px); }
.pl-nav-link, .pl-nav-ext {
  position: relative; padding: 26px 0;
  font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase;
  transition: color .2s ease;
}
.pl-nav-link { color: var(--pl-second); }
.pl-nav-ext { color: var(--pl-mention); }
.pl-nav-link:hover, .pl-nav-ext:hover { color: var(--pl-noir); }
.pl-nav-link[aria-current="page"] { color: var(--pl-noir); }
.pl-nav-link[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 22px;
  height: 1px; background: var(--pl-noir);
}
.pl-nav-sep { width: 1px; height: 26px; background: var(--pl-filet); }
.pl-arrow { font-family: var(--pl-serif); letter-spacing: 0; }
.pl-nav-toggle {
  display: none; min-height: 48px; min-width: 48px; align-items: center;
  font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer;
}
@media (max-width: 1119px) {
  .pl-nav-desktop { display: none; }
  .pl-nav-toggle { display: flex; }
}

/* ── menu plein écran (petits écrans) ──────────────────────────── */
.pl-menu {
  position: fixed; inset: 0; z-index: 90; background: var(--pl-creme);
  padding: 26px clamp(20px, 6vw, 40px) 40px;
  display: flex; flex-direction: column; overflow-y: auto;
}
.pl-menu[hidden] { display: none; }
.pl-menu-head { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.pl-menu-close { min-height: 48px; padding: 0 2px; font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; }
.pl-menu-nav { display: flex; flex-direction: column; margin-top: 34px; border-top: 1px solid var(--pl-filet); }
.pl-menu-nav a {
  font-family: var(--pl-serif); font-size: 30px; padding: 18px 0;
  min-height: 56px; border-bottom: 1px solid var(--pl-filet);
}
.pl-menu-ext { display: flex; flex-direction: column; gap: 4px; margin-top: 30px; }
.pl-menu-ext a {
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pl-mention); padding: 16px 0; min-height: 48px;
}

/* ── bascule des pages ─────────────────────────────────────────── */
.pl-page { display: none; }
.pl-page.is-active { display: block; }

/* ── pied de page ──────────────────────────────────────────────── */
.pl-footer { background: var(--pl-noir); color: var(--pl-creme); }
.pl-footer-in { max-width: var(--pl-max); margin: 0 auto; padding: clamp(46px, 6vw, 76px) var(--pl-marge) clamp(34px, 4vw, 52px); }
.pl-footer-top { display: flex; flex-wrap: wrap; gap: 30px clamp(30px, 6vw, 90px); align-items: baseline; justify-content: space-between; }
.pl-footer-name { font-family: var(--pl-serif); font-size: 24px; }
.pl-footer-tag { font-family: var(--pl-serif); font-style: italic; font-size: 17px; line-height: 1.4; color: var(--pl-sur-noir); margin-top: 8px; }
.pl-footer-nav { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.pl-footer-nav a {
  font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pl-sur-noir); padding: 14px 0; min-height: 44px;
}
.pl-footer-nav a:hover { color: var(--pl-creme); }
.pl-footer-bottom {
  display: flex; flex-wrap: wrap; gap: 14px clamp(24px, 4vw, 60px);
  align-items: baseline; justify-content: space-between;
  margin-top: 34px; border-top: 1px solid var(--pl-filet-noir); padding-top: 26px;
  font-size: 14px; line-height: 1.6; color: var(--pl-sur-noir);
}
.pl-footer-bottom a { color: var(--pl-creme); border-bottom: 1px solid rgba(243, 241, 237, 0.45); }
.pl-footer-bottom a[href^="tel"], .pl-footer-bottom a[href^="mailto"] { color: var(--pl-sur-noir); border-bottom: 0; }
.pl-footer-bottom a:hover { color: var(--pl-creme); }

/* ── éléments communs des vues rendues (site.js) ───────────────── */
.pl-sec { max-width: var(--pl-max); margin: 0 auto; padding: clamp(40px, 6vw, 88px) var(--pl-marge) 0; }
.pl-sec--suite { padding-top: clamp(48px, 7vw, 88px); }
.pl-label { font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--pl-mention); }
.pl-h1 { font-family: var(--pl-serif); font-size: clamp(2.3rem, 4.8vw, 3.9rem); line-height: 1.08; letter-spacing: -0.015em; max-width: 18ch; }
.pl-h1 em { font-style: italic; }
.pl-intro { display: flex; flex-direction: column; gap: 20px; max-width: 54ch; padding-top: 8px; }
.pl-p { font-size: 19px; line-height: 1.62; color: var(--pl-second); }
.pl-p--serif { font-family: var(--pl-serif); font-style: italic; font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.45; color: var(--pl-noir); }
.pl-split { display: flex; flex-wrap: wrap; gap: clamp(30px, 5vw, 72px); }
.pl-split > .pl-h1 { flex: 1 1 420px; min-width: 280px; }
.pl-split > .pl-intro { flex: 1 1 380px; min-width: 280px; }

.pl-filters { display: flex; flex-wrap: wrap; gap: 10px 26px; border-bottom: 1px solid var(--pl-filet); padding-bottom: 6px; }
.pl-filter {
  min-height: 44px; padding: 12px 0 10px; cursor: pointer;
  font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--pl-mention); border-bottom: 1px solid transparent;
  transition: color .2s ease;
}
.pl-filter:hover { color: var(--pl-noir); }
.pl-filter[aria-pressed="true"] { color: var(--pl-noir); font-weight: 500; border-bottom-color: var(--pl-noir); }

.pl-row { display: flex; flex-wrap: wrap; gap: 14px clamp(28px, 5vw, 72px); border-bottom: 1px solid var(--pl-filet); padding: 32px 0; }
.pl-row-meta { flex: 0 0 auto; width: 190px; display: flex; gap: 16px; align-items: baseline; }
.pl-row-n { font-size: 12px; letter-spacing: 0.18em; color: var(--pl-mention); }
.pl-row-cat { font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pl-mention); }
.pl-row-body { flex: 1 1 460px; min-width: 260px; max-width: 62ch; }
.pl-row-title { font-family: var(--pl-serif); font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.2; }
.pl-row-title a:hover { color: var(--pl-mention); }
.pl-row-text { font-size: 18px; line-height: 1.6; color: var(--pl-second); margin-top: 14px; }
.pl-row-actions { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 22px; }

.pl-action {
  display: inline-block; min-height: 44px; padding: 12px 0 8px;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--pl-noir); border-bottom: 1px solid var(--pl-noir);
  transition: letter-spacing .4s cubic-bezier(.65, 0, .35, 1), color .2s ease;
}
.pl-action:hover { letter-spacing: 0.3em; color: var(--pl-noir); }
.pl-action--quiet { font-weight: 400; color: var(--pl-mention); border-bottom-color: var(--pl-filet-champ); }
.pl-action--quiet:hover { letter-spacing: 0.24em; color: var(--pl-noir); }
.pl-action--dark { color: var(--pl-creme); border-bottom-color: rgba(243, 241, 237, 0.55); }
.pl-action--dark:hover { color: var(--pl-creme); }

.pl-back { font-family: var(--pl-serif); font-size: 17px; color: var(--pl-mention); padding: 10px 0; min-height: 44px; }
.pl-back:hover { color: var(--pl-noir); }
.pl-kicker { display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: baseline; }

.pl-band { background: var(--pl-noir); color: var(--pl-creme); }
.pl-band-in { max-width: var(--pl-max); margin: 0 auto; padding: clamp(70px, 10vw, 140px) var(--pl-marge); }
.pl-band h2 { font-family: var(--pl-serif); font-size: clamp(1.9rem, 3.8vw, 3.2rem); line-height: 1.12; letter-spacing: -0.015em; max-width: 24ch; }
.pl-band h2 em { font-style: italic; }

.pl-fiche { max-width: var(--pl-max); margin: 0 auto; padding: clamp(34px, 5vw, 64px) var(--pl-marge) clamp(70px, 9vw, 120px); }
.pl-fiche-h1 { font-family: var(--pl-serif); font-size: clamp(2.3rem, 5vw, 4.2rem); line-height: 1.08; letter-spacing: -0.015em; margin-top: 26px; max-width: 20ch; }
.pl-fiche-cols { display: flex; flex-wrap: wrap; gap: clamp(30px, 5vw, 72px); margin-top: clamp(32px, 5vw, 54px); border-top: 1px solid var(--pl-filet); padding-top: 30px; }
.pl-fiche-lede { flex: 1 1 380px; min-width: 280px; font-family: var(--pl-serif); font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.38; max-width: 40ch; }
.pl-fiche-body { flex: 1 1 420px; min-width: 280px; max-width: 62ch; display: flex; flex-direction: column; gap: 22px; }
.pl-fiche-actions { display: flex; flex-wrap: wrap; gap: 16px 32px; margin-top: 8px; }
.pl-pager { display: flex; flex-wrap: wrap; gap: 18px 40px; justify-content: space-between; margin-top: clamp(56px, 8vw, 100px); border-top: 1px solid var(--pl-filet); padding-top: 26px; }
.pl-pager a { display: flex; flex-direction: column; gap: 8px; max-width: 34ch; padding: 8px 0; min-height: 44px; }
.pl-pager a:last-child { text-align: right; }
.pl-pager-label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pl-mention); }
.pl-pager-title { font-family: var(--pl-serif); font-size: 1.25rem; color: var(--pl-noir); }

.pl-lecture-head { margin-top: clamp(26px, 4vw, 48px); border-bottom: 1px solid var(--pl-filet); padding-bottom: clamp(30px, 4vw, 48px); }
.pl-lecture-title { font-family: var(--pl-serif); font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.04; letter-spacing: -0.015em; }
.pl-lecture-title span { display: block; }
.pl-lecture-sf { font-family: var(--pl-serif); font-style: italic; font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.45; color: var(--pl-mention); margin-top: 26px; max-width: 44ch; }
.pl-lecture-sec { display: flex; flex-wrap: wrap; gap: 18px clamp(28px, 5vw, 72px); border-bottom: 1px solid var(--pl-filet); padding: clamp(36px, 5vw, 60px) 0; }
.pl-lecture-n { flex: 0 0 auto; width: 190px; font-size: 12px; letter-spacing: 0.18em; color: var(--pl-mention); }
.pl-lecture-col { flex: 1 1 460px; min-width: 260px; max-width: 64ch; display: flex; flex-direction: column; gap: 22px; }
.pl-lecture-col h2 { font-family: var(--pl-serif); font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.18; letter-spacing: -0.01em; }
.pl-lecture-p { font-family: var(--pl-serif); font-size: 20px; line-height: 1.58; color: var(--pl-second); }
.pl-lecture-q { white-space: pre-line; font-family: var(--pl-serif); font-style: italic; font-size: clamp(1.25rem, 1.9vw, 1.55rem); line-height: 1.42; color: var(--pl-noir); border-left: 1px solid var(--pl-noir); padding-left: 22px; }
.pl-lecture-def { display: flex; flex-wrap: wrap; gap: 4px 18px; border-top: 1px solid var(--pl-filet); padding-top: 14px; }
.pl-lecture-def dt { flex: 0 0 auto; width: 130px; font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pl-mention); }
.pl-lecture-def dd { flex: 1 1 260px; margin: 0; font-family: var(--pl-serif); font-size: 19px; line-height: 1.55; color: var(--pl-second); }
.pl-lecture-li { display: flex; gap: 14px; font-family: var(--pl-serif); font-size: 19px; line-height: 1.55; color: var(--pl-second); }
.pl-lecture-li span:first-child { color: var(--pl-mention); }
.pl-lecture-foot { display: flex; flex-wrap: wrap; gap: 18px 40px; justify-content: space-between; align-items: baseline; padding-top: 30px; font-size: 14px; color: var(--pl-mention); }

/* ── survols et focus des pages à styles intégrés ──────────────── */
.pl-i1:hover { letter-spacing: 0.42em !important }
.pl-i2:hover { color: #0D0D0D !important }
.pl-i3:hover { letter-spacing: 0.42em !important; color: #F3F1ED !important }
.pl-i4:hover { letter-spacing: 0.42em !important; color: #F3F1ED !important }
.pl-i5:hover { letter-spacing: 0.42em !important; color: #F3F1ED !important }
.pl-i6:hover { color: #0D0D0D !important }
.pl-i7:focus { border-bottom: 1px solid #0D0D0D !important; outline: none !important }
.pl-i8:focus { border-bottom: 1px solid #0D0D0D !important; outline: none !important }
.pl-i9:focus { border-bottom: 1px solid #0D0D0D !important; outline: none !important }
.pl-i10:focus { border-bottom: 1px solid #0D0D0D !important; outline: none !important }
.pl-i11:focus { border-bottom: 1px solid #0D0D0D !important; outline: none !important }
.pl-i12:hover { letter-spacing: 0.3em !important }

/* ── mouvement : une seule entrée, rien au défilement ──────────── */
@keyframes plFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

#contenu:focus { outline: none; }

/* Dernier contrôle de lisibilité des repères et du focus. */
.pl-label, .pl-row-cat, .pl-row-n, .pl-lecture-n, .pl-pager-label,
.pl-filter, .pl-nav-link, .pl-nav-ext, .pl-nav-toggle {
  font-size: 12px;
  font-weight: 500;
}
.pl-header a, .pl-nav-desktop a { white-space: nowrap; }
.pl-menu[hidden] { display: none; }
.pl-menu a:focus-visible, .pl-menu button:focus-visible { outline-offset: 5px; }
.pl-page.is-active { scroll-margin-top: 88px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}