/* =========================================================================
   Homy Cozy — the logo, extended into a page.

   One source, and only one: `../logo_officiel.jpg`. Everything below is read
   off that file — the leather, its hue, its four lightnesses, its grain, and
   the copper of the engraving.

   Two earlier files were used as reference and both were wrong. Neither
   carried the real mark: they showed a H and a C interlocked, with serifs,
   the bar of the H crossing the stem of the C. The official logo has none of
   that. The owner said so three times before the reference file itself was
   questioned — which is the lesson worth keeping from this stylesheet's
   history. When the owner of a mark says it is not their mark, doubt the
   source before doubting the treatment.

   And the direction of the fit was inverted on 23 August 2026. The page used
   to be a palette chosen to sit near the logo; it is now the logo's own hide,
   extended. That is why nothing on this page needs a border to hide a seam.

   The type follows the same source: an engraved serif in spaced capitals for
   anything announced, a quiet geometric for anything read.
   ========================================================================= */

:root {
  /* The leather, read off `logo_officiel.jpg` itself — not off a swatch chosen
     to sit near it. The page is the logo's own hide, extended: same hue, same
     ramp, same grain. Percentiles of L* over the background of the file,
     masked well clear of the engraving:

         p30  L* 81.3  #D8C8B3      p70  L* 87.0  #E8D8C3
         p50  L* 84.2  #E0D0BB      p90  L* 90.6  #F0E3D0

     Hue 80.7°, and it never varies — the four values below are one material at
     four lightnesses. The file this stylesheet used before sat at 85.9°: five
     degrees cooler, enough that the logo never quite belonged to its page. */
  --cuir-haut:     #F0E3D0;
  --cuir:          #E8D8C3;
  --cuir-bas:      #D8C8B3;
  --filet:         #C9B79F;

  /* The cut. Measured on `logo_officiel.jpg` — the owner's final mark, which
     replaced an abandoned draft on 23 August 2026 — at the most saturated core
     of the engraving: **L* 29, C* 36, hue 59°**.

     The hue this file already carried was right: 60–61° across the whole
     ramp, against 59.3° measured on the real logo. What was wrong was the
     SATURATION. The engraving reads at chroma 36; this file drew it at 25.
     Eleven points of chroma at the same lightness and the same hue is the
     difference between a copper and a dull brown, and it is the third time on
     this project that an average has landed in a middle that exists nowhere
     on the object.

     One copper, not two. At L* 29 on this leather it measures 7.06:1, so the
     value that draws the mark is also the value that carries small type. */
  --encre:         #302015;   /* all primary text — 9.55:1 on the darkest ground */
  --encre-2:       #664D3C;   /* secondary text, one point of L* below its old
                                 value. Recaling the leather onto the logo made
                                 `--cuir-bas` darker, and two footer paragraphs
                                 fell to 4.48:1 — under the 4.5 floor by two
                                 hundredths. At L* 35 it measures 4.77:1 there,
                                 and the footer is what sets this value: it is
                                 the darkest ground on the page. */
  --cuivre:        #693915;   /* the engraving: the mark, headings, small caps */
  --cuivre-pale:   #AD8971;   /* hairline accents and the scrollbar. Never text */

  --stamp: 'Cormorant Garamond', 'Times New Roman', serif;
  --body:  'Jost', 'Helvetica Neue', Arial, sans-serif;

  --s1: 0.5rem;  --s2: 0.75rem; --s3: 1.25rem; --s4: 2rem;
  --s5: 3.25rem; --s6: 5.25rem; --s7: 8.5rem;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --page: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }

/* PAS de `scroll-behavior: smooth` ici, et c'est un correctif, pas un oubli.
   Posée sur la racine, la propriété anime TOUS les défilements — y compris
   ceux de la molette et du trackpad. Sur macOS elle entre alors en conflit
   avec l'inertie native : arrivé en bas, il faut forcer pour atteindre la
   dernière ligne, et la page remonte ensuite d'elle-même. Signalé le 23 août
   2026, mesuré, retiré. Le défilement doux ne concerne que les liens
   d'ancre, et c'est `app.js` qui s'en charge — en respectant
   `prefers-reduced-motion`. */

