/* A.Derda : feuille de style partagée par toutes les pages. Fabriquée le 13/09/2026 à partir du CSS
   qui vivait dans chaque page. Cache un an (netlify.toml) : changer ?v= dans les pages après une retouche,
   avec _tools/version.py. */
/* Polices Unbounded et Bricolage Grotesque, licence OFL, sous-ensemble latin, servies depuis fonts/ et préchargées
   par chaque page. Aucune requête vers Google. */
@font-face{font-family:'Unbounded';font-style:normal;font-weight:200 900;font-display:swap;src:url(fonts/unbounded.woff2?v=2.6) format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/bricolage-grotesque.woff2?v=2.6) format('woff2')}

/* ------------------------------------------------------------------
   A.Derda : landing page
   Concept : le site est un portrait. Le fond est une peinture vivante
   qui change d'univers à chaque section, comme chaque client reçoit
   le sien. Sept pigments, un par section : outremer, vermillon, os, encre, ocre, vert profond, cobalt.
------------------------------------------------------------------- */
:root{
  --bone:#F3EDE1;
  --ink:#17130F;
  --ultra:#1C2270;
  --vermilion:#C4301A;
  --cobalt:#3C5BFF;
  --lilac:#C3B4FF;
  --ochre:#F2B63C;

  --fg:var(--bone);
  --fg-inverse:var(--ultra);
  /* --fg-rgb : la même couleur en triplet, pour rgb(… / alpha). --fg-2 : le second niveau de texte, calculé par site.js à
     chaque monde pour rester au-dessus de 5:1 sur la peinture du moment (audit du 15/09 : l'opacité posait vingt textes sous
     4,5:1). Aucun texte posé sur la peinture n'est atténué par l'opacité ; la valeur ci-dessous sert sans JavaScript. */
  --fg-rgb:243 237 225;
  --fg-2:190 188 200;

  --display:'Unbounded', 'Arial Black', sans-serif;
  --text:'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;

  --gutter:clamp(20px, 6vw, 96px);
  --t-1:clamp(1rem, .95rem + .25vw, 1.15rem);
  --t-2:clamp(1.15rem, 1rem + .6vw, 1.5rem);
  --t-3:clamp(1.7rem, 1.1rem + 2.1vw, 3.3rem);
  --t-hero:clamp(2.2rem, .4rem + 8vw, 12rem);

  --gallery-vh:420;
}
html[data-theme="light"]{ --fg:var(--ink); --fg-inverse:var(--bone); --fg-rgb:23 19 15; --fg-2:78 74 68; }

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.lenis{scroll-behavior:auto}
body{
  margin:0;
  font-family:var(--text);
  font-size:var(--t-1);
  line-height:1.5;
  color:var(--fg);transition:color .25s ease;   /* toute la page suit le thème du monde traversé (os sur sombre, encre sur clair) */
  background:var(--ultra);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
html.has-cursor body, html.has-cursor a{cursor:none}
::selection{background:var(--vermilion);color:var(--bone)}
:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:400}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;top:-100px;left:var(--gutter);z-index:100;padding:.6rem 1rem;background:var(--bone);color:var(--ink);text-decoration:none}
.skip:focus{top:1rem}

/* --- Fond peint --- */
#paint{
  position:fixed;inset:0;z-index:0;
  width:100%;height:100%;
  /* peinture WebGL (site.js), rendue en demi-résolution et agrandie : ni flou ni filtre, le lissage suffit */
  pointer-events:none;
}
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.09;
  mix-blend-mode:overlay;background-size:220px 220px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.page{position:relative;z-index:2}
.page > *{color:var(--fg);transition:color .25s ease}   /* chaque bloc reprend la couleur de texte de son propre monde (--fg posé par site.js, poserTexte) */

/* --- Curseur --- */
.cursor{position:fixed;top:0;left:0;z-index:50;pointer-events:none;opacity:0;transition:opacity .3s}
.cursor.is-on{opacity:1}
.cursor__dot{position:absolute;top:0;left:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--fg);transition:background .5s}
.cursor__ring{
  position:absolute;top:0;left:0;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;
  border:1px solid var(--fg);display:flex;align-items:center;justify-content:center;
  transition:width .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1),margin .35s cubic-bezier(.2,.8,.2,1),background .35s,border-color .5s;
}
.cursor.is-hover .cursor__ring{width:84px;height:84px;margin:-42px 0 0 -42px;background:var(--fg)}
.cursor__label{font-size:.78rem;letter-spacing:.01em;color:var(--fg-inverse);opacity:0;transition:opacity .2s}
.cursor.is-hover .cursor__label{opacity:1}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* --- Navigation --- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:10;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.3rem var(--gutter);color:var(--fg);transition:color .5s ease,transform .55s cubic-bezier(.16,1,.3,1);
}
/* Un voile léger derrière la navigation, pour qu'elle reste lisible sur ce qui passe dessous ; elle s'efface à la
   descente et revient dès qu'on remonte (updateNav). Jamais cachée quand un lien a le focus ou que le menu est ouvert. */
