/* logiciel-gestion-de-paie.fr — famille V14-campus recomposée, signature « calendrier de mise en
   conformité DSN » (frise). Préfixes gpa- (coque/structure) / dsn- (composants actifs).
   Palette OKLCH -> cf. Design-Familles/_habillages/logiciel-gestion-de-paie.fr.md §2.
   Police : Neuton (titres, self-hosté) + Inter Tight (corps, self-hosté) — substitution
   documentée de "Louize" (police commerciale non licenciée), voir BUILD-NOTES §2bis.
   Invariants V14 : une SEULE classe de fond sombre (.bg-ink), coins arrondis + ombres légères
   (contraire de V2-papier), alternance stricte de fonds sur l'accueil. */

@font-face{font-family:"Neuton";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/neuton-400.woff2") format("woff2")}
@font-face{font-family:"Neuton";font-style:normal;font-weight:700;font-display:swap;
  src:url("/fonts/neuton-700.woff2") format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("/fonts/inter-tight-variable.woff2") format("woff2")}

:root{
  --gpa-ink: oklch(0.28 0.05 205);
  --gpa-on-ink: oklch(0.965 0.01 85);
  --gpa-on-ink-soft: oklch(0.76 0.03 205);
  --gpa-paper: oklch(0.978 0.008 85);
  --gpa-surface: oklch(0.953 0.010 85);
  --gpa-surface-2: oklch(0.925 0.013 85);
  --gpa-accent: oklch(0.62 0.13 182);
  --gpa-accent-deep: oklch(0.40 0.09 182);
  --gpa-accent-tint: oklch(0.94 0.035 182);
  --gpa-on-ink-link: oklch(0.80 0.09 182);
  --gpa-line: oklch(0.87 0.012 85);
  --gpa-line-soft: oklch(0.91 0.010 85);
  --gpa-field-line: oklch(0.62 0.02 205);
  --gpa-danger: oklch(0.55 0.16 25);

  --gpa-font-title: "Neuton", Georgia, serif;
  --gpa-font-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gpa-maxw: 78rem;
  --gpa-radius: 12px;
  --gpa-radius-sm: 8px;
  --gpa-shadow: 0 16px 36px oklch(0.28 0.05 205 / 0.10);
  --gpa-shadow-sm: 0 8px 20px oklch(0.28 0.05 205 / 0.08);
  --gpa-sp-1: 0.5rem; --gpa-sp-2: 1rem; --gpa-sp-3: 1.75rem; --gpa-sp-4: 2.75rem; --gpa-sp-5: 4.5rem;
  --gpa-hdr-h: 64px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;overflow-x:hidden;background:var(--gpa-paper);color:var(--gpa-ink);
  font-family:var(--gpa-font-body);font-weight:400;font-size:16.5px;line-height:1.64;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--gpa-accent-deep);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--gpa-accent)}
:focus-visible{outline:3px solid var(--gpa-accent);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.gpa-skip{position:absolute;left:-9999px;top:0;background:var(--gpa-ink);color:var(--gpa-on-ink);padding:12px 18px;z-index:99;border-radius:0 0 8px 0}
.gpa-skip:focus{left:0}

.gpa-wrap{max-width:var(--gpa-maxw);margin:0 auto;padding:0 var(--gpa-sp-3)}
.gpa-narrow{max-width:74ch}

h1,h2,h3,h4{margin:0 0 .55em;line-height:1.16;letter-spacing:-.006em;font-weight:700;font-family:var(--gpa-font-title)}
h1{font-size:clamp(2rem,4.4vw,3.15rem);max-width:22ch}
h2{font-size:clamp(1.45rem,2.7vw,2.05rem);max-width:26ch}
h3{font-size:1.08rem;font-weight:600;font-family:var(--gpa-font-body);letter-spacing:.005em}
em{font-style:italic;color:var(--gpa-accent-deep)}
p{margin:0 0 1.05em}
.grf-lede{font-size:clamp(1.02rem,1.35vw,1.15rem);color:oklch(0.40 0.03 205);max-width:64ch}
.bg-ink .grf-lede,.bg-ink p{color:var(--gpa-on-ink-soft)}
.bg-ink h2,.bg-ink h3{color:var(--gpa-on-ink)}
.bg-ink a{color:var(--gpa-on-ink-link)}
.bg-ink em{color:var(--gpa-on-ink-link);font-style:italic}
.bg-ink .gpa-stars{color:var(--gpa-on-ink-link)}
.bg-ink .gpa-kicker{color:var(--gpa-on-ink-link)}
.gpa-kicker{font-family:var(--gpa-font-body);font-weight:600;font-size:12.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--gpa-accent-deep);margin:0 0 8px;display:inline-block}

