/* La page projet, version 2026 — Figma 366:56941 (Project-iteration-x).

   Une refonte, pas un ajustement. L'ancienne page projet est une planche large
   de 1232 avec une barre qui porte les vignettes des autres projets ; celle-ci
   est une colonne de lecture de 544, centrée, avec un sommaire fixé à gauche.
   Rien de la géométrie ne se transpose, d'où une feuille à part plutôt qu'un
   empilement de surcharges sur `project.css`.

   Les trois mesures qui commandent tout le reste :

     colonne     544, centrée dans les 1280 du cadre (368 de chaque côté)
     débord      88 de chaque côté pour les images, qui font donc 720
     rythme      64 entre les blocs d'une section

   Tout le reste en découle. */

:root {
  /* La colonne de lecture et son débord. Les images ne sont pas « pleine
     largeur » : elles sortent de la colonne d'une valeur fixe, la même
     partout, ce qui donne au texte sa marge et aux images leur respiration
     sans jamais toucher le bord de l'écran. */
  --p26-column: 544px;
  --p26-bleed: 88px;
  /* Le second débord, plus court, de Phase 2 (407:11316). En variable comme le
     premier : sur téléphone les deux doivent tomber à zéro ensemble. */
  --p26-bleed-48: 48px;
  --p26-section-gap: 64px;

  /* Le sommaire de gauche : 207 de large, dont 24 de retrait pour le texte. */
  --p26-menu-w: 207px;
  --p26-menu-inset: var(--space-24);

  /* La barre du haut, et l'air au-dessus du premier bloc. */
  --p26-nav-h: 80px;
  --p26-top: 128px;

  /* H0 — le titre de projet. 32/38, resserré de 2% (366:56974). */
  --h0-size: 32px;
  --h0-line: 38px;

  /* L'échelle de cette page. Le corps y est en 16/24 et non le 16/22 des
     anciennes pages : c'est une page de lecture, la ligne y respire plus. */
  --scale-22: 22px;
  --scale-30: 30px;
  --scale-24: 24px;
  --scale-11: 11px;
  --scale-18: 18px;
}

/* ── Le sol ──────────────────────────────────────────────────────────────── */

.p26 {
  background: var(--primary-50);
  min-height: 100vh;
}

/* ── La barre du haut (366:57378) ────────────────────────────────────────────

   Plus discrète que celle des anciennes pages : 13/20 au lieu de 14/22, un
   rayon de 6 au lieu de 12. Elle se tient au-dessus de la lecture sans la
   disputer. */

.p26-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  height: var(--p26-nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-24);
}

.p26-nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.p26-nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) 10px;
  border-radius: var(--radius-6);
  font-family: var(--font-body);
  font-weight: var(--weight-book);
  font-size: 13px;
  line-height: 20px;
  color: var(--nav-default);
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  /* Deux couches, comme partout ailleurs sur le site : un voile blanc à 80%
     et un gris par-dessus. Un seul aplat ne donne pas le même gris sur un
     fond clair et sur une image. */
  background-color: transparent;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),
    linear-gradient(var(--glassy-white-200), var(--glassy-white-200));
  transition: background-image var(--hover-travel) var(--hover-ease);
}

/* Le nom, à gauche : même bouton mais un gris plein et un flou plus court. */
.p26-nav-name {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background-image:
    linear-gradient(rgba(203, 203, 203, 0.8), rgba(203, 203, 203, 0.8));
}

.p26-nav-item:hover {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.28)),
    linear-gradient(var(--glassy-white-200), var(--glassy-white-200));
}

.p26-nav-name:hover {
  background-image:
    linear-gradient(rgba(180, 180, 180, 0.9), rgba(180, 180, 180, 0.9));
}

/* ── Le sommaire de gauche (413:2948) ────────────────────────────────────────

   Fixé, pas collant : il ne défile jamais avec la page. Il commence sous la
   barre et se donne le droit de défiler tout seul si la liste dépasse — elle
   fait déjà 624 de haut, et un portable en paysage n'a pas cette place. */

