/* ==========================================================================
   ATELIER 227 — « Prestige » · monochrome monumental
   --------------------------------------------------------------------------
   D'après les références : un mot ARCHITECTURE à l'échelle de l'écran, crevé
   par la photographie ; papier cassé du logo, encre noire, photographie en
   noir & blanc ; la Bodoni du logo réservée aux noms de réalisations et aux
   citations ; photographie en noir & blanc sur l'accueil et l'agence, EN
   COULEUR une fois entré dans une réalisation (couverture + galerie) ;
   le bleu électrique tenu en réserve — curseur, survols, un mot italique, et
   UN aplat : le module bas-droite du calepinage du hero, qui reprend celui
   déposé par l'ouverture et rend le raccord lisible. C'est la seule surface
   bleue du site ; tout reste supprimable en vidant --blue.

   Toute valeur passe par un token. Préfixe : a227-
   ========================================================================== */

:root {
  /* --- Fonds (le papier du logo) ------------------------------------------ */
  --paper:   #F2F0EA;
  --paper-2: #E8E5DC;
  --black:   #0D0D0C;

  /* --- Encre (mesurée) ---------------------------------------------------- */
  --ink:       #111110;    /* 16.6:1 sur papier                              */
  --ink-muted: #5D5B54;    /* 5.96 / 5.40:1 sur les deux papiers             */
  --on-black:       #F2F0EA;   /* 17.1:1                                     */
  --on-black-muted: #8F8D86;   /* 5.85:1                                     */
  --line:       rgba(17, 17, 16, .14);
  --line-black: rgba(242, 240, 234, .18);

  /* --- Les trois micro-touches bleues ------------------------------------- */
  --blue:       #2440FF;   /* 5.67:1 sur papier                              */
  --blue-black: #8FA0FF;   /* 8.0:1 sur noir                                 */
  --on-blue:    #F2F0EA;

  /* --- Voile des légendes sur photo (calibré au pixel, neutre sombre) ------ */
  --scrim: linear-gradient(to top,
            rgba(11, 12, 14, .92) 0%,
            rgba(11, 12, 14, .84) 30%,
            rgba(11, 12, 14, .62) 50%,
            rgba(11, 12, 14, .22) 70%,
            rgba(11, 12, 14, 0)   86%);

  /* --- Typographie : la grotesque monumentale, la Didone du logo, le mono - */
  --ff-grot: "Instrument Sans", "Helvetica Neue", system-ui, sans-serif;
  --ff-serif: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --ff-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --fs-mega:     19.5vw;   /* Bodoni : chasse mesurée 4.452 x le corps, soit
                              12,5 % de plus que la grotesque — 22vw ne laissait
                              plus que 13 px de marge. 19.5vw rend les 84 px.  */
  --hero-top:    clamp(140px, 19vh, 250px);    /* l'air sous le bandeau      */
  --fs-statement: clamp(30px, 5.6vw, 84px);
  --fs-workname: clamp(44px, 8vw, 120px);
  --fs-workindex: clamp(120px, 22vw, 320px);
  --fs-wordmark: clamp(56px, 14.5vw, 222px);  /* « ATELIER 227 » en Bodoni 700 :
                              chasse mesurée 6.345 x le corps contre 5.590 en
                              grotesque. Les trois bornes sont l'ancien clamp
                              x 0.881 : même occupation d'écran (92 %) qu'avant. */
  --fs-h2:       clamp(26px, 3.6vw, 52px);
  --fs-quote:    clamp(21px, 2.4vw, 34px);
  --fs-step:     clamp(19px, 2vw, 27px);
  --fs-lede:     clamp(16px, 1.5vw, 19px);
  --fs-body:     16px;
  --fs-sm:       14px;
  --fs-mono:     12px;
  --fs-mono-sm:  11px;
  --fs-button:   13px;

  --fw-mega:  700;   /* Bodoni : le gras du display, pas celui des noms      */
  --fw-mega-grot: 640;   /* le display resté en grotesque : manifeste, numéros  */
  --fw-grot:  600;
  --fw-serif: 500;
  --ls-mega:  -.005em;  /* une Didone ne se resserre pas comme une grotesque */
  --ls-mega-grot: -.03em;   /* la grotesque, elle, le supporte               */
  --ls-grot:  -.01em;
  --ls-serif: .01em;
  --ls-mono:  .12em;

  --lh-body: 1.7;

  /* --- Espacements & formes ----------------------------------------------- */
  --space-2xs: 4px;  --space-xs: 8px;  --space-sm: 14px;
  --space-md:  20px; --space-lg: 28px;
  --space-xl:  clamp(24px, 3vw, 44px);
  --space-2xl: clamp(32px, 4.4vw, 64px);
  --space-3xl: clamp(48px, 7vw, 110px);
  --space-4xl: clamp(80px, 13vw, 190px);

  --gutter: clamp(20px, 4.4vw, 64px);
  --wide:   1360px;

  --dur-micro: .22s;
  --dur-base:  .7s;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html { scroll-behavior: smooth; overflow-x: clip; }
html.a227-smooth { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-grot);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, figure, blockquote, address { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
sup { font-size: .6em; vertical-align: super; line-height: 0; }

::selection { background: var(--blue); color: var(--on-blue); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

.a227-wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }

/* Cadrage décentré pour les vues dont le sujet n'est pas au milieu : sur les
   recadrages étroits (planche mobile, relais du hero en 4:5, bande de
   l'ouverture), un centrage à 50 % trancherait le lettrage de la galerie
   Mews Partners ; à 30 % la fenêtre garde l'enfilade d'arches. */
.a227-obj-left { object-position: 30% 50%; }

/* Noir & blanc partout SAUF dans les pages réalisation : la planche est en
   N&B, on entre dans le projet et il prend ses couleurs. */
.a227-bw img { filter: grayscale(1); }

.a227-skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  padding: var(--space-sm) var(--space-lg);
  background: var(--blue); color: var(--on-blue);
  font-family: var(--ff-mono); font-size: var(--fs-mono); letter-spacing: var(--ls-mono);
}
.a227-skip:focus-visible { left: var(--space-md); top: var(--space-md); }

.a227-folio {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-md);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-2xl);
  font-family: var(--ff-mono); font-weight: 300;
  font-size: var(--fs-mono-sm); letter-spacing: var(--ls-mono);
  color: var(--ink-muted);
}