/* ── Fonds (alternance stricte, UNE seule classe de fond sombre) ────────── */
.bg-paper{background:var(--gpa-paper)}
.bg-surface{background:var(--gpa-surface)}
.bg-surface-2{background:var(--gpa-surface-2)}
.bg-accent-tint{background:var(--gpa-accent-tint)}
.bg-ink{background:var(--gpa-ink);color:var(--gpa-on-ink)}
section{padding:var(--gpa-sp-5) 0}
section.gpa-hero,.gpa-hero-editorial{padding:var(--gpa-sp-3) 0 var(--gpa-sp-4)}

/* ── Topbar + header ─────────────────────────────────────────────────── */
.gpa-topbar{background:var(--gpa-ink);color:var(--gpa-on-ink-soft);font-size:13px;overflow:hidden}
.gpa-topbar .gpa-wrap{display:flex;flex-wrap:wrap;gap:4px 20px;align-items:center;justify-content:space-between;min-height:34px;padding-top:5px;padding-bottom:5px;min-width:0}
.gpa-topbar span{min-width:0}
@media (max-width:520px){.gpa-topbar span:first-child{display:none}}
.gpa-topbar a{color:var(--gpa-on-ink)}
.gpa-topbar b{font-weight:700;color:var(--gpa-on-ink)}
.gpa-hdr{position:sticky;top:0;z-index:40;background:var(--gpa-paper);border-bottom:1px solid var(--gpa-line);overflow:hidden}
.gpa-hdr .gpa-wrap{display:flex;align-items:center;gap:12px;min-height:var(--gpa-hdr-h);flex-wrap:nowrap;min-width:0}
.gpa-brand{display:flex;flex-direction:column;line-height:1.15;text-decoration:none;flex:1 1 auto;min-width:0;overflow:hidden}
.gpa-brand b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.gpa-brand small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.gpa-brand b{font-weight:700;font-size:16px;font-family:var(--gpa-font-title);color:var(--gpa-ink)}
.gpa-brand small{font-weight:500;font-size:11.5px;color:var(--gpa-accent-deep);letter-spacing:.02em;text-transform:uppercase}
.gpa-burger{display:none;margin-left:auto;flex:0 0 auto;background:none;border:1px solid var(--gpa-line);border-radius:var(--gpa-radius-sm);padding:.5rem .7rem;font-size:.85rem;font-family:var(--gpa-font-body);cursor:pointer}
.gpa-nav{display:flex;align-items:center;gap:var(--gpa-sp-3);margin-left:auto}
.gpa-nav>ul{display:flex;gap:var(--gpa-sp-2);list-style:none;margin:0;padding:0}
.gpa-navi{position:relative}
.gpa-navi>button{font-family:var(--gpa-font-body);font-weight:500;font-size:.94rem;background:none;border:none;cursor:pointer;color:var(--gpa-ink);padding:.5rem .2rem}
.gpa-navi>button:hover{color:var(--gpa-accent-deep)}
.gpa-drop{position:absolute;top:100%;left:0;background:var(--gpa-paper);border:1px solid var(--gpa-line);
  border-radius:var(--gpa-radius-sm);box-shadow:var(--gpa-shadow);min-width:16rem;padding:.5rem;display:none;flex-direction:column;gap:2px;z-index:50}
.gpa-navi[data-open="1"] .gpa-drop{display:flex}
.gpa-drop ul{list-style:none;margin:0;padding:0}
.gpa-drop a{display:block;padding:.55rem .7rem;border-radius:6px;font-size:.92rem;text-decoration:none;color:var(--gpa-ink)}
.gpa-drop a:hover{background:var(--gpa-accent-tint);color:var(--gpa-accent-deep)}
.gpa-drop small{display:block;font-size:.76rem;color:oklch(0.5 0.02 205);font-weight:400}
.gpa-cta{background:var(--gpa-accent-deep);color:#fff !important;border-radius:var(--gpa-radius-sm);padding:.6rem 1.05rem;
  font-weight:700;text-decoration:none;font-size:.9rem;white-space:nowrap}