body {
  margin: 0;
  background: var(--cuir);
  color: var(--encre);
  font-family: var(--body);
  /* GRAISSE 400, et non 300. Jost en 300 est un filiforme : sur un fond clair,
     à 16 px, il se délave. Iliasse l'a signalé le 23 août 2026 — « elle me
     semble trop fine/petite » — et la mesure lui donne raison. Le 400 est déjà
     hébergé dans assets/fonts/, aucun téléchargement de plus.
     Le corps monte aussi : 17,2 px sur téléphone au lieu de 16,2, et l'interligne
     passe de 1,65 à 1,7 parce qu'un texte plus gras a besoin d'un peu plus
     d'air pour ne pas prendre l'aspect d'un bloc. */
  font-weight: 400;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.1rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* PAS de grain sur les fonds, et c'est une décision, pas un oubli.

   Trois textures ont été essayées le 23 août 2026 : un bruit gris en
   surimpression, le même en fusion `soft-light`, puis un bruit opaque déjà
   coloré et calé sur la mesure du cuir du logo (2,22 L* à 3 px). La dernière
   était juste au photomètre — 2,23 L* mesurés sur la page rendue — et fausse à
   l'œil : `feTurbulence` produit un bruit isotrope, sans les cellules ni les
   plis d'une peau, et à l'échelle de la page il lit comme du bruit d'image,
   pas comme du cuir.

   Ce qui reste, c'est l'aplat : la même couleur, la même teinte, les mêmes
   trois valeurs relevées sur le logo. La couleur portait déjà l'essentiel du
   rapprochement ; la texture n'y ajoutait qu'un artefact. Les trois fichiers
   de logo restent en PNG à fond transparent, donc ils se posent sur un aplat
   sans aucune couture — c'est même là qu'ils sont le plus propres.

   `tools/grain-cuir.py` est conservé pour mémoire, hors service. */

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--cuivre); color: var(--cuir-haut); }
:focus-visible {
  outline: 2px solid var(--cuivre);
  outline-offset: 3px;
  border-radius: 1px;
}
html { scrollbar-color: var(--cuivre-pale) var(--cuir-bas); scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--cuir-bas); }
::-webkit-scrollbar-thumb {
  background: var(--cuivre-pale); border-radius: 6px;
  border: 3px solid var(--cuir-bas);
}

.skip {
  position: absolute; left: -9999px;
  background: var(--encre); color: var(--cuir); padding: var(--s2) var(--s3);
  font-family: var(--body); font-size: 0.8rem; letter-spacing: 0.18em;
  text-transform: uppercase; text-decoration: none;
}
.skip:focus { left: var(--s3); top: var(--s3); z-index: 90; }

/* ============================ TYPE ============================ */
h1, h2, h3 { margin: 0; font-weight: 300; }

/* Le plafond est passé de 3,5 rem à 3 rem, et la pente de 2,4vw à 1,7vw, le
   23 août 2026 avec la nouvelle accroche. Ce n'est pas une question de goût,
   c'est une mesure : « FROM THE DRAWING » est la plus longue ligne du titre, et
   la colonne de texte fait 516 px à 1 440. À 52 px cette ligne en demande 528 —
   douze de trop, et le navigateur la cassait en deux en laissant DRAWING seul.
   À 45 px elle en demande 458 et le second membre tient sur deux lignes.

   La pente compte autant que le plafond : à 1 000 px la colonne tombe à 406 px
   et c'est LÀ que le titre est le plus à l'étroit, pas sur grand écran. Une
   pente de 2,4vw y donnait 41,6 px pour 406 px de place, soit 15 de trop.

   Le plancher est descendu de 2,1 à 1,9 rem pour la même raison, à l'autre
   bout : à 33,6 px la ligne demandait 340 px, et un iPhone SE n'en offre que
   335. Le titre y passait à trois lignes avec DRAWING seule au milieu. À 30,4 px
   elle en demande 308, et le second membre tient sur deux lignes dès 360 px de
   fenêtre. Sept pour cent de titre en moins valent mieux qu'une coupe bancale
   sur les deux téléphones les plus répandus.

   `text-wrap: balance` fait le reste et remplace toute coupe écrite. Une coupe
   écrite fige un choix qui n'est bon qu'à une largeur ; `balance` égalise les
   lignes à toutes. Sous 360 px le second membre passe à trois lignes, mais
   équilibrées et sans veuve — la dernière ligne garde trois mots. */