.a227-h2 {
  font-family: var(--ff-grot);
  font-weight: var(--fw-grot);
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: var(--ls-grot);
  margin-bottom: var(--space-2xl);
}
.a227-h2 em { font-family: var(--ff-serif); font-style: italic; font-weight: var(--fw-serif); color: var(--blue); }

.a227-pill {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--ff-mono); font-weight: 400;
  font-size: var(--fs-button); letter-spacing: var(--ls-mono);
  transition: background var(--dur-micro) var(--ease-out);
}
.a227-pill:hover { background: var(--blue); }

.a227-mask { display: block; overflow: hidden; padding-bottom: .06em; }
.a227-mask > span { display: block; }

/* ==========================================================================
   Ouverture « La planche »
   --------------------------------------------------------------------------
   Grammaire empruntée à une référence de motion design — grille modulaire à
   filets fins, aplats, UN seul accent de couleur, et surtout le sujet qui
   crève son module — transposée au vocabulaire de l'agence : c'est le
   calepinage de l'architecte, et l'accent est le bleu déjà réservé aux trois
   micro-touches du site.

   La grille est en pourcentages purs (tiers), donc juste à toute taille sans
   media query. La bande photographique occupe 8%→92% × 28%→72% : elle
   déborde sa rangée de 25,3 % de sa largeur de chaque côté, ce qui lui fait
   franchir les deux filets verticaux. Son `clip-path` de départ
   (`inset(12.12% 30.16%)`) la circonscrit EXACTEMENT à la cellule centrale —
   valeurs calculées, pas ajustées à l'œil.

   Le voile ne porte AUCUN `transform` : un transform sur un ancêtre en ferait
   le bloc conteneur des descendants `fixed`. Les enfants sont donc en
   `absolute` dans un voile `fixed inset:0`, ce qui fait coïncider leurs
   coordonnées avec celles du viewport — la contraction peut viser directement
   les valeurs de `getBoundingClientRect()` du hero.

   `!important` est assumé sur .a227-takeover : il faut neutraliser les règles
   de mise en page du hero (aspect-ratio, max-height) le temps de la prise,
   sans jamais dupliquer l'image.
   ========================================================================== */

.a227-planche { display: none; }
html.a227-js:not(.a227-seen) .a227-planche {
  display: block;
  position: fixed; inset: 0; z-index: 200;
  background: var(--paper);
  overflow: hidden;
  /* Décoratif et jamais interactif : il n'intercepte aucun clic, même si une
     panne le laissait en place une fraction de seconde. */
  pointer-events: none;
}

/* --- Le calepinage -------------------------------------------------------- */

.a227-pl-rule { position: absolute; background: var(--line); }
.a227-pl-v { top: 0; bottom: 0; width: 1px; transform: scaleY(0); }
.a227-pl-h { left: 0; right: 0; height: 1px; transform: scaleX(0); }
.a227-pl-v1 { left: 33.3333%; }
.a227-pl-v2 { left: 66.6667%; }
.a227-pl-h1 { top: 33.3333%; }
.a227-pl-h2 { top: 66.6667%; }

/* --- Les cellules pleines ------------------------------------------------- */

/* La plaque groupe tout ce qui recule en fin d'ouverture. Le sujet en est
   exclu : lui reste et voyage jusqu'au hero. Le `transform` posé ici est sans
   danger — les descendants sont en `absolute`, pas en `fixed`. */
.a227-pl-plate { position: absolute; inset: 0; }

.a227-pl-cell {
  position: absolute;
  width: 33.3333%; height: 33.3333%;
  overflow: hidden;
  clip-path: inset(0 0 100% 0);   /* posée par le haut, comme un tirage */
}
.a227-pl-shot { left: 0; top: 66.6667%; }
.a227-pl-shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}

/* L'aplat saute de module en module sur le tempo : sa position est pilotée
   en JS, on ne fixe ici que le module de départ. */
.a227-pl-blue {
  position: absolute;
  left: 66.6667%; top: 0;
  width: 33.3333%; height: 33.3333%;
  background: var(--blue);
  clip-path: inset(0 0 100% 0);
}

/* --- Les étiquettes d'angle ----------------------------------------------- */

/* Positionnées par `inset` et alignées en flex : aucune transformation CSS,
   pour que GSAP soit seul propriétaire du `x` des `span`. */
.a227-pl-lab {
  position: absolute;
  width: 33.3333%; height: 33.3333%;
  display: flex;
  padding: var(--space-md);
  font-family: var(--ff-mono); font-weight: 300;
  font-size: var(--fs-mono-sm); letter-spacing: var(--ls-mono);
  color: var(--ink-muted);
}
.a227-pl-lab > span { opacity: 0; }
.a227-pl-lab-tr { left: 33.3333%; top: 0; align-items: flex-end; justify-content: flex-end; }
.a227-pl-lab-bl { left: 66.6667%; top: 66.6667%; align-items: flex-start; }

/* Le compteur : les quatre références sont empilées et permutées en coupe
   franche, jamais réécrites. Une mutation de texte ne se rejouerait pas à
   l'identique lors d'un seek ; une permutation d'opacité, si. La boîte est
   dimensionnée par la première, en flux, pour que rien ne bouge au change. */
.a227-pl-count { position: relative; display: inline-block; }
.a227-pl-count > b { font-weight: 300; }
.a227-pl-count > b + b { position: absolute; left: 0; top: 0; opacity: 0; }