.p26-menu {
  position: fixed;
  top: 78px;
  left: 0;
  z-index: 15;
  width: var(--p26-menu-w);
  max-height: calc(100vh - 78px - var(--space-24));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: 0 var(--p26-menu-inset);
}

.p26-menu::-webkit-scrollbar { display: none; }

.p26-menu a {
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: var(--weight-book);
  font-size: var(--body-14-size);
  line-height: var(--body-14-line);
  color: var(--text-secondary-light);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--hover-travel) var(--hover-ease);
}

.p26-menu a:hover,
.p26-menu a.is-active { color: var(--text-project-date); }

/* Le titre d'une phase : ce n'est pas un lien, c'est une étiquette. 11px en
   capitales, interlettré de 2% — le seul endroit du site où l'on monte en
   capitales, et c'est ce qui le distingue des items sans avoir à l'indenter. */
.p26-menu-phase {
  /* Un <p> garde ses marges par defaut — 1em en haut et en bas, soit 11 de
     chaque cote a cette taille. Le titre de phase faisait donc 40 de haut au
     lieu de 18, quatre fois : 88 de vide dans un sommaire qui doit faire 624.
     Mesure au navigateur, groupes a 130/174/108/108 contre 108/152/86/86. */
  margin: 0;
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--scale-11);
  line-height: var(--scale-18);
  letter-spacing: 0.22px;
  text-transform: uppercase;
  color: #aaa9a9;
}

.p26-menu-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.p26-menu-sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: var(--space-16);
}

/* ── Le corps ────────────────────────────────────────────────────────────────

   544 de large, centré dans la fenêtre — et non dans l'espace qui reste à
   droite du sommaire. C'est voulu : le sommaire flotte au-dessus de la marge
   gauche, il ne pousse pas la lecture. À 1280 il reste 161 entre lui et la
   colonne. */

.p26-body {
  width: var(--p26-column);
  margin: 0 auto;
  padding-top: var(--p26-top);
  display: flex;
  flex-direction: column;
}

.p26-section {
  display: flex;
  flex-direction: column;
  gap: var(--p26-section-gap);
  align-items: center;
  width: 100%;
}

/* Le filet entre deux sections. 1px sur toute la colonne, avec 80 de part et
   d'autre : la maquette les pose à 81 de la fin d'une section et 81 avant la
   suivante (366:56955, y = 1624 pour une section qui finit à 1544). */
.p26-sep {
  width: 100%;
  height: 1px;
  margin: 80px 0;
  border: 0;
  background: var(--primary-100);
}

/* ── Le titre de la page (366:56957) ─────────────────────────────────────── */

.p26-headtitle {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  align-items: flex-start;
  width: 100%;
}

.p26-dateline p {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-book);
  font-size: var(--body-16-size);
  line-height: var(--scale-24);
  letter-spacing: -0.16px;
}

.p26-date { color: var(--text-project-date); }
.p26-place { color: var(--text-project-location); }

/* Les deux lignes du titre sont un seul texte dans le composant : le nom du
   projet en gris, la phrase en foncé, même taille et même interligne. D'où un
   seul h1 qui porte les deux, et non un titre plus un sous-titre. */
.p26-title {
  margin: 0;
  font-family: var(--font-headings);
  font-weight: var(--weight-book);
  font-size: var(--h0-size);
  line-height: var(--h0-line);
  letter-spacing: -0.64px;
  color: var(--text-project-date);
}

.p26-title .is-name {
  display: block;
  color: var(--text-project-location);
}

/* ── Les images qui débordent ────────────────────────────────────────────────

   88 de chaque côté, donc 720 au lieu de 544. Écrit en marges négatives et non
   en largeur fixe, pour que le bloc suive la colonne si elle change. */

.p26-bleed {
  width: calc(100% + var(--p26-bleed) * 2);
  margin-inline: calc(var(--p26-bleed) * -1);
  max-width: none;
}

