/* The four families, served from this domain instead of fonts.googleapis.com.
   Google Fonts hands every visitor's IP to a third party, and costs two extra
   connections on the critical path before a single glyph can be drawn. These
   are the very same woff2 files Google serves — fetched once with a Chrome UA
   so the variable versions came back, not the ttf fallback — with their
   unicode-range copied verbatim. That clause is what makes the arrow faces
   below compose with these instead of shadowing them.

   Only latin and latin-ext are kept: every character painted anywhere on the
   ten pages was checked against Google's own ranges, and none falls outside
   them. latin-ext is not exercised by any word on the site today and is kept
   anyway — unicode-range means the browser never downloads it until a word
   needs it, so it costs nothing and covers whatever the client writes next.

   Caveat 500 and 600 are byte-identical: Google serves the variable file and
   lets the browser instance it. One file, two rules, exactly as Google does. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-stretch:100%;font-display:swap;src:url(/assets/fonts/bricolage-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-stretch:100%;font-display:swap;src:url(/assets/fonts/bricolage-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plexmono-400-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plexmono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/plexmono-500-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/plexmono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;src:url(/assets/fonts/newsreader-italic-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;src:url(/assets/fonts/newsreader-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/newsreader-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/newsreader-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Caveat is loaded for exactly two words: the names pencilled onto the
   founders' photograph. A hand-drawn arrow set in Bricolage reads as a
   caption with a decorative arrow stuck on it — the handwriting is what
   makes the whole annotation one gesture. Nothing else on the site uses
   it, and nothing else should. */
@font-face{font-family:'Caveat';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/caveat-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Caveat';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/caveat-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/caveat-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/caveat-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* The four glyphs the Google subsets leave out: ← → ↗ ✕. The latin range stops
   at U+2122 and only picks up again at U+2191 and U+2193 — which is why ↓ is drawn
   by Bricolage while ← and → fall through to whatever the OS supplies, with no
   guarantee it serves both from the same face. On a phone the left arrow came out
   smaller than the right one. This response carries its own unicode-range, so it
   composes with the subsets already loaded instead of shadowing them: two tiny
   woff2 files, and the arrows finally have the weight of the text beside them.
   Never fold &text= into the requests above — the parameter is per-request and
   would cut those families down to these four signs. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-stretch:100%;font-display:swap;src:url(/assets/fonts/fleches-bricolage.woff2) format('woff2');unicode-range:U+2190, U+2192, U+2197, U+2715}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/fleches-plexmono-400.woff2) format('woff2');unicode-range:U+2190, U+2192, U+2197, U+2715}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/fleches-plexmono-500.woff2) format('woff2');unicode-range:U+2190, U+2192, U+2197, U+2715}