/* --- Le sujet ------------------------------------------------------------- */

.a227-pl-media {
  position: absolute;
  left: 8%; top: 28%; width: 84%; height: 44%;
  overflow: hidden;
  /* Circonscrit à la cellule centrale. Voir l'en-tête pour le calcul. */
  clip-path: inset(12.12% 30.16%);
  will-change: clip-path, top, left, width, height;
}
/* Les quatre vues sont superposées et permutées en coupe franche. La
   première est en flux (elle donne sa taille), les suivantes en absolu. */
.a227-pl-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  will-change: transform;
}
.a227-pl-media img + img { position: absolute; inset: 0; opacity: 0; }

.a227-takeover {
  position: fixed !important;
  z-index: 210;
  margin: 0 !important;
  box-shadow: none !important;
  will-change: clip-path, width, height, top, left;
}
.a227-takeover img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: cover;
}

/* ==========================================================================
   04 · L'AGENCE — trois temps épinglés
   --------------------------------------------------------------------------
   L'état empilé est celui de REPLI : sans JavaScript, au tactile ou sous
   861 px, les trois temps se lisent à la suite, tout est visible. C'est
   `.a227-agence-live`, posée par le JS au moment d'épingler, qui les
   superpose — jamais l'inverse.
   ========================================================================== */

.a227-agence { background: var(--paper-2); }
.a227-agence-in { padding: var(--space-3xl) var(--gutter); }

.a227-agence-stage {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-3xl);
  align-items: start;
}

.a227-agence-portrait img {
  width: 100%; height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1);
}
.a227-agence-portrait figcaption {
  display: flex; flex-direction: column; gap: var(--space-2xs);
  border-top: 1px solid var(--line);
  margin-top: var(--space-md); padding-top: var(--space-md);
}
.a227-agence-name { font-family: var(--ff-serif); font-size: var(--fs-lede); }
.a227-agence-role {
  font-family: var(--ff-mono); font-weight: 300;
  font-size: var(--fs-mono-sm); letter-spacing: var(--ls-mono);
  color: var(--ink-muted);
}

.a227-agence-steps { position: relative; }

.a227-agence-step + .a227-agence-step { margin-top: var(--space-3xl); }
.a227-agence-num {
  font-family: var(--ff-mono); font-weight: 300;
  font-size: var(--fs-mono-sm); letter-spacing: var(--ls-mono);
  color: var(--ink-muted);
  margin-bottom: var(--space-md);
}
.a227-agence-title {
  font-family: var(--ff-grot);
  font-weight: var(--fw-grot);
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: var(--ls-grot);
  margin-bottom: var(--space-md);
}
.a227-agence-title em {
  font-family: var(--ff-serif); font-style: italic;
  font-weight: var(--fw-serif); color: var(--blue);
}
.a227-agence-text { max-width: 52ch; font-size: var(--fs-lede); }

/* Hors épinglage c'est un simple filet de séparation, à pleine largeur.
   Il ne se rétracte QUE dans l'état épinglé, où le JS l'anime : sinon il
   resterait invisible sur mobile et sans JavaScript. */
.a227-agence-rule {
  display: block;
  height: 1px; margin-top: var(--space-2xl);
  background: var(--ink);
  transform-origin: left;
}
.a227-agence-live .a227-agence-rule { transform: scaleX(0); }
.a227-agence-more { margin-top: var(--space-xl); }

/* --- État épinglé : posé par le JS uniquement ----------------------------- */

/* Les temps se superposent, et la colonne prend la hauteur du plus haut —
   sinon la mise en page sauterait à chaque relais. */
.a227-agence-live .a227-agence-steps { display: grid; }
.a227-agence-live .a227-agence-step {
  grid-area: 1 / 1;
  margin-top: 0;
}
/* Épinglée, la section ne doit pas dépasser l'écran : sinon le bas — donc
   le bouton — resterait hors champ pendant tout le défilement. C'est le
   portrait qui gouverne la hauteur, on le borne donc en unités d'écran ;
   `object-fit: cover` le recadre au lieu de le déformer. */
.a227-agence-live .a227-agence-portrait img { max-height: 46svh; }

.a227-agence-live .a227-agence-rule,
.a227-agence-live .a227-agence-more { grid-area: 2 / 1; }
.a227-agence-live .a227-agence-more { align-self: end; margin-top: var(--space-3xl); }

@media (max-width: 860px) {
  .a227-agence-stage { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .a227-agence-portrait { max-width: 420px; }
}

/* ==========================================================================
   PAGES RÉALISATION (realisation-0X-*.html)
   --------------------------------------------------------------------------
   Même grammaire que le reste : folio en cartouche, titre Bodoni, filets à
   14 %. L'image de présentation est la MÊME que sur l'accueil — c'est elle
   qui fait le raccord d'une page à l'autre.
   ========================================================================== */

.a227-proj-head { padding: var(--space-3xl) 0 var(--space-2xl); }

.a227-proj-kicker {
  font-family: var(--ff-mono); font-weight: 300;
  font-size: var(--fs-mono-sm); letter-spacing: var(--ls-mono);
  color: var(--ink-muted);
  margin-bottom: var(--space-md);
}
.a227-proj-title {
  font-family: var(--ff-serif);
  font-weight: var(--fw-serif);
  font-size: clamp(48px, 10vw, 148px);
  line-height: .96;
  letter-spacing: var(--ls-serif);
  margin-bottom: var(--space-lg);
}
.a227-proj-lede { max-width: 46ch; font-size: var(--fs-lede); color: var(--ink-muted); }

/* Pleine largeur, bornée en hauteur : la photographie annonce, elle
   n'écrase pas. */
.a227-proj-cover { width: 100%; }
.a227-proj-cover img {
  width: 100%; height: auto;
  aspect-ratio: 16 / 9;
  max-height: 74svh;
  object-fit: cover;
}

/* --- Descriptif + fiche --------------------------------------------------- */

.a227-proj-body { padding: var(--space-3xl) 0; }
.a227-proj-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--space-3xl);
  align-items: start;
}
.a227-proj-text p { max-width: 62ch; }