/* La cover : un cadre gris clair, et l'image dedans plus grande que lui, donc
   rognée. La maquette pose un intérieur de 906 dans une boîte de 688 — c'est
   le rognage qui fait le cadrage, pas un recadrage du fichier. */
.p26-cover {
  aspect-ratio: 720 / 540;
  padding: var(--space-16);
  border: 1px solid var(--primary-100);
  border-radius: var(--radius-12);
  background: #dadada;
  overflow: clip;
  position: relative;
}

/* Posée en absolu, et centrée sur les deux axes. En flux, une image plus haute
   que la place disponible pousse son cadre au lieu d'être coupée par lui : le
   cadre passait à 576 au lieu de 540. Hors flux, il garde sa proportion et
   c'est bien lui qui décide de ce qu'on voit — ce que la maquette demande, avec
   un intérieur de 906x544 dans une boîte de 688x508. */
.p26-cover-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(906 / 688 * (100% - var(--space-16) * 2));
  aspect-ratio: 906 / 544;
  border-radius: var(--radius-12) var(--radius-12) 0 0;
  overflow: clip;
}

.p26-cover-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── L'introduction (370:2938) ───────────────────────────────────────────── */

.p26-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  align-items: flex-start;
  width: 100%;
}

.p26-intro-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
}

.p26-h2 {
  margin: 0;
  font-family: var(--font-headings);
  font-weight: var(--weight-book);
  font-size: var(--scale-22);
  line-height: var(--scale-30);
  letter-spacing: -0.22px;
  color: var(--text-about-title);
}

.p26-lede {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--body-16-size);
  line-height: var(--scale-24);
  color: var(--text-about-body);
}

/* ── Les lignes de méta (370:2940) ───────────────────────────────────────────

   Le libellé est aligné à DROITE dans une colonne de 140, et les valeurs
   commencent 4 plus loin. C'est ce qui donne la gouttière nette au milieu :
   les deux colonnes se regardent au lieu de s'aligner à gauche toutes les
   deux. */

.p26-metas {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  width: 100%;
}

.p26-meta {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  width: 100%;
}

.p26-meta--centred { align-items: center; }

.p26-meta-label {
  flex: none;
  width: 140px;
  margin: 0;
  /* A gauche, verifie sur le rendu Figma et non sur la classe.

     Le composant porte `items-end`, dont j'avais deduit un alignement a
     droite — mais le paragraphe a l'interieur fait toute la largeur de la
     colonne, donc `items-end` ne deplace rien et le texte reste a gauche. A
     droite, « Team » venait coller l'anneau de la premiere photo et les trois
     libelles formaient un bord dechiquete contre leurs valeurs. */
  text-align: left;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--body-16-size);
  line-height: var(--scale-24);
  color: var(--text-project-meta-label);
}

.p26-meta-values {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
}

.p26-meta-values p {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--body-16-size);
  line-height: var(--scale-24);
  color: var(--text-project-key-label);
}

/* ── L'équipe (163:22746) ────────────────────────────────────────────────────

   Des pastilles de 64 qui portent une image de 54 : les 4 de marge sont la
   place de l'anneau bleu que porte la première. Sans cette marge, l'anneau
   collerait la photo et se lirait comme un contour de l'image. */

.p26-team {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-start;
  align-content: flex-start;
}

.p26-avatar {
  position: relative;
  width: 64px;
  height: 64px;
  padding: var(--space-4);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.p26-avatar--lead { border: 1px solid var(--border-action); }

.p26-avatar img {
  width: 54px;
  height: 54px;
  border-radius: 100px;
  object-fit: cover;
  display: block;
}

/* Le nom, sous la pastille, au survol seulement. */
.p26-avatar span {
  position: absolute;
  left: 50%;
  bottom: -34px;
  transform: translateX(-50%);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--space-4);
  background: var(--surface-tooltip);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--body-14-size);
  line-height: 18px;
  color: var(--primary-white);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--hover-travel) var(--hover-ease);
}

.p26-avatar:hover span { opacity: 1; }

