/* Eddy Illustration
   Une seule feuille pour tout le site.
   Le site est un jeu de cartes. Chrome blanc, filets fins, langage tableau,
   la couleur saturee ne vient que des visuels des artistes et de leurs aplats.
   Aucune police externe, aucun mode sombre. */

/* ------------------------------------------------------------------ 1. Base */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
 --ink:#0d0d0d;--paper:#fff;
 --hair:rgba(0,0,0,.17);--hair2:rgba(0,0,0,.08);
 --gut:24px;--rule:2px;
 --ease:cubic-bezier(.2,.86,.28,1);--dur:.62s;
 --t1:clamp(46px,9vw,128px);--t2:clamp(30px,4.6vw,64px);--t3:22px;--t4:15px;--t5:12px;--t6:10.5px;
 --s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:40px;--s7:64px;
 --chrome:58px;
 --c:#0d0d0d;--c1:#0d0d0d;--tint:#ffffff;--fg:#0d0d0d;--fgi:#fff;
 --serif:Georgia,"Times New Roman",Times,serif;
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .26s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .5s cubic-bezier(.2,.86,.28,1) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-14px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(18px)}}
.bar{view-transition-name:bar}
.bar__n a.on{view-transition-name:navon}
::view-transition-group(navon){animation-duration:.45s;animation-timing-function:cubic-bezier(.2,.86,.28,1)}
body{background:var(--paper);color:var(--ink);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
 font-weight:700;font-size:var(--t4);line-height:1.2;-webkit-font-smoothing:antialiased;
 min-height:100dvh;display:flex;flex-direction:column}
main{flex:1 0 auto}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.ph{font-weight:400;font-style:italic;opacity:.5}
.mi{font-weight:400;font-size:var(--t6);letter-spacing:.18em;text-transform:uppercase;opacity:.6}
.big{font-size:var(--t2);letter-spacing:-.04em;line-height:.94;margin:0 0 6px}
.lead{font-weight:400;font-size:14px;line-height:1.65;max-width:58ch;opacity:.8;margin:8px 0 22px}
.go{display:inline-block;font-weight:400;font-size:var(--t6);letter-spacing:.18em;text-transform:uppercase;
 border-bottom:1px solid var(--ink);padding-bottom:3px;margin-top:6px}
.go i{font-style:normal}
.go:hover{opacity:.6}
.rv{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------------------------------------------------------------- 2. Entete */
/* le mot-marque a gauche, les entrees a droite ; la barre se range en descendant */
.bar{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:var(--rule) solid var(--ink);
 display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px var(--gut) 14px;will-change:transform,opacity;
 transition:transform .55s var(--ease),opacity .45s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.bar.is-hid{transform:translateY(-100%);opacity:0;transition:transform .55s var(--ease),opacity .4s var(--ease) .05s,background .3s var(--ease),color .3s var(--ease)}
.bar__w{font-size:19px;letter-spacing:-.025em;white-space:nowrap}
.bar__w{line-height:1}
.bar__logo{display:inline-block;height:.95em;width:auto;fill:currentColor;vertical-align:-.235em;margin-right:.26em}
.bar__n{display:flex;gap:22px;flex-wrap:wrap;justify-content:flex-end}
.bar__n a{font-size:var(--t5);letter-spacing:.06em;font-weight:400;opacity:.55;transition:opacity .2s;padding:6px 0}
.bar__n a.on,.bar__n a:hover{opacity:1}
html:not(.js) .bar__n a.on{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.bar__n{position:relative}
.bar__u{position:absolute;left:0;bottom:3px;height:1px;width:0;background:currentColor;opacity:0;pointer-events:none;box-sizing:border-box;
 transform-origin:left;will-change:transform,width;transition:transform .38s var(--ease),width .38s var(--ease),opacity .25s}
/* la page s'efface en partant et arrive par le bas ; la barre reste en place */
.js main,.js .colo,.js .colo__b{transition:opacity .28s var(--ease),transform .34s var(--ease)}
html.js.is-entering main,html.js.is-entering .colo,html.js.is-entering .colo__b{opacity:0;transform:translateY(14px)}
html.js.is-leaving main,html.js.is-leaving .colo,html.js.is-leaving .colo__b{opacity:0;transform:translateY(-10px)}
/* l'interrupteur de langue : le bloc noir couvre la langue en cours, glisse vers l'autre au clic */
.lsw{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink);opacity:1;width:max-content;justify-self:start;
 font-weight:700;font-size:9px;letter-spacing:.12em;text-transform:uppercase;line-height:1;overflow:hidden;vertical-align:middle}
.lsw__o{position:relative;z-index:1;padding:6px 8px 5px;min-width:30px;text-align:center;color:var(--ink);transition:color .3s var(--ease)}
.lsw__o.is-on{color:var(--paper)}
.lsw__k{position:absolute;top:0;bottom:0;left:0;width:50%;background:var(--ink);transition:transform .38s var(--ease)}
.lsw[data-on="en"] .lsw__k{transform:translateX(100%)}
.lsw[data-on="fr"]:hover .lsw__k{transform:translateX(8%)}
.lsw[data-on="en"]:hover .lsw__k{transform:translateX(92%)}
.lsw.is-switching[data-on="fr"] .lsw__k,.lsw.is-switching[data-on="fr"]:hover .lsw__k{transform:translateX(100%)}
.lsw.is-switching[data-on="en"] .lsw__k,.lsw.is-switching[data-on="en"]:hover .lsw__k{transform:translateX(0)}
.lsw.is-switching .lsw__o{color:var(--ink)}
.lsw.is-switching .lsw__o:not(.is-on){color:var(--paper)}
/* sur l'accueil (ecran) la barre flotte sur le grand espace, puis se pose en blanc */
.home .bar{position:fixed;left:0;right:0;background:transparent;border-bottom-color:transparent;color:var(--fg)}
.home .bar.is-solid{background:var(--paper);border-bottom-color:var(--ink);color:var(--ink)}
.home .bar:not(.is-solid) .bar__u{background:currentColor}

/* ------------------------------------------------------------ 3. Le grand espace */
/* une piece seule sur l'aplat de son artiste, la ligne en bas a gauche, le nom en bas a droite */
.hero{position:relative;height:100dvh;min-height:560px;background:var(--c);color:var(--fg);
 border-bottom:var(--rule) solid var(--ink);overflow:hidden;transition:background .6s var(--ease);
 display:grid;grid-template-rows:minmax(0,1fr) auto}
.hero__f{min-height:0;display:flex;align-items:center;justify-content:center;padding:calc(var(--chrome) + 2vh) 8vw 3vh}
.hero__im{max-width:100%;max-height:100%;width:auto;height:auto;
 box-shadow:0 30px 80px rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.12);
 opacity:0;transition:opacity .6s var(--ease)}
.hero.is-on .hero__im{opacity:1}
.hero__b{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s5);padding:0 var(--gut) 26px}
.hero__t{max-width:min(1180px,78%);z-index:2}
.hero__t h1{font-size:clamp(30px,4vw,58px);letter-spacing:-.04em;line-height:.96;text-wrap:pretty}
.hero__t p{font-weight:400;font-size:clamp(15px,.45vw + 10px,18px);line-height:1.5;margin-top:18px;opacity:.85;text-wrap:pretty}
.hero__s .hs1{display:block;font-weight:700;opacity:1}
.hero__s .hs2{display:block;max-width:62ch}
@media (min-width:761px){.hero__t h1 .hl{display:block;white-space:nowrap}}
.hero__a{z-index:2;display:flex;flex-direction:column;gap:4px;flex:0 0 auto;
 align-items:flex-end;text-align:right}