/* Le descriptif attend l'agence : l'emplacement se voit, il ne se confond
   pas avec du texte livré. */
.a227-proj-todo {
  border-left: 2px solid var(--blue);
  padding-left: var(--space-md);
  color: var(--ink-muted);
}

.a227-proj-fiche { margin: 0; }
.a227-proj-fiche > div {
  display: flex; justify-content: space-between; gap: var(--space-md);
  border-top: 1px solid var(--line);
  padding: var(--space-sm) 0;
}
.a227-proj-fiche dt {
  font-family: var(--ff-mono); font-weight: 300;
  font-size: var(--fs-mono-sm); letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.a227-proj-fiche dd { margin: 0; font-size: var(--fs-sm); text-align: right; }

/* --- Autres vues ---------------------------------------------------------- */

.a227-proj-gal { background: var(--paper-2); padding: var(--space-3xl) 0; }
.a227-proj-gal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
}
.a227-proj-shot-wide { grid-column: 1 / -1; }
/* EN COULEUR — la seule exception du site, et elle est voulue : la planche
   de l'accueil est en noir et blanc, on entre dans le projet et il prend ses
   couleurs. La couverture n'a pas la classe .a227-bw pour la même raison. */
.a227-proj-shot img {
  width: 100%; height: auto;
  object-fit: cover;
}
.a227-proj-shot-wide img { aspect-ratio: 3 / 2; }
.a227-proj-shot:not(.a227-proj-shot-wide) img { aspect-ratio: 4 / 5; }

/* --- Suite ---------------------------------------------------------------- */

.a227-proj-next { padding: var(--space-3xl) 0 var(--space-2xl); }
.a227-proj-next-link {
  display: flex; flex-direction: column; gap: var(--space-xs);
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.a227-proj-next-kick {
  font-family: var(--ff-mono); font-weight: 300;
  font-size: var(--fs-mono-sm); letter-spacing: var(--ls-mono);
  color: var(--ink-muted);
}
.a227-proj-next-name {
  font-family: var(--ff-serif); font-weight: var(--fw-serif);
  font-size: clamp(36px, 6vw, 84px); line-height: 1;
  transition: color var(--dur-micro) var(--ease-out);
}
.a227-proj-next-link:hover .a227-proj-next-name { color: var(--blue); }

.a227-proj-back { margin-top: var(--space-2xl); }
.a227-proj-next .a227-footline { margin-top: var(--space-4xl); }

@media (max-width: 860px) {
  .a227-proj-grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .a227-proj-gal-grid { grid-template-columns: 1fr; }
  .a227-proj-shot:not(.a227-proj-shot-wide) img { aspect-ratio: 3 / 2; }
}

/* ==========================================================================
   PAGE « L'AGENCE » (a-propos.html)
   --------------------------------------------------------------------------
   Mêmes tokens, même grammaire que l'accueil : folio en cartouche, titre
   Bodoni sous masque, filets à 14 %. La seule différence est le bandeau, qui
   n'a plus de hero à surplomber — il devient donc opaque et pousse le contenu.
   ========================================================================== */

/* Sur l'accueil le bandeau flotte au-dessus du hero (position: absolute).
   Ailleurs il n'y a rien dessous : il reprend sa place dans le flux, sans
   quoi le titre de page passerait dessous. */
.a227-head-solid {
  position: relative;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.a227-page-head { padding: var(--space-3xl) 0 var(--space-2xl); }

.a227-page-title {
  font-family: var(--ff-serif);
  font-weight: var(--fw-serif);
  font-style: italic;
  font-size: clamp(56px, 12vw, 172px);
  line-height: .95;
  letter-spacing: var(--ls-serif);
  margin: var(--space-lg) 0 var(--space-xl);
}

.a227-page-lede {
  max-width: 46ch;
  font-size: var(--fs-lede);
  color: var(--ink-muted);
}

/* --- Portrait + propos ---------------------------------------------------- */

.a227-about { padding: var(--space-2xl) 0 var(--space-4xl); }

.a227-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-3xl);
  align-items: start;
}

.a227-about-portrait { position: sticky; top: var(--space-2xl); }
.a227-about-portrait img {
  width: 100%; height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1);       /* comme toute la photographie du site */
}
.a227-about-portrait figcaption {
  display: flex; flex-direction: column; gap: var(--space-2xs);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
  margin-top: var(--space-md);
}
.a227-about-name { font-family: var(--ff-serif); font-size: var(--fs-lede); }
.a227-about-role {
  font-family: var(--ff-mono); font-weight: 300;
  font-size: var(--fs-mono-sm); letter-spacing: var(--ls-mono);
  color: var(--ink-muted);
}

.a227-about-text p { max-width: 62ch; margin-bottom: var(--space-lg); }
.a227-about-more { margin-top: var(--space-xl); }

/* --- Repères -------------------------------------------------------------- */

.a227-reperes { background: var(--paper-2); padding: var(--space-3xl) 0; }

.a227-reperes-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-xl);
  margin: 0;
}
.a227-reperes-list > div {
  border-top: 1px solid var(--line);
  padding-top: var(--space-md);
}
.a227-reperes-list dt {
  font-family: var(--ff-mono); font-weight: 300;
  font-size: var(--fs-mono-sm); letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-xs);
}
.a227-reperes-list dd { margin: 0; font-size: var(--fs-sm); }
.a227-reperes-list a { border-bottom: 1px solid var(--line); }
.a227-reperes-list a:hover { color: var(--blue); border-color: currentColor; }

/* --- Appel ---------------------------------------------------------------- */

.a227-page-cta { padding: var(--space-4xl) 0 var(--space-2xl); }
.a227-page-cta .a227-footline { margin-top: var(--space-4xl); }

