/* jc.bienfa.it — mini-site v3 trilingue (2026-10-12). Jetons hérités de la maquette v0.2. */
:root{--font-display:"Fraunces","Times New Roman",serif;--font-body:"Inter Tight",system-ui,sans-serif;--measure:64ch;
--ink:#16191c;--ink-soft:#3c4248;--ink-faint:#6c747d;--paper:#f6f1e7;--paper-warm:#ede5d2;--rule:#c9bfa8;--accent:#1b4d7e;--teal:#0f9d8f;--violet:#7a5cc6;--amber:#BA7517;
--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.5rem;--s6:2rem;--s7:3rem;--s8:4.5rem;--s9:6.5rem;--s10:9rem}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{margin:0;background:radial-gradient(ellipse at 0% 0%,var(--paper-warm) 0%,transparent 50%),radial-gradient(ellipse at 100% 100%,var(--paper-warm) 0%,transparent 60%),var(--paper);min-height:100vh}
a{color:var(--accent)} a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.page{max-width:1120px;margin:0 auto;padding:var(--s6) var(--s6) var(--s9)}
@media(max-width:720px){html{font-size:16px}.page{padding:var(--s5) var(--s4) var(--s8)}}
.prose p{font-family:var(--font-display);font-size:1.1rem;line-height:1.66;max-width:var(--measure);margin:0 0 var(--s5);font-variation-settings:"opsz" 24}
.prose p:last-child{margin-bottom:0}.prose strong{font-weight:600}.prose em{font-style:italic}
.lead{font-family:var(--font-display);font-style:italic;font-size:1.05rem;color:var(--ink-faint);margin:0 0 var(--s4);max-width:60ch}
h1{font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,4.4vw,3.2rem);line-height:1.12;letter-spacing:-.02em;margin:0 0 var(--s5);font-variation-settings:"opsz" 144,"SOFT" 40;max-width:22ch}
h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.12;letter-spacing:-.015em;margin:0 0 var(--s3);font-variation-settings:"opsz" 144,"SOFT" 30}
h3{font-family:var(--font-display);font-weight:500;font-size:1.4rem;line-height:1.2;margin:0 0 var(--s3);font-variation-settings:"opsz" 72}
.masthead{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);padding-bottom:var(--s4);border-bottom:1px solid var(--rule);margin-bottom:var(--s8)}
.masthead__name{font-family:var(--font-display);font-weight:500;font-size:1.05rem;color:var(--ink);text-decoration:none}
.masthead__name span{color:var(--ink-faint);font-weight:400;font-style:italic}
.masthead__right{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:var(--s3) var(--s6)}
.masthead__nav{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);font-size:.9rem}
.masthead__nav a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent}
.masthead__nav a:hover,.masthead__nav a[aria-current]{color:var(--accent);border-bottom-color:var(--accent)}
/* sélecteur de langue : visible d'emblée, il montre le multilinguisme avant de le dire */
.langswitch{display:flex;gap:2px;font-size:.78rem;letter-spacing:.06em;font-weight:500}
.langswitch a{color:var(--ink-faint);text-decoration:none;padding:.15rem .45rem;border:1px solid transparent;border-radius:4px}
.langswitch a:hover{color:var(--accent);border-color:var(--rule)}
.langswitch a[aria-current]{color:var(--paper);background:var(--accent);border-color:var(--accent)}
@media(max-width:720px){.masthead{flex-direction:column;align-items:flex-start;margin-bottom:var(--s7)}.masthead__right{flex-direction:column-reverse;align-items:flex-start;justify-content:flex-start}}
/* hero */
.hero{display:grid;grid-template-columns:1fr 220px;gap:var(--s7);align-items:start;margin-bottom:var(--s7)}
.hero__title{font-family:var(--font-display);font-size:1.15rem;color:var(--accent);margin:0 0 var(--s2);font-variation-settings:"opsz" 24}
.hero__langs{font-size:.88rem;color:var(--ink-soft);margin:0 0 var(--s4);letter-spacing:.01em}
.hero .prose p{font-size:1.15rem}
.hero__tag{font-family:var(--font-display);font-style:italic;color:var(--ink-faint);margin-top:var(--s5)}
.side{display:flex;flex-direction:column;align-items:center;gap:var(--s4)}.portrait{width:220px;height:275px;object-fit:cover;border-radius:6px;border:1px solid var(--rule)}.ycurve svg{width:240px;height:auto;display:block}.side__pun{font-family:var(--font-display);font-style:italic;font-size:.85rem;color:var(--ink-faint);text-align:center;margin:0}
/* Tablette et mobile : la tirette n'est plus masquée. Portrait centré, tirette en dessous,
   la devise ensuite ; tailles inchangées (~45 % de la largeur chacun). */
@media(max-width:860px){.hero{grid-template-columns:1fr}
  .side{flex-direction:column;align-items:center;gap:var(--s4)}
  .portrait{width:min(44vw,200px);height:auto;aspect-ratio:4/5}
  .ycurve svg{width:min(40vw,190px)}
  .side__pun{flex-basis:100%;text-align:center}}