html{scroll-behavior:auto}
body{margin:0;background:#F7F5F1;color:#161513;font-family:'Bricolage Grotesque',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:#161513;text-decoration:none}
a:hover{color:#B3271E}
::selection{background:#161513;color:#F7F5F1}
/* Le rayon des cadres photo, calqué sur reformcollective.com/work : 26,7 px
   mesurés sur une vignette dans un écran de 1707 px, soit 1,56 vw (25 px sur
   une maquette 1600). La référence en emploie DEUX, et l'écart porte le sens :
   plein rayon sur les vignettes de sa page /work — l'objet qu'on prend — et
   deux tiers à l'intérieur d'une page projet, où la photo n'est plus qu'une
   image dans une page. Nos murs prennent le premier, nos planches le second.
   Fluides, et pas seulement par principe : 26 px sur un cadre de 340 px de
   large mangeraient le coin de la photographie.
   --r-plate sert aussi aux quatre boutons pleins (deux rendez-vous, fermer,
   envoyer) : c'est le plus petit des deux, et un bouton est une petite boîte.
   Le mur du sur-mesure et sa planche étaient à angles vifs par calque sur
   balance.michael-aust.com ; le client a demandé l'arrondi partout, ils
   suivent donc désormais les mêmes deux tokens que le prêt-à-porter.
   La boutique est la seule exception, à sa demande : ses douze panneaux
   occupent l'écran entier et gardent leurs angles vifs. Aucun de ses cadres
   n'emploie [data-cframe] ni [data-dfig], donc rien à neutraliser ici — son
   bouton de rendez-vous, lui, est une petite boîte et prend --r-plate comme
   les trois autres. */
:root{--r-card:clamp(12px,1.56vw,26px);--r-plate:clamp(8px,1.04vw,18px)}
/* Le corps de texte, commun aux six sections. Chacune garde sa langue —
   ses titres, ses libelles, ses graisses — mais le paragraphe gris sur
   creme est le meme objet partout, et il se lisait a six echelles
   differentes : de clamp(13,.875vw,16) au pret-a-porter a
   clamp(15,1.15vw,18) a la boutique. Demande du client le 18 aout 2026.
   Un token et non six valeurs recopiees : la coherence tient alors toute
   seule au prochain reglage. Les interlignages, eux, restent propres a
   chaque composition — une colonne de journal et une pleine mesure ne se
   respirent pas pareil. */
:root{--corps:clamp(18px,1.32vw,24px)}
/* Le libelle en petites capitales, commun aux quatre sections qui en posent.
   Prix et boutique l ecrivaient en 11px FIXE : sur un ecran large tout
   grandissait autour d eux et eux restaient figes, ce qui n etait pas un
   choix mais un oubli. Le sur-mesure garde le sien a part — son libelle
   parenthese est en texte courant et non en capitale, c est justement ce
   qui le distingue. Chasse et graisse restent propres a chaque section. */
:root{--libelle:clamp(13px,.95vw,17px)}
/* L echelle du site, cinq niveaux, les MEMES sur les six pages. Demande du
   client le 18 aout 2026 : un titre doit faire la meme taille partout, une
   accroche aussi, un corps aussi. Chaque section garde sa langue — sa casse,
   sa graisse, sa famille, ses libelles parentheses — mais plus son echelle.
   Avant : les titres allaient de 90 a 161px sur un ecran de 1440, les
   accroches de 25 a 69, le corps de 14 a 18, et deux libelles etaient meme
   figes a 11px. Deux tentatives intermediaires ont ete essayees et jetees —
   n unifier que le corps, puis tenir un rapport constant titre/accroche : la
   premiere laissait les titres diverger, la seconde gardait six tailles.
   Les rapports qui en decoulent : titre/sous-titre 2, titre/accroche 3,6,
   accroche/corps 1,8. */
:root{--titre:clamp(46px,7vw,124px);--sous-titre:clamp(34px,3.6vw,62px);
      --accroche:clamp(26px,1.94vw,34px)}
@keyframes letterUp{to{transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideIn{from{transform:translateX(60px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes grainShift{0%,100%{transform:translate(0,0)}20%{transform:translate(-2%,1.5%)}40%{transform:translate(1.5%,-2%)}60%{transform:translate(-1%,-1%)}80%{transform:translate(2%,1%)}}
@keyframes signature{from{opacity:0;letter-spacing:.4em;text-indent:.4em}to{opacity:1;letter-spacing:1.4em;text-indent:1.4em}}
@keyframes drawY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes drawX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes markIn{from{opacity:0;transform:scale(.35)}to{opacity:1;transform:scale(1)}}
@keyframes tickIn{from{opacity:0}to{opacity:1}}
@keyframes nudgeX{0%,100%{transform:translateX(0)}50%{transform:translateX(9px)}}
/* 1240 et non 900 : la barre ne tient pas plus tôt. Le seuil valait 1140 tant
   que les items étaient en 11px/.22em — les huit libellés faisaient alors 721 px,
   plus sept gouttières (2.6vw), le logo (116), les marges (2 × 3vw) et la
   gouttière du nav (24), soit 861 + .242 V, qui ne repassait sous V qu'à 1136 px.
   Les items sont passés à 12px/.2em et le logo de 20 à 24 px à la demande du
   client : les mêmes libellés réclament désormais ~1200 px, et 1240 est la marge
   de sûreté, mesurée au navigateur. Le seuil était déjà trop bas à sept items,
   qui en réclamaient 1051 : entre 900 et 1051 px, « Les fondateurs » et
   « Contact » passaient à la ligne et débordaient. La piste horizontale, elle,
   s'empile à 900 px (initHTrack) — les deux seuils sont indépendants. */
@media (max-width:1260px){[data-navlinks]{display:none !important}[data-burger]{display:flex !important}}
\* The burger draws three 28px rules with 10px 2px of padding, so its hit area
   was 32x36 — under every touch-target guideline, on the one control a phone
   visitor needs most. Growing the padding would have pushed it around inside the
   bar; a centred pseudo-element extends the target to 44x44 while laying out
   nothing. It belongs to the <button>, so a tap on it fires the button. */
[data-burger]{position:relative}
[data-burger]::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
/* The phone number appears in six places, always as an inline <a> underlined by a
   border-bottom sitting 2px under the text. Its hit area was the text box alone —
   19px on the founders page, 24 to 26px elsewhere, at or under the WCAG 2.5.8 floor,
   on the one control a phone visitor is most likely to want. The padding/negative
   margin recipe used for the logo does not apply here: vertical padding would push
   the border-bottom down with it and move the underline. So the same centred
   pseudo-element as the burger, which lays out nothing and leaves the rule where it
   is. It belongs to the <a>, so a tap on it follows the link. */
a[href^="tel:"]{position:relative}
a[href^="tel:"]::after{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px;min-height:100%}
/* La photographie est une <img> compilee : object-fit:cover suffit,
   et il n'y a plus de shadow DOM a percer. */
@media (orientation:portrait){
  /* Transparent, not black: the letterbox lets the fixed hero ground (its
     dashed grid, z-index:-1) read through, so the plate sits on the same
     paper as the rest of the site. */
  img[data-solo]{background:transparent}
  img[data-solo]{object-fit:contain !important}
  /* The very same 4:3 plate, and the very same trap, on the founders' own page —
     it was fixed here and missed there. At 375x748 cover keeps 37.6 % of the
     width, which is the olive tree: both men fall outside a caption that names
     them, and initFounders hands the names out of that caption. */
  img#fondateurs-duo{background:transparent}
  img#fondateurs-duo{object-fit:contain !important}
  /* Vignette and scrims exist to float pale text over a photo — on the light
     ground they'd just smear grey over the paper. */
  [data-vig],[data-scrim]{display:none}
  [data-products][data-solo-on] [data-track]{visibility:hidden}
  /* Grain belongs to the photograph, not to the frame. Landscape they're the
     same box; letterboxed they are not, and inset:-6% would sprinkle the film
     stock across the bare ground either side. padding-bottom/margin-top are
     both resolved against the frame's WIDTH, so this reproduces the contained
     4:3 plate exactly — plus 4% of bleed so grainShift never exposes an edge.
     No transform: that property is the animation's.
     And only while the plate IS the picture. The garment blocks fill the frame
     edge to edge, so past u = 1 this box stopped being the photograph and became
     a band of film stock stamped across the middle of every image that followed —
     six sevenths of the section, on a phone only. render() poses data-bleed at
     that exact point; without it the rule holds, which is what the founders
     plate needs. */
  [data-products]:not([data-bleed]) [data-grain]{left:-4% !important;right:-4% !important;top:50% !important;bottom:auto !important;height:0 !important;padding-bottom:83% !important;margin-top:-41.5% !important}
  /* The founders' own panel carries the same grain over the same photograph, so
     it inherits the same trap and the same measure. Its frame is 100vw wide and
     100vh minus the caption tall, so contain letterboxes far more here than on
     the plate: on a 390x844 phone the picture is 293 px tall inside 734, and the
     grain would land on 440 px of bare cream. Same numbers, because it is the
     same 4:3 photograph contained in a full-width frame. */
  [data-founders] [data-grain]{left:-4% !important;right:-4% !important;top:50% !important;bottom:auto !important;height:0 !important;padding-bottom:83% !important;margin-top:-41.5% !important}
  /* The plate holds and the garments slide over it. Without this the two
     half-width founders slots reassemble the photo edge-to-edge (cover) for
     one frame, which reads as the image snapping to full size mid-scroll. */
  /* Held, and pushed to the back of the frame: the solo plate is declared
     after the two tracks, so by document order it paints ON TOP and the
     garments would slide behind it. It is the backdrop here, not the subject.
     The frame's filter contains this stacking context, so -1 stays inside. */
  [data-products] [data-solo]{opacity:1 !important;z-index:-1 !important}
  [data-track] [data-intro]{visibility:hidden}
  /* The bottom block was boxed into the right-hand 36% to sit inside the
     vertical rule. That rule is hidden here, and 36% of a phone clips
     "INTERMÉDIAIRES" — so let it run the full width, flush with the title. */
  [data-ic="pl"]{left:0 !important}
  /* Ink on paper — and no halo. A pale text-shadow reads as invisible on the
     flat ground but wipes the hero's dashed grid out around every letter,
     which looks like the type is carrying an opaque backing plate. */
  [data-introcopy],[data-introcopy] *{color:#161513 !important;text-shadow:none !important}
  /* The hero ground already carries its own dashed grid here, and it shows
     through the bands — a second grid on top of it just doubles the lines. */
  [data-ic="lh"],[data-ic="lv"],[data-ic="lb"],[data-mark]{display:none}
  /* The two arrows are the exception to the ink rule above. Everything else
     in this layer sits on the bare paper once the plate is letterboxed —
     these point at faces, so they stay ON the photograph, and on a photograph
     pale ink with a halo is what stays readable. Beaten on document order,
     not weight: both declarations are !important at (0,1,0), so the selector
     is deepened rather than left to win by position. */
  [data-introcopy] [data-ic="al"],[data-introcopy] [data-ic="ar"],
  [data-introcopy] [data-ic="al"] *,[data-introcopy] [data-ic="ar"] *{color:#F7F5F1 !important}
  /* Contain fits the 4:3 plate to the WIDTH, so the two men keep their
     horizontal thirds and only drop down the frame — hence new tops, same
     sides. The arrow shrinks with them: at 13.2vw of a phone the clamp floor
     would take a third of the screen each and the pair would collide. */
  [data-ic="al"]{left:20% !important;top:48% !important}
  [data-ic="ar"]{left:80% !important;top:50% !important}
  [data-ic="al"] svg,[data-ic="ar"] svg{width:clamp(80px,21vw,166px) !important}
}
/* Prêt-à-porter — les planches.
   Everything here is inert until initPlates sets data-in on the plate. It
   sets it on EVERY plate at mount, not as each one comes into view: the
   plates inside the first screen play their draw, and the ones below get
   data-now as well, which zeroes the transition so they are simply put in
   place. Scrolling therefore reveals nothing — nothing is ever blank and
   nothing is ever caught half-drawn, which is what a phone showed when the
   1.05s clip-path ran slower than a thumb.
   A plain CSS animation would be the obvious move and the wrong one: it
   cannot be told to skip itself, and skipping is the whole point below the
   fold. transition-delay is set inline per element — inline wins over the
   shorthand below, which is what lets each plate stagger its own draw. */
[data-plate] [data-ann]{opacity:0;transform:translateY(10px);transition:opacity .75s ease,transform .75s cubic-bezier(.22,1,.3,1)}
[data-plate][data-in] [data-ann]{opacity:1;transform:none}
/* Put in place without being animated. The three properties are listed here
   rather than beside each of the three rules that animate them, so that the
   whole "no gesture" case reads in one place — and so that a fourth armed
   property added later fails loudly here instead of quietly animating. */
[data-plate][data-now] [data-ann],
[data-plate][data-now] [data-wline],
[data-plate][data-now] [data-cframe]{transition:none}

/* Prêt-à-porter — l'échelle de noth.in.
   Toute la page projet de la référence tient sur quatre tailles et un
   seul poids, 500. Pas de gras, pas de capitales sauf pour les libellés
   en monospace, et rien de centré : tout est calé sur les bords de la
   grille. C'est cette sobriété qui fait le calme de la page, bien plus
   que les espacements. Cette section est la seule du site à parler cette
   langue — ailleurs KEITO reste en 800 capitales, et c'est voulu. */
[data-nt]{margin:0;font-weight:500;font-size:var(--titre);line-height:1;letter-spacing:-.01em;text-transform:none}
[data-nlede]{margin:0;font-weight:500;font-size:var(--accroche);line-height:1.2;letter-spacing:-.01em;text-wrap:pretty}
[data-nbody]{margin:0;font-weight:500;font-size:var(--corps);line-height:1.5;text-wrap:pretty}
/* Dans la planche, [data-nbody] n’est plus une meta : il y porte des
   paragraphes entiers, en gris sur creme. A la taille du mur ils se lisaient
   trop petit — releve par le client le 18 aout 2026. Le mur, lui, ne garde
   que des lignes courtes et ne bouge pas. */
[data-nlabel]{display:block;font-family:var(--pap-mono);font-weight:500;font-size:var(--libelle);letter-spacing:.03em;text-transform:uppercase}
/* La grille de la page projet : deux moitiés franches, sans gouttière, et
   align-items:end. Le contenu démarre au milieu de la page pendant que
   les méta restent calées en bas à gauche — c'est tout ce qui tient la
   composition, il n'y a ni filet ni cadre pour la soutenir. */
[data-ngrid]{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:0}
[data-ncol]{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(22px,1.5vw,26px);min-width:0}
/* Le bloc à libellé : « ( Détails ) » à gauche, le texte à droite. */
[data-nsect]{display:flex;gap:clamp(20px,6.25vw,110px);align-items:flex-start}
[data-nsect] > [data-nlabel]{flex:0 0 auto;width:clamp(84px,16vw,250px)}
/* Un libellé de chapitre a la MÊME taille partout, quelle que soit sa place.
   Il en existe deux : dans la colonne d'un [data-nsect], et dans la moitié
   gauche de [data-ngrid] depuis que les prix ont quitté la page — la seconde
   famille est restée en arrière d'un cran le 19 août 2026, et cela se voyait
   d'une planche à l'autre. Les deux sélecteurs doivent donc bouger ensemble.
   [data-ngrid] ne contient aucun autre [data-nlabel] : la barre de la planche
   et le pied « PIÈCE SUIVANTE » vivent en dehors, et gardent leur petit corps. */
[data-nsect] > [data-nlabel],[data-ngrid] [data-nlabel]{font-size:var(--corps)}
/* Les respirations sont des blocs nommés, pas des marges empilées : c'est
   ainsi que la référence tient ses rythmes, et ça se relit d'un coup. */
[data-nspace="l"]{height:clamp(54px,9.4vw,164px)}
[data-nspace="m"]{height:clamp(30px,4vw,70px)}
[data-nspace="s"]{height:clamp(16px,2.75vw,48px)}
/* Le mur — hors du vocabulaire du feuillet.
   Les filets pointillés s'arrêtent à l'entrée du mur et reprennent dans la
   planche ouverte. La section suspend sa propre grammaire le temps de
   montrer les pièces : c'est ce qui fait tenir le noir. */
/* sur :root et non sur la section : la planche ouverte vit hors de
   #pretaporter (position:fixed dans un ancêtre clippé serait coupée), et
   elle a besoin de la même monospace. */
:root{--pap-ink:#F7F5F1;--pap-bg:#0B0A09;--pap-mute:rgba(247,245,241,.55);--pap-grey:rgba(22,21,19,.6);--pap-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace}
/* Le titre collé. mix-blend-mode:difference l'inverse sur les photos qui
   passent dessous : blanc sur le noir, sombre sur une photo claire. Rien
   ne doit s'intercaler entre lui et le fond — un filter, une opacité ou un
   transform sur un ancêtre créerait un groupe de composition isolé, et le
   mélange n'aurait plus que le groupe à mélanger. */
/* top calé sous la navigation, qui fait 64 px et reste fixe tout le long
   du mur : posé plus haut, le titre lui passerait dedans. */
/* La grille. Les pièces ne sont pas décalées par des marges : elles
   occupent des plages de colonnes inégales, et align-items:end les fait
   reposer sur la ligne basse de leur rangée. La quinconce vient de là — un
   décalage réglé par des marges se décrocherait au premier changement de
   proportion de photo. */
/* Le mur en bento. C'était douze colonnes et align-items:end, avec huit pièces
   occupant des plages inégales — la quinconce de noth.in. Le client l'a écartée :
   il veut des rangées franches, deux vignettes de même hauteur calées au même
   niveau, un filet d'espace entre elles, et pleine largeur quand une pièce est
   seule. Le découpage n'a pas bougé pour autant : les plages inégales
   produisaient déjà 2 / 1 / 2 / 2 / 1, et c'est ce que la grille écrit
   maintenant en clair, avec [data-wide] pour les deux pièces seules.
   align-items:stretch (le défaut) et non end : les deux cartes d'une rangée
   prennent la même hauteur, et le margin-top:auto du cadre pousse la
   photographie en bas. C'est ce qui aligne les images quand un texte de carte
   tient sur deux lignes et l'autre sur une seule — les aligner par le haut
   suffisait tant que les hauteurs étaient libres, plus maintenant. */
[data-wgrid]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(10px,1vw,18px);row-gap:clamp(32px,3.4vw,64px)}
[data-wgrid] > [data-card][data-wide]{grid-column:1 / -1}
[data-wgrid] > [data-card] > [data-cframe]{margin-top:auto}
/* Plus de plafond ici. max-height:80vh servait quand les largeurs variaient de
   quatre a huit colonnes ; il rendait surtout la FORME dependante de la hauteur
   du viewport, puisqu'il rognait l'aspect-ratio. Le carre vaut ~85vh a toutes
   les resolutions courantes — 917px sur 1920x1080, 649 sur 1366x768 — donc il
   n'y a plus rien a borner, et la cellule a enfin une forme, la meme partout. */
[data-wgrid] [data-cframe]{max-height:none}
[data-card]{position:relative;display:flex;flex-direction:column;gap:clamp(9px,1.15vw,20px);width:100%;text-align:left;background:none;border:0;padding:0;margin:0;font:inherit;color:var(--pap-ink);cursor:pointer}
[data-wlabel]{display:flex;align-items:baseline;justify-content:space-between;gap:clamp(10px,1.4vw,26px);font-family:var(--pap-mono);font-weight:400;font-size:var(--corps);letter-spacing:.03em;text-transform:uppercase;color:var(--pap-mute)}
/* pas de max-width : la phrase prend la largeur de sa plage de colonnes.
   La brider la casserait en deux lignes sur les pièces larges, alors que
   c'est justement leur largeur qui les distingue des autres. */
[data-wsay]{display:block;font-size:clamp(17px,1.56vw,27px);font-weight:500;line-height:1.06;letter-spacing:-.012em;color:var(--pap-ink);text-wrap:pretty}
/* Les cadres portent leur propre proportion ; seules les photos de la
   planche ouverte ont besoin du garde-fou de largeur (une boîte à
   aspect-ratio dont la hauteur est bridée par max-height recalcule sa
   LARGEUR, ce qui décrocherait la cote de la photo qu'elle mesure). */
[data-cframe]{position:relative;display:block;width:100%;max-height:80vh;overflow:hidden;border-radius:var(--r-card);background:rgba(247,245,241,.06)}
[data-detail] [style*="aspect-ratio"]{width:100%}
[data-cframe] img{filter:sepia(.16) saturate(.86) contrast(1.06) brightness(1.02)}
/* L'image déborde son cadre de 18 % : c'est cette réserve que la parallaxe
   consomme. Sans elle, la translation découvrirait le fond du cadre. */
[data-wimg]{position:absolute;left:0;top:0;display:block;width:100%;height:118%;object-fit:cover;will-change:transform}
/* Les lignes montent de sous un filet, le cadre s'ouvre par le bas. Tout
   est armé par data-in, que pose l'IntersectionObserver de initPlates : la
   même mécanique que les planches, sans une ligne de code de plus. */
[data-wmask]{display:block;overflow:hidden}
/* pas de display ici : la ligne du haut est un flex (catégorie ↔ prix) et
   une déclaration display sur [data-wline] gagnerait sur [data-wlabel],
   qui est moins spécifique. Chaque ligne déclare sa propre boîte. */
[data-plate] [data-wline]{transform:translateY(112%);transition:transform .9s cubic-bezier(.16,1,.3,1)}
[data-plate][data-in] [data-wline]{transform:none}
/* `round` n'est pas décoratif : un clip-path:inset() sans lui redécoupe au
   rectangle et l'emporte sur le border-radius du cadre. Sans ce mot-clé les
   coins arrondis disparaissent pendant toute la révélation puis réapparaissent
   d'un coup à la fin — un défaut qui ne se voit qu'au premier passage. Les
   deux états portent le MÊME rayon : c'est ce qui laisse l'inset s'interpoler
   seul, sans que le rayon ne se mette lui aussi à bouger. */
[data-plate] [data-cframe]{clip-path:inset(0 0 100% 0 round var(--r-card));transition:clip-path 1.05s cubic-bezier(.16,1,.3,1) .08s}
[data-plate][data-in] [data-cframe]{clip-path:inset(0 0 0 0 round var(--r-card))}
[data-card]:focus-visible{outline:1px solid rgba(247,245,241,.72);outline-offset:10px}
/* La pilule a DEUX exemplaires et une seule écriture. Celle qui suit le
   curseur ne vit que là où une souris existe ; au doigt, une pilule POSÉE dans
   le coin de chaque cadre fait le même signe. Sans elle rien n'indiquait au
   visiteur de téléphone qu'une carte s'ouvre : toutes les réponses au survol
   sont enfermées dans (hover:hover), donc au doigt le mur ne répondait à rien.
   Les deux blocs de media sont strictement complémentaires — les deux pilules
   ne coexistent jamais. Un portable à écran tactile déclare (hover:hover) et
   garde donc celle du curseur, ce qui est le bon comportement.
   Elle porte la SEULE flèche depuis le 19 août 2026, dans un disque de 30 px :
   elle disait « Ouvrir ↗ » dans un pavé crème plein, que le client trouvait trop
   présent sur la photographie. D'où la boîte carrée et la disparition de gap,
   letter-spacing et text-transform, qui n'ont plus de texte à régler — la chasse
   décalait même le glyphe hors du centre, en lui laissant son blanc de suite.
   La peau reste celle du prêt-à-porter dans les DEUX sections, à la demande du
   client : la pilule est le seul objet que les deux murs partagent, donc la
   seule chose qui ne parle pas la langue locale. Le glyphe ↗ n'est dans aucun
   sous-ensemble Google et vient de la requête séparée &text=←→↗✕. */
/* scale(0) déclaré ici, pas seulement dans initWallCursor : tant que la
   souris n'a pas bougé une première fois, aucune frame n'a tourné, et une
   pilule sans transform s'afficherait à taille pleine dans le coin. */
[data-wcursor],[data-wtap]{display:none;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border-radius:100px;background:var(--pap-bg);color:var(--pap-ink);font-family:var(--pap-mono);font-weight:500;font-size:var(--libelle);white-space:nowrap;pointer-events:none}
[data-wcursor]{position:fixed;left:0;top:0;z-index:60;transform:translate(-50%,-50%) scale(0);will-change:transform}
/* Le sur-mesure inverse la pilule qui suit le curseur — disque clair, flèche
   sombre —, demande du client le 20 août 2026 : sa section est crème, celle du
   prêt-à-porter est noire, et le même disque noir n’y pesait pas pareil.
   ATTENTION, c’est un RETOUR EN ARRIÈRE assumé : le 17 août le client avait fait
   supprimer la surcharge #surmesure pour que les deux murs partagent exactement
   le même objet. Il n’en reste que la police, qui demeure commune ; seules les
   deux couleurs divergent, et seulement au survol.
   La pilule POSÉE (au doigt) n’est PAS visée : elle reste identique dans les deux
   sections, en verre dépoli. Les deux ne coexistent jamais. */
#surmesure [data-wcursor]{background:var(--pap-ink);color:var(--pap-bg)}
/* z-index 3 : le dégradé du sur-mesure est à 1 et sa légende à 2. Le
   décalage reprend les marges de [data-bcap] pour que la pilule s'aligne
   sur elle, et l'overflow:hidden du cadre la rogne sur son arrondi.
   Au doigt, c’est un VERRE DÉPOLI depuis le 20 août 2026, et c’est le troisième
   réglage de cette pilule : elle a été un pavé crème plein « OUVRIR ↗ », puis un
   disque noir à opacity:.62 le 19 août, que le client trouvait encore trop
   présent sur la photographie. Elle reste le SEUL signe qui dise au visiteur de
   téléphone qu’une carte s’ouvre, donc elle doit se voir : d’où un fond à 30 %
   seulement, mais un flou d’arrière-plan et un filet clair, qui la détachent de
   n’importe quelle photographie sans la charger.
   L’opacité d’ensemble a disparu avec ce changement, et c’est voulu : elle existait
   pour que le disque et sa flèche se fondent dans la même proportion, or c’est
   désormais le flou qui porte la discrétion, et la flèche a besoin de rester nette.
   backdrop-filter isole un groupe de composition : sans conséquence ici, la pilule
   n’a ni mix-blend-mode ni descendant qui en ait — le titre collé du mur, qui en
   emploie un, vit ailleurs. Le préfixe -webkit- reste pour les Safari anciens. */
[data-wtap]{position:absolute;top:clamp(15px,1.7vw,34px);right:clamp(15px,1.7vw,34px);z-index:3;background:rgba(11,10,9,.3);border:1px solid rgba(247,245,241,.28);box-sizing:border-box;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
@media (hover:hover){
  [data-wcursor]{display:inline-flex}
  [data-cframe] img{transition:filter .55s ease}
  [data-card]:hover [data-cframe] img{filter:sepia(.05) saturate(1) contrast(1.03) brightness(1.09)}
}
@media (hover:none){
  [data-wtap]{display:inline-flex}
  /* L'appui doit se voir : entre le doigt et l'ouverture de la planche, rien ne
     confirmait que le geste avait porté. La photographie avance de 2 %.
     C'est la PROPRIÉTÉ scale et non transform, comme le survol du sur-mesure :
     initWall écrit un transform inline sur [data-wimg] pour la parallaxe, et une
     propriété indépendante s'y compose au lieu de se faire écraser. Elle avance
     au lieu de reculer : [data-wimg] fait 100 % de large dans un cadre en
     overflow:hidden, donc la réduire découvrirait le fond du cadre sur les côtés.
     Et c'est [data-wimg] et NON [data-cframe], dont le transition porte déjà le
     clip-path de la révélation — une seconde déclaration de transition l'aurait
     remplacée et aurait tué l'entrée des cadres, sans que rien ne le signale. */
  [data-wimg]{transition:scale .4s cubic-bezier(.16,1,.3,1)}
  [data-card]:active [data-wimg]{scale:1.02}
}

/* le survol passe au blanc plein, pas à l'accent : sous difference, une
   couleur saturée ressortirait dans sa complémentaire — l'accent rouge de
   la marque virerait au vert sur le crème. */
[data-dprev]:hover,[data-dnext]:hover,[data-dclose]:hover,[data-dprev]:focus-visible,[data-dnext]:focus-visible,[data-dclose]:focus-visible{color:#fff}
/* La planche ouverte EST une page projet. Fond crème — l'inversion par
   rapport au mur noir est ce qui fait l'ouverture — et le même patron que
   la référence : une bande de titre haute où le nom de la pièce et son
   numéro se font face, puis deux moitiés dont la gauche porte les méta et
   la droite le texte et les photographies. Elle défile, elle ne tient pas
   dans un écran : c'est une page, pas une fiche. */
[data-dtop]{display:flex;align-items:center;justify-content:space-between;gap:clamp(14px,3vw,48px);min-height:clamp(150px,24vw,420px)}
/* La donnée en display, en bas de la colonne de gauche, là où la référence
   pose son copyright. Elle a porté les prix jusqu'au 19 août 2026, où le
   client les a fait retirer de toute la page ; son seul emploi restant est
   le « À venir » de la ligne casual. Les autres planches remplissent cette
   moitié d'un libellé et de son texte, sur le patron de celle des tissus. */
[data-dprice]{font-size:clamp(30px,4.4vw,78px)}
[data-dfig]{margin:0;width:100%}
[data-dfig] > span{position:relative;display:block;width:100%;overflow:hidden;border-radius:var(--r-plate);background:rgba(22,21,19,.05)}
[data-dfig] img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
[data-dfig] figcaption{margin-top:clamp(8px,1vw,15px);color:var(--pap-grey)}
[data-dlist]{list-style:none;margin:0;padding:0;width:100%}
[data-dlist] li{display:grid;grid-template-columns:minmax(84px,26%) 1fr;gap:clamp(12px,1.6vw,28px);padding:clamp(7px,.9vw,14px) 0;border-bottom:1px solid rgba(22,21,19,.12)}
[data-dlist] li:first-child{border-top:1px solid rgba(22,21,19,.12)}
[data-dlist] dt,[data-dlist] .k{color:var(--pap-grey)}
/* Le pied reprend le geste de [data-dnext] : la planche suivante est déjà
   câblée sur la flèche de la barre, rien à ajouter côté logique. */
[data-dfoot]{display:flex;align-items:baseline;justify-content:space-between;gap:clamp(9px,1.1vw,16px);width:100%;margin:0;padding:clamp(12px,1.6vw,26px) 0 0;border:0;border-top:1px solid rgba(22,21,19,.14);background:none;font:inherit;text-align:left;color:var(--pap-grey);cursor:pointer;transition:color .25s}
[data-dfoot] b{font-weight:500;color:#161513;transition:color .25s}
[data-dfoot]:hover,[data-dfoot]:focus-visible,[data-dfoot]:hover b,[data-dfoot]:focus-visible b{color:#B3271E}
/* La planche ouverte. visibility rather than display so the fade has
   something to animate, delayed on the way out so the opacity finishes
   before the dialog leaves the accessibility tree. The sheet grows from
   the frame that was clicked — transform-origin is set from its rect. */
[data-detail]{opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s .4s}
[data-detail][data-open]{opacity:1;visibility:visible;transition:opacity .4s ease}
[data-detail] [data-dsheet]{transform:scale(.955);transition:transform .55s cubic-bezier(.16,1,.3,1)}
[data-detail][data-open] [data-dsheet]{transform:none}
/* Scroll lock on <html>: the component resets body's inline overflow on
   every re-render, so locking the body would come undone under us. */
html[data-lock]{overflow:hidden}
/* Empilé, chaque pièce prend toute la largeur : les plages de colonnes
   qui font la quinconce n'ont plus de gouttière où respirer.
   !important sur grid-column parce que la plage est portée en attribut
   style par chaque carte, et une déclaration inline gagne sur la feuille.
   Le titre reste collé mais cesse de s'écarter — treize glyphes espacés
   ne tiennent pas sur un téléphone ; initWall lit la même requête. */
@media (max-width:760px){
  [data-wgrid]{grid-template-columns:minmax(0,1fr);row-gap:clamp(48px,9vh,92px)}
  [data-wgrid] > [data-card]{grid-column:1 / -1 !important}
  [data-wtitle]{justify-content:flex-start}
  [data-cframe]{max-height:74vh}
  /* Les deux moitiés n'ont plus de place pour être deux : la colonne de
     méta repasse SOUS le contenu, parce que empilée elle ouvrirait la
     page sur un prix isolé avant qu'on ait lu de quoi il s'agit. */
  /* L’échelle verticale du téléphone — elle s’était inversée, et le client l’a
     vue avant nous. Les respirations [data-nspace] sont en vw et tombent à leur
     PLANCHER sur un écran étroit (54 / 30 / 16 px à 390), pendant que les
     gouttières de ce bloc-ci sont en vh et y MONTENT (59 px pour [data-ngrid]
     à 844 de haut). Une planche écartait donc ses deux moitiés plus largement
     que ses chapitres, et rien ne disait plus ce qui allait ensemble.
     Rétabli en une suite monotone, mesurée à 390 × 844 :
       9 carte < 16 (s) < 22 colonne < 25 libellé < 34 les deux moitiés
           < 44 (m, entre chapitres) < 72 (l, entre mouvements) < 76 le mur.
     Les deux [data-nspace] gardent la PENTE du desktop et n’en relèvent que le
     plancher : à 761 px la règle de base rend 9.4vw = 71,5 pour « l », donc le
     raccord au seuil est continu. « m » saute de 30 à 44 — assumé, c’est le
     seuil où la grille, le titre et le mur changent déjà tous de forme. */
  [data-nspace="l"]{height:clamp(72px,9.4vw,164px)}
  [data-nspace="m"]{height:clamp(44px,4vw,70px)}
  [data-ngrid]{grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vh,40px)}
  [data-ngrid] > [data-ncol]:first-child{order:2}
  /* Le titre passe en colonne : il ne tient pas sur une ligne à 375 px.
     Le padding-bottom est ce qui l'écarte du texte — justify-content:flex-end
     le colle au bas de sa bande, et la première phrase démarrait juste
     dessous sans respiration. Demande du client, 19 août 2026. */
  [data-dtop]{flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:clamp(8px,1.6vh,16px);min-height:clamp(120px,26vh,220px);padding-bottom:clamp(20px,4vh,40px)}
  /* [data-nsect] passe en colonne, et son align-items:flex-start se met alors
     à gouverner l’axe HORIZONTAL : ses enfants prennent leur largeur de
     CONTENU au lieu de la colonne. Un [data-ncol] plein de texte s’en tire, son
     max-content débordant la colonne — mais un bloc qui ne porte qu’une figure
     n’a aucune largeur intrinsèque et s’effondre à 0 × 0. La photographie des
     souliers ne se peignait pas du tout sur téléphone, et son chapitre ne
     mesurait plus que les 25 px de son libellé vide. Le libellé, lui, garde le
     width:auto posé juste après. Vu et mesuré le 20 août 2026 à 390 × 844. */
  [data-nsect]{flex-direction:column;gap:clamp(16px,3vh,28px)}
  [data-nsect] > :not([data-nlabel]){width:100%;min-width:0}
  [data-nsect] > [data-nlabel]{width:auto}
  [data-dlist] li{grid-template-columns:minmax(0,1fr);gap:2px}
}
/* ────────────────────────────────────────────────────────────────────────
   Sur-mesure — la langue de balance.michael-aust.com/work.
   Elle emprunte la même mécanique que le prêt-à-porter (un mur de pièces,
   une planche plein écran) mais surtout pas sa typographie : le
   prêt-à-porter parle noth.in — poids 500 partout, libellés en monospace
   capitale, deux moitiés franches. La référence du sur-mesure est plus
   frontale : du gras, des titres qui remplissent la page, des libellés en
   texte courant entre parenthèses, des tableaux à filets, et le nom de la
   pièce posé DANS la photographie plutôt qu'au-dessus.
   D'où un jeu de tokens séparé, [data-b*], plutôt qu'une redéfinition des
   [data-n*] : les deux sections doivent pouvoir diverger sans se gêner.
   ──────────────────────────────────────────────────────────────────────── */
#surmesure,[data-detail="sm"]{--b-ink:#161513;--b-mute:rgba(22,21,19,.6);--b-line:rgba(22,21,19,.15);--b-bg:#F7F5F1}
/* Quatre tailles, deux poids. Le gras est la signature de la référence :
   son corps de texte lui-même est en 700 dans les intros. */
[data-bt]{margin:0;font-weight:700;font-size:var(--titre);line-height:.94;letter-spacing:-.035em;text-transform:none}
[data-blede]{margin:0;font-weight:700;font-size:var(--accroche);line-height:1.14;letter-spacing:-.02em;text-wrap:pretty}
/* Meme echelle que le corps de texte du pret-a-porter, releve le 18 aout 2026 :
   les deux sections posent des paragraphes gris sur creme, et rien ne justifie
   qu ils ne se lisent pas au meme corps d une section a l autre. Le palier
   fluide etait deja commun (1.02vw) ; seuls le plancher et le plafond
   differaient. */
[data-bbody]{margin:0;font-weight:450;font-size:var(--corps);line-height:1.5;text-wrap:pretty}
/* Le libellé parenthésé. En texte courant, pas en monospace : c'est
   précisément ce qui le distingue du « ( Détails ) » du prêt-à-porter. */
[data-blabel]{display:block;margin:0;font-weight:450;font-size:var(--libelle);line-height:1.5;color:var(--b-mute)}
/* Le bloc à libellé : une colonne étroite à gauche, le contenu sur les trois
   quarts restants. La référence ne centre rien et ne cadre rien. */
[data-bsect]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3.4fr);gap:clamp(16px,2.6vw,50px);align-items:start;width:100%}
/* Le libellé de chapitre se lit comme un sous-titre depuis le 19 août 2026,
   parenthèses retirées et corps relevé. Les libellés de DONNÉE l’ont rejoint le
   20 août — « Délai », « Temps de travail pour un costume », « Une heure et
   demie en boutique » : le client les trouvait trop petits sous leur valeur.
   Ne JAMAIS viser [data-blabel] tout court pour autant. Il habille aussi la
   barre de la planche (« Sur-mesure », les deux flèches, « Fermer ») et son
   pied « Chapitre suivant », qui sont du chrome et gardent leur petit corps :
   ce sont désormais les SEULS restés à var(--libelle). */
[data-bsect] > [data-blabel],
[data-bstep] > [data-blabel],
[data-bsteps] [data-blabel]{font-size:var(--corps)}
/* Le texte long tient en deux colonnes de journal, comme ses (Details). */
[data-bcols]{columns:2;column-gap:clamp(24px,3.2vw,58px);width:100%}
[data-bcols] > p{margin:0 0 1.1em;break-inside:avoid}
[data-bcols] > p:last-child{margin-bottom:0}
/* ── Les quatre façons de poser une donnée ────────────────────────────────
   La section en montre quatre séries : les chiffres d'ouverture, les trois
   opérations à la main, le compte d'heures, le déroulé. Empilées sous le même
   traitement — un filet, un libellé, une valeur — elles se seraient lues
   comme quatre fois le même tableau. Chacune a donc son geste, et aucune
   n'emprunte le filet horizontal, qui est la solution banale.
   ───────────────────────────────────────────────────────────────────────── */

/* 1. La rangée de données. Un libellé au corps du site, sa valeur en gras
   dessous, et toutes les valeurs reposant sur une même ligne basse.
   Une seule taille depuis le 20 août 2026 : il en existait une seconde, `xl`,
   pour la donnée qui domine sa rangée — le prix, qui était ce qu’on venait
   chercher. Le client l’ayant fait retirer de tout le site, il ne reste plus
   rien à hiérarchiser et les marches se partagent la largeur à parts égales. */
[data-bscale]{display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(20px,2.6vw,44px) clamp(24px,3.4vw,60px);width:100%}
/* flex-basis auto et non 0 : à parts strictement égales, la valeur la plus
   longue se cassait en deux lignes et son libellé montait d'un cran au-dessus
   des autres. Chaque marche prend donc sa largeur, et seul le reste se
   partage. */
[data-bstep]{flex:1 1 auto;min-width:min(100%,11ch);display:flex;flex-direction:column;gap:clamp(3px,.4vw,8px)}
[data-bstep] > :last-child{margin:0;font-weight:700;font-size:clamp(22px,2.5vw,44px);line-height:1;letter-spacing:-.03em}
/* tabular-nums parce que les nombres comptent jusqu'à leur valeur : des
   chiffres de largeurs inégales feraient danser le nombre pendant la montée. */
[data-bnum]{font-variant-numeric:tabular-nums}

/* 2. La progression — le déroulé, et les trois opérations faites à la main.
   Des temps qui se lisent de gauche à droite, avec pour le déroulé la durée
   posée au-dessus du nom comme une indication de tempo. C'est une suite, pas
   un inventaire : elle n'a pas à ressembler à un tableau.
   Le nombre de colonnes est porté en style inline par chaque emploi — quatre
   pour le déroulé, trois pour les opérations. */
[data-bsteps]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.8vw,52px);width:100%}
/* Le nom d’un temps. Au CORPS du site depuis le 20 août 2026 : le client le
   voulait à la taille de la phrase qu’il coiffe, comme tous les sous-titres du
   site. Il ne reste du display que la graisse.
   NE JAMAIS VISER UNE BALISE DE TITRE ICI. La règle s’est écrite « h4 » pendant
   des mois et ne matchait RIEN dans dist/ : renumber_headings() recalcule la
   profondeur en ordre de document, et ces h4 sortent en h2 dans la section, en
   h3 dans la planche. Ils tombaient donc au défaut du navigateur — 24 px d’un
   côté, 18,7 de l’autre, contre 34 voulus, et plus PETITS que leur propre texte.
   Rien ne le signalait : le sélecteur est valide, il matche dans le fichier de
   travail, et seule la sortie compilée le perd. Le :is() couvre les six rangs. */
[data-bsteps] :is(h1,h2,h3,h4,h5,h6){margin:clamp(3px,.4vw,8px) 0 clamp(8px,.9vw,15px);font-weight:700;font-size:var(--corps);line-height:1.35}
/* Les respirations, en blocs nommés. */
[data-bspace="l"]{height:clamp(64px,10vw,180px)}
[data-bspace="m"]{height:clamp(34px,4.6vw,80px)}
[data-bspace="s"]{height:clamp(18px,2.4vw,42px)}


/* La galerie. Deux colonnes, la seconde décalée vers le bas : c'est tout ce
   qui fait la quinconce de la référence, et c'est une marge et non un
   transform — un transform isolerait le groupe de composition et pousserait
   mal la hauteur du conteneur. */
/* Écarts serrés : les six pièces doivent former un mur, pas six panneaux
   séparés. L'écart vertical réel sous une carte impaire vaut row-gap PLUS le
   décalage de la paire, la rangée de grille prenant la hauteur du plus grand
   de ses deux items — les deux valeurs s'additionnent, il faut les régler
   ensemble. */
/* Une seule gouttière, verticale comme horizontale : le client a demandé le
   20 août 2026 que l’écart entre deux cartes empilées soit celui qui les sépare
   au centre de l’écran. Le mur se referme en mosaïque.
   Le décalage de la seconde colonne — la quinconce de la référence — est rendu
   NEUTRE POUR LA MISE EN PAGE par une marge basse négative égale : sans elle il
   s’ajoute au row-gap, la rangée prenant la hauteur du plus grand de ses deux
   items, et l’écart réel valait 72 px pour 19 de gouttière. Une seule valeur les
   porte donc toutes les deux, il n’y a rien à régler ensemble.
   Pas un transform à la place : il isolerait le groupe de composition, et un
   ancêtre transformé change la référence des position:fixed sous lui. */
[data-bgrid]{--sm-quinconce:clamp(18px,2.6vw,48px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.1vw,20px);align-items:start}
[data-bgrid] > *:nth-child(even){margin-top:var(--sm-quinconce);margin-bottom:calc(-1 * var(--sm-quinconce))}
/* Les cartes du sur-mesure ne montrent que la photographie : le nom se pose
   dessus, en bas à gauche, rien ne dépasse du cadre. Il a porté ses mots-clés
   jusqu’au 20 août 2026, retirés par le client ; le nom descend d’autant, la
   légende étant ancrée par le bas. Le mur du prêt-à-porter fait l’inverse,
   tout est au-dessus de la photo.
   Plus de border-radius:0 ici : la section était à angles vifs par calque sur
   balance.michael-aust.com, le client a tranché pour l'arrondi partout. Elle
   hérite donc de --r-card comme le mur du prêt-à-porter. La légende reste
   dedans : ses retraits (15 à 34 px selon la largeur) sont toujours supérieurs
   au rayon, donc aucun mot ne passe sous la courbe du coin. */
#surmesure [data-cframe]{max-height:none;background:rgba(22,21,19,.05)}
/* Le dégradé de pied est dans le cadre, déjà en overflow:hidden. Il
   couvre bien plus que la légende n’en demande : il tient la composition des
   six cartes, et c’est pour cela qu’il n’a pas baissé quand elle est
   passée de deux lignes à une seule, le 20 août 2026. */
#surmesure [data-cframe]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56%;z-index:1;background:linear-gradient(rgba(22,21,19,0),rgba(22,21,19,.68));pointer-events:none}
[data-bcap]{position:absolute;left:clamp(15px,1.7vw,34px);right:clamp(15px,1.7vw,34px);bottom:clamp(13px,1.5vw,30px);z-index:2;display:flex;flex-direction:column;gap:clamp(3px,.45vw,8px);pointer-events:none}
[data-bname]{display:block;color:#F7F5F1;font-weight:700;font-size:clamp(21px,2.2vw,40px);line-height:1.04;letter-spacing:-.025em}
@media (hover:hover){
  /* la photographie avance d'un cran sous le curseur, sous la pilule qui dit
     ce que le clic fera : le geste de la référence et celui du mur du
     prêt-à-porter se cumulent ici. */
  /* La liste des cérémonies : l'item pointé s'allume, les autres restent
     gris. Sous (hover:none) rien ne bouge et tout se lit en gris — c'est
     voulu, la liste n'est pas cliquable, elle énumère. */
  [data-mitem]:hover{color:var(--m-ink)}
  #surmesure [data-wimg]{transition:scale .75s cubic-bezier(.16,1,.3,1)}
  #surmesure [data-card]:hover [data-wimg]{scale:1.035}
}
#surmesure [data-card]:focus-visible{outline:1px solid var(--b-ink);outline-offset:8px}
/* La pilule du sur-mesure a longtemps eu la sienne — noire, Bricolage bas de
   casse, 13 px. Le client la trouve plus jolie en monospace capitale : les deux
   murs partagent donc le même objet, à l'identique, et la surcharge est partie.
   Vérifié avant de la retirer : #surmesure ne redéfinit que les --b-*, jamais
   les --pap-*, donc la règle de base peint bien ici aussi un pavé noir à texte
   crème. Le commentaire qu'elle portait invoquait un risque de crème sur crème
   qui n'existait pas : cette surcharge n'a jamais servi qu'à la police. */

/* La planche du sur-mesure reprend la page projet de la référence : une
   bande de titre, l'intro en gras, puis des blocs à libellé. Elle n'emprunte
   au prêt-à-porter que le mécanisme d'ouverture. */
[data-detail="sm"] [data-dfig] > span{background:rgba(22,21,19,.05)}
[data-detail="sm"] [data-dfoot]{border-top-color:var(--b-line);color:var(--b-mute)}
[data-detail="sm"] [data-dfoot] b{font-weight:700}

/* ── Mariage — la section calquée sur dhk.co.za ─────────────────────────────
   Troisième langue empruntée du site, après noth.in (prêt-à-porter) et
   balance.michael-aust.com (sur-mesure), et la plus tranchée des trois :
   noir pur, photographies plein cadre, demi-écrans butés.
   Le jeu est en [data-m*] et ne croise ni les [data-n*] ni les [data-b*] :
   les trois sections doivent pouvoir diverger sans se gêner. Ne pas faire
   glisser un attribut de l'une dans l'autre.

   La police reste Bricolage Grotesque, comme partout ailleurs : ce qu'on
   emprunte à la référence est sa composition et son échelle, pas sa fonte.
   Une néo-grotesque avait été essayée pour serrer la ressemblance — elle
   faisait une section étrangère au site, et le client a tranché pour la
   cohérence. Ne pas réintroduire de cinquième famille ici.
   Les poids sont ceux du site : 700 pour le display et l'accroche, comme
   [data-bt] et [data-blede] du sur-mesure ; 500 pour le texte courant. */
#mariage{--m-bg:#0B0A09;--m-ink:#F7F5F1;--m-dim:rgba(247,245,241,.48);--m-line:rgba(247,245,241,.16)}
/* Aucun text-transform : la casse est écrite dans le template. La référence met
   tout en bas de casse, essayé puis écarté — le client veut la capitale
   initiale du reste du site. Une casse forcée ferait de toute façon des fautes
   sur « Saint-François » et « Keïto ». */
[data-mt]{margin:0;font-weight:700;font-size:var(--titre);line-height:.92;letter-spacing:-.03em;color:var(--m-ink);text-wrap:balance}
[data-mt="s"]{font-size:var(--sous-titre);line-height:.98;letter-spacing:-.025em}
/* Le gras du corps de texte est la signature de dhk — jusque dans ses
   paragraphes. Sur ses ~90 mots cela passe ; la section en porte ~900, et un
   mur de 700 y devient illisible. L'accroche reste donc fidèle en 700,
   le texte courant descend à 500. */
[data-mlede]{margin:0;font-weight:700;font-size:var(--accroche);line-height:1.18;letter-spacing:-.017em;color:var(--m-ink);text-wrap:pretty}
[data-mbody]{margin:0;font-weight:500;font-size:var(--corps);line-height:1.45;letter-spacing:-.005em;color:var(--m-ink);text-wrap:pretty}
[data-mbody]+[data-mbody]{margin-top:1.1em}
[data-mbody="dim"]{color:var(--m-dim)}
[data-mlabel]{margin:0;font-weight:700;font-size:var(--libelle);line-height:1.4;letter-spacing:0;color:var(--m-dim)}
/* gap:0 — c'est le butage franc des deux moitiés qui fait la dureté de la
   référence, pas leurs proportions. Une gouttière et l'effet tombe. */
[data-msplit]{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:start}
[data-msplit="wide"]{grid-template-columns:1fr 1.6fr}
[data-mpad]{padding:clamp(26px,3.6vw,68px)}

/* Le chapitre : chaque titre s'ouvre sur sa photographie, à la manière de la
   page d'accueil de la référence, et le texte se lit ensuite sur le noir.
   La plaque est encartée et arrondie plutôt que vraiment plein cadre : le
   site est arrondi partout, et une suite de rectangles vifs au milieu se
   lirait comme un accident. Seul le hero touche les quatre bords — c'est le
   seul moment qui possède l'écran entier, même exception que la boutique. */
[data-mplate]{position:relative;display:flex;align-items:flex-end;height:min(82vh,760px);margin:0 clamp(16px,3.6vw,68px);overflow:hidden;border-radius:var(--r-card);background:rgba(247,245,241,.06)}
[data-mplate] > picture > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Le dégradé plutôt qu'un voile plat : le titre est posé en bas, c'est là
   seulement qu'il faut assombrir. Un voile uniforme éteindrait la photo
   entière pour rendre lisibles trois mots. */
[data-mplate]::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,10,9,.78) 0%,rgba(11,10,9,.34) 38%,rgba(11,10,9,0) 68%);pointer-events:none}
/* Une plaque sans titre n'a rien à rendre lisible : le dégradé n'y assombrirait
   la photographie pour personne. */
[data-mplate="nu"]::after{display:none}
/* Deux plaques à la file se toucheraient : leur marge est horizontale seule. */
[data-mplate]+[data-mplate]{margin-top:clamp(10px,1.2vw,22px)}
[data-mplate] > [data-mt]{position:relative;z-index:1;padding:clamp(22px,3vw,54px);text-shadow:0 1px 34px rgba(11,10,9,.5)}
/* Le texte du chapitre : une mesure lisible, calée sur la moitié droite comme
   le fait la référence. Pas de filet, pas de boîte — c'est le noir qui sépare. */
[data-mprose]{display:grid;grid-template-columns:1fr 1.6fr;gap:0;padding:clamp(34px,4.6vw,86px) clamp(16px,3.6vw,68px) clamp(46px,6vw,110px)}
[data-mprose] > :first-child{padding-right:clamp(16px,2vw,40px)}
[data-mprose] > :last-child{max-width:72ch}
/* Les repères d'angle de la référence : deux équerres qui cadrent un bloc.
   Deux et non quatre, comme chez elle. */
[data-mcorner]{position:relative}
[data-mcorner]::before,[data-mcorner]::after{content:"";position:absolute;top:0;width:14px;height:14px;border-top:1px solid var(--m-line);pointer-events:none}
[data-mcorner]::before{left:0;border-left:1px solid var(--m-line)}
[data-mcorner]::after{right:0;border-right:1px solid var(--m-line)}
/* Les rangées de données. Le nombre de colonnes est porté en style inline par
   chaque emploi, comme le fait déjà [data-bsteps] du sur-mesure. */
[data-mrow]{display:grid;gap:0;border-top:1px solid var(--m-line)}
[data-mcell]{padding:clamp(16px,1.8vw,30px) clamp(14px,1.4vw,26px) clamp(20px,2.4vw,38px);border-left:1px solid var(--m-line)}
[data-mcell]:first-child{border-left:0;padding-left:0}
[data-mcell] [data-mval]{display:block;margin:.5em 0 0;font-weight:700;font-size:clamp(22px,2.6vw,46px);line-height:1;letter-spacing:-.03em;color:var(--m-ink)}
/* La liste géante à survol : tout est en gris, l'item pointé s'allume. C'est
   le « what we do » de la référence. Aucun autre geste sur cette liste — pas
   de soulignement, pas de déplacement : c'est la valeur seule qui change. */
[data-mlist]{list-style:none;margin:0;padding:0}
/* L'échelle est calée sur le plus long item, « un anniversaire de mariage » :
   au-dessus il se casse en deux lignes et la liste perd son alignement, qui
   est tout ce qui la tient. */
[data-mitem]{font-weight:700;font-size:clamp(24px,3.3vw,56px);line-height:1.14;letter-spacing:-.03em;color:var(--m-dim);transition:color .28s}
/* Le bouton de la référence : le libellé entre crochets très espacés. Les
   crochets sont dans des <span> plutôt qu'en ::before, pour rester lisibles
   par un lecteur d'écran comme de la ponctuation et non comme du contenu. */
[data-mbtn]{display:inline-flex;align-items:center;gap:clamp(14px,1.5vw,26px);font-weight:700;font-size:clamp(13px,1.05vw,18px);letter-spacing:0;color:var(--m-ink);background:none;border:0;padding:clamp(12px,1.2vw,18px) 0;margin:0;cursor:pointer;transition:opacity .28s}
[data-mbtn] span{color:var(--m-dim);transition:color .28s}
[data-mbtn]:hover,[data-mbtn]:hover span{color:var(--m-ink)}
/* Les cadres reprennent --r-card, comme les murs du prêt-à-porter et du
   sur-mesure : la référence est à angles vifs partout, mais une section
   anguleuse au milieu d'un site arrondi se lit comme un accident.
   Seul le hero échappe à la règle, et pour la même raison que la boutique :
   une image qui occupe l'écran entier n'est pas une vignette, elle doit
   toucher les quatre bords. */
[data-mfig]{position:relative;display:block;width:100%;overflow:hidden;border-radius:var(--r-card);background:rgba(247,245,241,.06)}
[data-mfig] img{display:block;width:100%;height:100%;object-fit:cover}
/* Prix — calquée sur la piste « Selected work & explorations » de trionn.com.
   Quatrième jeu de tokens du site, distinct des [data-n*] (prêt-à-porter),
   [data-b*] (sur-mesure) et [data-m*] (mariage) : les quatre sections doivent
   pouvoir diverger sans se gêner, ne jamais faire glisser l'un dans l'autre.
   De la référence : casse normale, graisse 500, chasse resserrée. Pas son gris
   #434343 ni son blanc — l'encre et le crème du site. Ses libellés sont en
   capitales SANS parenthèses, ce qui les sépare à la fois du « ( Détails ) »
   monospace du prêt-à-porter et du « ( Le procédé ) » en texte courant du
   sur-mesure. */
[data-tpanel],[data-tcard]{position:relative;box-sizing:border-box;height:100%;display:flex;flex-direction:column;overflow:hidden;padding:0 clamp(24px,3.4vw,72px)}
[data-tcard]{justify-content:center}
[data-tstack]{display:flex;flex-direction:column;gap:clamp(13px,1.4vw,24px)}
/* Le filet de la référence, au bord gauche de chaque panneau sauf le premier :
   c'est lui qui dessine la grille, pas les marges. Empilé, stack() pose un
   filet horizontal à sa place — voir le bloc 900 px plus bas. */
[data-trule]{position:absolute;left:0;top:0;bottom:0;width:1px;background:rgba(22,21,19,.13);pointer-events:none}
[data-tt]{margin:0;font-weight:500;line-height:.94;letter-spacing:-.04em;font-size:var(--titre);text-wrap:balance}
[data-tt="s"]{font-size:var(--sous-titre);line-height:1.03;letter-spacing:-.035em}
[data-tlede]{margin:0;font-weight:500;font-size:var(--accroche);line-height:1.25;letter-spacing:-.02em;max-width:24ch;text-wrap:pretty}
[data-tbody]{margin:0;font-weight:450;font-size:var(--corps);line-height:1.6;color:rgba(22,21,19,.74);max-width:56ch;text-wrap:pretty}
[data-tbody] + [data-tbody]{margin-top:.9em}
[data-tlabel]{margin:0;font-size:var(--corps);letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:rgba(22,21,19,.6)}
/* Le nom et le prix face à face sur la même ligne de base : ce sont les deux
   choses qu'on retient d'une carte, elles se tiennent au lieu de s'empiler.
   Le sur-mesure portait le même geste jusqu’au 20 août 2026, où son prix
   en est parti. */
[data-thead]{display:flex;align-items:baseline;justify-content:space-between;gap:clamp(12px,1.6vw,28px)}
[data-tname]{margin:0;font-weight:500;font-size:clamp(21px,2vw,33px);line-height:1.06;letter-spacing:-.03em}
[data-tprice]{margin:0;font-weight:600;font-size:clamp(21px,2vw,33px);line-height:1.06;letter-spacing:-.03em;white-space:nowrap}
/* --r-card et non --r-plate : ce sont des vignettes sur un mur, pas des images
   dans une page ouverte. Le fond gris tient le cadre des trois emplacements qui
   attendent encore leur photographie. */
[data-tfig]{position:relative;margin:0;aspect-ratio:3/2;overflow:hidden;border-radius:var(--r-card);background:rgba(22,21,19,.05)}
[data-tsplit]{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);gap:clamp(26px,3.6vw,86px);align-items:start}
/* Les fondateurs — le récit, sous le champ de mots.
   Cinquième jeu de tokens, mais PAS une cinquième langue empruntée : noth.in,
   balance.michael-aust.com, dhk.co.za et trionn.com ont chacune donné sa
   section, celle-ci ne prend rien dehors. Elle hérite de la géométrie qui est
   déjà au-dessus d'elle — les douze rangées du magnétisme sont des grilles
   1fr 1fr, moitié gauche au fer à droite et moitié droite au fer à gauche,
   soit un axe vertical au milieu de la page que l'œil a suivi douze fois. Le
   récit reprend cet axe : titre de chapitre calé contre lui, prose juste
   après. Le champ de mots se vide, la voix prend le relais sur la même ligne. */
[data-ostory]{max-width:1500px;margin:0 auto}
/* Le raccord avec le magnétisme. [data-fstick] est collant à top:50vh DANS
   [data-frail] : les noms s'en décollent quand le bas du rail repasse au-dessus
   de 50vh, puis montent avec lui. L'introduction ne doit pas entrer par le bas
   tant qu'ils tiennent encore le milieu, sinon on lit deux choses à la fois là
   où il n'y en a qu'une qui parle — d'où au moins 50vh d'écart, exprimé en vh
   et non en pixels : un clamp plafonné se ferait rattraper par le premier grand
   écran (460 px ne valent plus que 42vh sur 1080 de haut). Plancher de 180 px
   pour les très petites hauteurs, où 54vh ne ferait plus une respiration. */
[data-ostory]{padding-top:max(180px,54vh)}
/* L'introduction était centrée sur l'axe — la treizième rangée du magnétisme,
   celle où le jeu s'arrête et où une phrase entière se forme enfin. Le client
   l'a voulue au fer à gauche, comme les titres : elle part donc du bord gauche
   de [data-ostory], qui est aussi celui du titre de section au-dessus tant que
   la page n'excède pas 1500 px de boîte, et celui des titres de chapitre sous
   760 px, où ils repassent tous au fer à gauche.
   Plus de max-width : les deux phrases sont séparées par un <br> et la seconde
   fait 38 signes, ce que 26ch ne tenait pas — elle se serait cassée en deux et
   l'accroche aurait fait trois lignes au lieu de deux. C'est [data-ostory] qui
   borne, à 1500 px, où la phrase en occupe environ 1180 au corps plein.
   text-wrap:balance reste pour le seul cas qui déborde encore, le téléphone. */
[data-olede]{margin:0;text-align:left;font-weight:700;font-size:var(--accroche);line-height:1.08;letter-spacing:-.035em;text-wrap:balance}
/* SANS column-gap, volontairement : la gouttière est posée en padding sur les
   deux enfants pour que les colonnes restent à 50/50 et que l'axe tombe au
   pixel près sur celui des [data-fw]. Une gouttière de grille le décalerait
   vers l'intérieur et le raccord se verrait. */
[data-ochap]{display:grid;grid-template-columns:1fr 1fr;align-items:start;margin-top:clamp(80px,17vh,200px)}
[data-ot]{margin:0;text-align:right;padding-right:clamp(20px,2.6vw,48px);font-weight:800;font-size:var(--sous-titre);line-height:1.02;letter-spacing:-.035em}
[data-oprose]{padding-left:clamp(20px,2.6vw,48px)}
/* Un chapitre sur deux se retourne — le magnétisme alterne déjà ses côtés
   d'une rangée à l'autre, le récit lui emprunte aussi cela et la page cesse
   d'être une colonne unique. Ce qui NE change pas : le titre et la prose
   restent tous deux collés à l'axe, seul le côté bascule. La colonne de
   lecture sauterait sinon d'un bord à l'autre de la page à chaque chapitre.
   La prose est poussée contre l'axe par margin-left:auto sur les paragraphes
   eux-mêmes — [data-oprose] remplit sa colonne, c'est [data-obody] qui porte
   la mesure de 56ch, donc c'est lui qu'il faut déplacer.
   grid-row:1 sur les deux : sans lui, le placement automatique renverrait la
   prose à la rangée suivante puisqu'elle vient après le titre dans le DOM. */
[data-ochap="r"] > [data-ot]{grid-column:2;grid-row:1;text-align:left;padding-right:0;padding-left:clamp(20px,2.6vw,48px)}
[data-ochap="r"] > [data-oprose]{grid-column:1;grid-row:1;padding-left:0;padding-right:clamp(20px,2.6vw,48px)}
[data-ochap="r"] [data-obody]{margin-left:auto}
/* 56ch, la mesure de [data-tbody] : la demi-page fait 700 px à 1500, soit
   80 signes, trop large pour se lire. */
[data-obody]{margin:0;max-width:56ch;font-weight:450;font-size:var(--corps);line-height:1.65;color:rgba(22,21,19,.74);text-wrap:pretty}
[data-obody] + [data-obody]{margin-top:.9em}
/* La serif des mots italiens du magnétisme — Sprezzatura, su misura, Napoli.
   Un seul emploi dans le récit, sur le mot que le champ de mots ouvrait tout
   en haut. Pas deux. */
[data-oit]{font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:500}
/* font-style:normal : les navigateurs italisent l'élément address par défaut. */

/* LA BOUTIQUE — les panneaux de texte glissés entre les photographies.
   Ce n'est PAS une sixième langue empruntée après noth.in, balance.michael-aust.com,
   dhk.co.za et trionn.com : la section avait déjà sa grammaire, celle de son tableau
   d'horaires — un libellé en petites capitales à gauche, le contenu à droite, des
   filets pleine largeur entre les rangées. Les panneaux de texte la reprennent, aux
   valeurs près, et [data-slede] est la ligne du film au réglage près. C'est ce qui
   tient les panneaux de texte et les panneaux d'image ensemble.
   Le préfixe est data-s : data-screen-label et data-src-narrow existent dans le
   fichier, mais les sélecteurs d'attribut sont exacts et ne les captent pas. */
[data-stext]{border-top:1px solid rgba(22,21,19,.16)}
[data-ssect]{display:grid;grid-template-columns:minmax(150px,17%) 1fr;gap:clamp(20px,2.6vw,40px);padding:26px 0;border-bottom:1px solid rgba(22,21,19,.16)}
/* La rangée du bouton de rendez-vous : la grille de [data-ssect] sans son filet.
   Elle vivait en style inline, ce qui la rendait imperméable à la règle de repli
   de 760px — un sélecteur ne bat jamais un style inline. La colonne de libellé
   vide gardait donc ses 150px sur un téléphone, le bouton se cassait en quatre
   lignes et sortait du panneau sous 357px. C'est le SEUL bouton de rendez-vous
   de la page, d'où le déplacement de la grille ici. */
[data-sbtnrow]{display:grid;grid-template-columns:minmax(150px,17%) 1fr;gap:clamp(20px,2.6vw,40px)}
/* Le libellé des figcaption de la section, au réglage près : c'est le même objet. */
[data-slabel]{margin:0;font-size:var(--libelle);letter-spacing:.26em;text-transform:uppercase;font-weight:600;color:rgba(22,21,19,.6);padding-top:9px}
/* Un chapitre de la boutique est au corps du site, une rangée de données reste
   à son petit corps : à la boutique, seuls les titres sont des chapitres, les
   <span> sont des rangées. La règle disait « h3[data-slabel] » et ne matchait
   RIEN dans dist/ — même piège que la progression du sur-mesure, la compilation
   sort ces h3 en h2. Les cinq chapitres se lisaient donc à 16 px comme « Samedi »
   ou « Adresse », depuis le 19 août 2026 et jusqu’au 20. */
:is(h1,h2,h3,h4,h5,h6)[data-slabel]{font-size:var(--corps)}
/* La ligne du panneau du film, mot pour mot en réglages. Un chapitre s'ouvre
   dessus, jamais sur du corps de texte. La mesure est bornée comme celle de
   toutes les accroches du site (24ch dans « Prix » et le prêt-à-porter, 26ch
   dans le récit et sur le film) : laissée libre, elle prenait les 1235 px de
   la colonne, soit 46 signes de display sur une ligne. */
[data-slede]{margin:0;max-width:30ch;font-size:var(--accroche);line-height:1.08;font-weight:640;letter-spacing:-.02em;text-wrap:pretty}
[data-sbody]{margin:0;max-width:56ch;font-size:var(--corps);line-height:1.6;color:rgba(22,21,19,.72);text-wrap:pretty}
[data-sbody] + [data-sbody]{margin-top:.9em}
[data-slede] + [data-sbody]{margin-top:clamp(14px,1.8vh,26px)}
/* La valeur d'une rangée de données — un horaire, un accès. L'échelle du
   tableau d'origine, inchangée. La mesure, elle, est bornée : le tableau ne
   portait que des valeurs courtes (« 09h30 – 18h30 »), alors que les deux accès
   de « Nous trouver » font cent signes et prendraient sinon les 1235 px de la
   colonne, soit 38 signes par ligne à ce corps. */
[data-sval]{margin:0;max-width:38ch;font-size:clamp(20px,2.1vw,32px);line-height:1.3;letter-spacing:-.01em}
[data-sval] + [data-sval]{margin-top:clamp(10px,1.4vh,18px)}
[data-sbtn]{display:inline-block;font-family:inherit;margin-top:clamp(22px,3vh,38px);background:#161513;color:#F7F5F1;border:none;padding:17px 38px;border-radius:var(--r-plate);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;cursor:pointer;transition:background .3s}
[data-sbtn]:hover,[data-sbtn]:focus-visible{color:#F7F5F1}
/* Un panneau de piste est haut de 100vh et rogne ce qui dépasse (overflow:hidden
   + justify-content:center, donc il rognerait EN HAUT ET EN BAS à la fois). Le
   panneau des horaires est le plus chargé — cinq rangées, soit 260 px de seul
   padding de rangée — et il déborde de 3 px sur un écran large mais bas : mesuré
   à 950 x 500, 393 px de contenu pour 390 de disponible. Les rangées se resserrent
   donc quand la hauteur manque. Pas de max-width ici : sous 900 px la piste est
   déjà empilée et les panneaux grandissent librement. */
@media (min-width:900px) and (max-height:720px){
  [data-ssect]{padding:18px 0}
}

/* initHTrack empile la piste à 900 px, pas à 760 comme le reste de la feuille :
   c'est donc ici que les panneaux redeviennent des bandes pleine largeur, que
   le filet vertical n'a plus de sens, et qu'il leur faut la respiration
   verticale que la piste ne demandait pas. */
@media (max-width:900px){
  [data-trule]{display:none}
  [data-tpanel],[data-tcard]{padding:clamp(34px,5.4vh,58px) clamp(20px,5vw,40px)}
  [data-tsplit]{grid-template-columns:minmax(0,1fr);gap:clamp(14px,2.6vh,26px)}
  /* Le nom et le prix restent face à face, comme sur la piste. Empilés, ils se
     lisaient comme un titre sur deux lignes plutôt que comme un article et son
     prix. Le nom se laisse rétrécir (min-width:0, sans quoi un élément flex
     refuse de passer sous sa largeur de contenu) et se casse en deux lignes —
     « Chaussures cuir, couture Blake » le fait dès 390 px — pendant que le prix
     tient sur la première ligne de base. */
  [data-thead]{gap:12px}
  [data-tname]{flex:1 1 auto;min-width:0}
  [data-tprice]{flex:0 0 auto}
  /* stack() écrit minHeight en inline, d'où le !important. Le panneau de titre
     doit garder la respiration d'une ouverture de section — le même geste que
     « Mariage » et « Sur-mesure » — au lieu de se réduire à la hauteur du mot :
     empilé, il ne faisait plus que 166 px et se lisait comme un intertitre. */
  #prix [data-hpanel]:first-child{min-height:56vh !important}
  /* La boutique. Empilée, la piste devient une colonne et ses bandes de texte
     n'ont plus aucune raison de tenir 88vh : le chapitre le plus long fait
     350 px sur un téléphone, il flottait donc au milieu de 300 px de vide, et
     la section entière faisait 10,6 écrans dont la moitié était creuse. Elles
     se calent sur leur contenu. Même !important que ci-dessus, pour la même
     raison — c'est stack() qui écrit la hauteur, en inline.
     Les bandes de photographies gardent leurs 88vh : ce sont elles qui portent
     la section.
     Le titre et l'introduction les gardaient aussi, au motif qu'à eux deux ils
     forment l'ouverture. Mais l'ouverture n'est pas la même qu'ailleurs : celle
     des « Fondateurs » est un titre puis une photographie plein cadre, celle-ci
     est deux blocs de texte. Sur un téléphone cela faisait 1,76 écran de crème
     presque vide avant la première image. Le titre prend donc les 56vh du titre
     de « Prix », la seule autre piste horizontale, et l'introduction rejoint les
     [data-spanel], qui se calent sur leur contenu. */
  #boutique [data-hpanel]:first-child{min-height:56vh !important}
  #boutique [data-spanel]{min-height:0 !important;padding:clamp(48px,8vh,84px) 5vw !important}
}
/* Les trois phrases du rideau tiennent sur UNE ligne au-dessus de 760 px, demande
   du client le 20 août 2026 : à 34 px sous un titre de 144, une phrase repliée en
   deux se lisait comme un paragraphe et non comme une légende. La mesure de 26ch
   qui les repliait a quitté leurs styles inline ; elle n’y valait que pour le
   desktop, le bloc mobile la forçant déjà à 34ch en !important.
   Le nowrap est une garantie et non une précaution : la plus longue des trois fait
   48 signes, soit ~0,49 fois la largeur d’écran à toute taille, contre 0,88 de
   place utile une fois les marges du panneau retirées. Une phrase plus longue
   demande de refaire cette mesure, pas de retirer le nowrap. */
@media (min-width:761px){
  [data-cpair] p{white-space:nowrap}
}
@media (max-width:760px){
  [data-bgrid]{--sm-quinconce:0px;grid-template-columns:minmax(0,1fr);row-gap:clamp(16px,2.6vh,32px)}
    /* L'ecart entre un libelle de chapitre et son texte, une fois la grille repliee
     en colonne. Il valait clamp(10px,1.8vh,18px), soit 15 px sur un telephone :
     MOINS que les 20 px qui separent deux paragraphes de ce meme texte, moins que
     les 22 px de deux cartes du mur, moins que les 37 px de deux etapes de la
     progression. Le libelle se lisait donc colle au premier paragraphe au lieu
     d'appartenir au chapitre entier. C'est le defaut que le client avait releve
     sur le pret-a-porter le 20 aout ; il vivait encore ici, mesure a 390 x 844.
     25 px est la valeur que [data-nsect] rend a cette largeur pour exactement la
     meme relation — la seule echelle verticale que le client ait validee.
     En VW et non en VH, deliberement : melanger les deux est ce qui avait inverse
     l'echelle du telephone, les respirations en vw tombant a leur plancher quand
     les gouttieres en vh montaient. Rien a recaler au seuil de 760 px : au-dessus,
     cette meme declaration est la gouttiere HORIZONTALE d'une grille a deux
     colonnes, ce n'est pas la meme mesure. */
  [data-bsect]{grid-template-columns:minmax(0,1fr);gap:clamp(20px,6.4vw,34px)}
  [data-bcols]{columns:1}
  /* La rangée passe en deux rangs : sur un téléphone, trois données à la file
     rendraient la troisième illisible. Elles étaient quatre jusqu’au 20 août
     2026, le prix tenant la première place en grand. */
  /* !important comme sur [data-bsteps] : le bloc « ( Le compte ) » porte ses trois
     colonnes en style inline, qui l'emportaient sur cette règle et le laissaient
     sur trois colonnes au téléphone. */
  [data-bscale]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:end}
  /* La progression passe en UNE colonne, et c'est une demande du client : ses quatre
     temps — le rendez-vous, les choix, la confection, l'essayage — sont une
     chronologie, et une grille 2 × 2 laisse le lecteur choisir son ordre. Chaque
     partie doit se lire à la suite de la précédente.
     Le row-gap monte de 20 à 26 px : à la gouttière commune, quatre blocs empilés se
     lisaient comme un seul bloc de quatre paragraphes.
     !important : chaque emploi porte son nombre de colonnes en inline — quatre pour
     le déroulé, trois pour « ( Les trois ) » de la planche — et un sélecteur ne bat
     jamais un style inline. Les deux emplois sont visés, à dessein. */
  [data-bsteps]{grid-template-columns:minmax(0,1fr) !important;row-gap:clamp(26px,4.4vh,40px)}
  /* Mariage. Les demi-écrans s'empilent, et la rangée de données passe en
     colonne : trois valeurs à la file sur un téléphone, la troisième est
     illisible. !important parce que chaque emploi porte ses colonnes en
     inline, comme [data-bsteps]. */
  [data-msplit],[data-msplit="wide"],[data-mprose]{grid-template-columns:minmax(0,1fr)}
  /* Le filet vertical met les deux options en regard ; empilees, il n'a plus
     rien a separer et se retrouve A GAUCHE du texte du pret-a-porter, qu'il
     decale de son padding — le sur-mesure au dessus n'en ayant aucun, les deux
     colonnes ne partagent plus la meme marge. Les trois declarations sont en
     INLINE sur les colonnes, qu'aucune media query ne bat : d'ou les !important,
     comme pour [data-bsteps] et [data-mrow]. La respiration que le filet donnait
     passe dans le row-gap — la grille est a gap:0, sans lui les deux blocs se
     toucheraient. */
  [data-msplit] > *{padding-left:0 !important;padding-right:0 !important;border-left:0 !important}
  [data-msplit]{row-gap:clamp(28px,4.4vh,44px)}
  [data-mprose] > :first-child{padding-right:0;padding-bottom:clamp(14px,2.4vh,26px)}
  [data-mplate]{height:min(62vh,520px)}
  [data-mrow]{grid-template-columns:minmax(0,1fr) !important}
  [data-mcell]{border-left:0;border-top:1px solid var(--m-line);padding-left:0}
  [data-mcell]:first-child{border-top:0}
  /* Les fondateurs. 760 px est aussi le seuil où initFounders bascule sur son
     champ rond : les deux changements de langue arrivent ensemble. Un titre au
     fer à droite posé au-dessus d'un paragraphe au fer à gauche se lit comme un
     décrochage, donc empilé il repasse à gauche. L'introduction reste centrée —
     le champ rond l'est aussi. Le raccord, lui, ne change pas : les noms sont
     collés à 50vh dans les deux modes, la règle des 54vh vaut telle quelle. */
  [data-ochap]{grid-template-columns:minmax(0,1fr);row-gap:clamp(12px,2.2vh,22px);margin-top:clamp(56px,11vh,120px)}
  [data-ot]{text-align:left;padding-right:0}
  [data-oprose]{padding-left:0}
  /* L'alternance est un geste de page large : empilée, elle n'a plus de côté
     à alterner. Il faut la défaire explicitement — un grid-column:2 laissé sur
     une grille à une seule colonne en créerait une deuxième, implicite. */
  [data-ochap="r"] > [data-ot]{grid-column:1;grid-row:auto;text-align:left;padding-left:0}
  [data-ochap="r"] > [data-oprose]{grid-column:1;grid-row:auto;padding-right:0}
  [data-ochap="r"] [data-obody]{margin-left:0}
  /* La boutique. Le libellé passe au-dessus de son contenu : la colonne de
     gauche vaut 150 px au plancher, et « Depuis la place Saint-François » s'y
     casse en trois lignes pendant qu'il reste 200 px à la prose. Le seuil est
     760 et non 900 : entre les deux, la piste est déjà empilée en bandes
     pleine largeur et les deux colonnes tiennent encore très bien. */
    /* L'ecart entre un libelle de chapitre et son texte, une fois la grille repliee
     en colonne. Il valait clamp(10px,1.8vh,18px), soit 15 px sur un telephone :
     MOINS que les 20 px qui separent deux paragraphes de ce meme texte, moins que
     les 22 px de deux cartes du mur, moins que les 37 px de deux etapes de la
     progression. Le libelle se lisait donc colle au premier paragraphe au lieu
     d'appartenir au chapitre entier. C'est le defaut que le client avait releve
     sur le pret-a-porter le 20 aout ; il vivait encore ici, mesure a 390 x 844.
     25 px est la valeur que [data-nsect] rend a cette largeur pour exactement la
     meme relation — la seule echelle verticale que le client ait validee.
     En VW et non en VH, deliberement : melanger les deux est ce qui avait inverse
     l'echelle du telephone, les respirations en vw tombant a leur plancher quand
     les gouttieres en vh montaient. Rien a recaler au seuil de 760 px : au-dessus,
     cette meme declaration est la gouttiere HORIZONTALE d'une grille a deux
     colonnes, ce n'est pas la meme mesure. */
  [data-ssect],[data-sbtnrow]{grid-template-columns:minmax(0,1fr);gap:clamp(20px,6.4vw,34px)}
  [data-slabel]{padding-top:0}
  /* Le rideau du sur-mesure. Trois de ses cinq panneaux portent un titre ET sa
     phrase, posés dans deux coins opposés : une diagonale qui se lit d'un bord à
     l'autre sur un grand écran. Sur 390 px elle laisse un demi-écran de vide entre
     deux fragments orphelins, et la phrase y garde l'alignement qu'elle n'avait
     que pour faire face au titre — « Prises sur vous. » ferrée à droite sous un
     « Vos mesures » ferré à gauche. Les deux se rejoignent donc en un seul bloc
     centré verticalement.
     L'alternance gauche / droite / gauche du rideau est CONSERVÉE, elle : c'est
     elle qui donne son rythme à la suite des cinq panneaux, et tout ramener au fer
     à gauche l'aurait effacée. D'où data-cpair, qui ne dit que le côté.
     Les premier et dernier panneaux n'en portent pas : ils n'ont pas de phrase et
     sont déjà centrés. */
  [data-cpair] > div{justify-content:center !important;gap:clamp(12px,2.2vh,22px)}
  /* « Vos mesures » a une rangée intermédiaire — c'est elle qui tient le titre et
     la phrase côte à côte sur grand écran. Elle se déplie ici. */
  [data-cpair] > div > div{flex-direction:column;gap:clamp(12px,2.2vh,22px) !important}
  /* align-self:auto rend la main au conteneur : deux de ces éléments portent un
     align-self en style inline, qu'aucun align-items ne peut battre. */
  [data-cpair] h3,[data-cpair] p{margin:0 !important;align-self:auto !important;text-align:inherit !important}
  [data-cpair] p{max-width:34ch !important}
  [data-cpair="l"] > div,[data-cpair="l"] > div > div{align-items:flex-start !important;text-align:left !important}
  [data-cpair="r"] > div,[data-cpair="r"] > div > div{align-items:flex-end !important;text-align:right !important}
}
@media (orientation:portrait){
  /* Deux photographies côte à côte sous une colonne déjà pleine largeur,
     c'est 170 px chacune sur un téléphone : elles passent l'une sous
     l'autre. Les grilles concernées sont écrites en inline dans les
     planches, d'où le !important. */
  [data-panel] [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:minmax(0,1fr) !important}
}
picture{display:contents}
picture>source{display:none}
#boutique [data-hpanel] > picture > img{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important}


/* Regles generees depuis style-hover / style-focus */
.scp0:hover{opacity:.65 !important}
.scp1:hover{color:#B3271E !important;border-bottom-color:#B3271E !important}
.scp2:hover{color:#B3271E !important}
.scp3:hover{background:transparent !important;color:#F7F5F1 !important}
.scp4:hover{border-bottom-color:#F7F5F1 !important}
.scp5:hover{background:#B3271E !important}
.scp6:hover{border-bottom-color:#B3271E !important}