@media (max-width: 860px) {
  .a227-about-grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
  /* Collant sur une seule colonne, le portrait resterait figé pendant que le
     texte défile sous lui. */
  .a227-about-portrait { position: static; max-width: 420px; }
}

/* ==========================================================================
   Bandeau de tête — nav scindée, le logo au centre
   ========================================================================== */

.a227-head {
  position: absolute; z-index: 50; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--gutter);
  font-family: var(--ff-mono); font-weight: 300;
  font-size: var(--fs-mono-sm); letter-spacing: var(--ls-mono);
}
.a227-head-side { display: flex; gap: var(--space-xl); }
.a227-head-side a { transition: color var(--dur-micro) var(--ease-out); }
.a227-head-side a:hover, .a227-head-side a[aria-current] { color: var(--blue); }
.a227-head-brand { position: absolute; left: 50%; transform: translateX(-50%); }
.a227-head-brand img { height: 40px; width: auto; }
.a227-head-toggle { display: none; color: var(--ink-muted); }

.a227-menu {
  position: fixed; inset: 0; z-index: 55;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: var(--space-lg);
  padding: var(--space-4xl) var(--gutter);
  background: var(--black);
  color: var(--on-black);
}
.a227-menu[hidden] { display: none; }
.a227-menu a {
  font-family: var(--ff-grot);
  font-weight: var(--fw-grot);
  font-size: clamp(30px, 8vw, 52px);
  line-height: 1.1;
  letter-spacing: var(--ls-grot);
  text-transform: uppercase;
}

/* ==========================================================================
   01 · HERO — ARCHITECTURE bord à bord, l'image passe au travers
   ========================================================================== */

.a227-hero {
  position: relative;
  min-height: 100svh;
  /* Le titre doit respirer sous le bandeau : c'est le vide au-dessus qui
     donne au mot son échelle. */
  padding: var(--hero-top) 0 var(--space-lg);
  display: flex; flex-direction: column; align-items: center;
  overflow: hidden;
}

/* ATELIER est composé dans la Didone du logo, comme les noms de réalisations,
   mais en gras : c'est la même voix, tenue une octave plus bas. L'axe optique
   de Bodoni Moda (6..96) fait tout le travail — à cette échelle il monte au
   maximum et affine les déliés jusqu'au trait de plume. C'est ce contraste
   plein/délié, impossible sur une grotesque, qui fait le luxe. */
.a227-mega {
  position: relative; z-index: 1;
  width: 100%;
  display: flex; justify-content: center; align-items: baseline;
  font-family: var(--ff-serif);
  font-weight: var(--fw-mega);
  font-optical-sizing: auto;
  font-size: var(--fs-mega);
  line-height: .86;
  letter-spacing: var(--ls-mega);
  white-space: nowrap;
  text-transform: uppercase;
}
.a227-mega-word { display: inline-flex; overflow: hidden; padding-bottom: .04em; }
.a227-mega-word [data-letter] { display: inline-block; }

/* Le calepinage du hero — la contrepartie fixe de celui de l'ouverture.
   `height: 100svh` et non 100 % : la section peut être plus haute que
   l'écran, mais les filets doivent tomber sur les tiers du VIEWPORT, sinon
   ils ne coïncideraient pas avec ceux de la plaque et le raccord se verrait.
   L'aplat bleu est au module bas-droite, celui où l'ouverture dépose le sien
   au dernier battement. */
.a227-hero-grid {
  position: absolute; z-index: 0;
  top: 0; left: 0; right: 0; height: 100svh;
  pointer-events: none;
}
.a227-hero-grid span { position: absolute; }
.a227-hg-v, .a227-hg-h { background: var(--line); }
.a227-hg-v { top: 0; bottom: 0; width: 1px; }
.a227-hg-h { left: 0; right: 0; height: 1px; }
.a227-hg-v1 { left: 33.3333%; }
.a227-hg-v2 { left: 66.6667%; }
.a227-hg-h1 { top: 33.3333%; }
.a227-hg-h2 { top: 66.6667%; }
.a227-hg-blue {
  left: 66.6667%; top: 66.6667%;
  width: 33.3333%; height: 33.3333%;
  background: var(--blue);
}

/* L'image monte AU TRAVERS du mot : elle est devant, le mot dépasse de part
   et d'autre. Large et en format paysage, elle devient le sujet du hero. */
.a227-hero-media {
  position: relative; z-index: 2;
  width: min(1180px, 84vw);
  margin-top: -10vw;
  box-shadow: 0 40px 90px rgba(17, 17, 16, .28);
}
/* Bornée en hauteur : la composition doit tenir dans le premier écran.
   Au-delà, l'image se recadre (object-fit) plutôt que de pousser le reste. */
.a227-hero-media img {
  width: 100%; height: auto;
  aspect-ratio: 16 / 9;
  max-height: 38svh;
  object-fit: cover;
  /* Positionnée pour que le `z-index` du relais s'applique : sur un élément
     statique il serait ignoré. */
  position: relative; z-index: 1;
}

/* Les vues suivantes se superposent à la première. Elles sont hors flux :
   c'est la première seule qui donne sa hauteur au cadre, dont la boîte ne
   doit JAMAIS bouger — l'ouverture vise ses coordonnées au pixel.
   `opacity: 0` n'est PAS sous `html.a227-js` : sans JavaScript on veut
   précisément qu'elles restent invisibles et que la première suffise. */
.a227-hero-media img + img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-height: none;
  opacity: 0;
  z-index: 0;
}

/* Le bouton descend nettement sous l'image : collé au bord, il se lisait
   comme une légende. Le blanc qui l'en sépare le pose dans le tiers bas et
   occupe le vide laissé par la suppression des statistiques.

   `position: relative` n'est pas cosmétique : le calepinage est positionné
   (`z-index: 0`) et un élément positionné passe DEVANT le flux normal, quel
   que soit l'ordre du DOM. Sans ce rappel, l'aplat bleu recouvrait la
   pastille — visible sur mobile, où les deux se croisent. */
