/* julau-v12 · charpente héritée de julau-v11 (Blueprint Atelier), texte neuf.
   Jetons : pinnai/branding/design-system/pinnai.css. Aucune couleur ni police inventée.
   Brief : pinnai/projets/siteweb/DESIGN-CE-QUE-BENOIT-AIME.md (15 sept. 2026). */

:root{
  --paper:#F1EEE5;--paper-2:#E9E4D6;--paper-3:#DDD6C2;
  --ink:#0E1A2B;--ink-2:#1E2E44;--ink-3:#4A5A72;--ink-4:#7A8599;
  --line:#C4BBA4;--line-2:#A89E84;
  --blue:#1F3E6E;--accent:#C8412A;--accent-2:#A8331F;
  --grid-op:.08;
  --f-serif:"IBM Plex Serif",Georgia,serif;
  --f-sans:"IBM Plex Sans",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --mx:1280px;--g:clamp(20px,4vw,48px);
}
html[data-theme="noir"] body{
  --paper:#0E1420;--paper-2:#18202E;--paper-3:#232D3E;
  --ink:#F4EDDB;--ink-2:#D6CFBC;--ink-3:#A9B3C2;--ink-4:#7C8798;
  --line:#3D4A5E;--line-2:#566578;
  --blue:#8EC3F2;--accent:#F2B35A;--accent-2:#F6C478;
  --grid-op:.32;
  background-image:
    linear-gradient(rgba(245,237,219,.11) 1px,transparent 1px),
    linear-gradient(90deg,rgba(245,237,219,.11) 1px,transparent 1px);
}
html[data-theme="noir"] body::before{opacity:0}

*{box-sizing:border-box}html,body{margin:0;padding:0}html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--f-sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:48px 48px;background-position:-1px -1px;
  transition:background-color .35s ease,color .35s ease;
}
body::before{content:"";position:fixed;inset:0;background:var(--paper);opacity:calc(1 - var(--grid-op));pointer-events:none;z-index:-1}
a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
img,svg{display:block;max-width:100%}
.wrap{max-width:var(--mx);margin:0 auto;padding:0 var(--g);position:relative}
.mono{font-family:var(--f-mono);letter-spacing:.02em}
em.em,.em{font-style:italic;color:var(--accent)}

