/* Gamme publique (/produits), « Papier et encre ». Polices, jetons, bouton, étiquette, légende et titres
   viennent de fonts/brand/encre.css, commune à tout le site ; ici, la seule mise en page de cette page. */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--pe-stone);color:var(--pe-ink);font:400 16px/25px var(--pe-text);-webkit-font-smoothing:antialiased}
a{color:var(--pe-ink);text-underline-offset:3px}
a:hover{color:var(--pe-blue)}
h1,h2,h3,h4,p,figure{margin:0}
h4{font-family:var(--pe-display);font-weight:400;letter-spacing:-.015em;font-synthesis:none}
:focus-visible{outline:2px solid var(--pe-blue);outline-offset:3px;border-radius:0}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:16px;z-index:10;padding:8px 12px;background:var(--pe-ink);color:var(--pe-stone)}
.site-header,.site-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;width:min(100% - 2*var(--pe-gutter),1248px);margin-inline:auto;padding:20px 0;border-bottom:1px solid var(--pe-hair)}
.site-footer{border:0;border-top:1px solid var(--pe-ink);color:var(--pe-grey);font-size:14px}
.site-header nav,.site-footer nav{display:flex;gap:28px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:500;text-decoration:none;color:var(--pe-ink)}
.section{width:min(100% - 2*var(--pe-gutter),var(--pe-max));margin-inline:auto;padding:var(--pe-section) 0 0}
.section-heading{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;align-items:end}
.section-heading h2{margin-top:16px}
.section-heading>p{color:var(--pe-grey);font-size:15px;line-height:1.7;max-width:36em}

/* Premier écran : le titre, et l'anneau des quatre temps */
.hero{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:center;padding-top:48px}
.hero h1{margin-top:24px;font-size:var(--pe-t3);line-height:1.03;letter-spacing:-.02em;max-width:16ch}
.lead{margin-top:28px;max-width:34ch;font-size:20px;line-height:30px;color:var(--pe-ink-2);text-wrap:pretty}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:40px}
.ring svg{display:block;width:100%;height:auto;overflow:visible}
.ring text{font-family:var(--pe-mono);font-size:14px;letter-spacing:2px;fill:var(--pe-grey)}
.ring text tspan{fill:var(--pe-ink)}
.ring figcaption{margin-top:8px;padding-top:14px;border-top:1px solid var(--pe-hair)}

/* Les modules : un registre réglé, groupe par groupe, dans l'ordre de l'application. Sur douze colonnes :
   le nom (1-4), l'état (5-6), la phrase (7-11), le signe (12). La ligne entière ouvre l'état et les limites. */