/* ── Sous 1140 : le sommaire n'a plus la place ───────────────────────────────

   La colonne est centrée dans la fenêtre, donc à 1140 il reste (1140-544)/2 =
   298 de chaque côté : le sommaire tient encore. En dessous il chevaucherait
   la lecture, alors il s'efface — le contenu reste atteignable au défilement,
   et la barre du haut garde ses liens. */

@media (max-width: 1140px) {
  .p26-menu { display: none; }
}

/* ── Sous 700 : la colonne devient l'écran ───────────────────────────────────

   Le débord des images disparaît : sur un téléphone il n'y a pas de marge à
   déborder. La colonne prend la largeur moins les 16 de page, et les images
   s'y tiennent. */

@media (max-width: 700px) {
  :root {
    --p26-bleed: 0px;
    --p26-bleed-48: 0px;
    --p26-top: 96px;
    --p26-section-gap: 48px;
  }

  .p26-body {
    width: 100%;
    padding-inline: var(--space-16);
  }

  .p26-nav { padding: var(--space-16); }

  .p26-title { font-size: var(--h2-size); line-height: var(--h2-line); letter-spacing: -0.48px; }

  /* Le libellé passe au-dessus de ses valeurs : à 140 de large sur un écran de
     393, la colonne de droite n'aurait plus que 209. */
  .p26-meta { flex-direction: column; gap: var(--space-4); }
  .p26-meta-label { width: 100%; text-align: left; }

  .p26-sep { margin: 48px 0; }
}

/* ── Moins de mouvement ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .p26-nav-item,
  .p26-menu a,
  .p26-avatar span { transition: none; }
}

/* ── Les blocs de texte des sections (666:11291) ─────────────────────────────

   Trois niveaux, toujours dans cet ordre : une étiquette de rubrique en gris,
   un titre, puis le corps. L'étiquette est ce qui remplace les gros titres de
   l'ancienne page — elle nomme la rubrique sans lui donner de poids. */

.p26-textsection {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  align-items: flex-start;
  width: 100%;
}

/* La variante resserrée : 12 au lieu de 24 entre le titre et le corps. La
   maquette s'en sert quand le texte est court (666:11302). */
.p26-textsection--tight { gap: var(--space-project-gap); }

.p26-textsection-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-project-gap);
  width: 100%;
}

/* L'étiquette de rubrique — « Problem », « Solution ». 14/20, la hauteur de sa
   propre ligne et rien de plus. */
.p26-eyebrow {
  margin: 0;
  display: flex;
  align-items: center;
  height: var(--h4-line);
  font-family: var(--font-headings);
  font-weight: var(--weight-book);
  font-size: var(--h4-size);
  line-height: var(--h4-line);
  color: var(--text-tertiary);
}

.p26-textsection-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
}

/* ── Une image et sa légende (370:2937) ──────────────────────────────────────

   Le cadre porte la proportion et la couleur ; l'image, à l'intérieur, est
   posée à sa taille réelle et centrée, donc légèrement rognée sur les bords.
   C'est ce que fait la maquette : le calque intérieur y est placé à 1:1 et
   déborde de 88 en largeur et 66 en hauteur, pas mis à l'échelle.

   D'où une largeur en pourcentage du cadre pour chaque image plutôt qu'un
   `object-fit: cover` — celui-ci recadrerait selon la proportion du cadre et
   non selon le cadrage choisi dans le fichier. */

.p26-figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-project-gap);
  align-items: center;
  width: 100%;
  margin: 0;
}

.p26-frame {
  position: relative;
  width: 100%;
  border: 1px solid var(--primary-100);
  border-radius: var(--radius-12);
  overflow: clip;
}

.p26-frame img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: none;
  display: block;
}