.a227-hero-cta {
  position: relative; z-index: 1;
  margin-top: clamp(40px, 8vh, 110px);
}

/* ==========================================================================
   02 · STATEMENT — la voix, en très grand
   ========================================================================== */

.a227-statement {
  padding: var(--space-4xl) var(--gutter);
  display: flex; flex-direction: column; gap: var(--space-md);
  text-align: center;
}
.a227-statement-line {
  font-family: var(--ff-grot);
  font-weight: var(--fw-mega-grot);
  font-size: var(--fs-statement);
  line-height: 1.02;
  letter-spacing: var(--ls-mega-grot);
}
.a227-statement-line em {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: var(--fw-serif);
  text-transform: none;
  color: var(--blue);
}

/* ==========================================================================
   BANDE « 227 » — la photographie prise DANS la lettre
   --------------------------------------------------------------------------
   Sans `background-clip: text`, le texte resterait invisible : la règle de
   repli le laisse en aplat, et le remplissage photographique n'est appliqué
   qu'à l'intérieur du @supports.
   ========================================================================== */

.a227-numeral {
  background: var(--paper);
  padding: var(--space-3xl) 0 0;
  overflow: hidden;
}
.a227-numeral-text {
  margin-bottom: -.22em;
  font-family: var(--ff-grot);
  font-weight: var(--fw-mega-grot);
  font-size: 42vw;
  line-height: .82;
  letter-spacing: -.045em;
  text-align: center;
  color: var(--ink);
  user-select: none;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .a227-numeral-text {
    color: transparent;
    /* Image DÉJÀ en noir & blanc (tools : PIL). Aucun `filter` ici : sous
       Chromium, un filtre sur l'élément qui porte `background-clip: text`
       fait disparaître le remplissage. */
    background-image: url("../assets/227-signature-bw.jpg");
    background-size: 100% auto;
    background-position: center 40%;
    -webkit-background-clip: text;
    background-clip: text;
    will-change: background-position;
  }
}

/* ==========================================================================
   03 · RÉALISATIONS — six pleins écrans noir & blanc
   ========================================================================== */

.a227-works { background: var(--black); color: var(--on-black); }
.a227-works > .a227-folio {
  color: var(--on-black-muted);
  border-bottom-color: var(--line-black);
  margin-bottom: 0;
  padding-top: var(--space-2xl);
}

.a227-work {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--space-3xl) var(--gutter) var(--space-2xl);
  overflow: hidden;
  isolation: isolate;
}
.a227-work-media {
  position: absolute; inset: -6% 0;
  z-index: -2;
  will-change: transform;
}
.a227-work-media img { width: 100%; height: 100%; object-fit: cover; }
.a227-scrim { position: absolute; inset: 0; z-index: -1; background: var(--scrim); pointer-events: none; }

/* Le numéro : gigantesque, en contour, posé dans la photographie. */
.a227-work-index {
  position: absolute; z-index: 0;
  top: 4vw; right: var(--gutter);
  font-family: var(--ff-grot);
  font-weight: var(--fw-mega-grot);
  font-size: var(--fs-workindex);
  line-height: .8;
  letter-spacing: var(--ls-mega-grot);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(242, 240, 234, .55);
  pointer-events: none;
}
@supports not (-webkit-text-stroke: 1px black) {
  .a227-work-index { color: rgba(242, 240, 234, .3); }
}
.a227-work:nth-child(odd) .a227-work-index { right: auto; left: var(--gutter); }

.a227-work-cap { position: relative; z-index: 1; max-width: var(--wide); width: 100%; margin: 0 auto; }
.a227-work-kicker {
  font-family: var(--ff-mono); font-weight: 300;
  font-size: var(--fs-mono-sm); letter-spacing: var(--ls-mono);
  color: var(--on-black-muted);
  margin-bottom: var(--space-sm);
}
.a227-work-name {
  font-family: var(--ff-serif);
  font-weight: var(--fw-serif);
  font-size: var(--fs-workname);
  line-height: 1;
  letter-spacing: var(--ls-serif);
}
.a227-work-lede { margin-top: var(--space-md); max-width: 44ch; font-size: var(--fs-lede); }

/* La planche est rigoureusement identique a ce qu'elle etait : aucune
   mention ajoutee. C'est le NOM du projet qui porte le lien — il etait deja
   la — et son `::after` qui rend toute la section cliquable.

   Le lien ENVELOPPE le masque au lieu d'etre place dedans : `.a227-mask`
   porte `overflow: hidden` pour l'animation du nom, et un `::after` etendu
   depuis l'interieur y serait rogne. Enveloppant, il se positionne contre
   `.a227-work` (seul ancetre positionne) et couvre la planche entiere.

   Un seul lien par realisation dans l'arbre d'accessibilite, et son nom
   accessible est le nom du projet — pas un « VOIR LE PROJET » repete six
   fois. Le curseur personnalise reagit deja aux `a` : le survol reste la
   seule indication, comme demande. */
.a227-work-link { display: block; color: inherit; }
/* `inset: 0` ne suffirait PAS : le pseudo-element se positionne contre le
   plus proche ancetre positionne, qui est `.a227-work-cap` — laquelle doit
   rester `position: relative` pour passer devant le numero geant. La legende
   n'occupant que le bas de la planche, seul ce bas aurait ete cliquable.
   On deborde donc largement dans les quatre directions : `.a227-work` porte
   `overflow: hidden`, qui recadre la zone EXACTEMENT sur la planche. */
.a227-work-link::after {
  content: ''; position: absolute; inset: -100vh -100vw; z-index: 2;
}
.a227-work-link:focus-visible { outline-offset: 6px; }

