/* Mise en page : une table d'atelier crème, pleine largeur. Les toiles y sont posées en vrac comme des nuanciers,
   le texte reste léger, et seuls des filets d'encre d'un pixel structurent la page. Aucune ombre, aucun dégradé. */
:root{
  /* neutres */
  --cream:#f2f0e9; --paper:#ffffff; --ink:#141212; --pencil:#a1a0a0; --muted:#6b6863;
  --sage:#dde5d8; --ivory:#d7d7c8;
  /* la seule couleur d'interface : le bleu marine de la maquette (bouton « Voir les toiles », pastille du panier) */
  --cobalt:#1b3f7a;
  /* le cadre noir des toiles dans le défilement mono-tableau : un anthracite doux, du plus clair (dessus) au plus sombre (dessous) */
  --frame-hi:#3d3d40; --frame-mid:#333336; --frame:#2b2b2d; --frame-lo:#202022; --frame-in:#151516;
  /* les bleus du grand V du hero */
  --blue-2:#9dbdf4; --blue-3:#5f8fe6;
  /* les pigments (contenu, jamais interface) */
  --forest:#3f593d; --marigold:#f89c35; --buttercup:#f6dc2e; --cobalt-pop:#0159bd; --terracotta:#863a29;
  --rose:#ed93af; --rust:#a0674f; --wheat:#b99572; --saffron:#d8c660; --olive:#a9ab72; --blush:#dcc5bd; --stone:#c7b8ab;

  /* Mona Sans : une grotesque inspirée des caractères de l'ère industrielle, à largeur variable (75 à 125 %).
     Étroite pour les titres, très large et en capitales pour le nom du site (.brand) */
  --font-display:'Mona Sans','Arial Narrow','Helvetica Neue',Arial,sans-serif;
  --font-body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --gutter:clamp(16px,3.2vw,48px);
  --gap:clamp(72px,11vw,180px);
  --r-card:12px; --r-btn:5px; --r-pill:100px;
  --line:1px solid var(--ink);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- essai : fond béton (attribut data-fond="beton" sur la balise html) ----------
   Le béton est dessiné dans un canevas fixe derrière la page ; les panneaux pleins prennent un gris béton uni. */
.beton{display:none}
[data-fond="beton"]{--cream:#cfcdc8;--muted:#55524e;--pencil:#8f8d89}
[data-fond="beton"] .beton{display:block;position:fixed;z-index:-1;left:0;top:0;width:100%;height:100%;pointer-events:none}
[data-fond="beton"] .footer{background:transparent}

*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light;-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font:300 16px/1.5 var(--font-body);letter-spacing:-.02em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
body.is-locked{overflow:hidden}
/* Rien ne doit dépasser de la largeur de l'écran. Sur iPhone, l'overflow-x:hidden de la page ne suffit pas : un seul élément
   plus large que l'écran (la lumière colorée de l'enseigne des toiles du mois dépassait de 5 px) laisse faire glisser toute
   la page de côté dans sa fenêtre, avec le rebond d'iOS. « clip » coupe ce qui dépasse au bord de l'écran sans créer de
   zone de défilement : le hero et la collection, épinglés (sticky), fonctionnent comme avant. */
main{overflow-x:clip}
[hidden]{display:none !important}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
::selection{background:var(--cobalt);color:var(--paper)}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.nowrap{white-space:nowrap}

/* ---------- typographie ---------- */
.display{
  font-family:var(--font-display);font-weight:500;font-stretch:80%;
  font-size:clamp(40px,5.4vw,64px);line-height:.94;letter-spacing:-.03em;text-wrap:balance;
}
.mono{font:300 12px/1.2 var(--font-mono);letter-spacing:0}
.eyebrow{color:var(--muted);margin-bottom:24px}

/* titres découpés lettre à lettre par motion.js */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em .08em .16em;margin:-.14em -.08em -.16em}
.c{display:inline-block}
.js [data-split] .c{
  transform:translateY(118%) rotate(7deg);transform-origin:0 100%;
  transition:transform 1.1s var(--ease-out);transition-delay:calc(var(--ci,0) * 24ms + var(--sd,0s));
}
.js [data-split].is-in .c{transform:none}

.js .reveal-up{
  opacity:0;transform:translateY(32px);
  transition:opacity .9s var(--ease-out) var(--d,0s),transform 1s var(--ease-out) var(--d,0s);
}
.js .reveal-up.is-in{opacity:1;transform:none}

/* ---------- boutons ---------- */
/* Bouton plaque : la plaque d'acier noirci des cartels du défilement mono-tableau, devenue bouton.
   Le libellé est gravé à gauche ; à droite, derrière une rainure, une case pour la flèche, qui se remplit
   de bleu marine au survol pendant que la flèche avance. --lg : la grande version, avec un filet gravé tout autour. */
.plate-btn{
  position:relative;isolation:isolate;display:inline-flex;align-items:stretch;
  border-radius:2px;background:var(--frame);color:#e6e4de;text-decoration:none;cursor:pointer;white-space:nowrap;
  font-family:var(--font-display);font-stretch:82%;font-weight:500;font-size:12.5px;line-height:1;letter-spacing:.18em;text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 2px rgba(14,13,12,.4),0 7px 12px -6px rgba(14,13,12,.45);
  transition:box-shadow .5s var(--ease-out);
}
.plate-btn__label{display:flex;align-items:center;padding:14px 18px 13px 20px}
.plate-btn__go{
  position:relative;display:grid;place-items:center;width:44px;overflow:hidden;
  border-left:1px solid rgba(0,0,0,.55);box-shadow:inset 1px 0 0 rgba(255,255,255,.08);   /* la rainure */
}
.plate-btn__go::before{content:"";position:absolute;z-index:-1;inset:0;background:var(--cobalt);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-out)}
.plate-btn__go svg{width:17px;height:11px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .55s var(--ease-out)}
/* --still : un bouton plaque qui ne réagit pas au survol (le bouton « Voir les toiles » du hero) */
.plate-btn:not(.plate-btn--still):hover,.plate-btn:not(.plate-btn--still):focus-visible{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 3px rgba(14,13,12,.35),0 12px 20px -8px rgba(14,13,12,.5)}
.plate-btn:not(.plate-btn--still):hover .plate-btn__go::before,.plate-btn:not(.plate-btn--still):focus-visible .plate-btn__go::before{transform:none}
.plate-btn:not(.plate-btn--still):hover .plate-btn__go svg,.plate-btn:not(.plate-btn--still):focus-visible .plate-btn__go svg{transform:translateX(4px)}
.plate-btn--lg{font-size:14px}
.plate-btn--lg .plate-btn__label{padding:19px 26px 18px 28px}
.plate-btn--lg .plate-btn__go{width:58px}
.plate-btn--lg::after{content:"";position:absolute;inset:5px;border:1px solid rgba(255,255,255,.09);border-radius:1px;pointer-events:none}