/* coins-crochets sur les cartes */
.f,.tl,.sv,.crochets{position:relative}
.sv::before,.f::before,.tl::before,.crochets::before{
  content:"";position:absolute;inset:-8px;pointer-events:none;opacity:.55;color:var(--accent);
  background-image:
    linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),
    linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),
    linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),
    linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-size:12px 1.5px,1.5px 12px,12px 1.5px,1.5px 12px,12px 1.5px,1.5px 12px,12px 1.5px,1.5px 12px;
  background-position:top left,top left,top right,top right,bottom left,bottom left,bottom right,bottom right;
}
@media(max-width:640px){.sv::before,.f::before,.tl::before,.crochets::before{inset:-7px}}
/* le portrait en rond (Benoit, 15 sept. au soir) */
.fp.rond,.fp.rond img{border-radius:50%}
.fp.rond{box-shadow:none;border-width:2px}
/* sept tuiles égales (v13, la version simple) : 4 + 3 sur bureau, 2 colonnes sous 1100, 1 sous 600 */
.sept{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:40px}
@media(max-width:1100px){.sept{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.sept{grid-template-columns:1fr}}
.sept .sv{border:1.5px solid var(--ink)}
.sept .sv .ib{width:38px;height:38px;border:1.5px solid var(--ink);background:var(--paper-2);display:grid;place-items:center;color:var(--ink);margin-bottom:16px}
.sept .sv .ib svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sept{align-items:stretch}
.sept .sv .tete{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.sept .sv .tete .ib{margin:0;flex:0 0 38px}
.sept .sv .tete h3{margin:0}
.sept .sv ul{list-style:none;padding:0;margin:0}
.sept .sv li{padding:5px 0 5px 16px;position:relative;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.sept .sv li::before{content:"";position:absolute;left:1px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.sept .sv li .em{font-style:normal;color:var(--accent)}
/* six services développés (version D) */
.six{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:44px}
@media(max-width:960px){.six{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.six{grid-template-columns:1fr}}
.six .sv{border:1.5px solid var(--ink);padding:26px 26px 24px}
.six .sv .ib{width:38px;height:38px;border:1.5px solid var(--ink);background:var(--paper-2);display:grid;place-items:center;color:var(--ink);margin-bottom:16px}
.six .sv .ib svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.six .sv h3{font-size:20px}
.six .sv p{font-size:14.5px}
.etq{display:inline-block;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);padding:3px 9px;border-radius:2px;margin-bottom:14px}

/* ── nav ── */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-2)}
.ni{display:flex;align-items:center;justify-content:space-between;height:78px;gap:12px}
.logo{display:flex;align-items:center;gap:14px;font-family:var(--f-serif);font-weight:500;font-size:20px;letter-spacing:-.01em;white-space:nowrap}
.logo .lm{width:58px;height:58px;overflow:visible;display:block;flex:0 0 58px}
.logo .lm text{font-family:var(--f-serif);font-weight:700;fill:currentColor}
.logo .lm rect{fill:var(--accent)}
.nl{display:flex;align-items:center;gap:22px}
.nl a{color:var(--ink-2);font-family:var(--f-mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;transition:color .15s}
.nl a:hover{color:var(--accent)}
@media(max-width:860px){.nl .hs{display:none}.nl{gap:10px}}
@media(max-width:430px){.logo{font-size:16px;gap:8px}.logo .lm{width:46px;height:46px;flex-basis:46px}.nl{gap:8px}.nl .btn{padding:8px 10px;font-size:10.5px;min-height:38px}.tglt{width:34px;height:34px}}
.nl .lang{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:var(--ink-2);border:1px solid var(--line-2);border-radius:2px;min-height:40px;padding:0 12px;display:inline-flex;align-items:center;text-transform:uppercase}
.nl .lang:hover{border-color:var(--ink);color:var(--accent)}
@media(max-width:430px){.nl .lang{min-height:34px;padding:0 8px;font-size:11px}}
.tglt{width:40px;height:40px;border:1px solid var(--line-2);background:transparent;display:grid;place-items:center;color:var(--ink);cursor:pointer;border-radius:2px;transition:border-color .18s,color .18s;position:relative;flex-shrink:0}
.tglt:hover{border-color:var(--ink);color:var(--accent)}
.tglt svg{width:18px;height:18px;display:block;transition:transform .45s cubic-bezier(.6,.1,.3,1),opacity .3s ease;position:absolute}
.tglt .sun{opacity:1;transform:rotate(0)}.tglt .moon{opacity:0;transform:rotate(90deg) scale(.6)}
html[data-theme="noir"] .tglt .sun{opacity:0;transform:rotate(-90deg) scale(.6)}
html[data-theme="noir"] .tglt .moon{opacity:1;transform:rotate(0) scale(1)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;font-family:var(--f-mono);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;min-height:44px;white-space:nowrap;border-radius:2px;transition:transform .15s,background .2s,border-color .2s,color .2s}
.b1{background:var(--ink);color:var(--paper);border:1px solid var(--ink)}.b1:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-1px)}
.bg{background:transparent;color:var(--ink);border:1px solid var(--ink)}.bg:hover{background:var(--ink);color:var(--paper)}
.nl a.b1{color:var(--paper)}.nl a.b1:hover{color:var(--paper)}
.btn .ar{transition:transform .15s}.btn:hover .ar{transform:translateX(2px)}
.b1.rouille{background:var(--accent);border-color:var(--accent);color:#F4EDDB}
.b1.rouille:hover{background:var(--accent-2);border-color:var(--accent-2)}
html[data-theme="noir"] .b1.rouille{color:#0E1420}

/* ── hero ── */
.hero{position:relative;padding:clamp(44px,6vw,80px) 0 clamp(40px,5vw,72px)}
.h-meta{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.12em;margin-bottom:28px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.h-meta .s{width:14px;height:1px;background:var(--line-2)}
h1.ht{font-family:var(--f-serif);font-weight:400;font-size:clamp(38px,5.3vw,74px);line-height:1;letter-spacing:-.02em;margin:0 0 26px;text-wrap:balance;max-width:19ch}
h1.ht .em{font-style:italic;color:var(--accent)}
.hs{font-size:clamp(16px,1.3vw,19px);color:var(--ink-2);max-width:56ch;line-height:1.6;margin:0 0 30px}
.hc{display:flex;gap:14px 22px;flex-wrap:wrap;align-items:center;margin-bottom:44px}
.dispo{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3);letter-spacing:.04em;line-height:1.5}
.dispo b{color:var(--ink);font-weight:500}

/* la bande des six tuiles : le verso de la carte */
.t6{border-top:1px solid var(--line-2);padding-top:20px;display:grid;grid-template-columns:repeat(6,1fr);gap:12px 18px}
@media(max-width:1000px){.t6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.t6{grid-template-columns:1fr 1fr}}
.t6 .ti6{display:flex;align-items:center;gap:10px;min-width:0}
.t6 .ib{width:34px;height:34px;flex:0 0 34px;border:1.5px solid var(--ink);background:var(--paper-2);display:grid;place-items:center;color:var(--ink)}
.t6 .ib svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.t6 .lb{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);line-height:1.3}

/* ── sections ── */
section{padding:clamp(72px,9vw,120px) 0;position:relative;border-top:1px solid var(--line-2)}
.plein{background:var(--paper-2)}
.sn{font-family:var(--f-mono);font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px;display:flex;gap:12px;align-items:center}
.sn::before{content:"";width:24px;height:1px;background:var(--accent)}
h2.st{font-family:var(--f-serif);font-weight:400;font-size:clamp(32px,4.8vw,58px);line-height:1.02;letter-spacing:-.018em;margin:0 0 18px;max-width:24ch;text-wrap:balance}
h2.st .em{font-style:italic;color:var(--accent)}
.sl{font-size:clamp(16px,1.3vw,18px);color:var(--ink-2);max-width:60ch;line-height:1.6}

/* les trois peurs */
.sg{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:48px}
@media(max-width:900px){.sg{grid-template-columns:1fr;gap:30px}}
.sv{padding:28px;border:1.5px solid var(--ink);display:flex;flex-direction:column;background:var(--paper);transition:background .2s}
.sv:hover{background:var(--paper-2)}
.sv .num{font-family:var(--f-serif);font-style:italic;font-size:44px;line-height:1;color:var(--accent);margin-bottom:18px}
.sv h3{font-family:var(--f-serif);font-weight:500;font-size:22px;line-height:1.2;margin:0 0 12px;letter-spacing:-.01em}
.sv p{color:var(--ink-2);font-size:15px;margin:0;line-height:1.6}
.sv p b{color:var(--ink);font-weight:500}

/* le fond, deux colonnes */
.pg{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,5vw,80px);align-items:start;margin-top:48px}
@media(max-width:900px){.pg{grid-template-columns:1fr}}
.pb p{font-size:17px;color:var(--ink-2);margin:0 0 16px;max-width:56ch;line-height:1.65}
.pb p .em{font-style:italic;color:var(--accent)}
.tl{background:var(--paper);border:1.5px solid var(--ink);padding:24px}
.tl h3{font-family:var(--f-serif);font-weight:500;font-size:18px;margin:0 0 16px;letter-spacing:-.005em}
.ti{display:grid;grid-template-columns:32px 1fr;gap:14px;padding:12px 0;border-bottom:1px dashed var(--line)}
.ti:last-child{border-bottom:none}
.tii{width:32px;height:32px;border:1.5px solid var(--ink);background:var(--paper-2);display:grid;place-items:center;color:var(--ink);font-family:var(--f-mono);font-size:11px}
.tt{font-weight:600;font-size:14.5px;margin-bottom:3px}
.td{font-size:13.5px;color:var(--ink-2);line-height:1.5}

/* l'inversion : la diapositive dans l'autre couleur */
.prf{background:var(--ink);color:var(--paper)}
.prf .sn{color:var(--accent)}.prf .sn::before{background:var(--accent)}
.prf h2.st{color:var(--paper)}.prf h2.st .em{color:var(--accent)}
.lt{max-width:860px;margin:0 auto;padding-top:12px}
.lt p{font-family:var(--f-serif);font-weight:400;font-size:clamp(19px,2.2vw,27px);line-height:1.4;margin:0 0 20px;text-wrap:pretty}
.lt p .em{font-style:italic;color:var(--accent)}
.lt.lettrine p:first-of-type::first-letter{font-size:2.8em;float:left;line-height:.85;color:var(--accent);padding:6px 14px 0 0;font-family:var(--f-serif)}
.ls{margin-top:32px;padding-top:22px;border-top:1px solid color-mix(in srgb,var(--paper) 20%,transparent)}
.lsg{font-family:var(--f-serif);font-style:italic;font-size:34px;color:var(--accent);margin-bottom:6px;line-height:1}
.lsn{font-family:var(--f-serif);font-size:17px;font-weight:500}
.lsr{font-family:var(--f-mono);font-size:10.5px;color:var(--ink-4);text-transform:uppercase;letter-spacing:.06em;margin-top:3px}

/* le fondateur */
.fi{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(32px,5vw,72px);align-items:end;margin-bottom:40px}
@media(max-width:900px){.fi{grid-template-columns:1fr}}
.f{background:var(--paper);border:1.5px solid var(--ink);padding:28px;display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:start;max-width:920px}
@media(max-width:640px){.f{grid-template-columns:1fr}}
.fp{width:200px;height:200px;background:var(--paper-3);border:1.5px solid var(--ink);overflow:hidden;box-shadow:5px 5px 0 var(--line-2)}
.fp img{width:100%;height:100%;object-fit:cover}
@media(max-width:640px){.fp{width:160px;height:160px}}
.fn{font-family:var(--f-serif);font-weight:500;font-size:24px;margin:0 0 4px;letter-spacing:-.01em;line-height:1.1}
.fr{font-family:var(--f-mono);font-size:10.5px;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px}
.fb{font-size:15.5px;color:var(--ink-2);line-height:1.6;margin:0 0 12px}
.fb .em{font-style:italic;color:var(--accent)}

/* la réservation : maquette du geste, un jour, une heure, trois champs */
.cf{padding:clamp(80px,10vw,130px) 0;background:var(--paper);position:relative}
.cf h2{font-family:var(--f-serif);font-weight:400;font-size:clamp(40px,7vw,96px);line-height:.98;letter-spacing:-.025em;margin:0 0 22px;max-width:16ch;text-wrap:balance}
.cf h2 .em{font-style:italic;color:var(--accent)}
.cf .ld{font-size:clamp(16px,1.4vw,19px);color:var(--ink-2);max-width:56ch;margin:0 0 12px;line-height:1.6}
.cf .ld2{font-size:15.5px;color:var(--ink-3);max-width:60ch;margin:0 0 36px;line-height:1.6}
.resa{background:var(--paper);border:1.5px solid var(--ink);padding:clamp(20px,3vw,32px);max-width:920px;box-shadow:8px 8px 0 var(--line-2);position:relative}
.resa .etapes{display:flex;gap:0;margin:0 0 22px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.resa .etape{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);padding:0 14px;min-height:42px;display:flex;align-items:center;gap:8px;border-bottom:2px solid transparent;margin-bottom:-1px}
.resa .etape.vive{color:var(--ink);border-bottom-color:var(--accent)}
.resa .etape .n{width:18px;height:18px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:9.5px}
.resa .panneau{display:none}.resa .panneau.vu{display:block}
.resa .jours{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
@media(max-width:640px){.resa .jours{grid-template-columns:1fr 1fr}}
.resa .jour{background:var(--paper-2);border:1px solid var(--line-2);border-radius:2px;padding:14px 16px;text-align:left;cursor:pointer;color:var(--ink);min-height:72px;font-family:var(--f-sans)}
.resa .jour:hover{border-color:var(--accent)}
.resa .jour .sem{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);display:block;margin-bottom:4px}
.resa .jour .dat{font-size:16px;font-weight:600;display:block}
.resa .heures{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px}
.resa .heure{background:var(--paper);border:1px solid var(--line-2);border-radius:2px;min-height:46px;cursor:pointer;font-family:var(--f-mono);font-size:13.5px;color:var(--ink)}
.resa .heure:hover{border-color:var(--accent);color:var(--accent)}
.resa .heure.prise{opacity:.34;cursor:not-allowed;text-decoration:line-through}
.resa .midi{grid-column:1/-1;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);display:flex;align-items:center;gap:10px;margin:8px 0 2px}
.resa .midi::before,.resa .midi::after{content:"";flex:1;height:1px;background:var(--line)}
.resa .recap{background:var(--paper-2);border-left:2px solid var(--accent);padding:12px 16px;margin:0 0 20px}
.resa .recap .q{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);display:block;margin-bottom:3px}
.resa .recap .r{font-size:16px;font-weight:600}
.resa form{display:grid;gap:16px;max-width:520px}
.resa label{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 6px}
.resa input{width:100%;min-height:46px;padding:0 14px;font-family:var(--f-sans);font-size:15px;color:var(--ink);background:var(--paper);border:1px solid var(--line-2);border-radius:2px}
.resa input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.resa .aide{font-family:var(--f-mono);font-size:11px;color:var(--ink-4);margin:6px 0 0;line-height:1.5}
.resa .retour{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-4);padding:10px 0;min-height:40px}
.resa .retour:hover{color:var(--accent)}
.resa .souv{display:flex;gap:11px;align-items:flex-start;border-top:1px solid var(--line);margin:28px 0 0;padding:16px 0 0;max-width:64ch}
.resa .souv svg{flex-shrink:0;margin-top:2px;stroke:var(--ink-3);fill:none;stroke-width:1.6;width:17px;height:17px}
.resa .souv p{margin:0;font-size:13.5px;color:var(--ink-3);line-height:1.55}
.resa .souv b{color:var(--ink-2);font-weight:600}
.resa .fini h3{font-family:var(--f-serif);font-size:26px;font-weight:500;margin:0 0 10px}
.resa .fini p{color:var(--ink-2);margin:0 0 10px;max-width:56ch}
.resa .maq{position:absolute;top:-11px;right:16px;background:var(--paper-2);border:1px solid var(--line);padding:2px 9px;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.autre{margin-top:26px;font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3);letter-spacing:.04em;line-height:1.6}
.autre a{color:var(--ink);border-bottom:1px solid var(--line-2)}.autre a:hover{color:var(--accent);border-color:var(--accent)}
.carte-photo{margin-top:44px;max-width:520px}
.carte-photo img{border:1.5px solid var(--ink);box-shadow:5px 5px 0 var(--line-2);max-height:440px;width:auto}
.carte-photo .lg{font-family:var(--f-mono);font-size:10.5px;color:var(--ink-4);letter-spacing:.06em;text-transform:uppercase;margin-top:10px}