/* --bg : la base de la peinture du moment, posée par site.js ; le voile a toujours la couleur du monde traversé */
.nav::before{content:"";position:absolute;inset:0 0 -70%;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgb(var(--bg,28 34 112) / .55),rgb(var(--bg,28 34 112) / 0))}
html[data-theme="light"] .nav::before{background:linear-gradient(to bottom,rgb(var(--bg,243 237 225) / .78),rgb(var(--bg,243 237 225) / 0))}
.nav--hidden{transform:translateY(-100%)}
.nav:focus-within,html.menu-open .nav{transform:none}
.nav__brand{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.dot{width:.22em;height:.22em;fill:currentColor;flex:none}
.wordmark{height:20px;width:121px;fill:currentColor;display:block}
.nav__links{display:flex;gap:2.2rem}
.nav__links a{text-decoration:none;position:relative;padding-bottom:.15em}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.77,0,.18,1)}
.nav__links a:hover::after,.nav__links a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.nav__menu{display:none;font:inherit;color:inherit;background:none;border:0;padding:.6rem 0;cursor:pointer;min-height:44px}
/* le menu mobile laisse voir la peinture derrière un voile d'outremer ; ses liens arrivent l'un après l'autre */
.menu{position:fixed;inset:0;z-index:9;background:rgba(28,34,112,.86);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);color:var(--bone);display:flex;flex-direction:column;justify-content:center;gap:1.2rem;padding:0 var(--gutter);opacity:0;pointer-events:none;transition:opacity .35s ease}
.menu.is-open{opacity:1;pointer-events:auto}
.menu[hidden]{display:none}
.menu a{font-family:var(--display);font-weight:500;font-size:clamp(1.8rem, 1.2rem + 3vw, 2.6rem);letter-spacing:-.03em;text-decoration:none;line-height:1.1;opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.menu.is-open a{opacity:1;transform:none}
.menu a:nth-child(2){transition-delay:.06s}.menu a:nth-child(3){transition-delay:.12s}.menu a:nth-child(4){transition-delay:.18s}.menu a:nth-child(5){transition-delay:.24s}.menu a:nth-child(6){transition-delay:.3s}
@media (prefers-reduced-motion:reduce){.menu a{transition:none}}
.menu a.menu__mail{font-family:var(--text);font-weight:400;font-size:1rem;margin-top:1.5rem;opacity:.8}
@media (max-width:640px){.nav__links{display:none}.nav__menu{display:block}html.menu-open{overflow:hidden}html.menu-open .nav{color:var(--bone)}}

/* --- Lien majeur --- */
.link-big{
  display:inline-block;font-family:var(--display);font-weight:400;
  font-size:clamp(1.05rem, .9rem + .8vw, 1.6rem);line-height:1;letter-spacing:-.01em;
  text-decoration:none;position:relative;padding-bottom:.32em;
}
.link-big::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:currentColor;transform-origin:right}
.link-big:hover::after,.link-big:focus-visible::after{animation:lineswap .7s cubic-bezier(.77,0,.18,1)}
@keyframes lineswap{
  0%{transform:scaleX(1);transform-origin:right}
  49%{transform:scaleX(0);transform-origin:right}
  50%{transform:scaleX(0);transform-origin:left}
  100%{transform:scaleX(1);transform-origin:left}
}

/* --- Hero --- */
.hero{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  gap:clamp(2rem, 5vh, 4rem);
  padding:8rem var(--gutter) clamp(3rem, 10vh, 6rem);
}
.hero__title{
  font-family:var(--display);font-size:var(--t-hero);line-height:.96;letter-spacing:-.045em;
  will-change:transform,opacity;
}
.hero__line{display:block;overflow:hidden;padding:.04em 0 .08em;margin-bottom:-.08em}
.hero__word{display:inline-block}
.has-js .hero__word{transform:translateY(115%)}
.hero__word--bold{font-weight:800}
.hero__word--light{font-weight:200;letter-spacing:-.03em}
.is-loaded .hero__word{animation:rise 1.2s cubic-bezier(.16,1,.3,1) .35s forwards} /* le titre monte quand la peinture a commencé à se répandre */
.is-loaded .hero__line:nth-child(2) .hero__word{animation-delay:.49s}
@keyframes rise{to{transform:translateY(0)}}
.hero__bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem 4rem;flex-wrap:wrap}
.hero__lead{max-width:44ch;font-size:var(--t-2);line-height:1.45}
.hero__proof{margin-top:1.2rem;font-size:.95rem;color:rgb(var(--fg-2));max-width:40ch}
.hero__proof a{text-underline-offset:.2em}
.has-js .hero__lead,.has-js .hero .link-big,.has-js .hero__proof{opacity:0}
.is-loaded .hero__lead,.is-loaded .hero .link-big{animation:fade 1.2s ease .5s forwards}
.is-loaded .hero__proof{animation:fade 1.2s ease .8s forwards}
@keyframes fade{to{opacity:1}}
.hero__scroll{position:absolute;left:50%;bottom:2.2rem;width:1px;height:56px;background:rgba(243,237,225,.25);overflow:hidden}
.hero__scroll i{position:absolute;left:0;top:0;width:100%;height:40%;background:var(--bone);animation:scrollcue 2.2s cubic-bezier(.77,0,.18,1) infinite}
@keyframes scrollcue{0%{transform:translateY(-100%)}100%{transform:translateY(260%)}}
@media (max-width:900px){.hero__scroll{display:none}}

/* --- Manifeste (texte révélé au scroll) --- */
.statement__scroll{height:220vh}
.statement__pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;padding:0 var(--gutter)}
.statement__text{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.35rem, .5rem + 3.1vw, 4.4rem);line-height:1.12;letter-spacing:-.03em;   /* en grand, sur toute la largeur : l'écran rouge devient une page (piste 6 de l'audit 2) */
  max-width:34ch;
}
/* chaque mot est peint par un dégradé qui avance sur lui (--lit, site.js) : allumé à gauche, éteint à droite. Les mots éteints ne
   passent pas par l'opacité : la part allumée garde toute sa couleur, le reste est un ton de la même encre. */
.statement__text .w{background-image:linear-gradient(90deg,var(--fg) var(--lit,0%),rgb(var(--fg-rgb) / .28) var(--lit,0%));background-clip:text;color:transparent}
.pillars{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3rem var(--gutter);
  padding:6vh var(--gutter) 28vh;
}
.pillar h2{font-family:var(--display);font-weight:500;font-size:var(--t-3);line-height:1;letter-spacing:-.03em;margin-bottom:.6em}
.pillar p{max-width:34ch}
@media (max-width:900px){.pillars{grid-template-columns:1fr;gap:2.4rem}}

/* --- Un mot pour vous décrire --- */
/* Un frein (demande d'Alexandre du 14/09/2026) : la section est une piste de deux écrans et sa grille reste collée en haut
   le temps du premier ; on ne peut pas la traverser d'un coup de molette. Après un choix, la piste s'allonge pour que
   la grille, plus haute, ait la place de se dérouler. --p (site.js) va de 0 à 1 le long de la piste. */
.mood{height:200vh;padding:0 var(--gutter)}
.mood.has-choice{height:280vh}
.mood__label{font-size:.95rem;color:rgb(var(--fg-2));margin-bottom:1.4rem}
.mood__intro{font-size:var(--t-2);line-height:1.45;max-width:34ch;margin:-.4rem 0 1.2rem} /* dit au visiteur quoi faire avant qu'il ait touché un mot */
.mood__choices{display:flex;flex-wrap:wrap;gap:0 2.2rem;margin-bottom:clamp(1.5rem, 5vh, 3.5rem)}
/* les quatre mots : l'interaction principale du site, en grand et en pleine couleur (ils étaient à 60 %, plus petits que le
   paragraphe qui les présente, audit du 15/09). Le choix se voit au trait dessous. */