/* timeline : sous 720 px, la frise garde une largeur lisible et défile horizontalement */
.timeline{margin:0 0 var(--s10)}
.timeline__scroll{border:1px solid var(--rule);border-radius:6px;overflow:hidden}
.timeline img{width:100%;height:auto;display:block}
.timeline figcaption{font-size:.85rem;color:var(--ink-faint);margin-top:var(--s3);font-style:italic}
.timeline__hint{display:none}
@media(max-width:720px){
  .timeline__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .timeline img{width:820px;max-width:none}
  .timeline__hint{display:inline;font-style:normal;color:var(--accent)}}
/* four words */
.words{margin-bottom:var(--s10)}
.words__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s7) var(--s7);margin-top:var(--s6)}
.word h3{color:var(--accent);font-size:1.6rem;font-weight:400;letter-spacing:.01em}
.word p{font-family:var(--font-display);font-size:1.05rem;line-height:1.6;margin:0 0 var(--s4);max-width:48ch}
.word ul{margin:0;padding:0;list-style:none;font-size:.95rem;color:var(--ink-soft)}
.word li{padding:.3rem 0;border-top:1px dashed var(--rule)}
@media(max-width:720px){.words__grid{grid-template-columns:1fr}}
/* facets */
.facets{margin-bottom:var(--s10)}
.facet{display:grid;grid-template-columns:170px 1fr;gap:var(--s6);padding:var(--s5) 0;border-top:1px solid var(--rule)}
.facet:last-of-type{border-bottom:1px solid var(--rule)}
.facet__name{font-family:var(--font-display);font-size:1.5rem;line-height:1.1;font-weight:400}
.facet__name small{display:block;font-size:.85rem;font-style:italic;color:var(--ink-faint);margin-top:var(--s2);line-height:1.35}
.facet .prose p{font-size:1.02rem;max-width:60ch}
.facet a.more{display:inline-block;margin-top:var(--s3);font-size:.92rem;text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px}
.facet--a .facet__name{color:var(--accent)}.facet--t .facet__name{color:var(--teal)}.facet--v .facet__name{color:var(--violet)}.facet--m .facet__name{color:var(--amber)}
@media(max-width:720px){.facet{grid-template-columns:1fr;gap:var(--s3)}}
/* exits */
.exits{margin-bottom:var(--s9);max-width:820px}
.exits dl{margin:var(--s5) 0 0;display:grid;grid-template-columns:200px 1fr;gap:var(--s4) var(--s6)}
.exits dt{font-family:var(--font-display);font-weight:500;font-size:1.05rem}.exits dd{margin:0;font-size:.97rem;color:var(--ink-soft)}
.exits dd a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}.exits dd a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.exits .sep{color:var(--rule);margin:0 var(--s2)}
@media(max-width:720px){.exits dl{grid-template-columns:minmax(0,1fr);gap:var(--s2) 0}.exits dd{overflow-wrap:anywhere}.exits dd{margin-bottom:var(--s3)}}
.colophon{padding-top:var(--s5);border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3);font-size:.8rem;color:var(--ink-faint)}.colophon p{margin:0}
/* deep pages */
.deep{max-width:820px}.deep .crumb{font-size:.85rem;color:var(--ink-faint);margin-bottom:var(--s5)}.deep .crumb a{color:var(--ink-faint);text-decoration:none;border-bottom:1px solid var(--rule)}
.deep h1{max-width:24ch}.deep section{margin:var(--s7) 0}.deep h2{font-size:1.6rem}
.deep .ladder{margin:var(--s5) 0;max-width:48ch;border-left:2px solid var(--rule);padding-left:var(--s4)}
.ladder__pole{font-size:.8rem;color:var(--ink-faint);font-style:italic;font-family:var(--font-display)}
.ladder ol{list-style:none;margin:var(--s2) 0;padding:0;counter-reset:r}.ladder li{display:grid;grid-template-columns:1.4rem 1fr;gap:var(--s3);padding:var(--s2) 0;border-bottom:1px dashed var(--rule);font-size:.92rem;line-height:1.4}
.ladder li:last-child{border-bottom:0}.ladder li::before{counter-increment:r;content:counter(r);font-family:var(--font-display);color:var(--accent);font-weight:500}
.ladder li b{display:block;font-weight:500;grid-column:2}.ladder li span{color:var(--ink-soft);grid-column:2}
.deep .links{list-style:none;padding:0;margin:var(--s4) 0 0;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);font-size:.95rem}
.deep .links a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}.deep .links a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.deep .todo{font-size:.9rem;color:var(--amber);border-left:2px solid var(--amber);padding-left:var(--s3);margin:var(--s4) 0}
.deep .steps{padding-left:1.2rem;font-family:var(--font-display);font-size:1.05rem;line-height:1.6;max-width:var(--measure)}.deep .steps li{margin-bottom:.4rem}
@media print{body{background:#fff}.masthead__nav,.langswitch,.colophon,.ycurve{display:none}}