.hero__a b{font-size:15px;letter-spacing:-.01em}
.hero__a .mi{opacity:.75}
.hero__a:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.hero .ph{opacity:.7}

/* ------------------------------------------------------- 4. Le langage tableau */
.wrap{padding:22px var(--gut) 0}
.wrap--pad{padding-bottom:44px}
.thead{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;
 border:var(--rule) solid var(--ink);border-bottom:0;padding:9px 12px;
 font-weight:400;font-size:var(--t6);letter-spacing:.18em;text-transform:uppercase}
.thead b{font-weight:700;letter-spacing:.1em}
.thead .c{color:var(--c1)}
.sect--mt{margin-top:26px}
.wrap>.big+.thead,.wrap>.big+.callout,.wrap>.big+.rubs,.wrap>.big+.cells{margin-top:22px}

/* le travail : aplat derriere chaque piece, rien d'ecrit dessus, le nom vient au survol */
.work{border:var(--rule) solid var(--ink);background:var(--hair);display:grid;gap:1px}
.thead+.work{border-top:0}
.work__r{display:grid;grid-template-columns:repeat(var(--n,1),minmax(0,1fr));gap:1px}
.wk{position:relative;display:flex;flex-direction:column;background:var(--paper);min-width:0;overflow:hidden}
.wk__im{background:var(--c);display:flex;align-items:center;justify-content:center;padding:6%;
 aspect-ratio:var(--ar,4/3);overflow:hidden}
.wk__im img{max-width:100%;max-height:100%;width:auto;height:auto;
 box-shadow:0 16px 44px rgba(0,0,0,.24),0 0 0 1px rgba(0,0,0,.1);transition:transform .6s var(--ease)}
.wk:hover .wk__im img{transform:scale(1.025)}
.wk__c{position:absolute;left:0;bottom:0;background:var(--paper);border-top:1px solid var(--hair);border-right:1px solid var(--hair);
 padding:9px 12px 10px;display:flex;flex-direction:column;gap:4px;
 transform:translateY(100%);transition:transform .3s var(--ease)}
.wk:hover .wk__c,.wk:focus-visible .wk__c{transform:none}
.wk__c b{font-size:15px;letter-spacing:-.015em}
.wk--news .wk__c{position:static;transform:none;border-right:0;padding:12px}
.wk__c .nt{font-weight:400;font-size:13px;line-height:1.6;opacity:.8}
@media(pointer:coarse){.wk__c{position:static;transform:none;border-right:0}}