.mood__btn{font-family:var(--display);font-weight:500;font-size:clamp(1.3rem, .9rem + 1.2vw, 2rem);letter-spacing:-.03em;line-height:1.1;color:inherit;background:none;border:0;border-bottom:2px solid transparent;padding:.4rem 0 .25rem;min-height:44px;cursor:pointer;transition:border-color .3s}
.mood__btn:hover,.mood__btn:focus-visible{border-bottom-color:rgb(var(--fg-2))}
.mood__btn[aria-pressed="true"]{border-bottom-color:currentColor}
.mood__word{font-family:var(--display);font-weight:500;font-size:clamp(2.8rem, .5rem + 10.4vw, 15rem);line-height:.95;letter-spacing:-.045em;white-space:nowrap;transition:font-weight .9s ease,letter-spacing .9s ease,font-size .6s ease}
.mood[data-mood="calme"] .mood__word{font-weight:200;letter-spacing:.02em}
.mood[data-mood="audacieux"] .mood__word{font-weight:900;letter-spacing:-.06em}
.mood[data-mood="brut"] .mood__word{font-weight:800;letter-spacing:-.05em;text-transform:uppercase}
.mood[data-mood="lumineux"] .mood__word{font-weight:300;letter-spacing:.08em}
.mood__note{margin-top:1.6rem;font-size:var(--t-2);max-width:40ch;opacity:0;transform:translateY(8px);transition:opacity .6s ease .25s,transform .6s ease .25s}
.mood.has-choice .mood__note{opacity:1;transform:none}
.mood__grid{position:sticky;top:0;min-height:100svh;padding:12vh 0 18vh;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:3rem var(--gutter);align-items:center;align-content:center;perspective:1400px}
/* avant le choix, l'aperçu est déjà là, dessiné dans le vermillon en cours (piste 5 de l'audit 2) : il s'affirme avec le
   défilement (--p) et se recolore au clic. Le grand mot respire tant que rien n'est choisi. */
.mood:not(.has-choice) .portrait{opacity:1;transform:translateY(calc((1 - min(1, var(--p,0) * 3)) * 18px)) rotate(1.5deg)}
.mood:not(.has-choice) .mood__word{animation:respire 7s ease-in-out infinite}
@keyframes respire{0%,100%{font-weight:500}50%{font-weight:300}}
.mood__more{display:grid;gap:.2rem;max-height:0;overflow:hidden;opacity:0;transition:max-height .9s cubic-bezier(.16,1,.3,1),opacity .6s ease .15s}
.mood.has-choice .mood__more{max-height:520px;opacity:1}
.mood__more .mood__label{margin:.9rem 0 .2rem}
.mood__acts{display:flex;flex-wrap:wrap;gap:0 1.4rem}
.mood__act{font-family:var(--text);font-size:.98rem;color:rgb(var(--fg-2));background:none;border:0;border-bottom:1px solid transparent;padding:.5rem 0 .25rem;min-height:40px;cursor:pointer;transition:color .3s,border-color .3s}
.mood__act:hover,.mood__act:focus-visible,.mood__act[aria-pressed="true"]{color:inherit}
.mood__act[aria-pressed="true"]{border-bottom-color:currentColor}
.mood__swatches{display:flex;gap:.8rem;padding:.4rem 0 .2rem}
.mood__swatch{width:26px;height:26px;border-radius:50%;background:var(--sw);border:0;padding:0;cursor:pointer;box-shadow:0 0 0 2px transparent;transition:transform .3s,box-shadow .3s;opacity:.85}
.mood__swatch:hover,.mood__swatch:focus-visible{transform:scale(1.15);opacity:1}
.mood__swatch[aria-pressed="true"]{box-shadow:0 0 0 2px currentColor;opacity:1}
.mood__actions{display:flex;align-items:baseline;gap:1.2rem 2rem;flex-wrap:wrap;margin-top:1.6rem;opacity:0;transition:opacity .6s ease .4s}
.mood.has-choice .mood__actions{opacity:1}
.mood__share{font:inherit;font-size:.95rem;color:rgb(var(--fg-2));background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
.mood__share:hover,.mood__share:focus-visible{color:inherit}
.mood__status{font-size:.9rem;color:rgb(var(--fg-2))}
.mood__name{display:block;max-width:22ch;margin-bottom:1.6rem}
.mood__name span{display:block;font-size:.95rem;color:rgb(var(--fg-2));margin-bottom:.3rem}
.mood__name input{font:inherit;font-family:var(--display);font-weight:400;font-size:1.05rem;letter-spacing:-.02em;color:inherit;background:transparent;border:0;border-bottom:1px solid rgb(var(--fg-2));border-radius:0;padding:.4rem 0;width:100%;outline:none}
.mood__name input:focus{border-bottom-color:currentColor}

/* Le portrait : un mini-site dessiné avec la palette choisie */
.portrait{
  --p-bg:#C4301A; --p-fg:#F3EDE1; --p-accent:#E25634;
  position:relative;aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:var(--p-bg);color:var(--p-fg);
  box-shadow:0 50px 90px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.14);
  opacity:0;transform:translateY(24px) rotate(1.5deg);
  transition:opacity .8s ease,transform 1.1s cubic-bezier(.16,1,.3,1),background 1s ease,color 1s ease;
  font-family:var(--display);transform-style:preserve-3d;
}
.mood.has-choice .portrait{transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:opacity .8s ease,transform .5s ease,background 1s ease,color 1s ease}
.portrait::before{content:"";position:absolute;inset:-30%;background:radial-gradient(circle at 30% 20%,var(--p-accent) 0,transparent 45%),radial-gradient(circle at 80% 90%,var(--p-accent) 0,transparent 40%);opacity:.75;filter:blur(30px);transition:background 1s ease}
.mood.has-choice .portrait{opacity:1}
.portrait__page{position:absolute;left:0;right:0;top:0;will-change:transform}
.portrait__bar{display:flex;justify-content:space-between;align-items:center;padding:1.1rem 1.3rem;font-size:.8rem;letter-spacing:-.02em}
.portrait__nav{display:flex;gap:.9rem;font-family:var(--text);font-size:.72rem;opacity:.75}
.portrait__hero{padding:12% 1.3rem 10%}
.portrait__title{font-size:clamp(1.3rem, .8rem + 1.7vw, 2.3rem);line-height:1.02;letter-spacing:-.04em;font-weight:500;max-width:11ch;transition:font-weight .9s ease,letter-spacing .9s ease}
.portrait__sub{font-family:var(--text);font-size:.85rem;opacity:.8;max-width:26ch;margin:.9rem 0 1.3rem}
.portrait__btn{display:inline-block;font-size:.8rem;letter-spacing:-.01em;padding:.55rem .95rem;border-radius:999px;background:var(--p-fg);color:var(--p-bg);transition:background 1s ease,color 1s ease}
.portrait__offers{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;padding:0 1.3rem}
.portrait__offers i{display:block;aspect-ratio:1;border-radius:4px;background:currentColor;opacity:.12;margin-bottom:.45rem;transition:background 1s}
.portrait__offers span{font-family:var(--text);font-size:.7rem;opacity:.85;display:block;line-height:1.2}
.portrait__quote{font-family:var(--text);font-size:.95rem;line-height:1.4;padding:14% 1.3rem 12%;max-width:24ch;opacity:.9}
.portrait__end{display:flex;justify-content:space-between;align-items:center;padding:1.3rem 1.3rem 1.4rem;font-size:.8rem;border-top:1px solid currentColor;margin:0 1.3rem}
.portrait__end .portrait__brand{font-size:1rem}
.portrait__btn--ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.mood[data-mood="calme"] .portrait__title{font-weight:200;letter-spacing:.01em}
.mood[data-mood="audacieux"] .portrait__title{font-weight:900;letter-spacing:-.06em}
.mood[data-mood="brut"] .portrait__title{font-weight:800;letter-spacing:-.05em;text-transform:uppercase}
.mood[data-mood="lumineux"] .portrait__title{font-weight:300;letter-spacing:.05em}
.mood[data-mood="brut"] .portrait__btn{border-radius:0}
.mood[data-mood="calme"] .portrait__btn{background:transparent;color:var(--p-fg);box-shadow:inset 0 0 0 1px var(--p-fg)}
.mood[data-mood="brut"] .portrait__offers i{border-radius:0}
@media (max-width:900px){.mood__grid{grid-template-columns:minmax(0,1fr);gap:2.5rem}.portrait{max-width:min(300px, 76vw)}}   /* assez petite pour tenir sous le mot dans l'écran collé */
@media (prefers-reduced-motion:reduce){.mood__word,.mood__note,.mood,.portrait,.portrait::before,.portrait__title,.portrait__btn,.mood__more,.mood__actions{transition:none}.mood:not(.has-choice) .mood__word{animation:none}}