/* pied */
footer{background:var(--ink);color:color-mix(in srgb,var(--paper) 70%,transparent);padding:48px 0 24px;font-size:14px}
.fgt{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:32px}
@media(max-width:700px){.fgt{grid-template-columns:1fr}}
footer .logo{color:var(--paper);margin-bottom:12px}
footer p{max-width:40ch;line-height:1.55;font-size:13.5px;color:color-mix(in srgb,var(--paper) 62%,transparent)}
footer h4{color:var(--paper);font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:600;margin:0 0 14px}
footer ul{list-style:none;padding:0;margin:0}footer li{padding:4px 0;font-size:13.5px}
footer a:hover{color:var(--accent)}
.fb2{padding-top:20px;border-top:1px solid color-mix(in srgb,var(--paper) 14%,transparent);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:var(--f-mono);font-size:11px;color:color-mix(in srgb,var(--paper) 48%,transparent);text-transform:uppercase;letter-spacing:.06em}

/* ── l'apparition du texte (Benoit, 15 sept. : « dans la façon dont le texte apparaît »).
      Chaque élément d'un bloc entre l'un après l'autre : opacity et transform SEULEMENT, 16 px,
      450 ms, 70 ms d'écart entre voisins (--i posé par site.js), une seule fois. La classe .js
      n'existe que si l'observateur tourne : sans JavaScript, tout est visible d'emblée. ── */