h1 {
  font-family: var(--stamp);
  font-size: clamp(1.9rem, 1.3rem + 1.7vw, 3rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
h1 em { font-style: normal; color: var(--cuivre); display: block; }

h2 {
  font-family: var(--stamp);
  font-size: clamp(1.8rem, 1.1rem + 2vw, 3rem);
  line-height: 1.12;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Les capitales espacées de la page. Elles étaient à 0,7 rem — 11,2 px — et
   c'est sous le plancher de lisibilité d'un téléphone, d'autant qu'une capitale
   espacée se lit lettre à lettre. À 0,78 rem elles font 12,5 px, et 13,3 sur
   téléphone où le bloc étroit les relève encore. Le numéro de téléphone est
   dans ce lot : c'est le seul chiffre de la page, il ne peut pas être le texte
   le plus petit. */
.cap, .head-meta, .head-link, .foot-areas, .langs, .tel, .step-n {
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--encre-2);
}

.lede {
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.22rem);
  max-width: 34ch;
  color: var(--encre-2);
}

/* ============================ HEAD ============================ */
.head {
  display: flex; align-items: center; gap: var(--s4);
  max-width: var(--page); margin: 0 auto;
  padding: var(--s4) var(--s4) var(--s3);
}
.head-mark {
  display: flex; align-items: center; gap: 0.7rem;
  text-decoration: none; color: var(--encre);
}
/* Le logo ne porte NI cadre NI ombre. Il en a porté un, et c'était le
   cinquième essai raté : encadrer, c'est admettre que le logo est étranger à
   sa page. Depuis que la page est recalée sur le cuir du fichier — couleur,
   teinte et grain — il n'y a plus de frontière à dessiner. Le fichier s'éteint
   en fondu elliptique, et le raccord ne se voit pas. */
.head-mark img { width: 52px; margin: -0.5rem -0.4rem -0.5rem -0.6rem; }
.head-mark span {
  font-family: var(--stamp); font-size: 1.15rem;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.head-meta { margin: 0 auto 0 0; }
.head-link {
  color: var(--cuivre); text-decoration: none;
  border-bottom: 1px solid var(--cuivre-pale); padding-bottom: 2px;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.head-link:hover { color: var(--encre); border-bottom-color: var(--encre); }

/* ============================ OPENING ============================ */
/* Two columns from 1000px: the claim on the left, a room on the right. The
   text column is deliberately the narrower of the two — the photograph is the
   argument, the sentence only frames it. */
.open {
  max-width: var(--page); margin: 0 auto;
  padding: var(--s5) var(--s4) var(--s5);
  display: grid; gap: var(--s5);
  align-items: center;
}
@media (min-width: 1000px) {
  /* The right column carries two films now, not one plate, so it takes the
     larger share. The text column is held at the measure the claim needs —
     below about 30rem the second clause breaks into four ragged lines. */
  /* Un partage en fractions, et non une colonne de texte figée à 30 rem. Figée,
     elle prenait 480 px sur un écran de 1000 et ne laissait que 192 px par
     film — deux vignettes en ouverture, exactement ce qu'on évite ailleurs.
     En fractions, les films tiennent 229 px à 1000 et 294 à 1440. */
  .open {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: var(--s5);
    padding-block: var(--s6) var(--s6);
  }
}
.open-text { max-width: 34rem; }
.open h1 { margin-bottom: var(--s4); }
.open .lede { margin: 0 0 var(--s5); }

.action {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 1.05rem 1.9rem;
  background: var(--cuivre); color: var(--cuir-haut);
  font-family: var(--body); font-weight: 400;
  font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 14px 26px -18px rgba(48,32,21,0.6), 0 2px 3px -2px rgba(48,32,21,0.3);
  transition: background 240ms var(--ease), transform 240ms var(--ease),
              box-shadow 240ms var(--ease);
}
.action:hover {
  background: var(--encre); transform: translateY(-1px);
  box-shadow: 0 20px 34px -20px rgba(48,32,21,0.7), 0 3px 5px -3px rgba(48,32,21,0.35);
}
.action-lg { font-size: 0.9rem; padding: 1.2rem 2.3rem; }
.ico {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.micro {
  margin: var(--s3) 0 0;
  font-size: 0.95rem; color: var(--encre-2);
}

/* the plates: prints laid on the paper, with a hairline and a real shadow */
.plate { margin: 0; }
.plate img {
  width: 100%;
  border: 1px solid var(--filet);
  box-shadow: 0 40px 60px -45px rgba(48,32,21,0.55),
              0 6px 12px -10px rgba(48,32,21,0.3);
}
.plate figcaption, .cap {
  display: flex; flex-wrap: wrap; gap: 0.9em;
  margin-top: 0.9rem;
  font-family: var(--body); font-weight: 400; font-size: 0.78rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--encre-2);
}
.cap-room { color: var(--cuivre); }

.plate-tall img { aspect-ratio: 4 / 5; object-fit: cover; }

/* ---------------------------- THE FILM ----------------------------
   The one moving thing on the page, and the page's single authored moment.
   It is a plate like the others — square, hairline, warm two-part shadow —
   except that the print moves. Nothing else on this site animates on arrival,
   so the movement reads as the room being walked through rather than as an
   effect. */
/* Two films, side by side. The pair sits in the column the single plate used to
   occupy, so the opening keeps its two-part balance — the sentence on one side,
   the work on the other — and the visitor meets two flats instead of one. */
.films {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
}
/* La réserve valait deux lignes tant que les légendes portaient l'immeuble :
   « Damac Heights · Dubai Marina » passait à la ligne là où « Murjan 2 · JBR »
   tenait, et les deux plaques finissaient à des hauteurs différentes. Depuis le
   23 août 2026 elles ne portent plus que le quartier — « JBR », « Dubai
   Marina » — et une ligne suffit partout. La réserve reste, à la bonne hauteur :
   elle tient l'aplomb de la paire sans dépendre de la longueur du nom. */
.films figcaption { min-height: 1.4rem; align-content: start; }
.film { position: relative; }
.film-reel {
  display: block; width: 100%;
  /* the height attribute on the tag is a presentational hint and it wins over
     aspect-ratio unless height is released here */
  height: auto;
  aspect-ratio: 4 / 5; object-fit: cover;
  background: var(--cuir-bas);
  border: 1px solid var(--filet);
  box-shadow: 0 40px 60px -45px rgba(48,32,21,0.55),
              0 6px 12px -10px rgba(48,32,21,0.3);
}

/* A loop that runs longer than five seconds owes the visitor a way to stop it.
   The control is a struck square in the corner of the print, on the paper's own
   ivory so it belongs to the card and not to the photograph. */
.film-toggle {
  position: absolute; left: var(--s2); bottom: var(--s2);
  width: 40px; height: 40px; padding: 0;
  display: grid; place-items: center;
  background: rgba(241,229,211,0.86);
  border: 1px solid var(--filet);
  color: var(--cuivre); cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease),
              border-color 200ms var(--ease);
}
.film-toggle:hover { background: var(--cuir-haut); color: var(--encre); border-color: var(--encre); }
.film-toggle svg {
  grid-area: 1 / 1;
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico-play { fill: currentColor; stroke: none; }
/* aria-pressed carries the state, so the glyph follows it rather than a class */
.film-toggle .ico-play { display: none; }
.film-toggle[aria-pressed="true"] .ico-pause { display: none; }
.film-toggle[aria-pressed="true"] .ico-play { display: block; }
.film-toggle-label {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* PAS de `.plate-wide` ici, et c'est une suppression, pas un oubli. La vue
   d'ensemble de Murjan 2 tenait toute la largeur de la page entre l'ouverture
   et la grille — 1176 px sur 661 de haut. Réduite à 780 le 23 août 2026, puis
   retirée le jour même : Iliasse ne voulait pas d'une photo plus petite, il ne
   voulait plus de photo de chantier POSÉE SEULE. Elle est passée dans la
   colonne des chantiers, où elle enjambe les deux cellules (`.cell-wide`). */

/* ============================ SECTION HEADS ============================ */
/* the roof of the monogram, drawn once per section — the page's one ornament */
.band {
  max-width: var(--page); margin: 0 auto;
  padding: 0 var(--s4);
}
.chev {
  display: block; width: 82px; height: auto; overflow: visible;
  margin-bottom: var(--s3);
  fill: none; stroke: var(--cuivre); stroke-width: 2.2;
  stroke-linecap: butt; stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}
.band h2 { margin-bottom: var(--s3); }
.band-note {
  max-width: 46ch; margin: 0;
  color: var(--encre-2);
}

/* ===================== THE WORK, ANNOTATED ===================== */
/* UN SEUL chapitre, et non deux. La page a d'abord montré les pièces dans une
   section puis les postes de travail dans la suivante — deux fois le même
   schéma texte-à-gauche / photos-à-droite, l'un derrière l'autre. Iliasse :
   « il faut que ce soit ensemble tout au long ». Les six postes sont donc
   devenus des annotations qui courent le long de la colonne des chantiers,
   chacune en face de la pièce qui la prouve.

   Cinq pistes de colonnes, dont deux sont des gouttières EXPLICITES. C'est le
   seul moyen d'avoir deux gouttières différentes dans une même grille : 52 px
   entre le texte et les photos, parce que ce sont deux mondes, et 20 px entre
   les deux photos d'une même rangée, parce qu'elles se répondent. Avec un
   `column-gap` unique, il aurait fallu choisir — et les deux choix étaient
   mauvais.

   1,03fr pour le texte contre 1fr par photo : à 1 176 px de contenu, cela donne
   375 px de texte et 364 par photo. Le texte tient sa mesure, les photos leur
   taille. */
.chapter { padding: var(--s7) 0 var(--s6); }
/* Le titre de chapitre annonce SEPT rayons, pas le premier d'entre eux : sans
   cet écart, « Living rooms » se lit comme le sous-titre de « Some of the
   work » et le visiteur croit que la page ne montre que des séjours. */
.chapter .band {
  max-width: var(--page); margin-inline: auto; margin-bottom: var(--s5);
  padding-inline: var(--s4);
}

/* ------------------------- LES RAYONS -------------------------
   Un rayon par pièce. Deux ou trois vues tiennent dans la largeur, le reste
   part à droite derrière un défilement horizontal.

   Le calcul de la largeur est le cœur du dispositif. `--par-vue: 3.28` sur
   grand écran ne veut pas dire « 3,28 vues visibles » par coquetterie : il
   veut dire TROIS vues entières et un quart de la quatrième. Ce quart est ce
   qui dit qu'il y a une suite. Un rayon calé sur un compte entier ressemble à
   une rangée qui s'arrête, et personne ne fait glisser une rangée qui
   s'arrête. */
.rayon {
  max-width: var(--page); margin: 0 auto var(--s6);
  --par-vue: 2.15;
  --rail-gap: var(--s3);
}
.rayon:last-of-type { margin-bottom: var(--s5); }
@media (min-width: 1000px) { .rayon { --par-vue: 3.28; } }

.rayon-tete {
  display: flex; align-items: baseline; gap: var(--s3);
  padding: 0 var(--s4) var(--s3);
  border-bottom: 1px solid var(--filet);
  margin-bottom: var(--s3);
}
.rayon-tete h3 {
  margin: 0;
  font-family: var(--stamp); font-size: 1.35rem; line-height: 1.15;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cuivre);
}
.rayon-note {
  margin: 0; color: var(--encre-2);
  /* La note garde sa mesure de lecture même quand le rayon fait toute la
     largeur : une ligne de 1 100 px ne se lit pas. */
  max-width: 46ch; font-size: 0.94rem;
}
.rayon-compte {
  margin: 0 0 0 auto; white-space: nowrap;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--encre-2); font-variant-numeric: tabular-nums;
}
.rayon-note + .rayon-compte { margin-left: auto; }

/* Les flèches ne servent qu'à la souris : sur un écran tactile on pousse le
   rayon du doigt, et deux boutons de plus ne feraient qu'encombrer. */
.rayon-nav { display: none; gap: var(--s1); }
@media (min-width: 1000px) { .rayon-nav { display: flex; } }
.fleche {
  appearance: none; width: 38px; height: 38px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; color: var(--encre);
  border: 1px solid var(--filet);
  transition: background 220ms var(--ease), color 220ms var(--ease),
              border-color 220ms var(--ease);
}
.fleche:hover:not(:disabled) {
  background: var(--encre); color: var(--cuir); border-color: var(--encre);
}
.fleche:disabled { color: var(--filet); cursor: default; }
.fleche svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

.rail {
  list-style: none; margin: 0;
  display: flex; gap: var(--rail-gap);
  overflow-x: auto; overscroll-behavior-x: contain;
  /* Le rail déborde des marges de la page et reprend le padding en interne :
     sans cela, la vue qui dépasse à droite serait coupée par une marge et non
     par le bord de l'écran — elle aurait l'air rognée, pas continuée. */
  padding: var(--s1) var(--s4) var(--s3);
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--s4);
  scrollbar-color: var(--cuivre-pale) transparent;
  scrollbar-width: thin;
}
.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-track { background: transparent; }
.rail::-webkit-scrollbar-thumb {
  background: var(--cuivre-pale); border-radius: 4px;
}
.rail:focus-visible { outline: 2px solid var(--cuivre); outline-offset: -2px; }

.vue-cell {
  flex: 0 0 calc((100% - (var(--par-vue) - 1) * var(--rail-gap)) / var(--par-vue));
  scroll-snap-align: start;
}

/* Les trois métiers sans pièce à eux. Trois colonnes égales et aucun cadre :
   ce sont des paragraphes, pas des cartes — trois cartes ici feraient croire à
   trois offres alors qu'il s'agit de ce qui traverse toutes les autres. */
.metiers {
  max-width: var(--page); margin: 0 auto; padding: var(--s4) var(--s4) 0;
  border-top: 1px solid var(--filet);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3) var(--s4);
}
/* La tête tient la largeur des trois colonnes : c'est ce qui les relie. Posée
   dans une seule, elle se lirait comme le titre du premier métier. */