/* --- Méthode (univers os, texte encre) --- */
.process{padding:28vh var(--gutter) 30vh} /* la couleur du texte vient du body : encre sur le monde os, os avant qu'il n'arrive */
.process__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:4rem var(--gutter)}
.process__intro{position:sticky;top:16vh;align-self:start}
.process h2{font-family:var(--display);font-weight:500;font-size:var(--t-3);line-height:1.05;letter-spacing:-.03em;margin-bottom:1.2rem}
.process__intro p{max-width:36ch}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(3rem, 9vh, 7rem)}
.step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.6rem;align-items:start}
.step__n{
  font-family:var(--display);font-weight:200;
  font-size:clamp(3rem, 2rem + 4vw, 6.4rem);line-height:.85;min-width:1.1em;letter-spacing:-.04em;
}
.step h3{font-family:var(--display);font-weight:500;font-size:clamp(1.3rem, 1.05rem + 1vw, 2rem);line-height:1.05;letter-spacing:-.025em;margin:.2em 0 .5em}
.step p{max-width:42ch}
@media (max-width:900px){
  .process__grid{grid-template-columns:1fr;gap:3rem}
  .process__intro{position:static}
}

/* --- Réalisations : une galerie, au pied de la lettre (piste 1 de l'audit 2). Le mur est la peinture d'encre ; chaque site est
   une toile accrochée, cadre fin en os, un spot qui tombe dessus, un cartel dessous. Dans la toile, la vraie page défile
   lentement (updateSites). Sur ordinateur la galerie est épinglée et défile de côté ; sur téléphone elle se parcourt au
   doigt, toile par toile. --- */
.gallery{position:relative;height:calc(var(--gallery-vh) * 1vh)}
.gallery__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center;will-change:opacity}
.gallery__track{display:flex;gap:5vw;padding:0 var(--gutter);height:82vh;height:82svh;align-items:center;will-change:transform}
.panel{position:relative;flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;gap:1.4rem;height:100%}
.panel--intro{width:34vw;justify-content:flex-end;padding-bottom:1.6rem}
.panel--intro h2{font-family:var(--display);font-weight:500;font-size:var(--t-3);line-height:1;letter-spacing:-.03em;margin-bottom:1rem}
.panel--intro p{max-width:30ch}
/* le spot : une lumière qui tombe du haut sur la toile et la détache du mur */
.panel--site::before,.panel--book::before,.panel--vide::before{content:"";position:absolute;left:-12%;right:-12%;top:-18%;height:90%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 70% at 50% 0%, rgba(243,237,225,.3), rgba(243,237,225,.08) 45%, transparent 70%)}
.toile{position:relative;z-index:1;height:calc(82vh - 8.5rem);height:calc(82svh - 8.5rem);aspect-ratio:4/3;max-width:100%;background:#000;
  border:var(--cadre-l,7px) solid var(--bone);
  box-shadow:0 34px 60px -22px rgba(0,0,0,.85), 0 6px 14px -6px rgba(0,0,0,.6);transition:transform .8s cubic-bezier(.16,1,.3,1)}
.toile::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 6px 10px -4px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.4)}   /* l'ombre de la feuillure sur l'œuvre */
/* Les cadres sur mesure (15/09/2026, direction artistique : quatre ateliers, un par client), fabriqués par _tools/cadres.py en
   neuf tranches (coins de 128 px). Épaisseur en part du petit côté de la toile : sur ordinateur, la hauteur des toiles 4:3 et 80 %
   de celle des 4:5 ; sur téléphone, 78vw. OSE : le blanc de ses lettres et le carré d'or de « OSE. ». Camille : l'ébène à ondes
   des tableaux hollandais. Believe : la pierre de paras gravée de la fleur de vie de son sceau. Votre projet : un cadre gravé sur
   la même feuille que la toile, sans ombre de feuillure. */
/* site.js dessine chaque cadre (data-cadre) dans une toile de dessin posée sur la bordure (.toile__cadre), à l'approche de la
   galerie : en border-image, un trait d'un pixel passait entre le coin et le côté dès que la galerie glissait. La bordure garde
   l'épaisseur ; sans JavaScript, les toiles n'ont qu'un simple filet os. */
