/* ================= COULEURS (juste après le hero, avant le défilement mono-tableau) ================= */
.colors{padding:var(--gap) var(--gutter);border-top:var(--line)}
.strips{display:flex;gap:8px;height:clamp(340px,56vh,580px)}
.strip{
  position:relative;flex:1 1 0;min-width:0;border-radius:var(--r-card);overflow:hidden;
  background:var(--c);color:var(--fg);text-align:left;
  transition:flex-grow .85s var(--ease-out);
}
.js .strip{clip-path:inset(100% 0 0 0 round 12px);transition:flex-grow .85s var(--ease-out),clip-path 1.1s var(--ease-io) calc(var(--i) * 55ms)}
.js .strips.is-in .strip{clip-path:inset(0 0 0 0 round 12px)}
.strip:hover,.strip:focus-visible{flex-grow:5.5}
.strip__hex{position:absolute;left:14px;top:16px;writing-mode:vertical-rl;white-space:nowrap}
.strip__label{
  position:absolute;left:16px;right:16px;bottom:16px;white-space:nowrap;
  opacity:0;transform:translateY(16px);transition:opacity .3s,transform .6s var(--ease-out);
}
.strip:hover .strip__label,.strip:focus-visible .strip__label{opacity:1;transform:none;transition-delay:.18s}
.strip__name{display:block;font-family:var(--font-display);font-stretch:80%;font-size:clamp(28px,3.2vw,44px);line-height:.94;letter-spacing:-.03em;margin-bottom:8px}
/* la teinte « glow » (un lien vers les toiles phosphorescentes) : un vert très clair qui luit, plus clair en son centre,
   et dont la lumière déborde un peu sur ses voisines et sur le mur, en respirant lentement.
   Sa découpe d'apparition est élargie pour ne pas couper ce halo. */