.metiers-tete { grid-column: 1 / -1; margin-bottom: var(--s2); }
.metiers-tete h3 {
  margin: 0 0 var(--s1);
  font-family: var(--stamp); font-size: 1.35rem; line-height: 1.15;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--cuivre);
}
.metiers-tete p { margin: 0; max-width: 46ch; color: var(--encre-2); }
.metier h3 {
  margin: 0 0 var(--s1);
  font-family: var(--stamp); font-size: 1.2rem; line-height: 1.15;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--cuivre);
}
.metier p { margin: 0; color: var(--encre-2); font-size: 0.94rem; }

.open-frame {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.open-frame img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  background: var(--cuir-bas);
  border: 1px solid var(--filet);
  box-shadow: 0 26px 40px -34px rgba(48,32,21,0.5),
              0 4px 8px -7px rgba(48,32,21,0.28);
  transition: transform 420ms var(--ease), box-shadow 420ms var(--ease);
}
.open-frame:hover img, .open-frame:focus-visible img {
  transform: translateY(-4px);
  box-shadow: 0 40px 56px -34px rgba(48,32,21,0.55),
              0 6px 12px -8px rgba(48,32,21,0.3);
}

/* PAS de section « scope » ici : elle a été fondue dans le chapitre ci-dessus.
   Ses six postes y sont devenus des annotations, `.trade`, chacune placée en
   face de la pièce qui la prouve. 21,6 px en graisse 300 n'est pas du « grand
   texte » au sens WCAG, et c'est pourquoi le titre d'un poste prend le cuivre
   plein `--cuivre` : il passe 4,5:1 tout seul, comme le reste. */