.toile--ose{--cadre-l:calc((82svh - 8.5rem) * .09)}
.toile--book{--cadre-l:calc((82svh - 8.5rem) * .088)}
.toile--believe{--cadre-l:calc((82svh - 8.5rem) * .08)}
.toile--vide{--cadre-l:calc((82svh - 8.5rem) * .072)}
html.has-js .toile[data-cadre]{border-color:transparent}
html:not(.has-js) .toile{--cadre-l:7px}
.toile__cadre{position:absolute;z-index:4;left:calc(var(--cadre-l) * -1);top:calc(var(--cadre-l) * -1);width:calc(100% + 2 * var(--cadre-l));height:calc(100% + 2 * var(--cadre-l));pointer-events:none}
.toile--vide::after{box-shadow:none}
.panel:hover .toile{transform:translateY(-6px)}
.site__ecran{position:absolute;inset:0;overflow:hidden}
.site__ecran img{display:block;width:100%;height:auto;will-change:transform}
.toile--book{aspect-ratio:4/5;background:var(--site-tint,#0F0C0A)}
.book{position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent)}
.book__strip{display:flex;flex-direction:column;gap:14px;padding:12% 8%;will-change:transform}
.book__strip img{display:block;width:100%;height:auto;box-shadow:0 0 0 1px rgba(243,237,225,.14)}
.toile--vide{aspect-ratio:4/5;background:var(--bone) padding-box}   /* la toile nue ; son cadre gravé (border-image) est tiré sur la même feuille */
.panel__art{position:absolute;inset:0;width:100%;height:100%;display:block}
.cartel{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;padding:0 .2rem}
.cartel h3{font-family:var(--display);font-weight:500;font-size:clamp(1.2rem, 1rem + 1vw, 1.9rem);line-height:1;letter-spacing:-.03em;margin-bottom:.45em}
.cartel p{max-width:36ch;font-size:.95rem;color:rgb(var(--fg-2))}
.cartel__tag{flex:none;font-size:.9rem;white-space:nowrap;color:rgb(var(--fg-2))}
.panel__link{position:absolute;inset:0;z-index:2;text-decoration:none}
@media (max-width:900px){
  .gallery{height:auto}
  .gallery__pin{position:static;height:auto;overflow:visible;display:block;padding:20vh 0 22vh;opacity:1!important}
  .gallery__track{height:auto;align-items:stretch;gap:5vw;padding:0 var(--gutter) 1rem;overflow-x:auto;scroll-snap-type:x mandatory;transform:none!important;scrollbar-width:none}
  .gallery__track::-webkit-scrollbar{display:none}
  .panel{flex:0 0 78vw;scroll-snap-align:center;height:auto;justify-content:flex-start}
  .panel--intro{width:78vw;justify-content:flex-end;padding-bottom:0}
  .toile{height:auto;width:100%;aspect-ratio:3/4}
  .toile--book,.toile--vide{aspect-ratio:4/5}
  .toile--ose{--cadre-l:7vw}
  .toile--book{--cadre-l:8.6vw}
  .toile--believe{--cadre-l:6.2vw}
  .toile--vide{--cadre-l:7vw}   /* sur téléphone, site.js prend la gravure aux tailles plus espacées (data-cadre-mobile) */
  .cartel{flex-direction:column;align-items:flex-start;gap:.5rem}
}

/* --- Tarifs (univers os) --- */
.pricing{padding:28vh var(--gutter) 24vh}
.pricing__head{margin-bottom:5rem}
.pricing h2{font-family:var(--display);font-weight:500;font-size:var(--t-3);line-height:1.05;letter-spacing:-.03em;margin-bottom:1.2rem}
.pricing__head p{max-width:52ch;font-size:var(--t-2);line-height:1.45}
.formulas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3.5rem var(--gutter);align-items:start}
.formula{border-top:2px solid currentColor;padding-top:1.5rem}
.formula h3{font-family:var(--display);font-weight:500;font-size:clamp(1.4rem, 1.1rem + 1.3vw, 2.2rem);letter-spacing:-.03em;line-height:1;margin-bottom:.6em}
.formula__for{max-width:30ch;color:rgb(var(--fg-2));min-height:3.1em}
.formula__price{font-family:var(--display);font-weight:200;font-size:clamp(2.4rem, 1.6rem + 3vw, 4.6rem);letter-spacing:-.045em;line-height:1;margin:1.4rem 0 0}
.formula__price small{display:block;font-family:var(--text);font-weight:400;font-size:.95rem;letter-spacing:0;color:rgb(var(--fg-2));margin-bottom:.35rem}
.formula ul{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:.55rem}
.formula li{position:relative;padding-left:1.1em}
.formula li::before{content:"";position:absolute;left:0;top:.62em;width:.38em;height:.38em;border-radius:50%;background:currentColor}
.formula__time{margin-top:1.6rem;font-size:.95rem;color:rgb(var(--fg-2))}
.pricing__options{margin:5.5rem 0 0;max-width:72ch;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7rem 2.2rem}
.pricing__options dt{font-weight:600}
.pricing__options dd{margin:0;color:rgb(var(--fg-2))}
.pricing__note{margin-top:3rem;max-width:60ch;font-size:.95rem;color:rgb(var(--fg-2))}
@media (max-width:900px){
  .formulas{grid-template-columns:1fr}
  .formula__for{min-height:0}
  .pricing__options{grid-template-columns:1fr;gap:.15rem 0}
  .pricing__options dd{margin-bottom:.8rem}
}

/* --- Qui dessine votre site (monde or : texte encre, comme la méthode) --- */
.about{padding:28vh var(--gutter) 24vh}
.about__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3rem var(--gutter);align-items:center}   /* la feuille au milieu de la hauteur du texte (piste 3 de l'audit 2) */
.about h2{font-family:var(--display);font-weight:500;font-size:var(--t-3);line-height:1.05;letter-spacing:-.03em;margin-bottom:clamp(2.5rem, 7vh, 5rem)}
.about__text{max-width:52ch;font-size:var(--t-2);line-height:1.5;display:grid;gap:1.2em}
/* la feuille : le portrait gravé au trait sur un papier posé sur la peinture. Avec JavaScript, site.js charge le SVG une seule
   fois et le met en ligne quand la section approche ; chaque trait se trace de --t pendant --d (écrits dans le SVG par
   _tools/portrait-gravure.py). Sans JavaScript, l'image du noscript montre la gravure finie. */
.about__side{display:grid;justify-items:start}
.feuille{margin:0;width:clamp(240px, 27vw, 400px);aspect-ratio:4/5;position:relative;color:var(--ink);transform:rotate(-2.2deg);animation:feuille-flotte 9s ease-in-out infinite}
/* l'ombre : un voile sombre flouté derrière la feuille, pour que le papier se détache de l'ocre (une ombre portée serait coupée par le bord déchiré) */
.feuille::before{content:"";position:absolute;inset:4% 5% 0;z-index:0;background:rgba(23,19,15,.42);filter:blur(22px);transform:translateY(16px)}
.feuille__dessin{position:relative;z-index:1;width:100%;height:100%;padding:5.5%;background:var(--bone);
  clip-path:polygon(0 .6%,2% 0,50% .4%,98.5% 0,100% 1.2%,99.6% 50%,100% 99%,97% 100%,50% 99.5%,1.5% 100%,0 98.8%,.4% 50%)}