/* a la une : l'artiste a gauche avec trois pieces, les projets a droite avec les rubriques */
.une{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:1px;background:var(--hair);border:var(--rule) solid var(--ink)}
.une--solo{grid-template-columns:minmax(0,1fr)}
.thead+.une{border-top:0}
.une__a{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,2fr);gap:1px;background:var(--hair);min-width:0}
.une__t{background:var(--paper);padding:22px 20px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.une__t h2{font-size:clamp(24px,2.6vw,38px);letter-spacing:-.035em;line-height:1.02}
.une__t h2 a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.une__t p{font-weight:400;font-size:14px;line-height:1.7;max-width:40ch}
.une__ph{width:88px;height:88px;object-fit:cover;margin-bottom:6px}
.une__ph--void{display:flex;align-items:center;justify-content:center;background:var(--hair2);font-size:12px}
.une__w{display:grid;grid-template-columns:repeat(3,1fr);align-content:center;background:var(--paper)}
.une__w .flat{padding:8%;aspect-ratio:1;min-height:0;border-left:1px solid var(--hair)}
.une__w .flat:first-child{border-left:0}
.une__w .flat img{max-width:100%;max-height:100%}
.une__w a.flat{cursor:pointer}
.une__p{background:var(--paper);padding:22px 20px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.une__p p{font-weight:400;font-size:14px;line-height:1.7}
.une__p .rubs{margin:0}
.une__l{display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.une__l li{border-bottom:1px solid var(--hair)}
.une__l a{display:block;padding:9px 0;font-size:15px;font-weight:700;letter-spacing:-.01em}
.une__l a:hover{text-decoration:underline;text-underline-offset:3px}
.une__p[hidden]{display:none}
.rub{border:1px solid var(--ink);border-radius:6px;padding:6px 10px 5px;font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;
 transition:background .2s,color .2s}
a.rub:hover{background:var(--ink);color:var(--paper)}

/* --------------------------------------------------------- 5. Le jeu de cartes */
.intro{padding:20px var(--gut) 15px;display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap}
.intro .big{font-size:clamp(30px,5vw,64px);margin:0}
.intro__h{font-weight:400;font-size:12px;letter-spacing:.02em;opacity:.6;max-width:40ch;line-height:1.5;padding-bottom:4px}
.deck{display:flex;flex-direction:column;min-height:0}
.deck--page{height:calc(100dvh - var(--chrome) - 100px);min-height:420px}
.deck--home{height:auto;flex:1 1 auto;min-height:min(66vh,640px)}
.deckrow{display:grid;grid-template-columns:minmax(0,1fr) 290px;border:var(--rule) solid var(--ink);border-top:0;border-bottom:0}
.deckrow__d{min-width:0;display:flex;flex-direction:column}
.deckrow .caps{border-bottom:0}
/* la barre des legendes fait exactement une rangee de la liste des noms : les filets se rejoignent */
.deckrow .caps{height:calc(100% / var(--n,12));min-height:44px}
.more{display:flex;justify-content:space-between;align-items:baseline;gap:14px;border:var(--rule) solid var(--ink);
 padding:12px 12px 13px;transition:background .2s,color .2s}
.more b{font-size:15px;letter-spacing:-.01em}
.more i{font-style:normal}
.more:hover,.more:focus-visible{background:var(--ink);color:var(--paper)}
.more:hover .mi{opacity:.7}
.deck__vp{position:relative;flex:1 1 auto;min-height:230px;overflow:hidden;touch-action:pan-y}
.deck__tr{position:absolute;inset:0;transform:translate3d(0,0,0);transition:transform var(--dur) var(--ease)}
.card{position:absolute;left:0;top:0;height:100%;width:var(--w,320px);border-radius:14px 14px 0 0;overflow:hidden;
 background:var(--c,#eee);transform:translate3d(var(--x,0),0,0);transition:transform var(--dur) var(--ease);
 box-shadow:-14px 0 26px -12px rgba(0,0,0,.42),0 0 0 1px rgba(0,0,0,.22);will-change:transform}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .8s var(--ease)}
.card__v{position:absolute;inset:0;background:var(--paper);opacity:.3;transition:opacity .5s var(--ease);pointer-events:none}
.card.is-open .card__v{opacity:0}
.card.is-open img{transform:scale(1)}
.card__n{position:absolute;left:0;top:13px;z-index:3;min-width:29px;padding:4px 6px 3px;background:var(--paper);
 border-right:1px solid var(--hair);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
 border-radius:0 4px 4px 0;font-size:10px;letter-spacing:.1em;font-weight:400}
.card__t{display:none}
.card__end,.cap__end{position:absolute;left:0;top:0;height:100%;width:var(--w,320px);background:var(--paper);
 transform:translate3d(var(--x,0),0,0);transition:transform var(--dur) var(--ease)}
.caps{position:relative;height:64px;flex:0 0 auto;overflow:hidden;background:var(--paper);
 border-top:var(--rule) solid var(--ink)}
.caps__tr{position:absolute;inset:0;transform:translate3d(0,0,0);transition:transform var(--dur) var(--ease)}
.cap{position:absolute;left:0;top:0;height:100%;width:var(--w,320px);transform:translate3d(var(--x,0),0,0);
 transition:transform var(--dur) var(--ease);background:var(--paper);border-left:1px solid var(--hair);
 padding:0 12px;overflow:hidden;white-space:nowrap;display:flex;flex-direction:column;gap:4px;justify-content:center}
.cap__n{font-weight:400;font-size:var(--t6);letter-spacing:.18em;opacity:.45}
.cap__t{font-size:14px;letter-spacing:-.015em}
.cap{flex-direction:row;align-items:center;justify-content:space-between;gap:14px}
.cap__go{font-weight:400;font-size:var(--t6);letter-spacing:.18em;text-transform:uppercase;opacity:0;white-space:nowrap;transition:opacity .4s var(--ease)}
.cap__go i{font-style:normal}
.cap.is-open .cap__go{opacity:.7}

/* les treize noms : en colonne a cote du jeu, en grille ailleurs */
.names{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1px;background:var(--hair);
 border:var(--rule) solid var(--ink);border-top:0}
.names--col{grid-template-columns:1fr;grid-template-rows:repeat(var(--n,12),minmax(0,1fr));height:100%;gap:0;background:var(--paper);border:0;
 box-shadow:inset 1px 0 0 var(--hair);align-self:stretch}
.names--col .nm{box-shadow:inset 0 -1px 0 var(--hair)}
.names--col .nm:last-child{box-shadow:none}
.names--col .nm::before{left:1px}
.nm{position:relative;background:var(--paper);padding:12px 12px 12px 16px;display:flex;flex-direction:column;gap:3px;overflow:hidden;
 justify-content:center;min-width:0}
.nm::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c);
 transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nm:hover::before,.nm:focus-visible::before{transform:none}
.nm b{font-size:15px;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.names--col .nm{flex-direction:row;align-items:baseline;justify-content:space-between;gap:10px;min-height:0;padding:6px 12px 6px 16px}
.names--col .nm b{flex:1 1 auto}
.nm .mi:empty{display:none}

/* le mur des artistes, page Artistes */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);border:var(--rule) solid var(--ink);border-top:0}
.tile{position:relative;display:flex;flex-direction:column;background:var(--paper);min-width:0}
.tile__im{position:relative;aspect-ratio:3/4;background:var(--c,#eee);display:flex;align-items:center;justify-content:center;padding:10%;overflow:hidden}
.tile__im img{max-width:100%;max-height:100%;width:auto;height:auto;box-shadow:0 10px 26px rgba(0,0,0,.22);transition:transform .55s var(--ease)}
.tile:hover .tile__im img{transform:scale(1.04)}
.tile__n{border-top:1px solid var(--hair);padding:10px 10px 12px;display:flex;flex-direction:column;gap:5px;min-height:58px}
.tile__n b{font-size:16px;letter-spacing:-.02em}
.tile__i{position:absolute;left:0;top:0;z-index:2;background:var(--paper);border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
 padding:5px 8px 4px;font-weight:400;font-size:var(--t6);letter-spacing:.14em}
.sort{display:flex;gap:10px;align-items:baseline}
.sort button{font:inherit;letter-spacing:inherit;text-transform:inherit;opacity:.5}
.sort button[aria-pressed="true"]{opacity:1;text-decoration:underline;text-underline-offset:3px}
.sort .sep{opacity:.4}

/* ---------------------------------------------------- 6. Trois cellules de tableau */
/* la barre de commande du jeu, et la chaine precedent / suivant des fiches */
.foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;border-top:var(--rule) solid var(--ink);background:var(--paper)}
.foot--chain{margin:0 var(--gut);border:var(--rule) solid var(--ink);border-bottom:0}
.foot__s{display:flex;align-items:center;gap:14px;padding:12px var(--gut);min-height:64px;transition:background .2s,color .2s}
.foot__w{display:flex;flex-direction:column;gap:3px}
.foot__s:hover,.foot__s:focus-visible{background:var(--ink);color:var(--paper)}
.foot__s:hover .mi{opacity:.7}
.foot__s--r{justify-content:flex-end;text-align:right;border-left:1px solid var(--hair)}
.foot__s--r .foot__w{align-items:flex-end}
.foot__s--l{border-right:1px solid var(--hair)}
.foot__k{font-size:15px;letter-spacing:-.01em}
.foot__im{width:44px;height:44px;flex:0 0 auto;background:var(--c);display:flex;align-items:center;justify-content:center;padding:4px}
.foot__im img{max-width:100%;max-height:100%;width:auto;height:auto;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.foot__m{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:12px 26px;text-align:center;
 transition:background .2s,color .2s}
.foot__m:hover,.foot__m:focus-visible{background:var(--ink);color:var(--paper)}
.foot__m:hover .mi{opacity:.7}
.foot__m b{font-size:17px;letter-spacing:-.015em}

/* ---------------------------------------------------------- 7. Le pied de page */
.colo{border-top:var(--rule) solid var(--ink);display:grid;grid-template-columns:1fr 1.6fr;gap:1px;background:var(--hair)}
.soc{display:flex;gap:14px;margin-top:6px}
.soc__a{display:inline-flex;color:var(--ink);transition:opacity .2s}
.soc__a--off{opacity:.35}
.ico{fill:none;stroke:currentColor;stroke-width:1.1;stroke-linejoin:round;stroke-linecap:round;overflow:visible}
.ico .bx{fill:var(--paper);transition:fill .25s var(--ease)}
.ico .gl{transition:stroke .25s var(--ease),fill .25s var(--ease)}
.ico .dot{fill:currentColor;stroke:none;transition:fill .25s var(--ease)}
a.soc__a:hover .bx{fill:var(--ink)}
a.soc__a:hover .gl{stroke:var(--paper)}
a.soc__a:hover .dot{fill:var(--paper)}
a.soc__a:hover .ico path.gl{fill:var(--paper)}
.colo>div{background:var(--paper);padding:var(--s5) var(--gut) 28px;display:flex;flex-direction:column;gap:7px;
 font-weight:400;font-size:13px;line-height:1.6}
.colo b{font-weight:700;font-size:15px;margin-bottom:4px}
.colo a:hover{text-decoration:underline;text-underline-offset:3px}
.colo__b{border-top:1px solid var(--hair);padding:10px var(--gut);display:grid;grid-template-columns:auto auto auto auto;justify-content:space-between;align-items:center;gap:16px;
 font-weight:400;font-size:var(--t5);white-space:nowrap}
.colo__b>span,.colo__b>a:not(.lsw){opacity:.7}
.colo__b a:hover{text-decoration:underline;text-underline-offset:3px}

/* ------------------------------------------------------- 7b. Ecrire, s'abonner */
.ask-form{border:var(--rule) solid var(--ink);border-top:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair)}
.fld{background:var(--paper);display:flex;flex-direction:column;gap:8px;padding:14px 12px 12px;min-width:0}
.fld--full{grid-column:1/-1}
.fld input,.fld select,.fld textarea{font:inherit;font-weight:400;font-size:15px;color:var(--ink);background:var(--paper);border:0;border-bottom:1px solid var(--hair);
 padding:6px 0 8px;border-radius:0;outline:0;width:100%;-webkit-appearance:none;appearance:none;transition:border-color .2s}
.fld select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
 background-position:calc(100% - 12px) 12px,calc(100% - 7px) 12px;background-size:5px 5px;background-repeat:no-repeat;padding-right:24px;cursor:pointer}
.fld textarea{resize:vertical;min-height:120px;line-height:1.6}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-bottom-color:var(--ink)}
.ask-form__b{background:var(--paper);padding:14px 12px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--ink);border-radius:0;padding:10px 22px 11px;background:var(--paper);
 font-family:var(--serif);font-style:italic;font-weight:400;font-size:16px;line-height:1.2;transition:background-color .2s,color .2s}