/* Rien ne bouge au repos ; seul le survol signale la cible. */
.a227-work-name { transition: color var(--dur-base) var(--ease-out); }
.a227-work:hover .a227-work-name { color: var(--blue-black); }

/* ==========================================================================
   04 · APPROCHE — papier appuyé, lignes tendues
   ========================================================================== */

.a227-approche { background: var(--paper-2); padding: var(--space-4xl) 0; }

/* Le rythme éditorial : le titre tient la colonne de gauche pendant que le
   contenu défile à droite. */
.a227-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-2xl) var(--space-4xl);
  align-items: start;
}
.a227-split-head { position: sticky; top: var(--space-2xl); }
.a227-split-head .a227-h2 { margin-bottom: 0; }
.a227-split-intro {
  max-width: 46ch;
  color: var(--ink-muted);
  margin-bottom: var(--space-2xl);
}

.a227-acc { border-top: 1px solid var(--line); }
.a227-acc-item { border-bottom: 1px solid var(--line); }

.a227-acc-item summary {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-micro) var(--ease-out);
}
.a227-acc-item summary::-webkit-details-marker { display: none; }
.a227-acc-item summary:hover { color: var(--blue); }
.a227-acc-item summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

.a227-acc-num {
  font-family: var(--ff-mono); font-weight: 400;
  font-size: var(--fs-mono); letter-spacing: var(--ls-mono);
  color: var(--blue);
}
.a227-acc-name {
  font-family: var(--ff-grot);
  font-weight: var(--fw-grot);
  font-size: var(--fs-step);
  letter-spacing: var(--ls-grot);
}
.a227-acc-time {
  font-family: var(--ff-mono); font-weight: 300;
  font-size: var(--fs-mono-sm); letter-spacing: var(--ls-mono);
  color: var(--ink-muted);
}

/* Le signe + qui devient − : deux traits, aucun glyphe. */
.a227-acc-sign { position: relative; width: 14px; height: 14px; justify-self: end; }
.a227-acc-sign::before,
.a227-acc-sign::after {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 100%; height: 1px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-out);
}
.a227-acc-sign::after { transform: rotate(90deg); }
.a227-acc-item[open] .a227-acc-sign::after { transform: rotate(0deg); }

.a227-acc-panel { padding: 0 0 var(--space-lg) calc(48px + var(--space-md)); }
.a227-acc-panel p { max-width: 54ch; color: var(--ink-muted); font-size: var(--fs-sm); }

@media (max-width: 860px) {
  .a227-split { grid-template-columns: minmax(0, 1fr); }
  .a227-split-head { position: static; }
  .a227-acc-item summary { grid-template-columns: 40px minmax(0, 1fr) 20px; row-gap: var(--space-2xs); }
  .a227-acc-time { grid-column: 2; }
  .a227-acc-panel { padding-left: calc(40px + var(--space-md)); }
}

/* ==========================================================================
   06 · PRESSE — la Didone pour les voix
   ========================================================================== */

.a227-presse { padding: var(--space-4xl) 0; }
.a227-quote { padding: var(--space-2xl) 0; border-top: 1px solid var(--line); }
.a227-quote:last-child { border-bottom: 1px solid var(--line); }
.a227-quote p {
  font-family: var(--ff-serif);
  font-weight: var(--fw-serif);
  font-size: var(--fs-quote);
  line-height: 1.3;
  letter-spacing: var(--ls-serif);
  max-width: 30ch;
  margin-bottom: var(--space-sm);
}
.a227-quote cite {
  font-style: normal;
  font-family: var(--ff-mono); font-weight: 300;
  font-size: var(--fs-mono-sm); letter-spacing: var(--ls-mono);
  color: var(--ink-muted);
}

/* ==========================================================================
   07 · CONTACT — noir, le logo en majesté
   ========================================================================== */

.a227-contact {
  background: var(--black);
  color: var(--on-black);
  padding: var(--space-4xl) 0 0;
  overflow: hidden;
}
.a227-contact .a227-folio { color: var(--on-black-muted); border-bottom-color: var(--line-black); }
.a227-contact-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.a227-contact-in .a227-folio { align-self: stretch; }

.a227-contact-logo {
  width: min(360px, 62vw); height: auto;
  filter: invert(1) brightness(1.04);
  margin-bottom: var(--space-2xl);
}
.a227-contact-title em { color: var(--blue-black); }

.a227-contact-data {
  display: flex; flex-direction: column; gap: var(--space-2xs);
  margin-bottom: var(--space-3xl);
  font-family: var(--ff-mono); font-weight: 300;
  font-size: var(--fs-mono); letter-spacing: var(--ls-mono);
  color: var(--on-black-muted);
}
.a227-contact-data a { text-decoration: underline; text-decoration-color: var(--line-black); text-underline-offset: 4px; }
.a227-contact-data a:hover { color: var(--blue-black); }

.a227-form {
  display: flex; flex-direction: column; gap: var(--space-lg);
  width: min(460px, 100%);
  text-align: left;
}
.a227-field { display: flex; flex-direction: column; gap: var(--space-xs); }
.a227-field label {
  font-family: var(--ff-mono); font-weight: 300;
  font-size: var(--fs-mono-sm); letter-spacing: var(--ls-mono);
  color: var(--on-black-muted);
}
.a227-field input,
.a227-field textarea {
  font: inherit;
  font-size: 16px;               /* < 16px : Safari iOS zoome au focus       */
  color: var(--on-black);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-black);
  border-radius: 0;
  padding: var(--space-xs) 0;
  width: 100%;
  transition: border-color var(--dur-micro) var(--ease-out);
}
.a227-field textarea { resize: vertical; }
.a227-field input:focus-visible,
.a227-field textarea:focus-visible { outline: 2px solid var(--blue-black); outline-offset: 4px; }
.a227-field [aria-invalid="true"] { border-bottom-color: var(--blue-black); }
.a227-field-err {
  font-family: var(--ff-mono); font-weight: 300;
  font-size: var(--fs-mono-sm); letter-spacing: var(--ls-mono);
  color: var(--blue-black);
}