.feuille__dessin img,.feuille__dessin svg{display:block;width:100%;height:100%}
.feuille svg path{stroke-dasharray:1;stroke-dashoffset:1}
.feuille.is-drawn svg path{animation:trait var(--d,.4s) linear var(--t,0s) forwards}
.feuille svg .lavis{opacity:0}
.feuille.is-drawn svg .lavis{animation:lavis 1.4s ease var(--t,3s) forwards}
@keyframes trait{to{stroke-dashoffset:0}}
@keyframes lavis{to{opacity:1}}
@keyframes feuille-flotte{0%,100%{transform:rotate(-2.2deg)}50%{transform:translateY(-6px) rotate(-1.3deg)}}
@media (max-width:900px){.about__grid{grid-template-columns:1fr;gap:2rem}.feuille{width:clamp(210px, 62vw, 300px)}}
@media (prefers-reduced-motion:reduce){.feuille{animation:none}.feuille svg path{stroke-dashoffset:0}.feuille svg .lavis{opacity:1}} /* la gravure finie, sans se tracer */

.cta{padding:28vh var(--gutter) 12vh}
.cta__title{
  font-family:var(--display);font-weight:200;
  font-size:clamp(2rem, .5rem + 9.6vw, 12rem);line-height:.98;letter-spacing:-.045em;margin-bottom:.4em;
}
.cta__text{max-width:46ch;font-size:var(--t-2);line-height:1.45;margin-bottom:2.4rem}
.cta .link-big{font-weight:500}
/* Le formulaire : une lettre (piste 2 de l'audit 2). On écrit à Alexandre sur une feuille de papier, la même que celle du portrait,
   posée sur la peinture cobalt : les champs sont des lignes d'écriture, le bouton un cachet vermillon. */
.lettre{position:relative;max-width:760px;margin-top:2.5rem}
.lettre::before{content:"";position:absolute;inset:4% 3% 0;z-index:0;background:rgba(6,8,30,.5);filter:blur(26px);transform:translateY(20px)}   /* l'ombre, hors de la feuille découpée */
.form{position:relative;z-index:1;color:var(--ink);--fg-2:96 88 78;background:var(--bone);padding:clamp(1.6rem, 4vw, 3rem) clamp(1.4rem, 4vw, 3rem) clamp(1.4rem, 3vw, 2.4rem);
  clip-path:polygon(0 .6%,2% 0,50% .4%,98.5% 0,100% 1.2%,99.6% 50%,100% 99%,97% 100%,50% 99.5%,1.5% 100%,0 98.8%,.4% 50%);transform:rotate(-.5deg)}
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 3rem}
.form__row{display:grid;gap:.5rem;margin-bottom:2.2rem}
.form label,.form legend{font-size:.95rem;color:rgb(var(--fg-2))}
.form input[type="text"],.form input[type="email"],.form textarea{
  font:inherit;color:inherit;background:transparent;border:0;border-bottom:1px solid rgb(var(--fg-2));
  padding:.55rem 0;border-radius:0;outline:none;resize:vertical;transition:border-color .3s;
}
.form input:focus,.form textarea:focus{border-bottom-color:currentColor}
.form input:focus-visible,.form textarea:focus-visible{outline:none}
.form__choices{border:0;padding:0;margin:0 0 2.4rem;display:flex;flex-wrap:wrap;gap:.7rem 1.6rem}
.form__choices legend{padding:0;margin-bottom:.9rem;width:100%}
.form__choices label{position:relative;cursor:pointer;opacity:1}
.form__choices input{position:absolute;opacity:0;width:1px;height:1px}
.form__choices span{font-family:var(--display);font-weight:400;font-size:1.05rem;letter-spacing:-.02em;padding-bottom:.25em;border-bottom:2px solid transparent;transition:border-color .3s,color .3s;color:rgb(var(--fg-2))}
.form__choices input:checked + span{color:inherit;border-bottom-color:currentColor}
.form__choices input:focus-visible + span{outline:2px solid currentColor;outline-offset:6px}
.form__foot{display:flex;align-items:center;gap:2rem;flex-wrap:wrap}
.form__submit{font-family:var(--display);font-weight:500;font-size:.9rem;letter-spacing:.05em;text-transform:uppercase;color:var(--bone);background:var(--vermilion);border:0;width:108px;height:108px;padding:0;border-radius:50%;cursor:pointer;
  outline:1px solid rgba(243,237,225,.55);outline-offset:-7px;transform:rotate(-8deg);box-shadow:0 14px 26px -12px rgba(120,30,18,.8);transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .3s}   /* le cachet */
.form__submit:hover,.form__submit:focus-visible{transform:rotate(-3deg) scale(1.05)}
.form__submit:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.form__submit[disabled]{opacity:.6;cursor:wait}
.form__alt{font-size:.95rem;color:rgb(var(--fg-2))}
.form__status{margin-top:1.2rem;min-height:1.5em;font-size:1rem}
@media (max-width:640px){.form__grid{grid-template-columns:1fr}.form__submit{width:96px;height:96px}}

/* --- Le contact : une enveloppe fermée, tachée de peinture, scellée à la cire (15/09/2026, demande d'Alexandre). On brise le
   cachet : le rabat s'ouvre sur une doublure peinte aux couleurs du mot choisi plus haut, la lettre sort, et c'est le formulaire.
   Les pièces sont posées par site.js ; sans JavaScript, l'enveloppe reste cachée et la lettre visible. --- */
.cta{position:relative}
.lettre[hidden],.enveloppe[hidden]{display:none}
.enveloppe{position:relative;display:block;width:min(640px, 100%);aspect-ratio:1.6;margin-top:2.5rem;padding:0;border:0;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer;
  perspective:1400px;transform:rotate(-1.4deg);transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .45s ease}