.gpa-cta:hover{background:oklch(0.34 0.08 182)}
@media (max-width:900px){
  .gpa-nav>ul{display:none}
  .gpa-hdr>.gpa-wrap>.gpa-cta{display:none}
  .gpa-burger{display:inline-flex}
  .gpa-hdr[data-nav="1"] .gpa-nav{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--gpa-paper);
    border-bottom:1px solid var(--gpa-line);padding:var(--gpa-sp-2);box-shadow:var(--gpa-shadow)}
  .gpa-hdr[data-nav="1"] .gpa-nav>ul{display:flex;flex-direction:column}
  .gpa-hdr[data-nav="1"]>.gpa-wrap>.gpa-cta{display:inline-block;margin-top:.5rem;text-align:center;order:99}
  .gpa-hdr:not([data-nav="1"]) .gpa-nav{display:none}
  .gpa-drop{position:static;box-shadow:none;border:none;display:flex;padding-left:.5rem}
}

/* ── Hero (mode A : formulaire intégré) ──────────────────────────────── */
.gpa-hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:var(--gpa-sp-4);align-items:start}
@media (max-width:900px){
  .gpa-hero-grid{display:flex;flex-direction:column}
  .gpa-hero-grid>div:first-child{order:2}
  .gpa-hero-grid>div:last-child{order:1}
}
.gpa-badge{display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.02em;color:var(--gpa-accent-deep);
  background:var(--gpa-accent-tint);border-radius:999px;padding:.32rem .8rem;margin-bottom:var(--gpa-sp-2);text-transform:uppercase}
.gpa-hero-copy{display:flex;flex-direction:column}
.gpa-hero-photo-wrap{margin-top:var(--gpa-sp-3);border-radius:var(--gpa-radius);overflow:hidden;box-shadow:var(--gpa-shadow-sm)}
.gpa-hero-photo{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ── Cartouches de conformité ─────────────────────────────────────────── */
.gpa-cartouches{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gpa-sp-3)}
@media (max-width:820px){.gpa-cartouches{grid-template-columns:1fr}}
.gpa-cartouches>div{background:#fff;border:1px solid var(--gpa-line);border-radius:var(--gpa-radius);padding:var(--gpa-sp-3);box-shadow:var(--gpa-shadow-sm)}
.gpa-cartouches h3{color:var(--gpa-accent-deep);margin-bottom:.3rem}

/* ── Formulaire (form card) ──────────────────────────────────────────── */
.dsn-form-card{background:#fff;border:1px solid var(--gpa-line);border-radius:var(--gpa-radius);padding:var(--gpa-sp-3);box-shadow:var(--gpa-shadow)}
.gpa-form-title{margin:0 0 .5rem;font-size:1.1rem}
.dsn-field{margin-bottom:var(--gpa-sp-2)}
.dsn-field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.3rem}
.dsn-field input,.dsn-field select,.dsn-field textarea{width:100%;border:1.5px solid var(--gpa-field-line);border-radius:var(--gpa-radius-sm);
  padding:.62rem .75rem;font-family:var(--gpa-font-body);font-size:.97rem;background:#fff;color:var(--gpa-ink)}
.dsn-field textarea{min-height:5.5rem;resize:vertical;line-height:1.4}
.dsn-field input:focus,.dsn-field select:focus,.dsn-field textarea:focus{outline:2px solid var(--gpa-accent);outline-offset:1px}
.dsn-req{color:var(--gpa-danger)}
.dsn-consent{display:flex;align-items:flex-start;gap:.5rem;font-size:.83rem;margin-bottom:var(--gpa-sp-2)}
.dsn-consent input{margin-top:.2rem;width:auto}
.dsn-hp{position:absolute;left:-9999px}
.dsn-reassure{font-size:.82rem;color:oklch(0.48 0.02 205);margin-top:.6rem;text-align:center}
.gpa-btn{display:inline-block;background:var(--gpa-accent-deep);color:#fff !important;border:none;border-radius:var(--gpa-radius-sm);
  padding:.82rem 1.2rem;font-weight:700;font-size:1rem;cursor:pointer;font-family:var(--gpa-font-body);text-decoration:none;text-align:center}
.gpa-btn:hover{background:oklch(0.34 0.08 182)}
.gpa-btn-block{width:100%}
@media (max-width:900px){
  .dsn-form-card{padding:1rem var(--gpa-sp-2)}
  .dsn-field{margin-bottom:.55rem}
  .gpa-hero{padding-top:.5rem}
}

/* ── Diagnostic (module d'aide à la décision, zéro chiffre inventé) ─────── */
.dsn-diag{margin:var(--gpa-sp-3) 0}
.dsn-diag-intro{margin-bottom:var(--gpa-sp-2)}
.dsn-diag-body{background:#fff;border:1px solid var(--gpa-line);border-radius:var(--gpa-radius);padding:var(--gpa-sp-3);box-shadow:var(--gpa-shadow-sm)}
.dsn-diag-fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--gpa-sp-2);margin-bottom:var(--gpa-sp-2)}
@media (max-width:700px){.dsn-diag-fields{grid-template-columns:1fr}}
.dsn-diag-fields label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.3rem}
.dsn-diag-fields select{width:100%;border:1.5px solid var(--gpa-field-line);border-radius:var(--gpa-radius-sm);padding:.6rem .7rem;font-family:var(--gpa-font-body)}
.dsn-diag-result{border-top:1px solid var(--gpa-line-soft);padding-top:var(--gpa-sp-2);margin-top:var(--gpa-sp-2)}
.dsn-diag-result h3{color:var(--gpa-accent-deep)}
[data-diag-solved] .dsn-diag-result{background:var(--gpa-accent-tint);border-radius:var(--gpa-radius-sm);padding:var(--gpa-sp-2);border-top:none}