.a227-submit { align-self: center; background: var(--paper); color: var(--ink); }
.a227-submit:hover { background: var(--blue); color: var(--on-blue); }
.a227-submit:focus-visible { outline: 2px solid var(--on-black); outline-offset: 4px; }
.a227-form-status {
  text-align: center;
  font-family: var(--ff-mono); font-weight: 300;
  font-size: var(--fs-mono-sm); letter-spacing: var(--ls-mono);
  color: var(--on-black-muted);
  min-height: 1.7em;
}

.a227-footline {
  align-self: stretch;
  display: flex; justify-content: space-between; gap: var(--space-md);
  margin: var(--space-3xl) 0 var(--space-lg);
  font-family: var(--ff-mono); font-weight: 300;
  font-size: var(--fs-mono-sm); letter-spacing: var(--ls-mono);
  color: var(--on-black-muted);
  text-align: left;
}
.a227-footline a { text-decoration: underline; text-underline-offset: 4px; }
.a227-footline a:hover { color: var(--blue-black); }

.a227-wordmark { overflow: hidden; }
.a227-wordmark p {
  margin-bottom: -.24em;
  font-family: var(--ff-serif);
  font-weight: var(--fw-mega);
  font-optical-sizing: auto;
  font-size: var(--fs-wordmark);
  line-height: .9;
  letter-spacing: var(--ls-mega);
  white-space: nowrap;
  text-align: center;
  color: var(--on-black);
}

/* ==========================================================================
   Curseur — la touche bleue qui suit la main
   ========================================================================== */

.a227-cursor {
  display: none;
  position: fixed; z-index: 250; top: 0; left: 0;
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--blue);
  pointer-events: none;
  opacity: 0;
}
html.a227-cursor-on .a227-cursor { display: block; }
html.a227-cursor-on.a227-cursor-live .a227-cursor { opacity: 1; }

/* ==========================================================================
   États masqués — UNIQUEMENT sous .a227-js. Sans JS, tout reste visible.
   ========================================================================== */

html.a227-js [data-reveal] { opacity: 0; transform: translateY(26px); }
html.a227-js [data-fade] { opacity: 0; }
html.a227-js [data-letter] { transform: translateY(112%); }
html.a227-js [data-hero-media] { clip-path: inset(100% 0 0 0); }
html.a227-js .a227-mask > span { transform: translateY(110%); }
html.a227-js .a227-rule { transform: scaleX(0); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .a227-split { gap: var(--space-2xl); }
}

@media (max-width: 860px) {
  .a227-head-side { display: none; }
  .a227-head-toggle { display: block; }
  .a227-head-brand { position: static; transform: none; }
  .a227-head-brand img { height: 32px; }
  .a227-head { justify-content: space-between; }

  .a227-hero { padding-top: var(--space-3xl); }
  .a227-hero-media { width: 90vw; margin-top: -7vw; }

  .a227-work-index { font-size: clamp(90px, 26vw, 180px); }
  .a227-numeral-text { font-size: 52vw; }
}

@media (max-width: 560px) {
  .a227-footline { flex-direction: column; gap: var(--space-xs); }
}

/* ==========================================================================
   Reduced motion — tout se lit sans une seule animation
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ==========================================================================
   MOBILE — la passe dédiée
   --------------------------------------------------------------------------
   Placée en FIN de feuille, à égalité de spécificité avec les media queries
   qui la précèdent : c'est l'ordre qui tranche.

   La base répondait déjà (aucun débordement, aucun texte sous 11 px). Ce
   bloc traite ce que la seule fluidité ne règle pas : le rythme vertical du
   hero, qui laissait 411 px de vide sous le bouton, et les cibles tactiles,
   dont douze passaient sous 40 px.
   ========================================================================== */

@media (max-width: 860px) {

  /* --- Hero : le mot doit dégager le bandeau ------------------------------
     Le logo descend à 52 px ; à `--space-3xl` (48 px) le mot passait dessous
     et le chevauchait de 4 px. */
  .a227-hero { padding-top: clamp(76px, 11vh, 104px); }

  /* La photographie prend de la présence : en 16/9 elle ne faisait que
     190 px de haut sur un écran de 812, perdue au milieu du papier. */
  .a227-hero-media img { aspect-ratio: 4 / 5; max-height: 44svh; }

  /* `auto` plutôt qu'une marge fixe : le bouton descend au bas du hero et
     absorbe tout le vide résiduel, quelle que soit la hauteur d'écran. Il
     croise alors l'aplat bleu — pastille noire sur bleu, le même
     recouvrement que l'image sur les cellules de l'ouverture. */
  .a227-hero-cta { margin-top: auto; }

  /* --- Cibles tactiles ---------------------------------------------------
     Le padding agrandit la zone, la marge négative annule son effet sur la
     mise en page : rien ne bouge à l'œil, tout devient atteignable au doigt. */
  .a227-head-toggle { padding: 13px 0; margin: -13px 0; }
  .a227-head-brand { padding: 6px 0; margin: -6px 0; }

  .a227-contact-data a,
  .a227-reperes-list a { display: inline-block; padding: 11px 0; margin: -11px 0; }

  .a227-footline a { display: inline-block; padding: 13px 0; margin: -6px 0; }

  /* --- Réalisations ------------------------------------------------------
     Le numéro géant mangeait la moitié de la planche sur un écran étroit. */
  .a227-work-index { font-size: clamp(72px, 30vw, 150px); }
  .a227-work-lede { max-width: 34ch; }
}

/* Très petits écrans : la fiche de projet passe en pile plutôt que de serrer
   deux colonnes sur 320 px. */
@media (max-width: 420px) {
  .a227-proj-fiche > div { flex-direction: column; gap: var(--space-2xs); }
  .a227-proj-fiche dd { text-align: left; }
}