.enveloppe:hover{transform:rotate(-.7deg) translateY(-4px)}
.enveloppe:focus-visible{outline:2px solid var(--bone);outline-offset:10px}
.enveloppe::before{content:"";position:absolute;inset:6% 4% -2%;z-index:-1;background:rgba(6,8,30,.55);filter:blur(24px);transform:translateY(18px)}   /* son ombre sur la peinture */
.env__fond,.env__apercu,.env__poche,.env__rabat,.env__cachet{position:absolute}
.env__fond{inset:0;z-index:0;border-radius:7px;overflow:hidden;background:#8A2616}
.env__fond canvas,.env__dedans canvas{display:block;width:100%;height:100%}
.env__fond::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.4),rgba(0,0,0,0) 45%)}   /* le fond de l'enveloppe, dans l'ombre du rabat */
.env__apercu{left:5%;right:5%;top:5%;height:92%;z-index:2;border-radius:2px;background:var(--bone) repeating-linear-gradient(to bottom,transparent 0 21px,rgba(23,19,15,.08) 21px 22px) 0 18% / 100% 100% no-repeat;
  box-shadow:0 -2px 10px rgba(0,0,0,.18);transition:transform .75s cubic-bezier(.3,.8,.2,1)}
.env__poche{inset:0;z-index:3;width:100%;height:100%;display:block}
.env__rabat{left:0;top:0;width:100%;height:58%;z-index:5;transform-origin:50% 0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.45,.05,.2,1)}
.env__face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.env__dehors svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 3px 4px rgba(23,19,15,.22))}
.env__dedans{transform:rotateY(180deg);clip-path:polygon(0 0,100% 0,100% 2.6%,85.8% 33.1%,72.3% 62.8%,60.7% 86.4%,52.2% 98.7%,50% 100%,47.8% 98.7%,39.3% 86.4%,27.7% 62.8%,14.2% 33.1%,0 2.6%)}
.env__cachet{left:50%;top:58%;z-index:6;width:13.5%;aspect-ratio:1;transform:translate(-50%,-50%)}
.env__cachet svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .45s ease .2s}
.env__cachet .g{clip-path:polygon(0 0,53% 0,48% 24%,55% 47%,45% 71%,51% 100%,0 100%)}
.env__cachet .d{clip-path:polygon(53% 0,100% 0,100% 100%,51% 100%,45% 71%,55% 47%,48% 24%)}
.enveloppe__tampon{position:absolute;z-index:4;left:7%;top:67%;font-family:var(--display);font-weight:600;font-size:clamp(.66rem, .5rem + .55vw, 1.02rem);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ultra);border:2px solid currentColor;border-radius:3px;padding:.5em .85em .42em;transform:rotate(-7deg);opacity:.86;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='64'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 2.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='64'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 2.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E")}   /* un tampon encré, usé */
.enveloppe__mot{position:absolute;z-index:4;left:7%;right:30%;bottom:7%;font-size:clamp(.7rem, .6rem + .35vw, .95rem);line-height:1.35;color:#3B342C;transform:rotate(-1.4deg)}
/* l'ouverture, pas à pas (site.js) : le cachet se brise, le rabat bascule et passe derrière, la lettre sort, l'enveloppe s'efface */
.is-brise .env__cachet .g{transform:translate(-8%, 5%) rotate(-10deg);opacity:0}
.is-brise .env__cachet .d{transform:translate(8%, 3%) rotate(9deg);opacity:0}
.is-ouverte .env__rabat{transform:rotateX(180deg)}
.rabat-derriere .env__rabat{z-index:1}
.is-sortie .env__apercu{transform:translateY(-58%)}
.enveloppe.is-partie{opacity:0;pointer-events:none}
.lettre--arrive{animation:lettre-depli .9s cubic-bezier(.16,1,.3,1) both}
@keyframes lettre-depli{from{clip-path:inset(0 0 100% 0);transform:translateY(-16px)}to{clip-path:inset(-40px -40px -40px -40px);transform:none}}
@media (prefers-reduced-motion:reduce){.enveloppe,.env__rabat,.env__apercu,.env__cachet svg{transition:none}.lettre--arrive{animation:none}}
@media (max-width:640px){.enveloppe__tampon{top:56%}.enveloppe__mot{right:12%;bottom:6%}}   /* sur téléphone, le tampon remonte pour laisser la phrase sur une ligne */

.footer{padding:10vh var(--gutter) 3vh;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.4rem var(--gutter);align-items:end;font-size:.92rem;color:rgb(var(--fg-2))}
.footer .wordmark{height:15px;width:91px}
.footer__colophon{max-width:46ch;line-height:1.5}   /* le colophon : de quoi le site est fait, et d'où (piste 4 de l'audit 2) */
.footer__liens{white-space:nowrap}
@media (max-width:700px){.footer{grid-template-columns:1fr;gap:1rem;align-items:start}.footer__liens{white-space:normal}}
.footer__legal{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
.legal{border:0;padding:0;max-width:min(680px, 92vw);background:var(--bone);color:var(--ink);border-radius:8px}
.legal::backdrop{background:rgba(23,19,15,.6)}
.legal__inner{padding:2.4rem clamp(1.4rem, 4vw, 2.6rem)}
.legal h2{font-family:var(--display);font-weight:500;font-size:1.5rem;letter-spacing:-.03em;margin-bottom:1.4rem}
.legal p{margin-bottom:1rem;font-size:.98rem;line-height:1.55}
.legal mark{background:rgba(196,48,26,.16);color:var(--ink);padding:0 .25em}
.legal__close{font:inherit;color:var(--bone);background:var(--ink);border:0;padding:.7rem 1.3rem;border-radius:999px;cursor:pointer;margin-top:.6rem}
.footer__brand{display:flex;align-items:center;gap:.7rem}

/* --- Lancement d'un site client (demande d'Alexandre du 14/09/2026) : comme une application qu'on ouvre. Tout s'efface
   dans l'encre, le logo du client s'allume et un reflet le traverse, puis son site s'ouvre dans un cadre, sans quitter la
   page (site.js). Fermer, Escape ou le bouton retour rendent la galerie. Avec les animations réduites (.is-direct), le
   cadre s'ouvre tout de suite. --- */
.lancement{position:fixed;inset:0;z-index:60;background:#060606;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .45s ease;cursor:auto}
.lancement.is-on{opacity:1;pointer-events:auto}
.lancement a,.lancement button{cursor:pointer}   /* le curseur dessiné du site passe sous le lancement : on rend le vrai */
html.lancement-ouvert{overflow:hidden}
.lancement__logo{position:relative;width:min(52vw,440px);opacity:0;transform:scale(.82)}
/* le logo reste allumé tant que le site n'a pas chargé ; il s'efface quand le cadre se montre (ou à 1,45 s si la page part vers le site) */
.lancement.is-on:not(.is-direct) .lancement__logo{animation:lancement-logo 1.1s cubic-bezier(.16,1,.3,1) .2s forwards}
.lancement.is-on.is-page .lancement__logo{animation:lancement-logo 1.1s cubic-bezier(.16,1,.3,1) .2s forwards,lancement-logo-sortie .5s ease 1.45s forwards}
.lancement.is-on.is-cadre:not(.is-direct) .lancement__logo{animation:lancement-logo 1.1s cubic-bezier(.16,1,.3,1) .2s forwards,lancement-logo-sortie .5s ease forwards}
.lancement.is-direct .lancement__logo{display:none}
.lancement__logo img{display:block;width:100%;height:auto}
/* le reflet : une bande de lumière qui ne touche que les pixels du logo (le logo lui-même sert de masque) */
.lancement__logo::after{content:"";position:absolute;inset:0;-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.65) 50%,transparent 62%) no-repeat;background-size:260% 100%;background-position:120% 0;opacity:0}
.lancement.is-on:not(.is-direct) .lancement__logo::after{animation:lancement-reflet 1s ease-in-out .6s forwards}
.lancement__cadre{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .6s ease}
.lancement.is-cadre .lancement__cadre{opacity:1;pointer-events:auto}
.lancement.is-direct .lancement__cadre{transition:none}
.lancement__barre{display:flex;align-items:center;gap:.8rem 1.6rem;flex-wrap:wrap;padding:.6rem var(--gutter);color:var(--bone);background:#060606;font-size:.92rem}
.lancement__nom{font-family:var(--display);font-weight:500;letter-spacing:-.02em;margin-right:auto}
.lancement__ouvrir{color:inherit;opacity:.75;text-decoration:underline;text-underline-offset:.2em}
.lancement__ouvrir:hover,.lancement__ouvrir:focus-visible{opacity:1}
.lancement__fermer{font:inherit;font-family:var(--display);font-weight:500;font-size:.95rem;letter-spacing:-.02em;color:var(--ultra);background:var(--bone);border:0;border-radius:999px;padding:.5rem 1rem;min-height:40px}
.lancement__cadre iframe{flex:1;width:100%;border:0;background:#060606}   /* encre tant que le site n'a pas peint : pas d'éclair blanc */
@keyframes lancement-logo{to{opacity:1;transform:scale(1)}}
@keyframes lancement-logo-sortie{to{opacity:0;transform:scale(1.06)}}
@keyframes lancement-reflet{0%{opacity:1;background-position:120% 0}100%{opacity:1;background-position:-120% 0}}

@media (prefers-reduced-motion:reduce){
  .hero__scroll i{animation:none}
  .has-js .hero__word{transform:none;animation:none}
  .has-js .hero__lead,.has-js .hero .link-big,.has-js .hero__proof{opacity:1;animation:none}
  .statement__text .w{--lit:100%}
  .panel__art{transition:none}
}

/* --- L'entrée (piste 9 de l'audit 2) : le monogramme A. se grave au trait sur la toile encore vierge, puis se dissout dans la
   peinture qui se répand. Moins d'une seconde, une fois par session, jamais avec les animations réduites (site.js). --- */
.entree{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:var(--ultra);pointer-events:none;transition:opacity .45s ease}
.entree svg{width:min(30vw, 190px);overflow:visible;fill:none;stroke:var(--bone);stroke-width:16;stroke-linejoin:round;stroke-linecap:round}
.entree svg path{stroke-dasharray:1;stroke-dashoffset:1}
.entree.is-drawn svg path{animation:trait .55s cubic-bezier(.4,0,.2,1) forwards}
.entree.is-drawn svg path:nth-child(2){animation-delay:.42s;animation-duration:.2s}
.entree.is-out{opacity:0}

/* --- Révélations (site.js) : une seule grammaire pour toute la page ---
   Les titres montent derrière un masque, comme ceux de l'accueil ; le reste s'installe en fondu avec un léger
   décalage entre frères (--i). Une fois, jamais rejoué. Rien de tout ça sans JavaScript ni en mouvement réduit :
   html.rv n'est posé que dans ce cas. */
.rise{display:block;overflow:hidden;padding:.04em 0 .1em}
.rise__in{display:block}
html.rv .rise__in{transform:translateY(112%);transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
html.rv .rise.in .rise__in{transform:none}
html.rv [data-rv]:not(.rise){opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform 1.1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*90ms)}
html.rv [data-rv]:not(.rise).in{opacity:1;transform:none}
.formula{border-top:0;position:relative}
.formula::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:currentColor;transform-origin:left}
html.rv .formula::before{transform:scaleX(0);transition:transform 1.1s cubic-bezier(.16,1,.3,1) calc(var(--i,0)*90ms + .15s)}
html.rv .formula.in::before{transform:none}
html.has-js .nav{opacity:0}
html.is-loaded .nav{animation:fade 1s ease 1.1s forwards}
html:not(.has-js) .nav,html.reduce .nav{opacity:1;animation:none}

/* --- Anglais : deux phrases plus longues, deux corps un peu plus petits --- */
html[lang="en"]{--t-hero:clamp(2rem, .4rem + 7vw, 11rem)}
html[lang="en"] .cta__title{font-size:clamp(1.8rem, .4rem + 7.8vw, 10rem)}

/* --- Sans JavaScript : pas de fond peint, chaque section clair porte son propre fond --- */
html:not(.has-js) .process{background:var(--bone);color:var(--ink)}
html:not(.has-js) .about{background:var(--ochre);color:var(--ink)}
html:not(.has-js) .mood{display:none}

/* --- Pages simples : 404, merci --- */
html.plain-page body{background:radial-gradient(circle at 18% 28%,rgba(60,91,255,.55),transparent 46%),radial-gradient(circle at 82% 22%,rgba(100,90,210,.6),transparent 42%),radial-gradient(circle at 50% 95%,rgba(196,48,26,.45),transparent 50%),var(--ultra)}
html.plain-page.has-js body{background:var(--ultra)} /* avec JavaScript, la peinture vivante (simple.js) remplace le dégradé fixe */
.plain{position:relative;z-index:2;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;gap:1.4rem;padding:8rem var(--gutter) clamp(3rem, 10vh, 6rem)}
.plain__eyebrow{font-family:var(--display);font-weight:300;font-size:1.05rem;letter-spacing:.02em}
.plain__title{font-family:var(--display);font-weight:200;font-size:clamp(2.6rem, .5rem + 9vw, 11rem);line-height:.96;letter-spacing:-.045em}
.plain__text{max-width:44ch;font-size:var(--t-2);line-height:1.45}
.plain__text a{text-underline-offset:.2em}
.plain__text--en{font-size:var(--t-1)}