/* Preuves & Pratique : thème « Cabinet » (design system du 9 novembre 2026).
   Chargé après les styles propres à chaque page : il redéfinit les couleurs,
   la typographie, les surfaces et le mouvement sans toucher au contenu. */

/* ---------- jetons ---------- */
:root{
  --paper:#F3F1EA;
  --card:#FFFFFF;
  --nuit:#14212A;
  --ink:#16232E;
  --slate:#5C6B74;
  --rule:#E4E1D8;
  --sauge:#A9C2B4;
  --sauge-clair:#C9DCCD;
  --texte-nuit:#D3DADE;
  --muet-nuit:#9FB0B9;
  --solid:#2F6B5A;
  --solid-tint:#E9F0EA;
  --caveat:#9C3B2E;
  --caveat-tint:#F5E9E5;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-xl:28px;
  --ombre-repos:0 1px 0 rgba(20,33,42,.06);
  --ombre-survol:0 24px 48px -28px rgba(20,48,40,.45);
  --courbe:cubic-bezier(.2,.7,.3,1);
  --display:"Spectral",Georgia,"Times New Roman",serif;
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --measure:38rem;
}

/* ---------- base ---------- */
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.65;
}
h1,h2,h3,h4{font-family:var(--display);text-wrap:balance}
p,li,dd{text-wrap:pretty}
.wrap{max-width:72rem;padding:0 2rem}
@media(max-width:40rem){.wrap{padding:0 1.25rem}}
a{text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);transition:color .2s ease,text-decoration-color .2s ease}
a:hover{color:var(--solid);text-decoration-color:currentColor}
::selection{background:var(--sauge-clair);color:var(--ink)}
.pp-tab{font-variant-numeric:tabular-nums}

/* lien d'évitement pour le clavier */
.pp-skip{position:absolute;left:1rem;top:-4rem;z-index:10;background:var(--card);color:var(--ink);
  padding:.6rem 1rem;border-radius:var(--radius-md);font-weight:600;text-decoration:none;box-shadow:var(--ombre-survol)}
.pp-skip:focus{top:1rem}

