/* ==================================================================
   Fouad Bouddine — artiste peintre plasticien
   ================================================================== */
:root{
  --bg:#f2efe8; --bg-alt:#e9e5db; --blanc:#fff; --ink:#1c1a16;
  --ink-2:rgba(28,26,22,.64); --ink-3:rgba(28,26,22,.42);
  --line:rgba(28,26,22,.15); --accent:#8a5a2b; --rouge:#c8321e;
  --bleu:#1f3bbf;
  --serif:ui-serif,'Iowan Old Style','Palatino Linotype',Georgia,'Times New Roman',serif;
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --pad:clamp(18px,5vw,72px);
  --hh:62px;              /* hauteur de l'en-tête */
  --mur:420;              /* largeur du « mur » virtuel, en cm */
  color-scheme:light;
}
@media (max-width:760px){ :root{ --hh:52px; --mur:190; --pad:16px } }
@media (max-width:420px){ :root{ --mur:150 } }

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--ink);font-family:var(--serif);font-size:17px;
  line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-weight:400;letter-spacing:-.015em}

/* ---------- en-tête : menu à gauche, signature à droite ---------- */
.masthead{position:sticky;top:0;z-index:30;min-height:var(--hh);
  padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:rgba(242,239,232,.92);backdrop-filter:blur(12px) saturate(1.3);
  border-bottom:1px solid transparent;transition:border-color .3s}
.masthead.solid{border-bottom-color:var(--line)}
.masthead .marque{line-height:0;flex:none}
.marque-zone{display:flex;align-items:center;gap:clamp(8px,1.6vw,20px);flex:none}
.lang{font-family:var(--sans);font-size:10px;letter-spacing:.1em;font-weight:600;
  background:none;border:1px solid var(--line);border-radius:99px;padding:5px 9px;
  color:var(--ink-3);cursor:pointer;line-height:1;transition:.25s}
.lang:hover{color:var(--ink);border-color:var(--ink)}
.sig{display:block;height:auto;width:auto}
.sig-mark{height:clamp(19px,3vw,34px)}
.menu-nav{display:flex;gap:clamp(11px,2.6vw,32px);align-items:center;min-width:0}
.menu{font-family:var(--sans);font-size:clamp(9.5px,2.4vw,11.5px);letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;color:var(--ink-3);line-height:1;
  white-space:nowrap;padding:6px 0;border-bottom:1px solid transparent;transition:.25s}
.menu:hover{color:var(--ink)}
.menu.on{color:var(--ink);border-bottom-color:var(--ink)}

.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:40;pointer-events:none}
.progress i{display:block;height:100%;background:var(--accent);transform:scaleX(0);
  transform-origin:0 50%}

/* ---------- accueil ----------
   Téléphone : la pièce occupe les trois quarts du haut de l'écran, puis
   s'en va avec la page — la lecture démarre tout de suite, et le tour
   complet se joue pendant qu'elle est encore visible.
   Grand écran : elle tient sa propre colonne à droite, épinglée, et
   tourne au fil de la descente. Elle ne recouvre jamais le texte. */
.split{display:grid;grid-template-columns:minmax(0,1fr)}
.split-art{position:static;height:74svh;z-index:1;
  display:flex;align-items:center;justify-content:center}
.split-main{position:relative;z-index:2;background:var(--bg)}
#relief{width:100%;height:100%;display:block}
.no-webgl .split-art{display:none}
@media (min-width:960px){
  .split{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:start}
  .split-art{order:2;position:sticky;top:var(--hh);height:calc(100vh - var(--hh))}
  .split-main{order:1;background:transparent}
}

section{padding:clamp(48px,7vh,96px) var(--pad)}
.hero{min-height:min(72svh,720px);display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(18px,4vh,50px)}
.hero-sig{line-height:0;margin-bottom:clamp(22px,3.5vh,40px)}
.hero-sig .sig{width:min(500px,88%)}
.eyebrow{font-family:var(--sans);font-size:10.5px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink-3)}
.hero .eyebrow{margin-bottom:16px}
.hero .intro{max-width:44ch;font-size:clamp(15.5px,1.5vw,19px);line-height:1.7;color:var(--ink-2)}
.hero .intro + .intro{margin-top:14px}

h2{font-size:clamp(25px,3.5vw,44px);line-height:1.06}
.rule{height:1px;background:var(--line);margin-bottom:24px}
.lead{max-width:58ch;margin-top:18px;font-size:clamp(15px,1.4vw,18px);
  line-height:1.7;color:var(--ink-2)}
.sub-h{margin-top:38px;font-size:20px}

[data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none}}

/* ---------- pastille « cœur » (accueil) ----------
   Sous la barre, alignée à droite, dans le fil de la page : elle s'en va
   au défilement, la barre du haut reste. */
.aime-zone{display:flex;justify-content:flex-end;padding:9px var(--pad) 0}
.aime{display:inline-flex;align-items:center;gap:6px;background:none;border:0;
  padding:4px 2px;cursor:pointer;color:var(--ink-3);font-family:var(--sans);
  position:relative;transition:color .25s;-webkit-tap-highlight-color:transparent}
.aime:hover{color:var(--ink-2)}
.aime:focus-visible{outline:1px solid var(--ink-3);outline-offset:3px}
.aime svg{width:14px;height:14px;overflow:visible;
  transition:transform .28s cubic-bezier(.3,1.6,.4,1)}
.aime svg path{fill:none;stroke:currentColor;stroke-width:1.5;
  transition:fill .3s,stroke .3s}
.aime .n{font-size:11.5px;letter-spacing:.07em;font-variant-numeric:tabular-nums}
.aime.on{color:var(--rouge)}
.aime.on svg path{fill:var(--rouge);stroke:var(--rouge)}
.aime.bat svg{transform:scale(1.5)}
.aime .plus{position:absolute;right:-4px;top:-3px;font-size:10.5px;font-weight:600;
  color:var(--rouge);opacity:0;pointer-events:none}