.strip{text-decoration:none}
.strip--glow{
  --halo:0 0 12px 1px rgba(205,255,185,.9),0 0 36px 5px rgba(160,255,140,.42),0 0 90px 16px rgba(130,255,140,.16);
  --halo-lo:0 0 9px 0 rgba(205,255,185,.7),0 0 26px 3px rgba(160,255,140,.3),0 0 70px 10px rgba(130,255,140,.1);
  z-index:1;
  background:radial-gradient(120% 58% at 50% 50%,#f3fff0 0%,var(--c) 62%,#aaf59c 100%);
  box-shadow:var(--halo);
  animation:glowBreath 4.6s ease-in-out infinite;
}
.js .strip--glow{clip-path:inset(calc(100% + 130px) -130px -130px -130px round 12px)}
.js .strips.is-in .strip--glow{clip-path:inset(-130px round 12px)}
@keyframes glowBreath{50%{box-shadow:var(--halo-lo)}}
@media (prefers-reduced-motion:reduce){
  .strip--glow{animation:none}
}

/* ================= LES TOILES DU MOIS (juste après le hero) =================
   Les toiles côte à côte au milieu du mur (--n : leur nombre), dans le même cadre noir que le défilement (angles nets,
   rien derrière). Elles arrivent recouvertes d'une couche noire mate qu'on gratte pour les découvrir (main.js, feature) :
   chaque couche (.feature__cover) est un canevas posé sur la toile, dans le cadre ; les éclats tombent sur un canevas de
   toute la section (.feature__flakes). Une fois découvertes, elles restent au milieu et se déplient dessous l'interrupteur
   qui les fait briller, au milieu, puis leur cartel, comme dans le défilement ; au survol, chacune s'incline dans son cadre.
   --avail : la hauteur que peut prendre un cadre ; --pg : l'écart entre deux toiles. */
.feature{
  --fw:clamp(9px,1.05vw,17px);--fgap:clamp(2px,.28vw,5px);--fb:calc(var(--fw) + var(--fgap));--avail:min(52vh,580px);--pg:clamp(28px,4.6vw,76px);
  position:relative;border-top:var(--line);min-height:100vh;
  display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-content:center;
  padding:calc(clamp(56px,9vh,110px) + env(safe-area-inset-top,0px)) var(--gutter) clamp(56px,9vh,110px);
}
.feature__art{
  position:relative;z-index:1;margin:0;
  width:min(100%,calc(var(--n,1) * ((var(--avail) - 2 * var(--fb)) * var(--arn,1) + 2 * var(--fb)) + (var(--n,1) - 1) * var(--pg)));
}
.feature__pair{display:grid;grid-template-columns:repeat(var(--n,1),minmax(0,1fr));gap:var(--pg);align-items:end}
/* L'enseigne, au-dessus des toiles, d'après la photo de l'artiste (l'enseigne d'une salle de sport) : de grosses lettres
   boîtiers droites, dans la police du nom du site, fixées à même le béton, sans plaque ni ombre ; dessous, une petite
   ligne aux lettres très espacées. Des giclées de peinture aux couleurs des toiles du mois sont tombées sur les faces
   (main.js). Deux allures :
   - en temps normal, les lettres sont noires et des LED blanches cachées derrière elles dessinent un halo blanc sur le
     béton tout autour (sign__halo) ;
   - avec « Faire briller » (la pièce dans le noir), les faces deviennent blanches et s'allument de l'intérieur ; leur
     lumière, colorée par les giclées, rayonne autour (sign__glow) et colore le mur (sign__light).
   Les lumières éclaircissent le mur (mode « screen ») : on voit le béton à travers ; l'enseigne ne crée pas de contexte
   d'empilement, pour qu'elles se mêlent au béton peint derrière la page. Quand la section arrive à l'écran, le halo
   s'allume en grésillant puis respire à peine, et des éclats pétillent sur les lettres. */
.feature__sign{position:relative;width:min(100%,calc(var(--n,1) * ((var(--avail) - 2 * var(--fb)) * var(--arn,1) + 2 * var(--fb)) + (var(--n,1) - 1) * var(--pg)));aspect-ratio:var(--sar,6);margin:clamp(6px,1.5vh,18px) 0 clamp(56px,9.5vh,116px);pointer-events:none}
.feature__sign svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sign__t{font-family:var(--font-display);font-stretch:125%;font-weight:700;font-size:100px;letter-spacing:.04em;text-transform:uppercase}
.sign__s{font-family:var(--font-display);font-stretch:125%;font-weight:600;font-size:26px;letter-spacing:.55em;text-transform:uppercase}
.sign__base{fill:#161515;transition:fill .3s}
.sign__trim{stroke:rgba(52,46,48,.38)}
.sign__light{
  position:absolute;inset:-55% -6% -70%;border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(90deg,rgba(var(--c1),.9),rgba(var(--cm),.75) 50%,rgba(var(--c2),.9));filter:blur(52px);
}
/* sur téléphone, cette lumière déborde un peu de l'écran ; main la coupe (overflow-x:clip, css/base.css). Les navigateurs
   qui ne connaissent pas « clip » (iPhone d'avant iOS 16) la gardent dans la largeur de l'enseigne : rien ne dépasse */
@supports not (overflow-x:clip){
  .sign__light{left:0;right:0}
}
.sign__halo,.sign__glow{mix-blend-mode:screen}
.sign__halo,.sign__glow,.sign__light{opacity:0;transition:opacity .3s}
/* en temps normal : le halo des LED s'allume en grésillant, puis respire à peine */
.feature__sign.is-lit .sign__halo{animation:signOn 1.6s steps(1,end) .25s forwards,signHum 5.5s ease-in-out 2.4s infinite}
@keyframes signOn{0%{opacity:0}9%{opacity:1}13%{opacity:.12}21%{opacity:1}27%{opacity:.3}36%,100%{opacity:1}}
@keyframes signHum{0%,100%{opacity:1}50%{opacity:.84}}
/* dans le noir : l'enseigne blanche, allumée de l'intérieur */
.feature.is-dark .sign__base{fill:#fffaf5}
.feature.is-dark .feature__sign .sign__halo{opacity:0;animation:none}
.feature.is-dark .sign__glow{opacity:.9;filter:brightness(1.3) saturate(1.15);animation:signGlow 5.5s ease-in-out infinite}
@keyframes signGlow{0%,100%{opacity:.9}50%{opacity:.74}}
.feature.is-dark .sign__light{opacity:.62}
/* les éclats : de petites étoiles de lumière qui s'allument un instant sur les lettres */
.sign__sparks{position:absolute;inset:0}
.sign__sparks i{position:absolute;width:calc(26px * var(--s,1));aspect-ratio:1;translate:-50% -50%;opacity:0;mix-blend-mode:screen}
.sign__sparks i::before,.sign__sparks i::after{
  content:"";position:absolute;left:0;top:50%;width:100%;height:2px;margin-top:-1px;border-radius:2px;
  background:linear-gradient(90deg,rgba(255,255,255,0),#fff 50%,rgba(255,255,255,0));box-shadow:0 0 6px rgba(255,255,255,.8);
}
.sign__sparks i::after{rotate:90deg}
.feature__sign.is-lit .sign__sparks i{animation:spark var(--t,3s) ease-in-out calc(1.8s + var(--d,0s)) infinite}
@keyframes spark{0%,100%{opacity:0;scale:.2;rotate:0deg}10%{opacity:1;scale:1;rotate:40deg}22%{opacity:0;scale:.35;rotate:85deg}}
@media (prefers-reduced-motion:reduce){
  .feature__sign .sign__halo{opacity:1;animation:none}
  .feature.is-dark .sign__glow{animation:none}
  .sign__sparks{display:none}
}
.feature__item{position:relative;perspective:1000px}
/* Tant que les toiles sont recouvertes (is-veiled, posé par main.js), l'interrupteur et le cartel sont repliés et cachés ;
   une fois découvertes, ils se déplient sous les toiles (la hauteur suit grid-template-rows). is-still : la mise en
   place du départ, sans animation. */
.feature__info{
  position:relative;z-index:1;display:grid;grid-template-rows:1fr;
  transition:grid-template-rows 1s var(--ease-io) .35s,opacity .8s var(--ease-out) .65s,translate 1s var(--ease-out) .65s;
}
.feature.is-veiled .feature__info{grid-template-rows:0fr;opacity:0;translate:0 24px;visibility:hidden;transition:grid-template-rows .5s var(--ease-io),opacity .3s,translate .3s,visibility 0s .5s}
.feature.is-still .feature__info{transition:none}
.feature__in{min-height:0;overflow:hidden;display:grid;justify-items:center;gap:22px;padding:clamp(26px,3.6vh,40px) 8px 16px}
/* le cartel des toiles du mois : la plaque du défilement, centrée ; il se grave de gauche à droite une fois déplié */
.feature__plate{text-align:center;padding:12px 44px 11px;min-width:230px}
/* le bouton vers le défilement mono-tableau, bien plus bas que le cartel et plus large que lui : un simple filet noir sur
   le béton, le mot et la flèche en noir ; la flèche, fine et longue, descend doucement. Rien ne bouge au survol. */
.feature__go{
  display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:clamp(34px,6.5vh,72px);
  width:340px;max-width:calc(100vw - 2 * var(--gutter) - 16px);padding:14px 26px 9px;
  border:1px solid var(--ink);border-radius:2px;color:var(--ink);text-decoration:none;
  font-family:var(--font-display);font-stretch:82%;font-weight:600;font-size:14px;line-height:1;letter-spacing:.26em;text-transform:uppercase;
}
.feature__go-label{padding-left:.26em}   /* l'espacement des lettres laisse un blanc après la dernière : on le rend à gauche pour centrer le mot */
.feature__down{display:block;line-height:0}
.feature__down svg{width:12px;height:22px;fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;animation:goDown 2.8s ease-in-out infinite}
@keyframes goDown{0%,100%{transform:translateY(-1px)}50%{transform:translateY(3px)}}
.feature.is-dark .feature__go{color:#e8e6df;border-color:rgba(232,230,223,.55)}
@media (prefers-reduced-motion:reduce){
  .feature__down svg{animation:none}
}
.feature__plate .plate__title{font-size:21px;line-height:1;letter-spacing:.22em}
.feature__plate .plate__meta{margin-top:6px;font-size:12px;line-height:1.2;letter-spacing:.14em}
.js .feature:not(.is-veiled) .plate__in{clip-path:inset(-6px);transition-delay:1s}
.feature__frame{
  position:relative;display:block;padding:var(--fgap);background:var(--frame-in);
  border-style:solid;border-width:var(--fw);border-color:var(--frame-hi) var(--frame) var(--frame-lo) var(--frame-mid);
  box-shadow:0 0 0 1px rgba(20,18,18,.5),0 2px 5px rgba(20,18,18,.28);
  transition:border-color .35s,background-color .35s;
}
.feature__frame::after{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 3px 7px rgba(0,0,0,.55)}
.feature__open{position:relative;display:block;width:100%}
.feature__open .art{height:auto;aspect-ratio:var(--arn,1);overflow:hidden;background:var(--tone)}
/* la couche à gratter : un noir mat, à peine plus clair en haut. Son ombre portée donne une épaisseur aux bords grattés */
.feature__cover{position:absolute;z-index:1;inset:var(--fgap);overflow:hidden;background:#1d1d1f;transition:opacity .9s var(--ease-out)}
.feature__cover.is-painted{background:none}
.feature__cover canvas{display:block;width:100%;height:100%;touch-action:pan-y;filter:drop-shadow(0 1px 1.2px rgba(0,0,0,.65))}
.feature__cover.is-held canvas{touch-action:none}
.feature__cover.is-gone{opacity:0;pointer-events:none}
.has-cursor .feature__cover canvas{cursor:none}
/* à la souris, le grattoir : un anneau fin de la taille de ce qu'il emporte ; sur l'autre toile, son fantôme */
.feature__ring{
  position:absolute;left:0;top:0;border:1.5px solid rgba(255,255,255,.85);border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.25),inset 0 0 0 1px rgba(0,0,0,.25);opacity:0;transition:opacity .25s;
}
.feature__art.is-scratching .feature__ring{opacity:.4}
.feature__cover.is-hover .feature__ring{opacity:1}
.cursor.is-scratch{visibility:hidden}
.feature__flakes{position:absolute;z-index:3;left:0;top:0;width:100%;height:calc(100% + 20vh);pointer-events:none}
/* l'interrupteur des toiles phosphorescentes, le même que dans le défilement (la bascule, son libellé dessous), posé
   au milieu sous les toiles */
.feature__switch{position:relative;z-index:auto;inset:auto;transform:none}
/* Dans le noir : la pénombre sur le mur (comme dans le défilement), chaque toile passe à sa photo prise dans le noir,
   un peu de sa lueur se pose sur le mur autour du cadre */
.feature__dark{
  position:absolute;z-index:0;inset:0;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(110% 85% at 50% 42%,rgba(22,19,34,.5) 0%,rgba(14,12,22,.6) 55%,rgba(8,7,13,.68) 100%);
}
.feature.is-dark .feature__dark{opacity:1;transition-duration:.22s}
.feature__open .art--night{position:absolute;inset:0;width:auto;height:auto;background:#07080d;opacity:0;transition:opacity .3s ease}
.feature.is-dark .feature__open .art--night{opacity:1;transition:opacity .35s ease .05s}
.feature.is-dark .art--night::after{opacity:.18;transition:opacity 45s linear 2s}
.feature__glow{
  position:absolute;z-index:-1;left:-3%;right:-3%;top:-3%;aspect-ratio:var(--arn,1);pointer-events:none;background:center/cover no-repeat;
  filter:blur(40px) saturate(1.5);opacity:0;transition:opacity .35s;
}
.feature.is-dark .feature__glow{opacity:.5;transition:opacity .6s ease .1s}
.feature.is-dark .feature__frame{border-color:#202024 #1a1a1d #141416 #18181b;background-color:#08080a}
.feature.is-dark .switch{color:#b4b1bd}
.feature.is-dark .switch:focus-visible .switch__plate{outline-color:#e8e6df}
@supports (height:100svh){
  .feature{min-height:100svh}
}

/* ================= CONTACT ================= */
.contact{position:relative;overflow:hidden;border-top:var(--line);padding:var(--gap) var(--gutter)}
.contact > :not(.contact__chips){position:relative;z-index:1}
.contact h2{max-width:11em;font-size:clamp(40px,6.6vw,104px);font-stretch:75%;margin-bottom:clamp(28px,3.4vw,48px)}
/* le compte Instagram de l'artiste : la grande plaque du site, sa flèche part vers l'autre site au survol,
   et dessous, discret, le nom du compte */
.contact__insta{display:grid;justify-items:start;gap:14px}
.contact__insta .plate-btn__go svg{width:22px;height:22px}
.contact__insta .plate-btn:hover .plate-btn__go svg,.contact__insta .plate-btn:focus-visible .plate-btn__go svg{transform:translate(3px,-3px)}
.contact__handle{font-size:13px;letter-spacing:.04em;color:var(--muted)}
.contact__chips{position:absolute;inset:0;pointer-events:none}
.contact__chips i{position:absolute;left:var(--x);top:var(--y);width:var(--w);aspect-ratio:var(--ar);border-radius:var(--r-card);background:var(--c);will-change:transform}

/* ================= PIED DE PAGE ================= */
.footer{overflow:hidden;border-top:var(--line);padding:48px var(--gutter) 0;background:var(--cream)}
.footer__top{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;flex-wrap:wrap}
.footer__claim{font-size:18px;line-height:1.25;letter-spacing:.01em}
.footer__nav{display:grid;gap:6px;font-size:15px;justify-items:start}
.totop{
  width:56px;height:56px;display:grid;place-items:center;border:var(--line);border-radius:50%;background:var(--paper);
  font-size:20px;line-height:1;overflow:hidden;transition:background-color .3s,color .3s;
}
.totop:hover{background:var(--cobalt);color:var(--paper)}
.totop:hover span{animation:lift .6s var(--ease-io)}
@keyframes lift{0%{transform:none}49%{transform:translateY(-140%)}50%{transform:translateY(140%)}100%{transform:none}}
.totop span{display:block}
.footer__bottom{display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;margin-top:56px;padding-top:14px;border-top:var(--line);color:var(--muted)}
/* à côté du copyright, le lien vers les mentions légales */
.footer__legal a{margin-left:1.6em;color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em;transition:color .3s}
.footer__legal a:hover,.footer__legal a:focus-visible{color:var(--ink)}
/* le nom en grand : main.js ajuste le corps pour qu'il occupe toute la largeur, les lettres montent du bord de la page */
.footer__word{
  font-size:25vw;line-height:.8;letter-spacing:.02em;white-space:nowrap;text-align:center;
  margin:clamp(16px,2.4vw,40px) 0 0;padding-bottom:calc(.05em + env(safe-area-inset-bottom,0px));cursor:default;user-select:none;
}
.footer__word .w{overflow:visible}
.footer__word .c{transition:color .35s,translate .6s var(--ease-back),rotate .6s var(--ease-back)}
.footer__word .c:hover{color:var(--pc,var(--cobalt));translate:0 -.07em;rotate:-5deg}

@media (max-width:860px){
  .strips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));height:auto;gap:6px}
  .strip{height:54px}
  .js .strip{transition:clip-path 1.1s var(--ease-io) calc(var(--i) * 40ms)}
  .strip__hex{display:none}
  .strip__label{left:14px;right:10px;top:0;bottom:0;display:flex;align-items:center;opacity:1;transform:none}
  .strip__label .mono{display:none}
  .strip__name{font-size:20px;margin-bottom:0;overflow:hidden;text-overflow:ellipsis}
  .strip:last-child:nth-child(odd){grid-column:1/-1}   /* nombre impair de teintes : la dernière prend toute la largeur */
  .strip--glow{--halo:0 0 10px 1px rgba(205,255,185,.85),0 0 26px 3px rgba(160,255,140,.36);--halo-lo:0 0 7px 0 rgba(205,255,185,.65),0 0 18px 2px rgba(160,255,140,.24)}
  /* sur téléphone : la section prend la hauteur de son contenu, les deux toiles restent côte à côte, plus serrées,
     et leurs caractéristiques se déplient dessous, sur une colonne */
  .feature{min-height:0;--avail:56vh;--pg:clamp(18px,5.5vw,30px)}
  .contact__chips{display:none}
}