.btn:hover,.btn:focus-visible{background:var(--ink);color:var(--paper)}
.btn:hover .env__f{opacity:0}
.btn:hover .env__o{opacity:1}
.btn:hover .env__b{fill-opacity:0}
.cmail{padding:0 0 44px;display:flex;flex-direction:column;gap:8px}
.cmail .mail{font-weight:700;font-size:clamp(26px,4.6vw,72px);letter-spacing:-.04em;line-height:1;word-break:break-word}
.cmail .mail.ph,.cmail .mail .ph{font-size:16px}
.oform{display:grid;grid-template-columns:1fr 1fr;gap:22px 32px;max-width:720px}
.oform .fld{padding:0;gap:10px}
.oform .fld .mi{opacity:.85}
.oform .fld input,.oform .fld select,.oform .fld textarea{border-bottom:1px solid var(--ink);padding:12px 0 12px;font-size:16px}
.oform .fld input::placeholder,.oform .fld textarea::placeholder{color:var(--ink);opacity:.35;font-style:italic}
.oform .fld input:focus,.oform .fld select:focus,.oform .fld textarea:focus{border-bottom-width:2px;padding-bottom:11px}
/* le message : une ligne, le texte sur le filet comme les autres champs, la boite grandit en ecrivant */
.oform .fld textarea{min-height:0;height:auto;resize:none;overflow:hidden;field-sizing:content}
.oform__b{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.slist--soc li{font-size:18px;letter-spacing:-.01em;padding:10px 0}
.slist--soc a:hover{text-decoration:underline;text-underline-offset:3px}
.nl{border:var(--rule) solid var(--ink);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1px;background:var(--hair)}
.thead+.nl{border-top:0}
.nl__t{background:var(--paper);padding:28px 20px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.nl__t .big{font-size:clamp(24px,3vw,40px);margin:0}
.nl__t p:not(.big){font-weight:400;font-size:14px;line-height:1.7;max-width:46ch}
.nl__f{background:var(--paper);padding:20px;display:flex;flex-direction:column;gap:16px;justify-content:center}
.nl__f .fld{padding:0}
.nl__f .btn{align-self:flex-start}

/* ------------------------------------------------------- 8. Le studio, le contact */
.duo{display:grid;grid-template-columns:1fr 1fr;border:var(--rule) solid var(--ink);background:var(--paper)}
.thead+.duo{border-top:0}
.duo+.duo{border-top:0}
.duo>*+*{border-left:1px solid var(--hair)}
.duo__im{position:relative;background:var(--c,#eceae4);overflow:hidden;display:flex;align-items:center;justify-content:center;
 padding:8.5%;aspect-ratio:1.42;min-height:262px}
.duo__im img{max-width:100%;max-height:100%;width:auto;height:auto;box-shadow:0 8px 22px rgba(0,0,0,.2)}
.duo__im figcaption{position:absolute;left:0;bottom:0;background:var(--paper);border-top:1px solid var(--hair);border-right:1px solid var(--hair);
 padding:4px 7px 3px;font-weight:400;font-size:var(--t6);letter-spacing:.16em;text-transform:uppercase}
.duo__t{padding:22px 20px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.duo__t h2{font-size:var(--t3);letter-spacing:-.02em;line-height:1.15}
.duo__t{padding:clamp(22px,2.4vw,40px) clamp(20px,2.4vw,40px)}
.duo__t p{font-weight:400;font-size:clamp(16px,1.2vw + 5px,22px);line-height:1.55;letter-spacing:-.005em;text-wrap:pretty}
.duo__t .def{font-weight:700;font-size:clamp(18px,1.8vw,24px);line-height:1.3;letter-spacing:-.02em;max-width:30ch}
.duo__t .def .ph{font-weight:400}
.lines{display:flex;flex-direction:column;border-top:1px solid var(--hair);margin-top:4px}
.lines li{padding:10px 0;border-bottom:1px solid var(--hair);font-size:clamp(14px,.6vw + 8px,17px);line-height:1.45;font-weight:400;display:grid;grid-template-columns:minmax(120px,1fr) 2.4fr;gap:4px 16px}
.lines li b{font-weight:700}
.cells{border-top:var(--rule) solid var(--ink)}
.thead+.cells{border-top:0;border-left:var(--rule) solid var(--ink);border-right:var(--rule) solid var(--ink);border-bottom:var(--rule) solid var(--ink)}
.cell{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-top:1px solid var(--hair);padding:12px}
.thead+.cells .cell:first-child{border-top:0}
.cells:not(.thead+.cells) .cell{border:1px solid var(--hair);border-top:0}
.cell b{font-weight:400;font-size:var(--t6);letter-spacing:.18em;text-transform:uppercase;opacity:.6;flex:0 0 auto}
.cell span{font-weight:400;font-size:14px;text-align:right;word-break:break-word}
.cell a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.cells--tight .cell{padding:10px 12px}
a.cell:hover{background:var(--ink);color:var(--paper)}
.blocs{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));background:var(--paper);
 border:var(--rule) solid var(--ink);border-right:0;border-bottom:0;box-shadow:inset -2px 0 0 var(--ink)}
.thead+.blocs{border-top:0}
.blocs::after{content:"";grid-column:1/-1;border-bottom:var(--rule) solid var(--ink);margin-right:-1px}
.bloc{background:var(--paper);padding:16px;min-height:150px;display:flex;flex-direction:column;gap:10px;
 border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.bloc h3{font-size:19px;letter-spacing:-.02em}
.bloc__m{font-weight:400;font-size:13px;line-height:1.8;display:flex;flex-direction:column}
.bloc__m a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;opacity:.75}
.bloc__m a:hover{opacity:1}
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));border:var(--rule) solid var(--ink);gap:1px;background:var(--hair)}
.thead+.team{border-top:0}
.team>div{background:var(--paper);padding:16px;min-height:110px;display:flex;flex-direction:column;gap:7px}
.team h3{font-size:19px;letter-spacing:-.02em}
.team .fn{font-weight:400;font-size:13px}
.callout{border:var(--rule) solid var(--ink);padding:var(--s6) var(--s4) 36px;display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}
.thead+.callout{border-top:0}
.callout--top{margin-bottom:26px}
.callout .big{font-size:var(--t2);margin:0}
.callout .mail{font-weight:700;font-size:clamp(20px,3.4vw,50px);letter-spacing:-.03em;line-height:1.1;word-break:break-word}
a.mail{text-decoration:underline;text-underline-offset:.14em;text-decoration-thickness:2px}
a.mail:hover{opacity:.6}
.callout .mail.ph,.callout .mail .ph{font-size:16px}
.void{border:var(--rule) solid var(--ink);border-top:0;padding:18px 12px;font-weight:400;font-size:14px;line-height:1.6}
.rubs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.rub[disabled]{opacity:.35;cursor:default}
.sheet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:1px;background:var(--hair);border:var(--rule) solid var(--ink)}
.sheet>*{background:var(--paper)}
.sheet .cells{border:0}
.sheet__t{padding:16px;font-weight:400;font-size:14px;line-height:1.7}