/* ============================ HOW ============================ */
.run { padding: var(--s6) 0 var(--s7); }
.steps {
  list-style: none; max-width: var(--page);
  margin: var(--s5) auto 0; padding: 0 var(--s4);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s4);
}
.step { border-top: 1px solid var(--filet); padding-top: var(--s3); }
.step-n {
  display: block; margin-bottom: var(--s2);
  font-family: var(--stamp); font-size: 0.95rem;
  letter-spacing: 0.2em; color: var(--cuivre);
}
.step h3 {
  font-family: var(--stamp); font-size: 1.25rem; line-height: 1.2;
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: var(--s2);
}
.step p { margin: 0; font-size: 1rem; color: var(--encre-2); }

/* ============================ WHO ============================ */
.who {
  background: var(--cuir-haut);
  border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet);
  padding: var(--s7) 0;
}
.who-inner {
  max-width: 62rem; margin: 0 auto; padding: 0 var(--s4);
  text-align: center;
}
.who-mark { width: 96px; margin: 0 auto calc(var(--s4) - 0.7rem); }
.who h2 { margin-bottom: var(--s4); }
.who p { max-width: 60ch; margin: 0 auto; color: var(--encre-2); }
.who p + p { margin-top: var(--s3); }
.langs { margin-top: var(--s5); color: var(--cuivre); }