.aime .plus.vole{animation:coeur-vole .95s ease-out}
@keyframes coeur-vole{
  0%{opacity:0;transform:translateY(2px) scale(.8)}
  18%{opacity:1;transform:translateY(-6px) scale(1)}
  100%{opacity:0;transform:translateY(-26px) scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .aime svg{transition:none}
  .aime.bat svg{transform:none}
  .aime .plus.vole{animation:none}
}

/* ---------- aller en bas, revenir en haut ----------
   Un gris moyen translucide, cerné d'un liseré clair et d'une ombre
   sombre : les deux se relaient selon le fond, si bien que le bouton se
   voit sur le papier beige, sur le blanc du catalogue comme sur une
   collection à fond noir. Il reste en bas à droite, sous les flèches de
   collection de l'espace privé, jamais par-dessus. */
/* Le gris (112) et l'opacité (0,65) ne sont pas choisis à l'œil : ce sont
   les valeurs qui gardent au moins 2,3 de contraste avec le fond dans les
   trois cas — blanc, beige, noir — tout en laissant le bouton translucide.
   Plus transparent, il s'efface sur le beige ; plus opaque, il n'est plus
   discret. */
.defil{position:fixed;right:10px;bottom:16px;z-index:36;width:40px;height:40px;
  border-radius:50%;cursor:pointer;padding:0;
  background:rgba(112,112,112,.65);border:1px solid rgba(255,255,255,.38);
  backdrop-filter:blur(7px) saturate(1.1);
  box-shadow:0 1px 3px rgba(0,0,0,.3),0 0 0 .5px rgba(0,0,0,.24);
  transition:background .25s,transform .25s,opacity .25s;opacity:.9}
.defil:hover,.defil:focus-visible{opacity:1;background:rgba(96,96,96,.82)}
.defil:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:2px}
.defil:active{transform:scale(.94)}
.defil[hidden]{display:none}
.defil-fl{display:block;font-family:var(--sans);font-size:18px;line-height:38px;
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}
@media (max-width:760px){
  .defil{width:36px;height:36px;right:7px;bottom:12px}
  .defil-fl{font-size:16px;line-height:34px}
}
@media (prefers-reduced-motion:reduce){
  .defil{transition:none}
  .defil:active{transform:none}
}

/* ---------- liste des collections (accueil) ---------- */
.cols-list{margin-top:clamp(24px,3.5vw,40px);border-top:1px solid var(--line)}
.col-item{display:grid;gap:clamp(12px,2.4vw,32px);padding:clamp(18px,2.8vw,30px) 0;
  border-bottom:1px solid var(--line);text-decoration:none;align-items:start;
  grid-template-columns:1fr}
@media (min-width:560px){.col-item{grid-template-columns:140px minmax(0,1fr)}}
@media (min-width:960px){.col-item{grid-template-columns:165px minmax(0,1fr)}}
.col-item .vign{background:var(--blanc);overflow:hidden;aspect-ratio:4/3}
.col-item .vign img{width:100%;height:100%;object-fit:cover;
  transition:transform 1s cubic-bezier(.2,.7,.2,1)}
/* Photo détourée : aucun fond derrière elle, le papier du site passe au
   travers. Et « contain » plutôt que « cover » — on ne recadre pas une
   forme découpée, on la montre entière. */
.col-item .vign.alpha{background:none}
.col-item .vign.alpha img{object-fit:contain}
.col-item:hover .vign img{transform:scale(1.05)}
.col-item .num{font-family:var(--sans);font-size:11px;letter-spacing:.2em;color:var(--accent)}
.col-item h3{font-size:clamp(20px,2.6vw,30px);margin:7px 0 0;display:flex;
  flex-wrap:wrap;gap:12px;align-items:baseline}