/* ------------------------------------------------------ 8b. Le studio, feuille ouverte */
.sheetp{padding:0 var(--gut)}
.sheetp__h{padding:34px 0 26px}
.halves{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:start;padding:0 0 var(--s7)}
.halves__im{background:var(--c,#eee);aspect-ratio:1.15;display:flex;align-items:center;justify-content:center;padding:9%}
.halves__im img{max-width:100%;max-height:100%;width:auto;height:auto;box-shadow:0 18px 44px rgba(0,0,0,.22)}
.halves__t{display:flex;flex-direction:column;gap:18px;max-width:600px;justify-self:start;padding:6px var(--gut) 0 0}
.halves__t .def{font-weight:700;font-size:clamp(26px,2.8vw,40px);line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.halves__p{font-weight:400;font-size:17px;line-height:1.65;max-width:52ch;text-wrap:pretty}
.halves__t .def .ph{font-weight:400}
.srow{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--s6);padding:44px 0;border-top:1px solid var(--hair)}
.srow--last{border-bottom:1px solid var(--hair);margin-bottom:var(--s7)}
.srow>.mi{padding-top:6px}
.srow p{font-weight:400;font-size:16px;line-height:1.7;max-width:62ch}
.srow p+p{margin-top:10px}
.srow p .ln{display:block}
@media (min-width:761px){.nl__t p:not(.big){white-space:nowrap}}
.cli+.cli{margin-top:28px}
.cli .mi{display:block;margin-bottom:12px}
.cli__l{columns:4 170px;column-gap:32px}
.cli__l li{font-weight:400;font-size:16px;line-height:1.35;padding:6px 0;border-top:1px solid var(--hair);break-inside:avoid}
.studio .srow p{font-size:clamp(16px,.5vw + 10px,19px);line-height:1.55;max-width:none}
.slist{display:flex;flex-direction:column}
.slist li{font-size:clamp(20px,2vw,28px);letter-spacing:-.025em;line-height:1.2;padding:14px 0;border-top:1px solid var(--hair2)}
.slist li:first-child{border-top:0;padding-top:0}
.slist.slist--dir{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;border-top:0}
.slist--dir li{display:flex;flex-direction:column;gap:10px;border-bottom:0;border-top:1px solid var(--ink);padding:16px 0 0}
.slist--dir li:first-child{border-top:1px solid var(--ink);padding-top:16px}
.une__ph[hidden]{display:none}
.slist--dir span{font-weight:400;font-size:clamp(15px,.8vw + 8px,18px);letter-spacing:0;line-height:1.5;opacity:.8}
.slist--dir a:hover{text-decoration:underline;text-underline-offset:3px}
.slist--team li{display:flex;flex-direction:column;gap:4px}
.slist--team span{font-weight:400;font-size:15px;letter-spacing:0}
.slist--team a:hover{text-decoration:underline;text-underline-offset:3px}

/* ------------------------------------------------------- 9. La fiche artiste */
.trio{margin:0 var(--gut);border:var(--rule) solid var(--ink);border-top:0;background:var(--hair);
 display:grid;grid-template-columns:repeat(3,1fr);gap:1px}
.flat{display:flex;align-items:center;justify-content:center;padding:6%;aspect-ratio:1;overflow:hidden;background:var(--paper)}
.trio--l .flat{aspect-ratio:4/3}
.flat img{max-width:100%;max-height:100%;width:auto;height:auto;box-shadow:0 18px 44px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.1);
 transition:transform .6s var(--ease)}
.flat:hover img{transform:scale(1.025)}
.aname{padding:44px var(--gut) 18px;text-align:center}
.aname h1{font-size:var(--t1);letter-spacing:-.045em;line-height:.9;text-wrap:balance}
.aname .mi{display:block;margin-top:14px}
.bio{border:var(--rule) solid var(--ink);display:grid;grid-template-columns:minmax(160px,1fr) minmax(0,2.6fr) minmax(160px,1fr);gap:1px;background:var(--hair)}
.bio>div{background:var(--paper);padding:18px 16px;font-weight:400;font-size:14px;line-height:1.7;display:flex;flex-direction:column;gap:8px}
.bio__t{justify-content:center}
.bio__t p{font-size:clamp(15px,.55vw + 9px,18px);line-height:1.6;letter-spacing:-.005em;text-wrap:pretty}
.bio__ph{width:min(100%,180px);height:auto;aspect-ratio:1;object-fit:cover;margin-bottom:6px}
.bio__r{align-items:flex-end;text-align:right}
.bio__r a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.bio__r a:hover{opacity:.6}
.dem{border:var(--rule) solid var(--ink);border-top:0;padding:18px 14px;display:flex;justify-content:center}
.dem a,.ask a{display:inline-flex;align-items:baseline;gap:9px;border:1px solid var(--ink);border-radius:0;padding:10px 22px 11px;
 background:var(--paper);font-family:var(--serif);font-style:italic;font-weight:400;font-size:16px;line-height:1.2;
 transition:background-color .2s,color .2s}
.dem a:hover,.dem a:focus-visible,.ask a:hover{background:var(--ink);color:var(--paper)}
.dem a,.ask a{align-items:center}
.env{flex:0 0 auto;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linejoin:round;stroke-linecap:round;margin-left:2px}
.env__o{opacity:0;fill:currentColor;transition:opacity .25s var(--ease)}
.env__s{fill:currentColor;stroke:none;transition:transform .3s var(--ease);transform-box:fill-box;transform-origin:center}
.env__f{transition:opacity .25s var(--ease)}
.env__b{fill:var(--c);fill-opacity:.18;transition:fill-opacity .25s}
.dem a:hover .env__f,.ask a:hover .env__f{opacity:0}
.dem a:hover .env__o,.ask a:hover .env__o{opacity:1}
.dem a:hover .env__b,.ask a:hover .env__b{fill-opacity:0}
.dem a:hover .env__s,.ask a:hover .env__s,.btn:hover .env__s{transform:translateY(-3px)}
.ask{position:fixed;right:var(--gut);bottom:var(--gut);z-index:40;opacity:0;transform:translateY(10px);pointer-events:none;
 transition:opacity .3s var(--ease),transform .4s var(--ease)}
.ask.is-on{opacity:1;transform:none;pointer-events:auto}
.ask a{box-shadow:0 10px 30px rgba(0,0,0,.18)}
.mosaic{border:var(--rule) solid var(--ink);border-top:0;background:var(--hair);display:grid;gap:1px}
.mrow{display:flex;gap:1px}
.mrow .m{flex:var(--r,1) 1 0%;min-width:0;background:var(--paper);overflow:hidden}
.mrow img{width:100%;height:auto;transition:transform .6s var(--ease)}
.mrow .m:hover img{transform:scale(1.02)}
.m--pj{position:relative;display:block}
.m__cap{position:absolute;left:10px;bottom:10px;display:flex;flex-direction:column;gap:2px;background:var(--paper);padding:7px 10px 8px;max-width:calc(100% - 20px);box-shadow:0 0 0 1px var(--hair)}
.m__cap b{font-size:13px;letter-spacing:-.01em;line-height:1.25}
.m__cap .mi{font-size:9px}
/* a la souris, la legende n'apparait qu'au survol ; au doigt elle reste, sinon le lien serait invisible */
@media (hover:hover){.m__cap{opacity:0;transform:translateY(6px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
 .m--pj:hover .m__cap,.m--pj:focus-visible .m__cap{opacity:1;transform:none}}
.m--pj:hover .m__cap b{text-decoration:underline;text-underline-offset:3px}

/* ------------------------------------------------------- 9b. La page introuvable */
.lost{position:relative;height:calc(100dvh - var(--chrome));min-height:560px;overflow:hidden;background:var(--c);color:var(--fg);
 border-bottom:var(--rule) solid var(--ink);transition:background .6s var(--ease);cursor:default}
.lost__t{position:absolute;left:var(--gut);bottom:var(--s5);z-index:30;max-width:min(52ch,70%);display:flex;flex-direction:column;gap:10px;
 pointer-events:none}
.lost__t>*{pointer-events:auto}
.lost__t h1{font-size:clamp(34px,5.4vw,76px);letter-spacing:-.04em;line-height:.94}
.lost__t p{font-weight:400;font-size:14px;line-height:1.6;opacity:.85}
.lost__t .go{border-bottom-color:currentColor;width:max-content}
.lost__deck{position:absolute;inset:0}
.lcard{position:absolute;left:0;top:0;width:var(--w,170px);aspect-ratio:3/4;border-radius:12px 12px 0 0;overflow:hidden;background:var(--c,#eee);
 box-shadow:-10px 0 24px -10px rgba(0,0,0,.45),0 24px 50px rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.2);
 transform:translate3d(var(--x,0),var(--y,0),0) rotate(var(--r,0deg));
 transition:transform .9s var(--ease),box-shadow .3s;will-change:transform;z-index:var(--z,1)}
.lcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lcard__n{position:absolute;left:0;top:11px;z-index:3;min-width:27px;padding:4px 6px 3px;background:var(--paper);color:var(--ink);
 border-right:1px solid var(--hair);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);border-radius:0 4px 4px 0;
 font-size:10px;letter-spacing:.1em;font-weight:400}
.lcard::after{content:"";position:absolute;inset:0;background:var(--paper);opacity:.14;transition:opacity .4s var(--ease)}
.lcard:hover,.lcard:focus-visible{transform:translate3d(var(--x,0),var(--y,0),0) rotate(0deg) scale(1.06);z-index:40;
 box-shadow:-10px 0 24px -10px rgba(0,0,0,.45),0 34px 70px rgba(0,0,0,.34),0 0 0 1px rgba(0,0,0,.2)}
.lcard:hover::after,.lcard:focus-visible::after{opacity:0}
.lost.is-live .lcard{animation:drift 7s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
@keyframes drift{from{margin-top:0}to{margin-top:-14px}}
.lost.is-thrown .lcard{transition-duration:1.3s}
.lcard{touch-action:none;user-select:none;-webkit-user-drag:none;cursor:grab}
.lcard img{pointer-events:none}
.lcard.is-drag{transition:none;animation:none!important;cursor:grabbing;z-index:60;
 transform:translate3d(var(--x,0),var(--y,0),0) rotate(var(--r,0deg)) scale(1.06)}

/* ------------------------------------------------------- 8c. Les projets, la grille */
/* modele Kiblind : deux colonnes de grands visuels, le titre en gras puis les rubriques a la suite ;
   le squelette met un aplat a la place du visuel */
.rubs--f{margin:26px 0 30px}
.rubs--f .rub[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:56px 44px;padding-bottom:20px}
.pj{display:block;min-width:0}
.pj[hidden]{display:none}
.pj__im{display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;padding:6%;background:var(--c,#eee);overflow:hidden}
.pj__im img{max-width:100%;max-height:100%;width:auto;height:auto;box-shadow:0 18px 44px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.1);transition:transform .6s var(--ease)}
.pj:hover .pj__im img{transform:scale(1.025)}
.pj__t{display:block;margin-top:14px;font-weight:400;font-size:17px;line-height:1.45;letter-spacing:-.01em;text-wrap:pretty}
.pj__t b{font-weight:700}
h1.big,.sheetp__h h1,.callout .big{text-wrap:balance}
.nw{white-space:nowrap}
.colo div>span,.colo div>a{display:block;font-weight:400;font-size:14px;line-height:1.6}
@media (max-width:760px){
 .thead>span:not(.c):not(.sort){display:none}
 .thead{flex-wrap:nowrap}
 #bar .bar__n a{padding:12px 0}
 .lsw{min-height:40px;align-items:center}
 .rub{padding:11px 12px 10px}
 .go{padding:10px 0}
 .sort button{padding:10px 4px}
 .callout .mail{display:inline-block;padding:8px 0}
}
.pgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pbig{margin-bottom:18px}
.projet .sheet{margin-bottom:28px}
.projet .sheet__t p{font-weight:400;font-size:clamp(16px,1.2vw + 5px,22px);line-height:1.55;max-width:none;text-wrap:pretty}
.projet .sheet__t p.mi{font-size:11px;margin-top:10px}
.projet .mosaic{border-top:var(--rule) solid var(--ink);background:var(--paper)}
.projet .mrow{margin:0 auto;width:100%;gap:1px;background:var(--hair)}
.projet .mrow+.mrow{border-top:1px solid var(--hair)}
.pback{margin-top:8px}
.pfilm{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:14px}
.cell a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.pj__s,.pj__t .mi{display:block}
.pj__t .mi{margin-top:6px}
.pj:hover .pj__t b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
/* page Artistes : la bande des noms descend jusqu'au filet noir du roster, sans blanc entre les deux */
.roster .deck--page .caps{height:86px}
.roster #roster{padding-top:0}
/* la loupe : une piece pressee s'ouvre en grand sur l'aplat de son artiste ; la croix, blanche,
   vit dans la bande du haut, jamais sur l'image ; clic a cote ou Echap pour fermer */
[data-zoom]{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:100;background:var(--c,#0d0d0d);padding:76px 6vw 40px;
 display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s var(--ease);cursor:zoom-out}
.lb[hidden]{display:none}
.lb.is-on{opacity:1}
.lb__f{max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center;margin:0}
.lb__f{overflow:hidden}
.lb__f img{max-width:100%;max-height:calc(100dvh - 116px);width:auto;height:auto;cursor:zoom-in;touch-action:none;transition:transform .25s var(--ease)}
.lb__f img.is-z{cursor:zoom-out;transition:transform .08s linear}
.lb__f img{
 box-shadow:0 30px 80px rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.12)}
.lb__x{position:absolute;top:16px;right:16px;width:44px;height:44px;background:var(--c,#0d0d0d);color:var(--lbfg,#fff);
 border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .2s}
.lb__x svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.lb__x:hover,.lb__x:focus-visible{opacity:.6}
/* les deux pages legales dans le pied, et les conditions en feuille ouverte */
.srow p+.slist{margin-top:22px}
.terms .srow{padding:36px 0}
.terms .srow p{max-width:70ch}
.terms .srow p+p{margin-top:12px}
.terms .srow a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* --------------------------------------------------------------- 10. Ecrans */
@media(max-width:1100px){
 :root{--gut:18px}
 .tiles{grid-template-columns:repeat(3,1fr)}
 .deckrow{grid-template-columns:minmax(0,1fr) 260px}
 .une__a{grid-template-columns:1fr}
}
@media(max-width:860px){
 .duo{grid-template-columns:1fr}
 .lines li{grid-template-columns:1fr}
 .duo>*+*{border-left:0;border-top:1px solid var(--hair)}
 .duo--r .duo__im{order:-1}
 .duo__im{aspect-ratio:1.6;min-height:0;padding:7%}
 .bio{grid-template-columns:1fr}
 .bio__r{align-items:flex-start;text-align:left}
 .une,.une__a{grid-template-columns:1fr}
 .halves{grid-template-columns:1fr;gap:var(--s5)}
 .halves__im{aspect-ratio:1.4}
 .srow{grid-template-columns:1fr;gap:14px;padding:30px 0}
 .sheet{grid-template-columns:1fr}
 .deckrow{grid-template-columns:1fr}
 .slist.slist--dir{grid-template-columns:1fr;gap:18px}
 .names--col{border-left:0;border-top:1px solid var(--hair);grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;gap:1px;background:var(--hair)}
}
@media(max-width:760px){
 :root{--gut:14px;--chrome:96px;--t6:11.5px}
 body{font-size:14px}
 /* au doigt : 44 px de haut pour tout ce qui se touche, 11,5 px minimum pour ce qui se lit */
 .bar__w{padding:6px 0}
 .go{padding:12px 0 10px;margin-top:2px}
 .colo a{padding:5px 0}
 .colo>div{padding:18px var(--gut) 20px;gap:4px}
 /* les quatre sur une seule ligne, meme au telephone : le texte se resserre */
 .colo__b{grid-template-columns:auto auto auto auto;gap:8px;padding:12px var(--gut);white-space:nowrap;font-size:clamp(8.5px,2.4vw,12px)}
 .colo__b a,.colo__b span{padding:8px 0}
 .colo__b .lsw{font-size:8px}
 .colo__b .lsw__o{padding:5px 6px 4px;min-width:24px}
 .colo__b a,.colo__b span{padding:11px 0}
 .colo__b .lsw{padding:0}
 .pgrid{grid-template-columns:1fr;gap:34px}
 .lb{padding:72px 12px 24px}
 .lb__x{top:14px;right:14px}
 .roster #roster{padding-top:22px}
 .pj__t{font-size:16px}
 .slist--team a{padding:8px 0 4px}
 .names--col .nm{padding:13px 10px 13px 12px;min-height:44px}
 .names--col .nm .mi:empty{display:none}
 .rub{padding:10px 12px 9px}
 .fld input,.fld select,.fld textarea{padding:12px 0;font-size:16px}
 .sort{gap:14px}
 .sort button{padding:10px 4px}
 .hero__a{padding:10px 0 6px}
 .bio__r a,.slist--team a,.slist--soc a{display:inline-block;padding:6px 0}
 .lead{font-size:15px}
 .wk__c b{font-size:16px}
 .cap__t{font-size:15px}
 /* le menu, comme a l'ecran : le mot-marque, les cinq mots dessous, le trait sous l'entree en cours */
 .bar{flex-wrap:wrap;padding:12px var(--gut) 10px;gap:4px 0}
 .bar__w{padding-bottom:4px}
 .bar__n{flex:1 0 100%;display:flex;justify-content:space-between;gap:8px;margin:0;background:transparent;border-top:0}
 .bar__n a{padding:8px 0 6px;font-size:12.5px;letter-spacing:.04em;opacity:.55;background:transparent;color:inherit}
 .bar__n a.on{opacity:1}
 .bar__u{bottom:4px}
 .home .bar{position:sticky;background:var(--paper);border-bottom-color:var(--ink);color:var(--ink)}
 .home .hero{height:calc(100dvh - var(--chrome))}
 .home .hero__f{padding:3vh 7vw 3vh}
 /* le jeu : la carte ouverte en grand, les autres en lamelles, le nom sur la carte */
 .deck--home,.deck--page{min-height:0;flex:none}
 .caps{display:none}
 .card.is-open .card__t{display:block;position:absolute;left:0;bottom:0;z-index:3;background:var(--paper);color:var(--ink);padding:9px 11px 8px;
  font-size:14px;letter-spacing:-.01em;border-top:1px solid var(--hair);border-right:1px solid var(--hair)}
 .deckrow{border-bottom:0}
 /* accueil : le bloc Les artistes sans cadre noir au telephone */
 .wrap--deck .thead{border:0}
 .wrap--deck .deckrow{border:0}
 .hero{min-height:0}
 .hero__f{padding:calc(var(--chrome) + 3vh) 7vw 3vh}
 .hero__b{flex-direction:column;align-items:flex-start;gap:18px;padding-bottom:40px}
 .hero__t{max-width:100%}
 .hero__t h1{font-size:clamp(28px,8vw,40px)}
 .hero__a{text-align:left;flex-direction:row;gap:10px;align-items:baseline}
 .work__r{grid-template-columns:1fr}
 .wk__im{aspect-ratio:4/3}
 .une__w{grid-template-columns:repeat(3,1fr)}
 .deck--page{height:calc(100dvh - var(--chrome) - 120px);min-height:360px}
 .deck--home{height:min(56vh,520px);min-height:340px;flex:none}
 .caps{height:56px}
 .cap__go{display:none}
 /* les treize noms sur deux colonnes, sept rangees ; le treizieme prend toute la largeur */
 .names--col{grid-template-columns:repeat(2,1fr)}
 .names--col .nm:last-child:nth-child(odd){grid-column:1/-1}
 .tiles{grid-template-columns:repeat(2,1fr)}
 .colo{grid-template-columns:1fr}
 .foot{grid-template-columns:1fr}
 .foot__s,.foot__m{min-height:0;padding:12px var(--gut);border-left:0}
 .foot__s--r{justify-content:flex-start;text-align:left;border-top:1px solid var(--hair)}
 .foot__s--r .foot__w{align-items:flex-start}
 .foot__s--l{border-right:0;border-bottom:1px solid var(--hair)}
 .foot__m{align-items:flex-start;text-align:left;padding:14px var(--gut)}
 .names--col{grid-template-rows:none;height:auto}
 .lost{min-height:0}
 .lost__t{max-width:calc(100% - 2*var(--gut));bottom:var(--s4)}
 .lcard{--w:104px}
 .trio{grid-template-columns:1fr}
 .trio .flat:nth-child(n+2){display:none}
 .flat{aspect-ratio:1.1;padding:7%}
 .aname{padding:30px var(--gut) 12px}
 .aname h1{font-size:clamp(40px,12vw,72px)}
 .mosaic{display:grid;grid-template-columns:1fr}
 .mrow{display:contents}
 .mrow .m{flex:none;width:100%}
 .ask{right:var(--gut);bottom:var(--gut);left:var(--gut)}
 .ask a{width:100%;justify-content:center;padding:13px 22px 14px;min-height:44px}
 .cell{flex-direction:column;align-items:flex-start;gap:4px}
 .cell span{text-align:left}
 .ask-form,.nl,.oform{grid-template-columns:1fr}
 .srow>.mi{font-size:13px;font-weight:700;opacity:1;letter-spacing:.16em;padding-top:0}
 .oform{gap:20px}
 .oform__b .btn{width:100%;justify-content:center;min-height:50px;font-size:18px}
}
@media(max-width:420px){
 .big{font-size:clamp(28px,9vw,44px)}
 .tiles{grid-template-columns:1fr 1fr}
 .names:not(.names--col){grid-template-columns:1fr}
 .bar__w{font-size:16px}
}
@media(max-width:374px){
 /* sous 375 px les deux colonnes couperaient Clement Soulmagnon : une seule colonne */
 .names--col{grid-template-columns:1fr}
 .names--col .nm:last-child:nth-child(odd){grid-column:auto}
}
@media(prefers-reduced-motion:reduce){
 *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
 .rv{opacity:1;transform:none}
 html{scroll-behavior:auto}
}