.js .rv-feuille,.js .rv-groupe > *{opacity:0;transform:translateY(16px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.6,.2,1);transition-delay:calc(var(--i,0) * 70ms)}
.js .rv-feuille.in,.js .rv-groupe.in > *{opacity:1;transform:none}
.js .rv.d1{--d:1}.js .rv.d2{--d:2}.js .rv.d3{--d:3}.js .rv.d4{--d:4}
.js .rv.d1.rv-feuille,.js .rv.d1.rv-groupe > *{transition-delay:calc(var(--i,0) * 70ms + 70ms)}
.js .rv.d2.rv-feuille,.js .rv.d2.rv-groupe > *{transition-delay:calc(var(--i,0) * 70ms + 140ms)}
.js .rv.d3.rv-feuille,.js .rv.d3.rv-groupe > *{transition-delay:calc(var(--i,0) * 70ms + 210ms)}
.js .rv.d4.rv-feuille,.js .rv.d4.rv-groupe > *{transition-delay:calc(var(--i,0) * 70ms + 280ms)}
@media(prefers-reduced-motion:reduce){.js .rv-feuille,.js .rv-groupe > *{opacity:1;transform:none;transition:none}*{animation:none!important;transition:none!important}}

/* filigrane d'aperçu, retiré à la publication */
.apercu{position:fixed;right:12px;bottom:12px;z-index:60;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);background:var(--paper-2);border:1px solid var(--line);border-radius:2px;padding:6px 11px;pointer-events:none}