/* ============================ CLOSE ============================ */
.close { padding: var(--s7) 0; }
.close-inner {
  max-width: 44rem; margin: 0 auto; padding: 0 var(--s4);
  text-align: center;
}
.close h2 {
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem);
  margin-bottom: var(--s3);
}
.close h2 em { font-style: normal; color: var(--cuivre); }
.close > .close-inner > p { color: var(--encre-2); }
.close .action { margin-top: var(--s4); }
.tel { margin: var(--s3) 0 0; }
.no-price {
  margin: var(--s6) auto 0; max-width: 52ch;
  padding-top: var(--s4); border-top: 1px solid var(--filet);
  font-size: 1rem; color: var(--encre-2);
  /* centred ragged text leaves a single word on the last line often enough
     that it needs saying: no orphan under a centred paragraph */
  text-wrap: pretty;
}

/* ============================ FOOT ============================ */
.foot {
  background: var(--cuir-bas);
  border-top: 1px solid var(--filet);
  /* Le bas est plus généreux que les 52 px d'avant : la dernière ligne
     arrivait à 52 px du bord de l'écran, assez près pour qu'on croie qu'il
     reste quelque chose en dessous et qu'on force le défilement. */
  padding: var(--s6) 0 var(--s6);
}
/* three columns, so the footer occupies the page instead of hugging its left
   edge: the signature, the company, and the ground it covers */