/* Chaque cadre a sa proportion et son fond, relevés un par un. */
.p26-frame--720x539 { aspect-ratio: 720 / 539; background: #d8d8d9; }
.p26-frame--610x457 { aspect-ratio: 610 / 457; background: #dad3f2; }

/* Et chaque image sa taille dans son cadre, en pourcentage de sa largeur :
   552 sur 544 pour la première, 652 sur 544 pour la seconde. */
.p26-frame img.is-552 { width: calc(552 / 544 * 100%); aspect-ratio: 552 / 414; }
.p26-frame img.is-652 { width: calc(652 / 544 * 100%); aspect-ratio: 652 / 489; }

/* La légende — en italique, du gris des libellés. */
.p26-caption {
  margin: 0;
  width: 100%;
  font-family: var(--font-headings);
  font-weight: var(--weight-book);
  font-style: italic;
  font-size: var(--body-16-size);
  line-height: var(--scale-24);
  color: var(--text-project-meta-label);
}

/* Un groupe d'images : 40 entre elles, et non les 12 qui séparent une image de
   sa propre légende (552:2972). */
.p26-images {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  width: 100%;
}

/* ── Brand Identity (552:2991) ───────────────────────────────────────────── */

/* Le titre de cette section est un cran au-dessus des autres : 28/34 là où les
   rubriques prennent 22/30. Écrit ici et non dans les tokens — `--h1-line` y
   vaut 36, ce qu'utilisent les anciennes pages, et cette page a sa propre
   échelle. */
.p26-h1 {
  margin: 0;
  font-family: var(--font-headings);
  font-weight: var(--weight-book);
  font-size: var(--h1-size);
  line-height: 34px;
  color: var(--text-about-title);
}

/* La légende reste dans la colonne même quand son image en sort : dans la
   maquette elle fait 544 sous une image de 720, centrée sous elle. */
.p26-caption { max-width: var(--p26-column); }

/* Une figure qui déborde. Écrit sur les deux classes à la fois, parce que
   `.p26-figure` porte `width: 100%` et est déclarée après `.p26-bleed` : à
   spécificité égale la dernière gagne, et le cadre restait à 544 au lieu de
   720 — la section sortait 98 trop courte. Deux classes tranchent quel que
   soit l'ordre des règles. */
.p26-figure.p26-bleed,
.p26-images.p26-bleed {
  width: calc(100% + var(--p26-bleed) * 2);
  margin-inline: calc(var(--p26-bleed) * -1);
}

/* Un groupe où les images sont à 32 l'une de l'autre (552:10526), contre les
   40 du groupe précédent. */
.p26-images--32 { gap: var(--space-32); }

.p26-frame--720x432 { aspect-ratio: 720 / 432; background: var(--primary-100); }
.p26-frame--544x326 { aspect-ratio: 544 / 326.4; background: #e7e5ec; }

/* Le seul cadre en dégradé de la section, du violet au rose. */
.p26-frame--544x326-grad {
  aspect-ratio: 544 / 326.4;
  background: linear-gradient(180deg, #e5ddf7 0%, #f6ddf2 100%);
}

/* Celle-ci remplit son cadre au lieu d'y être posée : 546 pour 544. */
.p26-frame img.is-546 { width: calc(546 / 544 * 100%); aspect-ratio: 546 / 327; }
.p26-frame img.is-398 { width: calc(398 / 544 * 100%); aspect-ratio: 1 / 1; }
/* Et celle du logo occupe tout son cadre, qui déborde déjà de la colonne. */
.p26-frame img.is-720 { width: 100%; aspect-ratio: 720 / 432; }

/* ── Des paragraphes qui appartiennent au même texte ─────────────────────────

   Dans la maquette, deux paragraphes voisins sont souvent un seul calque de
   texte : ils se suivent sans rien entre eux, ou séparés par une ligne vide.
   Ce n'est pas le même objet que deux blocs de texte distincts, qui eux ont
   leur écart de 16.

   Mesuré : le premier bloc de Brand Identity fait 144 (6 lignes bout à bout)
   et le troisième 216 (5 lignes, une vide, 3 lignes). Avec un écart de 16 je
   sortais 160 et 208. */

.p26-prose {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Une ligne vide entre les deux, et pas un écart choisi : c'est la hauteur de
   ligne du corps, donc elle suit le texte si l'échelle change. */
.p26-prose--spaced p + p { margin-top: var(--scale-24); }

/* ── Les sous-titres d'une phase (666:11267) ─────────────────────────────────

   20/28, entre le titre de section (28/34) et le corps. Ils découpent une
   phase en moments — « The design challenge », « The First Pivot ». */

.p26-h3 {
  margin: 0;
  font-family: var(--font-headings);
  font-weight: var(--weight-book);
  font-size: 20px;
  line-height: 28px;
  color: var(--text-about-title);
}

/* Un bloc titre + corps, 12 entre les deux (666:11266). */
.p26-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-project-gap);
  width: 100%;
}

/* Le même, avec 32 avant le groupe d'images qui le suit (396:9648). */
.p26-block-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  width: 100%;
}

/* ── Un panneau qui porte un média (379:9589) ────────────────────────────────

   Un aplat coloré à la proportion voulue, et le média posé dedans à la
   largeur du panneau. Dans la maquette le média remplit exactement le
   panneau — les deux proportions coïncident au dixième — donc il n'y a rien
   à recadrer, seulement à laisser remplir. */

.p26-panel {
  position: relative;
  width: 100%;
  border: 1px solid var(--primary-100);
  border-radius: var(--radius-12);
  background: #f1edff;
  overflow: clip;
}

.p26-panel video,
.p26-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p26-panel--720x452 { aspect-ratio: 720 / 452; }
.p26-panel--720x445 { aspect-ratio: 720 / 445; }
.p26-panel--722x962 { aspect-ratio: 722 / 962; }

/* ── La rangée d'itérations (396:9638) ───────────────────────────────────────

   Quatre vignettes qui se partagent la largeur, 8 entre elles, à la proportion
   des cartes du site. Elles sont noires dans la maquette : les visuels ne sont
   pas encore posés, la place l'est. */

.p26-tiles {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  width: 100%;
}

.p26-tiles > * {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 85 / 64;
  border-radius: var(--radius-12);
  background: var(--primary-black);
  overflow: clip;
}

.p26-tiles img,
.p26-tiles video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Une liste à puces dans le corps (666:11184) ─────────────────────────────

   Les points sont séparés par une ligne vide, comme dans la maquette, et
   chacun s'ouvre sur une amorce en gras. */

.p26-list {
  margin: var(--scale-24) 0 0;
  padding-left: 24px;
  list-style: disc;
}

.p26-list li {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--body-16-size);
  line-height: var(--scale-24);
  color: var(--text-about-body);
}

.p26-list li + li { margin-top: var(--scale-24); }

.p26-list strong {
  font-family: var(--font-headings);
  font-weight: var(--weight-book);
  color: #1e1e1e;
}

/* ── Phase 2 : le tableau de bord (396:9661) ─────────────────────────────────

   Cette section apporte trois choses que les précédentes n'avaient pas.

   1. Trois largeurs de débord, pas une. Les panneaux sortent de la colonne de
      88 (720 de large), de 48 (640), ou pas du tout (544). Ce n'est pas une
      valeur unique déclinée : chaque bloc a la sienne, relevée une par une.

   2. Une capture posée DANS le panneau, avec son ombre. Là où les sections
      précédentes laissaient le média remplir son cadre, ici l'écran flotte au
      milieu d'un aplat : 672 sur un panneau de 720, avec un rayon propre et
      l'ombre `Mockup-shadow` du système.

   3. Un troisième écart entre images — 48, à côté des 40 et des 32 déjà en
      place. */

.p26-bleed--48,
.p26-figure.p26-bleed--48,
.p26-images.p26-bleed--48 {
  width: calc(100% + var(--p26-bleed-48) * 2);
  margin-inline: calc(var(--p26-bleed-48) * -1);
}

.p26-images--48 { gap: 48px; }

/* Un panneau gris qui présente une capture flottante. */
.p26-panel--shot {
  background: var(--primary-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* La capture elle-même : 672 sur 720, centrée, avec l'ombre du système. Posée
   en flux et non en absolu — c'est elle qui doit garder sa proportion, le
   panneau l'entoure. */
/* Ecrit sur le panneau ET la classe : `.p26-panel img` porte une classe et un
   type, donc il l'emporte sur une classe seule. Sans ca l'image recevait
   `inset: 0` et 100% du panneau tout en gardant le decalage de moitie de cette
   regle — elle sortait pleine taille, calee en haut a gauche. */
.p26-panel img.p26-shot,
.p26-panel video.p26-shot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(672 / 720 * 100%);
  height: auto;
  border-radius: var(--radius-6);
  box-shadow: 0 4px 24px 8px rgba(0, 0, 0, 0.04);
  display: block;
  max-width: none;
}

/* Deux captures portent un rayon de 4 et non de 6 (396:9732, 440:10367). */
.p26-panel img.p26-shot--r4,
.p26-panel video.p26-shot--r4 { border-radius: 4px; }

.p26-panel--720x432 { aspect-ratio: 720 / 432; }
.p26-panel--640x479 { aspect-ratio: 640 / 479; background: #d8d8d9; }
.p26-panel--610x813 { aspect-ratio: 610 / 813; background: #d8d8d9; }

/* Le panneau du flux de travail : l'image y remplit toute la largeur, sans
   marge verticale (431:3320). */
/* 329 et non 327 : la proportion porte sur la boite entiere, bordure comprise,
   et l'image fait 327 entre les deux traits de 1 (431:3320). */
.p26-panel--flow { background: var(--primary-100); aspect-ratio: 544 / 329; }

/* Le panneau de la recherche : l'image occupe la largeur et donne la hauteur
   (635:10956). */
.p26-panel--search { background: #d8d8d9; aspect-ratio: 544 / 615; }

/* Les images posées à leur taille dans un panneau plus grand. */
.p26-panel img.is-1188 { width: calc(1188 / 640 * 100%); aspect-ratio: 1188 / 549; }
.p26-panel img.is-551  { width: calc(551 / 544 * 100%);  aspect-ratio: 551 / 736; }

/* Une amorce en gras au début d'un paragraphe, comme dans les listes. */
.p26-lede strong {
  font-family: var(--font-headings);
  font-weight: var(--weight-book);
  color: #1e1e1e;
}

/* ── Phase 3 : l'application mobile (440:10368) ──────────────────────────────

   Le panneau des maquettes téléphone est le seul de la page dont le contenu
   est en flux et non posé en absolu : quatre écrans côte à côte dans une
   rangée de 479, sur un panneau qui en fait 544 moins ses 32 de côté. La
   rangée déborde donc de son cadre et s'y trouve coupée — c'est le cadrage
   voulu, les deux derniers téléphones ne se voient qu'à moitié. */

.p26-panel--mobiles {
  background: #e2d2f2;
  padding: 43px var(--space-32);
  display: flex;
  align-items: center;
}

.p26-mockups {
  display: flex;
  gap: var(--space-project-gap);
  align-items: center;
  width: 479px;
  flex: none;
}

/* En flux, contre la règle générale des panneaux qui pose leur média en
   absolu — d'où la remise à `static` ici. */
.p26-panel .p26-mockups img {
  position: static;
  width: 180.8px;
  height: auto;
  aspect-ratio: 180.8 / 393.083;
  flex: none;
  border-radius: var(--radius-16);
  box-shadow: 0 4px 24px 8px rgba(0, 0, 0, 0.04);
  object-fit: cover;
}

.p26-panel--square { aspect-ratio: 1 / 1; background: none; }
.p26-panel--square-grey { aspect-ratio: 1 / 1; background: var(--primary-100); }

/* Un seul téléphone, centré sur son aplat (474:3060). */
/* Meme raison que pour `.p26-shot`. */
.p26-panel img.p26-phone {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(224 / 544 * 100%);
  height: auto;
  aspect-ratio: 224 / 486;
  border-radius: var(--radius-16);
  box-shadow: 0 4px 24px 8px rgba(0, 0, 0, 0.04);
  max-width: none;
  object-fit: cover;
}