.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 20px;border:var(--line);border-radius:var(--r-pill);
  background:var(--paper);color:var(--ink);
  font:300 15px/1.22 var(--font-body);letter-spacing:-.02em;white-space:nowrap;
  transition:background-color .3s,color .3s,transform .5s var(--ease-out);
}
.pill:hover{background:var(--sage)}
.pill:active{transform:scale(.95)}
.pill.is-active,.pill.is-active:hover{background:var(--ink);color:var(--cream)}

.link-arrow{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  color:var(--cobalt);font-weight:400;font-size:15px;text-decoration:none;padding-block:4px;
}
.link-arrow::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out);
}
.link-arrow:hover::after,.link-arrow:focus-visible::after{transform:scaleX(1);transform-origin:left}
.link-arrow i{font-style:normal;transition:transform .5s var(--ease-out)}
.link-arrow:hover i{transform:translateX(6px)}

/* lien « à rouleau » : le mot monte, sa copie bleue le remplace */
.roll{display:inline-block;overflow:hidden;line-height:1.35;vertical-align:top;text-decoration:none;color:var(--ink)}
.roll span{display:block;position:relative;transition:transform .55s var(--ease-out)}
.roll span::after{content:attr(data-text);position:absolute;left:0;top:100%;color:var(--cobalt)}
.roll:hover span,.roll:focus-visible span{transform:translateY(-100%)}

/* le nom du site (logo, rideau d'ouverture, pied de page) : en capitales, dans la plus grande largeur de la police, appuyé */
.brand{font-family:var(--font-display);font-stretch:125%;font-weight:700;text-transform:uppercase;letter-spacing:.05em}

/* le petit drapeau français après « travail français » (hero, pied de page) : trois bandes,
   cernées d'un filet pour que le blanc se détache du mur */