.foot-inner {
  max-width: var(--page); margin: 0 auto; padding: 0 var(--s4);
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--s4) var(--s5); align-items: start;
}
.foot-mark { width: 236px; margin: -0.9rem 0 -0.9rem -1.1rem; }
.foot-cols { display: contents; }
.foot-areas { grid-column: 3; grid-row: 1; }
.foot-photo { grid-column: 2 / -1; }
.foot-legal { margin: 0; font-size: 1rem; color: var(--encre); }
.foot-areas { margin: 0; max-width: 68ch; line-height: 2.1; color: var(--encre-2); }
.foot-photo {
  margin: 0; max-width: 58ch;
  font-size: 0.95rem; color: var(--encre-2);
}

/* ============================ THE OPENED PLATE ============================ */
.viewer {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: var(--s4);
  background: rgba(40,27,17,0.9);
  opacity: 0; visibility: hidden;
  /* visibility switches at the ends, never interpolated: transitioned over the
     same duration it stays hidden while the panel fades in, and a hidden
     element refuses focus silently */
  transition: opacity 300ms var(--ease), visibility 0s linear 300ms;
}
.viewer.open {
  opacity: 1; visibility: visible;
  transition: opacity 300ms var(--ease), visibility 0s;
}
.viewer img {
  max-width: min(1100px, 92vw); max-height: 82vh; width: auto;
  border: 1px solid rgba(232,220,200,0.25);
  box-shadow: 0 60px 100px -50px rgba(0,0,0,0.9);
}
.viewer-cap {
  margin: var(--s3) 0 0; text-align: center;
  font-family: var(--body); font-weight: 400; font-size: 0.78rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cuir-bas);
}
.viewer-cap .cap-room { color: var(--cuivre-pale); }
.viewer-close {
  position: absolute; top: var(--s3); right: var(--s3);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: none; border: 1px solid rgba(232,220,200,0.3);
  color: var(--cuir); cursor: pointer;
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.viewer-close svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round;
}
.viewer-close:hover { background: rgba(232,220,200,0.12); border-color: var(--cuir); }