/* ---------- en-tête : bande de nuit ---------- */
.masthead{
  background:var(--nuit);
  color:var(--paper);
  border-bottom:0;
  border-radius:0 0 var(--radius-xl) var(--radius-xl);
  padding:1.4rem 0 1.5rem;
  view-transition-name:pp-entete;
}
.masthead .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 2rem}
.wordmark{font-family:var(--display);font-size:1.4375rem;font-weight:500;letter-spacing:-.01em;color:var(--paper)}
.wordmark a{color:var(--paper);text-decoration:none}
.wordmark .amp{color:var(--sauge);font-weight:300}
.masthead nav{margin:0;display:flex;flex-wrap:wrap;gap:.35rem 1.4rem;font-size:.9375rem;font-weight:500}
.masthead nav a{margin:0;color:var(--muet-nuit);text-decoration:none;padding:.2rem 0;border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease}
.masthead nav a:hover{color:#FFFFFF}
.masthead nav a[aria-current]{color:#FFFFFF;font-weight:500;border-bottom-color:var(--sauge)}
.masthead :focus-visible,.pp-nuit :focus-visible{outline-color:var(--sauge)}

/* ---------- titres de section ---------- */
.section{border-bottom:0;padding:4.5rem 0 1rem}
.section h2{font-size:clamp(1.75rem,3.2vw,2.25rem);font-weight:400;letter-spacing:-.02em;line-height:1.15;max-width:none;margin:0 0 1.5rem}
.section h3{font-family:var(--display);font-size:1.25rem;font-weight:500}
.section p{max-width:var(--measure)}

/* ---------- boutons et champs ---------- */
input[type=email],input[type=search],input[type=text]{
  font-family:var(--sans);border:1px solid #CFCBC0;border-radius:var(--radius-md);background:var(--card);
  transition:border-color .2s ease,box-shadow .2s ease}
input[type=email]:focus,input[type=search]:focus,input[type=text]:focus{outline:none;border-color:var(--solid);box-shadow:0 0 0 3px rgba(47,107,90,.18)}
button[type=submit]{
  font-family:var(--sans);font-weight:600;border-radius:var(--radius-md);
  background:var(--ink);border:0;color:var(--paper);
  transition:background-color .25s ease,transform .15s ease}
button[type=submit]:hover{background:var(--solid)}
button[type=submit]:active{transform:scale(.98)}

/* ---------- cartes et verdicts ---------- */
.spec,.anat-carte{
  background:var(--card);border:0;border-radius:var(--radius-lg);
  box-shadow:var(--ombre-repos);padding:2rem}
.spec{display:flex;flex-direction:column;gap:.9rem}
.spec-source{font-style:normal;font-size:.875rem;margin:0}
.spec-title{font-family:var(--display);font-size:1.5rem;font-weight:500;line-height:1.25;letter-spacing:-.01em;margin:0}
.spec-finding{font-size:1rem;color:#3E4A53;margin:0}
.spec .verdict{margin-top:auto;border-radius:var(--radius-md);padding:1rem 1.15rem;background:#EEF0EE}
.spec--solid .verdict{background:var(--solid-tint)}
.spec--caveat .verdict{background:var(--caveat-tint)}
.spec .verdict-rule{display:none}
.verdict-label{font-family:var(--sans);font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:.3rem}
.spec--solid .verdict-body{color:#1E3A31}
.spec--caveat .verdict-body{color:#4A221B}
.spec-note{font-size:.875rem}

/* ---------- accueil : ouverture dans la nuit ---------- */
.accueil .masthead{border-radius:0;padding-bottom:.5rem}
.accueil .opening{
  background:var(--nuit);color:var(--paper);
  border-radius:0 0 var(--radius-xl) var(--radius-xl);
  padding:3.5rem 0 5.5rem;
}
.accueil .opening .wrap{display:grid;grid-template-columns:1fr;gap:2.5rem 5rem;align-items:end}
@media(min-width:56rem){.accueil .opening .wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
.pp-kicker{margin:0 0 1.25rem;font-size:.875rem;font-weight:500;color:var(--sauge)}
.accueil .lede{
  font-family:var(--display);font-weight:300;
  font-size:clamp(2.5rem,6vw,4.6rem);line-height:1.05;letter-spacing:-.025em;
  max-width:none;margin:0;color:var(--paper)}
.accueil .lede em{font-style:italic;color:var(--sauge-clair)}
.accueil .opening .standfirst{color:var(--texte-nuit);font-size:1.0625rem;max-width:30rem;margin:0 0 1.5rem}
.accueil .opening .form-row{
  max-width:30rem;gap:.5rem;padding:.375rem;
  background:rgba(243,241,234,.08);border:1px solid rgba(243,241,234,.2);border-radius:999px}
.accueil .opening input[type=email]{flex:1 1 12rem;border:0;background:transparent;color:var(--paper);border-radius:999px;padding:.8rem 1.1rem}
.accueil .opening input[type=email]::placeholder{color:var(--muet-nuit)}
.accueil .opening input[type=email]:focus{box-shadow:none}
.accueil .opening .form-row:focus-within{border-color:var(--sauge)}
.accueil .opening button[type=submit]{background:var(--sauge);color:var(--nuit);border-radius:999px;padding:.8rem 1.4rem}
.accueil .opening button[type=submit]:hover{background:var(--sauge-clair)}
.accueil .opening .consent{color:var(--muet-nuit);max-width:30rem}
.accueil .opening .consent a{color:var(--texte-nuit)}
.accueil .opening .confirm p{color:var(--texte-nuit)}
.accueil .opening .confirm strong{color:var(--sauge-clair)}
.accueil .opening .confirm-rule{background:var(--sauge)}
@media(max-width:30rem){.accueil .opening .form-row{border-radius:var(--radius-lg)}.accueil .opening button[type=submit]{flex:1 1 100%}}

.une{padding:5rem 0 1rem}
.une-tete{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1.5rem;margin:0 0 2rem}
.une-tete h2{font-size:clamp(1.75rem,3.2vw,2.25rem);font-weight:400;letter-spacing:-.02em;margin:0}
.une-tete h2 em{font-style:italic}
.une-tete a{font-weight:500}
.une .specimens{margin:0}

/* étiquettes de thèmes et entrée annotée */
.chips li{border-radius:999px;border-color:#CFCBC0;background:var(--card);padding:.35rem .8rem}
.chips--autour li{background:transparent}
.anat-carte{padding:1.75rem 2rem 1.5rem 2.4rem}
.anat-carte .pastille{left:-3.15rem;box-shadow:0 0 0 4px var(--paper)}
.anat-h{font-family:var(--display);font-size:1.3125rem;font-weight:500}
.anat-vd{border-radius:var(--radius-md);padding:.85rem 1rem .85rem 0}
.anat-vd--solide{background:var(--solid-tint)}
.anat-vd:not(.anat-vd--solide){background:#F1EFE8}
.anat-vd .anat-rail{display:none}
.anat-vd .pastille{left:-3.15rem}
.anat-vd p{padding-left:1rem}
.anat-legende li{border-color:var(--rule)}

/* principes et auteur, en cartes blanches */
.rules{max-width:none;display:grid;grid-template-columns:1fr;gap:.75rem;margin-top:1.75rem}
@media(min-width:56rem){.rules{grid-template-columns:repeat(6,minmax(0,1fr))}.rules li{grid-column:span 2}.rules li:nth-child(n+4){grid-column:span 3}}
.rules li,.rules li:last-child{border:0;background:var(--card);border-radius:var(--radius-md);padding:1.1rem 1.25rem;box-shadow:var(--ombre-repos)}
.pp-auteur{background:var(--card);border-radius:var(--radius-xl);padding:clamp(1.75rem,4vw,3rem);box-shadow:var(--ombre-repos)}
.pp-auteur h2{margin-top:0}
.pp-auteur p{margin:0 0 1rem}
.pp-auteur p:last-child{margin-bottom:0}
@media(min-width:56rem){.pp-auteur{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);column-gap:3rem}.pp-auteur h2{grid-row:1 / span 4}}

/* raccourcis vers les autres pages */
.pp-raccourcis{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.25rem;padding-top:4.5rem}
.pp-raccourci{display:block;text-decoration:none;color:var(--ink);background:var(--card);border-radius:var(--radius-lg);padding:1.75rem;box-shadow:var(--ombre-repos)}
.pp-raccourci b{display:block;font-family:var(--display);font-size:1.5rem;font-weight:500;margin-bottom:.4rem}
.pp-raccourci span{color:var(--slate);font-size:.9375rem}
.pp-raccourci:hover{color:var(--ink)}

/* inscription de fin de page */
.signup{border:0}
.signup--closing{padding:4.5rem 0 1rem;margin:0}
.signup--closing .wrap > *{max-width:34rem}
.signup--closing .wrap{background:var(--card);border-radius:var(--radius-xl);padding:clamp(1.75rem,4vw,3rem);box-shadow:var(--ombre-repos);max-width:calc(72rem - 4rem)}
@media(max-width:40rem){.signup--closing .wrap{margin:0 1.25rem;width:auto}}
.signup h2{font-size:clamp(1.6rem,3vw,2rem);font-weight:400;letter-spacing:-.02em}

/* mentions légales */
.legal{border-bottom:1px solid var(--rule)}
main > .legal:last-child{border-bottom:0}
.legal h2{font-size:1.5rem;font-weight:400}

/* ---------- pied de page ---------- */
footer{background:var(--nuit);color:var(--muet-nuit);margin-top:3rem;border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:3rem 0 3.5rem}
footer p{color:var(--muet-nuit)}
footer nav{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-bottom:1.25rem}
footer nav a{margin:0;color:var(--texte-nuit);text-decoration:none}
footer nav a:hover{color:#FFFFFF}
footer :focus-visible{outline-color:var(--sauge)}


/* ---------- toutes les pages : ouverture dans la nuit ---------- */
.pp .masthead{border-radius:0;padding-bottom:.5rem}
.pp .opening{background:var(--nuit);color:var(--paper);border-radius:0 0 var(--radius-xl) var(--radius-xl);border-bottom:0;padding:2.5rem 0 3.75rem}
.pp:not(.accueil) .opening h1{font-family:var(--display);font-weight:300;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.08;letter-spacing:-.02em;color:var(--paper);max-width:22ch;margin:0 0 1.25rem}
.pp .opening .standfirst{color:var(--texte-nuit)}
.pp .opening .lexique-lien{color:var(--muet-nuit)}
.pp .opening a{color:var(--sauge-clair)}
.pp .opening a:hover{color:#FFFFFF}

/* titres */
.pp h2,.pp h3{font-weight:500}
.pp .section > .wrap > h2,.pp .section h2{font-size:clamp(1.75rem,3vw,2.25rem);font-weight:400;letter-spacing:-.02em;max-width:none}
.pp .edition h2.ed-titre{font-size:clamp(1.5rem,2.8vw,2rem);font-weight:400;letter-spacing:-.015em;max-width:30ch}

/* cartes */
.pp .dossier,.pp .verrou,.pp .usage,.pp .limites,.pp .tot,.pp .vcard,.pp .sch-box,.pp .lire{
  border:0;border-radius:var(--radius-lg);box-shadow:var(--ombre-repos)}
.pp .dossier,.pp .verrou,.pp .usage,.pp .limites{padding:1.75rem}
.pp .sch-verdict,.pp .sch-portee{border-left:0}
.pp .sch-valeurs span{border-radius:999px;padding:.2rem .65rem}
.pp .edition{background:var(--card);border:0;border-radius:var(--radius-xl);box-shadow:var(--ombre-repos);
  padding:2rem clamp(1.25rem,4vw,2.75rem) 2.25rem;margin:0 0 1.25rem}
.pp .fiche{background:var(--card);border:0;border-radius:var(--radius-xl);box-shadow:var(--ombre-repos);padding:1.75rem clamp(1.25rem,4vw,2.5rem);margin:0 0 1.25rem}
.pp .tot .n{font-variant-numeric:tabular-nums}
.pp .edition .dossier{background:var(--paper);box-shadow:none}
.pp main > .opening + .wrap{padding-top:2.5rem}

/* boutons secondaires et filtres */
.pp .btn{border-radius:var(--radius-md);transition:background-color .25s ease,border-color .25s ease,transform .15s ease}
.pp .btn:active,.pp .depli:active{transform:scale(.98)}
.pp .depli{border-radius:var(--radius-md);transition:background-color .25s ease,color .25s ease}
.pp .chip{border-radius:999px;padding:.35rem .8rem;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.pp select{border-radius:var(--radius-md)}
.pp .controls{border-color:var(--rule)}
.pp .opening + .controls{border-top:0}

/* version du site, en pied de page */
.pp-version{font-size:.8125rem;color:var(--muet-nuit);margin:1rem 0 0}
.pp-version a{color:var(--texte-nuit)}

/* ---------- mouvement ---------- */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.35s;animation-timing-function:var(--courbe)}
  ::view-transition-group(pp-entete){animation-duration:.35s}

  .pp-reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--courbe),transform .6s var(--courbe);transition-delay:calc(var(--pp-i,0) * 70ms)}
  .pp-reveal.pp-vu{opacity:1;transform:none}

  .spec,.pp-raccourci,.anat-carte,.pp .dossier,.pp .fiche{transition:transform .35s var(--courbe),box-shadow .35s ease}
  .pp-raccourci:hover{transform:translateY(-4px);box-shadow:var(--ombre-survol)}

  details{interpolate-size:allow-keywords}
  details::details-content{height:0;overflow:clip;transition:height .35s var(--courbe),content-visibility .35s allow-discrete}
  details[open]::details-content{height:auto}

  .entry p.sum:not([hidden]),.corps:not([hidden]),.verrou ul:not([hidden]){animation:pp-deplie .35s var(--courbe)}
  @keyframes pp-deplie{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}