.col-item h3 i{font-style:normal;font-size:.62em;opacity:.45}
.col-item p{margin-top:9px;font-size:15px;line-height:1.62;color:var(--ink-2);max-width:58ch}
.col-item .cnt{display:inline-block;margin-top:11px;font-family:var(--sans);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- distinction ---------- */
.medal{margin-top:24px;padding:clamp(18px,3vw,32px);background:var(--bg-alt);
  border-left:2px solid var(--accent);max-width:62ch}
.medal .eyebrow{color:var(--accent)}
.medal h3{margin-top:9px;font-size:clamp(18px,2.2vw,25px)}
.medal p{margin-top:11px;font-size:16px;line-height:1.68;color:var(--ink-2)}

.dated{margin-top:20px;max-width:820px}
.dated .row{display:grid;grid-template-columns:88px minmax(0,1fr);gap:10px 24px;
  padding:12px 0;border-top:1px solid var(--line)}
.dated .row:last-child{border-bottom:1px solid var(--line)}
.dated dt{font-family:var(--sans);font-size:11px;letter-spacing:.12em;color:var(--ink-3);padding-top:5px}
.dated dd{font-size:15.5px;line-height:1.5}
.dated dd small{display:block;font-family:var(--sans);font-size:12px;color:var(--ink-3);margin-top:3px}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;margin-top:24px;font-family:var(--sans);
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  padding:13px 22px;border:1px solid var(--ink);background:none;color:var(--ink);
  cursor:pointer;transition:background .25s,color .25s}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn.ghost{border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.sm{padding:8px 14px;font-size:10.5px;margin-top:0}

/* ==================================================================
   Catalogue
   ================================================================== */
/* page Collections : bandeau supérieur beige, mur des œuvres en blanc */
.page-collections{background:var(--blanc)}
.cat-wrap{background:var(--blanc)}
.cat-bandeau{background:var(--bg)}
.page-collections .masthead{background:rgba(242,239,232,.94)}
.page-collections .jump{background:var(--bg)}
.page-collections footer{background:var(--bg)}
.cat-head{padding:clamp(32px,6vh,72px) var(--pad) clamp(18px,3vw,30px)}
.cat-head h1{font-size:clamp(30px,5vw,62px);line-height:1.02;margin-top:12px}

/* barre de collections, figée sous l'en-tête */
.jump{position:sticky;top:var(--hh);z-index:20;display:flex;gap:6px;
  padding:10px var(--pad);overflow-x:auto;scrollbar-width:none;
  background:var(--bg);backdrop-filter:blur(12px) saturate(1.3);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.jump::-webkit-scrollbar{display:none}
/* EXPO : la barre des expositions, puis celle des collections concernées */
.page-expo{background:var(--blanc)}
.page-expo .masthead{background:rgba(242,239,232,.94)}
.page-expo .jump{background:var(--bg)}
.page-expo footer{background:var(--bg)}
.jump .etat-expo{font-style:normal;margin-left:7px;font-size:9px;letter-spacing:.14em;
  opacity:.55;text-transform:uppercase}
.jump2{top:calc(var(--hh) + var(--h-jump,58px));z-index:19;border-top:0}
.expo-ou{font-family:var(--sans);font-size:12px;letter-spacing:.1em;margin-top:10px;
  color:var(--ink-3);text-transform:uppercase}
/* exposition terminée : le reportage se lit de haut en bas, chaque
   photographie posée sur le fond de la page, avec de l'air autour. */
.expo-mur{background:var(--bg);padding:clamp(22px,4vw,52px) 0 clamp(40px,6vw,84px)}
/* On laisse davantage d'air de part et d'autre : la photo s'affiche plus
   petite, donc plus nette — surtout sur un écran à deux pixels pour un. */
.mur-item{margin:0 auto clamp(20px,3.4vw,40px);
  width:min(880px,calc(100% - 2 * var(--pad) - 6vw))}
@media (max-width:760px){
  .mur-item{width:calc(100% - 2 * var(--pad) - 2vw)}
}
.mur-item:last-child{margin-bottom:0}
.mur-item img,.mur-item video{width:100%;height:auto;display:block;background:var(--bg-alt)}
.mur-item img{opacity:0;transition:opacity .5s ease}
.mur-item img.ok{opacity:1}
@media (prefers-reduced-motion:reduce){.mur-item img{opacity:1}}
/* espace privé : une ligne par photo ou vidéo du reportage */
.media-ligne{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  padding:10px 0;border-bottom:1px solid var(--line)}
.media-ligne .rowbtns{margin-top:0}
.jump a{flex:none;font-family:var(--sans);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;padding:8px 14px;border-radius:99px;
  color:var(--ink-3);border:1px solid transparent;white-space:nowrap;transition:.25s}
.jump a b{font-weight:700;color:var(--accent);margin-right:2px}
.jump a:hover{color:var(--ink);border-color:var(--line)}
.jump a.on{color:var(--blanc);background:var(--ink);border-color:var(--ink)}
.jump a{transition:color .25s,background .25s,border-color .25s}
.jump a.on b{color:rgba(255,255,255,.6)}

.collection{padding:clamp(34px,5vh,64px) var(--pad);scroll-margin-top:calc(var(--hh) + 52px);
  background:var(--fond,#fff);color:var(--enc,#1c1a16)}
.collection.sombre{--trait:rgba(255,255,255,.22)}
.collection.sombre .col-head h2,
.collection.sombre .col-head .lead{color:var(--enc)}
.collection.sombre .col-head .num{color:var(--enc);opacity:.65}
.collection.sombre .dot{background:rgba(255,255,255,.28)}
.collection.sombre .dot.on{background:var(--enc)}
.col-head{max-width:66ch}
.col-head .num{font-family:var(--sans);font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--accent)}
.col-head h2{margin-top:10px;display:flex;flex-wrap:wrap;gap:14px;align-items:baseline}
.col-head h2 i{font-style:normal;font-size:.55em;opacity:.42}

/* --- le mur : chaque œuvre occupe sa largeur réelle en cm --- */
/* Le mur : la LARGEUR de chaque œuvre vient de ses centimètres réels.
   align-items:stretch donne à toutes les tuiles d'une rangée la même
   hauteur ; la photo se centre dans .media, la légende tombe en bas. */
.tiles{display:flex;flex-wrap:wrap;align-items:flex-start;
  gap:clamp(16px,2.4vw,38px);margin-top:clamp(26px,4vw,52px)}
.tile{margin:0;flex:none;display:flex;flex-direction:column;
  width:min(100%, calc(var(--w) * 100% / var(--mur)));
  min-width:70px}
.tile .media{display:flex;flex-direction:column;justify-content:center;align-items:stretch}
/* « flex:none » : la zone garde la hauteur que lui donnent ses centimètres.
   Les pastilles de navigation, placées sous elle, ne peuvent pas la
   comprimer — c'est ce qui donnait l'impression qu'une œuvre avec vidéo
   s'affichait plus petite qu'une autre de même dimension. */
.tile .shot{position:relative;width:100%;flex:none;background:var(--fond,#fff);
  overflow:hidden;cursor:zoom-in;outline:none}
.tile .shot:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* carrousel : les photos défilent horizontalement dans la zone de l'œuvre */
.tile .rail{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tile .rail::-webkit-scrollbar{display:none}
.tile .rail[data-solo]{overflow:hidden}
.tile .slide{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:center;
  display:flex;align-items:center;justify-content:center;background:var(--fond,#fff)}
/* La photo est montrée en entier dans la zone de l'œuvre : centrée, jamais
   étirée, jamais rognée. Si sa proportion diffère de celle des centimètres
   déclarés, il reste du fond de part et d'autre. Œuvre par œuvre, Fouad peut
   demander l'inverse depuis sa page perso — « rogne » — et l'image remplit
   alors le cadre, ses bords coupés. Le zoom, lui, montre toujours tout. */
.tile .slide img{width:100%;height:100%;object-fit:contain;object-position:center;
  user-select:none;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.tile .slide img.rogne,.tile .slide .film.rogne{object-fit:cover}
.tile:hover .slide img{transform:scale(1.02)}
.dots{display:flex;gap:6px;justify-content:center;margin-top:8px}
.dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(28,26,22,.22);transition:background .25s,transform .25s}
.dot:hover{background:rgba(28,26,22,.45)}
.dot.on{background:var(--ink);transform:scale(1.18)}

/* légende : texte à gauche, pastille de disponibilité à droite.
   Les couleurs suivent celles choisies pour la collection. */
.tile figcaption{margin-top:11px;padding-top:10px;
  border-top:1px solid var(--trait,rgba(28,26,22,.15));
  display:flex;align-items:flex-start;gap:10px}
.tile .cap-txt{flex:1;min-width:0;display:block;color:var(--enc,#1c1a16)}
.tile figcaption b{display:block;font-weight:400;font-size:16px;line-height:1.3;
  color:var(--enc,#1c1a16)}
.tile .cap-meta{display:block;margin-top:4px;font-family:var(--sans);font-size:11.5px;
  line-height:1.45;color:var(--enc,#1c1a16);opacity:.58}
/* référence et prix : une ligne de plus, plus discrète que la technique */
.tile .cap-tarif{display:block;margin-top:3px;font-family:var(--sans);font-size:9.5px;
  letter-spacing:.05em;line-height:1.4;color:var(--enc,#1c1a16);opacity:.48}
.pastille{flex:none;width:11px;height:11px;border-radius:50%;background:var(--rouge);
  display:inline-block;margin-top:6px}
.legende-dispo{display:flex;align-items:center;gap:9px;
  padding:0 var(--pad) clamp(34px,5vw,60px);font-family:var(--sans);font-size:11.5px;
  letter-spacing:.06em;color:var(--ink-3)}
.legende-dispo .pastille{margin-top:0}

/* ---------- visionneuse ---------- */
.viewer{position:fixed;inset:0;z-index:60;background:#fff;display:none;
  align-items:center;justify-content:center;padding:clamp(12px,4vw,52px)}
.viewer.open{display:flex}
/* pas de fond posé sur l'image : la visionneuse est déjà blanche, et une
   photo détourée doit s'y fondre au lieu de porter un rectangle blanc */
.viewer img{max-width:100%;max-height:82vh;object-fit:contain}
.viewer .vfilm{max-width:100%;max-height:82vh;object-fit:contain;background:#000;display:none}
.viewer .vcap{position:absolute;left:0;right:0;bottom:14px;text-align:center;color:var(--ink-2);
  font-family:var(--sans);font-size:12.5px;padding:0 20px}
.viewer button{position:absolute;background:none;border:0;color:var(--ink);cursor:pointer;
  font-size:30px;line-height:1;padding:14px;opacity:.55;transition:opacity .2s}
.viewer button:hover{opacity:1}
.viewer .vx{top:6px;right:8px;font-size:26px}
.viewer .vp{left:4px;top:50%;transform:translateY(-50%)}
.viewer .vn{right:4px;top:50%;transform:translateY(-50%)}

/* ==================================================================
   Page contact
   ================================================================== */
.contact-page{padding-bottom:clamp(40px,6vw,80px)}
.contact-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  margin:0 var(--pad);grid-template-columns:1fr}
@media (min-width:620px){.contact-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.contact-grid{grid-template-columns:repeat(3,1fr)}}
.cbloc{background:var(--bg);padding:clamp(20px,3vw,32px);text-decoration:none;
  display:flex;flex-direction:column;gap:7px;transition:background .25s}
a.cbloc:hover{background:var(--blanc)}
.cbloc .k{font-family:var(--sans);font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-3)}
.cbloc .v{font-size:clamp(17px,1.9vw,22px);line-height:1.3}
.cbloc .s{font-family:var(--sans);font-size:12.5px;color:var(--ink-3)}
.contact-page .btn{margin-left:var(--pad)}

/* ---------- pied de page ---------- */
footer{position:relative;z-index:3;background:var(--bg);border-top:1px solid var(--line);
  padding:clamp(40px,6vw,76px) var(--pad) 28px}
.foot-grid{display:grid;gap:28px}
@media (min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
footer h4{font-family:var(--sans);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:11px}
footer .big{font-size:clamp(19px,2.8vw,32px);line-height:1.2;text-decoration:none;
  border-bottom:1px solid var(--line);word-break:break-word}
footer ul{list-style:none}
footer li{padding:4px 0;color:var(--ink-2);font-size:15px}
footer li a{text-decoration:none;border-bottom:1px solid var(--line)}
footer li a:hover{border-bottom-color:var(--ink)}
.colophon{margin-top:40px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-family:var(--sans);font-size:11px;color:var(--ink-3)}
.colophon a{text-decoration:none;color:var(--ink-3)}
.colophon a:hover{color:var(--ink)}

/* ==================================================================
   Espace privé
   ================================================================== */
.adm{max-width:1080px;margin:0 auto;padding:clamp(18px,4vw,44px)}
.adm h1{font-size:clamp(23px,3.4vw,36px)}
.adm .bar{position:sticky;top:0;z-index:10;background:var(--bg);padding:12px 0;
  border-bottom:1px solid var(--line);display:flex;flex-wrap:nowrap;gap:8px;align-items:center}
.adm .bar .sig-mark{height:22px}
.adm .bar .btn{white-space:nowrap}
.adm .bar .grow{flex:1}
.gate{max-width:380px;margin:14vh auto;text-align:center}
.gate input{width:100%;margin-top:16px;padding:13px 15px;border:1px solid var(--line);
  background:#fff;font-family:var(--sans);font-size:15px}
.gate .err{color:var(--rouge);font-family:var(--sans);font-size:13px;margin-top:10px;min-height:18px}
.card{border:1px solid var(--line);background:#fbf9f5;padding:clamp(13px,2.2vw,22px);margin-top:14px}
.card > summary{cursor:pointer;font-size:18px;list-style:none;display:flex;gap:10px;
  align-items:center;flex-wrap:wrap}
.card > summary::-webkit-details-marker{display:none}
.card > summary .tag{font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.fld{display:block;margin-top:11px}
.fld > span{display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.fld input,.fld textarea{width:100%;padding:9px 11px;border:1px solid var(--line);
  background:#fff;font-family:var(--sans);font-size:14px;line-height:1.5}
.fld textarea{min-height:88px;resize:vertical}
.grid2{display:grid;gap:11px}
@media (min-width:680px){.grid2{grid-template-columns:1fr 1fr}}
/* prix et référence : toujours côte à côte, même sur téléphone */
.grid2.pr{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.work{border:1px solid var(--line);background:#fff;padding:12px;margin-top:12px;
  display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:760px){.work{grid-template-columns:150px minmax(0,1fr)}}
.work .thumbs{display:flex;gap:6px;flex-wrap:wrap}
.work .thumbs figure{position:relative;width:66px}
.work .thumbs img{width:66px;height:66px;object-fit:cover;border:1px solid var(--line)}
.work .thumbs button.x{position:absolute;top:-6px;right:-6px;width:20px;height:20px;
  border-radius:50%;border:0;background:var(--rouge);color:#fff;font-size:12px;
  line-height:20px;cursor:pointer;padding:0}
/* ordre des photos : deux flèches et le rang, sous la vignette */
.work .thumbs figure{width:66px;margin-bottom:4px}
.work .thumbs .ordre{display:flex;align-items:center;justify-content:space-between;
  margin-top:3px;font-family:var(--sans);font-size:10px;color:var(--ink-3)}
.work .thumbs .ordre button{width:20px;height:18px;padding:0;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);font-size:12px;line-height:1;cursor:pointer;
  border-radius:3px}
.work .thumbs .ordre button:disabled{opacity:.3;cursor:default}
/* la vidéo prend sa place dans le rail, comme une photo ; un liseré et le
   rang « ▶ » suffisent à la distinguer */
.work .thumbs figure.vfilm video{width:66px;height:66px;object-fit:cover;
  border:1px solid var(--ink-3);background:#000;display:block}
.work .thumbs figure.vfilm .ordre span{font-size:11px;color:var(--ink)}
/* navigation d'une collection à l'autre, à mi-hauteur sur le bord droit */
.nav-col{position:fixed;right:8px;top:50%;transform:translateY(-50%);z-index:35;
  display:flex;flex-direction:column;gap:8px}
.nav-col button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:rgba(242,239,232,.94);backdrop-filter:blur(8px);color:var(--ink);
  font-size:17px;line-height:1;cursor:pointer;box-shadow:0 2px 10px rgba(28,26,22,.09)}
.nav-col button:hover{border-color:var(--ink)}
.nav-col button:disabled{opacity:.28;cursor:default}
.nav-col .nom{max-width:112px;font-family:var(--sans);font-size:9px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);text-align:center;line-height:1.3}
@media (max-width:560px){
  .nav-col{right:5px;gap:6px}
  .nav-col button{width:33px;height:33px;font-size:15px}
  .nav-col .nom{display:none}
}
.taille-zone{margin-top:12px;padding:12px;background:var(--bg);border:1px solid var(--line)}
.taille-zone .manuel{margin-top:10px}
.taille-zone .hint{margin-top:8px}
.rowbtns{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
/* Place d'une œuvre dans la suite des œuvres de sa collection (et non la
   rangée du mur, qui est un autre chiffre), transfert vers une autre
   collection, photo de collection et suppression : tout sur une seule
   rangée, sur téléphone comme sur grand écran. Plutôt que de passer à la
   ligne quand l'écran est trop étroit, la rangée se fait glisser du doigt :
   elle reste une rangée. */
.ordre-zone{display:flex;align-items:center;gap:4px;flex-wrap:nowrap;margin-top:10px;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ordre-zone::-webkit-scrollbar{display:none}
.ordre-lab{font-family:var(--sans);font-size:11px;letter-spacing:.04em;color:var(--ink-3);
  white-space:nowrap;flex:none}
.btn.rgb{min-width:29px;padding:5px 5px;font-variant-numeric:tabular-nums;text-align:center;
  flex:none}
.btn.rgb:disabled{opacity:.28;cursor:default}
.btn.rgb-couv.on{color:var(--accent);border-color:var(--accent)}
.btn.rgb-sup{color:var(--rouge)}
.btn.rgb-sup:hover{background:var(--rouge);border-color:var(--rouge);color:var(--blanc)}
.ordre-n{width:42px;text-align:center;font-family:var(--sans);font-size:12.5px;
  padding:5px 3px;border:1px solid var(--line);border-radius:4px;background:var(--blanc);
  color:var(--ink);font-variant-numeric:tabular-nums;flex:none}
.ordre-sel{font-family:var(--sans);font-size:11.5px;padding:5px 3px;border-radius:4px;
  border:1px solid var(--line);background:var(--blanc);color:var(--ink);
  flex:none;min-width:0;max-width:136px;margin-left:6px}
/* Téléphone : le mot « Ordre » et le total sur combien d'œuvres s'effacent —
   l'infobulle et les lecteurs d'écran les gardent. */
@media (max-width:560px){
  .ordre-zone{gap:3px}
  .ordre-mot,.ordre-sur{display:none}
  .btn.rgb{min-width:26px;padding:5px 2px;font-size:11.5px}
  .ordre-n{width:36px;padding:5px 2px}
  .ordre-sel{max-width:78px;margin-left:4px;padding:5px 1px;font-size:11px}
}
/* Écran très étroit : « tout au début » et « tout à la fin » s'effacent
   aussi — le champ fait le même travail, on y écrit 1 ou le dernier rang.
   La limite est mesurée, pas devinée : à 430 px la rangée entière tient
   encore, à 390 px il manque six pixels. */
@media (max-width:400px){
  .btn.rgb-bout{display:none}
  .btn.rgb{min-width:25px}
  .ordre-n{width:34px}
  .ordre-sel{max-width:66px}
}
/* tableau des coordonnées reçues, dans la page perso */
.coord-tbl-zone{margin-top:12px;overflow-x:auto;border:1px solid var(--line);border-radius:6px}
.coord-tbl{border-collapse:collapse;width:100%;font-family:var(--sans);font-size:12.5px}
.coord-tbl th{text-align:left;background:var(--bg);border-bottom:1px solid var(--line);
  padding:0;position:sticky;top:0}
.coord-tbl th button{width:100%;text-align:left;background:none;border:0;cursor:pointer;
  font:inherit;font-weight:600;color:var(--ink-2);padding:8px 10px;white-space:nowrap}
.coord-tbl th button:hover{color:var(--ink)}
.coord-tbl td{padding:7px 10px;border-bottom:1px solid var(--line);color:var(--ink);
  vertical-align:top}
.coord-tbl tbody tr:last-child td{border-bottom:0}
.coord-tbl tbody tr:nth-child(even) td{background:rgba(28,26,22,.025)}
.coord-tbl td.mono{font-variant-numeric:tabular-nums;white-space:nowrap}
.chk{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:13px;
  margin-top:10px;cursor:pointer;line-height:1.4}
.chk input{width:auto;flex:none}
/* ------------------------------------------------------------------
   Veille : le site en sommeil. Pas de bandeau, pas de texte — la
   signature et la pièce qui tourne au défilement, et une porte discrète
   vers l'espace privé, en bas à droite.
------------------------------------------------------------------ */
.page-veille{background:var(--bg)}
/* la jauge de lecture n'a rien à jauger sur une page de veille */
.page-veille .progress{display:none}
/* la piste de défilement ne sert qu'à faire tourner la pièce : elle reste
   vide, et la pièce, elle, ne quitte jamais l'écran */
.voile{height:220vh;position:relative}
.voile-art{position:fixed;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(10px,3vh,34px);
  padding:clamp(16px,4vh,48px) var(--pad)}
/* la pièce prend un peu plus de la moitié de la hauteur : de l'air
   au-dessus et au-dessous, et rien qui déborde */
.voile-art #relief{width:100%;height:54%;max-height:54vh;display:block;flex:none}
.voile-titre{line-height:0;flex:none;margin:0}
.voile-sig{width:min(400px,72vw);flex:none}
.voile-mot{max-width:46ch;text-align:center;font-family:var(--sans);font-size:12px;
  letter-spacing:.04em;line-height:1.6;color:var(--ink-3)}
.no-webgl .voile-art #relief{display:none}
/* la marque et la bascule de langue, seules, en haut à droite : pas de
   bandeau, pas de menu — juste ce qu'il faut pour se repérer */
.voile-haut{position:fixed;top:0;right:0;z-index:40;display:flex;align-items:center;
  gap:clamp(8px,1.6vw,20px);padding:clamp(10px,2vh,18px) var(--pad)}
.voile-haut .lang{background:none}
@media (max-width:560px){.voile-haut{padding:10px 16px;gap:9px}}
.voile-porte{position:fixed;right:14px;bottom:12px;z-index:40;font-family:var(--sans);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  color:var(--ink-3);padding:7px 11px;border:1px solid transparent;transition:.25s}
.voile-porte:hover{color:var(--ink);border-color:var(--line)}
@media (max-width:560px){
  .voile{height:200vh}
  .voile-art #relief{height:50%;max-height:50vh}
  .voile-sig{width:min(320px,78vw)}
  .voile-mot{font-size:11.5px;max-width:34ch}
}
/* espace privé : l'état du site, bien visible */
.etat-site{display:flex;align-items:center;gap:9px;font-family:var(--sans);font-size:13px;
  line-height:1.5;color:var(--ink-2)}
.etat-site i{flex:none;width:10px;height:10px;border-radius:50%;background:#1d6b3f}
.etat-site.ferme i{background:var(--rouge)}
.etat-site.ferme{color:var(--rouge)}
/* les deux flèches d'annulation : discrètes, larges assez pour le doigt */
.bar .btn.fl{padding:7px 10px;font-size:14px;line-height:1;min-width:34px;justify-content:center}
.bar .btn.fl:disabled{opacity:.3;cursor:default}
.bar .hors-ligne{font-family:var(--sans);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;background:var(--rouge);padding:5px 9px;
  border-radius:99px;white-space:nowrap}

/* prix et réf : une case et une devise par collection / exposition */
.tarif-ligne{display:grid;grid-template-columns:minmax(0,1fr) 130px;gap:12px;
  align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
.tarif-ligne .chk{margin-top:0}
.tarif-ligne .fld{margin-top:0}
@media (max-width:560px){.tarif-ligne{grid-template-columns:minmax(0,1fr) 96px;gap:8px}}
.hint{font-family:var(--sans);font-size:12.5px;color:var(--ink-3);line-height:1.55;margin-top:8px}
/* intitulé d'une sous-partie, à l'intérieur d'une carte de la page perso */
.sous-titre{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.note{padding:14px 17px;border:1px dashed var(--line);font-family:var(--sans);
  font-size:12.5px;line-height:1.6;color:var(--ink-3);max-width:64ch}
.note code{font-size:11.5px;background:var(--bg-alt);padding:1px 5px}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--ink);
  color:var(--bg);font-family:var(--sans);font-size:13px;padding:11px 18px;z-index:80;
  opacity:0;pointer-events:none;transition:opacity .3s;max-width:90vw;text-align:center}
.toast.on{opacity:1}

/* --- espace privé : champs bilingues, dimensions --- */
.fld2{margin-top:14px}
.fld2-t{display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);margin-bottom:6px;font-weight:600}
.fld2 .fld{margin-top:0}
.fld2 .fld > span{color:var(--accent);font-weight:600}
.grid3{display:grid;gap:11px;grid-template-columns:1fr 1fr}
@media (min-width:680px){.grid3{grid-template-columns:repeat(3,1fr)}}
/* largeur, hauteur, épaisseur : une seule ligne, y compris au téléphone */
.grid3.dims{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.grid3.dims .fld > span{font-size:9px;letter-spacing:.06em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.grid3.dims .fld input{padding:9px 7px;font-size:13px}
.work.bloc1{grid-template-columns:1fr}
.manuel{margin-top:12px}

/* --- espace privé : récapitulatif d'affichage et choix des couleurs --- */
.reca{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  padding:8px 11px;margin-bottom:4px;background:var(--bg);border:1px solid var(--line);
  font-family:var(--sans);font-size:11.5px;color:var(--ink-3)}
.reca b{font-size:12px;color:var(--accent);letter-spacing:.08em}
.reca .pc{color:var(--ink);font-weight:600}
.reca .man{color:var(--accent)}
.reca .ind{color:var(--rouge)}
.coul-duo{display:flex;gap:8px;align-items:center}
.coul-duo input[type=color]{width:44px;height:36px;padding:2px;flex:none;cursor:pointer}
.coul-duo input[type=text]{flex:1;min-width:0}
.fld select{width:100%;padding:9px 11px;border:1px solid var(--line);background:#fff;
  font-family:var(--sans);font-size:14px}
.coul-apercu{display:flex;align-items:center;justify-content:center;height:36px;
  border:1px solid var(--line);font-family:var(--serif);font-size:14px;padding:0 8px;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.reca .rang{color:var(--ink);font-weight:600;background:var(--bg-alt);
  padding:2px 8px;border-radius:99px}

/* ---------- portrait de l'artiste ---------- */
.portrait{width:74px;height:74px;border-radius:50%;object-fit:cover;
  margin-bottom:16px;border:1px solid var(--line)}
.contact-tete{display:flex;align-items:flex-start;gap:clamp(18px,3vw,36px);flex-wrap:wrap}
.contact-tete > div{flex:1;min-width:min(100%,280px)}

/* ---------- invitation à laisser ses coordonnées ----------
   Grand écran : à droite, dans le vide que laisse le titre. Téléphone :
   à côté du portrait, au-dessus du titre — c'est la même commande, placée
   par l'ordre des éléments et non dupliquée. */
.btn-coord{order:3;flex:none;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-size:12px;letter-spacing:.06em;line-height:1.25;
  text-align:left;padding:10px 15px;border-radius:99px;cursor:pointer;
  color:var(--ink);background:none;border:1px solid var(--line);
  transition:border-color .25s,background .25s,color .25s;margin-top:6px}
.btn-coord:hover{border-color:var(--bleu);color:var(--bleu)}
.btn-coord:focus-visible{outline:2px solid var(--bleu);outline-offset:2px}
.btn-coord .bc-fl{color:var(--bleu);font-size:13px;line-height:1}
.btn-coord .bc-txt{max-width:15ch}
@media (min-width:760px){
  /* Le titre pousse le bouton au bord droit, et sur grand écran il occupe
     trois fois plus de surface qu'au téléphone : c'est l'appel principal
     de la page, il doit se voir de loin. */
  .contact-tete > div{order:2}
  .btn-coord{order:3;margin-left:auto;margin-top:12px;
    font-size:22px;letter-spacing:.04em;gap:14px;padding:19px 30px}
  .btn-coord .bc-fl{font-size:23px}
  .btn-coord .bc-txt{max-width:14ch}
}
@media (max-width:759px){
  /* à droite du portrait : le portrait garde sa place, le titre passe
     dessous en occupant toute la largeur */
  .contact-tete{align-items:center}
  .btn-coord{order:2;margin-top:0}
  .contact-tete > div{order:3;min-width:100%}
}

/* ---------- la fenêtre des coordonnées ----------
   Elle tient en un écran sur téléphone : champs bas, intitulés en petites
   capitales au-dessus, profils en pastilles. Si l'écran est vraiment court,
   c'est la boîte qui défile, jamais la page derrière. */
body.fige{overflow:hidden}
.coord-voile{position:fixed;inset:0;z-index:70;display:flex;align-items:center;
  justify-content:center;padding:14px;background:rgba(28,26,22,.42);
  backdrop-filter:blur(3px)}
.coord-voile[hidden]{display:none}
.coord-boite{background:var(--bg);width:min(430px,100%);max-height:96vh;overflow-y:auto;
  border:1px solid var(--line);border-radius:10px;padding:20px 20px 16px;
  box-shadow:0 10px 40px rgba(28,26,22,.22)}
.coord-boite h2{font-family:var(--serif);font-size:21px;line-height:1.15;margin:0}
.coord-intro{font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--ink-2);
  margin:7px 0 14px}
.fc{display:block;margin-bottom:9px}
.fc > span{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.fc input{width:100%;font-family:var(--sans);font-size:14px;padding:8px 9px;
  border:1px solid var(--line);border-radius:5px;background:var(--blanc);color:var(--ink)}
.fc input:focus{outline:none;border-color:var(--bleu)}
.fc input::placeholder{color:var(--ink-3)}
.fc-2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.fc-2 .fc{margin-bottom:9px}
.fc-tel{display:flex;align-items:flex-end;gap:6px}
.fc-plus{font-family:var(--sans);font-size:15px;color:var(--ink-2);padding-bottom:9px}
.fc-ind{width:76px;flex:none}
.fc-num{flex:1;min-width:0}
.fc-prof{border:0;padding:0;margin:4px 0 10px}
.fc-prof legend{font-family:var(--sans);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:6px;padding:0}
.puce{display:inline-flex;align-items:center;margin:0 5px 5px 0;cursor:pointer}
.puce input{position:absolute;opacity:0;width:1px;height:1px}
.puce span{display:inline-block;font-family:var(--sans);font-size:12px;padding:6px 11px;
  border:1px solid var(--line);border-radius:99px;color:var(--ink-2);
  transition:border-color .2s,background .2s,color .2s}
.puce input:checked + span{border-color:var(--bleu);background:var(--bleu);color:var(--blanc)}
.puce input:focus-visible + span{outline:2px solid var(--bleu);outline-offset:2px}
.leurre{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.coord-err{font-family:var(--sans);font-size:12.5px;line-height:1.45;color:var(--rouge);
  background:rgba(200,50,30,.07);border:1px solid rgba(200,50,30,.3);border-radius:6px;
  padding:9px 11px;margin:0 0 10px}
.coord-err[hidden]{display:none}
.coord-pied{display:flex;gap:8px;align-items:stretch}
.btn-envoi{flex:1;font-family:var(--sans);font-size:13.5px;letter-spacing:.08em;
  text-transform:uppercase;font-weight:600;padding:12px 14px;border:0;border-radius:6px;
  background:var(--bleu);color:var(--blanc);cursor:pointer;transition:opacity .2s}
.btn-envoi:hover{opacity:.88}
.btn-envoi:disabled{opacity:.55;cursor:default}
.btn-fermer{flex:none;width:44px;border:1px solid var(--line);border-radius:6px;
  background:var(--blanc);color:var(--ink-2);font-size:15px;line-height:1;cursor:pointer}
.btn-fermer:hover{border-color:var(--ink);color:var(--ink)}
.coord-usage{font-family:var(--sans);font-size:10.5px;line-height:1.45;color:var(--ink-3);
  margin:10px 0 0}
@media (max-height:670px){
  .coord-boite{padding:14px 15px 12px}
  .coord-boite h2{font-size:18px}
  .coord-intro{margin:5px 0 10px;font-size:12px}
  .fc{margin-bottom:7px}
  .fc input{padding:7px 8px}
  .puce span{padding:5px 9px;font-size:11.5px}
  .btn-envoi{padding:10px 12px}
}
.portrait.grand{width:clamp(96px,12vw,150px);height:clamp(96px,12vw,150px);margin-bottom:0}

/* apparition douce des photos une fois chargées */
.tile .slide img,.col-item .vign img{opacity:0;transition:opacity .45s ease}
.tile .slide img.ok,.col-item .vign img.ok{opacity:1}
@media (prefers-reduced-motion:reduce){.tile .slide img,.col-item .vign img{opacity:1}}

/* ---- page d'ensemble : lien vers la collection complète ---- */
.voir-tout{margin:26px 0 0;text-align:center}
.voir-tout a{display:inline-block;padding:12px 26px;border:1px solid currentColor;
  border-radius:999px;color:var(--enc,#1c1a16);text-decoration:none;
  font-size:14px;letter-spacing:.04em;opacity:.75;transition:opacity .2s}
.voir-tout a:hover{opacity:1}

/* ---- état de publication dans l'espace privé ---- */
#etat.ok-pub{color:#1c7a3e}
#etat.err-pub{color:#b0281f}

/* ---- amorce : le catalogue en HTML simple, lisible sans JavaScript.
   Remplacée par l'application dès qu'elle démarre. ---- */
#amorce{max-width:1180px;margin:0 auto;padding:40px 24px;font-size:15px}
#amorce h2{font-size:26px;margin:36px 0 8px}
#amorce ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:26px}
#amorce li{width:200px}
#amorce img{width:100%;height:auto;display:block}
#amorce h3{font-size:15px;margin:10px 0 2px;font-weight:600}
#amorce p{margin:0;color:#6b6862;font-size:13px}

/* ---- vidéo d'œuvre : un volet du rail, à la place choisie ----
   Elle occupe la zone entière ; on fait glisser latéralement pour voir les
   photos de la même œuvre, sans changer de cadre. Comme les photos, elle est
   montrée en entier, centrée dans la zone, jamais déformée ni rognée : c'est
   la zone qui commande la place, le film s'y loge tout entier. */
.tile .slide-film{position:relative;padding:0}
.tile .slide .film{width:100%;height:100%;object-fit:contain;object-position:center;
  display:block;background:transparent;pointer-events:none}
.tile .film-badge{position:absolute;right:8px;bottom:8px;width:22px;height:22px;
  border-radius:50%;background:rgba(0,0,0,.42);display:flex;align-items:center;
  justify-content:center;pointer-events:none}
.tile .film-badge::after{content:'';border-left:6px solid #fff;border-top:4px solid transparent;
  border-bottom:4px solid transparent;margin-left:2px}
/* la pastille du film se distingue des autres */
.dot.dot-film{width:9px;height:9px;border-radius:2px}

/* ---- atelier : bande d'images qui défile latéralement ---- */
.atelier-page{padding-bottom:clamp(40px,6vw,80px)}
.pellicule{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;
  padding:8px var(--pad) 18px;scroll-snap-type:x proximity;
  scrollbar-width:thin;cursor:grab;-webkit-overflow-scrolling:touch}
.pellicule.tire{cursor:grabbing;scroll-snap-type:none}
.pelli{margin:0;flex:0 0 auto;scroll-snap-align:center;
  height:min(66vh,620px);border-radius:2px;overflow:hidden;background:var(--blanc)}
.pelli img,.pelli video{height:100%;width:auto;display:block;object-fit:cover;
  opacity:0;transition:opacity .5s ease}
.pelli img.ok,.pelli video{opacity:1}
.pellicule-aide{padding:0 var(--pad);font-family:var(--sans);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
@media (max-width:760px){ .pelli{height:52vh} }

/* ---- « non disponible » : discret, aligné à droite ---- */
.legende-dispo{justify-content:flex-end;font-size:10.5px;opacity:.75}

/* ---------- état de publication, dans la barre du haut ----------
   L'enregistrement est automatique ; encore faut-il pouvoir le
   constater sans y penser. La pastille dit l'état — verte, orange
   pendant l'envoi, rouge en cas d'échec. Sur un écran étroit, le texte
   s'efface et il ne reste que la pastille : la barre tient sur une
   ligne quoi qu'il arrive. */
.veille{display:inline-flex;align-items:center;gap:7px;flex:none;
  font-family:var(--sans);font-size:12px;color:var(--ink-2);white-space:nowrap}
.veille .pastille{width:10px;height:10px;border-radius:50%;background:#1d6b3f;flex:none}
.veille.wip .pastille{background:#b8862b}
.veille.ko .pastille{background:#b0281f}
.veille.ko{color:#b0281f}
.btn.pub{gap:6px}

/* ---------- téléphone : une seule ligne, partout ----------
   Sur un écran étroit, « CONTACT » venait chevaucher le bouton de
   langue. Plutôt que de laisser le menu passer sous la signature, on
   resserre la typographie : quatre entrées, la langue et la signature
   tiennent alors sur la même ligne. */
@media (max-width:470px){
  .adm .bar #voir .lbl,.adm .bar #sortir .lbl{display:none}
}
@media (max-width:430px){
  .menu-nav{gap:9px}
  .menu{font-size:9.6px;letter-spacing:.05em}
  .marque-zone{gap:9px}
  /* la pastille de langue et la signature gardent une taille fixe :
     seule la typographie du menu grandit. */
  .lang{font-size:9px;padding:4px 7px;letter-spacing:.05em}
  .sig-mark{height:17px}
}
@media (max-width:385px){
  .menu-nav{gap:7px}
  .menu{font-size:8.9px;letter-spacing:.03em}
}
@media (max-width:340px){
  .menu-nav{gap:6px}
  .menu{font-size:8.2px;letter-spacing:.02em}
}
/* barre de l'espace privé : le texte cède la place, la pastille reste */
@media (max-width:620px){
  .adm .bar{gap:6px}
  .adm .bar .btn{padding:7px 9px;font-size:9.5px;letter-spacing:.08em}
  .veille .veille-txt{display:none}
  .btn.pub .lbl{display:none}
  /* place aux deux flèches : elles se resserrent, et les libellés longs
     des deux derniers boutons s'effacent sur les petits écrans */
  .adm .bar .btn.fl{padding:6px 7px;font-size:12.5px;min-width:27px}
  .adm .bar .sig-mark{height:18px}
}