/* ===========================================================================
   Sous-pages « pratiques » — feuille partagée.
   Reprend strictement les tokens du site (voir brief/DA-ET-FLYERS.md §1).
   =========================================================================== */

:root{
  --foret:#2E3D2F;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Karla",system-ui,-apple-system,sans-serif;
  /* SOFT adoucit les angles, WONK reveille les terminaisons.
     Reglages volontairement retenus : du caractere, pas de l excentricite. */
  --vf:"SOFT" 45,"WONK" 1;
  --terra:#C45A1C;
  --terra-fonce:#B14E14;
  --sable:#E7C08A;
  --sauge:#A6B595;
  --creme:#F0E4D2;
  --encre:#39432F;
  --muted:#5D6A50;
  --olive:#414A2D;
  --olive-footer:#3B452B;
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  font:400 16.5px/1.7 var(--sans);
  color:var(--encre);background:var(--creme);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--terra-fonce);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.14;color:var(--foret);
  font-optical-sizing:auto;font-variation-settings:var(--vf)}
.container{max-width:1200px;margin:0 auto;padding:0 32px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== Header ===== */
.site-header{position:sticky;top:0;z-index:60;background:var(--creme);
  border-bottom:1px solid rgba(46,61,47,.10)}
.header-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:1392px;margin:0 auto;padding:14px 40px}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{width:46px;height:46px;
  -webkit-mask:radial-gradient(closest-side,#000 93%,transparent 100%);
  mask:radial-gradient(closest-side,#000 93%,transparent 100%)}
.brand-name{font-family:var(--serif);font-weight:600;font-variation-settings:var(--vf);font-size:17px;
  letter-spacing:.14em;line-height:1.25;color:var(--foret)}
.brand-name span{display:block;font-size:11.5px;letter-spacing:.26em;font-weight:600;color:var(--muted)}
.back-link{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:var(--muted)}
.back-link:hover{color:var(--terra-fonce)}

.btn{display:inline-flex;align-items:center;gap:9px;border-radius:999px;
  font:500 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  padding:14px 24px;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.btn-dark{background:var(--foret);color:#fff}
.btn-dark:hover{background:#243024}
.btn-terra{background:var(--terra-fonce);color:#fff}
.btn-terra:hover{background:#9C4512}
.btn-ghost{border-color:rgba(46,61,47,.35);color:var(--foret)}
.btn-ghost:hover{border-color:var(--foret)}
.ico-sprig{width:17px;height:12px;flex:none}

/* ===== Bandeau ===== */
.p-banner{position:relative;height:clamp(260px,26vw,380px);overflow:hidden;background:var(--creme)}
.p-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.p-banner::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(240,228,210,.94) 0%,rgba(240,228,210,.62) 40%,rgba(240,228,210,.12) 78%)}
.p-banner-in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center}
.kicker{display:flex;align-items:center;gap:9px;
  font:600 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:#A67C43;margin-bottom:14px}
.kicker .ico-sprig{width:19px;height:13px;color:#C9A86B}
.p-banner h1{font-size:clamp(32px,3.7vw,50px);font-weight:500;letter-spacing:-.008em;max-width:17ch}
.p-lede{margin-top:16px;font-size:clamp(15px,1.2vw,17.5px);max-width:46ch;color:var(--encre)}
.p-wave{position:absolute;left:0;bottom:-1px;width:100%;height:clamp(60px,5vw,96px);z-index:3;pointer-events:none}

/* ===== Corps ===== */
.p-body{padding:clamp(52px,6vw,84px) 0 clamp(64px,7vw,100px)}
.p-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:clamp(40px,5vw,72px);align-items:start}
.p-prose{max-width:64ch}
.p-prose > * + *{margin-top:20px}
.p-prose h2{font-size:clamp(24px,2.2vw,31px);font-weight:600;margin-top:44px}
.p-prose h2:first-child{margin-top:0}
.p-prose p{line-height:1.75}
.p-prose ul{list-style:none;margin-top:16px}
.p-prose li{position:relative;padding-left:26px;margin-bottom:10px;line-height:1.6}
.p-prose li svg{position:absolute;left:0;top:7px;width:16px;height:11px;color:var(--sauge)}
.p-prose strong{font-weight:600;color:var(--foret)}
.p-prose h3{font-size:clamp(18.5px,1.5vw,21px);font-weight:600;color:var(--foret);
  margin-top:34px;font-optical-sizing:auto;font-variation-settings:var(--vf)}
.p-prose h3 + p{margin-top:10px}

/* Citation en cours de page — le bandeau vert est réservé à l'accueil,
   ici un filet doré suffit à marquer la respiration. */
.p-quote{margin-top:38px;padding:22px 28px;background:#F6EFE3;
  border-left:3px solid var(--sable);border-radius:0 16px 16px 0}
.p-quote p{font-family:var(--serif);font-weight:500;font-size:clamp(17.5px,1.5vw,20px);
  line-height:1.5;color:var(--foret);font-optical-sizing:auto;
  font-variation-settings:var(--vf)}
.p-quote footer{margin-top:12px;font-size:12.5px;letter-spacing:.04em;color:var(--muted)}

/* Encadré « ce que ce n'est pas » — le cadre déontologique, jamais décoratif */
.p-limits{margin-top:40px;background:#EDF0E4;border:1px solid #D5DCC4;border-radius:16px;
  padding:24px 28px}
.p-limits h2{margin-top:0;font-size:22px}
.p-limits p{font-size:15px;line-height:1.7;margin-top:12px}

/* ===== Colonne pratique ===== */
.p-aside{position:sticky;top:96px;background:#fff;border:1px solid rgba(46,61,47,.10);
  border-radius:20px;padding:30px 30px 26px;box-shadow:0 10px 30px rgba(46,61,47,.06)}
.p-aside h2{font-size:21px;font-weight:600}
.p-aside dl{margin-top:18px}
.p-aside dt{font:600 10.5px/1 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-top:16px}
.p-aside dt:first-child{margin-top:0}
.p-aside dd{font-size:15px;line-height:1.55;margin-top:6px}
.p-aside dd small{display:block;font-size:13px;color:var(--muted);margin-top:3px}
.p-aside .btn{width:100%;justify-content:center;margin-top:24px}
.p-aside .pending{font-size:13px;line-height:1.55;color:var(--muted);font-style:italic}
/* Mention de diplôme : un bandeau sobre en tête de l'encart, jamais un badge tapageur. */
.p-credential{display:block;margin:-4px 0 18px;padding:9px 13px;border-radius:10px;
  background:#EDF0E4;border:1px solid #D5DCC4;
  font:600 12px/1.45 var(--sans);letter-spacing:.02em;color:var(--foret)}

/* ===== Autres pratiques ===== */
.p-others{background:#F6EFE3;border-top:1px solid rgba(46,61,47,.09);
  padding:clamp(52px,6vw,80px) 0}
.p-others h2{font-size:clamp(24px,2.2vw,32px);text-align:center}
.p-others-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.p-other{background:#fff;border:1px solid rgba(46,61,47,.10);border-radius:18px;
  padding:24px 26px;display:flex;flex-direction:column;gap:10px}
.p-other h3{font-size:20px;font-weight:600}
.p-other p{font-size:14px;line-height:1.6;color:var(--muted);flex:1}
.p-other .go{font:500 13px/1 var(--sans);color:var(--terra-fonce);
  display:inline-flex;align-items:center;gap:8px}
.p-other .go .arrow{transition:transform .25s var(--ease-out-expo)}
.p-other:hover .go .arrow{transform:translateX(4px)}

/* ===== Footer ===== */
.site-footer{background:var(--olive-footer);color:#EDF0E4;
  padding:clamp(44px,5vw,64px) 0 34px;font-size:14.5px}
.f-in{display:flex;flex-wrap:wrap;gap:26px 48px;align-items:flex-start;justify-content:space-between}
.site-footer a:hover{color:var(--sable)}
.f-col p.t{font:600 10.5px/1 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--sauge);margin-bottom:10px}
.f-col a,.f-col span{display:block;margin-bottom:7px;color:#EDF0E4}
.f-deonto{margin-top:30px;padding-top:20px;border-top:1px solid rgba(237,240,228,.18);
  font-size:12.5px;line-height:1.6;color:#C6D0B8}

/* ===== Responsive ===== */
@media (max-width:980px){
  .p-grid{grid-template-columns:1fr}
  .p-aside{position:static;max-width:520px}
  .p-others-grid{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}
}
@media (max-width:720px){
  .header-bar{padding:12px 20px;gap:12px}
  .header-bar .btn-dark{display:none}
  .container{padding:0 20px}
  .p-banner::after{background:linear-gradient(180deg,rgba(240,228,210,.90) 0%,rgba(240,228,210,.76) 60%,rgba(240,228,210,.62) 100%)}
  .p-banner h1{max-width:none}
}

/* ===== Reveals (désactivés si reduced-motion) ===== */
.anim .rv{opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease-out-expo),transform .6s var(--ease-out-expo)}
.anim .rv.in{opacity:1;transform:none}