.flag-fr{
  display:inline-flex;width:1.5em;height:1em;margin-left:.75em;vertical-align:-.14em;
  border-radius:1px;overflow:hidden;box-shadow:0 0 0 1px rgba(20,18,18,.2);
}
.flag-fr i{flex:1}
.flag-fr i:nth-child(1){background:#002395}
.flag-fr i:nth-child(2){background:#fff}
.flag-fr i:nth-child(3){background:#ed2939}

/* ---------- navigation ---------- */
/* le logo à gauche, les liens au centre de la page ; sur mobile, le bouton du menu à droite */
.nav{
  position:fixed;z-index:60;top:0;left:0;right:0;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  padding:calc(14px + env(safe-area-inset-top,0px)) var(--gutter) 14px;
  border-bottom:1px solid transparent;
  transition:transform .7s var(--ease-out),background-color .35s,border-color .35s;
}
.nav.is-stuck{background:var(--cream);border-bottom-color:var(--ink)}
.nav.is-hidden{transform:translateY(-102%)}
.nav__logo{
  position:relative;grid-column:1;justify-self:start;
  font-size:clamp(17px,1.5vw,22px);line-height:1;
  text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;gap:11px;white-space:nowrap;   /* le nom ne se coupe pas au trait d'union */
}
/* le logo du site : les boucles de l'artiste sur leur rond noir, devant le nom */
.nav__mark{width:clamp(26px,2.1vw,32px);height:auto;aspect-ratio:1;border-radius:50%;flex:none}
/* Le logo s'éclaire comme l'enseigne des toiles du mois : des LED blanches cachées derrière le rond et derrière les lettres
   dessinent un halo blanc sur le mur (en z-index négatif : sous le logo, mais sur le fond de la barre). Il s'allume en
   grésillant une fois le rideau levé (logo-on sur la page, posé par main.js), puis respire à peine. Aucun effet au survol. */
.nav__logo::before,.nav__logo span::before{position:absolute;z-index:-1;pointer-events:none}
.nav__logo::before{
  content:"";left:0;top:50%;width:clamp(26px,2.1vw,32px);aspect-ratio:1;translate:0 -50%;border-radius:50%;
  box-shadow:0 0 1px 1px #fff,0 0 4px 2px rgba(255,255,255,.95),0 0 10px 4px rgba(255,255,255,.75),0 0 22px 7px rgba(255,255,255,.5),0 0 40px 12px rgba(255,255,255,.28);
}
.nav__logo span{position:relative}
.nav__logo span::before{
  content:attr(data-text);left:0;top:0;color:transparent;
  text-shadow:0 0 1px #fff,0 0 2px #fff,0 0 4px #fff,0 0 8px rgba(255,255,255,.95),0 0 16px rgba(255,255,255,.75),0 0 30px rgba(255,255,255,.5),0 0 48px rgba(255,255,255,.3);
}
.js .nav__logo::before,.js .nav__logo span::before{opacity:0}
.js.logo-on .nav__logo::before,.js.logo-on .nav__logo span::before{animation:ledOn 1.6s steps(1,end) .3s forwards,ledHum 5.5s ease-in-out 2.4s infinite}
@keyframes ledOn{0%{opacity:0}9%{opacity:1}13%{opacity:.12}21%{opacity:1}27%{opacity:.3}36%,100%{opacity:1}}
@keyframes ledHum{0%,100%{opacity:1}50%{opacity:.84}}
.nav__links{grid-column:2;display:flex;gap:clamp(16px,2.6vw,44px);font-size:clamp(15px,1.15vw,17px)}
/* les liens de la barre : en noir, appuyés ; au survol, les mêmes LED s'allument derrière les lettres en grésillant un
   instant, et s'éteignent quand la souris s'en va */
.nav__link{position:relative;display:inline-block;line-height:1.35;font-weight:500;letter-spacing:-.01em;white-space:nowrap;color:var(--ink);text-decoration:none}
.nav__link::before{
  content:attr(data-text);position:absolute;z-index:-1;left:0;top:0;color:transparent;pointer-events:none;
  text-shadow:0 0 1px #fff,0 0 2px #fff,0 0 4px #fff,0 0 8px rgba(255,255,255,.9),0 0 16px rgba(255,255,255,.7),0 0 28px rgba(255,255,255,.45);
  opacity:0;transition:opacity .35s;
}
.nav__link:hover::before,.nav__link:focus-visible::before{opacity:1;transition-duration:.06s;animation:ledFlick .7s steps(1,end)}
@keyframes ledFlick{0%{filter:opacity(1)}12%{filter:opacity(.15)}22%{filter:opacity(1)}34%{filter:opacity(.4)}46%,100%{filter:opacity(1)}}
@media (prefers-reduced-motion:reduce){
  .js .nav__logo::before,.js .nav__logo span::before{opacity:1;animation:none}
  .nav__link:hover::before,.nav__link:focus-visible::before{animation:none}
}
.nav__actions{grid-column:3;justify-self:end;display:flex;gap:8px}
.nav__burger{display:none}

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

/* ---------- curseur ---------- */
.cursor{display:none}
.has-cursor .cursor{display:block;position:fixed;z-index:400;left:0;top:0;width:0;height:0;pointer-events:none;will-change:transform}
.cursor::before{
  content:"";position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;
  background:var(--ink);transition:transform .5s var(--ease-out),background-color .3s,opacity .3s;
}
.cursor span{
  position:absolute;left:0;top:0;transform:translate(-50%,-50%) scale(.5);opacity:0;
  color:var(--paper);font:300 12px/1 var(--font-mono);white-space:nowrap;
  transition:opacity .3s,transform .5s var(--ease-out);
}
.cursor.is-link::before{transform:scale(.35)}
/* sur une toile, la pastille s'efface et le logo de l'atelier arrive en tournant : les boucles blanches sur un rond noir
   (img/logo.png, fait par .claude/tools/logo-cursor.ps1) ; le libellé texte n'est plus affiché */
.cursor span{display:none}
.cursor__logo{
  position:absolute;left:-36px;top:-36px;width:72px;height:72px;max-width:none;border-radius:50%;
  opacity:0;transform:scale(.25) rotate(-40deg);transition:opacity .25s,transform .6s var(--ease-back);
}
.cursor.is-label::before{transform:scale(0)}
.cursor.is-label .cursor__logo{opacity:1;transform:none}
.cursor.is-out::before,.cursor.is-out .cursor__logo{opacity:0}
.has-cursor [data-cursor]{cursor:none}

/* ---------- rideau de chargement (environ 1,5 s) : des poteaux de béton montent l'un après l'autre, de gauche à droite,
   chacune portant une lettre du nom ; puis elles se lèvent dans l'ordre inverse. --n : nombre de lames, --i : rang de la lame ---------- */
.loader{display:none}
.js .loader{display:block;position:fixed;z-index:300;inset:0;background:var(--cream);animation:loaderSafe .01s 6s forwards}
@keyframes loaderSafe{to{visibility:hidden}}
.loader__strips{position:absolute;inset:0;display:flex}
/* chaque lame est un poteau de béton : main.js (pillars) y pose un canevas peint par la carte graphique ;
   en attendant, ou sans carte graphique, un béton uni avec une arête claire à gauche et une ombre à droite */
.loader__strips i{
  position:relative;overflow:hidden;flex:1;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(90deg,rgba(255,255,255,.14),rgba(255,255,255,0) 5%,rgba(0,0,0,0) 80%,rgba(0,0,0,.3)),#807e7a;
  transform:translateY(101%);
  animation:stripIn .4s var(--ease-io) calc(var(--i,0) * 20ms) forwards;   /* 0,6 s pour les onze : RISE dans main.js */
}
.loader__beton{position:absolute;inset:0;display:block;width:100%;height:100%}
/* la lettre : le nom en grand, comme le logo (.brand), peint sur le béton (le grain transparaît) ;
   elle attend la police pour ne pas changer de forme en pleine montée (main.js) */
.loader__strips b{
  position:relative;font-style:normal;font-size:min(7.6vw,20vh);line-height:1;letter-spacing:0;
  color:rgba(22,21,20,.93);mix-blend-mode:multiply;opacity:0;transition:opacity .2s;
}
.loader.is-type .loader__strips b{opacity:1}
@keyframes stripIn{to{transform:none}}
@keyframes stripOut{from{transform:none}to{transform:translateY(-101%)}}
/* le compteur, sur une petite plaque d'acier noirci vissée au béton, comme les cartels */
.loader__meta{
  position:absolute;left:var(--gutter);bottom:calc(var(--gutter) + env(safe-area-inset-bottom,0px));
  padding:11px 15px;background:var(--frame);color:#e6e3dc;border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 8px 16px -8px rgba(0,0,0,.55);
  transition:transform .45s var(--ease-io),opacity .3s;
}
.loader.is-done{background:transparent;pointer-events:none}
.loader.is-done .loader__strips i{animation:stripOut .45s var(--ease-io) calc((var(--n,1) - 1 - var(--i,0)) * 20ms) both}   /* 0,65 s : LIFT */
.loader.is-done .loader__meta{transform:translateY(-60px);opacity:0}
.loader.is-gone,.no-intro .loader{display:none}

/* ---------- en-têtes de section ---------- */
.section-head{
  position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px;flex-wrap:wrap;
  padding-bottom:24px;margin-bottom:32px;
}
/* le filet sous le titre se trace de gauche à droite à l'arrivée de la section */
.section-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform-origin:left}
.js .section-head::after{transform:scaleX(0);transition:transform 1.5s var(--ease-io) .1s}
.js .section-head.is-in::after{transform:scaleX(1)}
.section-head__note{max-width:34ch;color:var(--muted);font-size:15px;line-height:1.4}
.section-head__note.mono{font-size:12px;color:var(--ink)}

/* lignes de fiche : technique, format, prix… */
.rows{border-top:var(--line)}
.rows > div{
  display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:var(--line);
  font-size:15px;line-height:1.25;
}
.rows dt{color:var(--muted)}
.rows dd{text-align:right}

@media (max-width:860px){
  .nav__links{display:none}
  .nav__burger{display:inline-flex}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;transition-duration:.01ms !important;transition-delay:0s !important}
  .js .loader{display:none}
  .js .reveal-up,.js [data-split] .c{opacity:1;transform:none}
}