.family-nav{display:none;flex-wrap:wrap;gap:6px 24px;margin-top:24px;padding:14px 0;border-top:1px solid var(--pe-ink);border-bottom:1px solid var(--pe-hair)}
.family-nav a{color:var(--pe-ink);text-decoration:none}
.family{scroll-margin-top:88px}
.section-heading>p.legend{display:flex;flex-wrap:wrap;gap:8px 32px;justify-self:end;max-width:none;font-size:11px;line-height:16px;letter-spacing:.14em}
.legend b{font-weight:400;color:var(--pe-ink)}
.ledger{margin-top:72px;counter-reset:family}
.family{counter-increment:family}
.family + .family{margin-top:72px}
.family-no::before{content:"0" counter(family)}
.ring figcaption::before{content:"Fig. 1 — ";color:var(--pe-ink)}
.family-heading,.prod summary,.prod .row,.prod .limits{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 24px}
.family-heading{align-items:baseline;padding-bottom:16px;border-bottom:1px solid var(--pe-ink)}
.family-heading h3{grid-column:1/7;grid-row:1;font-family:var(--pe-mono)!important;color:var(--pe-ink)}
.family-text{grid-column:7/12;font-size:16px;line-height:25px;color:var(--pe-ink-2)}
.prod{border-bottom:1px solid var(--pe-hair)}
.prod summary,.prod .row{align-items:baseline;padding:20px 0;list-style:none}
.prod summary{cursor:pointer}
.prod summary::-webkit-details-marker{display:none}
.prod .prod-name{grid-column:1/5}
.prod h4{font-size:28px;line-height:32px;letter-spacing:-.008em;transition:color .16s}
.prod .prod-step{display:block;margin-top:4px;letter-spacing:.1em}
.prod .status{grid-column:5/7;display:inline-flex;align-items:center;justify-self:start;padding:3px 8px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:none}
.prod .status[data-status=en-ligne]{background:#E4F1E8;color:#216D36}
.prod .status[data-status=beta]{background:#FFF0CE;color:#815400}
.prod .purpose{grid-column:7/11;font-size:16px;line-height:25px;color:var(--pe-ink-2)}
.prod .more{grid-column:11/13;justify-self:end;font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:#0065d1;white-space:nowrap}
.prod .more::after{content:" +";font-family:inherit;font-size:14px;line-height:1;color:inherit}
.prod details[open] .more::after{content:" \2212"}
.prod summary:hover h4{color:var(--pe-blue)}
.prod .limits{padding:0 0 24px}
.prod .limits p{grid-column:7/12;padding-top:12px;border-top:1px solid var(--pe-hair);font-size:15px;line-height:24px;color:var(--pe-ink-2);animation:pr-open .5s var(--pe-ease)}
.prod .limits p + p{margin-top:12px}
.catalog-note{margin-top:24px;font-size:13px;line-height:20px;color:var(--pe-grey)}
.fine{margin-top:16px;max-width:72ch;font-size:13px;line-height:20px;color:var(--pe-grey)}

/* Les trois blocs du cabinet, le parcours */
.segment-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;margin-top:40px}
.segment-grid .prod{border-top:1px solid var(--pe-ink)}
.segment-grid ul{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--pe-hair)}
.segment-grid li{padding:8px 0;border-bottom:1px solid var(--pe-hair);font-size:14.5px}
.segment-grid li a{text-decoration:none}
.journey{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 32px;counter-reset:step}
.j-step{border-top:1px solid var(--pe-ink);padding:14px 0 0;counter-increment:step}
.j-step::before{content:"0" counter(step);font-family:var(--pe-mono);font-size:11px;letter-spacing:.14em;color:var(--pe-grey)}
.j-step h3{margin-top:6px;font-family:var(--pe-display);font-weight:400;font-size:var(--pe-t1);line-height:1.1;letter-spacing:-.015em}
.j-step p{margin-top:10px;font-size:14.5px;line-height:1.55;color:var(--pe-grey)}
.human-note{display:flex;gap:16px;align-items:baseline;margin-top:40px;padding:20px 0 0;border-top:1px solid var(--pe-hair);font-size:16px;color:var(--pe-grey)}
.human-note span{font-family:var(--pe-mono);color:var(--pe-blue)}
.human-note strong{font-family:var(--pe-display);font-weight:400;font-size:24px;letter-spacing:-.01em;color:var(--pe-ink)}

/* Les limites, puis la clôture — comme sur l'accueil */
.not{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
.not .eyebrow{grid-column:1/-1;padding-bottom:16px;border-bottom:1px solid var(--pe-ink);margin-bottom:24px}
.not h2{grid-row:span 2}
.not p:not(.eyebrow){font-size:16px;line-height:25px;color:var(--pe-ink-2);max-width:64ch}
.not p+p{margin-top:10px;color:var(--pe-grey)!important}
.closing{margin-top:96px;padding:80px 0 96px;border-top:1px solid var(--pe-ink)}
.closing h2{margin-top:16px;max-width:16ch}
.closing>p:not(.eyebrow):not(.fine){margin-top:24px;max-width:52ch;color:var(--pe-ink-2);font-size:18px;line-height:28px}

@media(max-width:1100px){
  .hero{grid-template-columns:minmax(0,1fr);gap:32px}
  .ring{max-width:620px}
  .ring text{font-size:16px}
  .section-heading{grid-template-columns:minmax(0,1fr);gap:20px}
  .legend{justify-self:start}
  .prod .prod-name{grid-column:1/6}
  .prod .status{grid-column:6/8}
  .prod .purpose{grid-column:8/11}
  .family-text,.prod .limits p{grid-column:8/12}
  .journey{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px}
  .not{grid-template-columns:minmax(0,1fr)}
  .not h2{grid-row:auto;margin-bottom:16px}
}
@media(max-width:719px){
  .site-header nav{gap:14px;font-size:13px}
  .desktop-link{display:none}
  .hero{padding-top:20px}
  .hero h1{margin-top:16px}
  .lead{font-size:17px}
  .actions{gap:8px}
  .actions .pe-btn{flex:1 1 100%}
  .ring text{font-size:17px;letter-spacing:.5px}
  .family-nav{display:flex}
  .segment-grid,.journey{grid-template-columns:minmax(0,1fr)}
  .ledger{margin-top:40px}
  .family + .family{margin-top:56px}
  .family-heading{display:block}
  .family-text{margin-top:8px}
  .prod summary,.prod .row{grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;padding:16px 0;min-height:44px}
  .prod .prod-name{grid-column:1}
  .prod h4{font-size:24px;line-height:28px}
  .prod .status{grid-column:1;grid-row:2}
  .prod .purpose{grid-column:1/-1;grid-row:3}
  .prod .more{grid-column:2;grid-row:1}
  .prod .limits{display:block;padding-bottom:20px}
  .segment-grid{gap:8px}
  .journey{gap:24px}
  .human-note{display:block}
  .human-note span{display:none}
  .human-note strong{display:block;margin-bottom:8px;line-height:1.15}
  .closing{margin-top:72px;padding:56px 0 64px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ===== Vivant : le même mouvement que l'accueil (fonts/brand/encre.css), et la main. ===== */
.human-note{margin-top:32px}
.ring__arc{stroke-dasharray:1;stroke-dashoffset:0}
@keyframes pr-open{from{opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .pe-js .ring__sweep{transform-box:view-box;transform-origin:240px 240px;animation:pr-sweep 14s cubic-bezier(.4,0,.2,1) 1.2s infinite}
  .pe-js .ring .ring__arc{stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--pe-ease) calc(.3s + var(--i)*.35s)}
  .pe-js .ring.pe-in .ring__arc{stroke-dashoffset:0}
  .pe-js .family.pe-rv{transition-delay:calc(var(--n,0)*.12s)}
}
.pe-paused,.pe-paused *{animation-play-state:paused!important}
@keyframes pr-sweep{0%,70%{transform:rotate(0)}100%{transform:rotate(360deg)}}