/* ── Frise — module signature « calendrier de mise en conformité DSN » ─── */
.dsn-frise-wrap{margin:var(--gpa-sp-3) 0}
.dsn-frise{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;align-items:end}
.dsn-frise-seg{background:#fff;border:1px solid var(--gpa-field-line);border-radius:var(--gpa-radius-sm);padding:var(--gpa-sp-2);
  display:flex;flex-direction:column;gap:.3rem;box-shadow:var(--gpa-shadow-sm)}
.dsn-frise-num{font-family:var(--gpa-font-title);font-weight:700;font-size:1.6rem;color:var(--gpa-ink)}
.dsn-label{font-weight:600;font-size:.9rem;margin:0}
.dsn-src{font-size:.78rem;color:oklch(0.48 0.02 205);margin:0}
.dsn-frise-seg--pivot{border-color:var(--gpa-accent);border-width:2px;background:var(--gpa-accent-tint);
  transform:translateY(-.7rem);box-shadow:0 14px 26px oklch(0.62 0.13 182 / 0.20)}
.dsn-frise-seg--pivot .dsn-frise-num{color:var(--gpa-accent-deep);font-size:2rem}
@media (max-width:780px){
  .dsn-frise{grid-template-columns:1fr 1fr}
  .dsn-frise-seg--pivot{transform:none;grid-column:1/-1}
}

/* ── Loi box ──────────────────────────────────────────────────────────── */
.prd-law-box{border:1px solid var(--gpa-field-line);border-left:5px solid var(--gpa-accent-deep);
  border-radius:var(--gpa-radius);background:var(--gpa-surface);padding:var(--gpa-sp-3);margin:var(--gpa-sp-3) 0}
.bg-ink .prd-law-box{background:oklch(0.34 0.05 205)}
.prd-law-box h3{margin-bottom:.4rem;font-size:1.02rem}

/* ── Méthode / déroulé ────────────────────────────────────────────────── */
.gpa-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gpa-sp-3)}
@media (max-width:900px){.gpa-steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.gpa-steps{grid-template-columns:1fr}}
.gpa-steps h3{color:var(--gpa-accent-deep)}

/* ── Cartes (cross-links) ────────────────────────────────────────────── */
.gpa-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gpa-sp-3)}
@media (max-width:700px){.gpa-cards{grid-template-columns:1fr}}
.gpa-cards a{display:block;background:#fff;border:1px solid var(--gpa-line);border-radius:var(--gpa-radius);
  padding:var(--gpa-sp-3);text-decoration:none;color:var(--gpa-ink);box-shadow:var(--gpa-shadow-sm)}
.gpa-cards a:hover{border-color:var(--gpa-accent)}
.gpa-cards strong{display:block;font-family:var(--gpa-font-title);font-size:1.05rem;margin-bottom:.3rem;color:var(--gpa-ink)}
.gpa-cards span{font-size:.9rem;color:oklch(0.45 0.02 205)}