/* ============================ NARROW ============================ */
@media (max-width: 900px) {
  .head { flex-wrap: wrap; gap: var(--s2) var(--s3); padding: var(--s3); }
  .head-meta { order: 3; width: 100%; margin: 0; }
  .head-link { margin-left: auto; }

  /* On a phone the claim used to fill the whole first screen and the room began
     below the fold — on the one device this business is actually browsed from.
     So below 900px the film comes first and the sentence reads under it: the
     visitor meets a finished room before he meets a promise about one. */
  .open { padding: var(--s3) var(--s3) var(--s4); gap: var(--s4); }
  .open > .films { order: 1; }
  .open > .open-text { order: 2; }
  .open .lede { margin-bottom: var(--s4); }
  .band, .steps, .foot-inner { padding-inline: var(--s3); }
  .chapter .band, .rayon-tete { padding-inline: var(--s3); }
  .rail { padding-inline: var(--s3); scroll-padding-inline-start: var(--s3); }

  .chapter { padding: var(--s6) 0 var(--s5); }
  /* La tête de rayon se met en pile : le titre, la note, puis le compte. Sur
     390 px, les trois sur une ligne laissaient au titre moins de la moitié de
     la largeur et « Living rooms » se coupait en deux. */
  .rayon-tete { flex-wrap: wrap; gap: var(--s1) var(--s2); }
  .rayon-compte { margin-left: 0; }
  .metiers { grid-template-columns: 1fr; }
  .steps { gap: var(--s3); }
  .who, .close { padding: var(--s6) 0; }
  .foot-inner { grid-template-columns: 1fr; gap: var(--s4); }
  .foot-areas, .foot-photo { grid-column: 1; grid-row: auto; }

  /* Les capitales espacées montent encore d'un cran sur téléphone : c'est là
     qu'elles sont lues, et à bout de bras. 13,3 px au lieu de 12,5. */
  .plate figcaption, .cap, .head-meta, .head-link, .foot-areas, .langs, .tel,
  .viewer-cap { font-size: 0.83rem; }

  /* 40 px ne suffisent pas pour un pouce. Le carré de pause passe à 44, le
     minimum que recommande Apple et que WCAG 2.5.5 prend pour cible. */
  .film-toggle { width: 44px; height: 44px; }
  /* Le lien WhatsApp de l'en-tête n'était qu'une ligne de texte de 18 px de
     haut : impossible à viser. Le remplissage lui donne 44 px sans le
     transformer en bouton — la page n'a qu'une seule action dessinée. */
  .head-link { padding: 0.85rem 0 0.75rem; }
}

/* ---------------------------- TABLETTE ----------------------------
   Entre 600 et 1000 px, le rayon montre deux vues et demie plutôt que deux et
   un sixième : la largeur disponible le permet, et deux vues seules sur 900 px
   font des images de 430 px — plus grandes que sur un ordinateur, ce qui est
   absurde. */
@media (min-width: 600px) and (max-width: 999px) {
  .rayon { --par-vue: 2.6; }
}
}

@media (max-width: 599px) {
  /* LES DEUX FILMS RESTENT CÔTE À CÔTE, Y COMPRIS SUR TÉLÉPHONE. Décision
     d'Iliasse, 23 août 2026, après l'avoir vu sur le sien.

     Ils s'empilaient avant, au motif qu'en 4:5 sur 375 px chacun serait une
     vignette. C'était vrai du format, pas de l'intention : empilés, les deux
     appartements se lisent l'un après l'autre, et l'ouverture devient un
     couloir de 700 px de haut qu'il faut faire défiler avant d'atteindre le
     travail. Côte à côte, on voit DEUX chantiers d'un seul regard — c'est
     l'argument, et il vaut plus que la taille de chaque image.

     Le format passe de 4:5 à 3:4 sur cette largeur, et c'est ce qui rend la
     paire tenable : à 375 px de fenêtre, chaque film reçoit 164 px de large.
     En 4:5 il en demandait 205 de haut, en 3:4 il en demande 219 — on rend la
     surface à la hauteur, là où l'écran d'un téléphone en a de reste, plutôt
     qu'à la largeur, où il n'en a pas. La gouttière se resserre d'autant. */
  .films { gap: var(--s2); }
  .film-reel { aspect-ratio: 3 / 4; }
  /* Sur 169 px, « The walk-through » passe à la ligne quand « The living space »
     tient : le quartier de gauche tombait alors une ligne plus bas que celui de
     droite, et la paire perdait son assise. Le nom de la pièce prend sa propre
     ligne et en réserve deux — le quartier commence à la même hauteur des deux
     côtés, quelle que soit la longueur du nom. */
  .films .cap-room { display: block; min-height: 3.4em; }
  /* La commande ne peut pas garder 44 px dans un cadre de 164 : elle mangerait
     le quart de l'image. Elle descend à 34, ce qui reste au-dessus du seuil de
     lisibilité de l'icône, et se colle au coin pour rendre le reste au film. */
  .film-toggle { width: 34px; height: 34px; left: 6px; bottom: 6px; }
  .film-toggle svg { width: 15px; height: 15px; }
}

@media (max-width: 560px) {
  /* the one action must never reach the edge: a clipped call to action is a
     lost conversation, so it wraps here rather than holding one line */
  .action {
    white-space: normal; font-size: 0.83rem;
    padding: 1rem 1.4rem; letter-spacing: 0.14em; line-height: 1.45;
  }
  .action-lg { font-size: 0.88rem; padding: 1.1rem 1.6rem; }
  .foot-mark { width: 196px; margin: -0.7rem 0 -0.7rem -0.9rem; }
}