/* ── Tableau ──────────────────────────────────────────────────────────── */
.gpa-tw{overflow-x:auto}
.gpa-tw table{border-collapse:collapse;width:100%;min-width:480px;background:#fff;border-radius:var(--gpa-radius);overflow:hidden;box-shadow:var(--gpa-shadow-sm)}
.gpa-tw caption{text-align:left;font-size:.85rem;color:oklch(0.45 0.02 205);padding:.5rem 0}
.gpa-tw th,.gpa-tw td{border:1px solid var(--gpa-line);padding:.6rem .8rem;text-align:left;font-size:.94rem}
.gpa-tw th{background:var(--gpa-surface);font-weight:700}

/* ── Liste répétée générique ──────────────────────────────────────────── */
.gpa-rep{padding-left:1.15em;margin:0 0 1.1em}
.gpa-rep li{margin-bottom:.5em}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.prd-faq details{border:1px solid var(--gpa-line);border-radius:var(--gpa-radius-sm);padding:.8rem 1rem;margin-bottom:.6rem;background:#fff}
.prd-faq summary{cursor:pointer;font-weight:600;font-family:var(--gpa-font-body)}
.prd-faq details[open] summary{color:var(--gpa-accent-deep)}
.prd-faq-answer{margin-top:.6rem}

/* ── Avis ─────────────────────────────────────────────────────────────── */
.dsn-avis{margin:0}
.gpa-lede-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.6rem;margin-bottom:var(--gpa-sp-2)}
.gpa-avis-moy{font-weight:600}
.gpa-stars{color:var(--gpa-accent-deep);letter-spacing:.05em}
.dsn-avis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gpa-sp-2)}
@media (max-width:900px){.dsn-avis-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.dsn-avis-grid{grid-template-columns:1fr}}
.dsn-avis-card{background:#fff;border:1px solid var(--gpa-line);border-radius:var(--gpa-radius);padding:var(--gpa-sp-2);box-shadow:var(--gpa-shadow-sm)}
.bg-ink .dsn-avis-card{background:oklch(0.34 0.05 205);border-color:oklch(0.42 0.05 205)}
.bg-ink .dsn-avis-card p{color:var(--gpa-on-ink-soft)}
.gpa-avis-auteur{font-size:.85rem;color:oklch(0.48 0.02 205);margin:0}
.bg-ink .gpa-avis-auteur{color:var(--gpa-on-ink-soft)}

/* ── Breadcrumb / updated ────────────────────────────────────────────── */
.gpa-breadcrumb{font-size:.82rem;color:oklch(0.48 0.02 205);margin:var(--gpa-sp-2) 0 0}
.gpa-breadcrumb ol{list-style:none;display:flex;gap:.4rem;padding:0;margin:0;flex-wrap:wrap}
.gpa-breadcrumb li:not(:last-child)::after{content:"/";margin-left:.4rem;color:var(--gpa-line)}
.gpa-breadcrumb a{color:oklch(0.48 0.02 205)}
.gpa-breadcrumb [aria-current]{color:var(--gpa-ink);font-weight:600}
.gpa-updated{font-size:.8rem;color:oklch(0.48 0.02 205);margin-top:var(--gpa-sp-2)}

/* ── Footer ───────────────────────────────────────────────────────────── */
.gpa-ft{background:var(--gpa-ink);color:var(--gpa-on-ink-soft)}
.gpa-ft .gpa-wrap{padding-top:var(--gpa-sp-4);padding-bottom:var(--gpa-sp-3)}
.gpa-ft h4{color:var(--gpa-on-ink);font-size:.95rem;font-family:var(--gpa-font-body);font-weight:700}
.gpa-ft-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:var(--gpa-sp-3)}
@media (max-width:780px){.gpa-ft-grid{grid-template-columns:1fr}}
.gpa-ft a{color:var(--gpa-on-ink-soft);text-decoration:none;font-size:.9rem}
.gpa-ft a:hover{color:var(--gpa-on-ink);text-decoration:underline}
.gpa-ft ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.foot-sources{font-size:.78rem;color:oklch(0.78 0.02 205);border-top:1px solid oklch(0.42 0.04 205);padding-top:var(--gpa-sp-2);margin-top:var(--gpa-sp-3)}
.foot-sources a{color:var(--gpa-on-ink-link)}
.gpa-ft-end{font-size:.78rem;color:oklch(0.76 0.02 205);margin-top:var(--gpa-sp-3)}

/* ── Blog ─────────────────────────────────────────────────────────────── */
.gpa-blog-index{display:grid;grid-template-columns:1fr 1fr;gap:var(--gpa-sp-3)}
@media (max-width:780px){.gpa-blog-index{grid-template-columns:1fr}}
.gpa-blog-index a{display:block;background:#fff;border:1px solid var(--gpa-line);border-radius:var(--gpa-radius);
  padding:var(--gpa-sp-3);text-decoration:none;color:var(--gpa-ink);box-shadow:var(--gpa-shadow-sm)}
.gpa-blog-index strong{display:block;font-family:var(--gpa-font-title);font-size:1.1rem;margin-bottom:.3rem}
.gpa-blog-index span{font-size:.9rem;color:oklch(0.45 0.02 205)}
.gpa-hero-editorial{padding-top:var(--gpa-sp-2)}